/* =========================================================
   Aurea Digital — Sistema de layout estilo Dash Digital Studio
   Build estructural (sin animaciones ni smooth-scroll todavía).
   Solo Home (index.html). estudio.html conserva css/estilo.css.
   Fuente única: Space Grotesk. Todo MAYÚSCULAS, weight 400,
   tracking negativo, anclado a un grid de 8 columnas (gap 23px).
   ========================================================= */

/* =========================================================
   0 · TOKENS
   ========================================================= */
:root {
  /* COLORES — SISTEMA DE DOS TINTAS.
     Solo existen dos tonos en todo el sitio: TINTA #080808 y PAPEL #F4F4F1.
     El texto siempre usa el tono del fondo contrario, nunca blanco ni negro puro.
     Sobre oscuro: fondo = TINTA, texto = PAPEL. Se invierte en .aurea-invert. */
  --aurea-bg:        #080808;   /* TINTA — fondo principal near-black */
  --aurea-bg-alt:    #141413;   /* superficie elevada (cards / media), tinta aclarada */
  --aurea-text:      #F4F4F1;   /* texto = tono del fondo claro, NUNCA blanco puro */
  --aurea-text-soft: #A0A09E;   /* papel mezclado hacia la tinta (~64%) para párrafos */
  --aurea-line:      #262625;   /* líneas divisorias finas sobre oscuro */

  /* TIPOGRAFÍA — display grotesk + sans de lectura */
  --aurea-font:     "Space Grotesk", "Founders Grotesk", sans-serif; /* títulos, subtítulos, etiquetas, nav */
  --aurea-font-read:"Inter", "Space Grotesk", system-ui, sans-serif; /* SOLO textos de lectura (párrafos) */
  --aurea-tracking: -0.03em;    /* tracking negativo en TODOS los títulos */
  --aurea-weight:   400;        /* peso base (títulos, cuerpo, etiquetas) */
  --aurea-weight-sub: 300;      /* subtítulo/nombre: MÁS FINO, para separarlo
                                   del título sin cambiar el tamaño (3 tamaños intactos) */

  /* ===== ESCALA TIPOGRÁFICA UNIFICADA — 3 TIPOS ==================
     Valores IDÉNTICOS en css/aurea.css y css/estilo.css (las dos
     páginas). Nunca metas un tamaño suelto fuera de estos tokens.
       TÍTULO  (mayúsculas) · pasos: héroe → sección → nombre
       TEXTO   (caja normal) · pasos: intro → cuerpo
       ETIQUETA(mayúsculas) · nav / meta / tags
     Proporciones de referencia: dashdigital.studio
     =============================================================== */

  /* TIPO 1 · TÍTULO — mayúsculas, tracking -0.03em */
  --aurea-fs-hero:    clamp(40px, 7vw, 100px);   /* héroe            · lh 0.9  */
  --aurea-fs-display: clamp(30px, 4.2vw, 58px);  /* = sección        · lh 1.0  */
  --aurea-fs-section: clamp(30px, 4.2vw, 58px);  /* títulos sección  · lh 1.0  */
  --aurea-fs-project: clamp(18px, 1.9vw, 26px);  /* nombres / ítems  · lh 1.15 */

  /* TIPO 2 · TEXTO — caja normal */
  --aurea-fs-lead:    clamp(18px, 1.8vw, 24px);  /* intros / statements */
  --aurea-fs-body:    16px;                       /* párrafos         · lh 1.5 */

  /* TIPO 3 · ETIQUETA — mayúsculas, tracking -0.02em */
  --aurea-fs-nav:     13px;                       /* nav              · lh 1    */
  --aurea-fs-label:   13px;                       /* meta / tags      · lh 1    */

  /* CTA — préstamo de Velocity: esquina crujiente + microinteracción */
  --aurea-radius-cta: 4px;                        /* botones (antes pill 999px) */
  --aurea-ease-cta:   0.3s ease;                  /* hover 0.3s (Velocity)      */

  /* GRID: 8 columnas, gap 23px */
  --aurea-grid-cols:     8;
  --aurea-grid-gap:      23px;
  --aurea-container-pad: 2vw;   /* margen lateral IDÉNTICO en cada sección */

  /* RITMO VERTICAL (úsalo siempre, nunca valores sueltos) */
  --aurea-space-section: 8vw;   /* separación entre secciones grandes */
  --aurea-space-block:   4vw;   /* separación interna de bloques */

  /* Header fijo: altura para despejar el hero y los anclas */
  --aurea-header-h: 64px;

  /* Footer: ancho máx del contenido. `none` = a todo el ancho (alineado
     con el resto de la página y con la referencia Dash). Cámbialo a 1150px
     si quieres el footer centrado y contenido como en el spec. */
  --aurea-footer-max: none;
  --aurea-footer-label: #757575;   /* gris de labels del footer (spec) */
}

/* =========================================================
   1 · RESET (mínimo)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--aurea-header-h);
  scroll-behavior: smooth;   /* enlaces internos (una sola página) */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--aurea-bg);
  color: var(--aurea-text);
  font-family: var(--aurea-font);
  font-weight: var(--aurea-weight);
  font-size: var(--aurea-fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* oculta desbordes horizontales SIN convertir el body en
                         contenedor de scroll (así funcionan los anclas internos) */
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { list-style: none; padding: 0; }

::selection { background-color: var(--aurea-text); color: var(--aurea-bg); }

:focus-visible { outline: 2px solid var(--aurea-text); outline-offset: 3px; }

/* =========================================================
   2 · CLASES TIPOGRÁFICAS
   Todas (salvo body): weight 400, uppercase, tracking -0.03em.
   ========================================================= */
.aurea-text-hero,
.aurea-text-display,
.aurea-text-section,
.aurea-text-project,
.aurea-text-nav,
.aurea-text-label {
  font-family: var(--aurea-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--aurea-tracking);
}

.aurea-text-hero    { font-size: var(--aurea-fs-hero);    line-height: 0.8; }
.aurea-text-display { font-size: var(--aurea-fs-display); line-height: 0.8; }
.aurea-text-section { font-size: var(--aurea-fs-section); line-height: 1; }
.aurea-text-project { font-size: var(--aurea-fs-project); line-height: 0.9; font-weight: var(--aurea-weight-sub); }
.aurea-text-nav     { font-size: var(--aurea-fs-nav);     line-height: 1; }
.aurea-text-label   {
  font-size: var(--aurea-fs-label);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--aurea-text-soft);
}

