/* =========================================================================
   ALMA LIGERA · EN · /en/css/en.css
   Sistema visual canon SS-1 (verde Andrés 2026-09-01): tokens de portada-en.html
   + contrato del motor (js/quiz.js: .page/.page--active, #progressBar, .option-*).
   Orden del archivo:
     0. Fuentes auto-hospedadas (CSP prod: font-src 'self')
     1. Tokens
     2. Base
     3. Fondo (veil + estrellas)
     4. Motor: app / páginas / transiciones (NO tocar sin leer quiz.js)
     5. Topbar = #progressBar del motor, con la hairline aprobada
     6. Portada (página 0)
     7. Pregunta: título, subtítulo, «why do we ask», opciones, botones
     8. Género (tarjetas, tentpole aprobado)
     9. Entrada (rise) + reduced motion + anchos intermedios
   Los lotes L1–L3 (Opus) APPENDEN secciones 10+ al final (perceptual, interstitial,
   nombre, loading, antes/después, email, paywall, resultados) sin tocar 0–9.
   ========================================================================= */

/* ---------- 0. Fuentes (mismas rutas que la raíz ES; relativas → sirven en file:// y prod) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(../../fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(../../fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Cormorant Garamond v21 (variable, subset latin, Google Fonts → self-hosted 2026-09-01) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../../fonts/cormorant-garamond-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(../../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Tokens (verbatim portada-en + p01) ---------- */
:root{
  --bg:          #0a0908;
  --surface:     #191611;
  --surface-2:   #211d16;
  --ink:         #f4f1ee;
  --ink-2:       rgba(244,241,238,0.78);
  --ink-3:       rgba(244,241,238,0.62);
  --gold:        #e0b878;
  --gold-line:   rgba(224,184,120,0.32);
  --line:        rgba(244,241,238,0.10);
  --invert-bg:   #f4f1ee;
  --invert-text: #1f1812;
  --danger:      #e8a0a0;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-display: clamp(41px, 11.2vw, 56px);
  --t-title:   clamp(29px, 7.6vw, 36px);
  --t-stat:    clamp(27px, 7vw, 34px);
  --t-eyebrow: clamp(19px, 5.2vw, 22px);
  --t-lede:    18px;
  --t-cta:     19px;
  --t-meta:    16px;
  --t-mark:    16px;
  --t-micro:   15px;

  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 20px;
  --s5: 32px; --s6: 52px;  --s7: 84px;

  --r-pill: 999px;
  --r-card: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d-med: 280ms;
  --d-slow: 520ms;
  --wrap: 520px;
  --gutter: 24px;
  --topbar-h: 96px;              /* alto reservado bajo la topbar fija */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-lede);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button{ font-family:inherit; color:inherit; }
img{ max-width:100%; }

/* ---------- 3. Fondo: vela + estrellas ---------- */
.veil{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.veil__glow{
  position:absolute; left:50%; top:26%;
  width:min(760px, 150vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,184,120,0.15) 0%, rgba(224,184,120,0.07) 34%, rgba(224,184,120,0) 68%);
}
.star{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:rgba(244,241,238,0.75);
  opacity:0;
  animation:twinkle var(--dur) var(--d) ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(0.7); }
  50%    { opacity:0.55; transform:scale(1); }
}

/* ---------- 4. Motor: app / páginas / transiciones (contrato quiz.js) ---------- */
.app{ position:relative; z-index:1; width:100%; min-height:100svh; overflow:hidden; }

.page{
  position:absolute; inset:0;
  width:100%; min-height:100svh;
  opacity:0; pointer-events:none;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center;
  padding:var(--topbar-h) var(--gutter) calc(var(--s5) + var(--safe-bottom));
}
.page[data-page="0"]{ padding-top:40px; }
.page--active{ opacity:1; pointer-events:auto; z-index:1; }

.page__content{
  width:100%; max-width:var(--wrap);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  flex:1 0 auto;
  position:relative;
}

.page--slide-in-right { animation: slideInRight var(--d-med) var(--ease) both; }
.page--slide-in-left  { animation: slideInLeft  var(--d-med) var(--ease) both; }
.page--slide-out-left  { animation: slideOutLeft  var(--d-med) var(--ease) both; }
.page--slide-out-right { animation: slideOutRight var(--d-med) var(--ease) both; }
.page--slide-in-right,.page--slide-in-left,.page--slide-out-left,.page--slide-out-right{ will-change:transform, opacity; }
@keyframes slideInRight { from{ transform:translate3d(24px,0,0); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes slideInLeft  { from{ transform:translate3d(-24px,0,0); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes slideOutLeft { from{ transform:none; opacity:1; } to{ transform:translate3d(-24px,0,0); opacity:0; } }
@keyframes slideOutRight{ from{ transform:none; opacity:1; } to{ transform:translate3d(24px,0,0); opacity:0; } }

/* ---------- 5. Topbar = #progressBar del motor (hairline aprobada en p01/p16/p38/p42) ---------- */
.progress-bar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; flex-direction:column; align-items:center;
  padding:20px var(--gutter) 0;
  background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 78%, rgba(10,9,8,0) 100%);
  opacity:0; pointer-events:none;
  transition:opacity var(--d-med) var(--ease);
}
.progress-bar--visible{ opacity:1; pointer-events:auto; }
.progress-bar__mark{
  font-family:var(--font-ui);
  font-size:var(--t-mark);
  font-weight:600;
  letter-spacing:0.34em; text-indent:0.34em;
  text-transform:uppercase;
  color:var(--gold);
  line-height:1;
  margin-bottom:var(--s3);
}
.progress-bar__sections{
  width:100%; max-width:var(--wrap);
  display:flex; gap:0; align-items:flex-start;   /* 4 tramos pegados = UNA línea continua (piel aprobada) */
  padding-bottom:14px;
}
.progress-bar__section{ flex:1; min-width:0; }
.progress-bar__track{
  position:relative; width:100%; height:2px;
  background:var(--line);
  overflow:hidden;
}
.progress-bar__section:first-child .progress-bar__track{ border-radius:var(--r-pill) 0 0 var(--r-pill); }
.progress-bar__section:last-child  .progress-bar__track{ border-radius:0 var(--r-pill) var(--r-pill) 0; }
.progress-bar__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  background:var(--gold);
  transition:width var(--d-slow) var(--ease);
}
.progress-bar__section--current .progress-bar__fill{ min-width:4px; }
.progress-bar__label{ display:none; }   /* la piel aprobada no lleva etiquetas de sección */
.progress-bar__count{
  flex:none; order:-1; margin-right:12px; transform:translateY(-6px);   /* al inicio de la línea: la derecha es del botón de música */
  font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:0.06em;
  color:var(--ink-3); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.progress-bar__count:empty{ display:none; }

/* Botón volver (lo inyecta el motor en las páginas 1–37): fantasma, arriba a la izquierda */
.btn--back{
  position:absolute; top:-8px; left:-6px;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:transparent; color:var(--ink-3);
  cursor:pointer;
  transition:color var(--d-med) var(--ease), background var(--d-med) var(--ease);
}
.btn--back:hover{ color:var(--ink); background:var(--surface); }
.btn--back:active{ transform:scale(0.94); }
.btn--back svg{ width:20px; height:20px; }

/* Música de fondo: toggle discreto arriba a la derecha (opcional para el motor) */
.audio-toggle{
  position:fixed; top:12px; right:12px; z-index:60;
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(10,9,8,0.6); color:var(--ink-3);
  cursor:pointer;
}
.audio-toggle:hover{ color:var(--ink); }
.audio-toggle.playing{ color:var(--gold); }
.audio-toggle .audio-icon{ width:18px; height:18px; }
.audio-toggle .audio-icon--on{ display:none; }
.audio-toggle.playing .audio-icon--off{ display:none; }
.audio-toggle.playing .audio-icon--on{ display:block; }

/* ---------- 6. Portada (página 0, verbatim portada-en) ---------- */
.brand{ display:flex; flex-direction:column; align-items:center; }
.brand__mark{
  font-family:var(--font-ui); font-size:var(--t-mark); font-weight:600;
  letter-spacing:0.34em; text-indent:0.34em; text-transform:uppercase;
  color:var(--gold); line-height:1;
}
.brand__rule{ display:block; width:34px; height:1px; margin:16px 0; background:var(--gold-line); }
.brand__eyebrow{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--t-eyebrow); letter-spacing:0.005em; line-height:1.2;
  color:var(--ink-2);
}
.hero{
  width:100%; max-width:420px;
  margin:var(--s5) 0 var(--s4);
  -webkit-mask-image:radial-gradient(62% 58% at 50% 46%, #000 30%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(62% 58% at 50% 46%, #000 30%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0) 96%);
}
.hero img{ display:block; width:100%; height:200px; object-fit:cover; object-position:50% 44%; }
.display{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-display); line-height:1.06; letter-spacing:-0.021em;
  color:var(--ink); max-width:15ch; text-wrap:balance;
}
.lede{ margin-top:var(--s4); max-width:34ch; font-size:var(--t-lede); color:var(--ink-2); text-wrap:pretty; }
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s5); list-style:none; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:var(--t-meta); font-weight:500; color:var(--ink-2); line-height:1;
}
.chip svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:360px; min-height:62px;
  margin-top:var(--s4); padding:18px 30px;
  border:0; border-radius:var(--r-pill);
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-cta); font-weight:700; letter-spacing:-0.005em; line-height:1;
  text-decoration:none; cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(224,184,120,0.26), 0 2px 8px rgba(0,0,0,0.5);
  transition:transform 180ms var(--ease), box-shadow 280ms var(--ease), opacity 180ms var(--ease);
}
.cta__arrow{ transition:transform 180ms var(--ease); font-size:20px; }
.cta:hover{ transform:translateY(-1px); }
.cta:hover .cta__arrow{ transform:translateX(3px); }
.cta:active{ transform:scale(0.985); }
.cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.note{ margin-top:var(--s4); max-width:32ch; font-size:var(--t-meta); line-height:1.5; color:var(--ink-3); }
.foot{
  width:100%; max-width:var(--wrap);
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line);
  text-align:center; font-size:var(--t-micro); color:var(--ink-3);
}
.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:var(--ink-2); text-decoration:underline; }
.foot span{ opacity:0.5; padding:0 6px; }

