/* NeuroMaestra · base.css (reset + componentes)
   Va después de tokens.css. Sin dependencias externas.
   Reglas: esquinas rectas, sin sombras, sin degradados, sin líneas finas, sin vidrio.
   Amarillo = precio · verde = empezar o pagar · azul = lo que hay adentro · azul marino = la sala.
   Índice: 1 base · 2 capítulos · 3 letras · 4 botones · 5 barra · 6 menú · 7 héroe y cerebro
           8 qué hay adentro · 9 ejercicio de prueba · 10 precios · 11 video · 12 preguntas
           13 pie · 14 páginas de texto · 15 movimiento */

/* ── 1. Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + var(--space-2));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font: var(--weight-text) var(--fs-body) / var(--lh-text) var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: var(--weight-bold); }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
::selection { background: var(--selection-bg); color: var(--selection-ink); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-2); top: -80px; z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4);
  background: var(--paper); color: var(--ink);
  font: var(--weight-bold) var(--fs-body) / 1 var(--font-head); text-decoration: none;
}
.skip:focus { top: var(--space-2); }

/* ── 2. Capítulos de color y rejilla ─────────────────────── */
/* Cada sección es un campo de color de borde a borde. El color dice qué hay:
   --sala (azul marino) · --deep (más oscuro: cerebro, video) · --azul (adentro)
   --precio (amarillo) · --tono (azul marino 2: preguntas) · --papel (pie) */