/* Cuerpo: NO uppercase, gris suave de lectura. Fuente de lectura (Inter). */
.aurea-text-body {
  font-family: var(--aurea-font-read);
  font-weight: 400;
  text-transform: none;
  font-size: var(--aurea-fs-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Variantes "reducidas" (statements, nombres de servicio, preguntas FAQ).
   Ambas caen dentro del paso "nombre" del TÍTULO — sin tamaños nuevos. */
.aurea-text-section--sm { font-size: var(--aurea-fs-project); line-height: 1.15; font-weight: var(--aurea-weight-sub); }
.aurea-text-project--sm { font-size: var(--aurea-fs-project); line-height: 1.15; font-weight: var(--aurea-weight-sub); }

/* =========================================================
   3 · LAYOUT (utilidades + ritmo)
   ========================================================= */
.aurea-container {
  padding-left: var(--aurea-container-pad);
  padding-right: var(--aurea-container-pad);
}
.aurea-grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: var(--aurea-grid-gap);
}

/* Cada sección comparte el mismo aire vertical superior */
/* Espaciado vertical IGUAL en todas las secciones (arriba y abajo),
   para un ritmo consistente en todo el sitio. Más una línea sutil y
   delicada arriba de cada sección, para separar el contenido sin ruido
   (se adapta al color de cada sección vía --aurea-line). */
.aurea-section {
  padding-top: var(--aurea-space-section);
  padding-bottom: var(--aurea-space-section);
  border-top: 1px solid var(--aurea-line);
}

/* Línea divisoria fina, ancho completo del contenido */
.aurea-rule { border: 0; border-top: 1px solid var(--aurea-line); }

/* CTA — alto contraste + esquina crujiente + hover que invierte (Velocity).
   Antes era un pill 999px con hover de opacidad. */
.aurea-pill {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--aurea-text);   /* botón blanco sobre oscuro (Velocity) */
  color: var(--aurea-bg);                /* texto = color de fondo (near-black) */
  border: 1px solid var(--aurea-text);
  border-radius: var(--aurea-radius-cta);
  padding: 11px 22px;
  font-size: var(--aurea-fs-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  will-change: transform;
  transition: background-color var(--aurea-ease-cta),
    color var(--aurea-ease-cta),
    transform var(--aurea-ease-cta);
}
.aurea-pill:hover {
  background-color: transparent;
  color: var(--aurea-text);
  transform: translateY(-2px);
}
.aurea-pill:active { transform: translateY(0); }

/* Variante contorno (segundo CTA): transparente con borde, se rellena al hover */
.aurea-pill--ghost {
  background-color: transparent;
  color: var(--aurea-text);
}
.aurea-pill--ghost:hover {
  background-color: var(--aurea-text);
  color: var(--aurea-bg);
}

/* Enlace de label con afford. de subrayado al hover */
.aurea-link { color: var(--aurea-text-soft); transition: color 0.2s ease; }
.aurea-link:hover { color: var(--aurea-text); }

/* Skip link accesible */
.aurea-skip {
  position: absolute;
  left: var(--aurea-container-pad);
  top: -100px;
  z-index: 200;
  background: var(--aurea-text);
  color: var(--aurea-bg);   /* papel sobre tinta: se invierte solo con la sección */
  padding: 10px 16px;
  font-size: 12px;
  text-transform: uppercase;
  transition: top 0.2s ease;
}
.aurea-skip:focus { top: 10px; }

/* =========================================================
   4 · HEADER (fijo)
   ========================================================= */
.aurea-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--aurea-header-h);
  background-color: var(--aurea-bg);
}
.aurea-logo { white-space: nowrap; font-size: 15px; letter-spacing: -0.02em; display: inline-flex; align-items: center; }
.aurea-logo sup { font-size: 0.5em; vertical-align: super; }
.aurea-logo-img { height: 32px; width: auto; display: block; opacity: 0.95; }
.aurea-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 40px);
}
.aurea-nav a { transition: color 0.2s ease; color: var(--aurea-text); }
.aurea-nav a:hover { color: var(--aurea-text-soft); }

/* =========================================================
   5 · HERO
   ========================================================= */
.aurea-hero {
  position: relative;
  padding-top: calc(var(--aurea-header-h) + var(--aurea-space-block));
  padding-bottom: var(--aurea-space-block);
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.aurea-hero__text { position: relative; z-index: 2; width: 100%; }
.aurea-hero__title {
  /* ocupa casi todo el ancho y rompe en líneas (estilo Dash) */
  max-width: 16ch;
}

/* ---- Visual del héroe a PANTALLA COMPLETA (fondo), oscurecido ---- */
.aurea-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--aurea-bg);
}
/* Capa oscura para que la imagen NO opaque los títulos
   (más densa del lado izquierdo, donde va el texto). */
.aurea-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0.52) 42%, rgba(8,8,8,0.22) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.48) 0%, rgba(8,8,8,0.04) 45%);
}
.aurea-hero__visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
  filter: brightness(0.82) contrast(1.03);   /* menos oscura: el video se ve más, sin tapar títulos */
  /* Fundido cruzado + deriva lenta (Ken Burns): sobre las imágenes de IA
     da sensación de algo vivo y generativo, que muta y no se explica. */
  animation: aurea-hero-fade 12s infinite, aurea-hero-drift 26s ease-in-out infinite;
}
.aurea-hero__visual video:nth-child(1) { animation-delay: 0s, 0s; }
.aurea-hero__visual video:nth-child(2) { animation-delay: 4s, -9s; }
.aurea-hero__visual video:nth-child(3) { animation-delay: 8s, -17s; }
@keyframes aurea-hero-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  33%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes aurea-hero-drift {
  0%   { transform: scale(1.06); }
  50%  { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
  100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .aurea-hero__visual video { animation: none; opacity: 0; }
  .aurea-hero__visual video:first-child { opacity: 1; }
}
.aurea-hero__sub {
  margin-top: clamp(20px, 2.4vw, 36px);
  line-height: 1.5;
  color: var(--aurea-text);
}
.aurea-hero__support {
  margin-top: clamp(12px, 1.4vw, 20px);
  color: var(--aurea-text-soft);
  font-family: var(--aurea-font-read);
  text-transform: none;
  letter-spacing: -0.005em;
}
/* Dos CTA del héroe (una sola página: dirigen a #servicios y #contacto) */
.aurea-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.2vw, 44px);
}

/* Eyebrow "para quién": lo primero que ancla el mensaje (regla de 3 s) */
.aurea-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2vw, 24px);
  color: var(--aurea-text-soft);
}
.aurea-hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}
/* Promesa/resultado en lenguaje claro (Inter), no etiqueta en mayúsculas */
.aurea-hero__lead {
  margin-top: clamp(18px, 2.2vw, 30px);
  max-width: 44ch;
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-lead);
  /* Inter 300 real (esta en el <link>): a 24px sobre video, el 400 se
     veia pesado. Un poco mas de interlinea acompana al peso ligero. */
  font-weight: 300;
  line-height: 1.5;
  color: var(--aurea-text);
}
/* Microcopy reductor de fricción bajo los CTA */
.aurea-hero__reassure {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-label);
  line-height: 1.4;
  color: var(--aurea-text-soft);
  text-transform: none;
  letter-spacing: 0;
}
.aurea-footer__reassure { margin-top: 14px; }

/* =========================================================
   5b · RESULTADOS (banda bajo el héroe: qué logras, en un vistazo)
   ========================================================= */
/* La banda de resultados ahora es una sección clara normal:
   el espaciado lo dan .aurea-section + .aurea-invert. */
