/* ═══════════════════════════════════════════════════════════════
   AZUMIND · Página principal y subpáginas
   Interfaz de cabina: línea fina, escuadras, retícula y telemetría.
   Referencias: paneles de la NASA y la interfaz de Starfield.
   Nada de librerías: todo a mano.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Paleta ---------- */

:root {
  /* Estructurales (manual de marca) */
  --cosmos: #041e3d;
  --cosmos-hondo: #01070e;
  --azumind: #185fa5;
  --azumind-claro: #3f95e0;
  --vital: #1d9e75;
  --pulsar: #ef9f27;

  /* NOVA — el rojo de la NASA. El color de la señal: lo urgente, lo vivo.
     El más ruidoso de la paleta: va con cuentagotas y nunca de fondo.

     La regla de la casa es que el rojo es una FORMA —filo, barra,
     relleno, escuadra— y no letra. Donde aun así toca ser letra pequeña
     —el chip de «Maqueta», de once píxeles— hace falta un rojo con más
     cuerpo, porque el exacto se queda en 3,24 sobre papel. Eso es
     `--nova-tinta`, y NO se usa en ninguna otra parte. */
  --nova: #fc3d21;
  --nova-tinta: #ff6a52;

  /* EL ROJO QUE LLEVA LETRA ENCIMA.

     Sobre el rojo exacto no se lee ninguna letra: la blanca da 3,60 y la
     oscura 4,35, y la norma pide 4,5. Es el mismo rojo de la casa con
     más cuerpo — ya estaba en la paleta como `--nova-hondo`, el del
     botón al pasar por encima.

     Con letra blanca:  #D92A12 → 4,89   ·   #C2260E → 5,87

     Lo usan los tres sitios donde el rojo hace de fondo de un texto: el
     botón principal, el enlace de saltar al contenido y la etiqueta de
     EXPLORADOR. En todo lo demás —escuadras, barras, filos, el chevrón
     de la marca— el rojo es una FORMA y va exacto. */
  --nova-lleno: #d92a12;
  --nova-lleno-vivo: #c2260e;
  --nova-hondo: #d92a12;

  /* 🔶 EL ÁMBAR QUE HACE DE FONDO, y por qué hace falta uno aparte.

     `--pulsar` cambia de OFICIO con el tema. En la cabina es un ámbar
     brillante que sirve para las dos cosas; sobre papel se convierte en
     tinta (`#8a5807`), porque el ámbar brillante sobre blanco no se lee.

     Eso está bien mientras `--pulsar` sea LETRA. En el momento en que
     alguien lo usa de FONDO, el tema claro le da un marrón oscuro y le
     pone encima una letra pensada para ámbar. Fue exactamente lo que le
     pasó a la nave del mapa: 2,79 sobre papel, y es el único elemento
     que se puede pulsar de esa pantalla.

     `--pulsar-lleno` NO se da la vuelta: es el mismo ámbar en los dos
     temas, como el rojo de `--nova-lleno`. Quien hace de fondo tiene que
     valer lo mismo siempre, porque la letra que lleva encima es fija.

     Con `#2a1a02` encima:  7,75 en los dos temas. */
  --pulsar-lleno: #ef9f27;
  --pulsar-lleno-hondo: #d98a15;

  /* Y EL VERDE, por lo mismo. `--vital` sobre papel es tinta (#0d6647):
     sirve para escribir «acertaste», no para rellenar una casilla del
     Wordle. Con letra clara encima daba 3,11 en la cabina y 2,24 sobre
     papel — cada letra bien colocada del juego.

     Con `#04180f` encima: 5,42 en los dos temas. */
  --vital-lleno: #1d9e75;
  --vital-lleno-tinta: #04180f;
  /* La tinta que va sobre el ámbar lleno. Marrón muy oscuro, no negro:
     el negro puro sobre ámbar se ve como un agujero, igual que sobre el
     papel azulado. */
  --pulsar-lleno-tinta: #2a1a02;

  /* Atmosféricos. El manual los reserva para BRILLO y PARTÍCULAS, nunca para
     bloques sólidos ni para la UI base. Aquí viven en el cielo, en los halos y
     en los filos encendidos — jamás rellenando una caja. */
  --cian: #52d9ff;
  --aurora: #3ff0a5;
  --magenta: #c95cf0;

  /* Texto */
  --texto: #f0f6fd;
  --texto-suave: #b6cee6;
  --texto-tenue: #7ea0c2;

  /* El HUD: la cuadrícula del visor, la viñeta que oscurece los cantos y
     cómo se mezclan las texturas del Webb. Los tres los cambia el tema
     claro, que es donde el cielo deja de existir. */
  --malla: rgba(120, 190, 255, 0.05);
  --malla-paso: 92px;
  /* En la cabina no hay cuadro fino: la retícula es la del visor. */
  --malla-fina: transparent;
  --malla-paso-fino: 92px;
  /* Y se difumina hacia los bordes, como el visor de una cabina. */
  --malla-mascara: radial-gradient(125% 95% at 50% 18%, #000 18%, transparent 76%);

  /* LAS DOS BANDAS DE ARRIBA, cada una con su ficha.

     La PRIMERA —«El universo · Centro de ayuda» y el selector de
     aspecto— es una tira de servicio: letra pequeña en versalitas, y
     ahí la cuadrícula hace de textura sin estorbar.

     La SEGUNDA —logo, nombre y menú— va de UN SOLO COLOR. Es el único
     sitio donde la marca tiene que estar limpia, y la cuadrícula ahí
     compite con el propio logo, que ya es una forma con retícula.

     En la cabina las dos son opacas de todas formas: si el encabezado
     fuera transparente enseñaría el tope claro del cielo y se vería una
     barra sin sentido encima de la portada. */
  --banda: rgba(var(--s-borde-rgb), 0.72);
  --banda-desenfoque: blur(8px);
  --banda-cabecera: rgba(var(--s-borde-rgb), 0.72);
  --banda-cabecera-desenfoque: blur(8px);
  --vineta: rgba(0, 0, 0, 0.55);
  --textura-mezcla: screen;
  --textura-fuerza: 0.15;

  /* El papel de electro. Sobre el cielo va suave: es un detalle, no el
     tema de la página. */
  --ecg-fina: rgba(252, 61, 33, 0.07);
  --ecg-gruesa: rgba(252, 61, 33, 0.16);

  /* El botón lleno: siempre lo CONTRARIO del fondo, no «blanco». */
  --relleno-contrario: #f0f6fd;
  --relleno-contrario-vivo: #ffffff;
  --tinta-contraria: #041020;

  /* Línea fina: es la protagonista de toda la interfaz */
  --linea: rgba(126, 178, 226, 0.22);
  --linea-viva: rgba(150, 205, 245, 0.45);
  --panel: rgba(var(--g-panel-rgb), 0.5);
  --panel-vivo: rgba(var(--g-panel-vivo-rgb), 0.66);

  /* Fondo cósmico. Los cambia el reloj: ver [data-momento] más abajo. */
  --fondo-alto: #052a52;
  --fondo-medio: #031829;
  --fondo-bajo: #01070e;
  --halo-azul: rgba(29, 110, 190, 0.55);
  --halo-cian: rgba(82, 217, 255, 0.16);
  --halo-calido: rgba(239, 159, 39, 0.13);

  /* Chakra Petch para los títulos: los cantos cortados de sus letras son el
     mismo gesto que las escuadras de los paneles. */
  --display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --cuerpo: 'Inter', 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', monospace;

  --ancho: 1180px;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
}


/* ── EL CICLO DEL CIELO ──

   Cada momento mueve el degradado ENTERO, no solo su remate.

   Antes solo cambiaba `--fondo-alto`, que es el 0 % del degradado: la
   franja de arriba del todo de la pantalla. Y justo sobre esa franja
   está la viñeta del HUD, que la oscurece hasta un 55 % de negro. El
   reloj llevaba meses pintando exactamente el sitio que otra capa
   tapaba, y por eso nadie notó nunca que la web cambiaba con la hora.

   Ahora los tres topes se mueven a la vez, así que el cambio ocurre en
   toda la pantalla y no debajo de la viñeta. Y además se puede forzar a
   mano desde el selector, que es la otra mitad del arreglo: ahora se
   puede VER el cambio sin esperar seis horas.                        */

html[data-momento='amanecer'] {
  --fondo-alto: #0b3f6d;
  --fondo-medio: #06263f;
  --fondo-bajo: #020c16;
  --halo-calido: rgba(252, 61, 33, 0.22);
  --halo-cian: rgba(82, 217, 255, 0.13);
}
html[data-momento='dia'] {
  --fondo-alto: #0d4a7b;
  --fondo-medio: #073152;
  --fondo-bajo: #041827;
  --halo-azul: rgba(46, 133, 214, 0.62);
  --halo-cian: rgba(82, 217, 255, 0.22);
}
html[data-momento='atardecer'] {
  --fondo-alto: #0a3560;
  --fondo-medio: #062338;
  --fondo-bajo: #030b13;
  --halo-calido: rgba(252, 61, 33, 0.26);
  --halo-cian: rgba(201, 92, 240, 0.14);
}
html[data-momento='noche'] {
  --fondo-alto: #031c3a;
  --fondo-medio: #020f1c;
  --fondo-bajo: #00040a;
  --halo-azul: rgba(24, 95, 165, 0.5);
  --halo-cian: rgba(82, 217, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   EL TEMA CLARO — EL PLANO
   ═══════════════════════════════════════════════════════════════

   No es «el oscuro con los colores dados la vuelta»: invertir un cielo
   nocturno da un gris sucio. Son dos cosas distintas con el mismo
   idioma:

     · EL OSCURO es LA CABINA. De noche, en vuelo, con las agujas
       encendidas y el cielo detrás.
     · EL CLARO es EL PLANO. El documento técnico de esa misma nave,
       impreso. Retícula de calco, líneas azules finas y tinta oscura.

   Ahí está la regla que lo gobierna todo: EN EL PLANO NO HAY CIELO. El
   campo de estrellas se apaga, la viñeta negra desaparece y la
   cuadrícula del visor se convierte en papel milimetrado. Lo que en la
   cabina brilla, aquí se dibuja.

   ── Los siete de marca, y el matiz que hay que decir ──

   El TONO no cambia: el ámbar sigue siendo el mismo ámbar, y el rojo
   NASA es el mismo #FC3D21 exacto. Lo que cambia es CUÁNTA TINTA lleva.
   Un ámbar que brilla sobre negro se apaga sobre papel: #EF9F27 sobre
   blanco da 2,1 de contraste y hace falta 4,5.

   Por eso se parte en dos:

     · `--pulsar-rgb` y compañía son EL TONO PURO. No se tocan aquí, y
       son los que dan los lavados de color —`rgba(var(--pulsar-rgb), .07)`
       sigue siendo un ámbar cálido y ligero sobre papel—.
     · `--pulsar` y compañía son EL COLOR SÓLIDO, el que va en la letra y
       en el filo. Ese sí se carga de tinta.

   El rojo es la excepción, y a propósito: se queda EXACTO. Puede, porque
   la regla que adoptamos es que el rojo es siempre una FORMA —filo,
   barra, relleno, escuadra— y nunca letra pequeña. Es como lo usa la
   NASA en su propio manual.                                          */

html[data-tema='claro'] {
  /* Las superficies se dan la vuelta enteras. De la más honda a la más
     alta, que en papel es de la más blanca a la más gris. */
  --s-hondo-rgb: 255, 255, 255;
  --s-borde-rgb: 255, 255, 255;
  --s-panel-rgb: 249, 252, 255;
  --s-humo-rgb: 246, 250, 253;
  --s-baja-rgb: 244, 248, 252;
  --s-media-rgb: 255, 255, 255;
  --s-alta-rgb: 255, 255, 255;

  /* La línea fina deja de ser azul claro sobre negro y pasa a ser azul
     Azumind sobre papel. Sigue siendo la protagonista. */
  /* Los rellenos de los degradados, dados la vuelta. El rojo se queda
     rojo —es el aviso de la zona de la que no se vuelve— pero lavado. */
  --g-panel-rgb: 255, 255, 255;
  --g-panel-vivo-rgb: 255, 255, 255;
  --g-hondo-rgb: 246, 250, 253;
  --g-azul-rgb: 240, 246, 252;
  --g-rojo-rgb: 252, 236, 233;
  --g-negro-rgb: 249, 252, 255;

  --linea-rgb: 24, 95, 165;
  --linea: rgba(24, 95, 165, 0.2);
  --linea-viva: rgba(24, 95, 165, 0.4);

  --panel: rgba(255, 255, 255, 0.86);
  --panel-vivo: #ffffff;

  /* La tinta. Azul muy oscuro, no negro: el negro puro sobre papel azulado
     se ve como un agujero. */
  --texto: #0b2440;
  --texto-suave: #35597f;
  /* Medido: #6b87a6 se quedaba en 3,21 sobre papel y la norma pide 4,5.
     Este da 5,93 sobre blanco, con margen para los fondos teñidos. Afectaba a unos
     cuatrocientos textos —fechas, pies, etiquetas—, así que era el fallo
     más gordo del tema claro con diferencia. */
  --texto-tenue: #46617c;

  /* El papel. Un azul lavadísimo sacado del propio AZUMIND — ni blanco
     puro, que deja la línea fina flotando sin agarre, ni crema, que
     manda el proyecto a otra marca. */
  --fondo-alto: #eef3f9;
  --fondo-medio: #e8eff7;
  --fondo-bajo: #eaf0f7;

  /* Los halos del cielo, casi apagados: sobre papel un resplandor es una
     mancha. Quedan como el tono del papel, no como luz. */
  --halo-azul: rgba(24, 95, 165, 0.05);
  --halo-cian: rgba(82, 217, 255, 0.05);
  --halo-calido: rgba(239, 159, 39, 0.07);

  /* El visor se vuelve papel milimetrado. */
  /* PAPEL DE ELECTRO DE VERDAD: cuadro de 1 mm dentro de cuadro de
     5 mm, y en rojo, que es el color del papel. Ocho y cuarenta píxeles
     guardan esa proporción. Y sale gratis que el rojo del papel sea
     exactamente el rojo de la marca. */
  --malla: rgba(252, 61, 33, 0.22);
  --malla-paso: 40px;
  --malla-fina: rgba(252, 61, 33, 0.11);
  --malla-paso-fino: 8px;

  /* Sobre papel la retícula NO se difumina: una hoja de electro cubre la
     hoja entera. Solo se apaga en el último tramo de abajo, para que el
     pie no acabe en un corte recto. */
  --malla-mascara: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);

  /* Y la banda de navegación se vuelve casi transparente, para que la
     hoja siga por debajo. En la cabina hace falta opaca; sobre papel,
     opaca deja un rectángulo en blanco donde está el logo — que es lo
     que vio Andrés. Los dos temas necesitan cosas contrarias.

     Sin desenfoque: desenfocar una cuadrícula la convierte en una
     mancha rosa.

     Y el encabezado, al contrario: OPACO DEL TODO, para que la
     cuadrícula no llegue al logo. Un color liso, sin degradado y sin
     transparencia — de eso va «unicolor». */
  --banda: rgba(255, 255, 255, 0.22);
  --banda-desenfoque: none;
  --banda-cabecera: #f3f8fd;
  --banda-cabecera-desenfoque: none;
  --vineta: rgba(24, 95, 165, 0.05);

  /* En screen la foto contra blanco daría blanco: no se vería nada. */
  --textura-mezcla: multiply;
  --textura-fuerza: 0.055;

  /* Sobre papel se puede subir un punto: ahí ES papel de verdad. */
  --ecg-fina: rgba(252, 61, 33, 0.1);
  --ecg-gruesa: rgba(252, 61, 33, 0.2);

  /* Los de marca, cargados de tinta para el papel. Mismo tono. */
  /* El botón lleno se da la vuelta con todo lo demás. */
  --relleno-contrario: #0b2440;
  --relleno-contrario-vivo: #05182e;
  --tinta-contraria: #eef3f9;

  /* Medido sobre los tres fondos que de verdad se dan en claro —blanco,
     papel y el lavado ámbar de los chips—: #a2660a se quedaba en 4,08
     sobre papel. Este pasa los tres con 4,56 el peor. */
  --pulsar: #8a5807;
  --vital: #0d6647;
  --aurora: #0f7050;
  --cian: #0f6f9e;
  --azumind-claro: #14528f;
  --magenta: #8e2fb5;

  /* Sobre papel el rojo pequeño necesita cuerpo: 5,28 frente a 3,24. */
  --nova-tinta: #c2260e;
}

/* En el plano no hay cielo. El campo de estrellas se apaga entero —no se
   atenúa: se apaga—, que además se ahorra el dibujado. */
html[data-tema='claro'] #cosmos { display: none; }

/* ── La isla oscura ──
   La portada es una FOTOGRAFÍA, y una fotografía trae su propia luz. En
   el tema claro no se aclara: se queda como una placa oscura pegada
   sobre el papel, que es exactamente lo que es.

   Sin esto pasaba algo feo y se vio a la primera: el velo que oscurece
   la foto usa la superficie más honda, que en claro es BLANCA — así que
   en vez de oscurecer la nebulosa la lavaba, y encima el título salía en
   tinta oscura encima. Ilegible por los dos lados.

   Se arregla devolviéndole a la portada, y solo a ella, las fichas del
   tema oscuro. Es un cambio de dos docenas de líneas en un sitio, no un
   parche repartido por media hoja. */
html[data-tema='claro'] .portada {
  --s-hondo-rgb: 1, 7, 14;
  --s-panel-rgb: 2, 12, 24;
  --linea-rgb: 126, 178, 226;

  --texto: #f0f6fd;
  --texto-suave: #b6cee6;
  --texto-tenue: #7ea0c2;

  --linea: rgba(126, 178, 226, 0.22);
  --linea-viva: rgba(150, 205, 245, 0.45);

  --pulsar: #ef9f27;
  --vital: #1d9e75;
  --aurora: #3ff0a5;
  --cian: #52d9ff;
  --azumind-claro: #3f95e0;
}

/* ---------- Los tonos en crudo ----------

   Un color y su transparencia son cosas distintas. `rgba(239,159,39,.4)`
   escribe el tono OTRA VEZ solo para poder bajarle la opacidad, y así el
   ámbar acabó repetido cuarenta y tres veces por la hoja. Cambiarlo
   obligaba a buscarlo cuarenta y tres veces, y bastaba con fallar una.

   Con el tono suelto se escribe `rgba(var(--pulsar-rgb), .4)`: la
   transparencia queda donde tiene que estar —en el sitio que la usa— y
   el color vive en un solo lugar.

   ── Y hay dos familias, que es lo importante ──

   Los SIETE DE MARCA no se tocan nunca. Son los mismos de día, de noche
   y sobre papel: si el ámbar cambiara con el tema, dejaría de ser el
   ámbar de Azumind.

   Las SUPERFICIES Y LA LÍNEA sí se dan la vuelta enteras en el tema
   claro. Son el suelo sobre el que se pinta, no la marca.             */

:root {
  /* Los siete de marca. Quietos en todos los temas. */
  --azumind-rgb: 24, 95, 165;
  --vital-rgb: 29, 158, 117;
  --pulsar-rgb: 239, 159, 39;
  --nova-rgb: 252, 61, 33;
  --cian-rgb: 82, 217, 255;
  --aurora-rgb: 63, 240, 165;
  --magenta-rgb: 201, 92, 240;

  /* La línea fina, protagonista de la interfaz. */
  --linea-rgb: 126, 178, 226;

  /* Las superficies, de la más honda a la más alta. */
  --s-hondo-rgb: 1, 7, 14;
  --s-borde-rgb: 0, 5, 11;
  --s-panel-rgb: 2, 12, 24;
  --s-humo-rgb: 2, 13, 26;
  --s-baja-rgb: 4, 20, 40;
  --s-media-rgb: 7, 28, 49;
  --s-alta-rgb: 9, 36, 66;

  /* Los rellenos de los degradados de panel. Estaban escritos a mano y
     por eso no se daban la vuelta con el tema. */
  --g-panel-rgb: 9, 34, 62;
  --g-panel-vivo-rgb: 14, 48, 84;
  --g-hondo-rgb: 6, 14, 26;
  --g-azul-rgb: 6, 28, 54;
  --g-rojo-rgb: 52, 16, 16;
  --g-negro-rgb: 1, 9, 18;
}

/* ---------- Cimientos ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── `hidden` tiene que esconder. Parece obvio; no lo era. ──────────
 *
 * El navegador esconde lo que lleva `hidden` poniéndole
 * `display: none`, pero lo hace con la fuerza más baja que existe. Así
 * que CUALQUIER regla nuestra que ponga `display` lo pisa — y hay 143
 * reglas que lo ponen.
 *
 * Se coló por ahí un fallo de verdad: `.boton { display: inline-flex }`
 * ganaba, y el botón de «Descargar para imprimir» SE VEÍA aunque las
 * descargas estuvieran apagadas desde el Estudio. No descargaba nada
 * —eso sí estaba bien cerrado— pero era un botón muerto que prometía
 * algo que no iba a pasar.
 *
 * El `!important` está justificado: `hidden` significa escondido, y no
 * hay ningún caso en que otra regla deba ganarle.                     */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texto-suave);
  background: linear-gradient(180deg, var(--fondo-alto) 0%, var(--fondo-medio) 42%, var(--fondo-bajo) 100%);
  background-attachment: fixed;
  /* Red de seguridad por si algo se sale a lo ancho. `clip` y no `hidden`
     porque `hidden` puede convertir al body en contenedor de desplazamiento. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background 1.6s ease;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--texto);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

strong {
  color: var(--texto);
  font-weight: 600;
}

img,
svg,
video {
  max-width: 100%;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 26px;
}

/* El atajo de teclado para saltarse el menú. Solo aparece al tabular.

   Iba en el rojo exacto con letra blanca, que da 3,6 de contraste —por
   debajo de los 4,5 que pide la norma—. Y de todos los sitios de la
   página, el único que NO puede fallar la norma es justo la ayuda de
   accesibilidad.

   Pasa a `--nova-hondo`, que ya existía en la paleta como el rojo del
   botón al pasar por encima: con letra blanca da 4,89. Como solo se ve
   al tabular, no cambia el aspecto de nada. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--nova-lleno);
  color: #fff;
}
.saltar:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--pulsar);
  outline-offset: 3px;
}

/* ---------- El cosmos y la retícula ---------- */

#cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}

.velo {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(56% 40% at 16% 2%, var(--halo-azul), transparent 68%),
    radial-gradient(44% 34% at 86% 14%, var(--halo-cian), transparent 70%),
    radial-gradient(62% 42% at 50% 104%, var(--halo-calido), transparent 68%);
  transition: background 1.6s ease;
}

.hud {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hud-malla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--malla-fina) 1px, transparent 1px),
    linear-gradient(90deg, var(--malla-fina) 1px, transparent 1px),
    linear-gradient(var(--malla) 1px, transparent 1px),
    linear-gradient(90deg, var(--malla) 1px, transparent 1px);
  background-size:
    var(--malla-paso-fino) var(--malla-paso-fino),
    var(--malla-paso-fino) var(--malla-paso-fino),
    var(--malla-paso) var(--malla-paso),
    var(--malla-paso) var(--malla-paso);
  mask-image: var(--malla-mascara);
  -webkit-mask-image: var(--malla-mascara);
}

.hud-vineta {
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 82% at 50% 44%, transparent 42%, var(--vineta) 100%);
}

.hud-escuadra {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid var(--pulsar);
  opacity: 0.3;
}

