/* NeuroMaestra · site.css (lo propio de la portada y de las páginas pg-*)
   Va después de tokens.css y base.css. Solo var(--token): sin colores ni tamaños nuevos.
   Índice: 1 utilidades · 2 héroe sin esperar al JS · 3 cerebro 3D · 4 menú sin JS · 5 video
           6 ejercicio, precios y preguntas · 7 páginas generadas (pg-*) · 8 movimiento */

/* ── 1. Utilidades ───────────────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.btn--light { --btn-bg: var(--quiet-bg, var(--navy-800)); --btn-ink: var(--quiet-ink, var(--paper)); --btn-hover: var(--quiet-hover, var(--navy-700)); }
.menu__logo { padding: 0; }
/* Al ir a una parte desde el menú, el foco pasa a la sección (tabindex="-1"): sin marco alrededor de toda la parte */
main > section[tabindex="-1"]:focus { outline: none; }
/* Con sesión guardada «Ingresar» dice «Ir a mis juegos»: en la barra mediana no debe empujar a «Empieza gratis» */
@media (max-width: 1080px) and (min-width: 601px) { .nm-in .bar__in { padding: 0 var(--space-2); } }
/* 601–720 px (tablet chica, celular acostado): logo + Precios + Ingresar + Empieza gratis + Menú no entraban (sin sesión
   se salían hasta 90 px y «Menú» quedaba cortado). «Ingresar» sigue en el menú, igual que en el celular. */
@media (max-width: 720px) and (min-width: 601px) { .bar__in { display: none; } }
/* «Evidencia» en la barra solo cuando entra (961–1279 px con sesión «Ir a mis juegos» empujaba todo y daba scroll de costado);
   en anchos menores sigue en el menú y en el pie */
@media (max-width: 1279px) { .bar__link--evid { display: none; } }
/* Teléfonos de 320 px: ícono + Precios + Empieza gratis + menú se pasaban 1 px (scroll de costado) */
@media (max-width: 340px) { .bar__go { padding: 0 var(--space-2); } }
/* Al saltar a una parte (Precios, Preguntas) su título queda justo bajo la barra, sin la banda vacía de arriba */
.section[id] { scroll-margin-top: calc(var(--space-5) - var(--section)); }
/* Toques: sin espera de doble toque; estado al pasar el mouse también en los enlaces del pie y del amarillo */
a, button { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { color: var(--blue-600); text-decoration-color: var(--blue-600); }
  .field--precio .link:hover { text-decoration-thickness: 5px; }
}

/* ── 2. Héroe: entra al cargar, sin esperar a landing.js ──── */
/* base.css lo ata a .js; aquí va igual pero sin .js, para que el primer pintado ya sea la entrada
   (landing.js va con defer). Mismos valores: cuando llega .js la animación no se reinicia. */
@media (prefers-reduced-motion: no-preference) {
  .brain__still { animation: from-black var(--t-scene) var(--ease-film) 150ms both; }
  .brain.is-3d .brain__still { animation: still-out 600ms ease 700ms both; }
  .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); }
  .rise { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 500ms); }
  .tile--price, .tile--count { animation: tile-in 900ms var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
}

/* ── 3. Cerebro 3D ───────────────────────────────────────── */
/* El aviso «Desliza para girar» solo tiene sentido cuando el 3D ya se puede arrastrar. */
.brain:not(.is-3d) .brain__hint { opacity: 0; }
.brain:not(.is-3d) { cursor: default; }
.brain__gl { pointer-events: none; }
.brain.is-3d .brain__gl { pointer-events: auto; }
.brain__gl canvas { display: block; touch-action: pan-y; }
.brain:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: -6px; }
/* Pausa del vaivén (lo pone landing.js cuando el 3D ya está): el movimiento dura más de 5 s, se tiene que poder parar */
.brain__pause {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: var(--z-raised);
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  border: 0; background: var(--navy-800); color: var(--paper-soft);
  -webkit-tap-highlight-color: transparent;
}
.brain__pause svg { width: 20px; height: 20px; }
.brain__pause .i-on, .brain__pause[aria-pressed="true"] .i-off { display: none; }
.brain__pause[aria-pressed="true"] .i-on { display: block; }
.brain__pause:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .brain__pause:hover { background: var(--navy-700); color: var(--paper); } }

/* ── 4. Menú del celular sin JS (popover) ────────────────── */
/* Con landing.js el menú se abre con showModal(). En las páginas que no cargan landing.js
   (términos, páginas SEO) el botón abre el mismo <dialog> como popover: también se cierra con Esc. */
.menu:popover-open { display: flex; flex-direction: column; }
html:has(.menu:popover-open) { overflow: hidden; }