.aurea-outcomes__label {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  color: var(--aurea-text);
}
.aurea-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
/* Cada resultado es una tarjeta EN TODOS LOS ANCHOS. Antes solo lo era
   por debajo de 600px, asi que entre 601 y 820px los tres bloques se
   apilaban como un solo muro de texto. El indice sube arriba y empuja
   el contenido al pie de la caja: las tres se leen alineadas. */
.aurea-outcome {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--aurea-line);
  border-radius: 12px;
  background-color: var(--aurea-bg-alt);
}
/* Dos lineas de cierre bajo las tarjetas: las tres nombran un problema,
   estas devuelven la calma y dicen cual es el siguiente paso. */
.aurea-outcomes__note {
  max-width: 64ch;
  margin-top: var(--aurea-space-block);
  color: var(--aurea-text-soft);
}
.aurea-outcomes__note + .aurea-outcomes__note { margin-top: 10px; }

/* Icono de la tarjeta: trazo fino en la tinta de la seccion, sin relleno.
   currentColor hace que se invierta solo en secciones claras u oscuras.
   Sustituye al numero: la tarjeta ahora es icono + titulo, nada mas. */
.aurea-outcome__icon {
  display: block;
  width: clamp(26px, 2.4vw, 32px);
  height: auto;
  margin-bottom: clamp(26px, 3vw, 44px);
  color: var(--aurea-text);
  overflow: visible;
}
.aurea-outcome__k {
  display: block;
  margin-bottom: 14px;
  font-size: var(--aurea-fs-project);
  line-height: 1.15;
  /* Peso 400, no el 300 de --aurea-weight-sub: el titulo es lo unico
     que queda en la tarjeta, junto al icono. */
  font-weight: 400;
  color: var(--aurea-text);
}
.aurea-outcome__d {
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-body);
  line-height: 1.5;
  color: var(--aurea-text-soft);
}

/* =========================================================
   6 · TRABAJO DESTACADO (grid 2 columnas)
   ========================================================= */
.aurea-work__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--aurea-space-block);
}
/* Mismo tratamiento que el pill "Ver todo" del blog: los encabezados de
   seccion con CTA usan boton, no enlace de texto. */
.aurea-work__cta { align-self: center; }
.aurea-work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--aurea-grid-gap);
  row-gap: var(--aurea-space-block);
}
.aurea-work__item { display: block; }
.aurea-work__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--aurea-bg-alt);
  margin-bottom: 16px;
}
.aurea-work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;   /* microinteracción al hover */
}
.aurea-work__item:hover .aurea-work__media img { transform: scale(1.04); }
.aurea-work__tags { display: block; margin-bottom: 10px; }
.aurea-work__name {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--aurea-line);
  transition: color var(--aurea-ease-cta);
}
.aurea-work__item:hover .aurea-work__name { color: var(--aurea-text-soft); }

/* Contexto del trabajo: intro de la seccion + linea descriptiva por proyecto.
   La linea divisoria pasa del nombre a la descripcion para que el bloque
   (nombre + contexto) se lea como una sola unidad. */
.aurea-work__intro {
  max-width: 58ch;
  margin-top: calc(var(--aurea-space-block) * -0.55);
  margin-bottom: var(--aurea-space-block);
  color: var(--aurea-text-soft);
}
.aurea-work__feature .aurea-work__name { padding-bottom: 8px; border-bottom: 0; }
.aurea-work__desc {
  max-width: 62ch;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--aurea-line);
  color: var(--aurea-text-soft);
}
.aurea-work__desc a {
  color: var(--aurea-text);
  text-decoration: underline;
  text-decoration-color: var(--aurea-line);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.aurea-work__desc a:hover { text-decoration-color: var(--aurea-text); }

/* --- Proyecto DESTACADO a todo el ancho, con galería de swipe horizontal --- */
.aurea-work__feature { grid-column: 1 / -1; margin-bottom: var(--aurea-space-block); }
.aurea-gallery-wrap { position: relative; margin-bottom: 16px; }
.aurea-gallery {
  aspect-ratio: 1895 / 1025;      /* = ratio real de las capturas */
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox: sin barra */
  background-color: var(--aurea-bg-alt);
  margin-bottom: 0;               /* anula el margin de .aurea-work__media */
}
.aurea-gallery::-webkit-scrollbar { display: none; }   /* WebKit: sin barra */
.aurea-gallery img {
  position: static;               /* anula el absolute de .aurea-work__media img */
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}
/* Flechas (desktop); en móvil se usa el swipe con el dedo */
.aurea-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.5);
  color: #F4F4F1;   /* papel: la flecha va sobre la foto, no sobre la sección */
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease;
}
.aurea-gallery__nav:hover { background: rgba(8, 8, 8, 0.82); }
.aurea-gallery__nav--prev { left: 12px; }
.aurea-gallery__nav--next { right: 12px; }
.aurea-gallery__hint { display: block; margin-bottom: 10px; color: var(--aurea-text-soft); }
/* Puntos indicadores (avisan que hay más para deslizar) */
.aurea-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.aurea-gallery__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--aurea-line); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.aurea-gallery__dot.is-active { background: var(--aurea-text); transform: scale(1.3); }

/* =========================================================
   ESCRITORIO: los proyectos se muestran como GALERÍA de portadas
   (cuadrícula). Clic → pantalla completa para recorrer el sitio.
   En móvil se conserva el swipe con el dedo (arriba).
   ========================================================= */
@media (min-width: 821px) {
  .aurea-work__feature { grid-column: auto; margin-bottom: 0; }
  .aurea-work__grid { row-gap: var(--aurea-space-block); }
  .aurea-gallery-wrap { overflow: hidden; }
  .aurea-gallery { overflow: hidden; scroll-snap-type: none; cursor: pointer; }
  .aurea-gallery img { display: none; }
  .aurea-gallery img:first-child { display: block; transition: transform 0.5s ease; }
  .aurea-gallery__nav, .aurea-gallery__dots { display: none; }   /* solo swipe en móvil */
  .aurea-gallery-wrap::after {
    content: "Ver proyecto completo ↗";
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 8, 8, 0);
    color: #fff; font-family: var(--aurea-font);
    font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase;
    opacity: 0; transition: opacity 0.25s ease, background 0.25s ease;
    pointer-events: none;
  }
  .aurea-work__feature:hover .aurea-gallery-wrap::after { opacity: 1; background: rgba(8, 8, 8, 0.42); }
  .aurea-work__feature:hover .aurea-gallery img:first-child { transform: scale(1.03); }
}

/* Pantalla completa (modal) para recorrer un proyecto de arriba a abajo */
.aurea-modal { position: fixed; inset: 0; z-index: 300; background: rgba(6, 6, 6, 0.95); overflow-y: auto; overscroll-behavior: contain; }
.aurea-modal[hidden] { display: none; }
.aurea-modal__scroll { max-width: 1100px; margin: 0 auto; padding: 60px 16px 80px; }
.aurea-modal__scroll img { display: block; width: 100%; height: auto; }
.aurea-modal__close {
  position: fixed; top: 16px; right: 20px; z-index: 310;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(244, 244, 241, 0.14); color: #F4F4F1; font-size: 28px; line-height: 1;
  cursor: pointer; transition: background 0.2s ease;
}
.aurea-modal__close:hover { background: rgba(244, 244, 241, 0.28); }
body.aurea-modal-open { overflow: hidden; }
@media (max-width: 820px) {
  .aurea-gallery__nav { display: none; }   /* móvil: swipe con el dedo */
}

