/* ============================================================================
   NADIA HAZTE CASO · HOME
   "La hora dorada de volver a ti." Un atardecer editorial en papel crema.
   ----------------------------------------------------------------------------
   LEY GLOBAL (el bar Lucky Girl): cada sección = 1 FOCO + 1 ACCIÓN. El aire
   entre grupos ≥ 4× el aire dentro de un grupo (escala jerárquica de 6 niveles).
   Antes de añadir caja/borde/wash/motivo/sombra/2ª foto: BORRARLO y resolver con
   tamaño, peso y AIRE. Una foto por sección máximo, jamás dos apiladas, jamás la
   misma imagen dos veces, jamás como fondo de tarjeta. Ratio micro:macro ≈ 1:8.
   ----------------------------------------------------------------------------
   ÍNDICE
   0. Tokens (:root)
   1. Reset + base
   2. Tipografía (display, cuerpo, eyebrow, stat, firma, beats)
   3. Componentes compartidos (botones, hairline, dots, media-arc)
   4. Header
   5. S1 Hero
   6. S2 Puente emocional
   7. S3 Sobre Nadia
   8. S4 Elige tu camino (iconos SVG, sin foto)
   9. S5 Prueba social (stats + voces, sin foto)
   9b. S5b Por qué funciona (logo wall)
   10. S6+S7 Manifiesto oscuro + CTA final
   11. S8 Footer
   12. Motion (reveal) + reduced-motion
   13. Responsive
============================================================================ */

/* ============================================================================
   0. TOKENS
============================================================================ */
:root {
  /* --- COLOR · 60 lienzo / 30 superficie / 10 acento --- */
  --cream:        #FBF4EA;   /* 60% dominante */
  --cream-warm:   #F5E9DA;   /* alterno · SOLO S3 Sobre Nadia */
  --ink:          #2E1F2B;   /* TODO cuerpo y titular sobre crema — nunca #000 */

  --terracota:    #D9714F;   /* tarjeta dominante S4 + hovers */
  --peach:        #E8A185;   /* washes suaves */
  --lavender:     #B89FC9;   /* etiqueta "pronto" + washes de sección */

  --plum:         #6B2D5C;   /* TODOS los CTA sobre crema, enlaces, anclas */
  --plum-deep:    #2A1424;   /* sección oscura contemplativa */
  --plum-deep-2:  #3A1830;   /* variación sutil del oscuro */
  --gold:         #C9952B;   /* SOLO decorativo: hairlines, divisor 3-puntos */
  --gold-ink:     #7E5C14;   /* dorado profundo para TEXTO — ≥4.5:1 sobre crema */
  --coral:        #FF6B4A;   /* EXCLUSIVO flecha ▸ del CTA + 1 micro-punto hero */

  /* Tinta de cuerpo: cuerpo de corrido va en --ink SÓLIDO (alto contraste).
     --ink-meta queda SOLO para metadatos lavados. */
  --ink-meta:     color-mix(in srgb, var(--ink) 80%, var(--cream));  /* metadatos ≥80% */

  /* --- ESPACIO · utilidades 8pt (padding internos de componentes) --- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* ESCALA JERÁRQUICA · 6 niveles, cada token UN solo trabajo. Salto micro→macro
     ≥4×. "Apretado dentro del grupo, generoso entre grupos." PROHIBIDO un solo
     gap para >2 relaciones. (FB9) */
  --gap-eyebrow:   8px;                          /* eyebrow → titular. EL MÁS CHICO */
  --gap-line:      6px;                           /* byline bajo firma, label bajo número */
  /* head-body y para SEPARADOS para que el salto sea perceptible (≥1.4×), no 2px
     (FB4a/FB9): titular+apoyo casi pegados leen como unidad; párrafo→párrafo respira. */
  --gap-head-body: clamp(10px, 1.4vw, 14px);      /* titular → cuerpo de apoyo (apretado) */
  --gap-para:      clamp(18px, 2.4vw, 26px);      /* párrafo → párrafo del MISMO argumento */
  --gap-group:     clamp(40px, 5vw, 64px);        /* grupo → grupo / cuerpo → acción */
  --gap-shift:     clamp(56px, 7vw, 88px);        /* cambio de REGISTRO / beats aislados */

  --section-y:       clamp(96px, 13vw, 160px);    /* respiro de sección (el macro-aire) */
  --section-y-tight: clamp(72px, 10vw, 120px);    /* secciones que comparten registro */
  --gutter:    clamp(20px, 6vw, 128px);     /* aire lateral generoso */
  --maxw:      1180px;                       /* contenedor máximo */
  --header-h:  74px;                          /* alto real del header sticky esbelto (~72px medido) → offset de las fotos sticky del split desktop */
  --measure:   62ch;                         /* medida de lectura tope */

  /* --- RADIOS · arco-pétalo asimétrico compartido + card único --- */
  --r-card:   16px;
  --r-btn:    8px;   /* squircle editorial: ni pill 999 ni esquina dura */
  --r-arc-tl: clamp(64px, 9vw, 132px);    /* piso alto: el arco firma se lee siempre */
  --r-arc-br: clamp(32px, 5vw, 72px);
  --r-arc:    var(--r-arc-tl) var(--r-card) var(--r-card) var(--r-arc-br);
  /* Arco espejado (esquina sup-DERECHA) para la foto about → rompe la rima mecánica */
  --r-arc-mirror: var(--r-card) var(--r-arc-tl) var(--r-arc-br) var(--r-card);

  /* --- HAIRLINE · única línea estructural permitida --- */
  --hairline: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);

  /* --- SOMBRA · solo cálida, jamás gris. Sobrevive SOLO en hover del ritual --- */
  --shadow-warm: 0 8px 30px -12px color-mix(in srgb, var(--plum) 8%, transparent);

  /* Sombras "caras": capas apiladas, tintadas en ciruela + terracota (nunca negro),
     misma dirección de luz en todo el home, + filo de luz interior (papel/cera).
     Jerarquía honesta: el altar (ritual) pesa/flota MÁS que los mundos. Método Comeau. */
  --shadow-card-rest:
    0 2px 5px color-mix(in srgb, var(--plum) 12%, transparent),
    0 12px 24px color-mix(in srgb, var(--plum) 15%, transparent),
    0 26px 48px color-mix(in srgb, var(--terracota) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 62%, transparent);
  --shadow-card:
    0 5px 10px color-mix(in srgb, var(--plum) 15%, transparent),
    0 24px 44px color-mix(in srgb, var(--plum) 20%, transparent),
    0 52px 84px color-mix(in srgb, var(--terracota) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 68%, transparent);
  --shadow-ritual-rest:
    0 4px 8px color-mix(in srgb, var(--plum) 15%, transparent),
    0 20px 40px color-mix(in srgb, var(--plum) 18%, transparent),
    0 40px 76px color-mix(in srgb, var(--terracota) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 32%, transparent);
  --shadow-ritual:
    0 8px 16px color-mix(in srgb, var(--plum) 18%, transparent),
    0 34px 58px color-mix(in srgb, var(--plum) 23%, transparent),
    0 66px 110px color-mix(in srgb, var(--terracota) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 32%, transparent);

  /* --- GRADING FOTO · hora dorada con firma. Idéntico en ambas fotos. --- */
  --img-filter: saturate(0.95) contrast(1.06) brightness(1.03) sepia(0.1) hue-rotate(-5deg);

  /* --- MOTION --- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --dur-reveal: 520ms;
  --dur-slow:   640ms;
  --dur-hover:  300ms;
  --stagger:    80ms;
}

/* ============================================================================
   0.b FALLBACKS ANTI-FOUT · métricas ajustadas para que el swap sea imperceptible
   (size-adjust/overrides igualan el alto del fallback al de la fuente web → CLS≈0)
============================================================================ */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 92%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ============================================================================
   1. RESET + BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* `clip` (no `hidden`): contiene overflow lateral SIN romper position:sticky */
}

img { max-width: 100%; display: block; }

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

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

h1, h2, h3 { margin: 0; }

hr { border: 0; margin: 0; }

::selection { background: color-mix(in srgb, var(--peach) 55%, transparent); color: var(--ink); }

/* Accesibilidad: foco visible coherente con la marca */
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 4px;
  border-radius: 6px;   /* era 4px — acompaña el nuevo --r-btn:8px */
}
/* En la sección oscura el outline ciruela es invisible → dorado (6.4:1 sobre plum-deep) */
.dark a:focus-visible,
.dark .btn:focus-visible {
  outline-color: var(--gold);
}
/* En el altar terracota el outline ciruela apenas contrasta → crema */
.path-card--ritual .btn:focus-visible { outline-color: var(--cream); }

/* Destinos de ancla: bajan el punto de aterrizaje bajo el header sticky */
#inicio,
#about-title {
  /* header fijo ~74px + el eyebrow "Piensa en mí como" que va ENCIMA del h2:
     el offset debe dejar ver ambos, por eso es mayor que la altura del header. */
  scroll-margin-top: clamp(116px, 20vw, 140px);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Contenedor base reutilizable */
.hero__inner,
.bridge__inner,
.about__inner,
.paths__inner,
.proof__inner,
.endorse__inner,
.dark__inner,
.footer__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================================
   2. TIPOGRAFÍA · escala con saltos OBVIOS (Fraunces display + Hanken cuerpo)
============================================================================ */

/* NIVEL 1·2 · DISPLAY — Fraunces opsz alto, SOFT 0, tracking negativo. */
.display {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-feature-settings: "liga" 1, "kern" 1;
  color: var(--ink);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;            /* cero viudas/huérfanas */
}

.display--hero {
  font-size: clamp(2.25rem, 8vw, 4.5rem);   /* baja el muro 41.6→36px en móvil; sin salto en desktop */
  font-weight: 400;            /* CONECTOR regular real → delta de 200u contra el deseo (600) */
  line-height: 1.1;            /* +aire interno al cuerpo de letra menor */
  letter-spacing: -0.025em;    /* leve apertura al reducir el tamaño */
  text-wrap: pretty;           /* anula el balance heredado de .display; los saltos los mandan los spans
                                  (display:block), pero un deseo largo puede plegar internamente sin desbordar */
}