.hud-si { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.hud-sd { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.hud-ii { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.hud-id { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* Textura de fotografía real detrás de una sección.

   En la cabina va en modo `screen`, para que la nebulosa SE ENCIENDA
   sobre el fondo oscuro en vez de ensuciarlo.

   Sobre papel, `screen` la haría invisible —cualquier cosa en screen
   contra blanco da blanco—, así que allí pasa a `multiply`, que es su
   espejo: en vez de sumar luz, resta. La misma foto, leída al revés. */
.textura {
  position: absolute;
  inset: 0;
  background-image: var(--textura);
  background-size: cover;
  background-position: center;
  opacity: var(--textura-fuerza);
  mix-blend-mode: var(--textura-mezcla);
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
}

.textura-cometa {
  opacity: calc(var(--textura-fuerza) * 2);
  background-position: 76% center;
  mask-image: linear-gradient(100deg, transparent 38%, #000 96%);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 96%);
}

/* ═══════════════════════════════════════════════════════════════
   EL PAPEL DE ELECTRO
   ═══════════════════════════════════════════════════════════════

   El sitio ya tenía media retícula de electro sin saberlo: `.hud-malla`
   dibuja un cuadro de 92 px de fondo. El papel de electro son cuadros de
   1 mm dentro de cuadros de 5 mm, y es de color rojo. El rojo de la
   marca es #FC3D21. La coincidencia era demasiado buena.

   Esto NO sustituye a la malla del HUD: es otra cosa, para vestir TROZOS
   de página. Cuatro degradados apilados —dos finos de 8 px y dos gruesos
   de 40— que es la proporción de verdad.

   ── La regla que lo hace fondo y no mancha ──

   EL PAPEL NUNCA ACABA EN UN CANTO RECTO. Siempre se apaga con una
   máscara. Un rectángulo de cuadrícula que termina de golpe se ve como
   un parche pegado; uno que se disuelve se ve como fondo. Ahí está toda
   la diferencia, y por eso hay cuatro máscaras y ninguna forma de poner
   el papel sin una.

   ── Y por qué no ocupa páginas enteras ──

   Porque a página completa deja de ser un detalle y pasa a ser el tema.
   Decora partes: una banda, una esquina, un zócalo, un halo.          */

.papel-ecg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ecg-fina) 1px, transparent 1px),
    linear-gradient(90deg, var(--ecg-fina) 1px, transparent 1px),
    linear-gradient(var(--ecg-gruesa) 1px, transparent 1px),
    linear-gradient(90deg, var(--ecg-gruesa) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

/* 1 · Banda: cruza por el medio y se apaga por los cuatro lados. */
.mascara-banda {
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent),
              linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent),
                      linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* 2 · Esquina: nace en un vértice y se va antes de llegar al texto. */
.mascara-esquina {
  mask-image: radial-gradient(115% 130% at 100% 0%, #000 8%, transparent 62%);
  -webkit-mask-image: radial-gradient(115% 130% at 100% 0%, #000 8%, transparent 62%);
}

/* 3 · Zócalo: sube del suelo y se disuelve. La única que sí toca un
      borde, y es a propósito: asienta el pie de la página. */
.mascara-zocalo {
  mask-image: linear-gradient(0deg, #000 0%, #000 18%, transparent 72%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 18%, transparent 72%);
}

/* 4 · Halo: un óvalo de papel detrás de una sola cosa. */
.mascara-halo {
  mask-image: radial-gradient(52% 78% at 26% 52%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(52% 78% at 26% 52%, #000 12%, transparent 74%);
}

/* ═══════════════════════════════════════════════════════════════
   LOS FONDOS DE TRAZO
   ═══════════════════════════════════════════════════════════════

   Dibujos de línea que visten un trozo de sección: el potencial de
   acción y el árbol. Los monta `guion.js` a partir de un atributo; aquí
   solo está su ropa.

   La misma regla que el papel de electro: NUNCA acaban en un canto
   recto. Van con máscara siempre, o dejan de ser fondo y pasan a ser un
   dibujo pegado encima.

   `slice` y no `meet` en el recorte: el trazo se recorta por los lados
   antes que encogerse. Un potencial de acción aplastado a la mitad deja
   de ser un potencial de acción y pasa a ser una raya con un pico. */

.fondo-trazo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(78% 96% at 50% 50%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(78% 96% at 50% 50%, #000 18%, transparent 76%);
}

.fondo-trazo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fondo-trazo-eje {
  fill: none;
  stroke: rgba(var(--linea-rgb), 0.35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fondo-trazo-fino {
  fill: none;
  stroke: rgba(var(--cian-rgb), 0.3);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* El trazo vivo del potencial va en VERDE VITAL, no en rojo: es la curva
   de lo que crece —el ATP, el potencial, la racha—, y el verde es el
   color de eso en toda la casa. El rojo aquí sería una alarma que no
   hay. */
.fondo-trazo-vivo {
  fill: none;
  stroke: rgba(var(--vital-rgb), 0.5);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fondo-trazo-punto { fill: rgba(var(--pulsar-rgb), 0.55); }

/* El pico del potencial y el tronco del árbol, en el rojo de la marca.
   Es una forma pura y no lleva letra encima, así que va el exacto. */
.fondo-trazo-raiz,
.fondo-trazo-punto:first-of-type { fill: var(--nova); }

/* Dónde se coloca cada uno. La posición importa tanto como el dibujo:
   un fondo que pasa por debajo del texto deja de ser fondo. */
.fondo-trazo-derecha {
  left: auto;
  width: min(52%, 560px);
}

.fondo-trazo-abajo {
  top: auto;
  height: min(58%, 340px);
}

/* En el perfil el trazo va detrás de las cifras, así que baja un punto
   más: ahí compite con números, no con un titular. */
/* La curva cruza la plancha entera, no solo un lado: es un sello de
   agua, y un sello a medias se lee como un dibujo cortado. Al 45 %,
   porque aquí compite con cifras y no con un titular. */
.fondo-perfil {
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

@media (max-width: 860px) {
  /* En el móvil no hay hueco que sobre: el fondo pasaría por debajo del
     texto. Se apaga entero, que es mejor que estorbar. */
  .fondo-trazo { display: none; }
}

/* ---------- Franja superior de servicio ---------- */

.franja-alta {
  position: relative;
  z-index: 51;
  border-bottom: 1px solid var(--linea);
  background: var(--banda);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* No lleva clase «oculta» a propósito: al ser lo primero del documento se va
   sola al bajar. Retirarla con un margen negativo, como se hacía antes,
   acortaba el documento de golpe y dejaba la cabecera vibrando — está
   contado entero encima de `.cabecera`. */

.franja-alta-fila {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 34px;
  /* Sin esto, "Iniciar sesión" parte en dos líneas en el móvil y revienta la
     altura de la franja. */
  white-space: nowrap;
}

.franja-alta-enlaces {
  display: flex;
  gap: 20px;
  margin-right: auto;
  /* En móvil son cinco enlaces y no caben. En vez de apretarlos hasta que
     no se lean, la fila se desliza con el dedo y los botones de la derecha
     se quedan quietos. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.franja-alta-enlaces::-webkit-scrollbar {
  display: none;
}

.franja-alta-enlaces a {
  flex: 0 0 auto;
}

.franja-alta-enlaces a {
  color: var(--texto-tenue);
  transition: color 0.2s ease;
}

.franja-alta-enlaces a:hover,
.franja-alta-enlaces a[aria-current] {
  color: var(--pulsar);
}

.franja-alta-cuenta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ── El selector de aspecto ──
   Día · Noche · Auto · Claro. Lo monta `guion.js` en la franja de
   servicio; aquí solo está su ropa.

   Es la misma tira unida por líneas de un pixel que usa media página:
   el fondo de la caja ES la línea, y cada botón se pinta encima dejando
   un hueco. Y el elegido lleva el filo rojo abajo, la misma señal que
   marca la pestaña abierta y el menú por el que pasas. */

.selector-tema {
  display: flex;
  gap: 1px;
  margin-right: 4px;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.selector-tema-boton {
  padding: 4px 9px;
  border: 0;
  background: rgba(var(--s-panel-rgb), 0.85);
  color: var(--texto-tenue);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.selector-tema-boton:hover { color: var(--texto); }

.selector-tema-boton[aria-pressed='true'] {
  color: var(--texto);
  background: rgba(var(--azumind-rgb), 0.28);
  box-shadow: inset 0 -2px 0 var(--nova);
}

/* El del menú desplegable solo existe en el móvil, y el de la franja
   solo en el ordenador: la franja ya lleva «Iniciar sesión» y «Ayudar»,
   y cuatro botones más la parten en dos líneas a 390 px.

   Los dos se marcan a la vez —lo hace `guion.js`—, así que girar el
   teléfono no deja dos selectores diciendo cosas distintas. */
.selector-tema-menu { display: none; }

@media (max-width: 720px) {
  .franja-alta-cuenta > .selector-tema { display: none; }

  .selector-tema-menu {
    display: flex;
    margin: 14px 0 0;
    width: 100%;
  }

  .selector-tema-menu .selector-tema-boton {
    flex: 1;
    padding: 10px 6px;
    font-size: 0.64rem;
  }
}

.franja-alta-boton {
  padding: 4px 12px;
  border: 1px solid var(--linea-viva);
  color: var(--texto-suave);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.franja-alta-boton:hover {
  border-color: var(--pulsar);
  color: var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.08);
}

/* Cuando hay alguien dentro, el botón deja de ser una invitación y pasa a
   ser una identidad: se enciende en verde vital. */
.franja-alta-dentro {
  border-color: rgba(var(--aurora-rgb), 0.5);
  color: var(--aurora);
}

.franja-alta-dentro::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  vertical-align: middle;
  background: var(--aurora);
  box-shadow: 0 0 7px var(--aurora);
}

.franja-alta-dentro:hover {
  border-color: var(--aurora);
  color: var(--aurora);
  background: rgba(var(--aurora-rgb), 0.1);
}

/* En rojo parecía un botón de cerrar sesión, que es lo último que quieres
   pulsar por error. En verde vital —el de la franja de colores— se lee como
   lo que es. No lleva el aurora (var(--aurora)) a propósito: ese verde ya significa
   otra cosa aquí al lado, «hay alguien dentro», y dos verdes iguales pegados
   dejarían de decir nada. */
.franja-alta-apoyo {
  border-color: rgba(var(--vital-rgb), 0.5);
  color: var(--vital);
}

.franja-alta-apoyo:hover {
  border-color: var(--vital);
  color: var(--vital);
  background: rgba(var(--vital-rgb), 0.12);
}

/* ---------- Cabecera ---------- */

/* LA CABECERA NO CAMBIA DE ALTO AL BAJAR, y es a propósito.

   Antes encogía de 15px a 9px de relleno y, además, el guion le ponía a la
   franja de arriba un margen de -34px para retirarla. Entre las dos cosas el
   documento se acortaba 46px de golpe justo al pasar de 24px de scroll.

   Chrome, para que no se te mueva lo que estás mirando, compensa esa pérdida
   devolviéndote el scroll hacia atrás. Pero 46 es casi el doble de 24: el
   scroll caía por debajo del umbral, la barra volvía, empujaba otros 46, se
   volvía a pasar del umbral… y la cabecera se quedaba vibrando.

   Ahora, al bajar, solo cambian el fondo, el desenfoque y el filo de abajo:
   ni un píxel de alto. Sin cambio de alto no hay nada que compensar, así que
   el temblor no puede volver. Y la franja de arriba ya no hace falta
   retirarla: al ser lo primero del documento, se va sola al bajar.

   SI ALGÚN DÍA SE LE VUELVE A PONER UN CAMBIO DE TAMAÑO AQUÍ, vuelve el
   problema. */
/* El encabezado era transparente hasta que bajabas, así que arriba del
   todo enseñaba el tope MÁS CLARO del degradado del cuerpo. En el móvil
   eso se veía como una barra clara sin sentido entre la franja de
   servicio y la foto de la portada — porque en el teléfono la foto
   empieza justo debajo y el corte queda a la vista. Lo vio Andrés.

   El primer intento fue un velo que se apagaba hacia abajo, y no valió:
   justo donde está el logo el velo ya era transparente y seguía viéndose
   el halo azul del cielo.

   Lo que sí vale: EL MISMO FONDO QUE LA FRANJA DE SERVICIO de encima.
   Así las dos se leen como una sola banda de navegación apoyada sobre la
   foto, en vez de como dos tiras de tonos distintos con un escalón en
   medio. En el tema claro la ficha se da la vuelta y la banda es clara,
   que es lo que toca sobre papel. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 15px 0;
  background: var(--banda-cabecera);
  backdrop-filter: var(--banda-cabecera-desenfoque);
  -webkit-backdrop-filter: var(--banda-cabecera-desenfoque);
  transition: background 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.cabecera.fija {
  background: rgba(var(--s-humo-rgb), 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 24px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
}

.marca-simbolo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(var(--cian-rgb), 0.28));
}

.marca-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* ── El chevrón rojo bajo el logotipo ──

   El gesto del logotipo «worm» de la NASA, usado como lo usa la NASA:
   DE FIRMA, no de aviso. En su manual el rojo no señala peligro, es el
   color de la marca — va en cohetes, en edificios y en señalética.

   Aquí puede ir en el rojo EXACTO, #FC3D21, porque es una forma pura y
   no lleva letra encima. Esa es toda la regla: donde el rojo es forma,
   el rojo exacto; donde tiene que llevar letra, hace falta cuerpo.

   Va en las diecisiete páginas, porque la cabecera es la misma en
   todas. Es la aparición más constante del rojo en el sitio, y son dos
   píxeles de alto: presencia sin ruido. */
.marca-texto::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 34px;
  height: 2px;
  background: var(--nova);
  transition: width 0.35s var(--curva);
}

.marca:hover .marca-texto::after { width: 100%; }

.marca-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--texto);
}

.marca-bajada {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  color: var(--texto-tenue);
  text-transform: uppercase;
}

.navegacion {
  display: flex;
  gap: 24px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
}

.navegacion a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--texto-suave);
  padding: 4px 0;
  transition: color 0.2s ease;
}

.navegacion i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--pulsar);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.navegacion a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--nova);
  box-shadow: 0 0 8px rgba(var(--nova-rgb), 0.8);
  transition: right 0.3s var(--curva);
}

.navegacion a:hover { color: var(--texto); }
.navegacion a:hover i { opacity: 1; }
.navegacion a:hover::after { right: 0; }

.menu-boton {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--panel);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-boton span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--texto);
  transition: transform 0.3s var(--curva), opacity 0.2s ease;
}

.menu-boton[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-boton[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Botones ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.25s var(--curva), box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}

/* El fondo va en `--nova-lleno` y no en el rojo exacto: con letra blanca
   encima, el exacto da 3,60 y la norma pide 4,5. Era el último fallo de
   contraste del sitio, en 17 botones. Se ve un punto más profundo. */
.boton-nova {
  background: var(--nova-lleno);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--nova-rgb), 0.4), 0 12px 34px -12px rgba(var(--nova-rgb), 0.9);
}

.boton-nova:hover {
  background: var(--nova-lleno-vivo);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--nova-rgb), 0.6), 0 18px 42px -14px rgba(var(--nova-rgb), 1);
}

.boton-fantasma {
  border-color: var(--linea-viva);
  color: var(--texto);
  background: rgba(var(--s-humo-rgb), 0.55);
}

.boton-fantasma:hover {
  background: var(--panel-vivo);
  border-color: var(--cian);
  /* En claro `--panel-vivo` es blanco puro: con `#fff` aquí, el rótulo
     del botón desaparecía justo al pasar por encima. */
  color: var(--texto);
  transform: translateY(-2px);
  box-shadow: 0 0 22px -6px rgba(var(--cian-rgb), 0.5);
}

[data-pendiente][aria-disabled='true'] {
  opacity: 0.72;
  cursor: default;
}

/* ---------- Aparición al bajar ---------- */

.aparece {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--curva), transform 0.85s var(--curva);
}

.aparece.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  min-height: calc(100svh - 108px);
  display: flex;
  align-items: center;
  padding: 80px 0 110px;
  overflow: hidden;
}

/* El medio grande: hoy una fotografía, mañana el vídeo de presentación.
   La imagen va también de fondo del contenedor para que, mientras no haya
   <source>, siempre haya algo detrás. */
.portada-medio {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 🔶 LAS DOS LÍNEAS SON A PROPÓSITO, y el orden importa.

     La primera la entiende cualquier navegador, por viejo que sea. La
     segunda solo la entienden los que saben de WebP, y a esos les ahorra
     123 KB en lo primero que ven. Un navegador que no sepa leer
     `image-set` descarta esa línea entera y se queda con la de arriba:
     ve la foto igual, solo que más pesada.

     Esto va con respaldo y las texturas no, y el motivo es que esta foto
     ES la portada. Si a alguien con un navegador de 2013 no le carga una
     nebulosa decorativa, ve un fondo liso; si no le carga ESTA, ve un
     agujero donde tenía que estar el universo. */
  background: center / cover no-repeat;
  background-image: url('imagenes/portada-acantilados.jpg');
  background-image: image-set(
    url('imagenes/portada-acantilados.webp') type('image/webp'),
    url('imagenes/portada-acantilados.jpg') type('image/jpeg'));
}

.portada-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portada-sombra {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--s-hondo-rgb), 0.82) 0%, rgba(var(--s-hondo-rgb), 0.42) 40%, rgba(var(--s-hondo-rgb), 0.96) 100%),
    radial-gradient(70% 60% at 50% 45%, transparent 30%, rgba(var(--s-hondo-rgb), 0.6) 100%);
}

.portada-caja {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* EL HUECO DEL LOGO — dimensionado como el logo definitivo. Cuando llegue el
   vectorial se cambia este bloque y nada más se mueve de sitio. */
.hueco-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.hueco-logo-simbolo {
  width: 78px;
  height: 78px;
  display: block;
  filter: drop-shadow(0 0 26px rgba(var(--pulsar-rgb), 0.4));
}

.hueco-logo-nombre {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.4vw, 6.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  /* El sangrado compensa el espaciado de la última letra, para que el bloque
     quede realmente centrado y no un pelo a la izquierda. */
  text-indent: 0.14em;
  color: var(--texto);
  text-shadow: 0 0 70px rgba(var(--cian-rgb), 0.35), 0 4px 30px rgba(0, 0, 0, 0.7);
}

/* 🔶 Esto era un `<p>` y ahora es el `<h1>` de la portada. Todo lo demás
   se queda igual solo porque la clase le gana a la etiqueta en el CSS —
   pero el interlineado NO estaba escrito aquí: se heredaba del `body`,
   que va a 1.7, y el bloque `h1, h2, h3` lo habría bajado a 1.1. Son
   nueve píxeles menos de aire encima del párrafo siguiente.

   Así que se escribe. Cambiar qué ES un título no puede cambiar cómo se
   ve, o el arreglo se convierte en un rediseño que nadie pidió. */
.portada-eslogan {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.5vw, 0.92rem);
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pulsar);
  margin-bottom: 26px;
}

/* Sobre la foto. Blanco roto y sombra propia: el fondo es una nebulosa
   y su brillo cambia de una zona a otra, así que la letra no se puede
   fiar del velo. Lo vio Andrés en el móvil, donde la foto ocupa más y
   se ve más clara. */
.portada-entrada {
  color: #eaf3fd;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.92), 0 0 40px rgba(0, 0, 0, 0.7);
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  line-height: 1.68;
  max-width: 640px;
  margin: 0 auto 32px;
}

.portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* La tira de instrumento al pie de la portada */
.portada-tira {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portada-tira-fila {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 62px;
}

.tira-electro {
  flex: 1 1 auto;
  height: 40px;
  min-width: 120px;
  /* Sin esto, un hijo ancho impide que el flex encoja y la fila entera
     se va de largo en móvil. Es la otra mitad del arreglo de abajo. */
  min-inline-size: 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tira-electro svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── El desfile de ritmos ──
   Dos copias idénticas en fila. Cuando la primera termina de salir por
   la izquierda, la segunda está exactamente donde estaba la primera: el
   salto no existe y no hace falta ningún truco para disimularlo.

   Se mueve con `transform`, que lo pinta la tarjeta gráfica: no toca el
   hilo donde corren los minijuegos ni el campo de estrellas. */
.electro-desfile {
  display: flex;
  height: 100%;
  width: max-content;
  animation: desfilar-electro var(--electro-tiempo, 26s) linear infinite;
}

.electro-desfile > svg {
  flex: 0 0 auto;
  width: var(--electro-ancho, 2640px);
  height: 100%;
}

@keyframes desfilar-electro {
  to { transform: translateX(calc(var(--electro-ancho, 2640px) * -1)); }
}

/* El trazo de los ritmos NO lleva el barrido del punto: se dibuja
   entero, porque lo que se mueve ahora es el papel, no el lápiz.

   `non-scaling-stroke` es imprescindible aquí: el dibujo va con
   `preserveAspectRatio: none`, o sea aplastado 3,6 veces a lo ancho y 3
   a lo alto. Sin eso, el grosor del trazo se aplastaría con él y la
   línea saldría gruesa en las subidas y finísima en los tramos
   horizontales. Con eso, el grosor es el mismo en toda la curva. */
.electro-base {
  fill: none;
  stroke: rgba(var(--linea-rgb), 0.2);
  stroke-width: 1.4;
}

.electro-trazo {
  fill: none;
  stroke: var(--nova);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(var(--nova-rgb), 0.75));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: trazar 3.6s var(--curva) 0.45s forwards;
}

@keyframes trazar {
  to { stroke-dashoffset: 0; }
}

/* ── El trazo de los ritmos ──

   VA DESPUÉS DE `.electro-trazo` A PROPÓSITO. Las dos reglas tienen la
   misma especificidad, así que manda la que va después: puesto antes,
   como estaba, el trazo se quedaba con la línea discontinua de 100 px y
   con la animación de dibujado del electro viejo. En pantalla eso se
   veía como una línea que arranca dibujándose deprisa y luego se parte
   en trozos sueltos sin sentido. Lo vio Andrés en el móvil.

   Aquí no hay nada que dibujar: la línea está entera desde el primer
   momento, y lo que se mueve es el papel debajo. */
.electro-ritmos {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  animation: none;
  filter: drop-shadow(0 0 5px rgba(var(--nova-rgb), 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .electro-desfile { animation: none; }
}


.electro-punto {
  fill: #fff;
  filter: drop-shadow(0 0 9px rgba(var(--nova-rgb), 1));
}

.tira-dato {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ── EL RÓTULO DEL RITMO, CON EL SITIO YA RESERVADO ──

   Aquí estaba la vibración de la tira. El nombre del ritmo cambia solo
   cada cuatro segundos y medio, y pasa de «SINUSAL» (7 letras) a
   «FIBRILACIÓN VENTRICULAR» (23). Como la fila es un flex y el electro
   es el ÚNICO `flex: 1 1 auto` que hay en ella, el electro ENCOGÍA
   exactamente lo que crecía el rótulo — perdía cerca de la mitad de lo
   que se veía, y todo lo demás daba un salto.

   No era un tembleque de animación: era aritmética de layout, y por eso
   pasaba siempre en el mismo sitio, al entrar en fibrilación.

   Se reserva de entrada el ancho del nombre más largo. Sobra hueco
   mientras dice «SINUSAL», y ese hueco es justamente el arreglo: la
   fila deja de moverse porque ya no hay nada que repartir.

   Si algún día se añade un ritmo con nombre más largo que
   «Fibrilación ventricular», hay que subir este número — o volverá. */
.tira-ritmo b {
  display: inline-block;
  min-inline-size: 16ch;
}

/* El enlace escondido a la página del electro. Sin subrayado hasta que
   se pasa por encima, pero con el mismo cursor y el mismo foco visible
   que cualquier otro: escondido de la vista, no del teclado. */
.tira-ritmo-enlace {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tira-ritmo-enlace:hover,
.tira-ritmo-enlace:focus-visible {
  color: var(--pulsar);
  border-bottom-color: rgba(var(--pulsar-rgb), 0.6);
}

@media (max-width: 760px) {
  /* En móvil la tira ya va justa y el rótulo se lleva demasiado. Se
     acorta el hueco reservado y el nombre se recorta con puntos: sigue
     sin mover nada, que es lo que importa. */
  .tira-ritmo b {
    min-inline-size: 9ch;
    max-inline-size: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

.tira-dato b {
  font-weight: 500;
  color: var(--texto);
  margin-left: 7px;
}

#lecturaMomento { color: var(--pulsar); }

.bajar {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  border: 1px solid var(--linea-viva);
  display: flex;
  justify-content: center;
  padding-top: 7px;
  z-index: 2;
}

.bajar span {
  width: 2px;
  height: 8px;
  background: var(--pulsar);
  box-shadow: 0 0 8px var(--pulsar);
  animation: rodar 1.9s ease-in-out infinite;
}

@keyframes rodar {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
}

/* ---------- La franja de color ----------
   Cinco bandas horizontales apiladas, sin texto. Presentan la paleta sin
   explicarla y hacen de transición entre la portada y el cuerpo de la página.
   La última es COSMOS, así que aterriza en el propio fondo sin costura. */

.franja-paleta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Este bloque no se desvanece como los demás: lo que anima son las bandas. */
  opacity: 1;
  transform: none;
}

/* La sombra que proyecta la franja hacia abajo.
   En Starfield la última banda es un azul medio y la página de debajo es casi
   negra: por eso se lee. Yo tenía la relación invertida —banda oscura sobre
   fondo más claro—, así que COSMOS se disolvía. Esto oscurece la página justo
   debajo, muy oscuro pegado a la franja y desvaneciéndose al bajar, y le da a
   COSMOS contra qué recortarse sin una sola línea dura. */
.franja-paleta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 150px;
  background: linear-gradient(180deg, rgba(var(--s-hondo-rgb), 0.94), rgba(var(--s-hondo-rgb), 0));
  pointer-events: none;
}

.franja-paleta span {
  display: block;
  height: clamp(9px, 1.15vw, 17px);
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s var(--curva);
}

/* Nada de desvanecer la última banda. COSMOS es casi el color del fondo, así
   que difuminarlo lo hacía desaparecer y la franja parecía de cinco colores.
   Con un corte limpio el ojo distingue la banda aunque los tonos se parezcan:
   lo que separa dos colores cercanos es el borde, no la diferencia. */

.franja-paleta.visible span {
  transform: none;
}

.franja-paleta.visible span:nth-child(2) { transition-delay: 0.07s; }
.franja-paleta.visible span:nth-child(3) { transition-delay: 0.14s; }
.franja-paleta.visible span:nth-child(4) { transition-delay: 0.21s; }
.franja-paleta.visible span:nth-child(5) { transition-delay: 0.28s; }
.franja-paleta.visible span:nth-child(6) { transition-delay: 0.35s; }

/* ---------- Secciones ---------- */

.seccion {
  position: relative;
  padding: clamp(84px, 11vw, 146px) 0;
  overflow: hidden;
}

section[id] {
  scroll-margin-top: 92px;
}

.seccion-alterna::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--s-panel-rgb), 0.5);
  border-block: 1px solid var(--linea);
  pointer-events: none;
}

.seccion > .contenedor {
  position: relative;
  z-index: 1;
}

.seccion-cabeza {
  max-width: 720px;
  margin-bottom: clamp(44px, 5.5vw, 68px);
}

.seccion-cabeza-ancha {
  max-width: 820px;
}

.seccion-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 18px;
}

.codigo {
  padding: 3px 9px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.4);
  color: var(--pulsar);
  letter-spacing: 0.1em;
  background: rgba(var(--pulsar-rgb), 0.07);
}

/* ── El código en rojo lleno ──

   El tratamiento del logotipo «worm»: rojo sólido con letra blanca.

   Se reserva para el rótulo de IDENTIDAD —quién eres— y no para los
   códigos de sección, que siguen en ámbar. Si todos fueran rojos, el
   rojo dejaría de significar algo, que es justo lo que el manual pide
   evitar cuando dice que va con cuentagotas.

   El relleno es `--nova-hondo` y no el rojo exacto, y está medido:
   sobre #FC3D21 no se lee NINGUNA letra a este tamaño —la blanca da 3,6
   y la oscura 4,35, y la norma pide 4,5—. Sobre #D92A12 la blanca da
   4,89. Es el mismo rojo de la casa, que ya estaba en la paleta como el
   del botón al pasar por encima; solo tiene el cuerpo suficiente para
   llevar letra encima.

   El rojo exacto se queda para las formas puras: el chevrón de la
   marca, las escuadras, la barra de cada título, el filo de la pestaña
   abierta. Ahí no hay nada que leer sobre él. */
.codigo-marca {
  border-color: var(--nova-lleno);
  background: var(--nova-lleno);
  color: #fff;
}

.chip-maqueta {
  padding: 3px 9px;
  border: 1px solid rgba(var(--nova-rgb), 0.45);
  color: var(--nova-tinta);
  background: rgba(var(--nova-rgb), 0.08);
  letter-spacing: 0.08em;
}

/* 🔶 LAS DOS ETIQUETAS, EL MISMO TAMAÑO. El titular de una página de
   sección es un `h1` —es la placa de esa puerta— y el de las secciones
   que vienen debajo es un `h2`. Se ven idénticos a propósito: la
   diferencia entre los dos es lo que SON, no cómo se ven.

   Si aquí solo dijera `h2`, las nueve páginas de sección se quedarían
   con el titular pequeño a la vez y en silencio. Lo vigila
   `pruebas/titulos.mjs`. */
.seccion-cabeza h1,
.seccion-cabeza h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.seccion-entrada {
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ---------- El mapa ---------- */

.traduccion {
  position: relative;
  border: 1px solid var(--linea);
  background: linear-gradient(150deg, rgba(var(--s-alta-rgb), 0.62), rgba(var(--s-panel-rgb), 0.6));
}

.traduccion::before,
.traduccion::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid var(--pulsar);
  opacity: 0.55;
}
.traduccion::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.traduccion::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.traduccion-fila {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  gap: 14px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--linea);
  transition: background 0.3s ease;
}

.traduccion-fila:last-child { border-bottom: 0; }
.traduccion-fila:hover { background: rgba(var(--azumind-rgb), 0.16); }

.traduccion-real {
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  color: var(--texto-tenue);
}

.traduccion-flecha {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nova));
}

.traduccion-flecha::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--nova);
  border-right: 1px solid var(--nova);
  transform: translateY(-50%) rotate(45deg);
}

.traduccion-azumind {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 600;
  color: var(--texto);
}

.traduccion-fila:nth-child(1) .traduccion-azumind,
.traduccion-fila:nth-child(4) .traduccion-azumind { color: var(--azumind-claro); }
.traduccion-fila:nth-child(2) .traduccion-azumind,
.traduccion-fila:nth-child(5) .traduccion-azumind { color: var(--aurora); }
.traduccion-fila:nth-child(3) .traduccion-azumind,
.traduccion-fila:nth-child(6) .traduccion-azumind { color: var(--pulsar); }

/* ---------- Ecosistema ---------- */

.rejilla-piezas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 20px;
}

.pieza {
  position: relative;
  padding: 32px 26px 28px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.72), rgba(var(--s-panel-rgb), 0.7));
  transition: transform 0.35s var(--curva), border-color 0.35s ease, box-shadow 0.35s ease;
}

.pieza::before {
  content: attr(data-id);
  position: absolute;
  top: 13px;
  right: 15px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  opacity: 0.65;
}

.pieza::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.5;
  transition: opacity 0.35s ease, width 0.35s var(--curva), height 0.35s var(--curva);
}

.pieza:hover {
  transform: translateY(-5px);
  border-color: var(--linea-viva);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(var(--cian-rgb), 0.28);
}

.pieza:hover::after { opacity: 1; width: 19px; height: 19px; }

.pieza-destacada {
  border-color: rgba(var(--nova-rgb), 0.42);
  background: linear-gradient(165deg, rgba(var(--g-rojo-rgb), 0.6), rgba(var(--g-hondo-rgb), 0.7));
}

.pieza-destacada::after { border-color: var(--nova); }

.pieza-destacada:hover {
  border-color: var(--nova);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(var(--nova-rgb), 0.4);
}

.pieza-icono {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  /* Ficha, no blanco literal: sobre papel un 4 % de blanco encima de
     un fondo casi blanco no se ve. */
  background: rgba(var(--linea-rgb), 0.07);
  color: var(--pulsar);
}

.pieza-destacada .pieza-icono {
  color: var(--nova);
  border-color: rgba(var(--nova-rgb), 0.35);
}

.pieza-icono svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pieza h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.pieza p { font-size: 0.94rem; line-height: 1.62; margin-bottom: 18px; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.estado::before {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.estado-vivo { color: var(--aurora); }
.estado-obra { color: var(--texto-tenue); border-color: var(--linea); }
/* Lo que ya es tuyo en la tienda. Verde, como los aciertos: es la misma
   idea —esto ya está conseguido— y conviene que se lea igual. */
.estado-hecho { color: var(--vital); border-color: rgba(var(--vital-rgb), 0.5); }

/* La chapita dentro de la línea de etiqueta de un bloque. En ancho se va al
   extremo derecho, como el indicador de un panel; en estrecho se queda
   pegada al nombre y baja de línea con él, que empujarla a la derecha en una
   fila suya quedaría descolgado. */
.seccion-etiqueta .estado { margin-left: 4px; }

@media (min-width: 761px) {
  .seccion-etiqueta .estado { margin-left: auto; }
}

/* ---------- Minijuegos ---------- */

.rejilla-juegos {
  display: grid;
  /* 300 y no menos: con seis tarjetas, cuatro columnas dejarían una segunda
     fila de dos sueltas. Con tres salen 3 + 3, que es lo que cuadra. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.juego {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.6), rgba(var(--s-panel-rgb), 0.6));
  overflow: hidden;
  transition: transform 0.35s var(--curva), border-color 0.35s ease;
}

.juego::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--nova);
  box-shadow: 0 0 14px rgba(var(--nova-rgb), 0.9);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--curva);
}

.juego:hover { transform: translateY(-4px); border-color: var(--linea-viva); }
.juego:hover::before { transform: scaleY(1); }

.juego-numero {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--pulsar);
  margin-bottom: 14px;
  opacity: 0.8;
}

.juego h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 9px; }
.juego p { font-size: 0.93rem; line-height: 1.6; }

.nota-doble {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 34px;
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--linea);
  background: linear-gradient(120deg, rgba(var(--azumind-rgb), 0.28), rgba(var(--s-panel-rgb), 0.62));
}

.nota-doble::before,
.nota-doble::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid var(--pulsar);
  opacity: 0.55;
}
.nota-doble::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.nota-doble::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.nota-doble-texto { flex: 1 1 340px; }
.nota-doble h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 9px; }
.nota-doble p { font-size: 0.95rem; line-height: 1.62; }

.nota-doble-marcas { display: flex; flex-wrap: wrap; gap: 7px; }

.nota-doble-marcas span {
  padding: 6px 12px;
  border: 1px solid var(--linea-viva);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

/* ---------- Fichas de minijuego (subpágina) ---------- */

.rejilla-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.7), rgba(var(--s-panel-rgb), 0.7));
  transition: transform 0.35s var(--curva), border-color 0.35s ease;
}

.ficha::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.5;
  transition: opacity 0.35s ease, width 0.35s var(--curva), height 0.35s var(--curva);
}

.ficha:hover {
  transform: translateY(-4px);
  border-color: var(--linea-viva);
}

.ficha:hover::after {
  opacity: 1;
  width: 19px;
  height: 19px;
}

.ficha-alto {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.ficha-numero {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--pulsar);
}

.ficha-motor {
  padding: 3px 10px;
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.ficha-alto .estado {
  margin-left: auto;
}

.ficha h3 {
  font-size: 1.28rem;
  font-weight: 600;
  margin-bottom: 11px;
}

.ficha-detalle {
  font-size: 0.94rem;
  line-height: 1.62;
  margin-bottom: 20px;
}

/* Las dos fichas técnicas: qué entrena y qué sale impreso */
.ficha-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  margin-bottom: 20px;
}

.ficha-datos dt {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding-top: 3px;
  white-space: nowrap;
}

.ficha-datos dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.ficha-pie {
  margin-top: auto;
}