/* ── 5. Video ────────────────────────────────────────────── */
/* Si todavía no está la portada del video, landing.js pone una pantalla real de un juego (no un cuadro roto). */
.show__poster:focus-visible { outline-offset: -6px; }
.player { overscroll-behavior: contain; }
.player__msg { padding: var(--space-5); font: var(--weight-head) var(--fs-body) / 1.4 var(--font-head); }
.player__close:focus-visible { outline-color: var(--sky-400); }

/* ── 6. Ejercicio «Pruébalo aquí» ────────────────────────── */
.quiz__fine { color: var(--ink-soft); }
.quiz__word[aria-disabled="true"] { cursor: default; }
.quiz__end .btn { border-radius: 12px; }
.quiz__q { text-wrap: balance; }
/* Sin respuesta todavía, el mensaje no guarda 3 líneas vacías (se veía una banda vacía en medio de la tarjeta) */
.js .quiz__say:empty { min-height: 0; }
/* Celular: el camino de 12 niveles en 2 filas de 6 (en una fila «10 11 12» quedaban pegados) */
@media (max-width: 480px) { .quiz__path { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Debajo del ejercicio, dos pantallas reales de juegos (tablero recortado de la captura: sin barras ni palabras cortadas) */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin-top: var(--space-5); }
.shot { margin: 0; display: grid; align-content: start; gap: var(--space-2); }
.shot img { width: 100%; height: auto; background: var(--paper-2); }
.shot figcaption { font: var(--weight-head) var(--fs-small) / 1.3 var(--font-head); color: var(--paper); }
/* Celular y tablet: aire bajo las pantallas antes del amarillo (si no, el pie de foto parece una etiqueta de «Precios»).
   Y el ejercicio sin el corrimiento de .screen (left/top de base.css ≤ 900 px): se salía 16 px por la derecha y 24 px por abajo. */
@media (max-width: 900px) {
  .shots { margin-bottom: var(--space-7); }
  .screen--quiz { left: auto; top: auto; max-width: none; }   /* tablet: a todo el ancho (con 640 px quedaba una banda vacía a la derecha) */
}
/* ── Precios: los 3 precios primero, «Cómo pagar» debajo ── */
/* Compu: el título va en el hueco de la escalera (encima de Gratis y Mensual) y el Anual sube hasta el título.
   Así, al tocar «Precios», los 3 precios y sus barras «Pagar» entran en una pantalla de laptop. */
.pricing__how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-4); margin-top: var(--space-7); }
.pricing__how-t { grid-column: 1 / 8; font: var(--weight-bold) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
@media (min-width: 901px) {
  .pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2); }
  .pricing > .plans { display: contents; }
  .pricing > .pricing__title { grid-column: 1 / 3; grid-row: 1; align-self: start; padding-bottom: var(--space-6); }
  .pricing .plan--free { grid-column: 1; grid-row: 2; align-self: end; }
  .pricing .plan--month { grid-column: 2; grid-row: 2; align-self: end; }
  .pricing .plan--year { grid-column: 3; grid-row: 1 / 3; }
  .pricing > .pricing__how { grid-column: 1 / -1; grid-row: 3; }
  .pricing__how .steps { grid-column: 1 / 8; grid-row: 2; }
  .pricing__how .pricing__help { grid-column: 8 / 13; grid-row: 2; align-self: start; }
}
/* 901–1100 px: «Empieza gratis →» se partía en 2 líneas y su barra verde quedaba más alta que las otras dos */
@media (min-width: 901px) and (max-width: 1100px) { .pricing .plan__pay { font-size: var(--fs-body); } }
@media (max-width: 900px) {
  .pricing > .pricing__title { margin-bottom: var(--space-6); }
  .pricing__how-t { grid-column: 1 / -1; }
}
/* Tablet: cada plan a lo ancho, con el precio a la izquierda y lo que incluye a la derecha (antes: texto en el 40 % y el resto vacío) */
@media (min-width: 601px) and (max-width: 900px) {
  .pricing .plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: var(--space-6); align-content: start; }
  .pricing .plan > :not(.plan__list):not(.plan__pay) { grid-column: 1; }
  .pricing .plan__list { grid-column: 2; grid-row: 1 / 5; margin: 0 0 var(--space-5); }
  .pricing .plan__pay { grid-column: 1 / -1; grid-row: 5; margin-top: var(--space-2); }
}

/* Preguntas: la respuesta pegada a su pregunta (sin estirarse al alto de la fila vecina) */
.qa { align-content: start; }
/* Compu: menos banda vacía al pie de «Qué hay adentro» (el escenario sigue llegando al borde) */
@media (min-width: 901px) { .inside__index { padding-bottom: var(--space-8); } }
/* En la compu el ejercicio es «lo único iluminado» del escenario azul: más grande, no una tarjetita perdida */
@media (min-width: 1200px) {
  .screen--quiz { max-width: 760px; margin: var(--space-8) var(--space-8); }
  .quiz[data-ui] { gap: var(--space-5); padding: var(--space-7); }
  .quiz__q { font-size: var(--fs-lead); line-height: 1.3; }
  .quiz__words { gap: var(--space-4); }
  .quiz__path li { height: 44px; }
}