/* PRESENTACIÓN "Soy Nadia." — la línea MÁS callada, su propia línea, menor */
.display--hero .hero__intro {
  display: block;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;                  /* nivel +1 fijo (era 0.6em, huérfano atado al titular) */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-meta);           /* tinta lavada (ink 80% / cream) ≈ AA */
  margin-bottom: 0.6rem;            /* etiqueta separada, no flota (era 0.1em ≈ 2px) */
}

/* CONECTOR "Te ayudo a" / "A" — se retira en tinta lavada, regular, INLINE
   (fluye con el deseo → titular compacto, no escalera). */
.display--hero .hero__lead {
  font-weight: 400;
  font-style: normal;
  color: var(--ink-meta);           /* se queda atrás sin perder legibilidad (AA) */
}

/* DESEO — el clímax: peso tope + ciruela-marca + itálica. INLINE (fluye con el
   conector como "your dream life" de Lucky Girl), salta por color+peso+itálica. */
.display--hero .hero__desire {
  font-weight: 600;                 /* tope del eje wght */
  font-style: italic;               /* explícito; ya venía de .display em */
  color: var(--plum);               /* #6B2D5C ≈ AA — color de MARCA, ata al CTA */
  letter-spacing: -0.035em;         /* la itálica densa pide cerrar 1 punto vs conector */
}

.display--section {
  font-size: clamp(2rem, 5.5vw, 3.3rem);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* La palabra-ancla emocional: la cursiva del deseo pesa MÁS que el roman */
.display em {
  font-style: italic;
  font-weight: 600;
}
/* Negrita real 600 dentro de display (franja: "la ciencia por fin lo confirma") */
.display strong {
  font-weight: 600;
  color: inherit;
}

/* Micro-punto coral bajo la palabra-ancla del hero (dosis ~5%) */
.anchor-coral {
  position: relative;
  white-space: nowrap;
}
.anchor-coral::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.22em;
  width: 0.13em; height: 0.13em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--coral);
}

/* NIVEL 4 · CUERPO — Hanken en --ink SÓLIDO (alto contraste). */
.body, .lede, .verse {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.62;
  text-wrap: pretty;
  max-width: var(--measure);
}

/* NEGRITA ESTRATÉGICA — marca deseo y prueba sin reescribir el copy. El peso
   (no el color) hace el contraste: strong = --ink. 3 picos: 400 / 600 italic / 800. */
strong {
  font-weight: 700;
  color: var(--ink);
  font-style: inherit;
}
.dark strong {
  color: color-mix(in srgb, var(--cream) 96%, white);
}

/* NIVEL 3 · LEDE — puente real entre display y body: ~1.4rem, 44ch. */
.lede {
  font-size: clamp(1rem, 2.4vw, 1.25rem);   /* 19→16px en móvil: restablece descanso vs titular */
  line-height: 1.55;                          /* +legibilidad a 16px */
  max-width: 44ch;                            /* ya baja a 36ch en ≤560 */
}

/* NIVEL 0 · EYEBROW — Hanken 600 MAYÚSCULAS, tracking abierto, gold-ink (AA). */
.eyebrow {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
/* En el oscuro el gold-ink no contrasta sobre plum-deep → dorado tirando a crema */
.dark .eyebrow {
  color: color-mix(in srgb, var(--gold) 70%, var(--cream));
}

/* CIFRAS del hero (susurro de credibilidad) — Hanken tabular. */
.stat {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
}
.stat__plus, .stat__sep { color: var(--gold-ink); font-style: normal; }
.stat__group { white-space: nowrap; }
.stat__sep { align-self: center; }

/* RÚBRICA "Hazte caso." — firma manuscrita recurrente (Fraunces italic confiado) */
.signature {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 48, "SOFT" 0;
  font-weight: 520;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  color: var(--plum);
  margin: 0;
}

/* Detalle de revista "— Nadia" en Hanken (metadato ≥80%), a gap-line de la firma */
.byline {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-meta);
  margin: var(--gap-line) 0 0;
}

/* Remates-respiro aislados (BEATS Fraunces italic 600, golpes de respiración) */
.verse-break, .body-break {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  color: var(--ink);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

/* ============================================================================
   3. COMPONENTES COMPARTIDOS
============================================================================ */

/* ============================================================
   SISTEMA DE BOTONES — clase mundial. Cuatro variantes, una flecha de línea.
   ============================================================ */
/* "Joya delicada" (ref. MarocMaroc/CACTEA): outline de LÍNEA FINA que se LLENA
   suave al hover, pill generoso, tracking amplio. La preciosidad está en la
   delicadeza + la transformación elegante (no en gradientes glossy). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 50px;
  padding: 1.05em 2.1em;               /* generoso, como la referencia de lujo */
  border-radius: 999px;                /* pill, PERO con línea delicada (no relleno candy) */
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;              /* tracking amplio, delicado */
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;                        /* el ENGASTE de oro lo hace ::before */
  /* La transformación del lujo: el relleno entra LENTO y elegante (~440ms). */
  transition:
    background-color 440ms var(--ease-out),
    color            440ms var(--ease-out),
    box-shadow       440ms var(--ease-out),
    transform        120ms var(--ease-out);
}
/* ENGASTE DE ORO · anillo metálico fino (claro→oro→profundo) que rodea el botón
   como montura de joya. Máscara → solo pinta el borde, respeta el pill y el
   relleno transparente. La gema (ciruela) se enciende dentro del oro al hover. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                        /* grosor del engaste */
  background: linear-gradient(135deg,
    #EAD191 0%, var(--gold) 42%, #9C711B 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: opacity 440ms var(--ease-out), filter 440ms var(--ease-out);
}
/* Al encenderse, el oro capta más luz (sutil). */
.btn:hover::before,
.btn:focus-visible::before { filter: brightness(1.12); }
.btn:active { transform: translateY(0.5px); }

/* Flecha de LÍNEA: hereda currentColor (cambia con el relleno) y se desliza. */
.btn__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 440ms var(--ease-out);
}
.btn__arrow-svg { display: block; width: 1.05em; height: auto; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

@media (hover: hover) and (pointer: fine) {
  .path-card--ritual:hover,
  .path-card--soon:hover { will-change: transform; }
}

/* PRIMARY (hero, sobre crema): línea ciruela fina → se LLENA de ciruela con un
   halo cálido suave (la gema se enciende). */
.btn--primary {
  color: var(--plum);
  border-color: color-mix(in srgb, var(--plum) 55%, transparent);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
  box-shadow: 0 16px 46px -20px color-mix(in srgb, var(--plum) 68%, transparent);
}

/* GHOST (header): la misma joya, más discreta. */
.btn--ghost {
  color: var(--plum);
  border-color: color-mix(in srgb, var(--plum) 48%, transparent);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
}

/* SOFT (secundario del hero): la puerta de captura, deliberadamente MÁS LIVIANA que
   el primario para que no compitan. Sin engaste de oro; línea fina neutra + texto
   apagado. La jerarquía manda: el ritual es la joya, "Empieza gratis" acompaña. */
.btn--soft {
  color: var(--ink-meta);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.btn--soft::before { display: none; }
.btn--soft:hover,
.btn--soft:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 38%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.btn--ghost__short { display: none; }

/* CREAM (tarjeta ritual, sobre terracota): línea crema → se llena de crema,
   texto ciruela. */
.btn--cream {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 60%, transparent);
}
.btn--cream:hover,
.btn--cream:focus-visible {
  background: var(--cream);
  color: var(--plum);
  border-color: var(--cream);
  box-shadow: 0 16px 46px -20px color-mix(in srgb, black 28%, transparent);
}

/* GLOW (sección oscura): la joya luminosa, único faro del dark. Halo SIEMPRE;
   línea crema → se llena de crema, texto ciruela, el halo crece. */
.btn--glow {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 62%, transparent);
  box-shadow: 0 0 34px -10px color-mix(in srgb, var(--cream) 32%, transparent);
}
.btn--glow:hover,
.btn--glow:focus-visible {
  background: var(--cream);
  color: var(--plum);
  border-color: var(--cream);
  box-shadow: 0 0 48px -8px color-mix(in srgb, var(--cream) 58%, transparent);
}

/* --- Motivo de 3 puntos · SVG, currentColor para nitidez (firma de marca) --- */
.dots { display: block; }
.dots .dot { fill: currentColor; }

/* --- Media arco-pétalo · grading atardecer único; luz direccional por foto --- */
.media-arc {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-arc);
  isolation: isolate;            /* contiene el blend, evita seams en bordes redondeados */
  background: radial-gradient(
    120% 90% at 72% 30%,
    color-mix(in srgb, var(--peach) 30%, transparent),
    transparent 60%
  );
}
.media-arc img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* NUNCA estirar retratos de 820px */
  filter: var(--img-filter);
  backface-visibility: hidden;   /* mata el seam de 1px al animar la escala en iOS */
}
/* Overlay atardecer: terracota 20% → ciruela 16%, mix-blend multiply */
.media-arc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--terracota) 20%, transparent),
    color-mix(in srgb, var(--plum) 16%, transparent)
  );
  mix-blend-mode: multiply;
}

/* ============================================================================
   4. HEADER
============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Grid de 3 zonas: wordmark centrado (estilo Lucky Girl), CTA a la derecha. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  padding: clamp(11px, 1.2vw, 14px) var(--gutter);   /* header esbelto (era s3=24 → 98px de alto) */
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    opacity var(--dur-hover) var(--ease-out);
}
/* Blur de backdrop SOLO en puntero fino/desktop: caro en móvil de gama media */
@media (min-width: 768px) and (pointer: fine) {
  .site-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
/* Al hacer scroll: hairline + fondo más sólido para separarlo del contenido */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: var(--shadow-warm);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}
/* Sobre la sección oscura: el header se desvanece (bloque inmersivo borde a borde). */
.site-header.is-over-dark {
  opacity: 0;
  pointer-events: none;
}
/* Header esbelto en desktop: el botón tenía min-height:50px que lo anclaba. Lo
   bajamos a 44px (= el tap-target del hamburguesa, el piso real). No toca móvil. */
@media (min-width: 881px) {
  .site-header .btn { padding-block: 0.78em; min-height: 44px; }
}
@media (max-width: 767px) {
  .site-header { background: color-mix(in srgb, var(--cream) 93%, transparent); }
  .site-header.is-scrolled { background: color-mix(in srgb, var(--cream) 98%, transparent); }
  /* Sides IGUALES (1fr·auto·1fr) → "Hazte caso" centrado de verdad en el header,
     no en el espacio sobrante. La hamburguesa se ancla a la izq y el botón a la
     der (justify-self start/end); el CTA compacto "Ritual" + padding lateral
     reducido dejan margen de sobra para que el botón NO desborde su columna. */
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .site-header .btn--ghost__full { display: none; }
  .site-header .btn--ghost__short { display: inline; }
}