/* ---------- 7. Pregunta: título, subtítulo, why-ask, opciones, botones ---------- */
.quiz-page{ gap:0; }
.quiz-page__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-title); line-height:1.1; letter-spacing:-0.018em;
  color:var(--ink); max-width:18ch; text-wrap:balance;
}
.quiz-page__subtitle{ margin-top:var(--s3); max-width:32ch; font-size:var(--t-meta); color:var(--ink-3); text-wrap:pretty; }

.why-ask{ margin-top:var(--s4); max-width:34ch; }
.why-ask__summary{
  display:inline-flex; align-items:center; gap:7px; list-style:none; cursor:pointer;
  font-size:var(--t-micro); font-weight:500; color:var(--ink-3); line-height:1; padding:6px 2px;
}
.why-ask__summary::-webkit-details-marker{ display:none; }
.why-ask__summary:hover{ color:var(--ink-2); }
.why-ask__summary:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:6px; }
.why-ask__icon{ width:15px; height:15px; color:var(--gold); flex:none; }
.why-ask__panel{ margin-top:var(--s2); font-size:var(--t-micro); line-height:1.55; color:var(--ink-3); text-wrap:pretty; }

/* Lista de opciones (única / múltiple / Likert). data-value queda en español: lo lee el motor. */
.options{ width:100%; margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
/* Opciones cortas (edades, sí/no): rejilla de 2 columnas, texto centrado */
.options--grid2{ display:grid; grid-template-columns:1fr 1fr; }
.options--grid2 .option-btn{ justify-content:center; text-align:center; padding:16px 12px; }
.options--age .option-btn:last-child{ grid-column:1 / -1; }   /* 5 tramos: el último ocupa la fila entera */
.option-btn,
.option-check{
  display:flex; align-items:center; gap:var(--s3);
  width:100%; min-height:60px;
  padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); color:var(--ink-2);
  font-size:var(--t-lede); font-weight:500; line-height:1.3; text-align:left;
  cursor:pointer;
  transition:transform 180ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.option-btn > span:first-child{ flex:1 1 auto; }
.option-btn:hover,.option-check:hover{ background:var(--surface-2); }
.option-btn:active,.option-check:active{ transform:scale(0.985); }
.option-btn:focus-visible,.option-check:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.option-btn:disabled{ opacity:0.45; cursor:default; }
/* Elegida: borde dorado entero + brillo corto + pulso de 360ms (se siente en cada toque; la
   pantalla avanza sola 420ms después, así que el toque tiene que verse confirmado al instante) */
.option-btn--selected,
.option-check--selected{
  border-color:var(--gold); background:var(--surface-2); color:var(--ink);
  box-shadow:0 0 0 1px var(--gold) inset, 0 12px 30px -16px rgba(224,184,120,0.45);
  animation:pick 360ms var(--ease);
}
@keyframes pick{ 0%{ transform:scale(1); } 35%{ transform:scale(0.975); } 100%{ transform:scale(1); } }
.option-check__box{
  flex:none; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ink-3); border-radius:6px;
  color:transparent;
  transition:border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.option-check__box svg{ width:14px; height:14px; }
.option-check--selected .option-check__box{ border-color:var(--gold); background:var(--gold); color:var(--invert-text); }
.option-check__label{ flex:1 1 auto; }

/* Botones de avance: mismo CTA invertido de la portada; el motor apaga .btn--next hasta que hay selección */
.btn--next,
.btn--continue,
.btn--cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:360px; min-height:62px;
  margin-top:var(--s5); padding:18px 30px;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-cta); font-weight:700; letter-spacing:-0.005em; line-height:1;
  cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(224,184,120,0.26), 0 2px 8px rgba(0,0,0,0.5);
  transition:transform 180ms var(--ease), opacity 180ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 280ms var(--ease);
}
/* Apagado = fantasma (borde fino, texto tenue): no una plancha gris. Se llena de blanco al marcar algo. */
.btn--next:disabled,
.btn--next:not(.enabled){ background:transparent; border-color:var(--line); color:var(--ink-3); box-shadow:none; cursor:default; }
.btn--next.enabled:active,.btn--continue:active,.btn--cta:active{ transform:scale(0.985); }
.btn--next:focus-visible,.btn--continue:focus-visible,.btn--cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ---------- 8. Género (tentpole aprobado, verbatim p01) ---------- */
.options--gender{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.option-btn.gender-card{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  min-height:0; padding:var(--s3) var(--s3) var(--s4);
  border:1px solid transparent; border-radius:var(--r-card);
  background:var(--surface); color:var(--ink);
  transition:transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 280ms var(--ease), background 200ms var(--ease);
}
.gender-card__art{
  display:block; width:100%;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 44%, #000 34%, rgba(0,0,0,0.74) 64%, rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(60% 60% at 50% 44%, #000 34%, rgba(0,0,0,0.74) 64%, rgba(0,0,0,0) 96%);
}
.gender-card__art img{ display:block; width:100%; height:140px; object-fit:cover; object-position:50% 32%; }
.gender-card__label{ font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1; letter-spacing:0.005em; color:var(--ink-2); }
.gender-card:hover{ background:var(--surface-2); }
.gender-card:active{ transform:scale(0.985); }
.gender-card[aria-pressed="true"],
.gender-card.option-btn--selected{ border-color:var(--gold); background:var(--surface-2); box-shadow:0 0 0 1px var(--gold) inset, 0 16px 40px -18px rgba(224,184,120,0.42); }
.gender-card[aria-pressed="true"] .gender-card__label,
.gender-card.option-btn--selected .gender-card__label{ color:var(--ink); }

/* ---------- 9. Entrada + reduced motion + anchos intermedios ---------- */
.rise{ animation:rise 760ms var(--ease) both; }
.d1{ animation-delay:60ms; } .d2{ animation-delay:160ms; } .d3{ animation-delay:260ms; } .d4{ animation-delay:360ms; } .d5{ animation-delay:460ms; }
@keyframes rise{ from{ opacity:0; transform:translate3d(0,14px,0); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .rise{ animation:none; }
  .star{ animation:none; opacity:0.4; }
  .cta,.cta__arrow,.gender-card,.option-btn,.option-check{ transition:none; }
  .option-btn--selected,.option-check--selected{ animation:none; }
  .page--slide-in-right,.page--slide-in-left,.page--slide-out-left,.page--slide-out-right{ animation-duration:0.01ms; }
}

@media (min-width:600px){
  :root{ --gutter:32px; --topbar-h:128px; }
  .page[data-page="0"]{ padding-top:var(--s6); }
  .progress-bar{ padding-top:28px; }
  .progress-bar__sections{ padding-bottom:20px; }
  .hero{ margin-top:var(--s6); }
  .hero img{ height:280px; }
  .options--gender{ gap:var(--s4); margin-top:var(--s6); }
  .gender-card__art img{ height:210px; }
  .gender-card__label{ font-size:27px; }
}

/* ---------- 10. L1: pregunta con arte, Likert, perceptual visual, perceptual auditivo ---------- */

/* 10.1 Arte de pregunta — <figure> opcional bajo el título/subtítulo. La imagen se
   disuelve en el fondo con la misma máscara radial del hero/retratos (nada de marcos). */
.quiz-page__art{
  width:100%; max-width:220px;
  margin:var(--s4) auto 0;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 42%, rgba(0,0,0,0.6) 68%, transparent 96%);
  mask-image:radial-gradient(50% 50% at 50% 50%, #000 42%, rgba(0,0,0,0.6) 68%, transparent 96%);
}
.quiz-page__art img{ display:block; width:100%; height:150px; object-fit:cover; }

/* 10.2 Likert: la frase citada + 4 opciones con punto dorado de intensidad a la izquierda */
.quiz-page__statement{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--t-eyebrow); line-height:1.3; letter-spacing:0.005em;
  color:var(--ink-2); max-width:30ch;
  margin-top:var(--s4);
  text-wrap:pretty;
}

.options--likert .option-btn > span:first-child{ flex:none; }   /* el punto no crece */
.options--likert .option-btn__label{ flex:1 1 auto; }
.option-btn__dot{
  flex:none; width:8px; height:8px;
  border-radius:50%;
  background:var(--gold);
  opacity:0.22;
  transition:opacity 200ms var(--ease);
}
.option-btn[data-intensity="2"] .option-btn__dot{ opacity:0.45; }
.option-btn[data-intensity="3"] .option-btn__dot{ opacity:0.7; }
.option-btn[data-intensity="4"] .option-btn__dot{ opacity:1; }
.option-btn--selected .option-btn__dot{ opacity:1; box-shadow:0 0 0 4px rgba(224,184,120,0.22); }

/* 10.3 Perceptual visual: la lámina se funde en el fondo, dos respuestas en dos columnas */
.perceptual__art{
  width:100%; max-width:300px;
  margin:var(--s4) auto 0;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 42%, rgba(0,0,0,0.6) 68%, transparent 96%);
  mask-image:radial-gradient(50% 50% at 50% 50%, #000 42%, rgba(0,0,0,0.6) 68%, transparent 96%);
}
.perceptual__art img{ display:block; width:100%; height:auto; }

.options--perceptual{
  margin-top:var(--s4);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
}
.options--perceptual .option-btn{ min-height:64px; padding:16px 14px; text-align:center; }

/* 10.4 Perceptual auditivo (contrato quiz.js: .perceptual-audio-wrapper > audio + botón play,
   .perceptual-audio-options hermana del wrapper, .ready al terminar el audio).
   El canvas lo dibuja js/waveform.js a 300×140 CSS fijos: no cambiar esas medidas. */
.perceptual-audio-hint{
  margin-top:var(--s3); max-width:32ch;
  font-size:var(--t-meta); color:var(--ink-3);
  text-wrap:pretty;
}

.perceptual-audio-wrapper{
  position:relative;
  width:300px; height:140px;
  margin:var(--s4) auto 0;
  display:grid; place-items:center;
}
.perceptual-audio-waveform{
  position:absolute; inset:0;
  width:300px; height:140px;
  opacity:0.5; pointer-events:none;
  transition:opacity var(--d-med) var(--ease);
}
.perceptual-audio-waveform.is-playing{ opacity:0.9; }

.perceptual-audio-btn-play{
  position:relative; z-index:2;
  width:64px; height:64px;
  display:grid; place-items:center;
  border:1px solid var(--gold-line); border-radius:50%;
  background:rgba(10,9,8,0.7); color:var(--gold);
  cursor:pointer;
  transition:transform 180ms var(--ease), border-color 200ms var(--ease);
}
.perceptual-audio-btn-play:hover{ border-color:var(--gold); }
.perceptual-audio-btn-play:active{ transform:scale(0.94); }
.perceptual-audio-btn-play:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.perceptual-audio-btn-play svg{ width:24px; height:24px; }
.perceptual-audio-btn-play .audio-icon--play{ display:block; }
.perceptual-audio-btn-play .audio-icon--pause{ display:none; }
.perceptual-audio-btn-play.playing .audio-icon--play{ display:none; }
.perceptual-audio-btn-play.playing .audio-icon--pause{ display:block; }

/* Las respuestas nacen apagadas; el motor quita disabled y añade .ready al terminar el audio */
.perceptual-audio-options .option-btn{ transition:opacity var(--d-med) var(--ease), border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); }
.perceptual-audio-options .option-btn:disabled{ opacity:0.45; }
.perceptual-audio-options.ready .option-btn{ opacity:1; }

