/* ================================================================
   REWIRED — design system
   Base: warm paper, dark ink, one cool accent (night), one warm
   accent (dawn) reserved for where the transformation lands.
   ================================================================ */

:root {
  --paper:   #FBFBFA;
  --paper-2: #F3F3F1;
  --ink:     #16181D;
  --ink-2:   #3E434C;
  --mute:    #6A707B; /* 4.8:1 on paper — WCAG AA at small sizes */
  --dawn:    #C2703E;
  --deep:    #0E1116;
  --deep-2:  #161B23;
  --deep-ink:#EBEDEF;
  --deep-mute:#8E96A3;

  /* 2026-07-23 — UN SOLO ACENTO. `night` era #5F6E8C / #8A96AE, un azul pizarra que
     competía con el dawn en cada h2, cada kicker y cada ícono. Ahora es gris casi
     neutro: mismo luminance (contraste 4,9:1 sobre paper y 6,5:1 sobre deep, los dos
     pasan AA), cero saturación que pelee. El único color de la página es --dawn,
     y sigue reservado a la transformación. */
  --night:   #6E7178;
  --night-soft: #979AA1;

  /* UNA hairline y UNA superficie. Antes convivían #E4E5E2, #C9CBC6, #F7F7F4,
     #F7F7F5, #FAFAF8, #FDFDFC y #FFFFFF haciendo el mismo trabajo. */
  --line:      #E4E5E2;
  --line-dark: rgba(235, 237, 239, 0.14);
  --surface:   #F6F6F4;

  /* Las 3 ÚNICAS elevaciones de la hoja (ver el bloque "elevación"). */
  --elev-card: 0 30px 32px -20px rgba(0, 0, 0, 0.4);
  --elev-pill: 0 10px 30px -12px rgba(14, 17, 22, 0.35);
  --elev-bar:  0 -10px 30px -22px rgba(14, 17, 22, 0.5);

  /* ---- ESCALA TIPOGRÁFICA: 10 tokens, y ningún tamaño suelto ----
     Regla: en toda la hoja, un tamaño de letra sólo puede valer `var(--fs-*)`. Si
     un componente necesita desviarse, REDEFINE el token en su propio scope
     (`.book__cover { --fs-display: 58px }`) — así la desviación es greppable y la
     escala sigue siendo una sola. Antes había 47 tamaños distintos. */
  --fs-2xs:     10px;                        /* mono micro-labels */
  --fs-xs:      11px;                        /* microlabel, meta, footer */
  --fs-sm:      13px;                        /* texto secundario */
  --fs-md:      15px;                        /* UI, botones, cuerpo de card */
  --fs-lg:      16px;                        /* cuerpo, bajadas */
  --fs-xl:      clamp(21px, 2.2vw, 26px);    /* h3 de card/plan, pregunta de FAQ */
  --fs-2xl:     clamp(28px, 3.6vw, 46px);    /* cifras y sub-display */
  --fs-h2:      clamp(30px, 4.6vw, 56px);    /* h2 de sección */
  --fs-h1:      clamp(38px, 6.2vw, 84px);    /* hero */
  --fs-display: clamp(34px, 5.4vw, 72px);    /* close + lettering de portada */

  --font-display: Georgia, 'Times New Roman', serif; /* owner's pick: the heavier classic serif */
  --font-text: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  --w-max: 1200px;
  --pad: clamp(20px, 4vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* el nav es fijo (70px): sin esto, saltar a un ancla deja el encabezado
     de la sección DEBAJO de la barra. En #sample tapaba el chip entero. */
  scroll-padding-top: 84px;
}
html, body { background: var(--paper); }
body {
  font-family: var(--font-text);
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(110, 113, 120, 0.24); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
/* h2 A DOS TONOS (patrón Qoves): primera mitad --ink, segunda mitad gris claro.
   `em` y `span` son intercambiables a propósito — cada sección usa el que su copy
   pedía, y los dos pintan igual. */
h2 { font-size: var(--fs-h2); }
h2 em, h2 span, h1 em, .close__title em {
  font-style: italic;
  color: var(--mute);
}

/* ---------------- primitives ---------------- */

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-md);
  text-decoration: none;
  transform: translateY(-64px);
  transition: transform 0.25s ease;
}
.skip:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--night); outline-offset: 3px; }

.microlabel {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
}
.chip--dark { border-color: var(--line-dark); color: var(--deep-mute); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--fs-md);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.5s var(--ease-out), background-color 0.35s ease,
              color 0.35s ease, border-color 0.35s ease, box-shadow 0.5s var(--ease-out),
              opacity 0.35s ease;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: #23272F; }