/* Wordmark = nombre del MOVIMIENTO "Hazte caso" — Fraunces italic, sutil y
   elegante, centrado, con el motivo de 3 puntos de marca. */
.wordmark {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink);
  line-height: 1;
}
.wordmark__name {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0;
  font-style: italic;
  font-weight: 480;
  font-size: clamp(1.1rem, 3vw, 1.35rem);   /* más sutil (antes 1.5–1.9rem) */
  letter-spacing: 0.005em;
}
.wordmark__dots {
  width: 0.82em;
  height: auto;
  flex: none;
  transform: translateY(0.08em);            /* asienta el triángulo en la base */
}
.wordmark__dots circle { fill: var(--gold-ink); }

/* Hamburguesa (izquierda) — 2 trazos finos estilo editorial; 44px tap target. */
.nav-toggle {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px;                            /* recupera el tap target sin engordar la fila */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle__box { display: flex; flex-direction: column; gap: 6px; width: 22px; }
.nav-toggle__box span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Menú desplegable bajo el header */
.site-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--gutter) var(--s5);
  background: var(--cream);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  box-shadow: var(--shadow-warm);
}
.site-menu[hidden] { display: none; }
.site-menu a {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  font-weight: 460;
  color: var(--ink);
  padding: var(--s2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-menu a:last-child { border-bottom: 0; }
.site-menu a:hover { color: var(--plum); }

.site-header .btn--ghost { grid-column: 3; justify-self: end; }

/* ============================================================================
   5. S1 · HERO
   FOCO ÚNICO: titular de deseo + UN CTA. La firma es la rúbrica del CTA; el stat
   es susurro de credibilidad bajo el botón (FB3). JERARQUÍA DE ESPACIO (FB9):
   eyebrow PEGADO al h1 (8px), lockup como unidad, y SALTO grande (gap-group)
   solo lockup→acción. Ratio micro:macro ≈ 1:8.
============================================================================ */
.hero {
  /* DESKTOP: padding ajustado para que TODO el hero quepa en una sola vista
     (antes padding-bottom=section-y=160px dejaba un hueco gigante abajo). */
  padding-top: clamp(40px, 4vw, 56px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

.hero__inner {
  display: grid;
  grid-template-columns: 53% 47%;
  align-items: center;             /* retrato centrado al lockup = composición serena */
  gap: clamp(24px, 5vw, 80px);
}

/* Solo DOS grupos de significado en la columna: lockup y acción. El único aire
   grande vive entre ellos (no 5 huecos uniformes). */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);     /* lockup → acción; ajustado para caber en una vista (era gap-group 64) */
  min-width: 0;                    /* permite encoger bajo el contenido (anti-overflow) */
}

.hero__lockup {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Eyebrow = susurro del titular, con un respiro a 14px (un poco más separado de
   "Soy Nadia"). Envuelve en móvil (NO nowrap: forzaba a desbordar el viewport). */
.hero .eyebrow {
  margin: 0 0 14px;
  font-size: 0.7rem;            /* nivel 0 discreto bajo el cuerpo, ratio limpio (era 0.76rem) — SOLO hero */
  letter-spacing: 0.18em;
  text-wrap: balance;
}
/* h1 → lede: escalón medio (head-body). Leen como una idea, no flotan. */
.hero .lede { margin: var(--gap-head-body) 0 0; }

/* GRUPO 2 · acción: el CTA es el ÚNICO foco; el stat es su susurro de
   credibilidad PEGADO debajo (FB3). El macro-aire (gap-group) vive SOLO entre
   lockup↔acción; dentro de la acción, CTA y stat leen como una unidad. */
.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
}
/* Móvil: apilar las dos puertas a lo ancho (no lado a lado → no se aprietan). */
@media (max-width: 560px) {
  .hero__act { flex-direction: column; align-items: stretch; }
}

/* GRUPO 2 · prueba social PROMINENTE — cifras grandes (reusa .bigstats) +
   descriptor de marca. Ya no es nota al pie bajo el CTA. */
.hero__proof {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);    /* cifras → línea de marca; apretado para caber (era gap-group 64) */
  align-items: flex-start;
}
/* Variante hero del muro de cifras: alineado a la izquierda y algo menor que el
   de la sección de prueba social (allá es el foco; aquí, apoyo del titular). */
.bigstats--hero {
  justify-content: flex-start;
  gap: clamp(20px, 5vw, 40px);
  margin-top: 0;
}
.bigstats--hero .bigstat__num { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 0.95; }  /* 31→27px: deja de competir con el titular reducido */
.bigstats--hero .bigstat__label { font-size: 0.68rem; }

/* Descriptor de marca: "Ciencia y prácticas ancestrales" — línea de credencial
   en TINTA con raya editorial, distinta de los labels dorados de las cifras. */
.hero__tag {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-meta);
}
.hero__tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
/* En móvil el descriptor es más largo ("Rituales, ciencia y prácticas ancestrales")
   y envolvía a 2 líneas: bajamos tamaño + tracking para que quede en UNA. Desktop intacto. */
@media (max-width: 480px) {
  .hero__tag { font-size: 0.68rem; letter-spacing: 0.07em; }
}

/* Foto: sangra al borde derecho, retrato editorial full-bleed. */
.hero__media {
  margin: 0;
  margin-right: calc(-1 * var(--gutter));
}
.media-arc--hero { aspect-ratio: 9 / 10; }   /* DESKTOP: menos alta que 4/5 → no gobierna la altura del hero */
.media-arc--hero img {
  /* nadia-campo-hero.jpg ya viene recortada con Nadia centrada y cuerpo completo
     (márgenes iguales mano↔pie). Sin zoom de reposo: cover la muestra centrada. */
  object-position: 50% 50%;
  transform-origin: 50% 50%;
  --rest-scale: 1;
}

/* ============================================================================
   6. S2 · PUENTE EMOCIONAL · banda foto de transición + columna a la IZQUIERDA
   (eje del hero), crescendo de 4 movimientos. La banda marca la entrada (Lucky
   Girl); el giro = cambio de registro tipográfico EN ciruela, full-bleed
   centrado (única declaración-poster). Ritmo en 3 tiers, sin gaps invertidos.
============================================================================ */
.bridge {
  padding-top: 0;                 /* la BANDA full-bleed abre la sección (corte claro) */
  padding-bottom: var(--section-y);
  background: color-mix(in srgb, var(--lavender) 10%, var(--cream));
  --bridge-beat: clamp(28px, 3.6vw, 36px);  /* beat: > verso(18), < grupo(40) → sin salto invertido */
}

/* --- Banda de transición: full-bleed, altura de BANDA (no retrato largo) --- */
.bridge__band {
  margin: 0 0 var(--gap-group);                 /* foto → cabecera: salto de grupo */
  margin-inline: calc(-1 * var(--gutter));      /* full-bleed, patrón del hero/about móvil */
}
.bridge__bandarc {
  aspect-ratio: 16 / 9;                          /* BANDA apaisada, la más baja de la página */
  max-height: clamp(220px, 56vw, 300px);
  border-radius: 0;                              /* bordes limpios, sin arco */
}
.bridge__bandarc img {
  height: 100%;
  object-position: 50% 30%;                      /* crop a la MIRADA → distinto al hero */
  --rest-scale: 1;                               /* banda quieta, sin parallax-zoom */
}
/* .bridge__bandarc hereda de .media-arc: --img-filter + overlay atardecer ::after */

/* --- COLUMNA a la IZQUIERDA (eje del hero); centrada EN PÁGINA dentro de 60ch --- */
.bridge__inner {
  max-width: 60ch;
  margin-inline: auto;
}
.bridge__head,
.bridge__rampa,
.bridge__land { text-align: left; }   /* lectura íntima de corrido, eje fijo */

/* Movimiento 0 · cabecera. eyebrow-tesis → hook = 8px (unidad); head → rampa = registro */
.bridge__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-eyebrow);
  margin-bottom: var(--gap-group);   /* cabecera → rampa: BAJA de shift a grupo (era demasiado aire) */
}
.bridge__hook { max-width: 12ch; }

/* TESIS de marca: tratamiento PROPIO (no el .eyebrow caps). Sentence-case,
   tracking suave, gold-ink (AA), 2 líneas balanceadas. Susurra, no grita. */
.bridge__thesis {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 2.4vw, 0.98rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--gold-ink);                /* ≥4.5:1 sobre crema (AA) */
  max-width: 30ch;
  text-wrap: balance;
  margin: 0;
}

/* Movimiento 1 · la rampa */
.bridge__rampa > * + * { margin-top: var(--gap-para); }
.bridge .verse { font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); }

/* Beat "No eras tú." — 1er latido: ciruela. Respira MÁS que un verso (18) pero
   MENOS que un grupo (40): mata el salto invertido de antes (group×2 ≈ 80px). */
.bridge__beat {
  margin: var(--bridge-beat) 0;
  color: var(--ink);                     /* UNA sola voz cromática en el display de la sección */
  font-variation-settings: "opsz" 38, "SOFT" 0;   /* opsz acorde al tamaño = legible, no decorativo */
}

/* Movimiento 2 · el GIRO: cero caja, full-bleed CENTRADO (única poster). */
.bridge__turn {
  width: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--maxw) / 2));
  margin-top: var(--gap-shift);          /* rampa → giro: el ÚNICO shift de la sección (pivote dolor→deseo) */
  margin-bottom: var(--gap-group);       /* giro → aterrizaje: salto de grupo (empuja al deseo, no lo encajona) */
  text-align: center;
}
/* La declaración: Fraunces italic, AHORA en CIRUELA (clímax = "volver a ti" del hero).
   Tope 3rem (bajó de 3.2) para no competir con el hook. */
.bridge__turn-lead {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 42, "SOFT" 0;   /* legible: opsz acorde al tamaño, no swash */
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);                     /* tinta: coherencia cromática del display */
  margin: 0 auto var(--gap-head-body);
  max-width: 18ch;
  text-wrap: balance;
}
.bridge__turn-body {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  margin: 0 auto;
  max-width: 38ch;
  text-wrap: pretty;
}