.ficha-pie .boton {
  width: 100%;
  padding: 12px 22px;
  font-size: 0.9rem;
}

/* El recordatorio de la regla, al pie de la subpágina */
.regla-oro {
  position: relative;
  display: flex;
  gap: 20px;
  margin-top: 18px;
  padding: 28px 32px;
  border: 1px solid rgba(var(--nova-rgb), 0.34);
  background: linear-gradient(165deg, rgba(var(--g-rojo-rgb), 0.5), rgba(var(--g-hondo-rgb), 0.62));
}

.regla-oro h3 {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.regla-oro p {
  font-size: 0.95rem;
  line-height: 1.66;
}

/* ---------- Tarjeta cartel (libros y vídeos) ----------
   El patrón de las páginas de lanzamiento: arte a sangre, etiqueta arriba a
   la izquierda, título encima del arte y dos botones al pie. Uno lleva a
   saber más y el otro a la acción. */

.rejilla-carteles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

/* Un cartel solo no debe estirarse a lo ancho de toda la fila: con `auto-fit`
   la única columna se come el hueco de las demás y el texto queda nadando en
   el centro de una caja enorme. Con uno se le pone ancho de tarjeta y se
   centra. Si el navegador no entiende :has(), se queda como estaba. */
.rejilla-carteles:has(> .cartel:only-child) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.cartel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 330px;

  /* 🔶 LOS 54 PÍXELES DE ARRIBA NO SON DECORACIÓN.

     El contenido del cartel se apila desde ABAJO (justify-content:
     flex-end), pero la chapita del tema y la marca de «Ejemplo» están
     en posición absoluta a 20 px del borde de arriba — o sea, fuera de
     esa pila. Cuando el título es largo y el resumen también, el texto
     crece hacia arriba y se mete DEBAJO de la chapita: se leía un
     título tachado por la palabra FISIOLOGÍA.

     No se ve con los carteles cortos, y por eso llevaba tiempo ahí sin
     que nadie lo notara: apareció al escribir uno con tres líneas de
     título. Este hueco reserva el sitio de la chapita —20 px de margen
     más sus 24 de alto— y deja aire. Con los carteles normales no
     cambia nada, porque el texto ni se acerca. */
  padding: 54px 24px 24px;
  border: 1px solid var(--linea);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--curva), border-color 0.35s ease;
}

.cartel-arte {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--arte);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--curva);
}

/* El velo que hace legible el título sobre cualquier imagen */
.cartel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(var(--s-hondo-rgb), 0.3) 0%,
    rgba(var(--s-hondo-rgb), 0.5) 42%,
    rgba(var(--s-hondo-rgb), 0.93) 100%
  );
}

.cartel:hover {
  transform: translateY(-4px);
  border-color: var(--linea-viva);
}

.cartel:hover .cartel-arte {
  transform: scale(1.04);
}

.cartel-chip {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px 13px;
  border: 1px solid var(--pulsar);
  background: rgba(var(--s-hondo-rgb), 0.82);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.cartel-marca {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 5px 11px;
  border: 1px dashed var(--linea-viva);
  background: rgba(var(--s-hondo-rgb), 0.7);
}

.cartel h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.85);
}

.cartel-resumen {
  font-size: 0.94rem;
  line-height: 1.58;
  text-align: center;
  color: var(--texto-suave);
  margin: 0 auto 20px;
  max-width: 42ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.cartel-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cartel-botones .boton {
  padding: 12px 22px;
  font-size: 0.88rem;
}

/* El botón lleno del patrón de referencia: EL CONTRARIO DEL FONDO.

   Estaba escrito como `background: var(--texto)` —o sea, del color de la
   letra— porque en la cabina la letra es casi blanca y salía un botón
   blanco. Pero en el papel la letra es tinta oscura, así que el fondo se
   volvía oscuro Y LA LETRA TAMBIÉN: 1,22 de contraste, invisible. Se
   cazó midiendo, no mirando.

   Ahora tiene sus dos fichas propias, que se dan la vuelta con el tema.
   Su papel no es «ser blanco»: es ser lo contrario de lo que tiene
   detrás. */
.boton-claro {
  background: var(--relleno-contrario);
  color: var(--tinta-contraria);
  border-color: var(--relleno-contrario);
}

.boton-claro:hover {
  background: var(--relleno-contrario-vivo);
  color: var(--tinta-contraria);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(var(--linea-rgb), 0.6);
}

/* ---------- Artículo de un vídeo ---------- */

.articulo {
  max-width: 780px;
}

.articulo-cabeza {
  margin-bottom: 26px;
}

.articulo-titulo {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.articulo-entradilla {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--texto-suave);
}

/* El vídeo: primero la miniatura, y solo al pulsar se trae el reproductor.
   Así la página no arrastra el de YouTube ni sus cookies a quien solo pasaba
   por ahí, y de paso carga mucho más rápido. */
.video-caja {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  background-image: var(--arte);
  background-size: cover;
  background-position: center;
  background-color: rgba(var(--s-panel-rgb), 0.9);
  margin-bottom: 30px;
  overflow: hidden;
}

.video-caja::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--s-hondo-rgb), 0.45);
  transition: background 0.3s ease;
}

.video-caja:hover::before {
  background: rgba(var(--s-hondo-rgb), 0.28);
}

.video-caja-viva::before {
  display: none;
}

.video-play {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid var(--nova);
  background: rgba(var(--nova-rgb), 0.88);
  cursor: pointer;
  transition: transform 0.3s var(--curva), box-shadow 0.3s ease, background 0.3s ease;
}

.video-play span {
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}

.video-play:hover {
  transform: scale(1.06);
  background: var(--nova);
  box-shadow: 0 0 46px -8px rgba(var(--nova-rgb), 0.95);
}

.video-marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-aviso {
  position: relative;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.articulo-cuerpo p {
  font-size: 1.04rem;
  line-height: 1.78;
  margin-bottom: 20px;
}

.articulo-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}

/* ---------- Páginas legales ----------
   Privacidad y condiciones. Aquí manda la lectura: columna estrecha, línea
   generosa y titulares que dejen respirar. Nada de escuadras ni adornos —
   son las dos páginas donde el ruido visual estorba. */

.documento {
  max-width: 720px;
}

.documento-cabeza {
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--linea);
}

.documento-fecha {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.documento-cuerpo h2 {
  font-size: clamp(1.18rem, 2.1vw, 1.44rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 46px 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--pulsar);
}

.documento-cuerpo > h2:first-child {
  margin-top: 0;
}

.documento-cuerpo p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 18px;
  color: var(--texto-suave);
}

.documento-cuerpo strong {
  color: var(--texto);
  font-weight: 600;
}

.documento-cuerpo ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.documento-cuerpo li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--texto-suave);
}

.documento-cuerpo li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--pulsar);
}

.documento-cuerpo a {
  color: var(--cian);
  border-bottom: 1px solid rgba(var(--cian-rgb), 0.35);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.documento-cuerpo a:hover {
  color: var(--pulsar);
  border-bottom-color: var(--pulsar);
}

/* El aviso de "esto no es consejo médico" va en rojo NOVA y con escuadras:
   es lo único de estas dos páginas que debe verse antes de leerse. */
.aviso-fuerte {
  position: relative;
  margin: 0 0 42px;
  padding: 26px clamp(20px, 3.4vw, 32px) 8px;
  background: rgba(var(--nova-rgb), 0.055);
  border: 1px solid rgba(var(--nova-rgb), 0.3);
}

.aviso-fuerte::before,
.aviso-fuerte::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--nova);
}

.aviso-fuerte::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.aviso-fuerte::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.aviso-fuerte h2 {
  margin-top: 0;
  border-left-color: var(--nova);
  color: var(--texto);
}

@media (max-width: 620px) {
  .documento-cuerpo h2 { padding-left: 13px; }
  .aviso-fuerte { padding: 22px 18px 6px; }
}

/* ---------- Lo que viene ---------- */

.rejilla-proximos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 18px;
}

.proximo {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  border: 1px dashed var(--linea-viva);
  background: rgba(var(--s-panel-rgb), 0.55);
  transition: border-color 0.35s ease, background 0.35s ease;
}

.proximo::before {
  content: attr(data-id);
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
}

/* La cruz de retícula: marca un hueco reservado, no un contenido vacío */
.proximo::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  background:
    linear-gradient(var(--linea-viva), var(--linea-viva)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--linea-viva), var(--linea-viva)) center / 100% 1px no-repeat;
  opacity: 0.5;
  transform: translateY(-30px);
  transition: transform 0.5s var(--curva), opacity 0.35s ease;
}

.proximo:hover {
  border-color: var(--pulsar);
  background: rgba(var(--g-panel-rgb), 0.6);
}

.proximo:hover::after {
  opacity: 1;
  transform: translateY(-30px) rotate(90deg);
}

.proximo-sello {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transform: translateY(18px);
}

/* Aquí estaban los estilos de las cuatro barras de progreso de SEC·05.
   Se fueron con ellas: los porcentajes estaban escritos a mano en el
   HTML y no los calculaba nadie, así que prometían un avance que nadie
   medía — de cuatro cosas que ni siquiera están decididas.

   Si algún día vuelven, que las devuelva quien pueda calcularlas. */

/* ---------- Noticias ---------- */

.rejilla-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.rejilla-noticias-completa {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.noticia {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.66), rgba(var(--s-panel-rgb), 0.68));
  transition: transform 0.35s var(--curva), border-color 0.35s ease;
}

.noticia::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.5;
  transition: opacity 0.35s ease, width 0.35s var(--curva), height 0.35s var(--curva);
}

.noticia:hover { transform: translateY(-4px); border-color: var(--linea-viva); }
.noticia:hover::after { opacity: 1; width: 19px; height: 19px; }

.noticia-alto {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.noticia-tema {
  padding: 3px 10px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tema-tecnologia { color: var(--cian); }
.tema-investigacion { color: var(--aurora); }
/* El rojo aquí es LETRA de diez píxeles, que es el único caso donde
   la regla «el rojo es una forma» no se puede cumplir. Va con tinta. */
.tema-clinica { color: var(--nova-tinta); }
.tema-educacion { color: var(--pulsar); }

.noticia-fecha {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}

.noticia-ejemplo {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px dashed var(--linea-viva);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.noticia h3 {
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: 11px;
}

.noticia p {
  font-size: 0.94rem;
  line-height: 1.62;
  margin-bottom: 18px;
}

.noticia-pie {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.noticia-enlace { margin-left: auto; color: var(--pulsar); }
.noticia-enlace::after { content: ' →'; }

.noticias-vacio {
  grid-column: 1 / -1;
  padding: 54px 30px;
  border: 1px dashed var(--linea-viva);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

/* El pie de un bloque: el botón que lleva a la subpágina y una línea de
   apoyo al lado. `.noticias-pie` es el nombre viejo, de cuando solo lo usaban
   las noticias; se mantiene para no tocar las páginas que ya lo llevan. */
.noticias-pie,
.bloque-pie {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.noticias-nota,
.bloque-nota {
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

/* ── La casilla del correo ──

   El campo y el botón van en la misma línea en pantalla ancha y se
   parten en dos en el móvil, que es donde un botón estrecho al lado de
   un campo estrecho no lo acierta nadie con el pulgar.

   🔶 El campo manda sobre el botón a propósito: `1 1 18rem` hace que se
   estire con el sitio que haya y que no baje de dieciocho caracteres, que
   es donde un correo empieza a no verse entero mientras lo escribes. */
.bloque-correo {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
  max-width: 34rem;
}

.bloque-correo .campo-cuenta {
  flex: 1 1 18rem;
}

.bloque-correo button {
  flex: 0 0 auto;
  /* La misma altura que el campo, para que la línea quede recta. */
  padding-block: 13px;
}

/* El aviso se lleva el ancho entero: cae debajo de los dos. */
.bloque-correo .campo-pista {
  flex: 1 0 100%;
  margin-top: 0;
  min-height: 1.3em;
}

/* Lo que salió bien se dice en verde de acierto; lo que no, en ámbar.
   Nunca en rojo: no se ha roto nada, solo falta algo. */
.bloque-correo .campo-pista[data-estado="bien"] { color: var(--vital); }
.bloque-correo .campo-pista[data-estado="ojo"]  { color: var(--pulsar); }

/* Subpágina de noticias */

.cabeza-pagina { padding-top: clamp(56px, 7vw, 92px); }

.miga {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.miga a { color: var(--texto-suave); }
.miga a:hover { color: var(--pulsar); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.filtro {
  padding: 7px 15px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-panel-rgb), 0.6);
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.filtro:hover { border-color: var(--linea-viva); color: var(--texto); }

.filtro[aria-pressed='true'] {
  border-color: var(--pulsar);
  color: var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.1);
}

.boletin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
  padding: 30px 32px;
  border: 1px solid var(--linea);
  background: linear-gradient(120deg, rgba(var(--azumind-rgb), 0.24), rgba(var(--s-panel-rgb), 0.6));
}

.boletin-texto { flex: 1 1 320px; }
.boletin h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 8px; }
.boletin p { font-size: 0.94rem; line-height: 1.62; }

/* ---------- El principio ---------- */

.principio-caja {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(38px, 5.5vw, 76px);
  align-items: start;
}

.principio-caja .seccion-cabeza {
  margin-bottom: 0;
  position: sticky;
  top: 120px;
}

.promesas { display: grid; gap: 18px; }

.promesa {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 26px 28px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.6), rgba(var(--s-panel-rgb), 0.6));
  transition: border-color 0.35s ease, background 0.35s ease;
}

.promesa:hover {
  border-color: var(--linea-viva);
  background: linear-gradient(165deg, rgba(var(--g-panel-vivo-rgb), 0.68), rgba(var(--g-negro-rgb), 0.62));
}

.promesa-marca {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 9px;
  border: 1px solid var(--nova);
  background: rgba(var(--nova-rgb), 0.22);
  box-shadow: 0 0 10px rgba(var(--nova-rgb), 0.5);
}

.promesa h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 8px; }
.promesa p { font-size: 0.95rem; line-height: 1.66; }

/* ---------- Tripulación ---------- */

.rejilla-tripulacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 24px;
}

.portilla { text-align: center; }

.portilla-cristal {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-viva);
  background: radial-gradient(circle at 34% 24%, rgba(63, 149, 224, 0.4), rgba(var(--g-negro-rgb), 0.94) 68%);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s var(--curva), border-color 0.4s ease, box-shadow 0.4s ease;
}

.portilla-anillo {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--linea-rgb), 0.3);
  transition: transform 0.9s var(--curva), border-color 0.4s ease;
}

.portilla:hover .portilla-cristal {
  transform: translateY(-6px);
  border-color: var(--cian);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.7), 0 0 30px -6px rgba(var(--cian-rgb), 0.55);
}

.portilla:hover .portilla-anillo {
  transform: rotate(90deg);
  border-color: rgba(var(--pulsar-rgb), 0.6);
}

.portilla-cristal svg { width: 62px; height: 62px; }

.portilla h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 5px; }

.portilla-que {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  color: var(--pulsar);
  text-transform: uppercase;
  margin-bottom: 11px;
}

.portilla-rol { font-size: 0.92rem; line-height: 1.58; }

.pie-aviso {
  margin-top: 44px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

/* ---------- Únete ---------- */

.unete {
  position: relative;
  padding: clamp(78px, 10vw, 130px) 0;
  border-block: 1px solid var(--linea);
  background: rgba(var(--s-panel-rgb), 0.55);
  overflow: hidden;
}

.unete-caja {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.unete-texto h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  margin-bottom: 18px;
}

.unete-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 28px 0 18px;
}

.unete-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

.punto-espera {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--pulsar);
  box-shadow: 0 0 9px var(--pulsar);
}

/* ── El cuadro de «sin cuenta / con cuenta» ──

   Sustituye a la lista de ventajas, que solo enseñaba lo que se gana y
   dejaba «sin cuenta» como un hueco negro. Puestas al lado, las dos
   columnas cuentan algo más honesto: sin cuenta se juega a todo.

   La columna de sin cuenta NO se pinta en rojo ni se tacha. Es un modo
   legítimo, y castigarlo visualmente sería empujar a registrarse. */
.unete-cuadro {
  border: 1px solid var(--linea);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.unete-cuadro table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: rgba(var(--s-panel-rgb), 0.85);
}

.unete-cuadro th,
.unete-cuadro td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
  color: var(--texto-suave);
  vertical-align: top;
}

.unete-cuadro tbody tr:last-child th,
.unete-cuadro tbody tr:last-child td { border-bottom: 0; }

/* La primera columna nombra la cosa; las otras dos la contestan. */
.unete-cuadro tbody th {
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

.unete-cuadro thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}

/* Con cuenta se destaca por el fondo, no por el color de la letra: así
   se lee igual de bien y no parece que la otra columna esté mal. */
.unete-cuadro .unete-col-buena {
  background: rgba(var(--vital-rgb), 0.1);
  color: var(--texto);
}
.unete-cuadro thead .unete-col-buena { color: var(--aurora); }

@media (max-width: 560px) {
  .unete-cuadro table { font-size: 0.84rem; }
  .unete-cuadro th,
  .unete-cuadro td { padding: 11px 12px; }
  .unete-cuadro tbody th { white-space: normal; }
}

/* Para lectores de pantalla, no para la vista. La usa el `caption` del
   cuadro: un cuadro sin título no se entiende oyéndolo. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- La cuenta ---------- */

.cuenta {
  max-width: 520px;
}

.cuenta-cargando {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.cuenta .seccion-cabeza {
  margin-bottom: 28px;
}

.cuenta .articulo-titulo {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin-bottom: 14px;
}

.cuenta-panel {
  padding: 28px 28px 26px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.7), rgba(var(--s-panel-rgb), 0.7));
}

.cuenta-pestanas {
  display: flex;
  gap: 1px;
  margin-bottom: 24px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

.cuenta-pestana {
  flex: 1;
  padding: 11px 14px;
  border: 0;
  background: rgba(var(--s-panel-rgb), 0.85);
  color: var(--texto-tenue);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.cuenta-pestana:hover {
  color: var(--texto);
}

.cuenta-pestana-viva {
  background: rgba(var(--azumind-rgb), 0.32);
  color: var(--texto);
  box-shadow: inset 0 -2px 0 var(--nova);
}

.cuenta-formulario {
  display: grid;
  gap: 16px;
}

.campo-cuenta {
  display: grid;
  gap: 7px;
}

.campo-cuenta span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo-cuenta input {
  padding: 13px 15px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.6);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-cuenta input:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 1px var(--cian), 0 0 20px -6px rgba(var(--cian-rgb), 0.6);
}

.campo-pista {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--texto-tenue);
  margin-top: -6px;
}

/* ── Las casillas del registro ──

   El texto va dentro de la etiqueta, así que se puede tocar entero para
   marcarla: en un móvil, apuntar a un cuadrito de 16 píxeles con el
   pulgar es pedir demasiado. La casilla se agranda un poco por lo
   mismo. */
.campo-casilla {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 4px 0;
}

.campo-casilla input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--azumind);
  cursor: pointer;
}

.campo-casilla:hover { color: var(--texto-suave); }
.campo-casilla input:focus-visible { outline: 2px solid var(--pulsar); outline-offset: 2px; }

/* La obligatoria se lee un punto más fuerte. Sin rojo ni asteriscos: es
   una condición, no un regaño. */
.campo-casilla-manda { color: var(--texto-suave); }

.campo-casilla a {
  color: var(--texto-suave);
  border-bottom: 1px solid var(--linea-viva);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.campo-casilla a:hover {
  color: var(--pulsar);
  border-bottom-color: var(--pulsar);
}

/* Apagado y no escondido: un botón que no está no se busca, y uno
   apagado hace mirar por qué. */
.cuenta-enviar:disabled {
  opacity: 0.45;
  cursor: default;
}

.cuenta-enviar {
  width: 100%;
  margin-top: 4px;
}

.cuenta-olvido {
  justify-self: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font-family: var(--cuerpo);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cuenta-olvido:hover {
  color: var(--pulsar);
}

.cuenta-aviso {
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cuenta-aviso-malo {
  border-color: rgba(var(--nova-rgb), 0.5);
  background: rgba(var(--nova-rgb), 0.1);
  color: var(--texto);
}

.cuenta-aviso-bueno {
  border-color: rgba(var(--aurora-rgb), 0.45);
  background: rgba(var(--aurora-rgb), 0.08);
  color: var(--texto);
}

.cuenta-separador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 18px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.cuenta-separador::before,
.cuenta-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.cuenta-google {
  width: 100%;
}

.cuenta-legal {
  margin-top: 18px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/* Los dos enlaces legales de la página de cuenta: presentes y legibles, pero
   sin competir con el botón de crear la cuenta. */
.cuenta-legal a,
.campo-acuerdo a {
  color: var(--texto-suave);
  border-bottom: 1px solid var(--linea-viva);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.cuenta-legal a:hover,
.campo-acuerdo a:hover {
  color: var(--pulsar);
  border-bottom-color: var(--pulsar);
}

.campo-acuerdo {
  margin-top: 2px;
  margin-bottom: 4px;
}

.cuenta-hecho p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Los tres marcadores del explorador: ATP, vesículas y rango */
/* ---------- Ajustes de la cuenta ---------- */

.ajustes,
.zona-riesgo {
  margin-top: 22px;
}

.ajustes-titulo {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.ajuste-bloque {
  padding: 22px 0;
  border-bottom: 1px solid var(--linea);
}

.ajuste-bloque:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ajuste-bloque h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.ajuste-explicacion {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-tenue);
  margin-bottom: 16px;
}

.ajuste-bloque .cuenta-formulario {
  gap: 13px;
}

.ajuste-bloque .boton {
  justify-self: start;
  padding: 11px 20px;
  font-size: 0.88rem;
}

.conectadas {
  display: grid;
  gap: 1px;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.conectada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(var(--s-hondo-rgb), 0.6);
  font-size: 0.94rem;
  color: var(--texto-suave);
}

.conectada-estado {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.conectada-viva .conectada-estado {
  color: var(--aurora);
}

.conectada-viva span:first-child {
  color: var(--texto);
}

/* La zona de la que no se vuelve */
.zona-riesgo {
  border-color: rgba(var(--nova-rgb), 0.38);
  background: linear-gradient(165deg, rgba(var(--g-rojo-rgb), 0.5), rgba(var(--g-hondo-rgb), 0.6));
}

.zona-riesgo .ajuste-bloque h3 {
  color: var(--nova);
}

/* ---------- Apoyar ---------- */

.apoyo {
  position: relative;
  padding: clamp(70px, 9vw, 118px) 0;
  border-block: 1px solid var(--linea);
  background: rgba(var(--s-panel-rgb), 0.5);
}

.apoyo-caja {
  max-width: 720px;
  text-align: center;
}

.apoyo-caja .seccion-etiqueta {
  justify-content: center;
}

.apoyo-caja h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.apoyo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  margin: 30px 0 20px;
}

.apoyo-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-tenue);
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
}


/* ── El Potenciador: lo que da y lo que NO ──
   La lista de «no» es más larga que la de «sí» a propósito. Es una
   promesa, no una omisión: si algún día crece la de arriba a costa de
   la de abajo, esto ya no es lo que se prometió. */
.potenciador-lista {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}

.potenciador-lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.87rem;
  line-height: 1.5;
}

.potenciador-lista li::before {
  flex: none;
  width: 1.1em;
  font-family: var(--mono);
  font-weight: 700;
}

.potenciador-si { color: var(--texto-suave); }
.potenciador-si::before { content: '+'; color: var(--vital); }

.potenciador-no { color: var(--texto-tenue); }
.potenciador-no::before { content: '−'; color: var(--nova-tinta); }

/* Dentro de una tarjeta los botones van a la izquierda, con el texto,
   y no centrados como cuando la sección entera estaba centrada. */
.pieza .apoyo-botones {
  justify-content: flex-start;
  margin: 22px 0 16px;
}


/* El precio de un paquete, en la tienda. En mono porque es una cifra
   que se compara con las de al lado, y las cifras se comparan mejor
   cuando cada dígito ocupa lo mismo. */
.grageas-precio {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--pulsar);
  margin: 2px 0 10px;
}
/* ---------- Cierre y redes ---------- */

.cierre {
  position: relative;
  padding: clamp(88px, 11vw, 150px) 0;
  background: radial-gradient(72% 100% at 50% 100%, rgba(var(--nova-rgb), 0.12), transparent 66%);
}

.cierre-caja { text-align: center; max-width: 880px; }

.cierre .seccion-etiqueta { justify-content: center; margin-bottom: 22px; }

.cierre-frase {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3.7vw, 2.8rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--texto);
  margin: 0 auto 44px;
  text-wrap: balance;
  text-shadow: 0 0 70px rgba(var(--cian-rgb), 0.2);
}

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-panel-rgb), 0.6);
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--curva),
    box-shadow 0.25s ease;
}

.red svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.red:hover {
  border-color: var(--pulsar);
  color: var(--pulsar);
  transform: translateY(-2px);
  box-shadow: 0 0 22px -8px rgba(var(--pulsar-rgb), 0.8);
}

/* ---------- Pie ---------- */

/* `relative` y `overflow: hidden` para que el papel de electro del
   zócalo se recorte dentro del pie y no se derrame por la página. */
.pie {
  position: relative;
  overflow: hidden;
  padding: 56px 0 32px;
  border-top: 1px solid var(--linea);
  background: rgba(var(--s-borde-rgb), 0.68);
}

/* El contenido, por encima del papel. */
.pie > .contenedor { position: relative; z-index: 1; }

.pie-fila {
  display: grid;
  /* Cuatro columnas de enlaces desde que el pie carga también la ayuda: la
     barra fina se esconde al bajar, así que aquí tiene que estar todo. */
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 34px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--linea);
}

.pie-marca { display: flex; flex-direction: column; gap: 8px; }

.pie-slogan {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texto-tenue);
  max-width: 260px;
}

.pie-columna { display: flex; flex-direction: column; gap: 11px; }

.pie-columna h3 {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--pulsar);
  margin-bottom: 4px;
}

.pie-columna a {
  font-size: 0.9rem;
  color: var(--texto-suave);
  transition: color 0.2s ease;
}

.pie-columna a:hover { color: var(--texto); }

.pie-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: space-between;
  padding-top: 24px;
}

.pie-legal,
.pie-credito {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--texto-tenue);
}

/* ---------- Pantallas pequeñas ---------- */

@media (max-width: 980px) {
  .pie-fila { grid-template-columns: 1fr 1fr; gap: 30px; }
  .unete-caja { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .principio-caja { grid-template-columns: 1fr; }
  .principio-caja .seccion-cabeza { position: static; }
}

/* El menú se pliega antes que el resto de la página. Son seis secciones con su
   número delante, y entre ellas y la marca piden 839px medidos: por debajo se
   apretarían hasta no leerse. Por eso este corte va aparte del de móvil.

   SI SE AÑADE O SE QUITA UNA SECCIÓN hay que volver a medir y cambiar DOS
   sitios: este número y el `matchMedia` de `guion.js`, que cierra el menú al
   ensanchar. Si solo se cambia uno, el menú se queda abierto y colgando. */
@media (max-width: 880px) {
  .menu-boton { display: flex; }

  .navegacion {
    position: fixed;
    inset: 74px 14px auto 14px;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--linea-viva);
    background: rgba(var(--s-humo-rgb), 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s var(--curva);
    /* Con ocho enlaces, en un móvil apaisado el menú podría pasarse de largo. */
    max-height: calc(100svh - 96px);
    overflow-y: auto;
  }

  .navegacion.abierta { opacity: 1; transform: none; pointer-events: auto; }

  .navegacion a {
    padding: 13px 14px;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--linea);
  }

  .navegacion a:last-child { border-bottom: 0; }
  .navegacion a:hover { background: var(--panel-vivo); }
  .navegacion a::after { display: none; }
}

@media (max-width: 760px) {
  .franja-alta-enlaces { gap: 14px; padding-right: 10px; }
  .franja-alta { font-size: 0.58rem; }
  .franja-alta-boton { padding: 3px 8px; }
  .franja-alta-cuenta { gap: 6px; }
  .franja-alta-dentro::before { margin-right: 5px; }
  /* Un filo que avisa de que la fila de la izquierda sigue */
  .franja-alta-cuenta { box-shadow: -14px 0 14px -8px rgba(var(--s-borde-rgb), 0.95); }

  /* La tira del electro deja de flotar pegada al fondo y entra en la fila.
     Flotando se comía el segundo botón: en pantalla estrecha se parte en tres
     líneas y crece más de lo que la portada tenía reservado abajo. Empujando
     no puede tapar nada, mida lo que mida y sea el móvil que sea. */
  .portada {
    min-height: auto;
    padding: 56px 0 0;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .portada-tira { position: relative; margin-top: 44px; }

  /* El margen lateral se repite a propósito: `padding` de una sola línea
     borraría el que trae `.contenedor` y el texto quedaría pegado al borde. */
  .portada-tira-fila { height: auto; padding: 12px 26px; flex-wrap: wrap; gap: 12px 18px; }
  .tira-electro { flex: 1 1 100%; order: -1; height: 34px; }

  .traduccion-fila { grid-template-columns: 1fr; gap: 5px; padding: 20px 22px; }
  .traduccion-flecha { display: none; }
  .traduccion-real { text-align: left; font-size: 0.72rem; }

  .nota-doble, .boletin { padding: 26px 22px; gap: 24px; }

  .bajar, .marca-bajada { display: none; }

  .hud-escuadra { width: 20px; height: 20px; }
}

@media (max-width: 560px) {
  .pie-fila { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .boton { width: 100%; }
}

/* ---------- Quien pide menos movimiento, menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .aparece { opacity: 1; transform: none; }
  .franja-paleta span { transform: none; }
  .electro-trazo { stroke-dashoffset: 0; }
  .electro-punto { display: none; }
  .portada-video { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   La estantería de minijuegos
   ═══════════════════════════════════════════════════════════════
   Filtros arriba, tarjetas debajo. Los filtros no se esconden tras
   un botón «Filtrar»: con treinta y cuatro materias, verlos es la
   mitad del trabajo. */

.filtros-biblioteca {
  margin-bottom: 34px;
  padding: 22px clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.42);
}

.filtros-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.filtro-etiqueta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.filtro-select {
  appearance: none;
  width: 100%;
  padding: 11px 34px 11px 13px;
  border: 1px solid var(--linea-viva);
  background-color: rgba(var(--g-negro-rgb), 0.85);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 0.94rem;
  /* La flechita va dibujada aquí para no depender de ninguna imagen. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.filtro-select:hover:not(:disabled) {
  border-color: var(--azumind-claro, var(--pulsar));
}

.filtro-select:focus-visible {
  outline: 2px solid var(--pulsar);
  outline-offset: 2px;
}

.filtro-select:disabled {
  opacity: 0.45;
  cursor: default;
}

.filtros-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.filtros-tipos:empty {
  display: none;
}

.chip-filtro {
  padding: 7px 15px;
  border: 1px solid var(--linea-viva);
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.chip-filtro:hover {
  color: var(--texto);
  border-color: var(--pulsar);
}

.chip-filtro-vivo {
  background: rgba(var(--pulsar-rgb), 0.14);
  border-color: var(--pulsar);
  color: var(--pulsar);
}

.filtros-pie {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}

.filtros-cuenta {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.filtros-limpiar {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cian);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--cian-rgb), 0.35);
}

.filtros-limpiar:hover {
  color: var(--pulsar);
  border-bottom-color: var(--pulsar);
}

/* ── Las tarjetas ── */

.rejilla-biblioteca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.biblioteca-cargando {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--texto-tenue);
  padding: 26px 0;
}

.juego-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.5);
  color: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--curva);
}