/* =========================================================
   7 · ESTUDIO / ABOUT (asimétrico sobre 8 col)
   ========================================================= */
.aurea-about__left  { grid-column: 1 / 5; align-self: start; }
.aurea-about__right {
  grid-column: 5 / 9;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--aurea-space-block);
}
.aurea-about__statement { margin-top: clamp(16px, 2vw, 32px); max-width: 16ch; }
.aurea-about__right .aurea-text-body { max-width: 52ch; }

/* =========================================================
   8 · MARCAS / CASO DESTACADO (grid 4 columnas)
   ========================================================= */
.aurea-cases__head { margin-bottom: var(--aurea-space-block); }
.aurea-cases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--aurea-grid-gap);
  row-gap: var(--aurea-space-block);
  align-items: start;
}
.aurea-case {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--aurea-line);
}
.aurea-case__name { margin-bottom: 2px; }
.aurea-case .aurea-text-body { color: var(--aurea-text-soft); }
.aurea-case--placeholder { opacity: 0.55; }

/* =========================================================
   9 · EL MÉTODO ÁUREA (filas)
   ========================================================= */
.aurea-method__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--aurea-space-block);
}
.aurea-method__rows { border-bottom: 1px solid var(--aurea-line); }
.aurea-method__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--aurea-grid-gap);
  padding: 24px 0;
  border-top: 1px solid var(--aurea-line);
}
.aurea-method__title { display: flex; align-items: baseline; gap: 0.6em; }
.aurea-method__num { color: var(--aurea-text-soft); }
.aurea-method__desc { color: var(--aurea-text-soft); max-width: 52ch; }
.aurea-method__more { white-space: nowrap; }

/* =========================================================
   10 · SERVICIOS (asimétrico sobre 8 col)
   ========================================================= */
.aurea-services__left  { grid-column: 1 / 5; align-self: start; }
.aurea-services__left .aurea-text-body { margin-top: clamp(16px, 2vw, 28px); max-width: 36ch; color: var(--aurea-text-soft); }
.aurea-services__right {
  grid-column: 5 / 9;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}
/* Cada servicio es una tarjeta, igual que las de "Que ganas con Aurea".
   Antes eran filas separadas por una linea y no destacaban. */
.aurea-service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--aurea-grid-gap);
  align-items: baseline;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--aurea-line);
  border-radius: 12px;
  background-color: var(--aurea-bg-alt);
}
.aurea-service__desc { font-family: var(--aurea-font-read); text-transform: none; letter-spacing: -0.005em; line-height: 1.45; }
.aurea-services__more { display: inline-block; margin-top: clamp(10px, 1.2vw, 18px); align-self: flex-start; }

/* =========================================================
   11 · DESDE EL BLOG (2 cards)
   ========================================================= */
.aurea-blog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--aurea-space-block);
}
.aurea-blog__all { align-self: center; }   /* pill "Ver todo" (estilo Dash) */
/* Encabezado "Desde el blog" (ref. "Latest News" de Dash). Clase propia
   para no afectar a los demás .aurea-text-label (botón "Ver todo", meta…).
   clamp: 46px en desktop, baja en móviles muy angostos para no desbordar. */
.aurea-blog__head-title {
  font-family: var(--aurea-font);
  font-weight: 400;
  font-size: var(--aurea-fs-section);   /* = título de sección */
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
/* Dos artículos lado a lado (como "Latest News" de Dash) */
.aurea-blog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(28px, 4vw, 80px);
  row-gap: var(--aurea-space-block);
}
/* Cada artículo es horizontal: imagen a la izquierda + texto a la derecha.
   Compacto — ya no ocupa toda la pantalla. */
.aurea-blog__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(16px, 1.6vw, 28px);
  align-items: start;
}
.aurea-blog__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--aurea-bg-alt);
  display: grid;
  place-content: center;
}
.aurea-blog__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.aurea-blog__card:hover .aurea-blog__media img { transform: scale(1.04); }
.aurea-blog__media-label { color: var(--aurea-text-soft); }
.aurea-blog__text { display: flex; flex-direction: column; gap: 12px; }
.aurea-blog__meta { display: block; }
.aurea-blog__title { transition: color 0.2s ease; }
.aurea-blog__card:hover .aurea-blog__title { color: var(--aurea-text-soft); }

/* Móvil angosto: apila imagen sobre texto dentro de cada tarjeta */
@media (max-width: 560px) {
  .aurea-blog__card { grid-template-columns: 1fr; row-gap: 14px; }
}

/* =========================================================
   12 · FAQ (acordeón nativo <details>, sin JS ni animación)
   ========================================================= */
.aurea-faq__head { margin-bottom: var(--aurea-space-block); }
.aurea-faq__list { border-bottom: 1px solid var(--aurea-line); }
.aurea-faq__item { border-top: 1px solid var(--aurea-line); }
.aurea-faq__q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.aurea-faq__q::-webkit-details-marker { display: none; }
.aurea-faq__toggle { white-space: nowrap; }
.aurea-faq__toggle::after { content: "Más +"; }
.aurea-faq__item[open] .aurea-faq__toggle::after { content: "Menos —"; }
.aurea-faq__a {
  color: var(--aurea-text-soft);
  max-width: 60ch;
  padding-bottom: 24px;
}

/* CTA de cierre de seccion (fin de Trabajo y fin de FAQ).
   No introduce tamanos nuevos: el boton sigue siendo .aurea-pill tal cual. */
.aurea-cta-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--aurea-space-block);
}
.aurea-cta-foot .aurea-pill { align-self: center; }
.aurea-cta-foot__text {
  font-family: var(--aurea-font);
  font-weight: var(--aurea-weight-sub);
  font-size: var(--aurea-fs-project);
  line-height: 1.1;
  letter-spacing: var(--aurea-tracking);
  text-transform: uppercase;
  color: var(--aurea-text);
  max-width: 28ch;
}

/* =========================================================
   13 · FOOTER (multi-columna sobre 8 col)
   ========================================================= */
/* Spec del usuario: tipografía exacta, TODO en MAYÚSCULAS, tracking
   -0.03em, labels #757575, valores 14px, gap 23px. */
.aurea-footer {
  max-width: var(--aurea-footer-max);
  margin-inline: auto;
  padding-top: var(--aurea-space-section);
  padding-bottom: var(--aurea-space-block);
  letter-spacing: var(--aurea-tracking);
  text-transform: uppercase;
}

/* Labels y valores del footer */
.aurea-footer__label {
  font-size: var(--aurea-fs-label);
  line-height: 1;
  letter-spacing: var(--aurea-tracking);
  color: var(--aurea-footer-label);
  margin-bottom: 4px;
}
.aurea-footer__value {
  font-size: var(--aurea-fs-body);
  line-height: 1.35;
  /* El correo es una sola palabra larga: sin esto se sale de su columna
     en anchos intermedios (254px de texto en 192px de columna). */
  overflow-wrap: anywhere;
  letter-spacing: var(--aurea-tracking);
  color: var(--aurea-text);
}
a.aurea-footer__value { transition: color 0.2s ease; }
a.aurea-footer__value:hover { color: var(--aurea-footer-label); }