.perceptual-audio-skip{
  margin-top:var(--s4); padding:10px 12px;
  border:0; background:transparent;
  color:var(--ink-3);
  font-size:var(--t-micro); font-weight:500; line-height:1;
  cursor:pointer;
}
.perceptual-audio-skip:hover{ color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; }
.perceptual-audio-skip:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:6px; }
/* Aviso de silencio: lo enciende el motor 1,8 s después del play (iOS con el interruptor en mudo) */
.perceptual-audio-silent{ margin-top:var(--s3); max-width:30ch; font-size:var(--t-micro); color:var(--gold); text-wrap:pretty; }

@media (prefers-reduced-motion: reduce){
  .option-btn__dot,.perceptual-audio-waveform,.perceptual-audio-btn-play,.perceptual-audio-options .option-btn{ transition:none; }
}

@media (min-width:600px){
  .quiz-page__art img{ height:190px; }
}

/* ---------- 11. L2: pausas (interstitial), múltiples largas, expectativas, tiempo ---------- */

/* 11.1 Pausa con dato (piel verbatim de la maqueta p16-interstitial-en, verde Andrés 08-31).
   La cifra ES el tentpole: display propio (--t-stat) y la figura disuelta en el fondo. */
.interstitial{ justify-content:center; }

.interstitial__icon{
  width:52px; height:52px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--gold);
  display:grid; place-items:center;
}
.interstitial__icon svg{ width:24px; height:24px; }