.juego-tarjeta:hover {
  border-color: var(--pulsar);
  background: rgba(var(--g-azul-rgb), 0.7);
  transform: translateY(-2px);
}

/* La escuadra de siempre, pero solo al pasar por encima: con veinte
   tarjetas a la vez, dibujarlas todas sería ruido. */
.juego-tarjeta::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--pulsar);
  border-right: 1px solid var(--pulsar);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.juego-tarjeta:hover::after {
  opacity: 1;
}

.juego-tarjeta-alto {
  display: flex;
  align-items: center;
  gap: 8px;
}

.juego-tarjeta-tipo {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian);
}

.juego-tarjeta-titulo {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
}

.juego-tarjeta-texto {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.juego-tarjeta-pie {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}

.juego-tarjeta-donde {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  line-height: 1.45;
}

.juego-tarjeta-jugar {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.juego-tarjeta-jugar::after {
  content: ' →';
}

.biblioteca-vacio {
  grid-column: 1 / -1;
  padding: 42px 26px;
  border: 1px dashed var(--linea-viva);
  text-align: center;
}

.biblioteca-vacio-titulo {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--texto);
  margin-bottom: 8px;
}

.biblioteca-vacio-texto {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 46ch;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   Jugar
   ═══════════════════════════════════════════════════════════════ */

.juego-cabeza {
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--linea);
}

.juego-cabeza .seccion-etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.juego-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}

.juego-volver {
  margin-top: 20px;
}

.juego-vacio {
  padding: 30px 0;
  color: var(--texto-suave);
}

/* ── La sopa ── */

.sopa-juego {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sopa-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.sopa-marcador {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--pulsar);
}

.sopa-ver-lista {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  cursor: pointer;
}

.sopa-ver-lista input {
  accent-color: var(--pulsar);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.sopa-ver-lista:hover {
  color: var(--texto-suave);
}

.sopa-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 26px;
  align-items: start;
}

@media (max-width: 860px) {
  .sopa-cuerpo {
    grid-template-columns: 1fr;
  }
}

/* La cuadrícula se estira o se encoge con la pantalla: las casillas son
   fracciones, no píxeles, y `aspect-ratio` las mantiene cuadradas. Así no
   hace falta medir nada desde JavaScript ni pedirle zoom a nadie. */
.sopa-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--lado), 1fr);
  gap: 1px;
  padding: 10px;
  max-width: 620px;
  border: 1px solid var(--linea-viva);
  background: rgba(var(--s-baja-rgb), 0.55);
  /* Sin esto, arrastrar por la cuadrícula selecciona texto en el escritorio
     y desplaza la página en el móvil. */
  user-select: none;
  touch-action: none;
}

.sopa-celda {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  /* En móvil manda el `vw`, en escritorio el techo. Así la letra crece con
     la casilla en vez de quedarse diminuta en una pantalla pequeña. */
  font-size: clamp(0.72rem, 3.1vw, 0.95rem);
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.sopa-celda:hover {
  background: rgba(var(--cian-rgb), 0.1);
}

/* 🔶 LA LETRA VA EN `--texto`, NO EN BLANCO.

   Estos tres fondos son VELOS —0,34 y 0,32 de opacidad—, así que el
   color que queda debajo es el de la página: verde oscuro en la cabina,
   verde pálido sobre papel. Un blanco escrito a pelo solo se ve en uno
   de los dos temas; en el claro la letra hallada desaparecía sobre su
   propio velo. `--texto` se da la vuelta con el tema, que es justo lo
   que un velo necesita. */
.sopa-celda-hallada {
  background: rgba(var(--vital-rgb), 0.34);
  color: var(--texto);
  font-weight: 700;
}

/* La seleccionada sí lleva blanco, pero entonces el fondo no puede ser
   un velo: al 0,8 sobre papel daba 4,22 con letra blanca y 3,71 con la
   oscura — no lo pasaba NINGUNA de las dos. Con el azul entero da 6,52.
   Es la misma regla que el botón rojo: quien lleva letra blanca encima
   tiene que ser un color macizo. */
.sopa-celda-seleccion,
.sopa-celda-hallada.sopa-celda-seleccion {
  background: var(--azumind);
  color: #fff;
  font-weight: 700;
}

.sopa-celda-errada {
  background: rgba(var(--nova-rgb), 0.32);
  color: var(--texto);
}

.sopa-celda-ancla {
  box-shadow: inset 0 0 0 2px var(--pulsar);
}

/* ── Las pistas ── */

.sopa-panel {
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.42);
  padding: 18px;
}

.sopa-panel-titulo {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pulsar);
  margin-bottom: 14px;
  line-height: 1.5;
}

.sopa-pistas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 520px;
  overflow-y: auto;
}

.sopa-pista {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--texto-suave);
  font-family: var(--cuerpo);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: color 0.2s ease, background 0.2s ease;
}

.sopa-pista:hover {
  color: var(--texto);
  background: rgba(var(--cian-rgb), 0.07);
}

.sopa-pista-numero {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-tenue);
  padding-top: 2px;
  min-width: 1.4em;
}

.sopa-item-hallada .sopa-pista-texto {
  color: var(--texto-tenue);
  text-decoration: line-through;
}

.sopa-item-hallada .sopa-pista-numero {
  color: var(--aurora, var(--aurora));
}

.sopa-item-enfocada {
  background: rgba(var(--cian-rgb), 0.07);
}

.sopa-ayuda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 12px 2.2em;
}

.sopa-largo {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.sopa-boton-ayuda {
  padding: 5px 12px;
  border: 1px solid var(--linea-viva);
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.sopa-boton-ayuda:hover {
  border-color: var(--pulsar);
  color: var(--pulsar);
}

/* La ayuda da el concepto, NUNCA la palabra: si la regalase, esto dejaría
   de ser estudio y pasaría a ser lectura. */
.sopa-explicacion {
  position: relative;
  padding: 18px 20px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.42);
  background: rgba(var(--pulsar-rgb), 0.09);
}

.sopa-explicacion p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--texto-suave);
}

.sopa-explicacion-cabeza {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.sopa-explicacion-etiqueta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.sopa-explicacion-cerrar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.sopa-explicacion-cerrar:hover {
  color: var(--pulsar);
}

.sopa-victoria {
  padding: 18px 20px;
  border: 1px solid rgba(var(--vital-rgb), 0.45);
  background: rgba(var(--vital-rgb), 0.12);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.sopa-victoria strong {
  color: var(--aurora, var(--aurora));
}

.sopa-columna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sopa-como {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--texto-tenue);
  max-width: 620px;
}

/* ═══════════════════════════════════════════════════════════════
   El centro de ayuda
   ═══════════════════════════════════════════════════════════════
   Las preguntas se abren y se cierran con <details>, que lo hace el
   navegador solo: sin JavaScript, funcionan con el teclado y el
   buscador del navegador (Ctrl+F) las encuentra aunque estén
   cerradas. Ninguna de esas tres cosas sale gratis si se programa
   a mano.                                                        */

.preguntas {
  /* El aire lateral se guarda aquí porque lo comparten el título y el texto:
     si se descuadran, la respuesta no arranca alineada con su pregunta. */
  --aire: clamp(18px, 2.4vw, 24px);
  --hueco-icono: 27px;
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.pregunta {
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.42);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pregunta:hover { border-color: var(--linea-viva); }

.pregunta[open] {
  border-color: rgba(var(--pulsar-rgb), 0.4);
  background: rgba(var(--g-azul-rgb), 0.6);
}

.pregunta summary {
  position: relative;
  padding: 18px var(--aire) 18px calc(var(--aire) + var(--hueco-icono));
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  /* Fuera el triangulito del navegador: ponemos el nuestro, que gira. */
  list-style: none;
}

.pregunta summary::-webkit-details-marker { display: none; }

/* El signo de más que se convierte en menos. Son dos barras cruzadas y solo
   gira la vertical: al llegar a 90° queda tumbada encima de la horizontal y
   se ve una raya. Girar la horizontal en vez de esconderla dejaría una
   diagonal, que no significa nada. */
.pregunta summary::before,
.pregunta summary::after {
  content: '';
  position: absolute;
  left: var(--aire);
  top: 50%;
  background: var(--pulsar);
  transition: transform 0.3s var(--curva);
}

.pregunta summary::before {
  width: 13px;
  height: 1.5px;
  margin-top: -0.75px;
}

.pregunta summary::after {
  width: 1.5px;
  height: 13px;
  margin-top: -6.5px;
  margin-left: 5.75px;
}

.pregunta[open] summary::after { transform: rotate(90deg); }

.pregunta summary:focus-visible {
  outline: 2px solid var(--pulsar);
  outline-offset: -2px;
}

.pregunta p {
  padding: 0 var(--aire) 20px calc(var(--aire) + var(--hueco-icono));
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--texto-suave);
  max-width: 66ch;
}

.pregunta p a {
  color: var(--pulsar);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pregunta p a:hover { color: var(--texto); }

/* Las tarjetas de «si no era esto» reaprovechan .juego, que ya existe;
   solo hay que hacer que el título entero sea el enlace. */
.juego h3 a { color: inherit; }
.juego:hover h3 a { color: var(--pulsar); }

/* ═══════════════════════════════════════════════════════════════
   La página de dirección equivocada (404)
   ═══════════════════════════════════════════════════════════════ */

.cabecera-sola { border-bottom: 1px solid var(--linea); }

.perdido {
  /* Contenedor del fondo de trazo, y recorte para que no se derrame. */
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 260px);
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.perdido-caja {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

.perdido .seccion-etiqueta { justify-content: center; }
.perdido .seccion-etiqueta .estado { margin-left: 4px; }

.perdido-titulo {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.perdido .seccion-entrada { margin-left: auto; margin-right: auto; }

.perdido-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 32px 0 26px;
}

.perdido .apoyo-nota { justify-content: center; }
.perdido .apoyo-nota a { color: var(--pulsar); text-decoration: underline; }

/* Lo publicado que todavía no tiene motor en la web. Ocupa toda la fila de la
   estantería y va en tono de nota, no de tarjeta: no es algo que se pueda
   abrir, es una aclaración de por qué no está. */
.biblioteca-espera {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--linea);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
}

/* Una tarjeta sola no debe estirarse a lo ancho de toda la fila. Con `auto-fit`
   la única columna se traga el hueco de las que faltan, y una tarjeta pequeña
   de 1128px de ancho no parece una tarjeta: parece un error.

   Se quedan pegadas a la izquierda, alineadas con el título de su sección —al
   contrario que los carteles, que se centran porque son piezas de escaparate.
   Si el navegador no entiende :has(), todo sigue como estaba. */
.rejilla-juegos:has(> :only-child),
.rejilla-biblioteca:has(> :only-child) {
  grid-template-columns: minmax(0, 380px);
  justify-content: start;
}

/* ═══════════════════════════════════════════════════════════════
   LOS MINIJUEGOS EN LA WEB
   ═══════════════════════════════════════════════════════════════
   Primero lo que comparten los seis —barra, marcador, cartel de
   ayuda y cierre— y después lo propio de cada uno. */

.partida-barra {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}

.partida-marcador {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pulsar);
  font-variant-numeric: tabular-nums;
}

.partida-barra-extra { margin-left: auto; }

.partida-cierre {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--aurora-rgb), 0.4);
  background: rgba(var(--vital-rgb), 0.1);
  color: var(--texto-suave);
  font-size: 0.98rem;
}

.partida-cierre strong { color: var(--aurora); }

/* El cartel de «aún no». Nunca lleva la palabra: lleva el concepto. */
.partida-explicacion {
  margin-top: 22px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.45);
  background: rgba(var(--pulsar-rgb), 0.08);
}

/* El mismo cartel cuando se ACIERTA. Cambia de color y de título —«Por
   eso era» en vez de «Aún no»— porque explicar un acierto y explicar un
   fallo son dos cosas distintas y no deben leerse igual. */
.partida-explicacion-bien {
  border-color: rgba(var(--vital-rgb), 0.5);
  background: rgba(var(--vital-rgb), 0.09);
}
.partida-explicacion-bien .partida-explicacion-cabeza {
  border-bottom-color: rgba(var(--vital-rgb), 0.3);
}
.partida-explicacion-bien .partida-explicacion-etiqueta { color: var(--vital); }

/* 🟢 «Casi» — el tercer estado, y a propósito NI verde NI de fallo.

   Quien marcó dos de tres correctas no acertó, pero tampoco se
   equivocó: se quedó corto. En ámbar, que es el color de «mira esto»
   en todo el sitio, y no en verde, que diría que ya está. */
.partida-explicacion-casi {
  border-color: rgba(var(--pulsar-rgb), 0.5);
  background: rgba(var(--pulsar-rgb), 0.09);
}
.partida-explicacion-casi .partida-explicacion-cabeza {
  border-bottom-color: rgba(var(--pulsar-rgb), 0.3);
}
.partida-explicacion-casi .partida-explicacion-etiqueta { color: var(--pulsar); }

.partida-explicacion-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--pulsar-rgb), 0.28);
}

.partida-explicacion-etiqueta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.partida-explicacion-cerrar {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.partida-explicacion-cerrar:hover { color: var(--texto); }

.partida-explicacion p {
  padding: 14px 16px 16px;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 68ch;
}

/* El temblor de «eso no». Dice que no sin decir qué era. */
@keyframes partida-negar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.partida-mal { animation: partida-negar 0.42s ease; }

/* Los botones de servicio, iguales en los seis */
.huecos-ayuda,
.anagrama-boton,
.ahorcado-boton,
.wordle-boton,
.cruci-ayuda {
  padding: 8px 15px;
  border: 1px solid var(--linea-viva);
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.huecos-ayuda:hover,
.anagrama-boton:hover,
.ahorcado-boton:hover,
.wordle-boton:hover,
.cruci-ayuda:hover {
  border-color: var(--pulsar);
  color: var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.08);
}

.anagrama-boton:disabled { opacity: 0.35; cursor: default; }

.ahorcado-boton-vivo,
.wordle-boton-vivo {
  border-color: var(--nova);
  color: var(--texto);
  background: rgba(var(--nova-rgb), 0.16);
}

/* ---------- Completar huecos ---------- */

.huecos-lista {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  counter-reset: hueco;
}

.huecos-fila {
  counter-increment: hueco;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.42);
}

.huecos-fila::before {
  content: counter(hueco);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-tenue);
  padding-top: 8px;
  min-width: 1.4em;
}

.huecos-frase {
  flex: 1 1 320px;
  font-size: 1.02rem;
  line-height: 2.1;
  color: var(--texto-suave);
}

.huecos-campo {
  display: inline-block;
  width: 9.5em;
  max-width: 100%;
  padding: 3px 10px;
  margin: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.07);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  font-weight: 600;
}

.huecos-campo:focus {
  outline: none;
  background: rgba(var(--pulsar-rgb), 0.16);
}

.huecos-fila-hecha { border-color: rgba(var(--aurora-rgb), 0.34); }

.huecos-fila-hecha .huecos-campo {
  border-bottom-color: var(--aurora);
  background: rgba(var(--aurora-rgb), 0.1);
  color: var(--aurora);
}

.huecos-pie { flex: 0 0 auto; padding-top: 4px; }

/* Al fallar con Enter, el botón de ayuda deja de ser discreto. */
.huecos-ayuda-viva { border-color: var(--pulsar); color: var(--pulsar); }

/* ---------- Anagrama ---------- */

.anagrama-juego .partida-cuerpo { text-align: center; }

.anagrama-pista {
  max-width: 60ch;
  margin: 0 auto 30px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.anagrama-armada {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 62px;
  margin-bottom: 30px;
}

.anagrama-hueco {
  width: 46px;
  height: 58px;
  border-bottom: 2px solid var(--linea-viva);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anagrama-hueco-lleno {
  border: 1px solid var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.12);
  cursor: pointer;
}

.anagrama-armada-buena .anagrama-hueco {
  border-color: var(--aurora);
  background: rgba(var(--aurora-rgb), 0.14);
  color: var(--aurora);
}

.anagrama-sueltas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 58px;
  margin-bottom: 26px;
}

.anagrama-letra {
  width: 48px;
  height: 52px;
  border: 1px solid var(--linea-viva);
  background: var(--panel-vivo);
  color: var(--texto);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--curva), border-color 0.2s ease;
}

.anagrama-letra:hover { border-color: var(--pulsar); transform: translateY(-3px); }

.anagrama-acciones,
.ahorcado-acciones,
.wordle-acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Ahorcado ---------- */

.ahorcado-juego .partida-cuerpo { text-align: center; }

.ahorcado-energia {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ahorcado-energia-nombre {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--texto-tenue);
  margin-right: 4px;
}

.ahorcado-punto {
  width: 9px;
  height: 9px;
  background: var(--aurora);
  box-shadow: 0 0 8px rgba(var(--aurora-rgb), 0.6);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.ahorcado-punto-gastado {
  background: var(--linea);
  box-shadow: none;
}

.ahorcado-pista {
  max-width: 60ch;
  margin: 0 auto 28px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.ahorcado-palabra {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.ahorcado-letra {
  width: 38px;
  height: 48px;
  border-bottom: 2px solid var(--linea-viva);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ahorcado-letra-vista { border-bottom-color: var(--pulsar); }

.ahorcado-palabra-buena .ahorcado-letra {
  border-bottom-color: var(--aurora);
  color: var(--aurora);
}

.ahorcado-teclado {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 560px;
  margin: 0 auto 26px;
}

.ahorcado-tecla {
  width: 42px;
  height: 44px;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto-suave);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ahorcado-tecla:hover:not(:disabled) { border-color: var(--pulsar); color: var(--texto); }
.ahorcado-tecla:disabled { cursor: default; }

.ahorcado-tecla-buena {
  background: rgba(var(--vital-rgb), 0.28);
  color: var(--aurora);
  border-color: transparent;
}

.ahorcado-tecla-mala { opacity: 0.28; }

.ahorcado-aviso,
.wordle-aviso {
  flex: 1 1 100%;
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--texto-tenue);
}

/* ---------- Wordle ---------- */

.wordle-juego .partida-cuerpo { text-align: center; }

.wordle-elegir { max-width: 620px; margin: 0 auto; }

.wordle-elegir-titulo {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 8px;
}

.wordle-elegir-texto {
  color: var(--texto-tenue);
  font-size: 0.95rem;
  margin-bottom: 26px;
}

.wordle-elegir-fila {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.wordle-elegir-boton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 22px;
  border: 1px solid var(--linea-viva);
  background: var(--panel);
  color: var(--texto-suave);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s var(--curva);
}

.wordle-elegir-boton:hover { border-color: var(--pulsar); transform: translateY(-3px); }

.wordle-elegir-numero {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--texto);
}

.wordle-elegir-cuantas {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}

.wordle-pista {
  max-width: 58ch;
  margin: 0 auto 24px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.wordle-tablero {
  display: grid;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}

.wordle-fila {
  display: grid;
  grid-template-columns: repeat(var(--largo), minmax(0, 52px));
  gap: 6px;
}

.wordle-casilla {
  aspect-ratio: 1;
  border: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto);
}

.wordle-casilla-escrita { border-color: var(--linea-viva); }

/* 🔶 LAS DOS CASILLAS DE COLOR VAN CON FICHA DE RELLENO Y TINTA PROPIA.

   Antes usaban `--vital` y `--pulsar`, que sobre papel son colores de
   LETRA: la casilla verde salía verde oscuro con letra clara encima
   (2,24) y la ámbar, marrón con `--cosmos-hondo`, que en el tema claro
   ni siquiera está declarado.

   Es el mismo fallo que tenía la nave del mapa, y es cada letra de cada
   palabra del juego. */
.wordle-casilla-sitio {
  background: var(--vital-lleno);
  border-color: var(--vital-lleno);
  color: var(--vital-lleno-tinta);
}

.wordle-casilla-suelta {
  background: var(--pulsar-lleno);
  border-color: var(--pulsar-lleno);
  color: var(--pulsar-lleno-tinta);
}

.wordle-casilla-fuera {
  background: rgba(var(--g-panel-rgb), 0.85);
  border-color: transparent;
  color: var(--texto-tenue);
}

.wordle-teclado { display: grid; gap: 6px; margin: 0 auto 22px; max-width: 620px; }
.wordle-teclado-fila { display: flex; justify-content: center; gap: 5px; }

.wordle-tecla {
  min-width: 38px;
  height: 48px;
  padding: 0 6px;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto-suave);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.wordle-tecla:hover:not(:disabled) { border-color: var(--pulsar); }
.wordle-tecla-ancha { min-width: 64px; font-size: 0.7rem; font-family: var(--mono); }
/* El teclado va con las mismas fichas que el tablero: es la misma
   información dicha dos veces, y si no coincidieran el jugador vería una
   letra verde arriba y la misma tecla de otro verde abajo. */
.wordle-tecla-sitio {
  background: var(--vital-lleno);
  border-color: var(--vital-lleno);
  color: var(--vital-lleno-tinta);
}

.wordle-tecla-suelta {
  background: var(--pulsar-lleno);
  border-color: var(--pulsar-lleno);
  color: var(--pulsar-lleno-tinta);
}

/* 🔶 Y la descartada se apaga con COLOR, no con `opacity`. Al 0,3 la
   letra se desteñía hasta no leerse, y una tecla descartada hay que
   poder LEERLA: es la mitad de la información del juego —qué letras ya
   sabes que no van—. Es la misma corrección que `.quiz-comprobar` y
   `.quiz-opcion-mal`. */
.wordle-tecla-fuera {
  background: rgba(var(--g-panel-rgb), 0.85);
  border-color: transparent;
  color: var(--texto-tenue);
}

.wordle-copiar {
  width: 100%;
  max-width: 420px;
  padding: 12px;
  border: 1px solid var(--linea-viva);
  background: var(--panel);
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
}

/* ---------- Crucigrama ---------- */

.cruci-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 30px;
  align-items: start;
}

.cruci-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: 2px;
  max-width: 560px;
}

.cruci-hueco { aspect-ratio: 1; }

.cruci-casilla {
  position: relative;
  aspect-ratio: 1;
  background: rgba(var(--g-azul-rgb), 0.9);
  border: 1px solid var(--linea);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cruci-casilla-activa { border-color: var(--pulsar); background: rgba(var(--pulsar-rgb), 0.12); }

.cruci-casilla-hallada {
  background: rgba(var(--vital-rgb), 0.2);
  border-color: rgba(var(--aurora-rgb), 0.4);
}

.cruci-numero {
  position: absolute;
  top: 1px;
  left: 3px;
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--texto-tenue);
  pointer-events: none;
  z-index: 1;
}

.cruci-campo {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--display);
  font-size: clamp(0.8rem, 2.4vw, 1.15rem);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.cruci-campo:focus { outline: 2px solid var(--pulsar); outline-offset: -2px; }
.cruci-casilla-hallada .cruci-campo { color: var(--aurora); }

.cruci-en-curso {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-baja-rgb), 0.5);
  min-height: 56px;
}

.cruci-en-curso-numero {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--pulsar);
  flex: 0 0 auto;
}

.cruci-en-curso-texto { flex: 1 1 200px; font-size: 0.95rem; line-height: 1.5; }

.cruci-panel { display: grid; gap: 22px; max-height: 620px; overflow-y: auto; }

.cruci-grupo-titulo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 10px;
}

.cruci-pistas { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }

.cruci-pista {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.cruci-pista:hover { background: var(--panel-vivo); }

.cruci-pista-numero {
  color: var(--pulsar);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding-top: 2px;
}

.cruci-item-activa .cruci-pista { background: rgba(var(--pulsar-rgb), 0.1); }

.cruci-item-hallada .cruci-pista {
  color: var(--texto-tenue);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--aurora-rgb), 0.6);
}

.cruci-fuera {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

@media (max-width: 860px) {
  .cruci-cuerpo { grid-template-columns: 1fr; }
  .cruci-panel { max-height: none; }
  .cruci-rejilla { max-width: none; }
}

@media (max-width: 560px) {
  .huecos-frase { line-height: 2.3; }
  .huecos-campo { width: 7.5em; }
  .anagrama-letra, .anagrama-hueco { width: 40px; }
  .ahorcado-tecla { width: 36px; height: 42px; font-size: 0.9rem; }
  .wordle-tecla { min-width: 28px; height: 44px; padding: 0 3px; font-size: 0.85rem; }
  .wordle-tecla-ancha { min-width: 50px; font-size: 0.6rem; }
  .wordle-fila { grid-template-columns: repeat(var(--largo), minmax(0, 44px)); }
}

@media (prefers-reduced-motion: reduce) {
  .partida-mal { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LLEVÁRSELO EN PAPEL
   ═══════════════════════════════════════════════════════════════

   El botón de descargar y el cuadro que sale antes: para elegir cómo
   la quieres, o para pedir cuenta si aún no la tienes.

   Va en verde VITAL y no en ámbar: ámbar es el color de los
   instrumentos y de lo que espera; esto es algo que se consigue.      */

.boton-papel {
  border-color: rgba(var(--vital-rgb), 0.55);
  color: var(--aurora);
}

.boton-papel:hover:not(:disabled) {
  background: rgba(var(--vital-rgb), 0.16);
  border-color: var(--vital);
}

.boton-papel:disabled {
  opacity: 0.6;
  cursor: default;
}

.papel-caja {
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--linea);
  background: var(--panel);
}

.papel-caja[hidden] { display: none; }

.papel-titulo {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

.papel-texto {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 56ch;
}

.papel-grupo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.papel-etiqueta {
  flex: 0 0 72px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.papel-opciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Botones y no un menú desplegable: con dos o tres opciones se ven
   todas de un vistazo y se tocan mejor con el pulgar. */
.papel-opcion {
  padding: 8px 14px;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--cuerpo);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.papel-opcion:hover {
  border-color: var(--linea-viva);
  color: var(--texto);
}

.papel-opcion[aria-pressed='true'] {
  border-color: var(--vital);
  background: rgba(var(--vital-rgb), 0.16);
  color: var(--aurora);
}

.papel-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.papel-nota {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--texto-tenue);
}

@media (max-width: 560px) {
  .papel-caja { padding: 18px 16px; }
  .papel-etiqueta { flex: 1 1 100%; }
  .papel-botones .boton { flex: 1 1 auto; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   POR DÓNDE IBAS
   ═══════════════════════════════════════════════════════════════

   Lo que llevas de cada minijuego, en la página de tu cuenta. Es lo
   primero de la economía que es verdad: antes había tres marcadores
   —ATP, vesículas y rango— que enseñaban 100 · 0 · 1 para siempre
   porque nada los movía. Vuelven cuando se muevan.                  */

.progreso-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.progreso-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(var(--s-hondo-rgb), 0.72);
}

.progreso-que {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.progreso-nombre {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--texto);
}

.progreso-cuenta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-tenue);
}

/* La barra ocupa el ancho entero de la fila, debajo del nombre. Sin
   número dentro: ya está al lado, y repetirlo es ruido. */
.progreso-barra {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  background: rgba(var(--linea-rgb), 0.14);
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--azumind), var(--cian));
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Terminado en verde VITAL: es lo que cura, y aquí es lo que se logró. */
.progreso-relleno-completo {
  background: linear-gradient(90deg, var(--vital), var(--aurora));
}

.progreso-enlace {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pulsar);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.35);
}

.progreso-enlace:hover {
  background: rgba(var(--pulsar-rgb), 0.12);
}

@media (max-width: 560px) {
  .progreso-fila { padding: 12px 13px; }
  .progreso-enlace { padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   LA ECONOMÍA EN EL PERFIL
   ═══════════════════════════════════════════════════════════════
   Diseñado a 390 px primero: esta pantalla es la principal de la app
   móvil que viene. Lo que cabe en un teléfono cabe en un ordenador;
   al revés casi nunca.                                            */

.economia {
  margin: 22px 0 0;
  padding: 20px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-media-rgb), 0.5);
}

/* El rótulo de la barra: qué mide a la izquierda, cuánto llevas a la
   derecha. En mono y en versalitas, como toda la telemetría de la casa. */