/* Énfasis inline · MISMO patrón que el hero (negrita tinta, no color): coherente,
   legible, sin sumar otro morado disperso. */
.bridge__ink-plum {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* Movimiento 3 · el aterrizaje: AHORA con su aire de grupo (antes margin:0). */
.bridge__land { margin: var(--gap-group) 0 0; max-width: 58ch; }

/* Movimiento 4 · GANCHO de cierre: Fraunces display itálica ciruela, tamaño
   intermedio cuerpo↔turn-lead. Remate-poster: lo que el ojo agarra aunque no
   lea, deja curiosidad y jala a la siguiente sección. Texto VERBATIM, solo separado. */
.bridge__hook-close {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0;   /* LEGIBLE: opsz acorde, no la swash de 96 */
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 5.6vw, 2.6rem);    /* el remate más grande de la sección = destaca */
  line-height: 1.18;                          /* aire vertical: no apeñuzcado */
  letter-spacing: -0.02em;
  color: var(--ink);                          /* misma voz cromática (coherencia) */
  max-width: 26ch;                            /* room: deja de romper apretado */
  text-wrap: balance;
  margin: var(--gap-shift) 0 0;               /* su propio aire amplio, como remate aislado */
}
/* Subtítulo-susurro del gancho (línea pequeña tipo Lucky Girl): continúa la
   curiosidad y jala a la siguiente sección. Pegado al gancho (gap-snug). */
.bridge__hook-sub {
  margin: var(--gap-snug) 0 0;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 2.4vw, 1.15rem);
  font-weight: 500;
  font-style: italic;
  color: var(--ink-meta);
  letter-spacing: 0.005em;
}

/* ============================================================================
   7. S3 · SOBRE NADIA · historia de origen como PRUEBA en 3 actos.
   Entrada MARCADA pero APRETADA: corte de capítulo (hairline dorada + cambio
   a cream-warm), padding compacto tipo Lucky Girl — sin colchón. La FOTO
   cierra la sección (banda full-bleed, portrait-3, crop al rostro) y entrega
   a S4. Coherencia: una sola voz TINTA en display/beats; morado SOLO en la
   rúbrica "Hazte caso."; énfasis = negrita tinta.
============================================================================ */
.about {
  /* Entrada APRETADA: el corte lo marcan el cambio de fondo + la hairline;
     el espacio es controlado (Lucky Girl), no el colchón disperso de antes. */
  padding-top: clamp(36px, 8vw, 60px);
  padding-bottom: 0;                       /* la BANDA full-bleed cierra a ras del borde */
  /* BLUSH rosado-delicado (durazno+un toque de ciruela sobre crema): marca claro
     el cambio de bloque y "tiñe" de conexión la sección donde hablamos del vínculo
     con Nadia. Suave (luminoso) → el texto tinta/dorado/ciruela mantiene WCAG AA. */
  background: color-mix(in srgb, var(--peach) 30%, color-mix(in srgb, var(--plum) 6%, var(--cream)));
  /* Corte de capítulo: hairline dorada que separa S2 de S3 (cambio de bloque). */
  border-top: var(--hairline);
  /* Escala de ritmo APRETADA y consistente (3 tiers claros, sin colchones):
     párrafo (gap-para 18-26) < beat (pegado a su párrafo) < grupo (aire entre actos). */
  --about-beat: clamp(22px, 3vw, 30px);    /* beat pegado a su párrafo: respira, no boquete */
  --about-group: clamp(30px, 4.2vw, 46px); /* entre actos: el ÚNICO aire grande (antes 40-64) */
}

/* Columna única de lectura íntima, centrada en página dentro de medida fija. */
.about__inner {
  max-width: 60ch;
  margin-inline: auto;
}

/* Columna de texto en grupos: cada relación con SU token, no un gap uniforme. */
.about__copy {
  display: flex;
  flex-direction: column;
  text-align: left;                        /* lectura íntima de corrido, eje fijo */
}

/* GRUPO A · cabecera: rótulo (8px) → tesis (registro) → titular. */
.about__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-eyebrow);                 /* rótulo ↔ titular = unidad de cabecera */
  margin-bottom: var(--about-group);       /* cabecera → cuerpo: salto de grupo (apretado) */
}
/* TITULAR Sobre Nadia · JERARQUÍA estilo hero (aprendizaje de la S1): los
   conectores RECEDEN en peso ligero; la frase clave —la confianza "ya pasó por
   lo mismo"— SALTA en peso. Todo en TINTA (coherencia: la jerarquía es por peso,
   no por color). "acompaña" hereda la itálica de .display em como acento cálido. */
/* Título = la frase-confianza, peso confiado (default display--section). */
.about__title { text-wrap: balance; }
/* Dos sub-líneas (los roles): un escalón DEBAJO del título, Fraunces italic,
   cada una en UNA sola línea (white-space:nowrap), tinta lavada. */
.about__roles {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 5px);
  margin: var(--gap-head-body) 0 0;
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0;
  font-style: italic;
  font-weight: 440;
  font-size: clamp(1.05rem, 2.9vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink-meta);
}
.about__roles span { white-space: nowrap; }   /* cada rol cabe en una línea */

/* CUERPO · párrafos del MISMO argumento a gap-para; los GRUPOS de acto respiran más. */
.about__copy .body { margin: 0; max-width: 58ch; }

/* ACTO 1 · apertura "soy como tú" separada de la cabecera por salto de grupo. */
.about__open { margin-top: var(--about-group); }

/* ACTO 2 · LA PRUEBA — párrafo y beat APRETADOS como una sola unidad dramática. */
.about__proof { margin-top: var(--about-group); }
/* ACTO 3 · lección + síntesis — su propio aire de grupo; dentro, párrafos a gap-para. */
.about__lesson { margin-top: var(--about-group); }
.about__lesson .body + .body { margin-top: var(--gap-para); }
/* MISIÓN — cierra el cuerpo a salto de grupo. Specificity .about__copy para ganarle
   al reset `.about__copy .body { margin:0 }` (si no, el beat queda pegado a la misión). */
.about__copy .about__mission { margin-top: var(--about-group); }

/* BEAT "Sin bisturí." — clímax de la prueba. Fraunces italic TINTA, opsz LEGIBLE
   (40, NO el decorativo 72 heredado del global). Distinguido por italica + tamaño,
   jamás por color. Pegado a su párrafo-prueba con about-beat: respira sin boquete. */
.about__beat {
  margin: var(--about-beat) 0 0;
  color: var(--ink);                       /* UNA sola voz cromática (coherencia) */
  font-variation-settings: "opsz" 40, "SOFT" 0;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem); /* intermedio: > cuerpo, < titular */
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* PRUEBA / MISIÓN · pico de negrita (800) para los hechos que cargan credibilidad:
   "sanó" y "miles de mujeres a volver a ellas". Negrita TINTA, nunca color. */
.about__win { font-weight: 800; color: var(--ink); }

/* FIRMA · rúbrica de marca (el ÚNICO morado legítimo). Sella la sección,
   separada del cuerpo por salto de grupo. */
.about__sign { margin-top: var(--about-group); }
.about__sign .signature {
  font-size: clamp(1.45rem, 3.4vw, 1.8rem);  /* sube medio punto: CIERRA la sección */
}

/* FOTO AL FINAL · BANDA full-bleed de altura CONTROLADA (no retrato largo).
   Cierra la sección y marca la transición a S4. Bordes limpios (radius 0),
   portrait-3; hereda --img-filter cálido + overlay atardecer ::after de .media-arc. */
.about__media {
  margin: var(--gap-shift) 0 0;            /* firma → foto: cambio de registro (cierre) */
  margin-inline: calc(-1 * var(--gutter)); /* full-bleed, patrón banda S2 */
}
.about__bandarc {
  aspect-ratio: 16 / 9;                     /* BANDA apaisada, no retrato: altura controlada */
  max-height: clamp(240px, 60vw, 360px);
  border-radius: 0;                         /* bordes limpios, sin arco (corte editorial) */
  width: 100%;
}
.about__bandarc img {
  height: 100%;
  object-position: 50% 30%;                 /* crop al ROSTRO: ojos + flor en cuadro */
  transform-origin: 50% 30%;
  --rest-scale: 1;                          /* banda quieta, sin parallax-zoom que descuadre */
}

/* ============================================================================
   8. S4 · ELIGE TU CAMINO · adaptación del carrusel "Programas" de SHA en clave
   atardecer. ALTAR (el ritual: degradado terracota anclado en plum-deep para que
   el crema supere AA — terracota sólido daba 2.99:1; ÚNICO <a>/tabbable) +
   CONSTELACIÓN (3 "Pronto": washes pastel + icono de línea, MISMO idioma SHA pero
   en sordina). MÓVIL-FIRST: base = riel swipe con peek; ≥881 = grid 3-up bajo el
   altar. Jerarquía por SATURACIÓN + ACCIÓN, no por forma.
============================================================================ */
.paths {
  padding-top: calc(var(--section-y) * 0.4);
  padding-bottom: var(--section-y);
  background: var(--cream);
}
.paths__inner {
  display: flex;
  flex-direction: column;          /* head → altar → riel → indicador (con márgenes) */
}

/* CABECERA · rótulo (8px) → titular → subtítulo verídico (sin tabs/"ver todos"). */
.paths__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-eyebrow);         /* eyebrow pegado al titular */
}
.paths__head > .display { max-width: 14ch; }

/* Patrón base de tarjeta (sin foto): superficie + radio + flujo en columna. */
.path-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}
.path-card__icon { display: inline-flex; }
.path-card__icon svg { display: block; }

/* --- ALTAR · el ritual ----------------------------------------------------
   Degradado cuyo lado IZQUIERDO (toda la columna de texto, left-aligned) se
   ancla en terracota+plum-deep → crema ≥4.5:1; sólo la esquina inf-derecha
   (vacía salvo el motivo al 16%) se abre al terracota cálido. */
/* lockup = grupo de texto. En móvil es transparente al layout (display:contents):
   icono/badge/eyebrow/lead fluyen en la columna del altar tal cual. En desktop
   se vuelve bloque para sentarse a la IZQUIERDA con el CTA a la derecha. */