.btn--ghost {
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.btn--ghost:hover { opacity: 1; }
.btn--outline {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--pill {
  padding: 11px 22px;   /* 44px de alto: WCAG 2.5.5 */
  font-size: var(--fs-sm);
  background: var(--paper);
  color: var(--ink);
}
.btn--dawn {
  background: var(--dawn);
  /* Era #FFF7F0 sobre #C2703E = 3,49:1, o sea reprobaba WCAG AA — y ni el blanco
     puro llegaba (3,70:1). Con tinta oscura da 4,80:1 (5,65:1 en hover) y pasa.
     El fondo dawn NO se toca: es el color reservado a la transformación. */
  color: var(--ink);
}
.btn--dawn:hover { background: #CF7D49; }

/* ---------------- elevación: LAS 3 ÚNICAS SOMBRAS DE LA HOJA ----------------
   Antes había 17 `box-shadow`. La mayoría duplicaba un borde que ya estaba ahí
   (regla: borde O sombra, nunca los dos) o levantaba cosas que no flotan.
   Sobreviven exactamente tres, y cada una tiene un motivo estructural:
     1. el hover/focus de las cards — es el gesto que revela la evidencia;
     2. el pill del nav — flota sobre el hero oscuro;
     3. la buybar — flota sobre el contenido, tiene que despegarse.
   Los bezels del teléfono y el lomo del libro se resuelven con geometría, no
   con sombras (ver .phone::before). */
@media (hover: hover) and (pointer: fine) {
  .evpanel:hover, .evpanel:focus-visible, .plan:hover { box-shadow: var(--elev-card); }
}
.btn--pill:hover { background: #FFFFFF; box-shadow: var(--elev-pill); }
.buybar { box-shadow: var(--elev-bar); }

/* ---------------- reveal engine ---------------- */
/*
 * TODO ESTADO OCULTO VIVE BAJO `html.js` — a propósito.
 * Antes, `.reveal` arrancaba en opacity:0 y `.line > span` en translateY(110%)
 * SIN condición, y solo volvían cuando el IntersectionObserver de main.js les
 * ponía `.in`. Si main.js no corría (red caída, bloqueador, webview raro de
 * Meta/Instagram), el 56% de la página quedaba invisible PARA SIEMPRE —
 * incluida la sección de precios entera. Era el único modo de falla que
 * convierte a cero con certeza.
 * La clase `js` la estampa un script inline en el <head>, así que con JS activo
 * el estado oculto ya está aplicado antes del primer pintado (no hay flash).
 * Sin JS, la página se ve completa y estática, que es exactamente lo correcto.
 */
.reveal {
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.in { opacity: 1; transform: none; }

/*
 * EL HERO NO ESPERA AL JAVASCRIPT.
 * Medido: el elemento que fijaba el LCP era `.hero__sub`, a 2.444 ms — no el
 * titular. Causa: el hero solo se hacía visible cuando el IntersectionObserver
 * de main.js le ponía `.in`, y main.js va con `defer`; con la CPU de un teléfono
 * de gama media eso llega ~1,5 s tarde. O sea que el LCP lo fijaba el ARRANQUE
 * DEL SCRIPT, no la red ni el peso.
 * Solución: en el hero la entrada la hace una animación CSS, que empieza en
 * cuanto el elemento se renderiza, sin depender de nadie. El resto de la página
 * sigue con el observer, que es lo correcto para lo que está más abajo.
 */
.js .hero .reveal {
  animation: heroIn 0.5s var(--ease-out) forwards;
  animation-delay: var(--hd, 0s);
}
.js .hero__eyebrow { --hd: 0s; }
.js .hero__sub     { --hd: 0.06s; }
.js .hero__ctas    { --hd: 0.18s; }
.js .hero__sample  { --hd: 0.24s; }
.js .hero__chips   { --hd: 0.3s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero .reveal { animation: none; opacity: 1; transform: none; }
}

.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transition: transform 0.5s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .line > span { transform: translateY(110%); }
.js .in .line > span, .js .line.in > span { transform: none; }

/* ---------------- nav ---------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 14px var(--pad);
  /* la hairline del nav era un box-shadow de 1px haciendo de borde: ahora es un
     borde de verdad, y el presupuesto de sombras queda para lo que flota */
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.nav__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__logo {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.22em;
  font-size: var(--fs-md);
  text-decoration: none;
}
.nav__logo span { opacity: 0.55; }
.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav__links a {
  font-size: var(--fs-md);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.nav__links a:hover { opacity: 1; }
.nav[data-theme="dark"] { color: var(--deep-ink); }
.nav[data-theme="light"] {
  color: var(--ink);
  background: rgba(251,251,250,0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav[data-theme="light"] .nav__cta { background: var(--ink); color: var(--paper); }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--deep-ink);
  padding: 120px var(--pad) 0;
  overflow: hidden;
  background: var(--deep);
}
.hero__field { position: absolute; inset: 0; pointer-events: none; }
.hero__layer {
  position: absolute;
  inset: -12%;
  will-change: transform;
}
/* El campo del hero: UNA fuente de luz y una base. Antes eran cuatro gradientes
   apilados (dos radiales acá, uno de dawn y una capa `b` con mix-blend) — a ojo
   se leían como una sola mancha, así que quedan los dos que hacen el trabajo. */
.hero__layer--a {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(151, 154, 161, 0.30) 0%, rgba(151, 154, 161, 0) 55%),
    linear-gradient(178deg, #0B0E13 0%, #12161E 46%, #1A2029 100%);
}
.hero__ring {
  position: absolute;
  width: min(120vh, 900px);
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--night-soft);
}
.hero__ring-arc {
  stroke-dasharray: 2073;
  stroke-dashoffset: 2073;
  transition: stroke-dashoffset 3.2s var(--ease-inout) 0.4s;
}
.hero.in .hero__ring-arc { stroke-dashoffset: 518; }
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content {
  position: relative;
  max-width: var(--w-max);
  margin: 0 auto;
  width: 100%;
}
/* the proof line — set like the "After" title: display serif, dawn number, fine amber frame */
.hero__eyebrow {
  display: inline-block;
  padding: 12px 24px 13px;
  border: 1px solid rgba(194, 112, 62, 0.38);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--night-soft);
  margin-bottom: 26px;
  letter-spacing: 0.01em;
}
/* el <b> ya se distingue por la itálica y el dawn: el salto de tamaño encima era
   un tercer subrayado del mismo énfasis (y hacía más alta la píldora) */
.hero__eyebrow b {
  font-weight: 400;
  font-style: italic;
  color: var(--dawn);
  padding: 0 2px;
}
.hero__title {
  font-size: var(--fs-h1);
  max-width: 15em;
}
.hero__title em { color: var(--night-soft); }
.hero__sub {
  max-width: 34em;
  margin-top: 30px;
  font-size: var(--fs-md);
  color: rgba(235,237,239,0.72);
}
.hero__ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.hero__ctas .btn--primary { background: var(--paper); color: var(--ink); }
.hero__ctas .btn--primary:hover { background: #fff; }
.hero__chips {
  position: relative;
  list-style: none;
  max-width: var(--w-max);
  margin: clamp(48px, 9vh, 110px) auto 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark);
  padding: 26px 0 34px;
}
.hero__chips li {
  padding: 0 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero__chips li + li { border-left: 1px solid var(--line-dark); }
.hero__chips li:first-child { padding-left: 0; }
.hero__chips strong { font-weight: 600; }
.hero__chips span { font-size: var(--fs-sm); color: var(--deep-mute); }

/* ---------------- shared section shell ----------------
   UN SOLO patrón de encabezado, idéntico en las 9 secciones que tienen uno
   (evidence · method · cycle · inside · author · pricing · reviews · faq ·
   free chapter). Siempre en este orden y nunca con un tercer párrafo:
       .microlabel.chip  →  h2 a dos tonos  →  .sect__sub opcional (≤2 líneas)
   Antes cada sección tenía su variante (márgenes distintos, el chip escondido en
   mobile en `author`, la bajada suelta en `cycle`). */

.sect { padding: clamp(90px, 12vw, 170px) var(--pad); }
.sect__head {
  max-width: var(--w-max);
  margin: 0 auto clamp(42px, 6vw, 80px);
}
.sect__head h2 { max-width: 17em; margin-top: 22px; }
.sect__sub { max-width: 34em; margin-top: 16px; color: var(--ink-2); font-size: var(--fs-lg); }
.sect__head--center { text-align: center; }
.sect__head--center h2, .sect__head--center .sect__sub { margin-inline: auto; }
/* las tres secciones donde el head vive DENTRO de otra caja (el sticky del cycle,
   el bio del autor, el box de reviews y el de free chapter) no llevan el margen
   inferior del patrón: lo pone su contenedor */
.cycle__head, .author__bio .sect__head, .optin__copy .sect__head { margin-bottom: 0; }

/* ---------------- evidence / benefits ---------------- */

.evidence { background: var(--paper); padding-bottom: clamp(48px, 6vw, 80px); }

/* ---------------- benefits: hairline lattice of evidence cards (Qoves pattern) ---------------- */

.sect__head--ev { margin-bottom: 0; }
.sect__head--ev h2 { max-width: 15.5em; }

.evtabsrow {
  max-width: var(--w-max);
  margin: clamp(40px, 5vw, 64px) auto clamp(28px, 3.5vw, 44px);
}
.evtabs {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.evtabs::-webkit-scrollbar { display: none; }
.evtab { /* área táctil de 44px vía ::after, sin alterar la altura de la barra */
  position: relative;
  z-index: 1;
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
  transition: color 0.35s ease;
}
/* Área táctil de 44px sin tocar la altura visible de la barra. Se usa un
   pseudo-elemento en vez de padding porque la estructura de esta sección es un
   lock del dueño: agrandar la píldora cambiaría el calco visual. */
.evtab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.evtab:hover { color: var(--ink); }
.evtab.is-active { color: var(--paper); }
/* until JS measures the pill, the active tab paints its own */
.evtabs:not(.has-pill) .evtab.is-active { background: var(--ink); }
.evtabs__pill {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: var(--left, 5px);
  width: var(--width, 0);
  height: var(--height, 38px);
  transform: translateY(-50%);
  background: var(--ink);
  border-radius: 999px;
  transition: left 0.45s var(--ease-out), width 0.45s var(--ease-out);
}

.evpanels {
  max-width: var(--w-max);
  margin: 0 auto;
  position: relative;
}
/* each card sits inside a hairline cell — outlines overlap into a 1px lattice */
.evgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}
.evgroup[hidden] { display: none; }
.evcell {
  display: flex;
  width: calc(25% - 0.75px);
  min-height: clamp(360px, 33vw, 400px);
  padding: 16px;
  outline: 1px solid var(--line);
}
/* fade the active group in on switch */
.evgroup.is-enter .evpanel {
  opacity: 0;
  transform: translateY(14px);
  animation: evrise 0.7s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes evrise { to { opacity: 1; transform: none; } }

.evpanel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 1.8vw, 24px);
  border-radius: 12px;
  background: var(--surface);
  outline: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
/* the dark state that fades in under the text on hover — a blurred night photograph.
   El velo era un gradiente de 165°; un color plano hace exactamente lo mismo debajo
   de la foto y libera presupuesto de gradientes. */
.evpanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(12, 15, 20, 0.72);
  transition: opacity 0.4s ease-in-out;
}
.evpanel > * { position: relative; z-index: 1; }
.evpanel__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.4s ease;
}
.evpanel h3 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-xl);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.4s ease;
}
.evpanel h3 span { color: var(--mute); transition: color 0.4s ease; }
.evpanel__body {
  margin-top: 12px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 23em;
  transition: color 0.4s ease;
}
/* El hueco vertical de la card es el diseño, no un error: el claim arriba, la
   cita abajo, y aire en el medio (patrón Qoves). No rellenar. */
.evpanel__cite {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 80px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--mute);
  transition: color 0.4s ease;
}
.evpanel__cite svg { width: 12px; flex: none; stroke-width: 1; color: var(--mute); transition: color 0.4s ease; }
.evpanel__cite span { display: inline; }