.economia-rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font: 500 0.6rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* (El nivel y el escalafón ya no se pintan aquí: subieron a la cabecera
   como dos agujas de instrumento. Ver `.perfil-lectura`.) */

/* La barra. Solo sube: la experiencia no se pierde nunca, y la barra
   lo dice sin necesidad de explicarlo. */
.economia-barra {
  height: 9px;
  padding: 1px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.7);
  overflow: hidden;
}

.economia-barra span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--vital), var(--aurora));
  box-shadow: 0 0 12px rgba(var(--aurora-rgb), 0.45);
  transition: width 0.6s var(--curva);
}

.economia-falta {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

/* Los tres números, en una tira dividida por líneas finas —no en tres
   cajas sueltas—. Es el mismo recurso de `.marcadores` y `.conectadas`:
   el fondo de la tira ES la línea, y cada casilla se pinta encima
   dejando un pixel de hueco. Así solo hay una línea entre dos números,
   no dos bordes pegados.

   minmax(0, 1fr), no 1fr: sin el 0 las casillas no encogen por debajo
   de su contenido y se salen de la pantalla en el móvil. */
.economia-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 1px;
  margin: 18px 0 0;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.economia-dato {
  min-width: 0;
  padding: 13px 15px;
  background: rgba(var(--s-hondo-rgb), 0.72);
}

.economia-dato dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.economia-dato dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 1.32rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  line-height: 1.15;
}

/* Sin energía se marca en ÁMBAR, no en rojo. No es un error: es que
   toca esperar, y eso no se regaña. El rojo NASA está reservado para lo
   que está vivo y para lo que no tiene vuelta atrás.

   Como las casillas ya no tienen borde propio —la tira las separa con
   una línea—, el aviso es un filo encendido abajo: el mismo recurso con
   el que se marca la pestaña abierta. */
.economia-dato-vacio {
  box-shadow: inset 0 -2px 0 rgba(var(--pulsar-rgb), 0.75);
}

.economia-dato-vacio dd { color: var(--pulsar); }

.economia-pie {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--texto-tenue);
}

.economia-recarga {
  margin-top: 16px;
  width: 100%;
}

/* En pantalla grande el botón va a su ancho. Estirado a 1180 px, un
   botón verde de lado a lado es lo más ruidoso de la página — y esto es
   una invitación, no una alarma. */
@media (min-width: 620px) {
  .economia-recarga { width: auto; }
}

/* ── En el móvil, cada dato en horizontal ──────────────────────
   Apilados hacia abajo, tres datos con su explicación se comen media
   pantalla. En tres columnas no caben: entre los paddings anidados
   quedan 238 px útiles a 390, y «lleno a las 14:37» se partiría en
   cuatro líneas.

   La salida es girarlos: el nombre y el número en la misma línea, la
   explicación debajo. Se lee igual de bien y ocupa la mitad. */
@media (max-width: 620px) {
  .economia { padding: 16px; }

  /* El hueco sigue siendo de UN pixel: es la línea que separa, no un
     margen. Con 8 se convertía en tres bandas gruesas. */
  .economia-fila { gap: 1px; }

  .economia-dato {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 10px;
    padding: 11px 13px;
  }

  .economia-dato dd {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.18rem;
  }

  .economia-pie {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LA EXPEDICIÓN
   ═══════════════════════════════════════════════════════════════ */

/* El botón que cuesta energía. Ámbar, el color de lo que vale algo en
   Azumind — el mismo del ATP. Nunca rojo: gastar energía es una
   decisión, no un peligro. */
.boton-expedicion {
  border-color: rgba(var(--pulsar-rgb), 0.5);
  background: rgba(var(--pulsar-rgb), 0.1);
  color: var(--pulsar);
}

.boton-expedicion:hover {
  border-color: var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.18);
}

/* ── El aviso ────────────────────────────────────────────────────
   Tres estados, tres colores, y ninguno es rojo:

     espera      quedarse sin ATP no es equivocarse
     expedicion  estás gastando energía, que se note
     premio      lo que ganaste, y es el momento que engancha        */

.juego-aviso {
  display: grid;
  gap: 4px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(var(--linea-rgb), 0.22);
  background: rgba(var(--s-media-rgb), 0.55);
}

.juego-aviso[hidden] { display: none; }

.juego-aviso strong {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--texto);
}

.juego-aviso p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-suave);
  max-width: 62ch;
}

.aviso-espera {
  border-color: rgba(var(--linea-rgb), 0.28);
}

.aviso-expedicion {
  border-color: rgba(var(--pulsar-rgb), 0.4);
  background: rgba(var(--pulsar-rgb), 0.07);
}
.aviso-expedicion strong { color: var(--pulsar); }

.aviso-premio {
  border-color: rgba(var(--aurora-rgb), 0.45);
  background: rgba(var(--vital-rgb), 0.12);
}
.aviso-premio strong { color: var(--aurora); }

/* ═══════════════════════════════════════════════════════════════
   MOTOR 6 · PREGUNTAS, en la web
   ═══════════════════════════════════════════════════════════════
   Las mismas reglas que en el Estudio, y a propósito: lo que se ve al
   crear una pregunta tiene que ser lo que ve el estudiante.          */

.quiz-pregunta {
  margin: 4px 0 20px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
  text-wrap: pretty;
}

.quiz-opciones {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ancho entero y 56 px de alto: en el móvil se toca con el pulgar sin
   apuntar, que es como se juega esto de verdad. */
.quiz-opcion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--linea-rgb), 0.24);
  background: rgba(var(--s-media-rgb), 0.55);
  /* 🔶 `--texto`, no un blanco a pelo. El fondo es la superficie media,
     que en el tema claro es BLANCA: con `#e8f1fb` escrito aquí, las
     cuatro opciones de todas las preguntas del sitio salían en blanco
     sobre blanco. Lo vio Andrés jugando el Entrenamiento en el iPad. */
  color: var(--texto);
  font: 500 0.98rem/1.45 var(--cuerpo);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.quiz-opcion:hover:not(:disabled) {
  /* Era el valor OSCURO de `--linea-viva` copiado a pelo: sobre papel
     dejaba el filo del hover en un azul pastel sin agarre. */
  border-color: rgba(var(--linea-rgb), 0.5);
  background: rgba(var(--g-panel-rgb), 0.75);
}

.quiz-opcion:active:not(:disabled) { transform: scale(0.995); }
.quiz-opcion:focus-visible { outline: 2px solid var(--pulsar); outline-offset: 2px; }
.quiz-opcion:disabled { cursor: default; }

.quiz-letra {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--linea-rgb), 0.3);
  font: 700 0.8rem/1 var(--mono);
  color: var(--texto-tenue);
}

.quiz-texto { min-width: 0; }

/* ── Sabor A · las tres direcciones ──

   Una pregunta de «¿sube, baja o no cambia?» se lee mucho mejor con una
   flecha que como tres renglones de texto. Lo decide `reglasQuiz.js`;
   aquí solo se pinta.

   🔴 LA FLECHA NO LLEVA EL SENTIDO SOLA. Va siempre con su palabra
   escrita al lado, y el color es solo el filo — nunca el relleno.
   `estilos.css:80` ya lo exige para todo el sitio, y aquí importa el
   doble: uno de cada doce hombres no distingue el rojo del verde, y una
   pregunta que solo se puede contestar viendo colores no la contesta. */
.quiz-opciones-direccion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 10px;
}

.quiz-opciones-direccion .quiz-opcion {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: center;
}

.quiz-flecha {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 700 1.15rem/1 var(--mono);
}

/* El filo encendido y la flecha llevan el color; el fondo no se rellena. */
.quiz-opcion-sube  { border-color: rgba(var(--vital-rgb), 0.5); }
.quiz-opcion-sube  .quiz-flecha { color: var(--vital); }
.quiz-opcion-baja  { border-color: rgba(var(--pulsar-rgb), 0.5); }
.quiz-opcion-baja  .quiz-flecha { color: var(--pulsar); }
.quiz-opcion-igual { border-color: rgba(var(--linea-rgb), 0.45); }
.quiz-opcion-igual .quiz-flecha { color: var(--texto-suave); }

/* ── Sabor B · la tabla de dos variables ──

   El ítem de muestra del propio manual del NBME: se cruzan dos o tres
   variables y hay una sola fila correcta. Sin fila de cabecera — la
   pregunta nombra las variables «en ese orden», que es como lo escribe
   el propio manual, y una cabecera sobre seis filas no cabe en un
   teléfono. */
.quiz-opciones-tabla .quiz-opcion {
  grid-template-columns: auto repeat(var(--columnas, 2), minmax(0, 1fr));
  gap: 10px;
}

.quiz-celda {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* Un filo tenue entre columnas, para que se lean como tabla y no como
   una frase partida. Solo entre celdas, nunca antes de la primera. */
.quiz-celda + .quiz-celda {
  border-left: 1px solid rgba(var(--linea-rgb), 0.22);
  padding-left: 10px;
}

@media (max-width: 30rem) {
  /* En un teléfono, dos columnas de texto se estrechan hasta partir cada
     palabra. Mejor una debajo de otra, con la raya arriba en vez de al
     lado. */
  .quiz-opciones-tabla .quiz-opcion {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .quiz-celda + .quiz-celda {
    grid-column: 2;
    border-left: 0;
    border-top: 1px solid rgba(var(--linea-rgb), 0.22);
    padding-left: 0;
    padding-top: 6px;
  }
}

.quiz-opcion-bien {
  border-color: rgba(var(--aurora-rgb), 0.55);
  background: rgba(var(--vital-rgb), 0.18);
  color: var(--texto);
}
.quiz-opcion-bien .quiz-letra { border-color: rgba(var(--aurora-rgb), 0.6); color: var(--aurora); }

/* La fallada se APAGA. La correcta no se marca: si se marcara, el
   ejercicio se acabaría ahí y no habría nada que recordar. */
/* 🔶 Apagada con COLOR, no con `opacity` — la misma corrección que está
   escrita treinta líneas más abajo, en `.quiz-comprobar:disabled`. Se
   arregló allí y aquí no, que es como se quedan los hermanos: el fallo
   se cura donde se vio y no donde vive.

   Aquí no era un desastre —4,48 sobre papel, a un pelo del 4,5 que pide
   la norma— pero lo que desteñía era el TEXTO DE UNA OPCIÓN: cuál fue la
   que elegiste mal. Repasar es volver a leerla. Ahora 6,02. */
.quiz-opcion-mal {
  /* El filo y el fondo bajan para seguir viéndose apagada — antes lo
     hacía el `opacity` global, que apagaba también la letra. */
  border-color: rgba(var(--pulsar-rgb), 0.3);
  background: rgba(var(--pulsar-rgb), 0.05);
  color: var(--texto-tenue);
}
.quiz-opcion-mal .quiz-letra { border-color: rgba(var(--pulsar-rgb), 0.5); color: var(--pulsar); }

/* ── La elegida, todavía sin comprobar ──
   Tiene que verse ELEGIDA sin parecer acertada: si se pintara de verde
   como la buena, la mecánica de comprobar no serviría de nada porque el
   color ya habría dado la respuesta. Por eso va en azul de marca, que
   aquí no significa «bien» sino «esta». */
.quiz-opcion-elegida {
  border-color: rgba(var(--azumind-rgb), 0.85);
  background: rgba(var(--azumind-rgb), 0.22);
  box-shadow: inset 3px 0 0 var(--azumind);
}
.quiz-opcion-elegida .quiz-letra {
  border-color: rgba(var(--azumind-rgb), 0.75);
  color: var(--texto);
}

/* 🔶 El doble que el hueco entre opciones (10 px), y por un motivo:
   con 16 el botón se leía como una opción más de la lista, y no lo es.
   Las opciones son elecciones que se pueden cambiar; el botón es el que
   compromete. Dos cosas distintas tienen que verse distintas.

   Lo vio Andrés en una captura. */
.quiz-accion { margin-top: 26px; }

.quiz-comprobar {
  width: 100%;
  justify-content: center;
}

/* ── 🔶 «No estoy seguro» ──

   Discreto A PROPÓSITO. No es una apuesta ni una segunda decisión: es
   un apunte al margen que solo adelanta la vuelta de la pregunta. Si se
   pintara como un botón de verdad, parecería que hay algo en juego — y
   no lo hay, que es justo la diferencia con la versión clásica de esto,
   la que penaliza. */
.quiz-duda {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font: 500 0.86rem/1.4 var(--cuerpo);
  text-align: left;
  cursor: pointer;
}

.quiz-duda:hover { color: var(--texto-suave); }
.quiz-duda:focus-visible { outline: 2px solid var(--pulsar); outline-offset: 2px; }

.quiz-duda-caja {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(var(--linea-rgb), 0.5);
  border-radius: 4px;
}

/* 🔴 UNA PALOMITA, NO UNA CRUZ. El primer intento cruzaba dos
   diagonales y salía una X — y una X se lee como «error», que es
   exactamente lo contrario de lo que esto significa. Decir que dudas no
   es equivocarse: no cuesta nada. */
.quiz-duda-caja::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Marcada: ámbar, que es el color de «mira esto» en todo el sitio. Y
   con la palomita dibujada, que el color solo no basta. */
.quiz-duda-si { color: var(--pulsar); }
.quiz-duda-si .quiz-duda-caja { border-color: var(--pulsar); }
.quiz-duda-si .quiz-duda-caja::after { border-color: var(--pulsar); }
/* Apagado, no escondido: un botón que aparece y desaparece mueve la
   página bajo el dedo justo cuando se va a tocar.

   🔶 Y apagado con COLOR, no con `opacity`. Al 0,45 el texto se desteñía
   contra lo que tuviera detrás: 2,0 de contraste sobre papel y 2,6 en la
   cabina, donde la norma pide 4,5. Y lo que se volvía ilegible era justo
   la frase que dice qué hacer —«Elige una respuesta»—, que es el único
   sitio donde se explica la mecánica de elegir y comprobar.

   Un botón apagado no está obligado a cumplir la norma —las reglas
   eximen a los controles inactivos— pero ese permiso es para un botón
   que dice «Comprobar». Este dice qué hacer, y eso hay que leerlo.

   Con `--texto-tenue` se sigue viendo apagado —pierde el ámbar, que es
   la señal de «esto se puede pulsar»— y se lee: 5,9 sobre papel. */
.quiz-comprobar:disabled {
  border-color: rgba(var(--linea-rgb), 0.28);
  background: rgba(var(--s-media-rgb), 0.4);
  color: var(--texto-tenue);
  cursor: default;
}

.quiz-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.quiz-cuenta {
  margin: 0 auto;
  font: 500 0.78rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.quiz-mover { flex: 0 0 auto; }

@media (max-width: 560px) {
  .quiz-opcion { gap: 11px; padding: 12px 13px; font-size: 0.93rem; }
  .quiz-letra { width: 25px; height: 25px; }
  .quiz-mover { font-size: 0.82rem; padding-left: 12px; padding-right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL PERFIL
   ═══════════════════════════════════════════════════════════════

   ── Lo que arregla este bloque ──

   1. EL ANCHO. `.cuenta` está topada en 520 px porque nació siendo un
      formulario de entrada, y un formulario se lee mejor angosto. El
      perfil se le fue colgando debajo y heredó la medida: en un
      ordenador quedaba una tira delgada en mitad de la pantalla.
      `.cuenta-ancha` —que `cuenta.js` solo pone cuando hay sesión—
      suelta ese tope. La puerta sigue estrecha, que es donde acierta.

   2. LA IDENTIDAD. La economía, la constelación y el genoma se hicieron
      después que el resto del sitio y salieron con las esquinas
      REDONDEADAS. Todo lo demás es cuadrado con escuadra fina: la
      `.pieza` de la portada, `.cuenta-panel`, `.marcador`,
      `.progreso-fila`, el botón del menú. El manual dice que la línea
      fina es «la protagonista de toda la interfaz», y redondear la
      apaga. Aquí se vuelve a la cabina: plancha cuadrada, escuadra, y
      el rojo NASA donde tiene que estar.

   ── Dónde va el NOVA, y por qué solo ahí ──

   El manual lo dice claro: «el más ruidoso de la paleta: va con
   cuentagotas y nunca de fondo». Así que en esta página significa dos
   cosas, y ninguna más:

     · ESTO ERES TÚ, EN VIVO → las dos escuadras de la cabecera, la
       línea que la cruza, la marca de cada panel y la pestaña abierta.
     · DE ESTO NO SE VUELVE   → el botón principal y borrar la cuenta.

   Lo que NO lleva nova: el ATP vacío, que va en ámbar porque quedarse
   sin energía no es equivocarse —es que toca esperar, y eso no se
   regaña—, y las barras, que van en verde VITAL, que es lo que crece.

   ── Y la regla de siempre ──

   Se diseña a 390 px primero. La rejilla de dos columnas es lo que se
   AÑADE en pantalla grande, no lo que se recorta en el teléfono.     */

.cuenta-ancha { max-width: none; }

/* ── La plancha ──
   La caja de la casa: cuadrada, filo de una línea, y la escuadra ámbar
   abajo a la derecha. Es la misma `.pieza` de la portada, para que el
   perfil no parezca de otra página. */

.plancha {
  position: relative;
  padding: 22px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.62), rgba(var(--s-panel-rgb), 0.72));
}

.plancha::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.5;
}

/* ── La cabecera: el panel de instrumentos ──
   Una sola plancha ancha que se lee de izquierda a derecha, como un
   tablero: quién eres, en qué nivel vas, y las agujas. No se parte en
   dos columnas ni en pantalla grande — un tablero partido por la mitad
   deja media pantalla vacía y pierde el renglón. */

.perfil-cabeza {
  padding: 26px;
  margin-bottom: 22px;
  background: linear-gradient(158deg, rgba(var(--g-panel-vivo-rgb), 0.66), rgba(var(--g-negro-rgb), 0.78));
}

/* Las dos escuadras en rojo NASA, arriba a la izquierda y abajo a la
   derecha: LOS MISMOS DOS CANTOS QUE CORTA EL LOGO. No es adorno; es la
   firma de la marca puesta donde dice «este eres tú». */
.perfil-cabeza::before,
.perfil-cabeza::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--nova);
  opacity: 0.85;
}

.perfil-cabeza::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.perfil-cabeza::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.perfil-quien {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 18px;
  min-width: 0;
}

/* ── La inicial, con la silueta del logo ──
   Mientras no haya fotos, la letra hace de foto: es gratis, no pide
   subir nada y llena el hueco que deja una cabecera solo de texto.

   El recorte corta arriba a la izquierda y abajo a la derecha, igual
   que el logo. Como `clip-path` también se lleva por delante el borde,
   el filo se dibuja con una capa debajo: el fondo del elemento ES el
   filo, y `::before` mete el relleno pixel y medio hacia dentro. */
.perfil-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  background: rgba(var(--pulsar-rgb), 0.55);
  clip-path: polygon(19% 0, 100% 0, 100% 81%, 81% 100%, 0 100%, 0 19%);
}

.perfil-avatar::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  /* 🔶 EL AZUL ERA DEMASIADO CLARO PARA LLEVAR ÁMBAR ENCIMA.

     Con `#1c6fbd` la inicial daba 2,38 en la cabina y 1,17 sobre papel —
     mal en los DOS temas, no solo en uno. Y el degradado lo escondía: la
     letra cae en un punto u otro según el nombre, así que unas iniciales
     se leían y otras no.

     La chapa es una isla oscura fija —como la portada— así que se ahonda
     el azul en vez de aclarar la letra. Con el ámbar encima: 5,36. */
  background: linear-gradient(155deg, #0d3a63, var(--cosmos));
  clip-path: polygon(19% 0, 100% 0, 100% 81%, 81% 100%, 0 100%, 0 19%);
}

.perfil-inicial {
  position: relative;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  /* El ámbar LLENO, que no se da la vuelta: debajo hay una chapa oscura
     fija, así que aquí la letra tiene que ser clara en los dos temas. */
  color: var(--pulsar-lleno);
  text-shadow: 0 0 18px rgba(var(--pulsar-rgb), 0.5);
}

.perfil-quien-texto { min-width: 0; }

.perfil-quien-texto .seccion-etiqueta { margin-bottom: 9px; }

.cuenta .perfil-saludo {
  margin-bottom: 5px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.perfil-correo {
  margin: 0;
  font: 400 0.8rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
  overflow-wrap: anywhere;
}

/* ── Nivel y escalafón: dos agujas ──
   Rótulo en mono arriba, número grande debajo. Así se lee un
   instrumento, y es lo que separa un tablero de una lista. */

.perfil-instrumentos {
  display: flex;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.perfil-lectura {
  min-width: 96px;
  padding: 11px 16px 12px;
  background: rgba(var(--s-hondo-rgb), 0.72);
}

.perfil-lectura dt {
  font: 500 0.58rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.perfil-lectura dd {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--texto);
}

/* ── El escalafón dice un NOMBRE, no una cifra ──
   Antes ponía «02» y ahora pone «Médico subespecialista». A 1,75rem eso
   revienta el tablero, y además un nombre no quiere leerse como un
   número: baja de tamaño, se le deja envolver en dos renglones, y el
   «3 de 25» cae debajo en pequeño para quien quiera ubicarse. */
.perfil-lectura-rango {
  flex: 1 1 auto;
  min-width: 158px;
}

.perfil-lectura-rango dd {
  color: var(--pulsar);
  font-size: 1.16rem;
  line-height: 1.14;
  text-wrap: balance;
}

.perfil-lectura-cola {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--texto-tenue);
}

.perfil-lectura-rango .perfil-lectura-cola {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* ── La línea que cruza el tablero ──
   Rojo NASA que se apaga hacia la derecha, igual que la flecha de la
   portada. Separa quién eres de cómo vas, y es lo que hace que la
   cabecera se lea como un instrumento y no como una tarjeta. */
.perfil-vitales {
  position: relative;
  min-width: 0;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}

.perfil-vitales::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, var(--nova), rgba(var(--nova-rgb), 0));
  box-shadow: 0 0 9px rgba(var(--nova-rgb), 0.5);
}

/* La caja de la economía ya no lleva marco propio: el marco es la
   cabecera. */
.perfil-vitales .economia {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ── Las pestañas ── */

.perfil-pestanas { margin-bottom: 20px; }

/* La pestaña abierta lleva el filo rojo con su halo: es la misma señal
   que subraya el menú de arriba, y aquí dice «estás en esta». */
.perfil-pestanas .cuenta-pestana {
  letter-spacing: 0.02em;
}

.perfil-pestanas .cuenta-pestana-viva {
  box-shadow: inset 0 -2px 0 var(--nova), 0 8px 22px -14px rgba(var(--nova-rgb), 1);
}

/* ── La rejilla ──
   Constelación y genoma, hombro con hombro: son dos respuestas a dos
   preguntas distintas —«¿qué he conseguido?» y «¿por dónde voy flojo?»—
   y se comparan mejor lado a lado que una debajo de otra.

   `auto-fit` con `min(100%, 340px)` hace las tres cosas solo: dos
   columnas si caben, una si no, y ancho completo si solo llegó una de
   las dos (pasa cuando aún no has tocado ninguna materia). */
.perfil-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 16px;
}

/* Dentro de la rejilla manda el `gap`, no los márgenes de cada plancha.

   Y NO se estiran a la misma altura: la constelación tiene cinco filas
   fijas y el genoma tantas como materias hayas tocado. Igualarlas deja
   un palmo de plancha vacía debajo de la más corta, que parece un fallo.
   Cada una acaba donde acaba su contenido, como las piezas de la
   portada. */
.perfil-rejilla > .plancha { margin: 0; }

.progreso { margin: 16px 0 0; }

.perfil-acciones { margin-top: 24px; }

/* Los ajustes NO se ensanchan con el resto.
   Un campo de texto de 1180 px es incómodo de leer y de rellenar: el ojo
   pierde el renglón. El perfil se despliega porque son datos que se
   comparan; un formulario se rellena, y para eso quiere columna. */
.perfil-hoja > .ajustes,
.perfil-hoja > .zona-riesgo {
  max-width: 660px;
}

.perfil-hoja > .ajustes { margin-top: 0; }

/* Los dos paneles de ajustes llevan la misma escuadra que las planchas
   del perfil, para que la pestaña de al lado no parezca de otra página.
   La de borrar la cuenta la lleva EN ROJO NASA: es el otro significado
   del nova en esta página, el de «de aquí no se vuelve». */
.perfil-hoja > .ajustes,
.perfil-hoja > .zona-riesgo {
  position: relative;
}

.perfil-hoja > .ajustes::after,
.perfil-hoja > .zona-riesgo::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.5;
}

.perfil-hoja > .zona-riesgo::after {
  border-color: var(--nova);
  opacity: 0.9;
}

@media (max-width: 620px) {
  .perfil-cabeza { padding: 18px; }
  .plancha { padding: 16px; }

  .perfil-avatar { width: 58px; height: 58px; }
  .perfil-inicial { font-size: 1.65rem; }
  .perfil-quien { gap: 14px; }

  /* Las dos agujas pasan a su propia línea, debajo del nombre, y se
     reparten el ancho. Al lado no caben: quedarían en 70 px y el
     «02 / 33» se partiría en dos. */
  .perfil-instrumentos { grid-column: 1 / -1; }
  .perfil-lectura { flex: 1; min-width: 0; }

  .perfil-vitales { margin-top: 18px; padding-top: 18px; }
  .perfil-vitales::before { width: 46%; }

  .perfil-acciones .boton { width: 100%; justify-content: center; }

  /* Los tres números, cada uno en su renglón. En dos columnas quedan
     112 px por caja: «12 / 20» se parte en dos líneas y el tercero se
     queda huérfano al final. */
  .perfil-vitales .economia-fila { grid-template-columns: 1fr; }
}

@media (min-width: 860px) {
  /* Nivel y escalafón se van al extremo derecho de la primera línea:
     nombre a la izquierda, agujas a la derecha, como un tablero. */
  .perfil-quien { grid-template-columns: auto minmax(0, 1fr) auto; }

  /* En el móvil las pestañas ocupan la línea entera, que es lo que hace
     falta para acertarles con el dedo. En el ordenador, estiradas a
     1180 px, cada una mediría medio metro: aquí van a su ancho. */
  .perfil-pestanas { width: fit-content; }
  .perfil-pestanas .cuenta-pestana { flex: 0 0 auto; min-width: 172px; }

  /* Doce partidas en bandas de lado a lado dejan la barra perdida en el
     medio. En dos columnas se recorre de un vistazo. */
  .progreso .progreso-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   LA CONSTELACIÓN Y EL GENOMA
   ═══════════════════════════════════════════════════════════════ */

.seccion-perfil-alto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}

/* La marca roja delante del título.
   Es la misma barra encendida que subraya el menú de arriba cuando pasas
   por encima: rojo NASA con su halo. Aquí dice «este panel está vivo».
   Un cuadradito de tres píxeles es todo el ruido que necesita. */
.seccion-perfil-alto h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.seccion-perfil-alto h3::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 15px;
  background: var(--nova);
  box-shadow: 0 0 9px rgba(var(--nova-rgb), 0.85);
}

.seccion-perfil-cuenta {
  margin-left: auto;
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ── La Constelación ───────────────────────────────────────────
   El marco lo pone `.plancha`: cuadrado, línea fina y escuadra ámbar.
   Aquí solo queda lo de dentro. */

/* Igual que los tres números de la economía: una retícula unida por
   líneas finas, no cinco tarjetas sueltas. Una constelación son estrellas
   en un mismo mapa; separarlas con aire las convierte en cromos. */
/* ── Cinco filas, no una rejilla ──
   Fueron tarjetas en rejilla mientras el panel ocupaba el ancho entero.
   Ahora comparte fila con el genoma y mide la mitad, así que en rejilla
   caben dos o tres por línea — y CINCO LOGROS NO LLENAN NI DOS NI TRES
   COLUMNAS: siempre sobra una casilla vacía, que es justo el fallo que
   se quitó de los marcadores.

   En filas no sobra nunca ninguna, y además cabe la explicación entera
   en una línea en vez de partida en cinco. Las estrellas a la
   izquierda, el nombre y el pie a la derecha.

   El hueco es de UN pixel: es la línea que une el mapa, no un margen.
   Una constelación son estrellas del mismo cielo; separarlas con aire
   las convierte en cromos sueltos. */
.constelacion-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--linea);
  background: var(--linea);
}

.constelacion-logro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 1px 14px;
  min-width: 0;
  padding: 12px 14px;
  background: rgba(var(--s-hondo-rgb), 0.72);
  text-align: left;
}


/* Lo que falta se ve como estrella apagada, no como deuda. */
.constelacion-logro-apagado { opacity: 0.62; }

/* En fila, no en columna: tres estrellas seguidas se leen como «dos de
   tres» de un vistazo; apiladas hay que contarlas. Ocupan las dos
   líneas de su fila —el nombre arriba, la explicación abajo—. */
.constelacion-estrellas {
  display: flex;
  grid-row: span 2;
  gap: 3px;
  margin: 0;
}

/* AQUÍ van las imágenes de Andrés cuando lleguen. El hueco ya mide lo
   que tiene que medir: se cambia el svg por un <img> y no se mueve nada. */
.constelacion-estrella {
  width: 22px;
  height: 22px;
  flex: none;
}

.constelacion-estrella path {
  fill: rgba(var(--linea-rgb), 0.14);
  stroke: rgba(var(--linea-rgb), 0.3);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* Los tres escalones son cuánto brilla. Nada más cambia. */
.constelacion-estrella.brillo-1 path { fill: rgba(var(--pulsar-rgb), 0.45); stroke: var(--pulsar); }
.constelacion-estrella.brillo-2 path { fill: rgba(var(--pulsar-rgb), 0.75); stroke: #ffc46b; }
.constelacion-estrella.brillo-3 path {
  fill: var(--pulsar);
  stroke: #ffd79a;
  filter: drop-shadow(0 0 4px rgba(var(--pulsar-rgb), 0.75));
}

.constelacion-nombre {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.2;
}

.constelacion-pie {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--texto-tenue);
}

/* ── La tienda de dentro ──────────────────────────────────────
   La tienda de dentro, en su pestaña del perfil. Se parece a la
   estantería de minijuegos a propósito: es la misma operación
   —mirar fichas y elegir una— y no hace falta aprender otra cosa. */

.tienda-saldo {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--pulsar);
  white-space: nowrap;
}