.interstitial__figure{
  margin:var(--s4) 0 var(--s5);
  /* Máscara apretada (Fable 08-31): el café del fondo debe morir ANTES del borde del bitmap,
     si no la figura se lee como cápsula sobre el negro de la página. */
  -webkit-mask-image:radial-gradient(46% 44% at 50% 42%, #000 14%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(46% 44% at 50% 42%, #000 14%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 76%);
}
.interstitial__figure img{ display:block; height:240px; width:auto; object-fit:contain; }

.interstitial__stat{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-stat); line-height:1.14; letter-spacing:-0.016em;
  color:var(--ink); max-width:20ch;
  text-wrap:balance;
}
.interstitial__accent{ color:var(--gold); font-weight:600; }

.interstitial__rule{
  display:block; width:34px; height:1px;
  margin:var(--s4) 0 var(--s3);
  background:var(--gold-line);
}

.interstitial__source{
  font-size:var(--t-micro); font-weight:500; letter-spacing:0.01em;
  color:var(--ink-3); max-width:34ch;
}

/* Flecha del «Continue» (misma mecánica que .cta__arrow de la portada) */
.btn__arrow{ font-size:20px; transition:transform 180ms var(--ease); }
.btn--continue:hover .btn__arrow{ transform:translateX(3px); }

/* 11.2 Pausa quieta (25 y 35): ni figura ni dato. Solo el icono en círculo dorado y una
   frase serena, que reusa .quiz-page__statement (Cormorant italic) con medida más corta. */
.interstitial--quiet .interstitial__icon{
  width:56px; height:56px;
  background:transparent;
  border-color:var(--gold-line);
}
.interstitial--quiet .quiz-page__statement{ margin-top:var(--s5); max-width:26ch; }

/* 11.3 Múltiples de 5–7 ítems (18, 21, 33, 36): mismo .option-check, lista más apretada
   para que la última opción y el «Next» quepan sin pelear con el scroll del teléfono. */
.options--multi{ gap:var(--s3); }   /* Fable: mismo aire que las múltiples de L1 (p4/p6/p8) */

@media (prefers-reduced-motion: reduce){
  .btn__arrow{ transition:none; }
}

/* ---------- 12. L3: nombre, loading, antes/después, email, paywall, resultados ---------- */

/* 12.0 El atributo [hidden] tiene que ganarle a cualquier display de autor: el motor
   esconde spinners, errores, el overlay de micro-preguntas y el botón de reintento
   poniendo/quitando ese atributo, no clases. (Misma utilidad que la raíz ES.) */
[hidden]{ display:none !important; }

@keyframes l3-spin{ to{ transform:rotate(360deg); } }

/* 12.1 Capturas de nombre y email (piel verbatim de la maqueta p38-name-en: el input ES
   el tentpole — píldora de 62px centrada — y el CTA nace apagado). El gris de apagado va
   en :disabled porque quien pone y quita `disabled` es el motor (regex de nombre/email). */
.name-capture,
.email-capture{ justify-content:center; }

.name-capture__form,
.email-capture__form{
  width:100%; max-width:400px;
  margin-top:var(--s6);
  display:flex; flex-direction:column;
  gap:var(--s3);
}

.name-capture__label,
.email-capture__label{
  font-size:var(--t-micro); font-weight:500;
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink-3);
}

.name-capture__input,
.email-capture__input{
  width:100%; min-height:62px;
  padding:18px 24px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--ink);
  font-family:inherit; font-size:var(--t-lede); font-weight:500;
  text-align:center;
  transition:border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.name-capture__input::placeholder,
.email-capture__input::placeholder{ color:rgba(244,241,238,0.38); font-weight:400; }
.name-capture__input:focus,
.email-capture__input:focus{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(224,184,120,0.22);
}
.name-capture__input:focus-visible,
.email-capture__input:focus-visible{ outline:0; }
.name-capture__input--error,
.email-capture__input--error{ border-color:var(--danger); }
.name-capture__input:disabled,
.email-capture__input:disabled{ opacity:0.6; }

.name-capture__error,
.email-capture__error{
  font-size:var(--t-micro);
  color:var(--danger);
  text-align:center;
}

/* El botón reusa .btn--cta (sección 7); aquí solo el ritmo dentro del form y el apagado */
.name-capture__btn,
.email-capture__btn{
  width:100%; max-width:none;
  margin-top:var(--s2);
}
.name-capture__btn:disabled,
.email-capture__btn:disabled{
  background:transparent;
  border-color:var(--line);
  color:var(--ink-3);
  box-shadow:none;
  cursor:default;
}
.name-capture__btn-spinner,
.email-capture__btn-spinner,
.paywall__cta-spinner{
  display:inline-block;
  width:18px; height:18px;
  border:2px solid rgba(31,24,18,0.28);
  border-top-color:var(--invert-text);
  border-radius:50%;
  animation:l3-spin 700ms linear infinite;
}

.name-capture__note,
.email-capture__note{
  margin-top:var(--s5);
  max-width:32ch;
  font-size:var(--t-micro);
  color:var(--ink-3);
  text-wrap:pretty;
}

/* Consentimiento de marketing: nace sin marcar, tipografía de nota (no de opción) */
.email-capture__consent{
  display:flex; align-items:flex-start; gap:var(--s3);
  margin-top:var(--s1);
  font-size:var(--t-micro); line-height:1.45;
  color:var(--ink-3);
  text-align:left;
  cursor:pointer;
}
.email-capture__consent input{
  flex:none; width:20px; height:20px; margin-top:1px;
  accent-color:var(--gold);
  cursor:pointer;
}

/* Honeypot: fuera de pantalla, nunca display:none (los bots lo saltan si no es enfocable) */
.email-capture__hp{
  position:absolute; left:-9999px;
  width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* Reintento que inyecta el motor bajo el error (ensureRetryButton) */
.capture-retry{
  align-self:center;
  margin-top:var(--s1);
  padding:11px 22px;
  background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--gold);
  font-size:var(--t-micro); font-weight:600; line-height:1;
  cursor:pointer;
  transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.capture-retry:hover{ border-color:var(--gold-line); color:var(--ink); }
.capture-retry:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* 12.2 Fake loading (contrato quiz.js: .fake-loading__row + .fake-loading__row-fill,
   el motor añade --active/--done y togglea #fakeLoadingMP con el atributo hidden) */
.fake-loading{ justify-content:center; }

.fake-loading__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-title); line-height:1.1; letter-spacing:-0.018em;
  color:var(--ink); max-width:16ch;
  text-wrap:balance;
}
.fake-loading__dots span{ animation:flDot 1.4s ease-in-out infinite; }
.fake-loading__dots span:nth-child(2){ animation-delay:0.18s; }
.fake-loading__dots span:nth-child(3){ animation-delay:0.36s; }
@keyframes flDot{ 0%,70%,100%{ opacity:0.25; } 35%{ opacity:1; } }

.fake-loading__bars{
  width:100%; max-width:400px;
  margin-top:var(--s6);
  list-style:none;
  display:flex; flex-direction:column;
  gap:var(--s4);
}