@media (hover: hover) and (pointer: fine) {
  /* La foto blurreada del estado oscuro solo se pide donde hay hover real. En
     touch —el 99% del tráfico— nunca se veía y aun así se descargaba en el fold.
     El gradiente vive en la regla base para que el reveal por teclado siga legible. */
  .evpanel::before {
    background:
      linear-gradient(165deg, rgba(11, 14, 19, 0.5) 0%, rgba(14, 17, 22, 0.78) 80%),
      url("../assets/img/evhover-blur.webp") center / cover no-repeat;
  }

  /* quiet face: only the headline + (Author, Year) show; the kicker, the finding
     and the full reference fade in with the dark state (touch sees everything) */
  .evpanel__tag, .evpanel__body {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.4s ease;
  }
  .evpanel__body { transition-delay: 0.04s; }
  .evpanel__cite span { opacity: 0; transition: opacity 0.5s var(--ease-out); }
  .evpanel:hover .evpanel__tag, .evpanel:hover .evpanel__body,
  .evpanel:hover .evpanel__cite span,
  .evpanel:focus-visible .evpanel__tag, .evpanel:focus-visible .evpanel__body,
  .evpanel:focus-visible .evpanel__cite span {
    opacity: 1;
    transform: none;
  }
  .evpanel:hover { outline-color: transparent; }
  .evpanel:hover::before { opacity: 1; }
  .evpanel:hover .evpanel__tag { color: var(--deep-mute); }
  .evpanel:hover h3, .evpanel:hover .evpanel__body { color: #FFFFFF; }
  .evpanel:hover h3 span { color: rgba(255, 255, 255, 0.68); }
  .evpanel:hover .evpanel__cite,
  .evpanel:hover .evpanel__cite svg { color: rgba(255, 255, 255, 0.62); }
}
/* keyboard gets the same dark state on any device — with a visible focus ring */
.evpanel:focus-visible { outline: 2px solid var(--night-soft); outline-offset: 2px; }
.evpanel:focus-visible::before { opacity: 1; }
.evpanel:focus-visible .evpanel__tag { color: var(--deep-mute); }
.evpanel:focus-visible h3, .evpanel:focus-visible .evpanel__body { color: #FFFFFF; }
.evpanel:focus-visible h3 span { color: rgba(255, 255, 255, 0.68); }
.evpanel:focus-visible .evpanel__cite,
.evpanel:focus-visible .evpanel__cite svg { color: rgba(255, 255, 255, 0.62); }

@media (max-width: 1099px) {
  .evcell { width: calc(50% - 0.5px); min-height: 320px; }
}

/* ---------------- method / the journey (dark to light) ---------------- */

.method { background: var(--paper-2); }
.journey {
  position: relative;
  max-width: var(--w-max);
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid transparent;
}
.journey__bg, .journey__light { position: absolute; inset: 0; }
.journey__bg { background: #12161E; }
.journey__light { background: #FDFDFC; opacity: 0; }
.journey__in {
  position: relative;
  padding: clamp(26px, 3.2vw, 40px) clamp(24px, 4vw, 56px) clamp(22px, 2.8vw, 34px);
}
.journey__day .microlabel { display: block; color: var(--deep-mute); margin-bottom: 8px; }
.journey__day b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--dawn);
}
.journey__rows {
  margin-top: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.7vw, 20px);
}
.jrow__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dawn);
  opacity: 0.9;
}
/* both states share one grid cell — the row is as tall as the taller text,
   so neither state ever clips (the absolute overlay clipped on mobile) */