.field { position: relative; background: var(--field-bg, var(--bg)); color: var(--field-ink, var(--text)); }
.field--sala  { --field-bg: var(--navy-900); --field-ink: var(--paper); --focus: var(--sky-400); --quiet-bg: var(--navy-800); --quiet-ink: var(--paper); --quiet-hover: var(--navy-700); --soft: var(--paper-soft); }
.field--deep  { --field-bg: var(--navy-950); --field-ink: var(--paper); --focus: var(--sky-400); --quiet-bg: var(--navy-800); --quiet-ink: var(--paper); --quiet-hover: var(--navy-700); --soft: var(--paper-soft); }
.field--tono  { --field-bg: var(--navy-800); --field-ink: var(--paper); --focus: var(--sky-400); --quiet-bg: var(--navy-700); --quiet-ink: var(--paper); --quiet-hover: var(--navy-900); --soft: var(--paper-soft); }
.field--azul  { --field-bg: var(--blue-700); --field-ink: var(--paper); --focus: var(--paper); --quiet-bg: var(--blue-800); --quiet-ink: var(--paper); --quiet-hover: var(--navy-800); --soft: var(--paper); }
.field--precio { --field-bg: var(--amber-400); --field-ink: var(--ink); --focus: var(--ink); --quiet-bg: var(--ink); --quiet-ink: var(--paper); --quiet-hover: var(--navy-800); --soft: var(--ink); }
.field--papel { --field-bg: var(--paper); --field-ink: var(--ink); --focus: var(--blue-600); --quiet-bg: var(--paper-2); --quiet-ink: var(--ink); --quiet-hover: #d3dcef; --soft: var(--ink-soft); }

.wrap { width: min(100% - 2 * var(--m), var(--page-max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.section { padding-block: var(--section); }

/* ── 3. Letras ───────────────────────────────────────────── */
.display { font: var(--weight-head) var(--fs-display) / var(--lh-display) var(--font-head); letter-spacing: var(--track-display); }
.h2 { font: var(--weight-head) var(--fs-h2) / var(--lh-heading) var(--font-head); letter-spacing: var(--track-heading); }
.lead { font-size: var(--fs-lead); line-height: 1.35; }
.h3 { font: var(--weight-bold) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.small { font-size: var(--fs-small); line-height: 1.45; }
.soft { color: var(--soft, var(--text-soft)); }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: var(--measure); }
.nowrap { white-space: nowrap; }

/* ── 4. Botones y enlaces ────────────────────────────────── */
/* Un solo tipo de botón, recto y plano. Verde SOLO para «Empieza gratis» y «Pagar».
   Lo demás («Ver precios», «Ver video», «Siguiente») es tranquilo: un paso de tono del capítulo. */
.btn {
  --btn-bg: var(--quiet-bg, var(--navy-800));
  --btn-ink: var(--quiet-ink, var(--paper));
  --btn-hover: var(--quiet-hover, var(--navy-700));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-ink);
  font: var(--weight-bold) var(--fs-body) / 1.1 var(--font-head);
  text-align: center; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--btn-hover); } }
.btn--go { --btn-bg: var(--go); --btn-ink: var(--on-color); --btn-hover: var(--go-hover); }
.btn--quiet { --btn-bg: var(--quiet-bg, var(--navy-800)); --btn-ink: var(--quiet-ink, var(--paper)); --btn-hover: var(--quiet-hover, var(--navy-700)); }
.btn--price { --btn-bg: var(--price); --btn-ink: var(--on-color); --btn-hover: var(--price-hover); }
.btn--lg { min-height: var(--control-lg); padding: 0 var(--space-6); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.link {
  color: inherit; font-weight: var(--weight-bold);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.28em;
  text-decoration-color: currentColor;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}
.field--sala .link, .field--deep .link, .field--tono .link { text-decoration-color: var(--sky-400); }
@media (hover: hover) and (pointer: fine) { .field--sala .link:hover, .field--deep .link:hover, .field--tono .link:hover { color: var(--sky-400); } }
/* Enlace que se toca con el dedo: zona de 48 px aunque se vea como texto */
.link--tap { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── 5. Barra (fija arriba) ──────────────────────────────── */
/* Logo · Juegos · Fichas · Preguntas · [Precios en amarillo] · Ingresar · [Empieza gratis]
   «Precios» se ve SIEMPRE, en todos los anchos. En el celular: ícono · Precios · Empieza gratis · Menú. */
.bar {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; align-items: stretch; height: var(--bar);
  background: var(--navy-900); color: var(--paper);
}
.bar a { text-decoration: none; }
.bar__logo {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5) 0 var(--m);
  font: var(--weight-bold) var(--fs-body) / 1 var(--font-head); letter-spacing: -0.02em; white-space: nowrap;
}
.logo__icon { width: 30px; height: 30px; flex: none; color: var(--sky-400); }
/* Desde 2026-10-25 el ícono es la constelación de neuronas (assets/brand/cerebro.svg, un <img>): un poco más grande para que se lean las estrellas */
img.logo__icon { width: 36px; height: 36px; display: block; }
.logo__maestra { color: inherit; } /* logo C3 (2026-10-25): el nombre va en un solo color, como en la lámina elegida */
.bar__nav { display: flex; align-items: stretch; }
.bar__link {
  display: inline-flex; align-items: center; padding: 0 var(--space-4);
  font: var(--weight-head) var(--fs-body) / 1 var(--font-head); color: var(--paper);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.35em;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .bar__link:hover { text-decoration-color: var(--sky-400); } }
.bar__link[aria-current="true"] { text-decoration-color: var(--paper); }
.bar__price {
  display: inline-flex; align-items: center; padding: 0 var(--space-5);
  background: var(--price); color: var(--on-color);
  font: var(--weight-bold) var(--fs-body) / 1 var(--font-head);
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .bar__price:hover { background: var(--price-hover); } }
.bar__price:focus-visible { outline-color: var(--paper); outline-offset: -6px; }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); padding-right: var(--m); }
.bar__end > .bar__link { align-self: stretch; } /* «Ingresar» ocupa los 64 px de alto: fácil de tocar */
.bar__go { min-height: 44px; padding: 0 var(--space-5); }
.bar__menu {
  display: none; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: var(--tap); height: 100%; padding: 0 var(--space-3);
  border: 0; background: none; color: var(--paper);
  font: var(--weight-head) var(--fs-body) / 1 var(--font-head);
}
.bar__menu svg { width: 24px; height: 24px; }
/* Aviso de referido (lo enciende nm.js): va pegado bajo la barra, en amarillo porque habla de precio */
.ref-banner {
  margin: 0; padding: var(--space-3) var(--m);
  background: var(--price); color: var(--on-color);
  font: var(--weight-bold) var(--fs-small) / 1.35 var(--font-text);
}