.fake-loading__row{
  display:grid;
  grid-template-columns:20px 1fr;
  grid-template-areas:
    "icon label"
    "track track";
  align-items:center;
  column-gap:var(--s3); row-gap:10px;
  opacity:0.4;
  transition:opacity var(--d-med) var(--ease);
}
.fake-loading__row--active{ opacity:1; }
.fake-loading__row--done{ opacity:0.85; }

.fake-loading__row-label{
  grid-area:label;
  font-size:var(--t-meta); font-weight:500;
  color:var(--ink-2);
  text-align:left;
}

.fake-loading__row-check{
  grid-area:icon;
  width:20px; height:20px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  font-size:11px; font-weight:700;
  color:transparent;
  transition:color var(--d-med) var(--ease), border-color var(--d-med) var(--ease);
}
.fake-loading__row--active .fake-loading__row-check{
  border-color:var(--gold-line);
  border-top-color:transparent;
  animation:l3-spin 700ms linear infinite;
}
.fake-loading__row--done .fake-loading__row-check{
  border-color:var(--gold-line);
  color:var(--gold);
  animation:none;
}

.fake-loading__row-track{
  grid-area:track;
  position:relative;
  width:100%; height:2px;
  background:var(--line);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.fake-loading__row-fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  background:var(--gold);
  border-radius:var(--r-pill);
  transition:width 1.7s linear;
}

/* Overlay de micro-pregunta: tarjeta anclada abajo. El motor quita `hidden`, fuerza
   reflow y añade --visible, así que la entrada tiene que vivir en la opacidad. */
.fake-loading__mp{
  position:fixed; left:50%;
  bottom:calc(var(--s6) + var(--safe-bottom));
  z-index:60;
  width:min(420px, calc(100% - var(--gutter) * 2));
  padding:var(--s4);
  background:var(--surface);
  border:1px solid var(--gold-line); border-radius:var(--r-card);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.82);
  text-align:left;
  opacity:0;
  transform:translate(-50%, 12px);
  transition:opacity var(--d-med) var(--ease), transform var(--d-med) var(--ease);
}
.fake-loading__mp--visible{ opacity:1; transform:translate(-50%, 0); }

.fake-loading__mp-question{
  font-size:var(--t-meta); font-weight:500; line-height:1.45;
  color:var(--ink);
  margin-bottom:var(--s3);
  text-wrap:pretty;
}
.fake-loading__mp-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.fake-loading__mp-btn{
  min-height:48px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink);
  font-size:var(--t-meta); font-weight:600; line-height:1;
  cursor:pointer;
  transition:transform 180ms var(--ease), border-color 200ms var(--ease);
}
.fake-loading__mp-btn:hover{ border-color:var(--gold-line); }
.fake-loading__mp-btn:active{ transform:scale(0.985); }
.fake-loading__mp-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.fake-loading__mp-btn--primary{
  background:var(--invert-bg); color:var(--invert-text);
  border-color:transparent;
}

/* 12.3 Antes / después (piel verbatim de la maqueta p42-before-after-en: las dos
   imágenes son el tentpole y se disuelven en el fondo, sin marco ni tarjeta) */
.before-after__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-title); line-height:1.1; letter-spacing:-0.018em;
  color:var(--ink); max-width:17ch;
  text-wrap:balance;
}
.before-after__accent{ font-style:italic; font-weight:500; color:var(--gold); }

.before-after__cards{
  width:100%;
  margin-top:var(--s6);
  display:grid; grid-template-columns:1fr; gap:var(--s7);
}
.before-after__card{ display:flex; flex-direction:column; align-items:center; }

.before-after__img-wrap{
  width:100%; max-width:300px;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 46%, #000 32%, rgba(0,0,0,0.72) 64%, rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(58% 58% at 50% 46%, #000 32%, rgba(0,0,0,0.72) 64%, rgba(0,0,0,0) 96%);
}
.before-after__img-wrap img{
  display:block;
  width:100%; height:180px;
  object-fit:cover; object-position:50% 40%;
}

.before-after__card-title{
  margin-top:var(--s3);
  font-family:var(--font-ui);
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.24em; text-indent:0.24em; text-transform:uppercase;
  color:var(--ink-3); line-height:1;
}
.before-after__card--after .before-after__card-title{ color:var(--gold); }

.before-after__list{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line);
  width:100%; max-width:32ch;
  list-style:none;
  display:flex; flex-direction:column; gap:var(--s3);
  text-align:left;
}
.before-after__list li{
  display:flex; align-items:flex-start; gap:var(--s3);
  font-size:var(--t-meta); line-height:1.5;
  color:var(--ink-2);
  text-wrap:pretty;
}
.before-after__icon{ flex:none; width:18px; height:18px; margin-top:3px; }
.before-after__icon--minus{ color:var(--ink-3); }
.before-after__icon--check{ color:var(--gold); }

.before-after__btn{ margin-top:var(--s6); }

/* 12.4 Paywall (contrato quiz.js: .paywall__tier[data-tier][data-amount], el motor
   marca --selected + aria-checked y enciende #paywallCta) */
.paywall{ justify-content:center; }

.paywall__eyebrow{
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); line-height:1;
}
.paywall__title{
  margin-top:var(--s3);
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-title); line-height:1.1; letter-spacing:-0.018em;
  color:var(--ink); max-width:16ch;
  text-wrap:balance;
}
.paywall__lede{
  margin-top:var(--s3);
  max-width:32ch;
  font-size:var(--t-meta); color:var(--ink-3);
  text-wrap:pretty;
}
/* Tentpole: el nombre de la herida es lo más grande de la pantalla (display, no título) */
.paywall__wound{ font-size:var(--t-display); line-height:1.04; letter-spacing:-0.021em; max-width:12ch; }
.paywall__lede strong{ font-weight:600; color:var(--ink-2); }

.paywall__tiers{
  width:100%;
  margin-top:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}
.paywall__tier{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  width:100%;
  padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); color:var(--ink-2);
  text-align:left;
  cursor:pointer;
  transition:transform 180ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.paywall__tier:hover{ background:var(--surface-2); }
.paywall__tier:active{ transform:scale(0.985); }
.paywall__tier:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.paywall__tier--selected,
.paywall__tier[aria-checked="true"]{
  border-color:var(--gold-line);
  background:var(--surface-2);
  color:var(--ink);
}
.paywall__tier-name{
  font-size:var(--t-lede); font-weight:600; line-height:1.3;
  color:var(--ink);
}
.paywall__tier-desc{
  font-size:var(--t-micro); line-height:1.45;
  color:var(--ink-3);
  text-wrap:pretty;
}
/* SS-3 — nivel destacado ($7) + nota de paridad. El destacado DOMINA (más grande, fondo
   más claro) y llega ya elegido; los laterales se apagan un poco. Elegir otro nivel le da
   a ese el borde dorado entero y deja al destacado con su hairline. */
.paywall__tier--featured{ position:relative; border-color:var(--gold-line); background:var(--surface-2); }
.paywall__tier--featured .paywall__tier-name{ font-size:26px; }
.paywall__tier:not(.paywall__tier--featured):not(.paywall__tier--selected){ opacity:0.82; }
.paywall__tier--selected,
.paywall__tier[aria-checked="true"]{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 16px 40px -18px rgba(224,184,120,0.42); }
.paywall__tier--featured:not(.paywall__tier--selected){ border-color:var(--gold-line); box-shadow:none; }
.paywall__cta-amount{ font-weight:600; opacity:0.62; }
.paywall__cta-amount:not(:empty)::before{ content:'·'; margin-right:10px; opacity:0.6; }
.paywall__tier-badge{
  position:absolute; top:-10px; right:16px;
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--gold); color:var(--invert-text);
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; line-height:1.2;
}
.paywall__note{
  margin-top:var(--s3);
  font-size:var(--t-micro); color:var(--ink-3);
}