.jrow__tx { display: grid; margin-top: 6px; }
.jrow__b, .jrow__a {
  grid-area: 1 / 1;
  align-self: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.jrow__b { font-size: var(--fs-lg); line-height: 1.4; }
.jrow__a {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
  opacity: 0;
  transform: translateY(8px);
}
.jrow__a em { font-style: italic; color: var(--dawn); }
.jrow.is-flipped .jrow__b { opacity: 0; transform: translateY(-8px); }
.jrow.is-flipped .jrow__a { opacity: 1; transform: none; }
.jrow__cite {
  position: relative;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  display: none; /* receipts on demand: pointer devices only (touch gets the source note) */
}
.jrow__cite span { display: block; transition: opacity 0.45s ease; }
.jrow__cite-a { position: absolute; inset: 0; opacity: 0; }
.jrow.is-flipped .jrow__cite-b { opacity: 0; }
.jrow.is-flipped .jrow__cite-a { opacity: 1; }
/* En touch las citas por hover nunca aparecen, así que la bajada de la sección
   ("Every line is cited") es la que avisa que cada línea tiene fuente. Antes eso
   vivía en un .journey__srcnote suelto al pie de la tarjeta: mismo aviso, un
   párrafo menos. */
@media (hover: hover) and (pointer: fine) {
  .jrow__cite {
    display: block;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .jrow:hover .jrow__cite { opacity: 1; transform: none; }
}
.journey__scrub { margin-top: clamp(22px, 2.6vw, 32px); }
.journey__track { position: relative; height: 26px; }
.journey__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(138, 150, 174, 0.28);
  border-radius: 2px;
}
.journey__fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--dawn);
  border-radius: 2px;
  width: 0;
}
.journey__knob {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dawn);
  outline: 4px solid rgba(194, 112, 62, 0.18); /* el halo, ahora sin gastar sombra */
}
.journey__track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.journey:has(input:focus-visible) { outline: 2px solid var(--dawn); outline-offset: 3px; }
.journey__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--deep-mute);
}
.journey__punch {
  margin-top: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.journey__punch.is-on { opacity: 1; }

/* ---------------- the cycle (set piece) ---------------- */

.cycle {
  background: var(--deep);
  color: var(--deep-ink);
  position: relative;
}
.cycle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cycle { height: 420vh; }
.cycle__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  padding: 96px var(--pad) 26px;
  overflow: hidden;
}
.cycle__head { max-width: 46em; }
.cycle__head h2 { margin-top: 18px; }
.cycle__head h2 em { color: var(--night-soft); }
/* Atribución de la fuente clínica. Hereda el estilo del sub pero es un elemento
   aparte a propósito: NUNCA se oculta, en ninguna pantalla. Es la única mención
   de Dr Paula Hall en toda la landing y el claim de las 6 fases depende de ella. */