@media (max-width: 1080px) {
  .bar__logo { padding-right: var(--space-4); }
  .bar__link { padding: 0 var(--space-3); }
  .bar__price { padding: 0 var(--space-4); }
}
@media (max-width: 960px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; }
  .bar__end { padding-right: 0; gap: 0; }
  .bar__go { margin-right: var(--space-2); }
}
@media (max-width: 600px) {
  .bar__in { display: none; }
  .logo__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bar__logo { padding: 0 var(--space-2) 0 var(--m); min-width: var(--tap); }
  .bar__price { padding: 0 var(--space-3); font-size: var(--fs-small); }
  .bar__go { min-height: 44px; padding: 0 var(--space-3); font-size: var(--fs-small); margin-right: 0; }
  .bar__menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 370px) {
  .bar__logo { padding-left: var(--space-3); }
  .logo__icon { width: 26px; height: 26px; }
  .bar__price { padding: 0 var(--space-2); }
  .bar__go { padding: 0 10px; }
  .bar__menu { min-width: 44px; padding: 0 var(--space-2); }
}

/* ── 6. Menú del celular (<dialog> con showModal) ────────── */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--navy-800); color: var(--paper);
  overscroll-behavior: contain;
}
.menu::backdrop { background: rgb(var(--scrim-rgb) / 0.7); }
.menu[open] { display: flex; flex-direction: column; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding-left: var(--m); }
.menu__close {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 100%; min-width: var(--tap); padding: 0 var(--m);
  border: 0; background: none; color: var(--paper);
  font: var(--weight-head) var(--fs-body) / 1 var(--font-head);
}
.menu__list { display: grid; gap: var(--space-1); padding: var(--space-4) var(--m); overflow-y: auto; }
.menu__link {
  display: flex; align-items: center; min-height: 60px;
  font: var(--weight-head) var(--fs-lead) / 1.15 var(--font-head); text-decoration: none;
}
.menu__price { padding: 0 var(--space-4); margin-inline: calc(-1 * var(--space-4)); background: var(--price); color: var(--on-color); font-weight: var(--weight-bold); }
.menu__go { margin-top: var(--space-4); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in var(--t-dialog) var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html:has(.menu[open]), html:has(.player[open]) { overflow: hidden; }

/* ── 7. Héroe y cerebro 3D ───────────────────────────────── */
/* Mosaico de 3 losetas: el cerebro (la única luz), el precio (amarillo) y las cifras (azul). */
.mosaic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr; height: clamp(380px, 58svh, 640px); overflow: hidden;
}
.tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.tile--brain { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--navy-950); }
.tile--price {
  grid-column: 9 / 13; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-5); background: var(--price); color: var(--on-color); text-decoration: none;
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .tile--price:hover { background: var(--price-hover); } }
.tile--price:focus-visible { outline-color: var(--ink); outline-offset: -6px; }
.tile__big { font: var(--weight-bold) var(--fs-lead) / 1.15 var(--font-head); letter-spacing: var(--track-snug); }
.tile__line { font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); }
.tile__go { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--weight-bold) var(--fs-body) / 1 var(--font-head); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.28em; }
.tile--count {
  grid-column: 9 / 13; grid-row: 2;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  padding: var(--space-5); background: var(--blue-600); color: var(--paper);
}
.tile--count p { font: var(--weight-head) var(--fs-lead) / 1.2 var(--font-head); letter-spacing: var(--track-snug); }