/* El precio de un adorno, al lado de su botón. Va en ámbar y en mono
   porque es una cifra de la economía, como el ATP y las grageas de
   arriba: los números del juego se leen todos igual. */
.tienda-precio {
  margin-right: auto;
  align-self: center;
  font: 500 0.82rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--pulsar);
  white-space: nowrap;
}

.tienda-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.adorno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 16px 14px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-panel-rgb), 0.55);
}

/* Un filo, no un fondo distinto: el fondo cambiado hace que la ficha
   parezca deshabilitada, que es justo lo contrario de lo que es. */
.adorno-puesto {
  border-color: var(--vital);
  box-shadow: inset 3px 0 0 var(--vital);
}

.adorno-tipo {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.adorno-nombre {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}

.adorno-texto {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.adorno .boton { margin-top: auto; }

/* Un botón de dentro de una ficha. El grande de la marca mide 15/30 de
   relleno y en una rejilla de fichas se come la tarjeta entera. */
.boton-menudo {
  padding: 9px 16px;
  font-size: 0.83rem;
}

/* ── El Genoma ───────────────────────────────────────────────── */

.genoma-entrada {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texto-tenue);
  max-width: 56ch;
}

.genoma-lista { display: grid; gap: 12px; }

/* Nombre y cifra arriba, barra debajo, detalle al pie. En el móvil se
   lee igual que en el ordenador porque nunca hay dos columnas. */
.genoma-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: baseline;
}

.genoma-materia {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--texto);
  min-width: 0;
}

.genoma-cifra {
  font: 700 0.86rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--aurora);
  white-space: nowrap;
}

.genoma-barra {
  grid-column: 1 / -1;
  height: 8px;
  padding: 1px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.7);
  overflow: hidden;
}

.genoma-barra span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--vital), var(--aurora));
  transition: width 0.6s var(--curva);
}

.genoma-detalle {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  color: var(--texto-tenue);
}

/* ── La escalera académica, plegada ───────────────────────────

   La fila de arriba dice el escalafón y nada más. Esto vive detrás del
   ▾, y esa es toda la idea: se ve que hay escalones por encima PORQUE
   alguien fue a mirar, no porque se le ponga delante.

   Es la regla del Genoma llevada a un desplegable: enseña dónde estás,
   nunca cuánto te falta. */
.genoma-escalera {
  margin: -4px 0 2px;
  padding-left: 2px;
}

.genoma-escalera summary {
  display: inline-block;
  padding: 3px 0;
  font: 400 0.72rem/1.2 var(--mono);
  color: var(--texto-tenue);
  cursor: pointer;
  list-style: none;
}

.genoma-escalera summary::-webkit-details-marker { display: none; }

.genoma-escalera summary::after {
  content: ' ▾';
  font-size: 0.66rem;
}

.genoma-escalera[open] summary::after { content: ' ▴'; }

.genoma-escalera summary:hover { color: var(--texto); }

.genoma-escalera summary:focus-visible {
  outline: 2px solid var(--aurora);
  outline-offset: 2px;
}

.genoma-peldanos {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding: 9px 12px;
  border-left: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.45);
  list-style: none;
  counter-reset: peldano;
}

.genoma-peldanos li {
  font-size: 0.76rem;
  /* Los que no son el tuyo se apagan: están, se leen, y no llaman. */
  color: var(--texto-tenue);
}

.genoma-peldano-tuyo {
  /* 600 y no 700: de Inter se descargan 400, 500 y 600. Pidiendo 700 el
     navegador servía el 600 igualmente. */
  font-weight: 600;
  color: var(--aurora) !important;
}

.genoma-peldano-nota {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--texto-tenue);
}

/* Eminencia es el único escalafón que no se compra con horas. Cuando se
   tiene, se dice en el color de la marca y no en el de siempre. */
.genoma-eminencia { color: var(--pulsar) !important; }

/* ── En el móvil, todo un punto más apretado ──────────────────
   La forma no cambia —ya son filas en las dos pantallas—; lo único que
   se ajusta es cuánto ocupa cada cosa. */
@media (max-width: 620px) {
  .constelacion-logro { gap: 1px 12px; padding: 11px 13px; }
  .constelacion-estrellas { gap: 2px; }
  .constelacion-estrella { width: 15px; height: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL RECORRIDO
   ═══════════════════════════════════════════════════════════════
   El camino se lee DE ABAJO ARRIBA, como un despegue. En el HTML van
   en orden normal —para que el teclado y el lector de pantalla los
   recorran bien— y es esta línea la que les da la vuelta.            */

.camino {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  margin: 8px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
}

.camino-parada {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

/* El hilo que las une. Va del centro de una marca al de la siguiente. */
.camino-parada::before {
  content: '';
  position: absolute;
  left: 19px;
  bottom: 100%;
  width: 2px;
  height: 24px;
  background: rgba(var(--linea-rgb), 0.2);
}

/* La de más abajo es el suelo: no hay hilo por debajo. */
.camino-parada:first-child::before { display: none; }

.camino-marca {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(var(--linea-rgb), 0.28);
  border-radius: 50%;
  background: rgba(var(--s-media-rgb), 0.7);
  font: 700 0.9rem/1 var(--mono);
  color: var(--texto-tenue);
}

.camino-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.camino-titulo {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--texto);
  line-height: 1.3;
}

.camino-tipo {
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Hecha: verde, y el hilo por encima también se enciende. */
.camino-hecha .camino-marca {
  border-color: rgba(var(--aurora-rgb), 0.6);
  background: rgba(var(--vital-rgb), 0.2);
  color: var(--aurora);
}
.camino-hecha .camino-titulo { color: var(--texto-suave); }
.camino-hecha::before { background: rgba(var(--aurora-rgb), 0.4); }

/* Donde estás: ámbar y con halo. Es lo único que llama la atención. */
.camino-ahora .camino-marca {
  border-color: var(--pulsar);
  background: rgba(var(--pulsar-rgb), 0.16);
  color: var(--pulsar);
  box-shadow: 0 0 0 4px rgba(var(--pulsar-rgb), 0.1);
}

.camino-aqui {
  /* 700 y no 600: de JetBrains Mono se descargan 400, 500 y 700, y al
     pedir 600 el navegador servía el 700 de todas formas. Escrito así,
     la hoja dice lo que de verdad pasa. */
  font: 700 0.66rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulsar);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   EL CAMINO LARGO: LA ÓRBITA ENTERA
   ═══════════════════════════════════════════════════════════════

   Andrés: «¿la estación y las balizas se pueden ver físicamente en el
   recorrido?, ¿y ver cómo se van desbloqueando mientras se va
   avanzando?».

   El camino corto son las paradas de una sentada. Este es la carretera
   de la órbita: sus lecciones, sus balizas al borde y la estación
   arriba del todo. Reutiliza `.camino` entero —el hilo, las marcas, el
   «estás aquí»— y solo añade las dos piezas nuevas.                 */

/* El hilo no se puede cortar donde hay una baliza: si se cortara, la
   baliza dejaría de estar EN el camino y pasaría a estar al lado. */
.camino-baliza::before,
.camino-meta::before {
  content: '';
  position: absolute;
  left: 19px;
  bottom: 100%;
  width: 2px;
  height: 24px;
  background: rgba(var(--linea-rgb), 0.2);
}

.camino-orbita > li:first-child::before { display: none; }

.camino-baliza {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0;
}

.camino-baliza::before { height: 14px; }

/* El botón no se ve como botón: se ve como una parada pequeña del
   camino. Lo que dice que se puede tocar es el rombo encendido y que
   responde al pasar por encima. */
.camino-baliza-abrir {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.camino-baliza-marca {
  flex: 0 0 auto;
  width: 40px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--cian);
}

.camino-baliza-nombre {
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--texto-suave);
}

.camino-baliza-abrir:hover .camino-baliza-nombre,
.camino-baliza-abrir:focus-visible .camino-baliza-nombre {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Por descubrir. 🔶 Se ve que está y se ve que no se puede abrir, y las
   dos cosas se dicen con la interrogación y con la palabra — no solo
   apagando el color. */
.camino-baliza-cerrada .camino-baliza-marca,
.camino-baliza-cerrada .camino-baliza-nombre {
  color: var(--texto-tenue);
}

.camino-baliza-cerrada .camino-baliza-marca {
  font: 700 0.8rem/1 var(--mono);
}

/* Lo que se lee al tocarla. Sangrado hasta la columna del texto, para
   que se vea que cuelga de su baliza y no del camino. */
.camino-baliza-texto {
  width: 100%;
  margin: 2px 0 10px 54px;
  padding-left: 14px;
  border-left: 2px solid rgba(var(--cian-rgb), 0.35);
}

/* ── La meta ───────────────────────────────────────────────────
   La estación, arriba del todo y siempre apagada: desde dentro de la
   órbita no se puede tener. Verla sin poder tocarla es lo que hace que
   apetezca llegar. */
.camino-meta {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 12px 0;
}

.camino-meta-marca {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px dashed rgba(var(--pulsar-rgb), 0.45);
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--pulsar);
}

.camino-meta .camino-titulo { color: var(--texto-suave); }
.camino-meta .camino-tipo { color: var(--pulsar); }

/* ── El pie ─────────────────────────────────────────────────── */

.recorrido-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--linea-rgb), 0.16);
}

.recorrido-despegar { flex: 0 0 auto; }

.recorrido-nota {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.recorrido-nota-espera { color: var(--pulsar); }

.recorrido-aviso {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(var(--linea-rgb), 0.24);
  background: rgba(var(--s-media-rgb), 0.55);
}

.recorrido-aviso strong {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--texto);
}

.recorrido-aviso p { margin: 0; font-size: 0.88rem; color: var(--texto-suave); }

.recorrido-aviso-fin {
  border-color: rgba(var(--aurora-rgb), 0.45);
  background: rgba(var(--vital-rgb), 0.12);
}
.recorrido-aviso-fin strong { color: var(--aurora); }

/* ── El botón de entrada, en la estantería ──────────────────── */

.biblioteca-recorrido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.32);
  background: rgba(var(--pulsar-rgb), 0.06);
}

.biblioteca-recorrido p {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.biblioteca-recorrido strong { color: var(--pulsar); }

@media (max-width: 560px) {
  .camino-parada { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  .camino-parada::before { left: 16px; height: 20px; }
  .camino-marca { width: 34px; height: 34px; font-size: 0.82rem; }
  .camino-aqui { grid-column: 2; }
  .recorrido-despegar { width: 100%; }
}

/* El viaje a medias manda sobre la oferta de uno nuevo: verde, porque
   es algo que ya tienes, no algo que se te ofrece. */
.biblioteca-recorrido-medias {
  border-color: rgba(var(--aurora-rgb), 0.42);
  background: rgba(var(--vital-rgb), 0.1);
}
.biblioteca-recorrido-medias strong { color: var(--aurora); }

/* Lo que queda tras recoger la recarga. No es un botón desactivado:
   es la razón para volver mañana, dicha sin cuenta atrás. */
.economia-recogida {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(var(--aurora-rgb), 0.35);
  background: rgba(var(--vital-rgb), 0.1);
  color: var(--texto-suave);
  font-size: 0.86rem;
  text-align: center;
}

/* El botón de la recarga deja de ser fantasma: da algo, y se nota. */
.economia-recarga {
  border-color: rgba(var(--aurora-rgb), 0.45);
  background: rgba(var(--vital-rgb), 0.16);
  color: var(--aurora);
}
.economia-recarga:hover { background: rgba(var(--vital-rgb), 0.26); }

/* ── La parada de repaso ────────────────────────────────────────
   Se distingue de las demás porque no es contenido nuevo: es algo que
   ya viste y se te atragantó. Ámbar, el color de lo que pide atención
   en Azumind — nunca rojo, que fallar no es un castigo. */
.camino-parada[data-repaso] .camino-marca {
  border-color: rgba(var(--pulsar-rgb), 0.5);
  background: rgba(var(--pulsar-rgb), 0.08);
  color: var(--pulsar);
}

.camino-parada[data-repaso] .camino-tipo { color: var(--pulsar); }

/* ═══════════════════════════════════════════════════════════════
   LA PÁGINA DEL MÉTODO
   ═══════════════════════════════════════════════════════════════
   Casi todo se reutiliza de las secciones que ya existen —promesas,
   regla-oro, nota-doble—. Aquí va solo lo que no tenía sitio: las
   cifras grandes, las tablas y la escalera.                        */

.metodo-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin: 26px 0 0;
}

.metodo-cifra {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid rgba(var(--linea-rgb), 0.18);
  background: rgba(var(--s-media-rgb), 0.5);
}

.metodo-cifra p {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.metodo-numero {
  display: block;
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--aurora);
}

/* La que va en contra de lo esperado se marca en ámbar: es la que más
   conviene leer, y la que menos se espera encontrar aquí. */
.metodo-cifra-ojo { border-color: rgba(var(--pulsar-rgb), 0.34); }
.metodo-cifra-ojo .metodo-numero { color: var(--pulsar); }

/* ── Las tablas ─────────────────────────────────────────────── */

.metodo-tabla-caja {
  overflow-x: auto;          /* que ruede la tabla, nunca la página */
  margin: 26px 0 0;
  border: 1px solid rgba(var(--linea-rgb), 0.18);
  background: rgba(var(--s-media-rgb), 0.5);
}

.metodo-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.metodo-tabla th {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--linea-rgb), 0.22);
  /* 700 y no 600: de JetBrains Mono se descargan 400, 500 y 700, y al
     pedir 600 el navegador servía el 700 de todas formas. Escrito así,
     la hoja dice lo que de verdad pasa. */
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: left;
  white-space: nowrap;
}

.metodo-tabla td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--linea-rgb), 0.09);
  color: var(--texto-suave);
  line-height: 1.5;
  vertical-align: top;
}

.metodo-tabla tr:last-child td { border-bottom: none; }
.metodo-tabla td strong { color: var(--texto); }

.metodo-tabla-pie {
  caption-side: bottom;
  padding: 12px 18px 14px;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-align: left;
}

/* ── La escalera ────────────────────────────────────────────── */

.escalera {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.escalera-paso {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid rgba(var(--linea-rgb), 0.18);
  background: rgba(var(--s-media-rgb), 0.5);
}

.escalera-marca {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(var(--linea-rgb), 0.3);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--texto-tenue);
}

.escalera-paso h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

.escalera-paso p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

/* El último escalón es el premio: se retira, ya es tuya. */
.escalera-paso-fin { border-color: rgba(var(--aurora-rgb), 0.42); }
.escalera-paso-fin .escalera-marca {
  border-color: rgba(var(--aurora-rgb), 0.6);
  color: var(--aurora);
}

/* ── Las fuentes ────────────────────────────────────────────── */

.metodo-fuente {
  margin: 18px 0 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--texto-tenue);
}

.metodo-fuente a {
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.metodo-fuente a:hover { color: var(--texto-suave); }

.metodo-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--linea-rgb), 0.16);
}

.metodo-cierre p {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  color: var(--texto-suave);
}

/* ── La bibliografía ──

   🔶 Cada referencia va con una línea de QUÉ DICE delante, y la cita
   detrás en `.metodo-fuente`, apagada. El orden importa: una lista de
   citas desnudas no la lee nadie, y lo que hace falta que se lea es
   qué decisión sostiene cada una.

   Y por eso la cita va DESPUÉS y más pequeña: es la prueba, no el
   argumento. */

.biblio-bloque { margin-top: 38px; }

.biblio-titulo {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--texto);
}

.biblio-nota {
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--texto-suave);
}

.biblio-grupo {
  margin: 30px 0 14px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cian);
}

.biblio-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* Un filo encendido a la izquierda, nunca un bloque de color:
   `estilos.css:80` lo exige para todo el sitio. */
.biblio-obra {
  padding-left: 16px;
  border-left: 2px solid rgba(var(--linea-rgb), 0.3);
}

.biblio-que {
  margin: 0;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--texto-suave);
}

.biblio-obra .metodo-fuente { margin-top: 8px; }

/* ── 🔴 La etiqueta del concepto ──

   Corrección de Andrés, y tenía razón: «la gente se fija mucho en la
   primera impresión y lo que es común, no se van a detener a leer si no
   ven algo que reconocen».

   La cita llevaba «National Board of Medical Examiners» enterrado al
   final de una línea gris. Quien busca NBME no lo encontraba de un
   vistazo, y quien no sabe qué es tampoco se enteraba.

   Así que el nombre reconocible va DELANTE del párrafo y encendido. Se
   lee antes que el texto, que es justo lo que hace falta. */
.biblio-chip {
  display: inline-block;
  margin: 0 8px 4px 0;
  padding: 2px 9px;
  border: 1px solid rgba(var(--cian-rgb), 0.4);
  border-radius: 3px;
  background: rgba(var(--cian-rgb), 0.08);
  color: var(--cian);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* «Cómo se aplica»: la mitad que de verdad importa. Va separada del
   resumen del estudio, porque son dos cosas: qué midieron, y qué
   decidimos nosotros a partir de eso. */
.biblio-aplica {
  margin-top: 10px;
  padding-left: 13px;
  border-left: 2px solid rgba(var(--vital-rgb), 0.45);
  color: var(--texto-suave);
}

/* ── Las cinco ideas ──
   Van antes que las citas: quien no reconoce los nombres no llega a
   leer la bibliografía. */
.biblio-ideas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.biblio-ideas > li {
  padding-left: 16px;
  border-left: 2px solid rgba(var(--cian-rgb), 0.35);
}

.biblio-idea-nombre {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto);
}

.biblio-idea-alias {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--texto-tenue);
}

.biblio-idea-que {
  margin: 9px 0 0;
  max-width: 66ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--texto-suave);
}

.biblio-idea-donde {
  margin: 9px 0 0;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

.biblio-idea-donde strong { color: var(--vital); }

.biblio-idea-aviso {
  margin: 9px 0 0;
  max-width: 66ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texto-tenue);
}

.biblio-materia {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto);
}

.biblio-libros {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/* ── El vínculo desde una galaxia hasta aquí ──
   Discreto: quien no lo necesita no lo mira, y quien duda de dónde sale
   el contenido lo encuentra sin preguntar. */
.curso-fuentes {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--texto-tenue);
}

.curso-fuentes a {
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.curso-fuentes a:hover { color: var(--cian); }

@media (max-width: 560px) {
  .metodo-cifra { padding: 18px 18px; }
  .escalera-paso { grid-template-columns: 36px minmax(0, 1fr); gap: 13px; padding: 15px 16px; }
  .escalera-marca { width: 36px; height: 36px; font-size: 0.95rem; }
  .metodo-tabla th, .metodo-tabla td { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   LA BARRA DE FILTRO — Todo · Vídeos · Cápsulas
   ═══════════════════════════════════════════════════════════════

   La usa el canal para separar los vídeos de las cápsulas sin partir
   el menú en dos entradas. Lleva la cuenta de cada cajón al lado para
   que nadie toque uno vacío para descubrir que está vacío.

   Es un `tablist` de verdad: con el teclado se entra una vez y se
   cambia con las flechas, no tabulando por los tres. Por eso el que
   está puesto lleva `tabindex="0"` y los otros `-1`, cosa que hace
   `montarCanal()` al pintar. */

.filtro-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filtro-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--panel);
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.filtro-boton:hover {
  border-color: var(--linea-viva);
  color: var(--texto);
}

/* El que está puesto se lee sin depender del color: cambia el relleno
   entero, no solo el tinte. Quien no distingue el azul del gris sigue
   viendo cuál es. */
.filtro-boton-vivo,
.filtro-boton-vivo:hover {
  border-color: transparent;
  background: var(--relleno-contrario);
  color: var(--tinta-contraria);
}

.filtro-cuenta {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.filtro-boton-vivo .filtro-cuenta { opacity: 0.55; }

/* El dibujo de una cápsula, donde el vídeo llevaría el reproductor.
   Mismo hueco y mismo aire, para que las dos clases de entrada se lean
   con el mismo ritmo — pero sin botón de play, que aquí no hay nada
   que reproducir. */
.articulo-lamina {
  aspect-ratio: 16 / 9;
  margin-bottom: 34px;
  border: 1px solid var(--linea);
  background-image: var(--arte);
  background-size: cover;
  background-position: center;
}

/* El mismo interruptor, más pequeño, dentro de la barra de la partida.
   Reutiliza `.filtro-boton` del canal a propósito: dos sitios donde se
   elige entre dos vistas deben tener el mismo aspecto, o hay que
   aprenderse dos. */
.huecos-vista {
  margin-bottom: 0;
  gap: 6px;
}

.huecos-vista .filtro-boton {
  padding: 5px 11px;
  font-size: 0.68rem;
}

/* ═══════════════════════════════════════════════════════════════
   EL CUERPO POR CAPAS
   ═══════════════════════════════════════════════════════════════

   El lienzo 3D va detrás de todo, fijo, ocupando la pantalla. Los
   textos pasan por delante mientras se baja.

   🔶 El lienzo NO pinta fondo —el motor lo deja transparente— y eso es
   lo que hace que esta página funcione en los dos temas sin tocar el
   3D: el fondo lo pone el sitio, como en cualquier otra página. */

.capas-pagina {
  position: relative;
}

.capas-lienzo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Al llegar el pie de página. Se apaga en vez de taparse: taparlo
   obligaría a ponerle fondo al pie, y el pie de este sitio es
   transparente a propósito. */
.capas-lienzo-fuera { opacity: 0; }

/* La barrita de arriba: cuánto llevas del recorrido. */
.capas-barra {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azumind-claro), var(--pulsar));
  box-shadow: 0 0 12px rgba(var(--pulsar-rgb), 0.6);
  transition: width 0.1s linear;
}

.capas-cargando {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: var(--fondo-bajo);
  transition: opacity 0.8s ease;
}

.capas-cargando p {
  max-width: 34ch;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--texto-suave);
}

/* Cuando no hay 3D, el cartel deja de ser un cartel de espera y pasa a
   ser una explicación: se queda quieto y sin anillo girando. */
.capas-cargando-malo {
  position: static;
  inset: auto;
  min-height: 40vh;
  background: transparent;
}

.capas-cargando-malo p { letter-spacing: normal; font-size: 0.95rem; }

.capas-cargando-fuera {
  opacity: 0;
  pointer-events: none;
}

.capas-anillo {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(var(--linea-rgb), 0.3);
  border-top-color: var(--pulsar);
  border-radius: 50%;
  animation: capas-gira 1s linear infinite;
}

@keyframes capas-gira { to { transform: rotate(360deg); } }

/* Abajo a la izquierda, siempre: qué capa estás viendo. */
.capas-rotulo {
  position: fixed;
  left: 6vw;
  bottom: 32px;
  z-index: 20;
  pointer-events: none;
}

.capas-rotulo-k {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--azumind-claro);
}

.capas-rotulo-v {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto);
}

.capas-texto {
  position: relative;
  z-index: 10;
}

.capas-panel {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 0 8vw;
}

.capas-panel-derecha { justify-content: flex-end; text-align: right; }
.capas-panel-centro  { justify-content: center;   text-align: center; }

.capas-ficha { max-width: 44ch; }

.capas-etiqueta {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--azumind-claro);
}

.capas-ficha h2 {
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* El resalte del título. Se lee bien en los dos temas porque el degradado
   va de un azul a un ámbar, y los dos tienen cuerpo sobre claro y sobre
   oscuro — al revés que el blanco, que desaparece en uno de los dos. */
.capas-ficha h2 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--azumind-claro), var(--pulsar));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.capas-ficha p {
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  line-height: 1.65;
  color: var(--texto-suave);
}

.capas-boton { margin-top: 22px; }

/* En el móvil no hay sitio para textos pegados a un lado: todos al
   centro, y el rótulo de la capa se sube para no pisar la barra del
   navegador. */
@media (max-width: 700px) {
  .capas-panel,
  .capas-panel-derecha { justify-content: center; text-align: center; }
  .capas-ficha { max-width: 100%; }
  .capas-rotulo { left: 50%; transform: translateX(-50%); bottom: 84px; text-align: center; }
}

/* El crédito de los modelos, al final del recorrido de capas. Discreto
   pero legible: dar crédito en letra que no se lee es no darlo. */
.capas-credito {
  position: relative;
  z-index: 10;
  max-width: 62ch;
  margin: 0 auto;
  padding: 0 8vw 64px;
  font-size: 0.82rem;
  line-height: 1.65;
  text-align: center;
  color: var(--texto-tenue, var(--texto-suave));
}

.capas-credito a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.capas-credito a:hover { color: var(--texto); }

/* ═══════════════════════════════════════════════════════════════
   EL MAPA DE LA GALAXIA  ·  curso.html
   ═══════════════════════════════════════════════════════════════

   🔶 SUBE, y no es una preferencia de lectura: es una nave recorriendo
   el espacio, y una nave siempre sube y siempre se aleja. Abajo queda
   de dónde vienes.

   Se hace con `column-reverse` y no dándole la vuelta a la lista en el
   guion. La diferencia: así el ORDEN DEL DOCUMENTO sigue siendo el
   orden de estudio, y quien lo lea con un lector de pantalla lo oye
   como se estudia — de la primera órbita a la última.                */

/* 🔶 Y LA SECCIÓN NO PUEDE RECORTAR.
   `.seccion` lleva `overflow: hidden` para que los trazos decorativos
   no se salgan por los lados. Pero eso la convierte en su propio
   contenedor de desplazamiento, y con él las bandas pegajosas dejan de
   pegarse: se quedan en su sitio y se van cortando por abajo. Costó
   verlo porque no da ningún error — simplemente no se pega.

   Aquí no hay ningún trazo que recortar —el mapa es el dibujo— así que
   se le devuelve el desbordamiento. */
.curso-seccion { overflow: visible; }

/* ── Elegir galaxia ─────────────────────────────────────────── */

.curso-elige {
  margin: 0 0 22px;
}

.curso-elige-campo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-alta-rgb), 0.45);
}

.curso-elige-campo > span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.curso-elige-campo select {
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.9rem;
  padding: 2px 0;
}

/* ── La cabina ──────────────────────────────────────────────── */

.curso-cabina {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
  padding: 20px 22px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.6), rgba(var(--s-panel-rgb), 0.7));
}

.curso-cabina-orbita {
  margin: 0;
  font-family: var(--display, 'Chakra Petch', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.curso-cabina-detalle,
.curso-cabina-cuenta,
.curso-cabina-vuelta {
  margin: 0;
  font-size: 0.84rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.curso-cabina-vuelta { color: var(--pulsar); }

.curso-barra {
  height: 6px;
  border: 1px solid var(--linea);
  background: rgba(var(--s-hondo-rgb), 0.5);
  overflow: hidden;
}

.curso-barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azumind-claro), var(--pulsar));
  transition: width 0.5s ease;
}

.curso-seguir { justify-self: start; margin-top: 6px; }

.curso-tira {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 16px 20px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--pulsar);
  background: rgba(var(--s-alta-rgb), 0.4);
}

.curso-tira p { margin: 0; font-size: 0.9rem; color: var(--texto-suave); flex: 1 1 260px; }

/* ── El camino ──────────────────────────────────────────────── */

.mapa-camino {
  display: flex;
  flex-direction: column-reverse;   /* 🔶 la nave sube */
  gap: 8px;
}

.mapa-sistema {
  margin: 26px 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: center;
}

.orbita {
  position: relative;
  display: flex;
  flex-direction: column-reverse;   /* la banda queda al PIE de su tramo */
}

/* La banda se queda pegada AL PIE mientras se recorre su tramo, y no
   arriba, aunque arriba fuera lo primero que se probó.

   🔶 En un camino que sube, la banda tiene que estar debajo de sus
   planetas: es el suelo del que despegas. Puesta encima —que es donde
   cae en un mapa normal— quedaba al FINAL del tramo, y mientras mirabas
   los planetas de «Nutrientes» arriba se te quedaba pegado el nombre de
   la órbita siguiente. El nombre equivocado, todo el rato, y sin dar
   ningún error. */
.orbita-banda {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 11px 16px 11px 18px;
  border: 1px solid var(--linea);
  /* El filo de la izquierda es lo que la hace BANDA y no un párrafo. En
     el tema claro, sobre papel de electro, sin él se perdía. */
  border-left: 3px solid rgba(var(--linea-rgb), 0.55);
  background: rgba(var(--s-borde-rgb), 0.88);
  backdrop-filter: var(--banda-desenfoque, blur(8px));
  -webkit-backdrop-filter: var(--banda-desenfoque, blur(8px));
}