/* ── 6b. «Hecha para rehabilitar» (2026-10-24): texto a la izquierda con viñetas de luz, pantalla real a la derecha ── */
.rehab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-6); align-items: start; }
.rehab__text { grid-column: 1 / 8; display: grid; gap: var(--space-5); }
.rehab__lead { font-size: var(--fs-lead); line-height: 1.35; max-width: 36ch; }
.rehab__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); max-width: var(--measure); }
.rehab__list li { position: relative; padding-left: var(--space-5); }
.rehab__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--sky-400); }
.rehab__list strong { font-family: var(--font-head); font-weight: var(--weight-bold); }
.rehab__note { font-size: var(--fs-small); color: var(--paper-soft); max-width: var(--measure); }
.rehab__fig { grid-column: 8 / 13; margin: 0; background: var(--navy-950); }
.rehab__fig img { width: 100%; height: auto; display: block; }
.rehab__fig figcaption { padding-top: var(--space-2); font-size: var(--fs-small); color: var(--paper-soft); }
@media (max-width: 900px) { .rehab__text, .rehab__fig { grid-column: 1 / -1; } }

/* ── 6c. «Lo que dice la evidencia» (2026-10-26): capítulo de papel, como una página de revista ──
   Arriba: título y frase; debajo, la gráfica de efectos a todo el ancho (HyperFrames: nm-video/evidencia y evidencia-cel).
   Abajo: «Cómo lo aplicamos» a la izquierda (se queda quieto al bajar) y las fuentes numeradas a la derecha, cada una con
   su enlace. Solo tokens: azul de marca para marcas y números, tinta para el texto. */
.evid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--space-7); align-items: start; }
.evid__head { grid-column: 1 / 9; display: grid; gap: var(--space-5); }
.evid__text { grid-column: 1 / 6; display: grid; gap: var(--space-5); position: sticky; top: calc(var(--bar) + var(--space-6)); }
.evid__lead { font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--track-snug); max-width: 34ch; }
.evid__h3 { font: var(--weight-bold) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.evid__rules { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); max-width: var(--measure); }
.evid__rules li { position: relative; padding-left: var(--space-5); }
.evid__rules li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--blue-600); }
.evid__rules strong { font-family: var(--font-head); font-weight: var(--weight-bold); }
.evid__data { grid-column: 6 / 13; display: grid; gap: var(--space-7); }
.evid__fig { grid-column: 1 / -1; margin: 0; background: var(--paper); box-shadow: 0 0 0 2px var(--paper-2); }
.evid__fig img { width: 100%; height: auto; display: block; }
/* Gráfica en movimiento: el video tapa la imagen fija solo mientras se arma (landing.js pone .is-anim antes de que se vea) */
.evid__media { position: relative; }
.evid__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; background: var(--paper); }
.evid__media.is-anim .evid__video { opacity: 1; }
.evid__media.is-anim picture { visibility: hidden; }
.evid__fig figcaption { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--ink-soft); background: var(--paper-2); }
.evid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--g); margin: 0; padding: 0; list-style: none; counter-reset: ev; }
.evid__list li { counter-increment: ev; display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); box-shadow: inset 0 3px 0 var(--ink); font-size: var(--fs-body); }
.evid__list li::before { content: counter(ev, decimal-leading-zero); font: var(--weight-bold) var(--fs-small) / 1 var(--font-head); color: var(--blue-600); }
.evid__who { font: var(--weight-bold) var(--fs-body) / var(--lh-snug) var(--font-head); }
.evid__src { font-size: var(--fs-small); color: var(--ink-soft); }
.evid__src .link { color: var(--ink); text-decoration-thickness: 2px; }
.evid__note { font-size: var(--fs-small); color: var(--ink-soft); max-width: var(--measure); padding: var(--space-4) var(--space-5); background: var(--paper-2); }
@media (max-width: 900px) {
  .evid__head, .evid__text, .evid__data { grid-column: 1 / -1; }
  .evid__text { position: static; }
  .evid__list { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── 7. Páginas generadas (tools/build_pages.py, plantilla de ESPEC §9.5) ── */
/* Misma sala oscura que la portada; precios en amarillo; botones verdes solo para empezar o pagar. */
.pg-main { width: min(100% - 2 * var(--m), 1120px); margin-inline: auto; padding-block: var(--space-6) var(--section); display: grid; gap: var(--space-9); }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--paper-soft); }
.pg-crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--paper); text-decoration: underline; text-decoration-color: var(--sky-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pg-crumbs + * { margin-top: calc(-1 * var(--space-8)); }
/* Sin «eyebrow»: la línea corta (kicker) va DEBAJO del título, no encima. */
.pg-hero { display: flex; flex-direction: column; gap: var(--space-4); max-width: 46rem; }
.pg-hero h1 { order: 1; font: var(--weight-head) var(--fs-h2) / var(--lh-heading) var(--font-head); letter-spacing: var(--track-heading); }
.pg-kicker { order: 2; font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); color: var(--paper-soft); }
.pg-lead { order: 3; font-size: var(--fs-lead); line-height: 1.35; max-width: 36ch; }
.pg-cta { order: 4; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.pg-cta .btn { min-height: var(--control-lg); padding: 0 var(--space-6); }
.pg-note { order: 5; font-size: var(--fs-small); color: var(--paper-soft); }
.pg-fig { margin: 0; background: var(--navy-950); }
.pg-fig img { width: 100%; height: auto; }
.pg-body { display: grid; gap: var(--space-7); max-width: var(--measure); font-size: var(--fs-body); }
.pg-body > p + p, .pg-body section > * + * { margin-top: var(--space-4); }
.pg-body h2, .pg-steps h2, .pg-prices h2, .pg-faq h2, .pg-related h2, .pg-legal h2 { font: var(--weight-head) var(--fs-lead) / var(--lh-snug) var(--font-head); letter-spacing: var(--track-snug); }
.pg-body h3 { font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); }
.pg-body ul, .pg-body ol, .pg-legal ul, .pg-legal ol { display: grid; gap: var(--space-2); padding-left: 1.4em; }
.pg-body ul, .pg-legal ul { list-style: square; }
.pg-body ol, .pg-legal ol { list-style: decimal; }
.pg-body li::marker, .pg-legal li::marker { color: var(--sky-400); }
.pg-body a, .pg-legal a { font-weight: var(--weight-bold); text-decoration: underline; text-decoration-color: var(--sky-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pg-steps { display: grid; gap: var(--space-5); padding: var(--space-7) var(--space-6); background: var(--navy-800); }
.pg-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding-left: 1.4em; list-style: decimal; }
.pg-steps li { display: grid; gap: var(--space-1); padding-left: var(--space-1); }
.pg-steps li::marker { font: var(--weight-bold) var(--fs-body) / 1 var(--font-head); }
.pg-steps b { font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); }
/* Precios: el capítulo amarillo en pequeño, sin escalera */
.pg-prices { --field-ink: var(--ink); --focus: var(--ink); --quiet-bg: var(--ink); --quiet-ink: var(--paper); --quiet-hover: var(--navy-800);
  display: grid; gap: var(--space-5); padding: var(--space-7) var(--space-6); background: var(--price); color: var(--ink); }