/* Logo de marca: centrado abajo, como firma, con el wordmark AUREA DIGITAL */
/* La marca ya no cuelga centrada al pie: es el primer elemento de la fila
   del footer, a la izquierda, con todo lo demas corriendo hacia la derecha. */
.aurea-footer__brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.aurea-footer__brand-img {
  width: clamp(54px, 4.6vw, 74px);
  height: auto;
  opacity: 0.9;
}
.aurea-footer__brand-name {
  font-size: var(--aurea-fs-label);
  letter-spacing: var(--aurea-tracking);
  color: var(--aurea-text-soft);
}

/* Siguiente página: label chico + nombre gigante (69px) */
.aurea-footer__next { display: inline-block; margin-bottom: var(--aurea-space-section); }
.aurea-footer__next-label { display: block; margin-bottom: 14px; }
.aurea-footer__next-name {
  display: inline-block;
  font-family: var(--aurea-font);
  font-weight: 400;
  font-size: var(--aurea-fs-section);   /* = título de sección (sincronizado) */
  line-height: 0.9;
  letter-spacing: var(--aurea-tracking);
  transition: color 0.2s ease;
}
.aurea-footer__next-name sup { font-size: 0.28em; vertical-align: super; color: var(--aurea-footer-label); margin-left: 0.2em; }
.aurea-footer__next:hover .aurea-footer__next-name { color: var(--aurea-footer-label); }

/* CTA grande (25.3px) + columnas de contacto */
.aurea-footer__main { align-items: start; }
.aurea-footer__cta {
  grid-column: 1 / 5;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 40px);
}
/* Sin gap uniforme: el boton y su linea de apoyo se leen como una sola
   unidad, no como tres bloques sueltos separados por 57px cada uno. */
.aurea-footer__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.aurea-footer__cta .aurea-pill { margin-top: clamp(18px, 2vw, 28px); }
.aurea-footer__reassure { margin-top: 12px; }
.aurea-hero .aurea-hero__reassure { font-weight: 300; }
.aurea-footer__cta-text {
  font-family: var(--aurea-font);
  font-weight: var(--aurea-weight-sub);   /* subtítulo fino */
  font-size: var(--aurea-fs-project);   /* = paso "nombre" del título */
  line-height: 1.1;
  letter-spacing: var(--aurea-tracking);
  max-width: 22ch;
}
.aurea-footer__cols {
  grid-column: 5 / 9;
  display: grid;
  /* Dos columnas otra vez: correo + navegacion. Con una sola, la mitad
     derecha quedaba 82% vacia frente a una columna izquierda de 270px.
     minmax(0,1fr) y no 1fr: el correo es texto largo y con 1fr se quedaba
     con 254px contra 129px de la navegacion. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--aurea-grid-gap);
  row-gap: var(--aurea-space-block);
}
.aurea-footer__col { display: flex; flex-direction: column; gap: 8px; }
nav.aurea-footer__col { gap: 10px; align-items: flex-start; }

/* Barra inferior (12px) */
.aurea-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--aurea-space-section);
  padding-top: 24px;
  border-top: 1px solid var(--aurea-line);
  font-size: var(--aurea-fs-label);
  line-height: 1;
  letter-spacing: var(--aurea-tracking);
  color: var(--aurea-text);
}
.aurea-footer__social { display: flex; gap: clamp(16px, 2vw, 40px); }
.aurea-footer__bottom a { color: var(--aurea-text); transition: color 0.2s ease; }
.aurea-footer__bottom a:hover { color: var(--aurea-footer-label); }

/* =========================================================
   14 · RESPONSIVE (colapsos para que no rompa en móvil)
   El sistema está pensado pixel-perfect en desktop; aquí solo
   garantizamos que apile limpio en pantallas chicas.
   ========================================================= */
@media (max-width: 900px) {
  .aurea-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .aurea-method__row { grid-template-columns: 1fr; row-gap: 10px; }
  .aurea-method__desc { grid-column: 1 / -1; grid-row: 2; }
}

/* Punto de quiebre móvil unificado con Estudio (css/estilo.css): 820px */
@media (max-width: 820px) {
  :root { --aurea-container-pad: 5vw; }

  /* Header en móvil: deja de ser fijo (el Home no carga JS, así que no
     hay menú hamburguesa) y el nav baja a su propia fila bajo el logo,
     en vez de encimarse. Al no ser fijo, el héroe no necesita
     compensar su altura. */
  .aurea-header {
    position: sticky;
    flex-wrap: wrap;
    row-gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--aurea-line);
  }
  .aurea-nav {
    width: 100%;
    gap: 12px 18px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .aurea-hero { padding-top: var(--aurea-space-block); }

  .aurea-work__grid,
  .aurea-blog__grid,
  .aurea-cases__grid { grid-template-columns: 1fr; }

  /* Bloques asimétricos: apilar a una sola columna */
  .aurea-about__left,
  .aurea-about__right,
  .aurea-services__left,
  .aurea-services__right,
  .aurea-footer__cta,
  .aurea-footer__cols { grid-column: 1 / -1; }

  .aurea-about__right { margin-top: var(--aurea-space-block); }
  .aurea-services__right { margin-top: var(--aurea-space-block); }
  .aurea-footer__cols { margin-top: var(--aurea-space-block); }
  /* La fila del CTA ya ocupa todo el ancho: el discurso crece con ella en
     vez de quedarse en 305px con media pantalla vacia al lado. */
  .aurea-footer__pitch { flex: 1 1 auto; }
  .aurea-footer__cta-text { max-width: 32ch; }

  .aurea-service { grid-template-columns: 1fr; row-gap: 8px; }

  /* Banda de resultados: una sola columna */
  .aurea-outcomes__grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 560px) {
  .aurea-footer__cols { grid-template-columns: 1fr; }
}

/* =========================================================
   15 · BLOG — ARTÍCULO (prosa de lectura sobre tema oscuro)
   Reusa los tokens del sitio. Lectura en Inter (--aurea-font-read),
   subtítulos en Space Grotesk mayúsculas. Sin colores nuevos.
   ========================================================= */
.aurea-article,
.aurea-article__hero,
.aurea-article__body,
.aurea-article__cta,
.aurea-article__back { max-width: 68ch; margin-inline: auto; }

/* Cabecera del artículo */
.aurea-article__hero {
  padding-top: calc(var(--aurea-header-h) + var(--aurea-space-block));
  padding-bottom: clamp(20px, 3vw, 36px);
}
.aurea-article__meta { display: block; margin-bottom: clamp(16px, 2vw, 26px); }
.aurea-article__title { font-size: var(--aurea-fs-display); line-height: 1.02; }
.aurea-article__lead {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-lead);
  line-height: 1.5;
  color: var(--aurea-text-soft);
}