.hero__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; padding: var(--space-7) var(--m) var(--space-8); }
.hero__title { grid-column: 1 / 8; font: var(--weight-head) var(--fs-display) / var(--lh-display) var(--font-head); letter-spacing: var(--track-display); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; }
.hero__title .line > span { display: block; }
.hero__side { grid-column: 8 / 13; display: grid; gap: var(--space-5); padding-top: var(--space-2); }
.hero__lede { font-size: var(--fs-lead); line-height: 1.35; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__note { font-size: var(--fs-small); color: var(--soft, var(--text-soft)); max-width: 40ch; }

/* El cerebro: primero una imagen fija (se ve al instante), después el 3D real (three.js r128) encima. */
.brain {
  position: absolute; inset: 0; touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.brain:active { cursor: grabbing; }
.brain:focus-visible { outline-offset: -6px; }
.brain__still, .brain__gl { position: absolute; inset: 4% 8% 9%; }
.brain__still { width: 84%; height: 87%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.brain__gl canvas { width: 100% !important; height: 100% !important; }
.brain.is-3d .brain__still { opacity: 0; transition: opacity 600ms ease; }
.brain__hint {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  margin: 0; padding: var(--space-2) var(--space-3);
  font: var(--weight-head) var(--fs-small) / 1 var(--font-head); color: var(--paper-soft); white-space: nowrap;
  pointer-events: none; transition: opacity 400ms ease;
}
.brain.is-used .brain__hint { opacity: 0; }

@media (max-width: 900px) {
  .hero__body { grid-template-columns: 1fr; row-gap: var(--space-5); padding-top: var(--space-6); }
  .hero__title, .hero__side { grid-column: 1; }
  .hero__lede { max-width: 34ch; }
}
@media (max-width: 720px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: clamp(220px, 30svh, 300px) auto; height: auto; }
  .tile--brain { grid-column: 1 / 3; grid-row: 1; }
  .tile--price { grid-column: 1; grid-row: 2; justify-content: flex-start; padding: var(--space-4); }
  .tile--count { grid-column: 2; grid-row: 2; padding: var(--space-4); }
  .tile__big { font-size: var(--fs-body); }
  .tile__line { font-size: var(--fs-small); }
  .tile__go { display: none; } /* en el celular toda la loseta es el enlace; «Ver precios» está como botón debajo */
  .brain__still, .brain__gl { inset: 4% 6% 14%; }
  .brain__still { width: 88%; height: 82%; }
  /* 64 px entre el mosaico y el título: así ningún texto chico de las losetas queda pegado encima del h1 */
  .hero__body { padding: var(--space-8) var(--m) var(--space-7); }
  .hero__actions .btn { width: 100%; min-height: var(--control-lg); }
}

/* ── 8. Qué hay adentro (capítulo azul) ──────────────────── */
/* Índice a la izquierda (151 juegos / 134 fichas / 20 pruebas / Progreso) y escenario a la derecha,
   que llega hasta el borde. Cabe en UNA pantalla. */
.inside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-left: var(--m); }
.inside__index { grid-column: 1 / 6; display: grid; align-content: start; gap: var(--space-6); padding: var(--section) var(--space-5) var(--section) 0; }
.tabs { display: grid; gap: 0; }
.tab {
  display: flex; align-items: center; justify-content: flex-start; min-height: var(--tap);
  padding: var(--space-1) 0; border: 0; background: none; color: var(--paper); text-align: left;
  font: var(--weight-head) var(--fs-h2) / 1.08 var(--font-head); letter-spacing: var(--track-heading);
  text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.tab[aria-selected="true"] { font-weight: var(--weight-bold); text-decoration-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .tab:not([aria-selected="true"]):hover { text-decoration-color: rgb(243 246 252 / 0.5); } }
.tab:active { transform: translateX(4px); }
.desc { display: grid; gap: var(--space-3); max-width: 40ch; }
.desc__title { font: var(--weight-bold) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.desc__list { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--blue-800); font: var(--weight-head) var(--fs-body) / 1.4 var(--font-head); }
.inside__note { font-size: var(--fs-small); max-width: 44ch; }
.stage { grid-column: 6 / 13; position: relative; display: grid; align-content: center; min-height: clamp(560px, 86svh, 820px); background: var(--blue-800); overflow: hidden; }
.screen { position: absolute; top: var(--space-8); left: var(--space-8); width: var(--w, 88%); margin: 0; transition: opacity var(--t-ui) ease, visibility var(--t-ui); }
.screen img { width: 100%; height: auto; }
.screen[data-off] { opacity: 0; visibility: hidden; }
.screen--quiz { position: relative; top: auto; left: auto; width: auto; margin: var(--space-8); max-width: 640px; }

@media (max-width: 900px) {
  .inside { grid-template-columns: 1fr; padding: 0; }
  .inside__index { grid-column: 1; padding: var(--space-8) var(--m) var(--space-7); gap: var(--space-5); }
  .tabs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .tab { font-size: var(--fs-lead); }
  .stage { grid-column: 1; min-height: clamp(420px, 70svh, 640px); align-content: start; }
  .screen { top: var(--space-6); left: var(--m); width: var(--w-sm, 120%); }
  .screen--quiz { margin: var(--space-6) var(--m); width: auto; }
}

/* ── 9. Ejercicio de prueba «Pruébalo aquí» (fragmento real de la app) ── */
/* Va marcado con data-ui: imita la pantalla del juego, por eso tiene sus propias esquinas redondeadas. */
.quiz[data-ui] {
  display: grid; gap: var(--space-4); padding: var(--space-6);
  background: var(--paper); color: var(--ink); border-radius: var(--radius-ui);
  --focus: var(--blue-600);
}
.quiz__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.quiz__title { font: var(--weight-bold) var(--fs-lead) / 1.2 var(--font-head); }
.quiz__lv { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: 999px; background: var(--paper-2); font: var(--weight-bold) var(--fs-small) / 1 var(--font-head); }
.quiz__q { font: var(--weight-head) var(--fs-body) / 1.4 var(--font-head); }
.quiz__words { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quiz__word {
  min-height: var(--control-lg); padding: 0 var(--space-5);
  border: 0; border-radius: 12px; background: var(--paper-2); color: var(--ink);
  font: var(--weight-bold) var(--fs-lead) / 1 var(--font-head);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), opacity var(--t-ui) ease;
}
.quiz__word:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .quiz__word:hover { background: #d3dcef; } }
.quiz__word.is-ok { background: var(--go); color: var(--ink); }
.quiz__word.is-bad { background: var(--paper); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 3px; }
.quiz__word.is-dim { opacity: 0.45; }
.quiz__say { min-height: 3em; font-size: var(--fs-body); }
.quiz__say .bad { color: var(--bad); font-weight: var(--weight-bold); }
.quiz__next { --quiet-bg: var(--ink); --quiet-ink: var(--paper); --quiet-hover: var(--navy-800); justify-self: start; border-radius: 12px; }
.quiz__path { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); }
.quiz__path li {
  display: grid; place-items: center; height: 36px; border-radius: 8px;
  background: var(--paper-2); color: var(--ink-soft);
  font: var(--weight-bold) var(--fs-small) / 1 var(--font-head);
}
.quiz__path li.is-done { background: #bfe9d4; color: var(--ink); }
.quiz__path li.is-on { background: var(--go); color: var(--ink); }
.quiz__end { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 720px) {
  .quiz[data-ui] { padding: var(--space-5); }
  .quiz__word { padding: 0 var(--space-4); }
  .quiz__path li { height: 32px; }
}

/* ── 10. Precios y cómo pagar (capítulo amarillo) ────────── */
/* 3 losetas en escalera (Gratis < Mensual < Anual). Alturas MÍNIMAS en rem (crecen con el texto:
   nada se tapa con espaciado de texto WCAG 1.4.12). Sin position:absolute. */
.pricing__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-5); margin-bottom: var(--space-7); }
.pricing__title { grid-column: 1 / 7; }
.steps { grid-column: 1 / 7; display: grid; gap: var(--space-2); padding-left: 1.6em; list-style: decimal; font-size: var(--fs-body); }
.steps li { padding-left: var(--space-1); }
.steps li::marker { font: var(--weight-bold) var(--fs-body) / 1 var(--font-head); }
.pricing__help { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; display: grid; gap: var(--space-2); font-size: var(--fs-body); }
.pricing__help strong { font-family: var(--font-head); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: end; }
.plan { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-6) 0; }
.plan--free  { min-height: 24rem; background: var(--navy-800); color: var(--paper); --focus: var(--paper); }
.plan--month { min-height: 30rem; background: var(--blue-700); color: var(--paper); --focus: var(--paper); }
.plan--year  { min-height: 36rem; background: var(--paper); color: var(--ink); --focus: var(--ink); }
.plan__name { font: var(--weight-bold) var(--fs-lead) / 1.2 var(--font-head); letter-spacing: var(--track-snug); }
.plan__price { font: var(--weight-bold) var(--fs-h2) / 1 var(--font-head); letter-spacing: var(--track-heading); }
.plan__per { font: var(--weight-head) var(--fs-body) / 1 var(--font-head); letter-spacing: 0; }
.plan__month { font: var(--weight-bold) var(--fs-body) / 1.35 var(--font-head); }
.plan__list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-6); font-size: var(--fs-body); line-height: 1.4; }
.plan__pay {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--pay-bar); margin: auto calc(-1 * var(--space-6)) 0; padding: var(--space-3) var(--space-6);
  background: var(--go); color: var(--on-color); text-decoration: none;
  font: var(--weight-bold) var(--fs-lead) / 1.1 var(--font-head);
  transition: background-color var(--t-hover) ease;
}
.plan__pay::after {
  content: ""; width: 28px; height: 28px; flex: none; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .plan__pay:hover { background: var(--go-hover); } .plan__pay:hover::after { transform: translateX(4px); } }