.path-card__lockup { display: contents; }
.path-card--ritual {
  margin-top: var(--gap-group);    /* cabecera → altar: salto de grupo */
  color: var(--cream);
  padding: clamp(28px, 7vw, 44px);
  min-height: clamp(380px, 82vw, 460px);
  justify-content: flex-start;
  cursor: pointer;                   /* toda la superficie es una puerta */
  box-shadow: var(--shadow-ritual-rest);
  /* Cada punto del degradado mantiene crema ≥4.5:1 (68/32=5.01 → 74/26=4.53),
     así el CTA es legible tanto abajo-izq (móvil) como centro-der (desktop). */
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--terracota) 68%, var(--plum-deep)) 0%,
    color-mix(in srgb, var(--terracota) 71%, var(--plum-deep)) 58%,
    color-mix(in srgb, var(--terracota) 74%, var(--plum-deep)) 100%
  );
}
.path-card--ritual:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-ritual);
}
/* El botón "responde" al tocar cualquier parte de la card (listo para pulsar), sutil */
.path-card--ritual:hover .btn__arrow { transform: translateX(4px); }
.path-card--ritual:hover .btn--cream::before { filter: brightness(1.12); }

/* SPOTLIGHT DE VELA · luz cálida que sigue el cursor (el "wow" de la hero). soft-light
   se funde con la terracota sin tapar el texto; --mx/--my los actualiza main.js. */
.path-card--ritual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 30%),
    hsl(40 72% 90% / 0.24), transparent 58%);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  mix-blend-mode: screen;          /* luz cálida que se funde y se NOTA (vela, no disco) */
  pointer-events: none;
  z-index: 1;
}
.path-card--ritual:hover::before { opacity: 1; }
/* Táctil (pointer: coarse, fiable — 'hover: none' falla en teléfonos que reportan hover):
   la vela vive SIEMPRE y la mueven el scroll/giroscopio/tacto (main script). */
@media (pointer: coarse) { .path-card--ritual::before { opacity: 0.9; } }
.path-card--ritual .path-card__icon {
  color: var(--cream);
  margin-bottom: var(--gap-group);
}
/* badge "Empieza aquí": píldora crema sólida, 2ª micro-señal de puerta. */
.path-card__badge {
  align-self: flex-start;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--cream);
  padding: 0.34em 0.85em;
  border-radius: 999px;
  margin-bottom: var(--gap-head-body);
}
.path-card--ritual .path-card__eyebrow {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 var(--gap-eyebrow);
}
.path-card--ritual .path-card__lead {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-weight: 560;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}
.path-card--ritual .btn--cream {
  align-self: flex-start;
  margin-top: var(--gap-group);    /* cuerpo → acción: salto de grupo */
  z-index: 3;                      /* por encima del stretch-link (z-index:2): clic/foco propios */
}
/* Firma discreta: motivo de 3 puntos crema 16% en la esquina inferior derecha. */
.path-card__motif {
  position: absolute;
  right: clamp(20px, 3vw, 36px);
  bottom: clamp(20px, 3vw, 36px);
  width: clamp(40px, 6vw, 56px);
  color: var(--cream);
  opacity: 0.16;
  pointer-events: none;
}
.path-card__motif .dots { width: 100%; height: auto; }

/* --- CONSTELACIÓN · riel (MÓVIL = carrusel swipe con peek a sangre, estilo SHA) */
.paths__rail {
  margin-top: var(--gap-group);    /* altar → riel: salto de grupo */
  display: flex;
  gap: clamp(14px, 4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* full-bleed: el peek de la 2ª tarjeta sangra al borde (señal "hay más") */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: 4px;
}
.paths__rail::-webkit-scrollbar { display: none; }

/* Enlace que estira la card entera para hacerla clicable hacia su mundo. */
.path-card__stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.path-card__stretch:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

.path-card--soon {
  flex: 0 0 76vw;
  max-width: 300px;
  aspect-ratio: 1 / 1.05;          /* leve retrato, como SHA */
  scroll-snap-align: start;
  padding: clamp(22px, 5vw, 30px);
  justify-content: flex-start;
  cursor: pointer;
  box-shadow: var(--shadow-card-rest);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);  /* hairline en reposo */
}
/* Hover (mouse) + foco de teclado (:has) elevan igual: se levanta cuando lo tocas */
.path-card--soon:hover,
.path-card--soon:has(.path-card__stretch:focus-visible) {
  transform: translateY(-10px);
  box-shadow: var(--shadow-card);
  border-color: color-mix(in srgb, var(--plum) 30%, transparent);  /* el hilo se enciende */
}
/* De-emphasis editorial: al enfocar una card, las hermanas ceden el foco (se ve "caro") */
@media (hover: hover) and (pointer: fine) {
  .paths__rail:has(.path-card:hover) .path-card:not(:hover) {
    opacity: 0.6;
    transition: opacity var(--dur-hover) var(--ease-out);
  }
}
.path-card--soon .path-card__icon {
  color: var(--ink);
  margin-bottom: var(--gap-head-body);
}
.soon-tag {
  align-self: flex-start;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum);
  background: color-mix(in srgb, var(--cream) 76%, transparent);
  padding: 0.3em 0.85em;
  border-radius: 999px;
  margin-bottom: var(--gap-eyebrow);
}
.path-card__title {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-weight: 560;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--gap-head-body);
}
.path-card__text {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* Flecha "entra" — el signifier de clickeable que faltaba. Reutiliza la flecha del botón.
   MÓVIL: visible SIEMPRE (touch no tiene hover). DESKTOP: entra al hover/foco. */
.path-card__go {
  position: absolute;
  right: clamp(16px, 4vw, 24px);
  bottom: clamp(16px, 4vw, 24px);
  width: clamp(22px, 4.5vw, 28px);
  color: var(--plum);
  pointer-events: none;            /* el clic lo maneja el stretch-link */
  transition:
    transform var(--dur-hover) var(--ease-out),
    opacity var(--dur-hover) var(--ease-out);
}
.path-card__go .btn__arrow-svg { width: 100%; height: auto; }
/* Subrayado editorial del título (señal universal de link), oculto en reposo */
.path-card--soon .path-card__title {
  background: linear-gradient(var(--plum), var(--plum)) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--dur-hover) var(--ease-out);
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  /* Persistente pero tenue en reposo (se lee clickeable de un vistazo), llena al hover */
  .path-card__go { opacity: 0.42; transform: translateX(-3px); }
  .path-card--soon:hover .path-card__go,
  .path-card--soon:has(.path-card__stretch:focus-visible) .path-card__go {
    opacity: 1;
    transform: translateX(0);
  }
  .path-card--soon:hover .path-card__title,
  .path-card--soon:has(.path-card__stretch:focus-visible) .path-card__title {
    background-size: 100% 1.5px;
  }
}
/* MÓVIL (touch): la flecha va llena, y el subrayado del título "CARGA" (se llena de
   0→100%) justo cuando la card entra en pantalla — la "barra que carga" en cada card. */
@media (pointer: coarse) {
  .path-card__go { opacity: 1; transform: none; }
  .path-card--soon.is-visible .path-card__title { background-size: 100% 1.5px; }
}

/* Washes pastel (texto ink, AA holgado 5-8:1). Mismo idioma SHA, en sordina:
   ningún stop llega al terracota → sólo el altar grita. TRES HUES DISTINTOS para
   que cada tarjeta se separe de su vecina: rosa (Luna) · lavanda (Oráculo) · durazno (Yoga). */
.path-card--luna {
  /* ROSA empolvado (durazno + ciruela de la paleta): femenino, distinto de la
     lavanda. Tope en 88% para que ink ≥5:1. */
  background: linear-gradient(150deg,
    color-mix(in srgb, color-mix(in srgb, var(--peach) 62%, var(--plum)) 55%, var(--cream)) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--peach) 62%, var(--plum)) 88%, var(--cream)) 100%);
}
.path-card--oraculo {
  /* LAVANDA/violeta (lo más místico): saturación plena para diferenciarse del rosa. */
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--lavender) 70%, var(--cream)) 0%,
    var(--lavender) 100%);
}
.path-card--yoga {
  /* SAGE suave (firma de Yoga): coordina con el interior sage #84926f del mundo
     /yoga. Topes bajos (44/68%) para que la tinta mantenga AA ≥5:1. */
  background: linear-gradient(150deg,
    color-mix(in srgb, #84926f 44%, var(--cream-warm)) 0%,
    color-mix(in srgb, #84926f 68%, var(--cream-warm)) 100%);
}

/* Indicador de progreso (SOLO móvil): 3 guiones; el activo se alarga a ciruela. */
.paths__progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;                /* riel → indicador: pegado (no es grupo) */
}
.paths__progress span {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  transition: width var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.paths__progress span.is-active {
  width: 26px;
  background: var(--plum);
}

/* --- DESKTOP (≥881) · el riel deja de ser carrusel y baja a GRID 3-up -------
   En desktop un riel del mismo tamaño re-aplanaría la jerarquía; el grid 3-up
   bajo el altar full-width mantiene al ritual como pieza superior inequívoca. */
@media (min-width: 881px) {
  /* ALTAR horizontal: lockup (texto) izq · CTA der → llena el ancho, ~360px alto,
     cero void. El motivo de puntos vive en la esquina inf-derecha. */
  .path-card--ritual {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 5vw, 80px);
    min-height: clamp(300px, 28vw, 360px);
    padding: clamp(40px, 4vw, 60px);
  }
  .path-card__lockup {
    display: flex;
    flex-direction: column;
    max-width: 34ch;
  }
  .path-card--ritual .path-card__icon { margin-bottom: var(--gap-para); }
  .path-card--ritual .path-card__lead { max-width: 18ch; }
  .path-card--ritual .btn--cream {
    margin-top: 0;
    flex: none;
    align-self: center;
  }
  .paths__rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 28px);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .path-card--soon { flex: none; max-width: none; }
  .paths__progress { display: none; }
}

/* ============================================================================
   9. S5 · PRUEBA SOCIAL · CERO FOTO (FB7) · UN póster editorial centrado (FB1)
   FOCO: los 2 números como póster (Hanken 800 + labels diminutos) + testimonios
   editoriales planos (cita Fraunces italic + nombre), sin tarjetas ni sombras.
   COMPOSICIÓN (FB1): todo el grupo en una medida estrecha CENTRADA — stats arriba
   como una fila contundente, testimonios apilados debajo en columna de ancho
   controlado → cero void lateral, un solo foco. (FB9): padding-top reducido a
   0.5× para no acumular 2× section-y en el borde paths→proof.
============================================================================ */
.proof {
  padding-top: calc(var(--section-y) * 0.5);
  padding-bottom: var(--section-y);
  background: color-mix(in srgb, var(--lavender) 14%, var(--cream));
}
/* El póster: medida estrecha centrada para que stats y voces se lean como UNA
   tarjeta editorial, no esparcidos en 1180px. */
.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* GRUPO 1 · cifras: eyebrow pegado (8px) → stats gigantes (salto de grupo debajo) */
.proof__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-eyebrow);
}