.cycle__sub { color: var(--deep-mute); max-width: 44em; }
.cycle__attr { margin: 12px auto 0; color: var(--deep-mute); }
.cycle__stage {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 40px);
  min-height: 0;
}
.cycle__svg {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.cycle__base { stroke: rgba(235,237,239,0.18); stroke-width: 2; }
.cycle__draw {
  stroke: var(--night-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1822;
  stroke-dashoffset: 1822;
}
.cycle__node { cursor: pointer; }
.cycle__node circle.dot {
  fill: var(--deep);
  stroke: rgba(235,237,239,0.45);
  stroke-width: 2;
  r: 8;
  transition: stroke 0.4s ease, fill 0.4s ease, r 0.4s ease;
}
.cycle__node.is-active circle.dot { fill: var(--night-soft); stroke: var(--night-soft); r: 11; }
.cycle__node.is-active.is-dawn circle.dot { fill: var(--dawn); stroke: var(--dawn); }
.cycle__node circle.halo {
  fill: none;
  stroke: rgba(138,150,174,0);
  stroke-width: 1;
  r: 16;
  transition: stroke 0.4s ease;
}
.cycle__node.is-active circle.halo { stroke: rgba(138,150,174,0.5); }
.cycle__node.is-active.is-dawn circle.halo { stroke: rgba(194,112,62,0.6); }
.cycle__node text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: rgba(235,237,239,0.55);
  transition: fill 0.4s ease;
}
.cycle__node.is-active text { fill: var(--deep-ink); }
.cycle__exit {
  stroke: var(--dawn);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cycle__exit.on { opacity: 0.85; }
.cycle__exit-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--dawn);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cycle__exit-label.on { opacity: 1; }

.cycle__reader { min-width: 0; }
.cycle__phase-n { color: var(--night-soft); }
.cycle__reader h3 {
  font-size: var(--fs-h2);
  margin: 10px 0 14px;
}
.cycle__reader p:not(.microlabel) {
  color: var(--deep-mute);
  font-size: var(--fs-lg);
  max-width: 26em;
  min-height: 4.8em;
}
.cycle__reader.phase-6 h3 { color: var(--dawn); }
.cycle__recognition {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-lg);
  text-align: center;
  color: rgba(235,237,239,0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.cycle__recognition em { color: var(--dawn); font-style: italic; }
.cycle__recognition.on { opacity: 1; transform: none; }

/* ---------------- inside ---------------- */

.inside { background: var(--paper); }
.inside__grid {
  max-width: var(--w-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: stretch;
}
.inside__col { text-align: center; display: flex; flex-direction: column; }
.inside__col > * { flex: none; }
.inside__name {
  font-size: var(--fs-xl);
  margin-top: 34px;
}
/* la bajada del libro se fue: el h2 de la sección ("A book that explains you") y el
   subtítulo impreso en la portada ya dicen lo mismo, dos veces */
.inside__meta { margin-top: 16px; }
.inside__arc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 25em;
  margin: 20px auto 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.arc__step {
  padding: 15px 10px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.arc__step + .arc__step { border-left: 1px solid var(--line); }
.arc__step .microlabel { font-size: var(--fs-2xs); }
.arc__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--ink);
}
.arc__what { font-size: var(--fs-sm); color: var(--mute); }
/* book */
.book {
  height: 420px;
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.book__inner {
  position: relative;
  width: 250px;
  height: 375px;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(4deg);
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
/* --fs-display local: el lettering de la portada vive en una caja fija de 250px,
   así que no puede escalar con el viewport como el resto del token. */
.book__cover {
  --fs-display: 58px;
  position: absolute;
  inset: 0;
  background: #141821;
  color: var(--deep-ink);
  border-radius: 3px 10px 10px 3px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backface-visibility: hidden;
  overflow: hidden;
}
.book__cover .microlabel { color: var(--deep-mute); font-size: var(--fs-2xs); }
.book__cover h3 {
  margin-top: auto;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: 0.04em;
}
.book__cover-sub {
  margin: 18px 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-soft);
  line-height: 1.8;
}
.book__cover-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(138,150,174,0.28);
  border-radius: 50%;
  top: -90px;
  right: -110px;
}
.book__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  background: #0F1218;
  transform: rotateY(-90deg) translateZ(17px) translateX(-17px);
}
.book__pages {
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 30px;
  background: #E7E6E2;
  transform: rotateY(90deg) translateZ(calc(250px - 15px)) translateX(15px);
}

/* phone */
.phone {
  height: 420px;
  display: grid;
  place-items: center;
}
/* El bezel era un box-shadow triple (dos anillos + una elevación). Los anillos son
   GEOMETRÍA, no sombra: acá los dibuja un pseudo-elemento detrás de la pantalla, y
   la hoja se queda con sus 3 sombras para lo que de verdad flota. */
.phone::before {
  content: "";
  grid-area: 1 / 1;
  width: 268px;
  height: 414px;
  border-radius: 43px;
  background: var(--deep);
  outline: 1px solid #2A2F38;
}
.phone__screen {
  grid-area: 1 / 1;
  z-index: 1;
  width: 250px;
  height: 396px;
  border-radius: 34px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  overflow: hidden;
}
.phone__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.phone__head .microlabel { font-size: var(--fs-2xs); }
.phone__day { color: var(--ink); font-size: var(--fs-xs); }
.phone__day b { font-size: var(--fs-md); font-family: var(--font-text); font-weight: 600; }
.phone__weekbar span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 8px;
}
.phone__progress {
  height: 3px;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
}
.phone__progress i {
  display: block;
  height: 100%;
  width: 1%;
  background: var(--night);
  border-radius: 2px;
}
.phone__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone__card .microlabel { font-size: var(--fs-2xs); }
.phone__card p:not(.microlabel) {
  font-size: var(--fs-sm);
  line-height: 1.45;
  font-weight: 500;
}
.phone__dots { display: flex; gap: 5px; }
.phone__dots i {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
}
.phone__dots i:first-child { background: var(--night); border-color: var(--night); }
.phone__ring {
  position: relative;
  margin-top: auto;
  align-self: center;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.phone__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.phone__ring-base { fill: none; stroke: var(--paper-2); stroke-width: 6; }
.phone__ring-fill {
  fill: none;
  stroke: var(--night);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
}
.phone__ring span {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 500;
}

/* ---------------- author ---------------- */

.author { background: var(--paper-2); }
.author__grid {
  max-width: var(--w-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.author__portrait {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 20px;
}
.author__monogram {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--night);
  background: var(--paper);
}

/* ---------------- pricing ---------------- */

.pricing { background: var(--paper); }

.plans {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
}
.plan {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #FDFDFC;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out),
              border-color 0.45s ease;
}
.plan:hover { transform: translateY(-4px); }
/* the panels' dark-reveal, shared by the pricing cards */
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(12, 15, 20, 0.78);
  transition: opacity 0.45s ease-in-out;
}
.plan > * { position: relative; z-index: 1; }
.plan h3, .plan__price, .plan ul, .plan ul li::before { transition: color 0.45s ease; }
.plan--bundle {
  background: #171C25;
  color: var(--deep-ink);
  border-color: rgba(194, 112, 62, 0.32);
}
@media (hover: hover) and (pointer: fine) {
  /* misma razón que en .evpanel::before: la imagen solo donde hay hover real */
  .plan::before {
    background:
      linear-gradient(165deg, rgba(11, 14, 19, 0.55) 0%, rgba(14, 17, 22, 0.84) 80%),
      url("../assets/img/evhover-blur.webp") center / cover no-repeat;
  }
  .plan:not(.plan--bundle):hover::before { opacity: 1; }
  .plan:not(.plan--bundle):hover { border-color: transparent; }
  .plan:not(.plan--bundle):hover h3,
  .plan:not(.plan--bundle):hover .plan__price { color: #FFFFFF; }
  .plan:not(.plan--bundle):hover ul { color: rgba(235, 237, 239, 0.85); }
  .plan:not(.plan--bundle):hover ul li::before { color: var(--night-soft); }
  .plan:not(.plan--bundle):hover .btn--outline { border-color: rgba(255, 255, 255, 0.85); color: #FFFFFF; }
  .plan--bundle:hover::before { opacity: 0.5; }
  .plan--bundle:hover { border-color: rgba(194, 112, 62, 0.55); }
}
.plan__flag { color: var(--night-soft); }
.plan h3 { font-size: var(--fs-xl); }
.plan__price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-2xl);
  line-height: 1;
  margin-top: 10px;
}
.plan__price span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-left: 8px;
}
.plan--bundle .plan__price span { color: var(--deep-mute); }
.plan ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: var(--fs-md);
  color: var(--ink-2);
}
.plan--bundle ul { color: rgba(235,237,239,0.8); }
.plan ul li::before {
  content: "—";
  margin-right: 10px;
  color: var(--night);
}
.plan--bundle ul li::before { color: var(--night-soft); }
.plan .btn { margin-top: auto; }
.plan--bundle .btn--primary { background: var(--paper); color: var(--ink); }
.plan--bundle .btn--primary:hover { background: #fff; }

/* the evidence strip that sells the program — the page's one warm accent at the decision point */
.plan__edge {
  padding: 15px 17px;
  border: 1px solid rgba(194, 112, 62, 0.3);
  border-radius: 13px;
  background: rgba(194, 112, 62, 0.08);
}
.plan__edge-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dawn);
}
.plan__edge-line {
  margin-top: 7px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(235, 237, 239, 0.9);
}
.plan__edge-cite {
  margin-top: 8px;
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--deep-mute);
}

.inside__col .inside__meta { margin-top: auto; padding-top: 24px; }
.inside__cta { margin-top: 20px; align-self: center; }

.pricing__sample { margin-top: 26px; text-align: center; }
.pricing__sample a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.3s ease, border-color 0.3s ease; position: relative; }
.pricing__sample a:hover { color: var(--ink); border-color: var(--mute); }
/* El mismo link, pero sobre el fondo oscuro del hero: hereda todo de
   .pricing__sample y solo cambia los colores para que contraste. */
.hero__sample { margin-top: 22px; text-align: left; }
.hero__sample a { color: var(--deep-mute); border-bottom-color: rgba(235, 237, 239, 0.24); }
.hero__sample a:hover { color: var(--deep-ink); border-bottom-color: rgba(235, 237, 239, 0.5); }

/* Blanco táctil de 44px (WCAG 2.5.5) sin alterar una sola cosa visible: el
   pseudo-elemento agranda el área tocable, no el subrayado. Medido en iPhone el
   link quedaba en 17px de alto — y es el ÚNICO acceso a la oferta gratuita, en un
   sitio donde el 99% del tráfico es táctil. El área queda centrada en el texto y
   no pisa nada: arriba tiene 26px de margen y abajo termina la sección. */
.pricing__sample a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.optin__more { margin-top: 22px; }
.optin__done .btn--ghost { margin-top: 12px; }