.paywall__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:360px; min-height:62px;
  margin-top:var(--s5); padding:18px 30px;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-cta); font-weight:700; letter-spacing:-0.005em; line-height:1;
  cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(224,184,120,0.26), 0 2px 8px rgba(0,0,0,0.5);
  transition:transform 180ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.paywall__cta:disabled{
  background:transparent; border-color:var(--line); color:var(--ink-3);
  box-shadow:none; cursor:default;
}
/* Mientras abre el checkout sigue blanco (con spinner): «esperando», no «apagado» */
.paywall__cta--loading:disabled{ background:var(--invert-bg); border-color:transparent; color:var(--invert-text); opacity:0.85; }
.paywall__cta:not(:disabled):active{ transform:scale(0.985); }
.paywall__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.paywall__error{
  margin-top:var(--s3);
  font-size:var(--t-micro); color:var(--danger);
  max-width:32ch;
}

.paywall__secure{
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s4);
  font-size:var(--t-micro); color:var(--ink-3);
}
.paywall__secure-icon{ width:16px; height:16px; flex:none; color:var(--gold); }
.paywall__disclaimer{
  margin-top:var(--s3);
  max-width:34ch;
  font-size:var(--t-micro); line-height:1.5;
  color:var(--ink-3);
  text-wrap:pretty;
}
/* Confirmando el pago (tras Checkout.Success, hasta que el webhook marque approved) */
.paywall__confirm{ display:none; }
.paywall--confirming > :not(.paywall__confirm){ display:none; }
.paywall--confirming .paywall__confirm{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  margin:auto 0; text-align:center;
}
.paywall__confirm-ring{
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--gold-line); border-top-color:var(--gold);
  animation:l3-spin 900ms linear infinite;
  margin-bottom:var(--s2);
}
.paywall__confirm-title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-title); line-height:1.1; letter-spacing:-0.018em;
  color:var(--ink); max-width:14ch; text-wrap:balance;
}
.paywall__confirm-lede{ max-width:30ch; font-size:var(--t-meta); color:var(--ink-3); text-wrap:pretty; }

/* 12.5 Resultados. Página larga: sin topbar (el motor la esconde en la 45) y con el
   contenido alineado a la izquierda dentro de tarjetas. */
.page[data-page="45"]{ padding-top:var(--s6); }

.result-full{
  align-items:stretch;
  text-align:left;
  gap:var(--s5);
  padding-bottom:var(--s6);
}

.result-full__hero{ position:relative; text-align:center; padding:var(--s5) 0 var(--s2); }
.result-full__glow{
  position:absolute; top:50%; left:50%;
  width:320px; height:320px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,184,120,0.16), rgba(224,184,120,0) 68%);
  pointer-events:none; z-index:0;
}
.result-full__hero > :not(.result-full__glow){ position:relative; z-index:1; }

.result-full__label{
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); line-height:1;
}
.result-full__subtitle-sm{
  margin-top:var(--s4);
  font-size:var(--t-meta); color:var(--ink-3);
}
.result-full__title{
  margin-top:var(--s2);
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-display); line-height:1.05; letter-spacing:-0.021em;
  color:var(--ink);
  text-wrap:balance;
}
.result-full__inner-child{
  margin-top:var(--s4);
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--t-eyebrow); line-height:1.3;
  color:var(--ink-2);
  text-wrap:pretty;
}
.result-full__mask,
.result-full__desc,
.result-full__mirror,
.result-full__combo{
  font-size:var(--t-meta); line-height:1.55;
  color:var(--ink-2);
  text-wrap:pretty;
}
.result-full__mask{ margin-top:var(--s4); color:var(--ink-3); text-align:center; }

.result-full__card,
.result-full__section{
  padding:var(--s5) var(--s4);
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.result-full__card-title,
.result-full__section-title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-eyebrow); line-height:1.2; letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:var(--s4);
}

/* Barras: el motor fija --bar-value (0–1) en el fill; la animación es el scaleX */
.result-full__bars{ display:flex; flex-direction:column; gap:var(--s3); }
.result-bar{ display:flex; align-items:center; gap:var(--s3); }
.result-bar__label{
  flex:0 0 128px;
  font-size:var(--t-micro); line-height:1.3;
  color:var(--ink-3);
}
.result-bar__track{
  flex:1;
  height:6px;
  background:var(--line);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.result-bar__fill{
  height:100%;
  background:var(--gold);
  border-radius:var(--r-pill);
  transform:scaleX(var(--bar-value, 0));
  transform-origin:left;
  transition:transform 900ms var(--ease);
}

/* Rejilla de heridas (la llena renderResults) */
.result-full__wounds-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.wound-item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.wound-item--winner{ border-color:var(--gold-line); }
.wound-item:nth-child(5){ grid-column:1 / -1; max-width:60%; justify-self:center; }
.wound-item__name{ font-size:var(--t-micro); font-weight:600; color:var(--ink-2); }
.wound-item--winner .wound-item__name{ color:var(--gold); }
.wound-item__score{ font-size:var(--t-micro); font-weight:600; color:var(--ink-3); }
.wound-item--winner .wound-item__score{ color:var(--gold); }

.result-full__generational{ text-align:center; }
.result-full__gen-icon{ font-size:32px; line-height:1; margin-bottom:var(--s3); }
.result-full__gen-text{ font-size:var(--t-meta); line-height:1.55; color:var(--ink-2); text-wrap:pretty; }

.result-full__manifest-cards{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
.manifest-card{
  padding:var(--s4);
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.manifest-card__icon{ font-size:26px; line-height:1; margin-bottom:var(--s2); }
.manifest-card__title{
  margin-bottom:var(--s2);
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold);
}
.manifest-card__text{ font-size:var(--t-micro); line-height:1.5; color:var(--ink-2); text-wrap:pretty; }

.intent-paragraph{
  font-size:var(--t-meta); line-height:1.55;
  color:var(--ink-2);
  margin-bottom:var(--s3);
  text-wrap:pretty;
}
.intent-paragraph:last-child{ margin-bottom:0; }

.result-full__metodo{ border-color:var(--gold-line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); }

/* Camino: el paso 1 abierto, los otros dos con candado (desenfocados) */
.healing-steps{ list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.healing-step{
  position:relative;
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4);
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.healing-step__num{
  flex:none; width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-micro); font-weight:700; line-height:1;
}
.healing-step--locked .healing-step__num{ background:var(--surface); color:var(--ink-3); }
.healing-step__text{ flex:1 1 auto; font-size:var(--t-micro); line-height:1.5; color:var(--ink-2); }
.healing-step--locked .healing-step__text{
  filter:blur(4px);
  user-select:none;
  pointer-events:none;
}
.healing-step__lock{
  flex:none; width:18px; height:18px;
  display:grid; place-items:center;
  color:var(--gold);
}
.healing-step__lock svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.hope-beat{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--t-eyebrow); line-height:1.35;
  color:var(--ink);
  text-align:center;
  padding:var(--s4) var(--s3);
  text-wrap:pretty;
}

.result-full__cta-block{ text-align:center; }
.btn--cta-result{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; max-width:360px; min-height:62px;
  padding:18px 30px;
  border:0; border-radius:var(--r-pill);
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-cta); font-weight:700; letter-spacing:-0.005em; line-height:1.2;
  cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(224,184,120,0.26), 0 2px 8px rgba(0,0,0,0.5);
  transition:transform 180ms var(--ease);
}
.btn--cta-result:active{ transform:scale(0.985); }
.btn--cta-result:disabled{ background:var(--surface-2); color:var(--ink-3); box-shadow:none; cursor:default; }
.btn--cta-result:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.result-full__cta-note{ margin-top:var(--s3); font-size:var(--t-micro); color:var(--ink-3); }
.result-full__cta-error{ margin-top:var(--s3); font-size:var(--t-micro); color:var(--danger); }