/* Dos números lado a lado con divisor hairline VERTICAL, centrados como fila
   contundente única. Ratio número:label ≈ 7:1. */
.bigstats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 72px);
  margin-top: var(--gap-head-body);
}
.bigstat { display: flex; flex-direction: column; gap: var(--gap-line); }
.bigstat__num {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 9vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.bigstat__plus {
  color: var(--gold-ink);
  font-size: 0.55em;
  vertical-align: 0.35em;
  margin-right: 0.04em;
}
.bigstat__label {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
/* Divisor hairline vertical entre las dos cifras */
.bigstats__div {
  width: 1px;
  align-self: stretch;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* COUNT-UP · la cifra sube hasta el tope (JS, ease-out) y al llegar PALPITA una
   vez: doble latido sutil (lub-dub) + halo dorado cálido. Notable pero premium,
   no chillón. Disparado por la clase .is-settled. En reduced-motion no se anima
   (queda el número final estático). */
.bigstat__num { transform-origin: center; will-change: transform; }
@keyframes bigstat-pulse {
  0%   { transform: scale(1);     text-shadow: none; }
  16%  { transform: scale(1.06);  text-shadow: 0 6px 34px color-mix(in srgb, var(--gold) 34%, transparent); }
  34%  { transform: scale(1);     text-shadow: none; }
  52%  { transform: scale(1.032); text-shadow: 0 4px 22px color-mix(in srgb, var(--gold) 20%, transparent); }
  100% { transform: scale(1);     text-shadow: none; }
}
.bigstat__num.is-settled { animation: bigstat-pulse 1.15s var(--ease-out) 1; }

/* GRUPO 2 · testimonios editoriales planos en COLUMNA CENTRADA de medida fija
   (FB1/FB7): los dos apilados, mismo ancho, separados por el hairline horizontal.
   Sin offset diagonal, sin void lateral → unidad compositiva, un solo foco. */
.voices {
  margin-top: var(--gap-shift);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 34ch;     /* medida fija del bloque de testimonios */
  margin-inline: auto;
}
.voice {
  margin: 0;
  padding: var(--gap-group) 0;
  border-top: var(--hairline);
  width: 100%;
  text-align: center;
}
.voice__quote { margin: 0; position: relative; }
.voice__quote p {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
/* Comilla discreta como apertura editorial */
.voice__quote p::before {
  content: "\201C";
  color: color-mix(in srgb, var(--gold) 60%, transparent);
}
.voice__name {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: var(--gap-line);
}

/* ============================================================================
   9b. S5b · POR QUÉ FUNCIONA · MURO DE CREDENCIALES "As Seen In" (FB8)
   FOCO ÚNICO: dos cintillos de wordmarks UNIFORMES (Fraunces 460 versalitas, tinta
   tenue ~52%, misma altura óptica) con divisores hairline y mucho aire, cada fila
   etiquetada UNA vez (Ciencia / Sabiduría ancestral). Sin kickers por-logo, sin
   tarjetas, sin párrafos. Las citas viven como fine print bajo el muro.
============================================================================ */
.endorse {
  /* Escala de aire COMPACTA (la sección ocupaba demasiado): saltos menores y
     padding-bottom recortado al registro -tight. */
  --endorse-head-body: clamp(26px, 3.6vw, 44px);  /* titular → muro */
  --endorse-fineprint: clamp(18px, 2.6vw, 30px);  /* muro → fine print */
  --endorse-rowgap: clamp(20px, 2.8vw, 34px);     /* aire vertical entre filas */
  --endorse-colgap: clamp(28px, 4.5vw, 64px);     /* aire horizontal entre logos */

  padding-top: calc(var(--section-y) * 0.42);
  padding-bottom: var(--section-y-tight);
  background: color-mix(in srgb, var(--peach) 22%, var(--cream));
}
.endorse__inner {
  display: flex;
  flex-direction: column;
}
/* Cabecera: eyebrow a 8px del titular = un solo grupo de significado */
.endorse__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-eyebrow);
}
/* TITULAR · jerarquía por PESO + TAMAÑO (aprendizaje del hero): base DELGADA,
   las anclas ("hacemos las mujeres" / "por fin") en negrilla, y "siglos" GRANDE
   (delgada). Los saltos de línea los mandan los .endorse__l (display:block). */
.endorse__title {
  max-width: 22ch;
  text-wrap: pretty;
  font-size: clamp(1.35rem, 4.6vw, 2.9rem);
  font-weight: 430;                /* delgada pero ASENTADA (360 se veía spindly/graciosa);
                                      sigue claramente bajo el 600 de las anclas */
  line-height: 1.14;
}
.endorse__l { display: block; }
.endorse__title strong { font-weight: 600; }   /* anclas en negrilla real */
.endorse__big {
  font-size: 1.36em;               /* "siglos" más grande, mismo peso que la base */
  font-weight: 430;
  letter-spacing: -0.03em;
}

/* EL MURO · dos sub-filas etiquetadas UNA vez cada una (FB8). Sin grid de
   celdas: cada fila es un cintillo de 3 wordmarks con divisores hairline. */
.logowall {
  margin: var(--endorse-head-body) auto 0;
  padding: 0;
  max-width: 64rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--endorse-rowgap);
}

/* Una mesa: micro-rótulo de grupo (susurro, UNA vez) + cintillo de wordmarks. */
.logowall__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}
.logowall__rowlabel {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 38%, var(--cream));
  line-height: 1;
  margin: 0;
}

/* Cintillo horizontal de wordmarks, centrado, con aire generoso. */
.logowall__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  column-gap: var(--endorse-colgap);
  row-gap: clamp(16px, 2.5vw, 24px);
}

/* Ítem = logo en CAJA ÓPTICA UNIFORME: misma altura de fila para que nombres
   cortos (Harvard) y largos (Tradición egipcia) pesen igual de un vistazo. */
.logowall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  padding-inline: clamp(4px, 1.2vw, 14px);
  position: relative;
}
/* Divisor hairline vertical a la IZQUIERDA, centrado en el gap. Off en el 1er
   logo de cada cintillo → divisores SOLO entre logos. */
.logowall__item::before {
  content: "";
  position: absolute;
  left: calc(var(--endorse-colgap) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.4em;
  background: color-mix(in srgb, var(--gold) 30%, transparent);
}
.logowall__item:first-child::before { display: none; }

/* EL WORDMARK · todos idénticos en peso/tinta/altura óptica = lee como "logo".
   Versalitas para igualar la mancha entre nombres cortos y largos; nowrap para
   que ninguno rompa a 2 líneas en breakpoints intermedios. */
.logowall__mark {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0;
  font-weight: 460;
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "kern" 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 52%, var(--cream));
}

/* Credencial ENLAZADA (los 3 estudios de ciencia → DOI real). Subrayado dorado
   sutil = "fuente verificable"; refuerza a ciruela en hover/focus. Un punto más
   presente que los wordmarks no enlazados. */
.logowall__mark--link {
  color: color-mix(in srgb, var(--ink) 62%, var(--cream));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.logowall__mark--link:hover,
.logowall__mark--link:focus-visible {
  color: var(--plum);
  text-decoration-color: var(--plum);
}

/* FINE PRINT honesto: citas como pie de muro, diminutas, una línea. */
.endorse__fineprint {
  margin: var(--endorse-fineprint) 0 0;
  text-align: center;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 60%, var(--cream));
  text-wrap: pretty;
}
.endorse__sources-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 0.5em;
  color: var(--plum);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background-image: linear-gradient(var(--plum), var(--plum));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;                                  /* subrayado oculto en reposo */
  transition: background-size var(--dur-hover) var(--ease-out);
}
.endorse__sources-link:hover,
.endorse__sources-link:focus-visible { background-size: 100% 1px; }   /* se DIBUJA */
.endorse__sources-link .btn__arrow-svg { width: 0.95em; }  /* hereda ciruela vía currentColor */
.endorse__sources-link .btn__arrow { transition: transform var(--dur-hover) var(--ease-out); }
.endorse__sources-link:hover .btn__arrow,
.endorse__sources-link:focus-visible .btn__arrow { transform: translateX(3px); }

/* ============================================================================
   10. S6 + S7 · MANIFIESTO OSCURO + CTA FINAL · dos beats oscuros distintos
============================================================================ */
.dark {
  position: relative;
  color: var(--cream);
  overflow: hidden;
}

/* (1) MANIFIESTO · oscuro CÁLIDO contemplativo (fogata, no moretón frío). Research
   de color: el problema no es "oscuro", es "oscuro FRÍO/desaturado" — este es un
   momento de gravedad/intimidad (no venta), así que conserva profundidad pero con
   luz de brasa. Base aubergine cálido + glow terracota detrás del texto = la fogata
   alrededor de la que nos sentamos. Anochecer al ENTRAR (crema→aubergine cálido). */
.manifesto-sec {
  background:
    /* LA HOGUERA — fuego cálido RADIANTE detrás del texto: núcleo oro → ámbar → brasa roja.
       Fuerte e inequívoco (el morado no es fuego; el fuego es ámbar/oro/terracota). */
    radial-gradient(120% 78% at 50% 34%,
      rgba(255, 196, 116, 0.40) 0%,
      rgba(230, 122, 62, 0.34) 22%,
      rgba(158, 54, 44, 0.22) 46%,
      transparent 72%),
    /* LA NOCHE cálida alrededor del fuego: ember dark (rojo-marrón hondo), NO púrpura.
       Entra de crema; la COLA (últimos 132px) vira a ciruela para difuminar hacia el CTA
       → manifiesto (ember) y CTA (ciruela) = DOS secciones distintas que se mezclan. */
    linear-gradient(to bottom,
      var(--cream) 0,
      #2a0e12 132px,
      #2a0e12 calc(100% - 132px),
      var(--plum) 100%);
  padding: clamp(88px, 12vw, 140px) 0 clamp(60px, 8vw, 92px);
}