.pricing__trust {
  max-width: 900px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.paylogos {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0.55;
  filter: grayscale(1);
}
.paylogo {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.paylogo--visa { font-style: italic; letter-spacing: 0.1em; }
.paylogo--mc i {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-2);
  opacity: 0.65;
  display: inline-block;
}
.paylogo--mc i + i { margin-left: -8px; opacity: 0.4; }
.trustrow {
  list-style: none;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.trustrow li {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.trustrow li + li { border-left: 1px solid var(--line); }
.trustrow li:first-child { padding-left: 0; }
.trustrow strong { font-size: var(--fs-md); font-weight: 600; }
.trustrow span { font-size: var(--fs-sm); color: var(--mute); }

/* ---------------- reviews slot ---------------- */

.reviews { padding-top: 0; }
.reviews__box {
  max-width: var(--w-max);
  margin: 0 auto;
  border: 1px dashed var(--line);
  border-radius: 22px;
  padding: clamp(36px, 5vw, 64px);
  background: var(--paper);
}
.reviews__box .sect__head { margin-bottom: 0; }

/* ---------------- faq ---------------- */

.faq { background: var(--paper-2); }
.faq__list { max-width: 820px; margin: 0 auto; }
.qa {
  border-top: 1px solid var(--line);
}
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-xl);
  transition: color 0.3s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--night); }
.qa__x {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.6s var(--ease-inout), background-color 0.4s ease;
}
.qa__x::before, .qa__x::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.6s var(--ease-inout);
}
.qa__x::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.is-open .qa__x { transform: rotate(180deg); background: var(--ink); }
.qa.is-open .qa__x::before, .qa.is-open .qa__x::after { background: var(--paper); }
.qa.is-open .qa__x::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease-inout);
}
.qa.is-open .qa__body { grid-template-rows: 1fr; }
.qa__inner {
  overflow: hidden;
  min-height: 0;
}
.qa__inner p {
  padding: 0 4px 30px;
  max-width: 44em;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s var(--ease-out) 0.15s;
}
.qa.is-open .qa__inner p { opacity: 1; transform: none; }

/* ---------------- close ---------------- */

.close {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--deep-ink);
  background: var(--deep);
  overflow: hidden;
  padding: 120px var(--pad);
}
/* el amanecer que sube desde abajo + la base. El tercer gradiente (una mancha
   night arriba) peleaba con el dawn justo donde el dawn es el mensaje. */