.plan__pay:active { background: var(--go-hover); }
.plan__pay:focus-visible { outline-color: var(--ink); outline-offset: -6px; }
.pricing__fine { margin-top: var(--space-5); font-size: var(--fs-body); max-width: var(--measure); }
@media (max-width: 900px) {
  .pricing__title, .steps, .pricing__help { grid-column: 1 / -1; grid-row: auto; }
  .plans { grid-template-columns: 1fr; }
  .plan--free, .plan--month, .plan--year { min-height: 0; }
  .plan { padding: var(--space-5) var(--space-5) 0; }
  .plan__pay { margin-inline: calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); }
}

/* ── 11. Video (sala de cine) ────────────────────────────── */
/* Escena oscura: tarjeta a la izquierda, póster grande a la derecha. Nada encima de nada.
   Sin video en bucle de fondo. El video con sonido solo se descarga al tocar (preload="none"). */
.show__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-6); align-items: center; }
.show__card { grid-column: 1 / 5; display: grid; gap: var(--space-4); }
.show__poster {
  grid-column: 5 / 13; position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--navy-950); aspect-ratio: 16 / 9; overflow: hidden;
}
.show__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .show__poster:hover img { transform: scale(1.02); } }
.show__play {
  position: absolute; left: var(--space-5); bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-5);
  background: var(--paper); color: var(--ink); font: var(--weight-bold) var(--fs-body) / 1 var(--font-head);
}
.show__play svg { width: 20px; height: 20px; }
.player { width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; background: #000; color: var(--paper); }
.player::backdrop { background: rgb(var(--scrim-rgb) / 0.88); }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player__close {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: var(--z-raised);
  min-height: var(--tap); padding: 0 var(--space-4); border: 0;
  background: var(--paper); color: var(--ink); font: var(--weight-bold) var(--fs-body) / 1 var(--font-head);
}
@media (max-width: 900px) {
  .show__card, .show__poster { grid-column: 1 / -1; }
}

/* ── 12. Preguntas frecuentes (todas abiertas) ───────────── */
/* La respuesta va PEGADA a su pregunta (debajo), máximo 65 caracteres por línea. Sin acordeón. */
.faq__title { margin-bottom: var(--space-7); }
.faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
.qa { display: grid; gap: var(--space-2); max-width: var(--measure); }
.qa__q { font: var(--weight-bold) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.qa__a { font-size: var(--fs-body); }
@media (max-width: 900px) { .faq__list { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ── 13. Pie («se prenden las luces») ────────────────────── */
.foot { padding: var(--section) var(--m) var(--space-6); }
.foot__close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-5); align-items: end; }
.foot__say { grid-column: 1 / 8; font: var(--weight-head) var(--fs-lead) / 1.25 var(--font-head); letter-spacing: var(--track-snug); max-width: 26ch; }
.foot__actions { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-start; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-5); margin-top: var(--space-8); }
.foot__links { display: grid; gap: 0; align-content: start; }
.foot__links a, .foot__links span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--fs-body); }
.foot__links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.foot__links svg { width: 22px; height: 22px; flex: none; }
.foot__about { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-2); font-size: var(--fs-body); }
.foot__name { margin-top: var(--space-8); font: var(--weight-head) var(--fs-display) / 0.9 var(--font-head); letter-spacing: var(--track-display); white-space: nowrap; }
@media (max-width: 900px) {
  .foot__say, .foot__actions { grid-column: 1 / -1; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .foot__actions .btn { width: 100%; min-height: var(--control-lg); }
  .foot__cols { grid-template-columns: 1fr; }
}

/* ── 14. Páginas de texto (términos, privacidad, libro, páginas SEO) ── */
.prose { max-width: var(--measure); font-size: var(--fs-body); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font: var(--weight-head) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.prose h3 { margin-top: var(--space-6); font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); }
.prose ul, .prose ol { display: grid; gap: var(--space-2); padding-left: 1.4em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--sky-400); }
.field--papel .prose li::marker { color: var(--blue-600); }
.prose a { font-weight: var(--weight-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* ── 15. Movimiento ──────────────────────────────────────── */
/* Solo transform y opacity. Títulos y precios NUNCA se esconden al bajar: solo se animan imágenes.
   El héroe entra al cargar (sin esperar al scroll). Sin JS, todo se ve quieto. */
@media (prefers-reduced-motion: no-preference) {
  .js .brain__still { animation: from-black var(--t-scene) var(--ease-film) 150ms both; }
  /* Cuando llega el 3D, la imagen fija se va (antes la animación de entrada la dejaba visible detrás del 3D) */
  .brain.is-3d .brain__still { animation: still-out 600ms ease 700ms both; }
  .js .hero__title .line > span { transform: translateY(105%); animation: line-up var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
  .js .rise { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 500ms); }
  .js .tile--price, .js .tile--count { animation: tile-in 900ms var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
  .js .reveal-img { opacity: 0; transform: translateY(24px) scale(1.02); transition: opacity 700ms var(--ease-out), transform var(--t-reveal) var(--ease-out); }
  .js .reveal-img.is-in { opacity: 1; transform: none; }
  .js .stage.is-in .screen:not([data-off]) img { animation: settle 1100ms var(--ease-soft) both; }
  /* .lift: la parte sube a su lugar al entrar en pantalla, SIN volverse invisible (opacidad siempre 1).
     Así los títulos y los precios se leen aunque el observador no se dispare. Escalonar con --i. */
  .js .lift { transform: translateY(var(--lift, 40px)); transition: transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js .lift.is-in { transform: none; }
  .js .plan.lift { --lift: 72px; }
  .quiz__words.is-in .quiz__word { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 60ms); }
}
@keyframes still-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes from-black { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tile-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0.4; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* «Reducir movimiento»: se apaga todo de una vez (el cerebro queda quieto pero se puede arrastrar; eso lo hace el JS). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}