.orbita-nombre {
  margin: 0;
  font-family: var(--display, 'Chakra Petch', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.orbita-cifras {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* La órbita donde está la nave se distingue de un vistazo. */
.orbita[data-estado='aqui'] .orbita-banda {
  border-color: rgba(var(--pulsar-rgb), 0.45);
  border-left-color: var(--pulsar);
}
.orbita[data-estado='aqui'] .orbita-nombre { color: var(--pulsar); }
.orbita[data-estado='hecha'] .orbita-banda { opacity: 0.72; }

/* ── Los planetas ───────────────────────────────────────────── */

.orbita-planetas {
  display: flex;
  flex-direction: column-reverse;   /* el planeta 1, abajo */
  gap: 0;
  margin: 0;
  padding: 22px 0 30px;
  list-style: none;
}

.planeta {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

/* 🔶 EL VAIVÉN LO LLEVA EL PLANETA, NO SU FILA.

   Y esto costó un fallo de verdad, visto en el móvil de Andrés. La fila
   ocupa TODO el ancho —es la que centra el planeta—, así que moverla
   110 px la sacaba 110 px por un lado. El documento quedaba más ancho
   que la pantalla, y Safari, que encoge la página para que quepa,
   respondía con un zoom raro: todo más grande, la cabecera sin llegar
   al borde y un margen muerto a la derecha.

   Ningún error, ninguna pista. Solo una página que «se ve mal».

   Moviendo el planeta y no la fila, el vaivén cabe dentro y el ancho no
   se toca. Se usa `translate` y no `transform` a propósito: son
   propiedades distintas, así que no pelea con el `scale` del aterrizaje
   ni con el `transform` del tacto. */
.planeta-punto,
.planeta::before {
  translate: calc(var(--x, 0) * min(30vw, 110px)) 0;
}

/* LA ESTELA: el rastro que deja la nave al saltar al planeta siguiente.
   Sube, porque el camino sube, y no llega a tocar el de destino a
   propósito: es un salto, no un carril.

   Sin ella los planetas se leen como una lista con sangría rara. Con
   ella se leen como un camino, que es de lo que va todo esto. */
.planeta::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3px;
  height: 28px;
  margin-left: -1.5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--linea-rgb), 0.55) 0 4px,
    transparent 4px 9px
  );
}

/* 🔶 El de ARRIBA del todo no lleva a ninguna parte, y es el último de
   la órbita — no el primero. Puesto al revés, la estela salía por
   encima del último planeta y se metía en la banda de la órbita
   siguiente, como una flecha señalando a nada. */
.planeta:last-child::before { display: none; }

/* Y lo ya recorrido se ve: la estela de lo hecho es ámbar. */
.planeta[data-estado='hecho']::before,
.planeta[data-estado='aqui']::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--pulsar-rgb), 0.7) 0 4px,
    transparent 4px 9px
  );
}

.planeta-punto {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(var(--linea-rgb), 0.45);
  /* El canto cortado del logo: la esquina de abajo a la derecha. */
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.9), rgba(var(--s-panel-rgb), 0.9));
  color: var(--texto-suave);
  font-size: 1.5rem;
  line-height: 1;
}

.planeta-cara { display: block; }

/* El texto que oye un lector de pantalla y no se ve. Sin esto, el mapa
   entero es una fila de rombos sin nombre. */
.planeta-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.planeta[data-estado='hecho'] .planeta-punto {
  border-color: rgba(var(--pulsar-rgb), 0.5);
  background: rgba(var(--pulsar-rgb), 0.14);
  color: var(--pulsar);
}

.planeta[data-estado='porVenir'] .planeta-punto { color: var(--texto-tenue); }


/* ── Donde está la nave ─────────────────────────────────────── */

/* Donde está la nave es lo más fuerte de la pantalla, y a propósito:
   es lo único que se puede pulsar. En la primera versión los planetas
   HECHOS se veían más que este —relleno ámbar contra un contorno— y la
   pantalla señalaba el pasado en vez del siguiente paso. */
.planeta[data-estado='aqui'] .planeta-punto {
  width: 68px;
  height: 68px;
  border-color: transparent;
  /* 🔶 El ámbar LLENO, no el `--pulsar` normal. Sobre papel `--pulsar` es
     tinta y esto es un fondo: la nave daba 2,79 de contraste, por debajo
     incluso del mínimo de texto grande. Y es lo único pulsable del mapa
     — la marca de dónde estás. Ahora 7,75 en los dos temas. */
  background: linear-gradient(165deg, var(--pulsar-lleno), var(--pulsar-lleno-hondo));
  color: var(--pulsar-lleno-tinta);
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(var(--pulsar-rgb), 0.28);
}

.planeta[data-estado='aqui'] .planeta-punto:hover { transform: scale(1.06); }
.planeta[data-estado='aqui'] .planeta-punto:active { transform: scale(0.97); }

.planeta[data-estado='aqui'] .planeta-punto:focus-visible {
  outline: 2px solid var(--pulsar);
  outline-offset: 4px;
}

/* EL HALO QUE LATE, y no es un pulso cualquiera: es la curva del
   potencial de acción, que ya es el fondo del perfil. Sube de golpe, se
   pasa de largo y vuelve despacio.

   🔶 Lo pinta el ESTADO, no un elemento. Siendo un elemento habría que
   crearlo y destruirlo cada vez que la nave salta, y el día que se
   olvidara quedarían dos naves en el mapa — o ninguna. */
.planeta[data-estado='aqui'] .planeta-punto::after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.55);
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
  animation: latido 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

@keyframes latido {
  0%   { transform: scale(0.92); opacity: 0; }
  12%  { transform: scale(1.06); opacity: 0.85; }
  26%  { transform: scale(0.99); opacity: 0.45; }
  60%  { transform: scale(1.02); opacity: 0.2; }
  100% { transform: scale(0.92); opacity: 0; }
}

/* ── Lo que todavía no has pisado ───────────────────────────────

   🔶 Y AQUÍ NO HAY ENTRADA ESCALONADA, aunque el plan la pedía.

   Se hizo dos veces —con animación y con transición— y las dos veces
   dejó planetas invisibles: escondidos esperando un aviso que no
   llegaba, o congelados a medio aparecer. En el móvil de Andrés se vio
   como un mapa con huecos. Sin ningún error, claro.

   El fondo del asunto es que esconder para enseñar después solo es
   seguro si el «después» es infalible, y no lo es: depende de un vigía
   que mira de vez en cuando y de una pantalla que salta.

   Un adorno que puede borrar el mapa no vale lo que cuesta. Los
   planetas se ven, y ya. El movimiento que sí se queda es el que no
   puede esconder nada: la llegada de la nave, el temblor, la
   profundidad del fondo y el zoom al entrar en la lección. */

.planeta[data-estado='porVenir'] .planeta-punto { opacity: 0.6; }

/* ── La llegada ────────────────────────────────────────────────
   Vuelves de una lección y el salto se ve ocurrir: el planeta que
   dejaste se rellena de ámbar y la nave aparece en el siguiente. Es el
   único sitio del sitio donde el avance se MIRA en vez de leerse. */

.planeta[data-llegando='1'] .planeta-punto {
  animation: llegar 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes llegar {
  0%   { scale: 0.6; opacity: 0.2; }
  55%  { scale: 1.14; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

/* ── El temblor ────────────────────────────────────────────────
   Un planeta que no es el tuyo contesta «aquí no» en vez de no hacer
   nada. Sin esto no se sabe si está bloqueado o si la página se rompió. */

.planeta[data-temblor='1'] .planeta-punto {
  animation: temblar 0.4s ease both;
}

/* 🔶 El temblor mueve `transform` y NO `translate`: `translate` es lo
   que aparta el planeta del centro, y usarlo aquí lo habría devuelto al
   medio de un salto para temblar allí. */
@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ── La profundidad ────────────────────────────────────────────
   El campo de estrellas se mueve MÁS DESPACIO que el mapa. Dos
   velocidades y de golpe hay espacio detrás. Solo en esta página: el
   lienzo es de todo el sitio y no se le toca en las demás. */

html[data-mapa] #cosmos {
  transform: translateY(var(--cosmos-y, 0px)) scale(1.08);
  transform-origin: center;
}

/* Con el movimiento apagado, el mapa tiene que leerse IGUAL de bien.
   No «menos animación»: ninguna. */
@media (prefers-reduced-motion: reduce) {
  .planeta[data-estado='aqui'] .planeta-punto::after { animation: none; opacity: 0.55; }
  .planeta[data-llegando='1'] .planeta-punto,
  .planeta[data-temblor='1'] .planeta-punto { animation: none; }
  .planeta-punto,
  .curso-barra span { transition: none; }
  html[data-mapa] #cosmos { transform: none; }
}

@media (max-width: 640px) {

  .planeta-punto { width: 48px; height: 48px; font-size: 1.1rem; }
  .planeta[data-estado='aqui'] .planeta-punto { width: 58px; height: 58px; font-size: 1.3rem; }
}

/* ── La cabina en el perfil ─────────────────────────────────────
   La misma pieza que en el mapa, con dos cosas más: el nombre de la
   galaxia —aquí no está en el título de la página— y la salida al mapa.

   Va justo debajo del cuadro del perfil y antes de la constelación:
   es lo que se hace a diario, y estaba al fondo del todo. */

.perfil-cabina { margin: 0 0 28px; }

.perfil-cabina:empty { display: none; }

.curso-cabina-galaxia {
  margin: 0 0 2px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pulsar);
}

.curso-ver-mapa { justify-self: start; }

/* Los dos botones, hombro con hombro. En el móvil se apilan solos. */
.curso-cabina-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ═══════════════ El patio de galaxias ═══════════════
   Bloques y no un desplegable. Un desplegable esconde cuántas hay,
   cuánto ocupa cada una y cuáles vienen después — y no puede enseñar
   estado: empezada, por empezar y en construcción se ven iguales en una
   lista de texto. */

.curso-cambiar { margin-bottom: 4px; }

.galaxias-grupo { margin: 0 0 34px; }

.galaxias-titulo {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Se ajustan solas al ancho: dos o tres por fila en pantalla grande,
   una en el móvil. Sin puntos de ruptura escritos a mano. */
.galaxias-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.galaxia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, rgba(var(--s-alta-rgb), 0.6), rgba(var(--s-panel-rgb), 0.7));
  color: var(--texto);
  text-align: left;
  transition: border-color 0.2s ease, transform 0.16s ease, background 0.2s ease;
}

/* El canto cortado de la marca, abajo a la derecha. */
.galaxia::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--pulsar);
  border-left: 0;
  border-top: 0;
  opacity: 0.45;
}

.galaxia { position: relative; }

button.galaxia { cursor: pointer; }

button.galaxia:hover {
  /* Era `--borde-vivo`, una ficha que no existe en ninguna parte: el
     hover de las tarjetas de Galaxias no hacía NADA, y sin un error. */
  border-color: var(--linea-viva);
  transform: translateY(-2px);
}

button.galaxia:active { transform: translateY(0); }

button.galaxia:focus-visible { outline: 2px solid var(--pulsar); outline-offset: 3px; }

/* La empezada se distingue de un vistazo: filo ámbar y barra. */
.galaxia[data-estado='empezada'] {
  border-left: 3px solid var(--pulsar);
}

.galaxia-grupo {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.galaxia-nombre {
  margin: 0;
  font-family: var(--display, 'Chakra Petch', sans-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
}

.galaxia-cifras,
.galaxia-cuenta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.galaxia-donde {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pulsar);
}

.galaxia .curso-barra { margin: 2px 0; }

.galaxia-ir {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azumind-claro);
}

.galaxia[data-estado='empezada'] .galaxia-ir { color: var(--pulsar); }

/* ── Las que todavía no están ──
   Se enseñan, no se esconden: son treinta y dos de treinta y cuatro, y
   esconderlas dejaría la pantalla con la sensación de que el sitio se
   acaba en dos bloques. Van apagadas y sin botón, que es distinto de
   bloqueadas: no es que no puedas, es que aún no están. */
.galaxias-obra {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px dashed var(--linea);
}

.galaxias-obra-lista {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--texto-tenue);
}

@media (prefers-reduced-motion: reduce) {
  .galaxia, button.galaxia:hover { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BALIZAS Y ESTACIONES
   ═══════════════════════════════════════════════════════════════

   Lo que va entre planeta y planeta y no se juega. Una baliza se pasa
   de largo; una estación es donde se para a repostar al terminar una
   órbita, y por eso pesa más.

   🔶 Todo lo de aquí se dibuja con variables de la casa y ni una sola
   imagen. Eso no es tacañería: una barra hecha de color hereda el tema
   —claro y oscuro— sin hacer nada, pesa cero, y se dibuja igual el día
   que esto sea una app. Un PNG de una barra no hace ninguna de las tres.
   Es la misma técnica del mapa de galaxias. */

.baliza {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--panel);
}

/* La baliza lleva el filo ámbar del acento: es una señal al pasar.
   La estación lleva el azul de la casa y más aire: es una parada. */
.baliza-baliza { border-left: 3px solid var(--pulsar); }

.baliza-estacion {
  border-left: 3px solid var(--azumind-claro);
  gap: 18px;
  padding: 28px 26px;
}

.baliza-titulo {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  text-wrap: balance;
}

.baliza-texto,
.baliza-comparacion {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.6;
}

/* La palabra que importa. El mismo ámbar que marca el acento en todo el
   sitio, sin negrita añadida: el color ya la separa. */
.baliza-palabra { color: var(--pulsar); font-weight: 600; }

/* La metáfora va sangrada y en cursiva: es lo que se queda cuando el
   número se olvida, y conviene que se lea distinta del dato. */
.baliza-comparacion {
  font-style: italic;
  padding-left: 14px;
  border-left: 2px solid var(--linea-viva);
  color: var(--texto-tenue);
}

/* ── Un dato suelto ── */
.baliza-dato { display: flex; flex-direction: column; gap: 2px; }

.baliza-cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--texto);
}

.baliza-que {
  font-size: 0.82rem;
  color: var(--texto-tenue);
}

/* ── Varios datos comparados ──
   Tres columnas: de qué es, la barra, y la cifra. En el móvil la barra
   se lleva lo que sobra y las otras dos no se estrujan. */
.baliza-datos { display: flex; flex-direction: column; gap: 10px; }

.baliza-fila {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  align-items: center;
  gap: 12px;
}

.baliza-carril {
  height: 10px;
  border-radius: 999px;
  /* Igual: el valor oscuro de `--linea-rgb` escrito a mano. */
  background: rgba(var(--linea-rgb), 0.14);
  overflow: hidden;
}

.baliza-carril > span {
  display: block;
  height: 100%;
  width: var(--parte, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azumind), var(--azumind-claro));
}

/* La última barra —la mayor— en ámbar: es la que la baliza quiere que
   se mire. */
.baliza-fila:last-of-type .baliza-carril > span {
  /* 🔶 Con `--pulsar` este degradado iba de TINTA a ámbar claro sobre
     papel: de marrón oscuro a amarillo, que no es un degradado sino dos
     colores sin relación. Va con la ficha de relleno, que no se da la
     vuelta — una barra es una FORMA, no una letra. */
     Y va de hondo a lleno, no al revés: la barra tiene que ACLARARSE
     hacia el final, que es lo que tira del ojo hasta donde termina. */
  background: linear-gradient(90deg, var(--pulsar-lleno-hondo), var(--pulsar-lleno));
}

.baliza-veces {
  margin: 2px 0 0;
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pulsar);
}

.baliza-lista {
  margin: 0;
  padding-left: 18px;
  color: var(--texto-suave);
  line-height: 1.6;
}

.baliza-lista li { margin-bottom: 4px; }

/* La imagen es SIEMPRE un extra: si no carga, se quita y la baliza se
   sigue entendiendo. Por eso no se le reserva altura ni se deja hueco. */
.baliza-imagen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--linea);
}

@media (max-width: 560px) {
  .baliza { padding: 18px 16px; }
  .baliza-fila { grid-template-columns: 1fr auto; }
  /* En el móvil la barra pasa debajo, a lo ancho: apretada entre el
     nombre y la cifra no se compara nada. */
  .baliza-carril { grid-column: 1 / -1; }
}

/* ── La baliza dentro del viaje ──
   Va entre el camino y el botón de seguir. Con su sello encima, para
   que se lea como lo que es: algo que se pasa por delante, no una
   parada más ni un deber. */

.recorrido-baliza {
  margin: 22px 0 4px;
  animation: baliza-aparece .45s ease both;
}

.recorrido-baliza-sello {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pulsar);
}

@keyframes baliza-aparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Llega pidiéndose sola, después de pintar. Para quien tiene el
   movimiento apagado eso es un salto sin avisar, así que aparece y ya. */
@media (prefers-reduced-motion: reduce) {
  .recorrido-baliza { animation: none; }
}

/* ── Entrenar: un tema por tarjeta ──
   La otra puerta. Se distingue del Recorrido a propósito: aquí no hay
   barra de progreso ni mapa, porque no se avanza — se entrena. */

.entrenar-tema {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.entrenar-tema:hover,
.entrenar-tema:focus-visible {
  border-color: var(--linea-viva);
  transform: translateY(-2px);
}

.entrenar-materia {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.entrenar-titulo {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  text-wrap: balance;
}

.entrenar-cuantas {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.entrenar-ir {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pulsar);
}

@media (prefers-reduced-motion: reduce) {
  .entrenar-tema, .entrenar-tema:hover { transition: none; transform: none; }
}

/* ── Elegir cuántas preguntas ──
   Tres tallas y no un campo libre: diez es una parada de autobús,
   quince un rato, veinticinco una sentada. */

.entrenar-cabecera { margin: 0 0 18px; }

.entrenar-tallas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.entrenar-tallas-rotulo {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.entrenar-talla {
  min-width: 44px;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.entrenar-talla:hover { border-color: var(--linea-viva); }

.entrenar-talla[aria-pressed='true'] {
  border-color: var(--pulsar);
  color: var(--pulsar);
  font-weight: 700;
}

/* El menú dentro de la tarjeta «Preguntas»: elegir tema, cuántas, y a
   entrenar. Va en el pie de la ficha, donde antes había un solo botón. */
.ficha-pie-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.entrenar-campo { display: flex; flex-direction: column; gap: 6px; }

.entrenar-campo-rotulo {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

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

/* De qué es cada fila de «Por dónde ibas»: la materia y el motor, en
   pequeño. Antes el motor era lo ÚNICO que salía, así que con un solo
   tipo publicado la lista entera decía «quiz». */
.progreso-donde {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--texto-tenue);
}

/* ── El cartel de «Preparando tu lección…» ──
   🔶 Salía entre parada y parada, en el sitio donde va el juego, y no
   tenía UNA sola regla de CSS: un párrafo suelto pegado al borde. Lo
   encontró la prueba de clases al enseñarle a mirar el JavaScript, que
   es de donde salen todas las pantallas de juego. */

.partida-preparando {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 40px 24px;
  border: 1px dashed var(--linea);
  border-radius: 14px;
  color: var(--texto-tenue);
  text-align: center;
}

.partida-preparando p {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  animation: preparando-latir 1.6s ease-in-out infinite;
}

@keyframes preparando-latir {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Quien haya pedido menos movimiento no ve latir nada. */
@media (prefers-reduced-motion: reduce) {
  .partida-preparando p { animation: none; opacity: 0.8; }
}

/* ── El paso de en medio: terminar sin cobrar todavía ──
   🔶 Antes la recompensa saltaba sola al acertar la última pregunta y
   se llevaba el juego por delante. Ahora la parada acaba aquí, con las
   preguntas todavía en pie para poder repasarlas. */

.cobrar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--aurora-rgb), 0.4);
  border-radius: 14px;
  background: rgba(var(--vital-rgb), 0.1);
}

.cobrar-dice {
  margin: 0;
  flex: 1 1 16rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Mientras se ve el resultado, el juego se esconde entero — pero sigue
   ahí, para poder volver sin rejugar nada. Va con `>` y `:not` para
   ganarle al `display` que cada hijo trae de su propia regla. */
.partida.en-resultado > *:not(.resultado) { display: none; }

.resultado-volver {
  margin-top: 4px;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

/* El hover con ficha: un 5 % de blanco sobre papel casi blanco es un
   hover que no se nota. */
.resultado-volver:hover { color: var(--texto); background: rgba(var(--linea-rgb), 0.08); }

@media (max-width: 560px) {
  .cobrar { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── La pantalla de resultado de una parada ──
   Sustituye al juego cuando la parada acaba. Antes el premio salía en
   un aviso pequeño DEBAJO de las preguntas ya contestadas, y había que
   bajar hasta el fondo para verlo: la pantalla no cerraba nada. */

.resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 26px 38px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}

.resultado-sello {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* La cifra grande es lo único que hay que leer de lejos. */
.resultado-cuenta {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
}

.resultado-dice {
  margin: 0;
  max-width: 30rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

.resultado-ganado {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  width: min(100%, 26rem);
}

.resultado-premio { display: flex; flex-direction: column; gap: 2px; }

.resultado-cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pulsar);
}

.resultado-que {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.resultado-seguir { margin-top: 12px; }

@media (max-width: 560px) {
  .resultado { padding: 32px 18px 28px; }
  .resultado-cuenta { font-size: 2.1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   LA SALA DE CLASE
   ═══════════════════════════════════════════════════════════════

   Una pantalla que se ve en dos sitios muy distintos a la vez: el
   proyector del salón, desde la última fila, y un teléfono en la mano.
   Por eso el código va enorme y lo demás va grande.

   Todo con fichas del tema y nada escrito a pelo: un salón con las
   luces encendidas se mira en claro, y el mismo teléfono en oscuro.
   ═══════════════════════════════════════════════════════════════ */

.sala { margin-top: 22px; }

.sala-etiqueta {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 6px;
}

.sala-entrada,
.sala-espera,
.sala-profe,
.sala-crear,
.sala-resultados,
.sala-explicar,
.sala-aviso {
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--panel);
  padding: 30px 26px;
  max-width: 720px;
}

.sala-profe { max-width: 860px; }

.sala-entrada-titulo,
.sala-espera-titulo,
.sala-profe-titulo,
.sala-aviso-titulo {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  margin: 0 0 8px;
  color: var(--texto);
}

.sala-entrada-texto,
.sala-espera-texto,
.sala-aviso-texto {
  color: var(--texto-suave);
  margin: 0 0 18px;
  line-height: 1.6;
}

.sala-entrada-fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* El código se teclea mirando al frente, no a la pantalla: letra
   grande, monoespaciada y muy separada, para no equivocarse. */
.sala-codigo-campo,
.sala-nombre-campo {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--linea-viva);
  border-radius: 12px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 1.3rem;
}

.sala-codigo-campo {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}

.sala-nombre-campo {
  font-family: var(--cuerpo);
  letter-spacing: normal;
  text-align: left;
}

.sala-codigo-campo:focus,
.sala-nombre-campo:focus {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
}

.sala-error {
  color: var(--pulsar);
  margin: 12px 0 0;
  font-size: 0.94rem;
}

/* ── El código, para el proyector ────────────────────────────── */

.sala-codigo-grande {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3rem, 16vw, 8rem);
  letter-spacing: 0.12em;
  line-height: 1.05;
  margin: 10px 0 6px;
  color: var(--pulsar);
  text-align: center;
  word-break: break-all;
}

.sala-enlace {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--texto-tenue);
  text-align: center;
  margin: 0 0 16px;
  word-break: break-all;
}

.sala-cuenta {
  font-family: var(--mono);
  color: var(--vital);
  margin: 16px 0 10px;
  font-size: 0.98rem;
}

/* ── Quién hay dentro ────────────────────────────────────────── */

.sala-gente {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sala-gente-uno {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--fondo-alto);
  font-size: 0.96rem;
  color: var(--texto);
}

.sala-gente-listo {
  border-color: var(--vital);
  color: var(--vital);
}

.sala-echar {
  border: none;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}

.sala-echar:hover { color: var(--pulsar); }

.sala-profe-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

/* ── Jugando ─────────────────────────────────────────────────── */

.sala-jugando-cabeza { margin-bottom: 14px; }

.sala-jugando-titulo {
  font-family: var(--display);
  font-size: 1.2rem;
  margin: 0;
  color: var(--vital);
}

.sala-tablero { margin: 0 0 20px; }

.sala-jugando-pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.sala-jugando-nota {
  color: var(--texto-tenue);
  font-size: 0.9rem;
  margin: 0;
}

/* ── La tabla ────────────────────────────────────────────────── */

.sala-tabla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sala-tabla-fila {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--fondo-alto);
}

.sala-tabla-tuya {
  border-color: var(--vital);
  background: var(--panel-vivo);
}

.sala-tabla-puesto {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--pulsar);
  text-align: center;
}

.sala-tabla-nombre {
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sala-tabla-aciertos {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--vital);
}

.sala-tabla-tiempo {
  font-family: var(--mono);
  color: var(--texto-tenue);
  font-size: 0.9rem;
}

.sala-profe-tabla { margin-top: 6px; }

/* ── Crear: elegir y previsualizar ───────────────────────────── */

.sala-campo {
  display: block;
  margin: 0 0 16px;
}

.sala-campo-etiqueta {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 7px;
}

.sala-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linea-viva);
  border-radius: 12px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
}

.sala-cuantas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sala-cuantas-uno {
  border: 1px solid var(--linea-viva);
  border-radius: 12px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 1rem;
  padding: 11px 18px;
  cursor: pointer;
}

.sala-cuantas-activa {
  border-color: var(--vital);
  color: var(--vital);
  font-weight: 700;
}

.sala-cuantas-campo {
  width: 6.5rem;
  padding: 11px 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: var(--mono);
}

.sala-nota {
  color: var(--texto-tenue);
  font-size: 0.9rem;
  margin: 0 0 18px;
}

.sala-vista-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sala-vista-titulo {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0;
  color: var(--texto);
}

.sala-vista {
  list-style: decimal;
  margin: 0 0 20px;
  padding-left: 1.6rem;
  max-height: 340px;
  overflow-y: auto;
  color: var(--texto-suave);
}

.sala-vista-uno {
  margin-bottom: 9px;
  line-height: 1.5;
}

.sala-vista-pregunta { display: block; color: var(--texto); }

/* En la pantalla del PROFESOR sí se ve la correcta: de eso se trata,
   de que pueda descartar una antes de proyectarla. */
.sala-vista-buena {
  display: block;
  font-size: 0.9rem;
  color: var(--vital);
}

.sala-vista-cargando {
  list-style: none;
  color: var(--texto-tenue);
}

/* ── Explicar al final ───────────────────────────────────────── */

.sala-explicar-lista {
  margin: 0 0 22px;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sala-explicar-uno { line-height: 1.55; }

.sala-explicar-pregunta {
  color: var(--texto);
  font-weight: 600;
  margin: 0 0 8px;
}

.sala-explicar-opciones {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sala-explicar-opcion {
  color: var(--texto-suave);
  padding: 5px 10px;
  border-radius: 8px;
}

.sala-explicar-buena {
  color: var(--vital);
  font-weight: 600;
  background: var(--panel-vivo);
}

.sala-explicar-porque {
  color: var(--texto-tenue);
  font-size: 0.94rem;
  margin: 0;
}

.sala-explicar-tuya {
  color: var(--pulsar);
  font-size: 0.94rem;
  margin: 0;
}

@media (max-width: 560px) {
  .sala-entrada,
  .sala-espera,
  .sala-profe,
  .sala-crear,
  .sala-resultados,
  .sala-explicar,
  .sala-aviso { padding: 22px 16px; }

  .sala-tabla-fila { grid-template-columns: 2rem 1fr auto; }
  .sala-tabla-tiempo { grid-column: 2 / -1; }
}

/* La puerta a la sala, en la estantería. Dos botones porque hay dos
   personas distintas mirando esto: la que da la clase y la que la
   recibe. */
.sala-puerta {
  margin-top: 26px;
  border: 1px solid var(--linea-viva);
  border-radius: 18px;
  background: var(--panel);
  padding: 24px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.sala-puerta > div { flex: 1 1 280px; }

.sala-puerta-titulo {
  font-family: var(--display);
  font-size: 1.2rem;
  margin: 0 0 6px;
  color: var(--texto);
}

.sala-puerta-texto {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.6;
  max-width: 56ch;
}

/* ── La sala por turnos ──────────────────────────────────────────

   Toda la clase va a la vez: la pregunta se proyecta y cada quien la
   contesta en su teléfono.

   🔴 Y no hay ni un estilo de «acertaste» o «fallaste», a propósito.
   Decisión de Andrés: si la pantalla te dice que fallaste, se lo
   preguntas al de al lado y lo corriges. Lo único que se pinta al
   confirmar es que la respuesta salió. */

.sala-turno {
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--panel);
  padding: 26px 22px;
  max-width: 720px;
}

.sala-turno-pregunta {
  font-family: var(--display);
  font-size: clamp(1.2rem, 4.4vw, 1.7rem);
  line-height: 1.35;
  margin: 4px 0 20px;
  color: var(--texto);
}

.sala-opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 🔶 Más aire del que separa las opciones entre sí, y es la misma
     corrección que pidió Andrés para el quiz: «el botón de confirmar
     siento que está muy pegado a la última opción». Con 18 contra 10, el
     botón parecía una opción más. */
  margin-bottom: 26px;
}

/* Botones grandes: se pulsan con el pulgar, de pie, en un salón. */
.sala-opcion {
  text-align: left;
  padding: 15px 18px;
  border: 1px solid var(--linea-viva);
  border-radius: 14px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
}

.sala-opcion:hover:not(:disabled) { border-color: var(--cian); }

/* ── Las mismas dos formas que el juego de casa ──

   Lo decide `reglasQuiz.js` en los dos sitios, así que la misma pregunta
   se ve igual en clase y en el sofá. Lo que no se comparte es la
   corrección: aquí no hay retroalimentación de ningún tipo.

   🔶 Los trozos de dentro —`quiz-flecha`, `quiz-texto`, `quiz-celda`—
   son los del quiz a propósito, con su color y su tipografía ya
   resueltos. Lo único que cambia es la rejilla de fuera, porque aquí los
   botones no llevan letra delante: en un salón, la letra es del
   proyector y el teléfono solo tiene que decir qué tocar. */
.sala-opciones-direccion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.sala-opciones-direccion .sala-opcion,
.sala-opciones-tabla .sala-opcion {
  display: grid;
  align-items: center;
  gap: 12px;
}

.sala-opciones-direccion .sala-opcion {
  grid-template-columns: auto minmax(0, 1fr);
}

.sala-opciones-tabla .sala-opcion {
  grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr));
}

/* ── La casilla de las de varias respuestas ──

   🔴 Dibujada, no insinuada. El filo encendido bastaba mientras solo
   pudiera haber una marcada; con tres de cuatro hay que poder contarlas
   de un vistazo, y en la sala no hay forma de rectificar después de
   enviar. La palomita es la misma de «No estoy seguro»: un mismo gesto
   se dibuja igual en todo el sitio. */