/* Imagen hero (ancho de contenido, no de columna de texto) */
.aurea-article__figure {
  margin: 0 auto clamp(28px, 5vw, 56px);
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--aurea-bg-alt);
}
.aurea-article__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cuerpo (prosa por etiqueta desnuda) */
.aurea-article__body { font-family: var(--aurea-font-read); }
.aurea-article__body > * + * { margin-top: 1.25em; }
.aurea-article__body p {
  font-size: var(--aurea-fs-body);
  line-height: 1.65;
  color: var(--aurea-text);
  letter-spacing: -0.005em;
}
.aurea-article__body h2 {
  font-family: var(--aurea-font);
  font-size: var(--aurea-fs-project);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--aurea-text);
  margin-top: clamp(36px, 5vw, 60px);
}
.aurea-article__body h3 {
  font-family: var(--aurea-font);
  font-size: clamp(16px, 1.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--aurea-text);
  margin-top: clamp(24px, 3vw, 36px);
}
.aurea-article__body ol { padding-left: 1.2em; }
.aurea-article__body ul { list-style: none; padding-left: 0; }
.aurea-article__body li {
  font-size: var(--aurea-fs-body);
  line-height: 1.6;
  color: var(--aurea-text);
}
.aurea-article__body li + li { margin-top: 0.55em; }
.aurea-article__body ul > li { position: relative; padding-left: 1.4em; }
.aurea-article__body ul > li::before {
  content: "—"; position: absolute; left: 0; color: var(--aurea-text-soft);
}
.aurea-article__body strong { font-weight: 500; color: var(--aurea-text); }
.aurea-article__body a {
  color: var(--aurea-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--aurea-text-soft);
  transition: text-decoration-color var(--aurea-ease-cta);
}
.aurea-article__body a:hover { text-decoration-color: var(--aurea-text); }
.aurea-article__body blockquote {
  border-left: 2px solid var(--aurea-line);
  padding-left: clamp(16px, 2vw, 24px);
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-lead);
  line-height: 1.45;
  color: var(--aurea-text);
}
.aurea-article__body hr {
  border: 0; border-top: 1px solid var(--aurea-line);
  margin: clamp(32px, 5vw, 56px) 0;
}
.aurea-article__body figure { margin: clamp(24px, 4vw, 40px) 0; }
.aurea-article__body figcaption {
  margin-top: 10px; font-size: var(--aurea-fs-label);
  color: var(--aurea-text-soft);
}

/* Banda de CTA dentro del artículo */
.aurea-article__cta {
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--aurea-line);
  border-radius: var(--aurea-radius-cta);
  display: grid;
  gap: clamp(18px, 2.5vw, 26px);
  justify-items: start;
}
.aurea-article__cta-text {
  font-family: var(--aurea-font);
  font-size: var(--aurea-fs-project);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--aurea-text);
  max-width: 22ch;
}

/* Volver al blog */
.aurea-article__back {
  display: block;
  margin-top: clamp(32px, 5vw, 56px);
  font-size: var(--aurea-fs-label);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--aurea-text-soft);
  transition: color var(--aurea-ease-cta);
}
.aurea-article__back:hover { color: var(--aurea-text); }

/* Footer minimalista del blog: TODO centrado */
.aurea-blog-foot { padding-top: clamp(48px, 8vw, 90px); }
.aurea-blog-foot .aurea-footer__bottom {
  margin-top: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

/* Cabecera del blog: logo + volver al inicio */
.aurea-header__back {
  font-size: var(--aurea-fs-label);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--aurea-text-soft);
  transition: color var(--aurea-ease-cta);
}
.aurea-header__back:hover { color: var(--aurea-text); }

/* Índice del blog: cabecera + rejilla en 1 columna, tarjetas horizontales */
.aurea-bloglist { padding-top: calc(var(--aurea-header-h) + var(--aurea-space-block)); }
.aurea-bloglist__title { font-size: var(--aurea-fs-hero); line-height: 0.9; }
.aurea-bloglist__intro {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--aurea-font-read);
  font-size: var(--aurea-fs-lead);
  line-height: 1.5;
  color: var(--aurea-text-soft);
  max-width: 52ch;
}
.aurea-bloglist__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: var(--aurea-space-block);
  border-top: 1px solid var(--aurea-line);
}
.aurea-bloglist .aurea-blog__card--soon { opacity: 0.5; pointer-events: none; }

/* =========================================================
   16 · BLOG — AJUSTES MÓVIL (al final para ganar a las reglas
   base del artículo/índice de la sección 15)
   ========================================================= */
@media (max-width: 820px) {
  /* Header pega en flujo en móvil: el artículo/índice no compensa altura fija */
  .aurea-article__hero,
  .aurea-bloglist { padding-top: var(--aurea-space-block); }
  /* Título del artículo un punto más chico para encajar en iPhone */
  .aurea-article__title { font-size: clamp(26px, 7vw, 34px); }
  /* Título del índice del blog en escala de sección (no héroe) para que quepa */
  .aurea-bloglist__title { font-size: clamp(34px, 11vw, 56px); }
}

/* =========================================================
   17 · MÓVIL (≤600px) — TODO A LA IZQUIERDA
   El usuario prefiere el texto alineado a la izquierda en móvil
   (el centrado se veía flojo). El espacio lateral lo da el
   contenedor. EXCEPCIÓN: el footer se mantiene centrado (cierre
   de marca con logo).
   ========================================================= */
@media (max-width: 600px) {
  /* Todo el contenido del cuerpo, alineado a la izquierda */
  .aurea-hero,
  .aurea-outcomes,
  .aurea-work,
  .aurea-method,
  .aurea-services,
  .aurea-blog { text-align: left; }

  /* Botones de sección a la izquierda (el footer se trata aparte) */
  .aurea-pill,
  .aurea-services__more { align-self: flex-start; }
  .aurea-hero__cta { justify-content: flex-start; }

  /* Encabezados de sección: apilan a la izquierda */
  .aurea-work__head,
  .aurea-blog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Tarjetas de blog: apilar imagen sobre texto */
  .aurea-blog__card { grid-template-columns: 1fr; }

  /* --- FOOTER: se mantiene CENTRADO (logo + marca + cierre) --- */
  .aurea-footer { text-align: center; }
  .aurea-footer__brand { justify-content: center; }
  .aurea-footer__social { justify-content: center; }
  .aurea-footer__cta { align-items: center; }
  .aurea-footer__cta-text { margin-inline: auto; text-align: center; }
  .aurea-footer .aurea-pill { align-self: center; }
  .aurea-footer__cols,
  .aurea-footer__col { align-items: center; }
  .aurea-footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  /* Blog (artículo/índice): también a la izquierda */
  .aurea-article__hero,
  .aurea-article__cta,
  .aurea-article__back,
  .aurea-bloglist,
  .aurea-article__body { text-align: left; }
}

/* =========================================================
   18 · WHATSAPP FAB + REJILLAS DE UNA TARJETA + ALIGERADO MÓVIL
   ========================================================= */