.close__field {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(70% 55% at 50% 108%, rgba(194,112,62,0.34) 0%, rgba(194,112,62,0.06) 45%, rgba(194,112,62,0) 70%),
    linear-gradient(180deg, #0B0E13 0%, #12161E 60%, #1B1A1E 100%);
}
.close__content { position: relative; }
.close__title { font-size: var(--fs-display); font-weight: 300; font-family: var(--font-display); line-height: 1.1; }
.close__title em { color: var(--dawn); font-style: italic; }
.close__sub {
  margin-top: 22px;
  color: rgba(235,237,239,0.65);
  font-size: var(--fs-lg);
}
.close__sub em { color: var(--dawn); font-style: italic; }
.close__ctas {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------- footer ---------------- */

.footer {
  background: var(--deep);
  color: var(--deep-mute);
  padding: 50px var(--pad) 60px;
  border-top: 1px solid var(--line-dark);
}
.footer__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  display: flex;
  gap: 50px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer__logo {
  font-family: var(--font-mono);
  letter-spacing: 0.22em;
  color: var(--deep-ink);
}
.footer__logo span { opacity: 0.55; }
.footer__lines { max-width: 60ch; display: flex; flex-direction: column; gap: 10px; }
.footer__lines p { font-size: var(--fs-sm); line-height: 1.7; }
.footer__lines a { color: var(--deep-ink); }

/* ---------------- responsive ---------------- */

@media (max-width: 1020px) {
  .cycle__stage { grid-template-columns: 1fr; gap: 0; }
  .cycle__reader { text-align: center; }
  .cycle__reader p:not(.microlabel) { margin: 0 auto; min-height: 4.2em; }
  .cycle__svg { max-height: 40svh; }
}

@media (max-width: 780px) {
  .nav__links { display: none; }
  /* Chips compactados: eran 243px para 3 líneas de confianza. Ese espacio es lo
     que hace falta para que el hero termine por encima del fold y asome la
     sección siguiente. No se saca ninguno — el de la garantía de 7 días es
     muralla y los otros dos son los argumentos de privacidad y evidencia. */
  .hero__chips { margin-top: 18px; }
  .hero__chips { grid-template-columns: 1fr; gap: 8px; padding-bottom: 14px; }
  .hero__chips li { padding: 0; }
  .hero__chips li + li { border-left: 0; padding-top: 9px; border-top: 1px solid rgba(235,237,239,0.14); }
  .inside__grid { grid-template-columns: 1fr; }
  .author__grid { grid-template-columns: 1fr; }
  .author__portrait { max-width: 340px; }
  .plans { grid-template-columns: 1fr; }
  .trustrow { grid-template-columns: 1fr; gap: 16px; }
  .trustrow li { padding: 0; }
  .trustrow li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  /* 380vh daba 3,80 pantallas para 74 palabras: la peor densidad del sitio (19
     palabras por pantalla) y el 22% de todo el scroll, empujando el precio a la
     pantalla 10,8. El presupuesto por fase es (H − 100vh) × 0.88 / 6, así que a
     290vh cada una de las 6 fases recibe ~28vh — más de una pasada de pulgar,
     que es el piso para que el texto no cambie dos veces por gesto.
     NO se toca contenido: siguen las 6 fases, los ticks dawn y el crédito a Hall. */
  .cycle { height: 290vh; }
  /* las etiquetas del anillo están en display:none más abajo — no hace falta
     redimensionarlas */
  .journey__in { padding: 24px 20px 22px; }
  .journey__rows { margin-top: 18px; gap: 16px; }
  .journey__scrub { margin-top: 20px; }
  .journey__track { height: 38px; } /* finger-sized tap target */
  .journey__punch { margin-top: 14px; }
}

/* Teléfonos muy angostos (iPhone SE 1ª gen y similares): acá sí el precio en el
   pill lo parte en dos líneas y el nav pasa de 70 a 93px de alto. Solo ahí se
   esconde la cifra — en el resto del parque el CTA la muestra. */
@media (max-width: 340px) {
  .nav__cta .cta-price { display: none; }
}


/* short screens: keep the ring dominant.
   OJO: acá NO puede entrar `.cycle__attr` — es la atribución a Dr Paula Hall y
   tiene que verse siempre (ver el bloque base). Solo se recorta el argumento. */
@media (max-height: 800px) {
  .cycle__head { --fs-h2: clamp(24px, 3vw, 38px); }
  .cycle__sub { display: none; }
  .cycle__sticky { padding-top: 84px; gap: 6px; }
}
/* author portrait, set — --fs-display local: es lettering, no texto de lectura */
.author__portrait--set {
  --fs-display: clamp(64px, 8vw, 104px);
  border: 0;
  background: #141821;
  color: var(--deep-ink);
  position: relative;
  overflow: hidden;
  justify-content: center;
}
.author__ring {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(151, 154, 161, 0.22);
  border-radius: 50%;
  top: -130px;
  right: -150px;
}
.author__monogram--set {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  font-size: var(--fs-display);
  color: var(--deep-ink);
}
.author__mark { position: absolute; bottom: 26px; color: var(--deep-mute); }

/* ---------------- global polish (mobile pass 2026-07-12) ---------------- */

h2 { text-wrap: balance; }
/* the one spot that dropped the mono-label system */
.hero__chips strong {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* hanging indent so wrapped plan lines align under the text, not the dash */
.plan ul li { padding-left: 1.3em; text-indent: -1.3em; }
/* Cards de precio un poco más compactas en teléfono: con 26px de padding y 22px
   de gap, el botón de compra caía casi entero bajo el fold al aterrizar en
   #bundle. Bajarlos sube el botón a zona de pulgar sin apretar la lectura. */
.plan { padding: 22px; gap: 16px; }
.nav.is-scrolled[data-theme="dark"] {
  background: rgba(14, 17, 22, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(251, 251, 250, 0.08);
}

/* ---------------- mobile polish ---------------- */

@media (max-width: 780px) {
  /* Economía de scroll (2026-07-22): la página medía 17,1 PANTALLAS en un iPhone
     para 953 palabras. El problema no era cuánto texto hay — era el aire entre
     bloques. Con 11 secciones, cada 10px de padding cuestan 220px de scroll.
     De 64/76 a 48/56 y del head de 38 a 28. Sigue siendo generoso para un
     teléfono, y no se borró una sola palabra. El desktop no cambia. */
  .sect { padding: 48px var(--pad) 56px; }
  .sect__head { margin-bottom: 28px; }
  /* .reviews ya declara padding-top:0, pero .sect lo pisaba en mobile */
  .reviews { padding-top: 0; }
  /* La escala se re-declara acá — NO se agregan font-size sueltos. */
  :root { --fs-h1: clamp(27px, 7.9vw, 40px); --fs-h2: clamp(31px, 8.8vw, 38px); }
  /* ---- EL HERO TERMINA ANTES DEL FOLD (2026-07-23) ----
     Medido: de 402 visitantes, 269 se iban en los primeros 15 segundos y solo 31
     llegaban a mirar la evidencia. Causa mecánica: el hero medía 930px en un
     viewport de 844 por el `min-height: 100svh`, así que la primera pantalla se
     veía COMPLETA y no asomaba nada. El ojo no tenía ninguna señal de que hubiera
     más página.
     Ahora el hero se dimensiona por su contenido y queda por debajo del fold, así
     el borde de la sección CLARA de evidencia entra en pantalla. Un cambio de
     color a media pantalla es la señal de "hay más" más fuerte que existe —
     mucho más que una lista cortada al medio, que es lo que había antes. */
  .hero { padding-top: 76px; min-height: 0; padding-bottom: 0; }
  /* Huecos del hero ajustados al píxel para que el kicker de #evidence entre
     ENTERO sobre el fold. No alcanza con que asome una franja de color: que se
     lea el arranque de la sección siguiente es lo que convierte "parece que
     terminó" en "esto sigue". */
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__sub { margin-top: 16px; }
  .hero__ctas { margin-top: 20px; }
  .hero__sample { margin-top: 16px; }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__sub { margin-top: 20px; }
  .hero__ctas { margin-top: 26px; }
  /* El precio vive en el pill del nav, PERO no en la primera pantalla: mientras
     el hero está a la vista se oculta, y aparece al salir de él (js/main.js pone
     `has-scrolled`). Así la pantalla uno no pide plata por ningún lado, que es la
     decisión del 2026-07-23, y el precio sigue presente el resto del recorrido —
     que es lo que pedía el lock del CTA. */
  .nav__cta { white-space: nowrap; }
  .nav:not(.has-scrolled) .nav__cta .cta-price { display: none; }
  /* el eyebrow es lo único del hero que se sale de la escala: su alto decide si
     #evidence asoma sobre el fold, así que redefine el token en su propio scope */
  .hero__eyebrow { --fs-xl: clamp(12px, 3.4vw, 14px); padding: 9px 14px; white-space: nowrap; text-align: left; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; min-height: 54px; }

  /* benefit lattice: stacked cards, no hairline cells, tabs fade out instead of hard-clipping */
  .evgroup { gap: 12px; }
  .evcell { width: 100%; min-height: 0; padding: 0; outline: none; }
  .evpanel { padding: 18px; }
  .evpanel__cite { flex-direction: row; align-items: baseline; min-height: 0; }
  .evpanel__cite svg { transform: translateY(1px); }
  .journey__track { height: 44px; } /* full-finger hit area; line+knob stay centered */
  .cycle__node .halo { fill: rgba(0, 0, 0, 0); r: 52px; } /* transparent fill = tappable */
  /* La barra mide 883px contra ~350 visibles: 5 de las 8 tabs quedan 100% fuera
     de pantalla, o sea 20 de las 32 cards que nadie sabe que existen.
     La máscara ANTES era binaria (o difuminaba a la derecha, o a la izquierda),
     así que a media pasada el borde izquierdo cortaba en seco y parecía un error
     de maquetado. Ahora los dos bordes se atenúan de forma independiente y
     continua: js/main.js escribe --fade-l y --fade-r según cuánto queda de cada
     lado, y eso comunica "hay más" en ambas direcciones.
     NO se reestructura la sección: es lock del dueño. */
  .evtabs {
    border: 0;
    padding: 0;
    --fade-l: 0px;
    --fade-r: 44px;
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l),
                                #000 calc(100% - var(--fade-r)), transparent);
    /* el snap deja cada tab bien plantada en vez de a medio cortar */
    scroll-snap-type: x proximity;
  }
  .evtab { scroll-snap-align: center; }

  /* the cycle: bigger ring, readable by the reader below — not by 7px labels */
  .cycle__sticky { padding-top: 72px; }
  .cycle__sub { max-width: 32ch; }
  .cycle__svg { max-height: 46svh; transform: scale(1.22); } /* the viewBox reserved room for labels we hide */
  .cycle__node text, .cycle__exit-label { display: none; }
  .cycle__node .dot { r: 20px; }   /* SVG user units: ~7px on screen */
  .cycle__node .halo { r: 42px; }

  /* la card ya tiene su borde: la sombra encima era el mismo trabajo dos veces */
  .plan:not(.plan--bundle) { background: #FFFFFF; }

  .qa summary { padding: 22px 4px; }
  .qa summary span { text-wrap: balance; }
  .reviews__box .sect__sub { max-width: 32ch; text-align: left; }

  .close { min-height: 82svh; }
  .close__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
  .close__ctas .btn { width: 100%; justify-content: center; min-height: 54px; }

  .footer__lines p { color: rgba(235, 237, 239, 0.72); }
}

/* ---------------- free chapter opt-in ---------------- */

.optin { padding-top: 0; }
.optin__box {
  max-width: var(--w-max);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: clamp(34px, 4.6vw, 60px);
}
.optin__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.optin__grid[hidden] { display: none; } /* class display beats the hidden attribute otherwise */
.optin__copy h2 { font-size: var(--fs-2xl); }
.optin__sub { margin-top: 14px; color: var(--ink-2); max-width: 38em; }
.optin__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.optin__form { position: relative; display: flex; flex-direction: column; gap: 14px; }
.optin__srlabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.optin__row { display: flex; gap: 10px; }
.optin__email {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-lg);   /* 16px: <16px dispara auto-zoom en iOS */
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 22px;
  transition: border-color 0.3s ease;
}
.optin__email::placeholder { color: var(--mute); }
/* el anillo de foco lo pone la regla global :focus-visible — antes había un
   box-shadow duplicando ese trabajo y un outline:none apagando el de verdad */
.optin__email:focus { border-color: var(--night); }
.optin__btn { flex: none; }
/* Se le sacó la clase `microlabel`: eran 104 caracteres en versalitas mono de
   10px con tracking ancho, o sea la línea más difícil de leer de la página —
   justo la que contiene la promesa de privacidad, que es lo que más necesita
   leerse en este nicho. Ahora es texto normal, un punto más grande. */
.optin__privacy {
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--mute);
}
.optin__privacy a { color: var(--night); }
.optin__error { font-size: var(--fs-sm); color: var(--dawn); }
.optin__done { text-align: center; padding: 10px 0; }
.optin__done h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-2xl);
  margin-top: 18px;
}
.optin__done .optin__sub { margin: 12px auto 22px; }