.sala-opciones-marcar .sala-opcion {
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

/* Y si además viene con flechas o en tabla, la casilla es una columna
   más por delante. No debería pasar casi nunca —una pregunta de «sube o
   baja» tiene una sola respuesta— pero si pasa, se ve bien. */
.sala-opciones-marcar.sala-opciones-direccion .sala-opcion {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.sala-opciones-marcar.sala-opciones-tabla .sala-opcion {
  grid-template-columns: auto repeat(var(--columnas, 2), minmax(0, 1fr));
}

.sala-casilla {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(var(--linea-rgb), 0.6);
  border-radius: 5px;
}

.sala-casilla::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.sala-opcion-elegida .sala-casilla { border-color: var(--cian); }
.sala-opcion-elegida .sala-casilla::after { border-color: var(--cian); }

@media (max-width: 30rem) {
  /* Dos columnas de texto en un teléfono se estrechan hasta partir cada
     palabra. Una debajo de otra, con la raya arriba en vez de al lado. */
  .sala-opciones-tabla .sala-opcion { grid-template-columns: minmax(0, 1fr); }
  .sala-opciones-tabla .quiz-celda + .quiz-celda {
    border-left: 0;
    border-top: 1px solid rgba(var(--linea-rgb), 0.22);
    padding-left: 0;
    padding-top: 6px;
  }
}

/* 🔴 UN BOTÓN BLOQUEADO TIENE QUE PARECER BLOQUEADO.

   Esto faltaba desde que se construyó la sala y hasta ahora casi no se
   notaba: con una sola respuesta, el botón se desbloquea al primer
   toque. Con «Marca 3» sí se nota — alguien marca dos, ve un botón rojo
   encendido, lo pulsa, y no pasa nada. Eso no es rigor, es una pantalla
   que no dice lo que hace. */
.sala-confirmar:disabled {
  opacity: 0.4;
  cursor: default;
  filter: saturate(0.5);
}

.sala-confirmar:disabled:hover { transform: none; }

/* Cuántas hay que marcar. 🔶 Se dice aquí y NO en el recorrido, y no es
   incoherencia: allí hay empujón y se reintenta, aquí se envía y no hay
   vuelta. Es un número, nunca el conjunto. */
.sala-cuantas {
  margin: -10px 0 14px;
  font: 600 0.9rem/1.4 var(--mono);
  color: var(--pulsar);
}

.sala-opcion-elegida {
  border-color: var(--azumind);
  background: var(--panel-vivo);
  font-weight: 600;
}

.sala-opcion:disabled { opacity: 1; cursor: default; }

/* La elegida se sigue viendo elegida al bloquearse: es lo que contestó,
   y no saber qué marcaste sería peor que no saber si acertaste. */
.sala-opcion:disabled:not(.sala-opcion-elegida) { color: var(--texto-tenue); }

.sala-enviada {
  font-family: var(--mono);
  color: var(--vital);
  margin: 0 0 6px;
  font-size: 1rem;
}

/* ── Lo que se proyecta ─────────────────────────────────────── */

.sala-proyectada {
  border: 1px solid var(--linea-viva);
  border-radius: 16px;
  background: var(--fondo-alto);
  padding: 22px 20px;
  margin: 6px 0 18px;
}

.sala-proyectada-cuenta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 8px;
}

/* Se lee desde la última fila del salón. */
.sala-proyectada-texto {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--texto);
}

.sala-proyectada-opciones {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sala-proyectada-opcion {
  color: var(--texto-suave);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.4;
}

/* ── El ritmo de la sala ─────────────────────────────────────── */

.sala-campo-ayuda {
  display: block;
  margin-top: 7px;
  font-size: 0.88rem;
  color: var(--texto-tenue);
  line-height: 1.5;
}

/* La cuenta atrás del proyector. Grande, porque se mira de lejos, y en
   ámbar solo cuando queda poco — un número rojo todo el rato es
   exactamente la presión que este proyecto no quiere. */
.sala-cronometro {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--texto-suave);
  margin: 14px 0 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sala-cronometro-poco { color: var(--pulsar); }

.sala-cuantos-van {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--texto-tenue);
  margin: 8px 0 0;
}

/* La barra colectiva de las rejillas: cómo va la CLASE, no quién gana. */
.sala-barra {
  height: 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--linea);
  overflow: hidden;
  margin: 0 0 18px;
}

.sala-barra-llena {
  height: 100%;
  background: var(--vital);
  transition: width 0.4s ease;
}

/* ── Explicar, una por una ───────────────────────────────────── */

.sala-explicar-una { margin-bottom: 20px; }

.sala-explicar-una .sala-explicar-pregunta {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  line-height: 1.3;
  margin: 6px 0 18px;
}

.sala-explicar-una .sala-explicar-opcion {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

.sala-explicar-una .sala-explicar-buena {
  border-color: var(--vital);
  color: var(--vital);
}

.sala-explicar-marca {
  font-family: var(--mono);
  font-weight: 700;
}

.sala-explicar-pasos {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sala-explicar-donde {
  font-family: var(--mono);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

.sala-explicar-pasos .boton:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── En qué fallé ────────────────────────────────────────────────

   Verde la que era, roja la que marcaste si estaba mal. Las dos a la
   vez: enseñar solo la correcta no sirve si no te acuerdas de qué
   marcaste tú, y el contraste entre las dos es lo que se queda.

   🔶 El rojo se apoya en el color Y en el aspa. Uno de cada doce
   hombres no distingue el rojo del verde, y un examen que solo se
   entiende por el color no se entiende. */

.sala-explicar-tuya-mala {
  border-color: var(--pulsar);
  color: var(--pulsar);
}

.sala-explicar-enblanco {
  color: var(--texto-tenue);
  font-size: 0.94rem;
  margin: 0 0 10px;
  font-style: italic;
}

.sala-otra-puerta {
  margin: 18px 0 0;
  font-size: 0.94rem;
}

.sala-otra-puerta a {
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sala-otra-puerta a:hover { color: var(--texto); }

/* ── La consola del anfitrión ─────────────────────────────────────

   De dónde sale el contenido, y las salas guardadas. Las dos puertas
   —sortear de un tema o traer uno de tus minijuegos— van como pestañas
   y no como un desplegable: son dos formas distintas de trabajar, y
   esconder una detrás de una flecha es esconder la mitad. */

.sala-armar { margin-bottom: 4px; }

.sala-fuentes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sala-fuente {
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--cuerpo);
  font-size: 0.95rem;
  padding: 9px 16px;
  cursor: pointer;
}

.sala-fuente:hover { color: var(--texto); border-color: var(--linea-viva); }

.sala-fuente-activa {
  border-color: var(--vital);
  background: var(--fondo-alto);
  color: var(--vital);
  font-weight: 600;
}

.sala-fuente-cuerpo { margin-bottom: 4px; }

/* ── Tus salas ───────────────────────────────────────────────────

   🔶 El muro no borra: bloquea. Una sala fuera del cupo se ve entera
   —su título, su fecha, cuántos jugaron— y no se abre. Ver lo que ya
   tienes y no poder abrirlo es lo que empuja a pagar; borrarlo solo
   ofende. */

.sala-historial {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sala-historial-uno {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--fondo-alto);
  padding: 14px 16px;
}

.sala-historial-cerrada { opacity: 1; border-style: dashed; }

.sala-historial-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sala-historial-titulo {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--texto);
}

.sala-historial-codigo {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--texto-tenue);
  letter-spacing: 0.08em;
}

.sala-historial-datos {
  color: var(--texto-tenue);
  font-size: 0.88rem;
  margin: 6px 0 0;
}

.sala-historial-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* Lo que dice el muro. Va en el color del texto suave y no en el de un
   error: no se rompió nada, es que esa está guardada y no abierta. */
.sala-historial-muro {
  font-size: 0.88rem;
  color: var(--texto-suave);
  flex: 1;
}

/* 🔶 Borrar pide dos toques. Es lo único de esta pantalla que no se
   puede deshacer, y un × a un dedo de distancia de «Abrir» se pulsa
   sin querer. */
.sala-echar-seguro {
  color: var(--pulsar);
  font-family: var(--cuerpo);
  font-size: 0.82rem;
}

/* ── Pegar tu propio contenido ────────────────────────────────────

   La fórmula al lado del área, y los avisos debajo. 🔶 Un lector que
   tira las líneas malas en silencio es peor que uno que no lee nada:
   el profesor cree que pegó veinte términos y proyecta doce. */

.sala-fuente-muro { border-style: dashed; }

.sala-formula {
  border-left: 2px solid var(--linea-viva);
  padding: 2px 0 2px 14px;
  margin-bottom: 14px;
}

.sala-formula-texto {
  color: var(--texto-tenue);
  font-size: 0.88rem;
  margin: 0 0 6px;
}

.sala-formula-ejemplo {
  display: block;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--texto-suave);
  margin: 0 0 12px;
  overflow-x: auto;
  white-space: pre;
}

.sala-formula-ejemplo:last-child { margin-bottom: 0; }

.sala-pegar {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo-alto);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 12px 14px;
  resize: vertical;
}

.sala-pegar:focus { outline: 2px solid var(--vital); outline-offset: 1px; }
.sala-pegar:disabled { color: var(--texto-tenue); cursor: not-allowed; }

/* Los avisos. El número de línea va en negrita y con su palabra
   delante —«Línea 4»— y no solo en color: un aviso que solo se
   entiende por el color no se entiende. */
.sala-fallos {
  list-style: none;
  margin: 14px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sala-fallo {
  border-left: 3px solid var(--pulsar);
  padding-left: 12px;
}

.sala-fallo-linea {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pulsar);
}

.sala-fallo-que {
  display: block;
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin-top: 2px;
}

.sala-fallo-texto {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--texto-tenue);
  margin-top: 4px;
  overflow-x: auto;
  white-space: pre;
}

/* Lo que no cupo en la sopa, dicho en voz baja. El número y nada más:
   quien juega solo necesita saber que la cuenta es esa y que no está
   fallando él. Los términos y sus motivos van en la vista previa, que es
   donde están las manos que lo arreglan. */
.sopa-fuera {
  color: var(--texto-tenue);
  font-size: 0.84rem;
  margin: 8px 0 0;
  text-align: center;
}

/* El aviso que además FRENA: un crucigrama cuyas palabras no se cruzan
   no tiene tablero, y eso no se ve mirando la lista. */
.sala-fallo-grave { border-left-color: var(--vital); }

/* ── La puerta de premium ─────────────────────────────────────────

   Los muros llevan aquí. Hasta ahora eran callejones sin salida: se
   veía lo que te faltaba y no había dónde ir. */

/* Un muro que se pulsa. Parece texto porque no es una llamada a la
   acción: es el aviso, que además abre. */
.sala-enlace-muro {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--vital);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sala-enlace-muro:hover { color: var(--texto); }

.sala-premium-tabla {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}

.sala-premium-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--linea);
}

.sala-premium-fila:first-child { border-top: none; }

.sala-premium-cabeza {
  background: var(--fondo-alto);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.sala-premium-que { font-size: 0.94rem; color: var(--texto); }

/* Los dos números alineados y en la misma anchura: es una comparación,
   y una comparación que no se puede leer de un vistazo no compara. */
.sala-premium-gratis,
.sala-premium-pago {
  font-family: var(--mono);
  font-size: 0.86rem;
  min-width: 7.5rem;
  text-align: right;
}

.sala-premium-gratis { color: var(--texto-tenue); }
.sala-premium-pago { color: var(--vital); }
.sala-premium-cabeza .sala-premium-pago { color: var(--texto-tenue); }

/* 🔶 Lo que ya tienes sin pagar va a la vista y no escondido al final:
   sin esto la pantalla parece decir que el producto libre no sirve, y el
   producto libre es el que hace que un profesor vuelva la semana que
   viene. */
.sala-premium-gratis-lista {
  list-style: none;
  margin: 10px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sala-premium-ya {
  color: var(--texto-suave);
  font-size: 0.92rem;
  padding-left: 18px;
  position: relative;
}

.sala-premium-ya::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--vital);
  font-weight: 700;
}

/* ── Los dos atajos de la sala ────────────────────────────────────

   El historial estaba escondido en un enlace subrayado del pie, y a
   premium no se llegaba de ninguna forma si no te chocabas antes con un
   muro. Van arriba, con icono y con su palabra al lado: un dibujo solo
   obliga a adivinar qué significa. */

.sala-atajos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.sala-atajo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sala-atajo-icono {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── LA PÁGINA QUIETA, PEDIDA A MANO ──────────────────────────────

   Lo mismo que apagan los nueve bloques de "prefers-reduced-motion" de
   arriba, pero por el interruptor de los ajustes en vez de por el
   sistema operativo.

   🔶 Va repetido y no junto con una coma porque no se puede: una media
   query y un selector de atributo no caben en la misma lista. Y no se
   sustituyen los "@media" por esto, porque entonces, con el JavaScript
   caído, quien tiene el ajuste del sistema puesto se quedaría sin él.

   🔴 Por eso lo vigila "quieto.mjs": si mañana se apaga algo nuevo
   arriba y no aquí, el interruptor deja de apagarlo y no falla nada.
   Esta lista sale de los bloques de arriba, uno por uno.

   Y esto es accesibilidad, no rendimiento: la página va fina con las
   estrellas moviéndose. Es para quien el movimiento le estorba. */

html[data-movimiento='quieto'] .electro-desfile { animation: none; }
html[data-movimiento='quieto'] { scroll-behavior: auto; }
html[data-movimiento='quieto'] *,
html[data-movimiento='quieto'] *::before,
html[data-movimiento='quieto'] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
html[data-movimiento='quieto'] .aparece { opacity: 1; transform: none; }
html[data-movimiento='quieto'] .franja-paleta span { transform: none; }
html[data-movimiento='quieto'] .electro-trazo { stroke-dashoffset: 0; }
html[data-movimiento='quieto'] .electro-punto { display: none; }
html[data-movimiento='quieto'] .portada-video { display: none; }
html[data-movimiento='quieto'] .partida-mal { animation: none; }
html[data-movimiento='quieto'] .planeta[data-estado='aqui'] .planeta-punto::after { animation: none; opacity: 0.55; }
html[data-movimiento='quieto'] .planeta[data-llegando='1'] .planeta-punto,
html[data-movimiento='quieto'] .planeta[data-temblor='1'] .planeta-punto { animation: none; }
html[data-movimiento='quieto'] .planeta-punto,
html[data-movimiento='quieto'] .curso-barra span { transition: none; }
/* Este lleva el atributo pegado y no separado por un espacio: el
   original ya empezaba en `html`, y `html html` no es nadie. */
html[data-movimiento='quieto'][data-mapa] #cosmos { transform: none; }
html[data-movimiento='quieto'] .galaxia,
html[data-movimiento='quieto'] button.galaxia:hover { transition: none; transform: none; }
html[data-movimiento='quieto'] .recorrido-baliza { animation: none; }
html[data-movimiento='quieto'] .entrenar-tema,
html[data-movimiento='quieto'] .entrenar-tema:hover { transition: none; transform: none; }
html[data-movimiento='quieto'] .entrenar-talla { transition: none; }
html[data-movimiento='quieto'] .partida-preparando p { animation: none; opacity: 0.8; }

/* ── Afinar el sorteo: el doble eje ───────────────────────────────

   La dificultad es cuánto cuesta acertar; Bloom es qué operación mental
   pide la pregunta. No van juntos, y por eso se eligen por separado.

   🔶 Con el candado se ve entero y no se toca: enseñar lo que te estás
   perdiendo vende mejor que esconderlo. */

.sala-afinar {
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 22px;
}

.sala-afinar-muro { border-style: dashed; }

.sala-afinar-cabeza { margin-bottom: 10px; }

.sala-afinar-fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sala-afinar-uno { flex: 1 1 9rem; min-width: 0; }

/* La explicación de Bloom va plegada: quien ya sabe qué es no necesita
   leerla, y quien no, la tiene a un toque. */
.sala-bloom { margin-top: 12px; }

.sala-bloom summary {
  color: var(--texto-suave);
  font-size: 0.88rem;
  cursor: pointer;
}

.sala-bloom summary:hover { color: var(--texto); }

.sala-bloom-texto {
  color: var(--texto-tenue);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 8px 0 0;
}

/* ── Qué falló la clase ───────────────────────────────────────────

   Ordenada por la más fallada y no por el orden del examen: ese ya lo
   tiene el profesor, lo que no tiene es saber por dónde empezar mañana. */

.sala-fallos-lista {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sala-fallo-pregunta {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--fondo-alto);
  padding: 14px 16px;
}

.sala-fallo-texto-pregunta {
  font-size: 0.96rem;
  color: var(--texto);
  flex: 1;
}

/* La barra dice de un vistazo lo que los números dicen exactos. Va con
   su renglón de cifras debajo: una barra sola no se puede leer en voz
   alta, y esto se proyecta. */
.sala-fallo-barra {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--linea);
  margin: 10px 0 0;
}

.sala-fallo-trozo { display: block; height: 100%; }

.sala-fallo-bien { background: var(--vital); }
.sala-fallo-mal { background: var(--pulsar); }
.sala-fallo-nada { background: var(--texto-tenue); }

/* 🔶 «Acertaron dudando». Va en ámbar y con su frase entera, no como un
   número más en la línea de arriba: es lo contrario de lo que dice la
   nota, y una pregunta que sale verde en la barra puede ser la primera
   que hay que repasar. En ámbar porque en todo el sitio el ámbar
   significa «mira esto», nunca «esto está mal». */
.sala-fallo-dudando {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--pulsar);
}

/* ── La cesta: elegir a mano cuáles entran ────────────────────────

   Andrés: «el profesor premium elige bloom y dificultad, va marcando las
   que él quiera que entren».

   🔶 Y empieza VACÍA, que es su corrección y es buena: si todo viene
   marcado, quien quiere armar su propio quiz empieza desmarcando treinta
   cosas. */

.sala-amano {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--texto-suave);
  font-size: 0.94rem;
  cursor: pointer;
}

.sala-amano input { cursor: pointer; }
.sala-amano input:disabled { cursor: not-allowed; }

.sala-cesta {
  border-top: 1px solid var(--linea);
  margin-top: 14px;
  padding-top: 14px;
}

.sala-cesta-cuenta {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--vital);
  margin: 0 0 10px;
}

.sala-cesta-lista {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Con veinte elegidas la caja no puede empujar el botón de crear
     fuera de la pantalla: la cesta rueda dentro de sí misma. */
  max-height: 15rem;
  overflow-y: auto;
}

.sala-cesta-uno {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.sala-cesta-texto {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La casilla de cada pregunta de la vista previa. */
.sala-vista-casilla {
  margin-top: 3px;
  flex: none;
  cursor: pointer;
}

.sala-vista-conCasilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ── La sala usa la pantalla que hay ──────────────────────────────

   Andrés: «¿por qué no expandes el menú para que todo se vea bien?».
   Estaba clavada en 720 px aunque la página deja 1180, y en una pantalla
   de trabajo sobraba media.

   🔶 No se arregla estirando el panel a secas: una línea de 120
   caracteres no se lee. Se REPARTE — los ajustes a un lado, lo que van a
   ver al otro — y así se ve todo a la vez sin que la lectura empeore.

   Y no hay una versión para el móvil y otra para el ordenador: es el
   mismo HTML. Sin sitio, las dos columnas se apilan y queda como estaba,
   que es exactamente lo que tiene que pasar en un teléfono. */

@media (min-width: 1080px) {
  .sala-crear { max-width: 1120px; }

  .sala-armar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 30px;
    align-items: start;
  }

  /* Las pestañas mandan sobre las dos columnas, que es lo que son. */
  .sala-armar > .sala-fuentes { grid-column: 1 / -1; }

  /* Lo que van a ver se queda a la vista mientras se afina al lado. */
  .sala-armar-vista {
    position: sticky;
    top: 88px;
  }
}

/* Y la lista deja de ser una rendija. Con casillas era lo peor: estabas
   eligiendo a ciegas por un hueco de cuatro preguntas. */
.sala-vista { max-height: min(58vh, 620px); }

/* 🔶 Con casilla, la pregunta y su respuesta van UNA DEBAJO DE OTRA, no
   en dos columnas. Al meter la casilla convertí la fila en `flex` y la
   respuesta se quedó en un canal de noventa píxeles, partida en tres
   líneas. La casilla va fuera; el texto, entero. */
.sala-vista-conCasilla { align-items: flex-start; }

.sala-vista-conCasilla > .sala-vista-pregunta,
.sala-vista-conCasilla > .sala-vista-buena {
  flex: 1 1 100%;
  min-width: 0;
}

.sala-vista-conCasilla {
  flex-wrap: wrap;
  gap: 0 10px;
}

.sala-vista-conCasilla > .sala-vista-casilla { flex: none; }

/* La columna de la izquierda. No lleva nada propio: existe para que la
   rejilla tenga dos lados, y para que sin sitio sea un bloque más. */
.sala-armar-ajustes { min-width: 0; }

/* ── La tabla de premium, con su línea de qué es ──────────────────

   Andrés, leyéndola: «siendo el creador no lo entendí de un vistazo,
   imagínate otro». Un nombre corto sirve para acordarse de algo que ya
   se conoce; no sirve para decidir si se paga por ello. */

.sala-premium-que {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sala-premium-nombre { font-size: 0.94rem; color: var(--texto); }

.sala-premium-dice {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

/* Los desplegables de «cómo se lee esto». Van plegados: quien ya lo sabe
   no los abre, y quien lo ve por primera vez no tiene que adivinar. */
.sala-ayudas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 22px 0 0;
  border-top: 1px solid var(--linea);
  padding-top: 16px;
}

/* Las tres formas de llevarse los datos, en una fila. La hoja para
   imprimir y la azul salen del navegador; el archivo de columnas, de la
   propia página. */
.sala-descargas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

/* ── El salón partido en equipos ──────────────────────────────────

   🔴 UN EQUIPO SE MARCA CON UN FILO ENCENDIDO, NO CON UN BLOQUE DE
   COLOR. El manual lo dice por escrito unas ochenta líneas más arriba:
   los atmosféricos «viven en el cielo, en los halos y en los filos
   encendidos — jamás rellenando una caja». Y ya costó un fallo de
   contraste saltárselo: la nave del mapa se quedó en 2,79 por usar una
   ficha de TINTA como fondo.

   🔶 Y el color nunca va solo: el nombre del equipo está siempre
   escrito. Uno de cada doce hombres no distingue el rojo del verde, y un
   equipo que solo se reconoce por el color no se reconoce. */

.sala-equipos-panel {
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
}

.sala-equipos-panel[hidden] { display: none; }

.sala-equipos-previo { margin: 14px 0; }

.sala-equipos-fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.sala-equipo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 6rem;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  /* El filo: es lo único que lleva el color del equipo. */
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--fondo-alto);
  text-align: left;
  font: inherit;
  color: inherit;
}

button.sala-equipo { cursor: pointer; }
button.sala-equipo:hover { border-color: var(--linea-viva); }

.sala-equipo-nombre {
  font-size: 0.86rem;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sala-equipo-cuantos {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* Los seis filos. Del séptimo en adelante se quedan con la línea de
   siempre, que es honesto: nadie monta siete equipos en una clase. */
.sala-equipo-1 { border-left-color: var(--cian); }
.sala-equipo-2 { border-left-color: var(--aurora); }
.sala-equipo-3 { border-left-color: var(--pulsar); }
.sala-equipo-4 { border-left-color: var(--magenta); }
.sala-equipo-5 { border-left-color: var(--azumind-claro, var(--cian)); }
.sala-equipo-6 { border-left-color: var(--nova-tinta, var(--pulsar)); }

/* En la lista de gente y en la tabla, el mismo filo y nada más. */
.sala-gente-uno[class*='sala-equipo-'],
.sala-tabla-fila[class*='sala-equipo-'] { border-left-width: 3px; }

.sala-gente-equipo {
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-tenue);
  font-family: var(--cuerpo);
  font-size: 0.78rem;
}

.sala-elegir-equipo { margin: 0 0 18px; }
.sala-elegir-equipo[hidden] { display: none; }

/* El aviso del nombre repetido. No es un error —nadie se queda fuera—
   sino una pregunta con dos salidas, así que va en la línea de siempre y
   no en la de alarma. */
.sala-muro-nombre {
  border: 1px solid var(--linea);
  border-left-width: 3px;
  border-left-color: var(--pulsar);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0 0;
}

.sala-muro-nombre[hidden] { display: none; }

.sala-muro-texto {
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 10px;
}


/* ═══════════════════════════════════════════════════════════════
   LA BITÁCORA
   ═══════════════════════════════════════════════════════════════

   Andrés: «que le salgan organizadas bien bonitas al más estilo Azumind
   usando distintos colores para adornar… las que no estén en gris con
   signos de interrogación, como cajitas desbloqueables».

   🔴 Y LOS COLORES ADORNAN, NO INFORMAN. `estilos.css:80-85` lo exige
   para todo el sitio: los atmosféricos «viven en el cielo, en los halos
   y en los filos encendidos — jamás rellenando una caja». Aquí el tinte
   de cada órbita va en el FILO IZQUIERDO, y lo que dice si algo está
   abierto o cerrado es el icono, la palabra y la forma. Nunca el color
   solo: uno de cada doce hombres no distingue el rojo del verde.
   ═══════════════════════════════════════════════════════════════ */

.bita-tema { margin: 0 0 40px; }

.bita-tema-nombre {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--texto);
}

.bita-orbitas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* Cada órbita es una ficha con su filo encendido. La cerrada pierde el
   tinte y se queda con el gris de todas — que se parezcan entre sí es
   parte de que se lean como cajas por abrir. */
.bita-orbita {
  padding: 14px 18px;
  border: 1px solid rgba(var(--linea-rgb), 0.24);
  border-left: 3px solid var(--tinte, rgba(var(--linea-rgb), 0.3));
  border-radius: 12px;
  background: rgba(var(--s-media-rgb), 0.55);
}

.bita-orbita-cerrada {
  border-style: dashed;
  border-left-style: dashed;
  background: transparent;
}

.bita-orbita-cabeza {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.bita-letra {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--tinte, rgba(var(--linea-rgb), 0.35));
  border-radius: 8px;
  color: var(--tinte, var(--texto-tenue));
  font: 600 0.92rem/1 var(--mono);
}

.bita-orbita-nombre {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--texto);
}

.bita-orbita-cerrada .bita-orbita-nombre {
  color: var(--texto-tenue);
  font-family: var(--mono);
  letter-spacing: 0.14em;
}

/* ── Las cajitas ──
   Una por baliza. Las cerradas son un hueco con su filo; las abiertas
   van rellenas del tinte. 🔶 Y se ven TAMBIÉN las cerradas a propósito:
   saber cuántas faltan es lo que hace que apetezca seguir. */
.bita-cajitas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 0 0 auto;
}

.bita-cajita {
  width: 11px;
  height: 14px;
  border: 1px solid rgba(var(--linea-rgb), 0.45);
  border-radius: 2px;
}

.bita-cajita-abierta {
  border-color: var(--tinte, var(--cian));
  background: var(--tinte, var(--cian));
  opacity: 0.65;
}

/* La estación: una estrella al final de la órbita. Hueca si no está. */
.bita-estrella {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--texto-tenue);
}

.bita-estrella-abierta { color: var(--pulsar); }

.bita-cerrada-nota {
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.bita-abrir { margin-top: 12px; }

.bita-contenido {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--linea-rgb), 0.18);
}

.bita-sello {
  margin: 18px 0 6px;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian);
}

.bita-sello-estacion { color: var(--pulsar); }

.bita-sello:first-child { margin-top: 0; }

/* ── LA ESTACIÓN, EN SU PROPIA FRANJA ──────────────────────────

   Andrés: «quiero que baliza y estación estén separadas físicamente
   dentro de la misma página y que la estación esté un poco más
   resaltada porque es el resumen de todo, es importante leerlo».

   Antes iba seguida de las balizas con solo un sello de otro color
   delante, y se leía como una baliza más. Ahora lleva marco, aire por
   arriba y el cuerpo un punto más grande.

   🔶 El pulsar adorna. Lo que dice que esto es una estación son la
   palabra «La estación» y la estrella — nunca el color solo. */
.bita-estacion {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid rgba(var(--pulsar-rgb), 0.35);
  border-radius: 14px;
  background: rgba(var(--pulsar-rgb), 0.05);
}

/* Un punto más grande que una baliza. Poco: la jerarquía ya la dan el
   marco y el sitio, y una estación de tres párrafos en cuerpo grande se
   vuelve un muro. */
.bita-estacion .baliza-texto { font-size: 1.02rem; }

.bita-estacion-cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 12px;
}

.bita-estacion-estrella {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--pulsar);
}

.bita-estacion-titulo {
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulsar);
}

/* De qué órbita es el resumen. En tenue: es una aclaración, no el
   título. */
.bita-estacion-pie {
  font-size: 0.84rem;
  color: var(--texto-suave);
}

/* La que todavía no se ha ganado: mismo sitio, mismo tamaño, apagada.
   🔶 Se enseña a propósito — ver el hueco que falta es lo que hace que
   apetezca terminar la órbita. */
.bita-estacion-cerrada {
  border-color: rgba(var(--linea-rgb), 0.28);
  background: none;
}

.bita-estacion-cerrada .bita-estacion-estrella,
.bita-estacion-cerrada .bita-estacion-titulo {
  color: var(--texto-tenue);
}

.bita-estacion-cerrada .bita-cerrada-nota { margin-top: 0; }

.bita-galaxias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

@media (max-width: 30rem) {
  /* En un teléfono, el nombre y las cajitas no caben en la misma fila
     sin que el nombre se parta palabra a palabra. */
  .bita-orbita-nombre { flex-basis: 100%; }
  .bita-orbita { padding: 12px 14px; }
}