/* Botón flotante de WhatsApp (siempre a un toque, todas las pantallas) */
.aurea-wa {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: 56px;
  height: 56px;
  display: grid;
  place-content: center;
  background-color: #25D366;   /* verde WhatsApp: reconocible = más clics */
  color: #F4F4F1;              /* papel, no blanco puro */
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(8, 8, 8, 0.45);
  transition: transform var(--aurea-ease-cta), box-shadow var(--aurea-ease-cta);
}
.aurea-wa:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35); }
.aurea-wa:active { transform: scale(0.98); }
.aurea-wa svg { width: 30px; height: 30px; display: block; }

/* Rejillas de una sola tarjeta (tras quitar placeholders vacíos) */
.aurea-cases__grid--single { grid-template-columns: minmax(0, 560px); }
.aurea-blog__grid--single { grid-template-columns: minmax(0, 640px); }

/* ---- ALIGERADO EN MÓVIL: más aire, menos peso ---- */
@media (max-width: 820px) {
  /* Los ritmos en vw se colapsan en pantallas chicas; los fijamos en px */
  :root { --aurea-space-section: 56px; --aurea-space-block: 30px; }
  /* Más aire dentro de las filas del método */
  .aurea-method__row { padding: 28px 0; row-gap: 14px; }
  /* Aire abajo para que el boton flotante no tape "Volver arriba".
     Antes solo en <=600px; entre 601 y 820px la fila del footer sigue
     horizontal y el flotante cubria el enlace del extremo derecho. */
  .aurea-footer__bottom { padding-bottom: 64px; }
}
@media (max-width: 600px) {
  /* El statement deja de ser un muro en MAYÚSCULAS (se lee más ligero) */
  .aurea-about__statement { text-transform: none; letter-spacing: -0.01em; }
  /* Interlineado un poco más suelto en titulares para que no sean bloques */
  .aurea-text-hero { line-height: 0.92; }
  .aurea-text-section { line-height: 1.05; }
  /* Aire abajo para que el botón flotante no tape "Volver arriba" */
  .aurea-footer__bottom { padding-bottom: 64px; }
}

/* =========================================================
   19 · SECCIONES CLARAS (off-white) — despejan el negro total.
   Reasigna los tokens de color DENTRO de la sección: texto,
   líneas y botones se invierten solos a tinta sobre off-white.
   Uso: añade la clase "aurea-invert" a cualquier <section>.
   ========================================================= */
.aurea-invert {
  --aurea-bg: #F4F4F1;          /* PAPEL — off-white cálido, NUNCA blanco puro */
  --aurea-bg-alt: #E7E7E2;      /* superficie elevada clara */
  --aurea-text: #080808;        /* texto = tono del fondo oscuro, NUNCA negro puro */
  --aurea-text-soft: #5E5E5D;   /* tinta mezclada hacia el papel (~36%) para párrafos */
  --aurea-line: #D6D6D1;        /* líneas finas sobre claro */
  background-color: var(--aurea-bg);
  color: var(--aurea-text);
  padding-bottom: var(--aurea-space-section);   /* aire simétrico: banda intencional */
}

/* =========================================================
   20 · QUIÉNES SOMOS (equipo) — foto + texto en sección clara,
   con el MISMO off-white que el resto de las secciones claras.
   ========================================================= */
.aurea-team-sec__grid {
  display: grid;
  /* El gap de columna es el del sistema (23px): con uno mayor, la mitad
     derecha arrancaba en 52.6% y rompia la linea media del sitio.
     El de fila si es amplio, porque en movil separa foto de texto. */
  column-gap: var(--aurea-grid-gap);
  row-gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
/* Base (una sola columna): la foto escala de forma continua con el
   viewport y se mantiene centrada. Antes no tenía tope entre 601 y 820px
   y se estiraba a todo el contenedor. */
.aurea-team-sec__media {
  width: 100%;
  max-width: clamp(260px, 85vw, 380px);
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--aurea-bg);
}
/* La foto (blanco y negro sobre fondo blanco de estudio) se FUNDE con el
   fondo de la sección: multiply convierte ese blanco en el mismo off-white,
   así desaparece el recuadro y solo quedan ellos sobre el fondo. */
.aurea-team-sec__media img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

@media (min-width: 821px) {
  /* Columnas proporcionales, no mitades rígidas: el texto recibe algo más
     de aire que la foto y ambas se reparten el ancho disponible. */
  .aurea-team-sec__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* La foto CRECE con la pantalla en vez de quedarse clavada en 420px. */
  .aurea-team-sec__media {
    max-width: clamp(300px, 30vw, 520px);
    margin-inline: 0;
    justify-self: start;
  }
}
.aurea-team-sec__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
}
/* Sin tope de 46ch: el parrafo corre hasta el limite de su mitad, que es
   el parametro real de la seccion. width 100% porque el contenedor es flex
   con align-items:flex-start (el boton NO debe estirarse). */
.aurea-team-sec__text .aurea-text-body { width: 100%; max-width: none; color: var(--aurea-text-soft); }
/* Bajo el título "Quiénes somos" el texto va en lectura suave (gris),
   misma jerarquía que la intro de Servicios. */
.aurea-team-sec__tagline { color: var(--aurea-text-soft); }
.aurea-team-sec__people {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: none;
}
.aurea-team-sec__people li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--aurea-line);
}
.aurea-team-sec__name {
  font-family: var(--aurea-font);
  font-size: var(--aurea-fs-project);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--aurea-text);
}
.aurea-team-sec__role {
  font-size: var(--aurea-fs-label);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--aurea-text-soft);
}
@media (max-width: 600px) {
  /* Texto a la izquierda; la FOTO centrada (luce mejor) y el bloque de
     texto un poco más abajo respecto a la imagen. */
  .aurea-team-sec__text { align-items: flex-start; text-align: left; margin-top: clamp(16px, 5vw, 28px); }
  .aurea-team-sec__people { justify-items: start; }
  .aurea-team-sec__people li { align-items: flex-start; }
}

/* =========================================================
   21 · MICROINTERACCIONES (2026-08)
   Aparición al hacer scroll + realces al pasar el cursor, para
   retener al usuario en las secciones donde suele perder interés,
   sin tocar la estética. 100% CSS (scroll-driven: animation-timeline
   view()). Solo se activa donde el navegador lo soporta y si el
   usuario NO pidió menos movimiento; si no, el contenido se ve
   normal (sin flash, sin quedar oculto). El héroe NO se anima
   (primera impresión instantánea).
   ========================================================= */
/* Entrada del heroe al cargar: escalonada, de arriba hacia abajo. */
@keyframes aurea-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .aurea-hero__eyebrow,
  .aurea-hero__title,
  .aurea-hero__lead,
  .aurea-hero__cta,
  .aurea-hero__reassure {
    animation: aurea-enter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .aurea-hero__title    { animation-delay: 0.10s; }
  .aurea-hero__lead     { animation-delay: 0.22s; }
  .aurea-hero__cta      { animation-delay: 0.34s; }
  .aurea-hero__reassure { animation-delay: 0.44s; }
}