.pg-prices .plans { align-items: stretch; }
.pg-prices .plan--free, .pg-prices .plan--month, .pg-prices .plan--year { min-height: 0; }
.pg-prices .plan__price { font-size: var(--fs-lead); letter-spacing: var(--track-snug); }
.pg-fine { font-size: var(--fs-body); max-width: var(--measure); }
.pg-faq { display: grid; gap: var(--space-5); }
.pg-faq details { padding: var(--space-4) var(--space-5); background: var(--navy-800); }
.pg-faq summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-head); }
.pg-faq details p { margin-top: var(--space-2); max-width: var(--measure); }
.pg-related { display: grid; gap: var(--space-3); }
.pg-related a { display: inline-flex; align-items: center; min-height: var(--tap); font: var(--weight-head) var(--fs-body) / 1.3 var(--font-head); text-decoration: underline; text-decoration-color: var(--sky-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pg-legal { max-width: var(--measure); font-size: var(--fs-body); gap: var(--space-4); }
.pg-legal h1 { font: var(--weight-head) var(--fs-h2) / var(--lh-heading) var(--font-head); letter-spacing: var(--track-heading); }
.pg-legal h2 { margin-top: var(--space-6); }
@media (max-width: 720px) {
  .pg-main { gap: var(--space-8); }
  .pg-cta .btn { width: 100%; }
  .pg-steps, .pg-prices { padding: var(--space-6) var(--space-4); margin-inline: calc(-1 * var(--m)); }
  .pg-steps ol { grid-template-columns: 1fr; }
}

/* ── 8. Movimiento ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .brain.is-3d .brain__gl canvas { animation: gl-in 700ms var(--ease-film) both; }
  .player[open] { animation: menu-in var(--t-dialog) var(--ease-out); }
  .desc:not([hidden]) { animation: rise 420ms var(--ease-out) both; }
  .bar__go, .bar__price { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
  .bar__price:active, .tile--price:active { transform: scale(0.98); }
  .tile__go svg { transition: transform 260ms var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tile--price:hover .tile__go svg { transform: translateX(4px); }
}
@keyframes gl-in { from { opacity: 0; } to { opacity: 1; } }