.result-full__disclaimer{
  margin-top:var(--s2);
  font-size:var(--t-micro); line-height:1.5;
  color:var(--ink-3);
  text-align:center;
  text-wrap:pretty;
}

/* Estado perdido (lo inyecta renderLostStateMessage si la sesión llega sin respuestas) */
.lost-state{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-align:center; max-width:var(--wrap); margin:0 auto; }
.lost-state__icon{
  width:56px; height:56px; display:grid; place-items:center;
  border:1px solid var(--gold-line); border-radius:50%; color:var(--gold);
  margin-bottom:var(--s2);
}
.lost-state__icon svg{ width:24px; height:24px; }
.lost-state__hint a{ color:var(--gold); text-decoration:none; }
.lost-state__hint a:hover{ text-decoration:underline; text-underline-offset:3px; }
.lost-state__title{ font-family:var(--font-display); font-weight:600; font-size:var(--t-title); line-height:1.1; color:var(--ink); }
.lost-state__lead{ font-size:var(--t-meta); color:var(--ink-2); max-width:34ch; text-wrap:pretty; }
.lost-state__hint{ font-size:var(--t-micro); color:var(--ink-3); max-width:34ch; text-wrap:pretty; }
.lost-state__code{
  display:inline-block; padding:10px 16px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--t-micro); color:var(--gold); word-break:break-all;
}
.lost-state__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; margin-top:var(--s3); padding:16px 30px;
  border-radius:var(--r-pill);
  background:var(--invert-bg); color:var(--invert-text);
  font-size:var(--t-cta); font-weight:700; line-height:1; text-decoration:none;
}

/* Reveal al hacer scroll: solo vive dentro de .js-reveal, que añade el motor. Si el JS
   falla, los bloques quedan visibles (la página post-pago no puede quedar en blanco). */