/* (2) CTA FINAL · QUIEBRE: ciruela viva (más despierta). Amanecer al SALIR. */
.final-cta {
  background:
    /* NACE en --plum (== cola del manifiesto → costura invisible) → "amanece" a un punto
       más luminoso DENTRO del CTA (el quiebre de energía, no un escalón) → sale a crema */
    linear-gradient(to bottom,
      var(--plum) 0,
      #7a3468 140px,
      #7a3468 calc(100% - 120px),
      var(--cream) 100%);
  padding: clamp(80px, 11vw, 120px) 0 clamp(96px, 13vw, 152px);
}

/* Grano de papel <3% alpha (SVG feTurbulence inline como data-uri) */
.dark__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dark__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* MANIFIESTO · espaciado POR RELACIÓN:
   - eyebrow → 1ª estrofa: gap-eyebrow (8px) = susurro pegado a la voz.
   - estrofa → estrofa: gap-para, se leen agrupadas.
   - cada beat: aislado por gap-shift arriba/abajo = cambio de registro. */
.manifesto-sec .manifesto__eyebrow { margin-bottom: var(--gap-eyebrow); }
.manifesto {
  display: flex;
  flex-direction: column;
  gap: var(--gap-para);
  max-width: 34ch;
}
.manifesto__line {
  display: block;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 1.95rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-wrap: pretty;
}
/* Beats: Fraunces italic 600, medida corta, AIRE de registro (gap-shift). */
.manifesto__beat {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  max-width: 18ch;
  margin: clamp(38px, 5vw, 62px) auto;   /* aislado pero MÁS apretado (antes gap-shift 56-88) */
  text-wrap: balance;
}
.manifesto__beat em {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 7vw, 3.5rem);
  line-height: 1.1;
  color: color-mix(in srgb, var(--cream) 92%, white);
  /* TIER 3 · destello FRÍO (un rayo, no fuego): contrapunto a la calidez. */
  text-shadow: 0 0 26px color-mix(in srgb, var(--cream) 18%, transparent);
}
/* Cierre "Y tú… hazte caso." — gira del "nosotras" al "tú": gap-shift lo aísla. */
/* El cierre arranca cerca del beat 2 (la frase final empieza); el respiro grande
   se reserva ANTES del grito, no antes del setup. */
.manifesto__close { margin-top: clamp(4px, 1.5vw, 12px); }
.manifesto__line em {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-style: italic;
  font-weight: 600;
  color: color-mix(in srgb, var(--cream) 96%, white);
}

/* ===== ÉNFASIS "FOGATA" · crescendo susurro→grito ==========================
   Jerarquía de GLOW (el glow SOLO dibuja el ascenso, nunca se reparte parejo):
   herida 0 · cuerpo 0 · pilares brasa cálida (1 capa) · beats destello frío
   (1 capa) · clímax hoguera (2 capas). AA blindado sobre plum-deep #2A1424:
   cuerpo 15.7 · herida 9.9 · pilares ~10.5 · clímax ~9.8:1. Sin gold/coral como
   texto (mostaza/alarma): el calor sale solo de peach lavado a crema. */

/* TIER 0 · LA HERIDA RECEDE: un escalón más chica + desaturada (antes iba igual
   que el cuerpo → no había valle que pagara el pico "Ya no."). */
.manifesto .m-wound {
  /* MISMA voz que el cuerpo (mismo Hanken, mismo tamaño) — recede SOLO por tono
     (penumbra), no por tamaño. Antes bajaba size+color a la vez y leía como "otra
     tipografía"; ahora es claramente el cuerpo, pero dicho en voz baja. */
  line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 72%, var(--plum-deep));   /* ~8.7:1 AA, claramente bajo el cuerpo 15.7 */
  text-shadow: none;
}

/* TIER 2 · PILARES-BRASA (inline, NO crecen: protegen el río de lectura; arden
   por color + peso + glow). Hanken 500 — el 600 no está cargado (saltaría a 700
   tosco); el peso que falta lo compensan tinte peach + tracking + brasa. */
.manifesto .m-pillar {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: inherit;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--peach) 62%, var(--cream));
  text-shadow: 0 0 16px color-mix(in srgb, var(--peach) 26%, transparent);
}

/* APERTURA · la TESIS grande (como un beat): abre el manifiesto con una
   declaración Fraunces itálica. Bookend con el clímax — "hacemos caso" (peach)
   ↔ "hazte caso". Un escalón bajo los beats (es frase larga, no grito de 2
   palabras), claramente sobre el cuerpo. */
.manifesto__open {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.05rem, 5.8vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--cream) 96%, white);
  text-wrap: balance;
}
.manifesto__open .m-open-key {
  font-style: italic;
  color: color-mix(in srgb, var(--peach) 66%, var(--cream));
  text-shadow: 0 0 18px color-mix(in srgb, var(--peach) 24%, transparent);
}

/* TIER 4 · CLÍMAX "hazte caso." = pico visual de TODA la página. El setup queda
   sobrio (silencio antes de la hoguera); el grito tiene su propio cielo, tamaño
   MAYOR que los beats, peach pleno y halo de 2 capas. */
.manifesto__close .m-close-setup {
  display: block;
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.35rem, 3.4vw, 1.95rem);
  color: var(--cream);
  text-shadow: none;
}
.manifesto__close .m-climax {
  display: block;
  position: relative;
  margin: clamp(44px, 7vw, 64px) auto 0;        /* EL respiro de la sección: la pausa antes del grito */
  max-width: 14ch;
  text-wrap: balance;
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.7rem, 9vw, 4.2rem);        /* MAYOR que los beats (2.3-3.5) = cima inequívoca */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--peach) 72%, var(--cream));
  text-shadow:
    0 0 30px color-mix(in srgb, var(--peach) 30%, transparent),
    0 0 64px color-mix(in srgb, var(--peach) 14%, transparent);
}
/* Brasa que se aviva: ::after que SOLO intensifica. El halo base (text-shadow)
   ya está pleno → reduced-motion jamás deja el clímax sin fuego. */
.manifesto__close .m-climax::after {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--peach) 16%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  transition-delay: 360ms;
}
.manifesto.is-visible .m-climax::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .manifesto__close .m-climax::after { opacity: 1 !important; transition: none !important; }
}

/* S7 · CTA FINAL — FOCO: "empezar esta noche" + botón glow (único punto de luz).
   Sin hairline-adornito: el quiebre lo dan el FONDO + el eyebrow + el GIRO. */
.final-cta .eyebrow { margin-bottom: var(--gap-eyebrow); }
.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 30ch;
}
/* Grupo 1 · la amenaza (seguir igual): cuerpo lavado, registro bajo. */
.final__verse {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
  margin: 0;
  text-wrap: pretty;
}
/* Grupo 2 · el GIRO + su consecuencia, pegados (gap-para); aislado por gap-shift. */
.final__turn-group {
  margin-top: var(--gap-shift);
  display: flex;
  flex-direction: column;
  gap: var(--gap-para);
}
.final__verse--turn {
  font-family: "Fraunces", "Fraunces-fallback", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 0;
  font-style: italic;
  font-weight: 560;
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0;
}
.final__verse--turn strong { font-weight: 600; }
.final__punch {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.0625rem, 2.6vw, 1.2rem);
  color: color-mix(in srgb, var(--cream) 86%, transparent);
  margin: 0;
}
/* Grupo 3 · la acción (único punto de luz): aislada por gap-shift arriba. */
.final__cta { margin-top: var(--gap-shift); }

/* ============================================================================
   11. S8 · FOOTER · vuelve a crema (amanece de nuevo)
============================================================================ */
.site-footer {
  position: relative;
  background: var(--cream);
  /* COMPACTO: el footer no es una sección completa — no necesita su mismo aire. */
  padding: clamp(44px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.footer__brand { display: flex; flex-direction: column; gap: var(--s2); }
/* LOGO COMPLETO de marca (NADIA · hazte caso · 3 puntos), recoloreado a tinta. */
.footer__logo { display: inline-flex; justify-self: start; }
.footer__logo img {
  display: block;
  width: clamp(148px, 40vw, 192px);
  height: auto;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3.2vw, 34px);
}
.footer__heading {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s2);                 /* heading → lista: apretado (era s3) */
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a {
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
  padding-bottom: 2px;
}
.footer__list a:hover,
.footer__list a:focus-visible {
  color: var(--ink);
  background-size: 100% 1px;
}

.footer__copy {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(56px, 9vw, 112px) auto 0;
  padding: var(--s5) var(--gutter) 0;
  border-top: var(--hairline);
  font-family: "Hanken Grotesk", "Hanken-fallback", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-meta);
}

/* ============================================================================
   12. MOTION · reveal con stagger, solo transform/opacity
============================================================================ */
[data-reveal],
[data-reveal-slow] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-slow] {
  transition-duration: var(--dur-slow);
}
[data-reveal].is-visible,
[data-reveal-slow].is-visible {
  opacity: 1;
  transform: none;
}

/* Fotos: entran con fade + scale-down sutil. El zoom de reposo (--rest-scale)
   se conserva al asentar → el crop persiste. */
.media-arc img { --rest-scale: 1; }
.hero__media img,
.about__media img {
  transition: transform var(--dur-reveal) var(--ease-out);
}
[data-reveal] .media-arc img {
  transform: scale(calc(var(--rest-scale) * 1.03));
}
[data-reveal].is-visible .media-arc img {
  transform: scale(var(--rest-scale));
}