@keyframes aurea-reveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aurea-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Bloques que suben y aparecen, ligados al scroll */
    .aurea-outcomes__label,
    .aurea-outcome,
    .aurea-outcomes__note,
    .aurea-work__head,
    .aurea-work__intro,
    .aurea-team-sec__media,
    .aurea-team-sec__text,
    .aurea-method__head,
    .aurea-method__row,
    .aurea-services__left,
    .aurea-service,
    .aurea-blog__head,
    .aurea-faq__head,
    .aurea-faq__item,
    .aurea-footer__cta,
    .aurea-footer__col {
      animation: aurea-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
    /* Con imagen o enlace: SOLO fundido, para no pisar el hover */
    .aurea-work__feature,
    .aurea-blog__card {
      animation: aurea-fade linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
    /* Cascada horizontal en grupos de tarjetas */
    .aurea-outcome:nth-child(2),
    .aurea-service:nth-child(2) { animation-range: entry 12% entry 54%; }
    .aurea-outcome:nth-child(3),
    .aurea-service:nth-child(3) { animation-range: entry 19% entry 61%; }
    /* Cascada vertical: metodo, proyectos y columnas del footer */
    .aurea-method__row:nth-child(2) { animation-range: entry 11% entry 53%; }
    .aurea-method__row:nth-child(3) { animation-range: entry 17% entry 59%; }
    .aurea-method__row:nth-child(4) { animation-range: entry 23% entry 65%; }
    .aurea-work__feature:nth-of-type(2) { animation-range: entry 10% entry 52%; }
    .aurea-work__feature:nth-of-type(3) { animation-range: entry 14% entry 56%; }
    .aurea-footer__col:nth-child(2) { animation-range: entry 12% entry 54%; }
  }
}

/* Respaldo para navegadores SIN scroll-driven animations (Safari, Firefox
   antiguos): mismo efecto con IntersectionObserver. La clase .aurea-io la
   pone un script en el <head>, asi que no hay parpadeo, y si el usuario
   tiene JS desactivado nada queda oculto. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aurea-io .aurea-outcomes__label,
    .aurea-io .aurea-outcome,
    .aurea-io .aurea-outcomes__note,
    .aurea-io .aurea-work__head,
    .aurea-io .aurea-work__intro,
    .aurea-io .aurea-team-sec__media,
    .aurea-io .aurea-team-sec__text,
    .aurea-io .aurea-method__head,
    .aurea-io .aurea-method__row,
    .aurea-io .aurea-services__left,
    .aurea-io .aurea-service,
    .aurea-io .aurea-blog__head,
    .aurea-io .aurea-faq__head,
    .aurea-io .aurea-faq__item,
    .aurea-io .aurea-footer__cta,
    .aurea-io .aurea-footer__col {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
                  transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .aurea-io .aurea-work__feature,
    .aurea-io .aurea-blog__card {
      opacity: 0;
      transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .aurea-io .is-visible { opacity: 1; transform: none; }
  }
}

/* Realces al pasar el cursor (se desactivan con prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .aurea-work__media,
  .aurea-blog__media { overflow: hidden; }
  .aurea-work__item,
  .aurea-blog__card { transition: transform 0.35s ease; }
  .aurea-work__item:hover,
  .aurea-blog__card:hover { transform: translateY(-5px); }
  .aurea-work__media img,
  .aurea-blog__media img { transition: transform 0.6s ease; }
  .aurea-work__item:hover .aurea-work__media img,
  .aurea-blog__card:hover .aurea-blog__media img { transform: scale(1.04); }

  /* Método: cada fila se destaca como un recuadro sutil al pasar el cursor */
  .aurea-method__row { transition: background-color 0.35s ease; }
  .aurea-method__row:hover { background-color: rgba(244, 244, 241, 0.03); }
  .aurea-method__num { display: inline-block; transition: transform 0.35s ease; }
  .aurea-method__row:hover .aurea-method__num { transform: translateX(3px); }
}

/* =========================================================
   22 · MÓVIL — CAJAS (para que las secciones no se pierdan)
   En el celular, los bloques que son solo texto se fusionan y
   se ven poco profesionales. Aquí cada uno se encierra en una
   tarjeta con aire. Usa los tokens de cada sección, así que se
   adapta solo a fondo oscuro (resultados, método) o claro
   (servicios, caso). No afecta al desktop.
   ========================================================= */
@media (max-width: 600px) {
  .aurea-outcome,
  .aurea-service,
  .aurea-method__row {
    border: 1px solid var(--aurea-line);
    border-radius: 12px;
    background-color: var(--aurea-bg-alt);
    padding: 22px 20px;
  }
  /* La primera "service" venía sin borde/padding superior (regla base):
     la igualamos para que también sea una caja completa (4 lados). */
  .aurea-service:first-child { border-top: 1px solid var(--aurea-line); padding-top: 22px; }
  /* Quita la línea inferior del contenedor del método (choca con las cajas) */
  .aurea-method__rows { border-bottom: 0; }

  /* Aire entre cajas */
  .aurea-outcomes__grid { gap: 16px; }
  .aurea-services__right { display: flex; flex-direction: column; gap: 14px; }
  .aurea-services__more { margin-top: 4px; align-self: flex-start; }

  /* MÉTODO: carrusel horizontal (se desliza a la derecha), cada paso en su caja */
  .aurea-method__rows {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .aurea-method__rows::-webkit-scrollbar { display: none; }
  .aurea-method__row { flex: 0 0 82%; scroll-snap-align: start; }

  /* Aire interno de los textos dentro de cada caja */
  .aurea-outcome__icon { margin-bottom: 18px; }
  .aurea-outcome__k { margin-bottom: 10px; }
  .aurea-method__row { row-gap: 12px; }
  .aurea-service { row-gap: 10px; }

  /* En movil la fila del footer se apila: marca arriba, discurso abajo. */
  .aurea-footer__cta { flex-direction: column; align-items: center; gap: 22px; }
  .aurea-footer__pitch { align-items: center; text-align: center; }
  /* La navegacion se centra como el resto del footer en movil. */
  nav.aurea-footer__col { align-items: center; text-align: center; }
  /* Footer más limpio: aire entre el CTA, el correo y el cierre */
  .aurea-footer__main { row-gap: 32px; }
  .aurea-footer__cols { margin-top: 0; }
  .aurea-footer__col { gap: 10px; }

  /* Heroe en movil: el eyebrow SI se muestra, porque es la unica linea
     sobre el pliegue que nombra la categoria. El lead sigue oculto para
     no volver a saturar. Cabe en UN renglon: 271px de texto en los 324px
     disponibles (359 de contenedor, menos 26 de raya y 10 de gap). */
  .aurea-hero__lead { display: none; }
  .aurea-hero__eyebrow { margin-bottom: 12px; }
  /* Contenido del héroe anclado a la parte BAJA de la pantalla */
  .aurea-hero { align-items: flex-end; min-height: 92vh; }
  .aurea-hero__text { margin-top: 0; margin-bottom: 9vh; }
  .aurea-hero__cta { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; margin-top: 26px; }
  .aurea-hero__cta .aurea-pill { width: 100%; text-align: center; padding-top: 14px; padding-bottom: 14px; }
  .aurea-hero__reassure { margin-top: 18px; }
}