@media (max-width: 780px) {
  .optin__grid { grid-template-columns: 1fr; gap: 26px; }
  .optin__row { flex-direction: column; }
  .optin__btn { width: 100%; min-height: 54px; }
  .optin__email { padding: 15px 22px; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .line > span, .cycle__recognition, .qa__inner p {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__ring-arc { transition: none; stroke-dashoffset: 518; }
  .hero__layer { transform: none !important; }
  .evtabs__pill { transition: none !important; }
  .evpanel::before { transition: none !important; }
  .evpanel__tag, .evpanel__body {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .evgroup.is-enter .evpanel { animation: none !important; opacity: 1 !important; }
}

/* ---------------- editorial photography (Higgsfield shoot, 2026-07-16) ---------------- */

/* La foto (59 KB) vive en la pantalla 15,7 de 17 pero se descargaba en el fold,
   junto con las fuentes del titular. Ahora la url se inyecta recién cuando la
   sección se acerca al viewport (ver el bloque `data-bg` de js/main.js).
   Es puramente decorativa (opacity .38): sin JS la página no pierde contenido. */
/* Foto y video del close comparten EXACTAMENTE la misma máscara: una sola regla
   para los dos, así el degradado se declara una vez.
   `-webkit-mask-image` ya no hace falta: Safari soporta `mask-image` sin prefijo
   desde 15.4 (2022) y Chrome desde la 120. Si un navegador viejo la ignora, la
   foto se ve con borde recto — degradación cosmética, no pérdida de contenido. */
.close__photo, .close__video {
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.75) 46%, #000 100%);
}
.close__photo {
  position: absolute;
  inset: 0;
  background: var(--close-photo, none) center 64% / cover no-repeat;
  opacity: 0.38;
}

/* ambient motion (Higgsfield loops) — the still underneath is the poster/fallback */
.hero__amb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen; /* only the light moves; black stays black */
  transition: opacity 1.6s ease;
}
.hero__amb.is-on { opacity: 0.34; }
.close__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.close__video.is-on { opacity: 0.38; }
@media (prefers-reduced-motion: reduce) {
  .hero__amb, .close__video { display: none; }
}

@media (max-width: 780px) {
  .close__photo { opacity: 0.3; }
}

/* ---------------- barra de compra persistente (mobile) ----------------
   Solo existe en teléfonos: en desktop el CTA del nav siempre está a la vista y
   una barra fija sería cromo redundante. Aparece al salir del hero y desaparece
   cuando el pricing o el footer entran en pantalla, así nunca hay dos CTA
   compitiendo ni queda tapando la línea de crisis o el disclosure de imágenes AI. */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease-out);
}
.buybar.is-on { transform: none; }
.buybar .btn { display: block; width: 100%; text-align: center; }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
@media (min-width: 781px) { .buybar { display: none !important; } }

/* La referencia completa se esconde en touch: la regla 5 de la doctrina dice que
   en la cara de la card va como máximo (Autor, Año). En desktop sigue entera —
   en las cards de evidencia aparece con el hover, junto al hallazgo.
   ⚠️ Lo que se esconde es el volumen/páginas del journal. El AUTOR y el AÑO
   siguen visibles en las 32 cards: ningún claim se queda sin fuente atribuible. */
@media (max-width: 767px) {
  .plan__edge-cite span,
  .evpanel__cite span { display: none; }
}

/* ---- El fold también funciona en pantallas cortas (2026-07-23) ----
   Los teléfonos reales rara vez dan 844px de alto: el navegador in-app de
   Facebook/Instagram —43% del tráfico medido— se come ~100px de chrome y deja
   ~745, y un iPhone SE da 667. Ahí el hero pasaba el fold y NO asomaba la
   sección siguiente, o sea que justo el grueso del tráfico se perdía la señal
   de "esto sigue" que es todo el punto del rediseño.
   Los chips son el bloque más alto del hero (201px apilados). Acá pasan a UNA
   línea cada uno: no se saca ninguno —el de la garantía es muralla— pero el
   bloque baja a ~90px, que es lo que hace falta para que el fold corte dentro
   de la sección clara. */
@media (max-height: 820px) {
  .hero { padding-top: 64px; }
  .hero__chips { margin-top: 14px; gap: 6px; padding-bottom: 10px; }
  .hero__chips li {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hero__chips li + li { padding-top: 6px; }
  /* medio píxel por chip = 2px de fold. En pantallas cortas #evidence asoma por
     30px en un Android de 640: acá esa fracción se paga. */
  .hero__chips { --fs-sm: 12.5px; }
  .hero__ctas { margin-top: 16px; gap: 10px; }
  .hero__sub { margin-top: 12px; }
  .hero__sample { margin-top: 12px; }
}