.result-full.js-reveal .result-full__card,
.result-full.js-reveal .result-full__section,
.result-full.js-reveal .hope-beat,
.result-full.js-reveal .result-full__cta-block{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.result-full.js-reveal .is-visible{ opacity:1; transform:none; }

/* 12.6 Movimiento reducido + anchos intermedios */
@media (prefers-reduced-motion: reduce){
  .name-capture__input,.email-capture__input,
  .name-capture__btn,.email-capture__btn,
  .paywall__tier,.paywall__cta,
  .fake-loading__row,.fake-loading__mp,.fake-loading__mp-btn,
  .result-bar__fill,.btn--cta-result{ transition:none; }
  .name-capture__btn-spinner,.email-capture__btn-spinner,.paywall__cta-spinner,
  .fake-loading__row--active .fake-loading__row-check,
  .fake-loading__dots span{ animation:none; }
  .result-full.js-reveal .result-full__card,
  .result-full.js-reveal .result-full__section,
  .result-full.js-reveal .hope-beat,
  .result-full.js-reveal .result-full__cta-block{ opacity:1; transform:none; transition:none; }
}

@media (min-width:480px){
  .result-full__manifest-cards{ grid-template-columns:1fr 1fr; }
}

@media (min-width:600px){
  .name-capture__form,.email-capture__form{ margin-top:var(--s7); }
  .before-after__cards{ grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start; }
  .before-after__img-wrap img{ height:200px; }
  .result-full__card,.result-full__section{ padding:var(--s5); }
}

/* ---------- 13. Teléfono: cada pantalla cabe SIN scroll en el navegador interno de FB/IG ----------
   Gate (Andrés 2026-09-01): el cliente no scrollea en ninguna pantalla del embudo (0–44).
   Viewports de referencia: iPhone dentro de IG/FB 390×675 · Android dentro de FB 360×640 ·
   iPhone SE dentro de IG 375×559 (tier extremo). Solo cambia aire, tamaños de imagen y
   densidad de filas; fuentes, colores y composición aprobadas (SS-1) quedan iguales.
   Tablet/desktop (≥600px) no se toca. Medición: funnel-v3/en/maqueta/_tools/audit-inapp.js
   Tiers: base (todo teléfono) → ≤660px de alto (Android dentro de FB) → ≤620px (iPhone SE). */
@media (max-width:599px){
  :root{ --topbar-h:74px; }
  .progress-bar{ padding-top:14px; }
  .progress-bar__mark{ font-size:14px; margin-bottom:10px; }
  .progress-bar__sections{ padding-bottom:12px; }
  .page{ padding-bottom:calc(var(--s3) + var(--s1) + var(--safe-bottom)); }
  .btn--back{ top:-6px; }

  /* Portada: mismas piezas en el mismo orden, menos aire, hero más bajo, título 38px */
  .page[data-page="0"]{ padding-top:20px; }
  .brand__rule{ margin:8px 0; }
  .hero{ margin:var(--s4) 0 var(--s3); }
  .hero img{ height:120px; }
  .display{ font-size:38px; line-height:1.04; }
  .lede{ margin-top:10px; }
  .chips{ margin-top:10px; }
  .chip{ padding:6px 12px; font-size:14px; }
  .chip svg{ width:14px; height:14px; }
  .cta{ margin-top:10px; }
  .note{ margin-top:10px; max-width:40ch; font-size:var(--t-micro); }
  .foot{ margin-top:10px; padding-top:8px; font-size:14px; }

  /* Pregunta: título con medida más ancha (menos líneas), dibujo 120px, filas 50px */
  .quiz-page__title{ max-width:22ch; line-height:1.08; padding:0 30px; }   /* 30px = no chocar con la flecha volver */
  .quiz-page__subtitle{ margin-top:var(--s2); }
  .why-ask{ margin-top:var(--s3); }
  .quiz-page__art{ margin-top:var(--s3); max-width:200px; }
  .quiz-page__art img{ height:120px; }
  .quiz-page__statement{ margin-top:var(--s3); }
  .options{ margin-top:var(--s4); gap:var(--s2); }
  .option-btn,.option-check{ min-height:50px; padding:12px 16px; }
  .options--grid2 .option-btn{ padding:12px 10px; }
  .btn--next,.btn--continue,.btn--cta{ margin-top:var(--s4); min-height:56px; padding:16px 26px; }

  /* Densas (6–7 casillas + Next: p4 p6 p8 p18 p21 p33 p36): el dibujo no cabe junto con
     todas las opciones y el botón; título 26px a 2 líneas, filas de 46px a 16px */
  .quiz-page--dense .quiz-page__art{ display:none; }
  .quiz-page--dense .quiz-page__title{ font-size:26px; line-height:1.06; max-width:none; padding:0 30px; }   /* 30px = no chocar con la flecha volver */
  .quiz-page--dense .options{ margin-top:var(--s3); gap:6px; }
  .quiz-page--dense .option-check{ min-height:44px; padding:10px 12px; gap:10px; font-size:16px; }
  .quiz-page--dense .option-check__box{ width:20px; height:20px; }

  /* Perceptuales */
  .perceptual__art{ max-width:260px; margin-top:var(--s3); }
  .options--perceptual{ margin-top:var(--s3); }
  .perceptual-audio-wrapper{ margin-top:var(--s3); }
  .perceptual-audio-skip{ margin-top:var(--s3); }

  /* Pausas */
  .interstitial__icon{ width:44px; height:44px; }
  .interstitial__figure{ margin:var(--s3) 0 var(--s4); }
  .interstitial__figure img{ height:180px; }
  .interstitial__rule{ margin:var(--s3) 0 var(--s2); }
  .interstitial--quiet .quiz-page__statement{ margin-top:var(--s4); }

  /* Nombre / email */
  .name-capture__form,.email-capture__form{ margin-top:var(--s5); }
  .name-capture__note,.email-capture__note{ margin-top:var(--s4); }

  /* Antes / después: cada tarjeta pasa a fila (imagen a la izquierda, lista a la derecha) */
  .before-after__title{ max-width:24ch; line-height:1.06; }
  .before-after__cards{ margin-top:var(--s4); gap:var(--s4); }
  .before-after__card{
    display:grid; grid-template-columns:104px 1fr; grid-template-areas:"img title" "img list";
    column-gap:var(--s3); align-items:center; text-align:left;
  }
  .before-after__img-wrap{ grid-area:img; max-width:none; }
  .before-after__img-wrap img{ height:120px; }
  .before-after__card-title{ grid-area:title; margin-top:0; align-self:end; }
  .before-after__list{ grid-area:list; margin-top:var(--s2); padding-top:var(--s2); max-width:none; gap:var(--s2); }
  .before-after__list li{ font-size:var(--t-micro); line-height:1.4; }
  .before-after__btn{ margin-top:var(--s4); }

  /* Paywall: los 3 niveles en una fila, el del medio con su etiqueta arriba */
  .paywall__title{ margin-top:var(--s2); }
  .paywall__lede{ margin-top:var(--s2); max-width:36ch; font-size:var(--t-micro); }
  .paywall__tiers{ flex-direction:row; align-items:stretch; gap:var(--s2); margin-top:var(--s4); }
  .paywall__tier{ flex:1 1 0; align-items:center; justify-content:flex-start; text-align:center; padding:14px 8px 12px; gap:4px; }
  .paywall__wound{ font-size:36px; line-height:1.04; max-width:none; padding:0 8px; }
  .paywall__tier-name{ font-size:22px; line-height:1.1; }
  .paywall__tier--featured{ flex:1.28 1 0; padding-top:18px; }
  .paywall__tier--featured .paywall__tier-name{ font-size:28px; }
  .paywall__tier-desc{ font-size:14px; line-height:1.35; }
  .paywall__tier-badge{ right:auto; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; padding:3px 8px; }
  .paywall__note{ margin-top:var(--s2); }
  .paywall__cta{ margin-top:var(--s4); min-height:56px; padding:16px 26px; }
  .paywall__secure{ margin-top:var(--s2); }
  .paywall__disclaimer{ margin-top:var(--s2); font-size:14px; line-height:1.4; }
}

/* Android dentro de FB (~640px de alto): la portada pierde el pie, las densas bajan a
   filas de 42px a 15px (7 opciones con etiquetas largas a 360px de ancho), antes/después
   con imagen de 88px. Todo lo necesario para responder sigue en pantalla. */
@media (max-width:599px) and (max-height:660px){
  .page[data-page="0"]{ padding-top:16px; }
  .hero img{ height:110px; }
  .lede{ font-size:17px; line-height:1.5; }
  .note{ font-size:14px; line-height:1.4; }
  .foot{ display:none; }
  .quiz-page--dense .options{ gap:5px; }
  .quiz-page--dense .option-check{ min-height:42px; padding:9px 10px; gap:8px; font-size:15px; }
  .quiz-page--dense .option-check__box{ width:18px; height:18px; }
  .quiz-page--dense .btn--next{ margin-top:14px; min-height:52px; padding:14px 24px; }
  .before-after__cards{ gap:14px; }
  .before-after__card{ grid-template-columns:88px 1fr; }
  .before-after__img-wrap img{ height:104px; }
  .before-after__list{ gap:6px; }
  .before-after__list li{ font-size:14px; line-height:1.35; }
  .before-after__btn{ margin-top:14px; min-height:52px; padding:14px 24px; }
}

/* iPhone SE dentro de IG (~560px de alto): el dibujo se va en todas las preguntas y las
   filas bajan a 44px. La portada pierde chips y nota; el paywall pierde el disclaimer. */
@media (max-width:599px) and (max-height:620px){
  .quiz-page__art{ display:none; }
  .hero img{ height:100px; }
  .chips,.note{ display:none; }
  .interstitial__figure img{ height:110px; }
  .option-btn,.option-check{ min-height:44px; padding:10px 14px; }
  .btn--next,.btn--continue,.btn--cta,.paywall__cta{ min-height:52px; padding:14px 24px; }
  .before-after__img-wrap img{ height:96px; }
  .paywall__disclaimer{ display:none; }
  .quiz-page--dense .options{ margin-top:8px; }
  .quiz-page--dense .btn--next{ margin-top:12px; }
}

/* ---------- 14. Páginas estáticas (/en/privacy · terms · refunds · reading): prosa a la izquierda ----------
   Las pide Lemon Squeezy para aprobar el store (condiciones, privacidad, reembolsos, qué se vende y a
   cuánto). Mismo sistema (tokens, Cormorant + Inter, fondo vela) sin motor: no hay .app ni .page. */
.doc{ position:relative; z-index:1; width:100%; max-width:640px; margin:0 auto; padding:40px var(--gutter) 72px; text-align:left; }
.doc__home{
  display:inline-block; font-family:var(--font-ui); font-size:var(--t-mark); font-weight:600;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--gold); text-decoration:none; line-height:1;
}
.doc__home:hover{ text-decoration:underline; text-underline-offset:6px; }
.doc__eyebrow{ margin-top:var(--s5); font-size:var(--t-micro); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); line-height:1; }
.doc__title{
  margin-top:var(--s4); font-family:var(--font-display); font-weight:600;
  font-size:var(--t-display); line-height:1.04; letter-spacing:-0.021em; color:var(--ink); text-wrap:balance;
}
.doc__eyebrow + .doc__title{ margin-top:var(--s3); }
.doc__meta{ margin-top:var(--s3); font-size:var(--t-meta); color:var(--ink-3); text-wrap:pretty; }
.doc__body{ margin-top:var(--s5); }
.doc__body h2{ margin-top:var(--s5); font-family:var(--font-display); font-weight:600; font-size:28px; line-height:1.15; letter-spacing:-0.012em; color:var(--ink); }
.doc__body p,.doc__body li{ margin-top:var(--s3); font-size:17px; line-height:1.6; color:var(--ink-2); text-wrap:pretty; }
.doc__body ul{ padding-left:20px; }
.doc__body a{ color:var(--gold); text-decoration:none; }
.doc__body a:hover{ text-decoration:underline; text-underline-offset:3px; }
.doc__body strong{ color:var(--ink); font-weight:600; }
.doc__figure{
  margin:0 0 var(--s4); max-width:420px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 46%, #000 30%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(62% 58% at 50% 46%, #000 30%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0) 96%);
}
.doc__figure img{ display:block; width:100%; height:220px; object-fit:cover; object-position:50% 44%; }
.doc__price{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.doc__price span{
  padding:10px 18px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); font-size:var(--t-lede); font-weight:600; line-height:1;
}
.doc__price span.is-featured{ border-color:var(--gold); background:var(--surface-2); }
.doc__cta{ margin-top:var(--s5); }
.doc .cta{ width:auto; }
.doc__foot{ margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line); font-size:var(--t-micro); color:var(--ink-3); line-height:1.8; }
.doc__foot a{ color:inherit; text-decoration:none; }
.doc__foot a:hover{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.doc__foot span{ opacity:0.5; padding:0 6px; }