/* NeuroMaestra · tokens (variables y fuentes)
   Dirección: «Colour chapters» de taste-skill (semilla 881628828) sobre la sala oscura de la marca.
   Regla de oro: amarillo = precio · verde = empezar o pagar · azul = lo que hay adentro · azul marino = la sala.
   Orden de carga: tokens.css → base.css → site.css. Tu CSS usa solo var(--token). No inventes colores ni tamaños.
   Sin dependencias externas: las fuentes viven en ../fonts (licencias en ../fonts/LICENSES.txt). */

/* ── Fuentes propias (variables: un archivo por familia, todos los pesos) ── */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-latin-wght.woff2") format("woff2-variations"),
       url("../fonts/lexend-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2-variations"),
       url("../fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
/* «NM Cifras»: solo los números 0–9, tomados de Lexend.
   Atkinson Hyperlegible Next dibuja el cero con raya («S/ Ø»). Con esta cara, los precios del texto se leen «S/ 0», «10 USDT».
   Va primera en --font-text; como solo trae números, el resto de letras sale en Atkinson. */
@font-face {
  font-family: "NM Cifras";
  src: url("../fonts/lexend-latin-wght.woff2") format("woff2-variations"),
       url("../fonts/lexend-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

:root {
  color-scheme: dark;

  /* ── Color base (valores exactos de la marca) ── */
  --navy-950: #040b1c;   /* fondo del cerebro y del video: lo más oscuro de la sala */
  --navy-900: #08142c;   /* la sala: fondo de página */
  --navy-800: #102345;   /* un paso de tono: preguntas, menú, botón tranquilo */
  --navy-700: #1a3263;   /* hover de lo tranquilo sobre oscuro */
  --blue-800: #14369a;   /* escenario dentro del capítulo azul (un paso más oscuro) */
  --blue-700: #1a45c2;   /* capítulo «Qué hay adentro» y plan Mensual: texto claro a 7,3:1 */
  --blue-600: #2456e5;   /* azul de marca: loseta de cifras del héroe (texto grande, 5,5:1). No para texto corrido */
  --sky-400:  #6e9bff;   /* «Maestra» del logo, enlaces y foco sobre oscuro (nunca de fondo grande) */
  --amber-400: #ffc53d;  /* PRECIO, siempre y solo precio */
  --amber-300: #ffd56b;  /* hover del precio */
  --green-500: #22c27a;  /* EMPEZAR O PAGAR, siempre y solo eso */
  --green-600: #1aa868;  /* hover y presionado del verde */
  --paper:     #f3f6fc;  /* tinta clara · fondo del pie («se prenden las luces») */
  --paper-2:   #e2e8f5;  /* un paso de tono sobre el papel */
  --paper-soft: #c5d0e6; /* notas cortas sobre oscuro (11,8:1 sobre --navy-900) */
  --ink:       #08142c;  /* tinta oscura sobre amarillo, verde, celeste y papel */
  --ink-soft:  #33415f;  /* notas cortas sobre papel (9,4:1) */
  --bad:       #b3261e;  /* error en el ejercicio de prueba (sobre fondo claro) */

  /* ── Roles (úsalos primero) ── */
  --bg: var(--navy-900);
  --bg-deep: var(--navy-950);
  --surface-1: var(--navy-800);
  --surface-2: var(--navy-700);
  --text: var(--paper);
  --text-soft: var(--paper-soft);
  --link: var(--sky-400);
  --focus: var(--sky-400);
  --price: var(--amber-400);
  --price-hover: var(--amber-300);
  --go: var(--green-500);
  --go-hover: var(--green-600);
  --on-color: var(--ink);          /* texto sobre amarillo, verde y papel */
  --selection-bg: var(--sky-400);
  --selection-ink: var(--ink);
  --scrim-rgb: 4 11 28;            /* velo plano sobre fotos: rgb(var(--scrim-rgb) / .62) */

  /* ── Tipografía ── */
  --font-head: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "NM Cifras", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "Atkinson Hyperlegible Next", system-ui, sans-serif;  /* códigos para copiar: deja el cero con raya */

  /* Cinco tamaños, ni uno más (fluidos de 360 a 1440 px) */
  --fs-small:   1.0625rem;                                   /* 17 px: notas (nunca menos) */
  --fs-body:    clamp(1.125rem, 1.02rem + 0.35vw, 1.25rem);   /* 18 → 20 px: texto */
  --fs-lead:    clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);    /* 22 → 30 px: frase del héroe, h3, menú del celular */
  --fs-h2:      clamp(2.125rem, 1.4rem + 2.6vw, 4rem);        /* 34 → 64 px: títulos de sección, precios grandes */
  --fs-display: clamp(2.75rem, 1.4rem + 5.8vw, 7.25rem);      /* 44 → 116 px: h1 y el nombre del pie */

  --lh-display: 0.92;
  --lh-heading: 1.05;
  --lh-snug: 1.25;
  --lh-text: 1.55;
  --track-display: -0.05em;
  --track-heading: -0.035em;
  --track-snug: -0.015em;

  --weight-text: 400;
  --weight-head: 500;     /* títulos: nunca 300 (trazo fino para poca visión) */
  --weight-bold: 700;     /* botones, precios, «Precios» del menú */

  --measure: 65ch;
  --measure-narrow: 40ch;

  /* ── Espacio y layout ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --m: clamp(16px, 2.2vw, 32px);           /* margen lateral: el borde izquierdo de todo */
  --g: clamp(12px, 1.6vw, 24px);           /* espacio entre columnas */
  --section: clamp(72px, 9vw, 160px);      /* aire arriba y abajo de cada capítulo */
  --page-max: 1680px;                      /* en pantallas enormes el contenido no se estira más */
  --bar: 64px;                             /* alto de la barra */
  --tap: 48px;                             /* zona mínima para tocar */
  --control: 52px;                         /* alto de botón */
  --control-lg: 56px;                      /* botón grande (héroe, celular) */
  --pay-bar: 72px;                         /* barra verde «Pagar» de cada plan */

  /* ── Formas ── */
  --radius: 0;            /* la marca va en esquinas rectas: botones, losetas, fotos */
  --radius-ui: 14px;      /* solo dentro de un fragmento real de la app ([data-ui]) */
  --focus-w: 3px;
  --focus-offset: 3px;
  /* Flecha de las barras «Pagar» (máscara: toma el color del texto) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* ── Movimiento ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-film: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-dialog: 320ms;
  --t-reveal: 900ms;
  --t-scene: 1400ms;
  --stagger: 90ms;

  /* Cerebro 3D (los lee también el JS si quiere; son los valores pedidos por el dueño) */
  --brain-swing: 32deg;      /* vaivén ±32° */
  --brain-period: 14s;       /* una ida y vuelta cada 14 s */
  --brain-return: 1.8s;      /* vuelve solo a su lugar */

  /* ── Capas ── */
  --z-raised: 2;
  --z-bar: 40;
  --z-menu: 60;
  --z-dialog: 80;
  --z-skip: 100;
}