/* Reduced-motion: todo instantáneo, cero transform */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
  [data-reveal],
  [data-reveal-slow] { opacity: 1 !important; transform: none !important; }
  .media-arc img,
  [data-reveal] .media-arc img { transform: scale(var(--rest-scale, 1)) !important; }
  /* S4: sin snap brusco ni lift en el riel de caminos */
  .paths__rail { scroll-snap-type: none; scroll-behavior: auto; }
  .path-card--ritual:hover,
  .path-card--soon:hover,
  .path-card--soon:has(.path-card__stretch:focus-visible) { transform: none !important; }
  /* la flecha queda visible y estática (sigue siendo la señal de clickeable) */
  .path-card__go { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   13. RESPONSIVE · móvil-first; breakpoints 360 / 390 / 768 / 1280
============================================================================ */

/* ---- Tablet/abajo (≤880) ---- */
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 18px; }  /* sube la bienvenida hacia la foto (era 24) */
  /* La creadora da la BIENVENIDA: la foto va PRIMERO, como Lucky Girl. */
  .hero__media {
    order: 1;
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    margin-bottom: 22px;               /* era var(--s4)=32 → foto cuelga apretada de la promesa */
  }
  .hero__copy { order: 2; gap: 32px; } /* MACRO único: escalera 8/16/32 → 1:4 con micro 8px (lede↔proof↔CTA) */

  /* El proof es UNA unidad de credibilidad: su gap interno (cifras↔tag) debe ser
     MENOR que el inter-grupo. Sobrescribe SOLO en móvil (desktop conserva gap-group). */
  .hero__proof { gap: 8px; }           /* MICRO intra-proof: = micro del lockup (era 10) */

  .hero .lede { margin-top: 16px; }    /* MEDIO h1↔lede: escalón perceptible ×2 del micro (era 12) */
  /* Foto FULL-BLEED a proporción NATURAL (820×929): cero recorte → no corta la
     cara, borde a borde y sin arco (intencional, estilo Lucky Girl). Su ratio
     casi cuadrado la hace la menos alta de las 4 fotos. */
  .media-arc--hero {
    /* Altura controlada SIN romper el full-bleed: aspect-ratio:auto evita que el
       cap de altura encoja el ANCHO (bug: 4/5 + max-height dejaba la foto a 305px).
       width:100% + height fija → cubre todo el ancho y no empuja el lede. */
    aspect-ratio: auto;
    width: 100%;
    height: 47svh;
    max-height: none;
    border-radius: 0;
  }
  /* La imagen ya viene recortada con Nadia centrada (márgenes iguales mano↔pie) y
     cuerpo completo. Sin zoom: cover la centra cubriendo todo el ancho. */
  .media-arc--hero img { --rest-scale: 1; transform-origin: 50% 50%; }
  /* La foto se PEGA al header (sin hueco arriba, como Lucky Girl) y cierre denso. */
  .hero { padding-top: 0; padding-bottom: var(--s5); }
  /* Header esbelto en móvil: padding vertical mínimo + botón sin el min-height:50
     que lo inflaba. Píldora compacta (33px alto + padding lateral justo). ~50px. */
  .site-header { padding-top: 8px; padding-bottom: 8px; }
  .site-header .btn { min-height: 33px; padding: 0.4em 0.92em; }

  /* S3 ya es columna única (sin grilla); en móvil la foto-banda se acerca un
     pelín al rostro (4/5) pero sigue siendo BANDA controlada. Tope duro. */
  .about__bandarc { aspect-ratio: 4 / 5; max-height: 52vh; }
  .about__bandarc img { object-position: 50% 26%; }

  /* La banda de transición: en móvil un pelín más cuadrada (mirada más cerca),
     pero sigue siendo BANDA. Tope duro: NUNCA muy alta (regla del brief). */
  .bridge__bandarc { aspect-ratio: 5 / 4; max-height: 46vh; }
  .bridge__bandarc img { object-position: 50% 28%; }

  .footer__inner { grid-template-columns: 1fr; }

  /* MURO (S5b): cintillos algo más apretados; siguen siendo 3 logos por fila. */
  .logowall__marks { column-gap: clamp(24px, 6vw, 44px); }
}

/* ---- Móvil estrecho (≤560) ---- */
@media (max-width: 560px) {
  .site-header { gap: var(--s2); }
  .btn--ghost { padding: 0.72em 1.05em; font-size: 0.78rem; letter-spacing: 0.07em; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }

  /* Medida de lectura móvil ~36ch + interlínea algo mayor */
  .body, .lede, .verse { max-width: 36ch; }
  .verse, .body { line-height: 1.66; }

  /* Foto pegada al header (sin hueco arriba) también en móvil estrecho. */
  .hero { padding-top: 0; }

  /* Stats apilados con divisor HORIZONTAL en móvil estrecho (sección prueba social) */
  .bigstats { flex-direction: column; gap: clamp(20px, 6vw, 32px); }
  .bigstats__div { width: 100%; height: 1px; }
  /* …PERO en el HERO se quedan en FILA (compactas, estilo Lucky Girl) */
  .bigstats--hero { flex-direction: row; gap: clamp(18px, 5vw, 30px); }
  .bigstats--hero .bigstats__div { width: 1px; height: auto; align-self: stretch; }

  /* Testimonios: la columna ya es centrada y estrecha; en móvil ocupa el ancho. */
  .voices { max-width: none; }

  /* MURO (S6): cada grupo es UNA línea de texto centrada "A · B · C", en flujo
     INLINE puro (no flex anidado). Así TODAS las marcas y los middots comparten una
     sola línea base → ninguna palabra queda más alta (bug de align-baseline previo,
     donde el 1er ítem sin middot subía 5px). */
  .logowall__marks { display: block; text-align: center; white-space: nowrap; }
  .logowall__item { display: inline; padding: 0; min-height: 0; }
  .logowall__item::before {
    content: "·";
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: none;
    margin: 0 clamp(7px, 2.4vw, 12px);
    color: color-mix(in srgb, var(--ink) 32%, var(--cream));
    vertical-align: baseline;
  }
  .logowall__mark { font-size: clamp(0.74rem, 3vw, 0.9rem); letter-spacing: 0.015em; }
  .logowall__mark--link { text-underline-offset: 0.16em; }

  /* Fine print del muro: el enlace baja a su propia línea */
  .endorse__sources-link { margin-left: 0; margin-top: 0.4em; display: inline-flex; }

  /* Footer compacto en móvil: filas apretadas, tap target ≥30px (WCAG 2.2 AA). */
  .footer__list { gap: 7px; }
  .footer__list a { display: inline-flex; align-items: center; min-height: 30px; }
}

/* ---- ≤430 (cubre 390/360): header degrada de grid a flex space-between ---- */
@media (max-width: 430px) {
  /* Se mantiene el grid de 3 zonas (hamburguesa · wordmark centrado · CTA),
     solo se aprieta el padding y se compacta el CTA. */
  .site-header { gap: var(--s1); padding-left: var(--s3); padding-right: var(--s3); }
  .site-header .btn--ghost { min-width: 44px; }
  /* (la forma compacta del CTA ya se activó en ≤767) */
}

/* ---- 360px: ajuste fino tipográfico ---- */
@media (max-width: 380px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 26px); }
}

/* ---- ≤342px (iPhone SE1 y similares, residual): red de seguridad. Las columnas
   iguales (1fr·auto·1fr) harían que el botón pisara los 3 puntos del wordmark a
   este ancho; volvemos a auto·1fr·auto (centrado en el espacio libre, sin choque).
   En ≥360 (la inmensa mayoría) se mantiene el centrado real. ---- */
@media (max-width: 342px) {
  .site-header { grid-template-columns: auto 1fr auto; }
}

/* ---- DESKTOP (≥992): SPLIT EDITORIAL (foto sticky 100vh que acompaña) ----------
   Cada sección editorial se vuelve grid de 2 columnas: una FOTO a sangre, sticky a
   100svh, que acompaña la lectura (nunca tira recortada), y una COLUMNA DE TEXTO a la
   IZQUIERDA. Alternan lado (bridge foto-izq · about foto-der), tipo Lucky Girl pero
   resuelto para copy LARGO. TODO vive aquí dentro → el apilado de móvil/tablet (<992)
   queda intacto. (Reemplaza el viejo @media 1280 que re-aplanaba las fotos a tiras 24/9.) */
@media (min-width: 992px) {

  /* ===== S2 BRIDGE · foto IZQUIERDA, texto DERECHA ===== */
  .bridge {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: start;
    column-gap: 0;
    padding-top: 0;
    padding-bottom: 0;                          /* el respiro de cierre lo da la columna de texto */
    min-height: calc(100svh - var(--header-h)); /* guarda: la sección nunca es más baja que la foto */
  }
  .bridge__band {
    grid-column: 1;
    margin: 0;                                  /* anula el full-bleed negativo + margin-bottom */
    align-self: start;
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    opacity: 1;                                 /* foto siempre compuesta (sin reveal que la desplace pinned) */
    transform: none;
  }
  .bridge__bandarc {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    border-radius: 0;
    width: 100%;
  }
  .bridge__band .media-arc img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 36% !important;        /* !important vence al object-position INLINE (móvil intacto) */
    transform: scale(var(--rest-scale, 1));     /* sin el scale del reveal mientras está pinned */
  }
  .bridge__inner {
    grid-column: 2;
    max-width: none;
    margin-inline: 0;
    padding: clamp(80px, 9vw, 140px) var(--gutter) var(--section-y) clamp(48px, 5vw, 88px);
  }
  .bridge__head,
  .bridge__rampa,
  .bridge__land { max-width: 52ch; }            /* medida de lectura acotada, pegada a la izquierda */
  /* el GIRO deja de ser poster full-bleed centrado → eje izquierdo con aire */
  .bridge__turn {
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
    text-align: left;
    max-width: 52ch;
  }
  .bridge__turn-lead,
  .bridge__turn-body { margin-left: 0; margin-right: 0; }

  /* ===== S3 ABOUT · foto DERECHA, texto IZQUIERDA (alterna) ===== */
  .about {
    display: grid;
    grid-template-columns: minmax(0, 54%) minmax(0, 46%);
    align-items: start;
    column-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: calc(100svh - var(--header-h));
    /* el blush (background) y la hairline (border-top) viven en .about → se conservan */
  }
  .about__inner { display: contents; }          /* disuelve la caja maxw/gutter → copy y media al grid */
  .about__copy {
    grid-column: 1;
    max-width: 62ch;
    margin: 0;
    text-align: left;
    padding: clamp(72px, 8vw, 120px) clamp(48px, 5vw, 88px) var(--section-y) var(--gutter);
  }
  .about__media {
    grid-column: 2;
    margin: 0;                                  /* anula full-bleed negativo + margin-top shift */
    align-self: start;
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    opacity: 1;
    transform: none;
  }
  .about__bandarc {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    border-radius: 0;
    width: 100%;
  }
  .about__media .media-arc img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 42% !important;
    transform: scale(var(--rest-scale, 1));
  }
}