/* =====================================================================
   tokens.css · Variables de diseño de toda la web (sección 5 del pliego)
   ---------------------------------------------------------------------
   Es la ÚNICA fuente de colores y tamaños. Ningún otro CSS debe escribir
   un color o una medida «suelta»: así, cambiar de modo de color o ajustar
   el diseño se hace en un solo sitio.

   Los modos se activan con atributos en <html> que pone ajustes.js:
     data-texto="normal|grande|muy-grande|enorme"
     data-colores="normal|contraste|oscuro"
     data-movimiento="normal|reducido"

   Nota: las variables CSS no funcionan dentro de @media, así que los
   puntos de corte (600 px y 1200 px) se repiten literalmente en cada
   media query. Son la única excepción a la regla anterior.
   ===================================================================== */

/* --- Fuente alojada en la propia web (sin CDN). font-display: swap evita
   que el texto quede invisible mientras se descarga la fuente. --------- */
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fuentes/atkinson-hyperlegible-next-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fuentes/atkinson-hyperlegible-next-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fuentes/atkinson-hyperlegible-next-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fuentes/atkinson-hyperlegible-next-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* --- Colores del modo normal (tabla 5.1 del pliego) --- */
  --fondo: #F6F7F2;
  --superficie: #FFFFFF;
  --texto: #1D2B24;
  --texto-suave: #3E4D45;
  --texto-tenue: #4A5A52;
  --borde: #DDE3DA;
  --borde-fuerte: #C9D1C6;
  --principal: #1F6F5C;
  --principal-texto: #FFFFFF;      /* texto sobre el botón principal */
  --principal-oscuro: #164F42;
  --principal-suave: #9CC3B5;      /* dibujos de nivel, cuadraditos claros */
  --acento: #F2B544;
  --acento-texto: #1D2B24;
  --aviso-fondo: #FCEFD6;
  --aviso-texto: #4A3404;
  --neutro: #EEF1EB;
  --neutro-fuerte: #E6EAE3;        /* barra de progreso sin rellenar */
  --enlace: #1F6F5C;
  --superficie-marcada: #E6F2EE;   /* opción elegida, carta acertada */

  /* Botón oscuro y paneles oscuros: se separan de --texto porque en el modo
     oscuro el texto es claro, pero estos elementos no deben invertirse igual. */
  --boton-oscuro: #1D2B24;
  --boton-oscuro-texto: #FFFFFF;
  --panel-oscuro: #1D2B24;
  --panel-oscuro-texto: #FFFFFF;
  --panel-oscuro-suave: #D6DED8;
  --panel-oscuro-tarjeta: #2A3A32;
  --panel-oscuro-borde: #1D2B24;
  --panel-oscuro-acento: #F2B544;

  /* Colores por capacidad (fondo / texto sobre ese fondo) */
  --cap-memoria-fondo: #E6F2EE;      --cap-memoria-texto: #164F42;
  --cap-atencion-fondo: #FCEFD6;     --cap-atencion-texto: #6B4A06;
  --cap-rapidez-fondo: #E8EEF8;      --cap-rapidez-texto: #22406E;
  --cap-razonamiento-fondo: #EFE8F6; --cap-razonamiento-texto: #4B2E73;
  --cap-lenguaje-fondo: #FCE8EE;     --cap-lenguaje-texto: #8A1F3D;
  --cap-calculo-fondo: #E2F2F6;      --cap-calculo-texto: #0E4B5A;
  --cap-orientacion-fondo: #EAF3DC;  --cap-orientacion-texto: #3B5214;
  --cap-recuerdos-fondo: #F5EBDF;    --cap-recuerdos-texto: #6B4020;

  /* Cajas de la Guía de la memoria */
  --consejo-fondo: #FCEFD6;   --consejo-texto: #4A3404;   --consejo-borde: #E9C77E;
  --urgencia-fondo: #FDE7E4;  --urgencia-texto: #7A1F14;  --urgencia-borde: #C0392B;
  --comparativa-no-fondo: #FBE7D6;  --comparativa-no-texto: #8A3E0F;

  /* Equipos del modo taller y jugadores por turnos. Cada equipo se distingue
     también por su nombre y por la etiqueta «Os toca», nunca solo por color. */
  --equipo-azul-fondo: #E8EEF8;     --equipo-azul-texto: #22406E;     --equipo-azul-borde: #2D5A8C;
  --equipo-naranja-fondo: #FBE7D6;  --equipo-naranja-texto: #8A3E0F;  --equipo-naranja-borde: #8A3E0F;
  --equipo-verde-fondo: #E6F2EE;    --equipo-verde-texto: #164F42;    --equipo-verde-borde: #1F6F5C;
  --equipo-morado-fondo: #EFE8F6;   --equipo-morado-texto: #4B2E73;   --equipo-morado-borde: #6B3E8C;

  /* Casillas de Secuencia: color + símbolo distinto en cada una. */
  --casilla-1: #1F6F5C; --casilla-2: #2D5A8C; --casilla-3: #8A3E0F;
  --casilla-4: #6B3E8C; --casilla-5: #6B4A06; --casilla-6: #A32C3C;
  --casilla-7: #33597A; --casilla-8: #4A6A1F; --casilla-9: #7A3B69;
  --casilla-texto: #FFFFFF;
  --casilla-encendida: #FFFFFF;
  --casilla-encendida-texto: #1D2B24;

  /* Figuras de Encuentra la serie: siempre con su nombre escrito debajo. */
  --figura-rojo: #C23340;   --figura-azul: #2D5A8C;  --figura-verde: #2F7D4E;
  --figura-amarillo: #D99A1C;

  /* Señal y distractores de Vistazo rápido */
  --vistazo-senal: #B5610C;
  --vistazo-distractor: #6E7F8C;
  --vistazo-mascara-1: #1D2B24;
  --vistazo-mascara-2: #9CC3B5;
  --vistazo-mascara-3: #F2B544;
  --vistazo-mascara-4: #F6F7F2;

  /* Juegos de la vida diaria: papel del tique, calles y dinero esquemático. */
  --tique-fondo: #FBFAF3;  --tique-texto: #1D2B24;
  --calle: #DDE3DA;
  --dinero-texto: #1D2B24;  --dinero-borde: #6E7F8C;
  --dinero-plata: #DDE3DA;  --dinero-cobre: #F0C9A0;  --dinero-oro: #F2D98A;
  --dinero-billete-1: #D6DED8;  --dinero-billete-2: #F4C7BE;  --dinero-billete-3: #C9D8F0;  --dinero-billete-4: #F4D9A8;

  /* Muestras del panel de ajustes: enseñan cada modo sea cual sea el activo,
     por eso NO se redefinen en los modos contraste y oscuro. */
  --muestra-normal-fondo: #F6F7F2;    --muestra-normal-texto: #1D2B24;  --muestra-normal-borde: #DDE3DA;
  --muestra-contraste-fondo: #FFFFFF; --muestra-contraste-texto: #000000;
  --muestra-oscuro-fondo: #121815;    --muestra-oscuro-texto: #F6F7F2;

  /* La hoja de las fichas es papel: blanca en cualquier modo de color. */
  --hoja-fondo: #FFFFFF;
  --hoja-texto: #000000;

  /* Sombras */
  --sombra-tarjeta: 0 10px 30px rgba(29, 43, 36, 0.08);
  --sombra-carta: 0 8px 20px rgba(29, 43, 36, 0.15);
  /* El semáforo: rojo arriba, ámbar en medio y verde abajo. */
  --semaforo-apagado: #3A4640;  --semaforo-simbolo: #FFFFFF;
  --semaforo-rojo: #C23340;  --semaforo-ambar: #B5610C;  --semaforo-verde: #1F7A4D;

  /* La torre: tres tonos de morado con borde, para distinguir los discos. */
  --disco-oscuro: #4B2E73;  --disco-medio: #7A5BA6;  --disco-claro: #B59AD6;  --disco-borde: #4B2E73;
  --eje-torre: #9DAA9F;

  --velo-pausa: rgba(29, 43, 36, 0.72);
  --velo-pausa-texto: #FFFFFF;

  /* --- Tipografía --- */
  --fuente: 'Atkinson Hyperlegible Next', system-ui, sans-serif;

  /* El tamaño base se da en % para respetar también el tamaño de letra que
     cada persona haya puesto en su navegador: 125 % de 16 px = 20 px. */
  --base-porcentaje: 125%;
  --factor-texto: 1;

  --t-titulo-portada: 2.3rem;
  --t-titulo-grande: 2.3rem;
  --t-seccion: 1.65rem;          /* 33 px: h2 de sección */
  --t-subtitulo: 1.3rem;
  --t-tarjeta: 1.1rem;           /* 22 px: h3 de tarjeta (sección 3.2) */
  --t-destacado: 1.15rem;
  --t-texto: 1rem;
  --t-boton: 1.05rem;
  --t-boton-grande: 1.3rem;
  --t-taller: 28px;              /* mínimo del modo taller (sección 10.7) */
  --t-taller-puntos: 48px;
  --t-cifra: 2.6rem;              /* número grande de las cifras de la guía */
  --t-opcion: 1.2rem;             /* opciones: 24 px como mínimo */
  --t-plano: 0.7rem;              /* nombres del plano: 14 px, dentro de un dibujo */
  --t-dinero-moneda: 0.7rem;
  --t-nota: 0.85rem;            /* 17 px a 20 de base; nunca baja de 16 px reales */
  --t-chip: 0.85rem;
  --interlineado: 1.5;
  --interlineado-lectura: 1.6;
  --medida-lectura: 68ch;        /* medida máxima del texto de lectura */
  --interlineado-lectura: 1.6;
  --medida-lectura: 68ch;        /* medida máxima del texto de lectura */
  --interlineado-titulo: 1.15;

  /* --- Espacios (en rem, para que crezcan con la letra) --- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-7: 2rem;
  --e-8: 2.5rem;
  --e-9: 3.5rem;

  /* --- Escala de medidas de los componentes ---
     Anchos y altos de piezas concretas. Van en rem para crecer con la letra.
     El número es el valor por cien: --medida-240 son 2,4rem. */
  --medida-100: 1rem;
  --medida-110: 1.1rem;
  --medida-120: 1.2rem;
  --medida-130: 1.3rem;
  --medida-140: 1.4rem;
  --medida-160: 1.6rem;
  --medida-180: 1.8rem;
  --medida-200: 2rem;
  --medida-220: 2.2rem;
  --medida-230: 2.3rem;
  --medida-240: 2.4rem;
  --medida-250: 2.5rem;
  --medida-260: 2.6rem;
  --medida-280: 2.8rem;
  --medida-300: 3rem;
  --medida-320: 3.2rem;
  --medida-340: 3.4rem;
  --medida-400: 4rem;
  --medida-420: 4.2rem;
  --medida-500: 5rem;
  --medida-550: 5.5rem;
  --medida-600: 6rem;
  --medida-660: 6.6rem;
  --medida-700: 7rem;
  --medida-800: 8rem;
  --medida-900: 9rem;
  --medida-1500: 15rem;
  --medida-1000: 10rem;
  --medida-1100: 11rem;
  --medida-1200: 12rem;
  --medida-1300: 13rem;
  --medida-1400: 14rem;
  --medida-1900: 19rem;
  --medida-2000: 20rem;
  --medida-2200: 22rem;
  --medida-2400: 24rem;
  --medida-3400: 34rem;

  /* --- Medidas fijas (en px: deben cumplirse sea cual sea la letra) --- */
  --toque-min: 56px;            /* zona táctil mínima */
  --toque-principal: 72px;      /* botones principales */
  --toque-medio: 64px;
  --separacion-toque: 10px;     /* separación mínima entre zonas táctiles */
  --margen-lateral: 24px;        /* 16 en móvil y 40 en escritorio */
  --ancho-contenedor: 1200px;    /* cabecera, contenido y pie comparten bordes */
  --ritmo-seccion: 32px;         /* entre secciones: 32 en tablet, 52 en escritorio */
  --toque-compacto: 44px;        /* enlaces dentro de listas de texto */
  --ancho-lateral: 320px;
  --ancho-banda: 760px;
  --dibujo-banda: 200px;
  --alto-miniatura: 110px;
  --alto-dibujo-nivel: 96px;
  --ancho-panel: 300px;          /* panel lateral de la partida */
  --alto-opcion: 72px;           /* opciones de respuesta: 72 en tablet, 64 en móvil */
  --hueco-opciones: 12px;
  --alto-hueco-momento: 120px;
  --tam-letra: 64px;             /* fichas de Letras revueltas */
  --hueco-letras: 8px;
  --celda-grande: 48px;          /* casillas de la sopa en modo grande */
  --tam-moneda: 44px;
  --retrato-cara: 260px;
  --grosor-eje: 12px;
  --ancho-billete: 76px;
  --reloj-maximo: 400px;
  --ancho-controles-barrio: 230px;
  --tam-punto-plano: 30px;
  --ancho-lectura: 720px;
  /* Anchos mínimos de las rejillas fluidas. Van en rem a propósito: al subir la
     letra caben menos columnas y el contenido nunca se corta. */
  --ancho-tarjeta: 13rem;
  --ancho-reto: 9rem;
  --alto-reto: 5.6rem;          /* una fila de tres juegos */
  --alto-controles-fichas: 19rem;
  --ancho-nav: 6.5rem;           /* caben los cinco botones en una fila en tablet */
  --ancho-fin-partida: 860px;
  --ancho-hoja: 794px;          /* 210 mm a 96 ppp */
  --letra-hoja: 21.3px;         /* 16 pt */
  --ancho-ventana-ajustes: 780px;
  --logo: 44px;
  --icono: 26px;
  --icono-pequeno: 20px;
  --icono-grande: 32px;
  --marca-acierto: 34px;
  --celda-dibujo: 15px;         /* cuadraditos de las tarjetas de nivel */
  --hueco-dibujo: 4px;
  --dibujo-tema: 48px;
  --alto-barra: 10px;
  --hueco-cartas: 16px;
  --alto-carta-grande: 12rem;
  --grosor-pista: 6px;

  /* Radios */
  --radio-boton: 14px;
  --radio-pequeno: 8px;
  --radio-tarjeta: 20px;
  --radio-tarjeta-grande: 24px;
  --radio-chip: 999px;
  --radio-carta: 16px;
  --radio-minimo: 3px;

  /* Bordes */
  --grosor-fino: 1px;
  --grosor-boton: 2px;
  --grosor-marca: 3px;
  --grosor-foco: 3px;
  --separacion-foco: 2px;

  /* Tiempos de transición: en «menos movimiento» se anulan. */
  --tiempo-giro: 300ms;
  --tiempo-suave: 150ms;
}

/* Móvil: la base baja a 19 px y los títulos se reducen para que quepan. */
@media (max-width: 599px) {
  :root {
    --base-porcentaje: 118.75%;
    --margen-lateral: 16px;
    --ritmo-seccion: 32px;
    --ritmo-seccion: 32px;
    --t-titulo-portada: 1.8rem;
    --t-titulo-grande: 1.8rem;
    --t-seccion: 1.3rem;
    --t-subtitulo: 1.15rem;
    --t-boton-grande: 1.15rem;
    --logo: 36px;
    --hueco-cartas: 10px;
    --alto-opcion: 64px;
    --alto-hueco-momento: 88px;
    --tam-letra: 56px;
    --alto-reto: 15rem;           /* tres filas apiladas */
    --ancho-tarjeta: 8rem;
    --ancho-nav: 8rem;
  }
}

/* Escritorio: el titular de la portada es más grande (ver maqueta). */
@media (min-width: 1200px) {
  :root {
    --margen-lateral: 40px;
    --ritmo-seccion: 52px;
    --margen-lateral: 40px;
    --ritmo-seccion: 52px;
    --t-titulo-portada: 3.2rem;
    --alto-reto: 12rem;
    --t-titulo-grande: 2.6rem;
  }
}

/* --- Tamaños de texto: factor sobre la base (sección 8) --- */
html[data-texto='grande'] { --factor-texto: 1.2; }
html[data-texto='muy-grande'] { --factor-texto: 1.4; }
html[data-texto='enorme'] { --factor-texto: 1.6; }

/* --- Modo contraste alto (sección 5.1): blanco, negro y bordes de 3 px --- */
html[data-colores='contraste'] {
  --fondo: #FFFFFF;
  --superficie: #FFFFFF;
  --texto: #000000;
  --texto-suave: #000000;
  --texto-tenue: #000000;
  --borde: #000000;
  --borde-fuerte: #000000;
  --principal: #000000;
  --principal-texto: #FFFFFF;
  --principal-oscuro: #000000;
  --principal-suave: #000000;
  --acento: #000000;
  --acento-texto: #FFFFFF;
  --aviso-fondo: #FFFFFF;
  --aviso-texto: #000000;
  --neutro: #FFFFFF;
  --neutro-fuerte: #FFFFFF;
  --enlace: #000000;
  --superficie-marcada: #FFFFFF;
  --boton-oscuro: #000000;
  --boton-oscuro-texto: #FFFFFF;
  --panel-oscuro: #FFFFFF;
  --panel-oscuro-texto: #000000;
  --panel-oscuro-suave: #000000;
  --panel-oscuro-tarjeta: #FFFFFF;
  --panel-oscuro-borde: #000000;
  --panel-oscuro-acento: #000000;
  --cap-memoria-fondo: #FFFFFF;      --cap-memoria-texto: #000000;
  --cap-atencion-fondo: #FFFFFF;     --cap-atencion-texto: #000000;
  --cap-rapidez-fondo: #FFFFFF;      --cap-rapidez-texto: #000000;
  --cap-razonamiento-fondo: #FFFFFF; --cap-razonamiento-texto: #000000;
  --cap-lenguaje-fondo: #FFFFFF;     --cap-lenguaje-texto: #000000;
  --cap-calculo-fondo: #FFFFFF;      --cap-calculo-texto: #000000;
  --cap-orientacion-fondo: #FFFFFF;  --cap-orientacion-texto: #000000;
  --cap-recuerdos-fondo: #FFFFFF;    --cap-recuerdos-texto: #000000;
  --consejo-fondo: #FFFFFF;   --consejo-texto: #000000;   --consejo-borde: #000000;
  --urgencia-fondo: #FFFFFF;  --urgencia-texto: #000000;  --urgencia-borde: #000000;
  --comparativa-no-fondo: #FFFFFF;  --comparativa-no-texto: #000000;
  --equipo-azul-fondo: #FFFFFF;     --equipo-azul-texto: #000000;     --equipo-azul-borde: #000000;
  --equipo-naranja-fondo: #FFFFFF;  --equipo-naranja-texto: #000000;  --equipo-naranja-borde: #000000;
  --equipo-verde-fondo: #FFFFFF;    --equipo-verde-texto: #000000;    --equipo-verde-borde: #000000;
  --equipo-morado-fondo: #FFFFFF;   --equipo-morado-texto: #000000;   --equipo-morado-borde: #000000;
  --casilla-1: #000000; --casilla-2: #000000; --casilla-3: #000000;
  --casilla-4: #000000; --casilla-5: #000000; --casilla-6: #000000;
  --casilla-7: #000000; --casilla-8: #000000; --casilla-9: #000000;
  --casilla-encendida: #FFFFFF;
  --casilla-encendida-texto: #000000;
  --figura-rojo: #000000; --figura-azul: #000000; --figura-verde: #000000; --figura-amarillo: #000000;
  --vistazo-senal: #000000;
  --vistazo-distractor: #000000;
  --vistazo-mascara-1: #000000;
  --vistazo-mascara-2: #FFFFFF;
  --vistazo-mascara-3: #000000;
  --vistazo-mascara-4: #FFFFFF;
  --sombra-tarjeta: none;
  --sombra-carta: none;
  --velo-pausa: rgba(0, 0, 0, 0.85);
  --disco-oscuro: #000000; --disco-medio: #FFFFFF; --disco-claro: #000000; --disco-borde: #000000; --eje-torre: #000000;
  --semaforo-apagado: #FFFFFF; --semaforo-simbolo: #FFFFFF; --semaforo-rojo: #000000; --semaforo-ambar: #000000; --semaforo-verde: #000000;
  --tique-fondo: #FFFFFF; --tique-texto: #000000; --calle: #000000;
  --dinero-texto: #000000; --dinero-borde: #000000; --dinero-plata: #FFFFFF; --dinero-cobre: #FFFFFF; --dinero-oro: #FFFFFF;
  --dinero-billete-1: #FFFFFF; --dinero-billete-2: #FFFFFF; --dinero-billete-3: #FFFFFF; --dinero-billete-4: #FFFFFF;
  /* En este modo todos los bordes finos pasan a 3 px, como pide el pliego. */
  --grosor-fino: 3px;
  --grosor-boton: 3px;
}

/* --- Modo fondo oscuro (sección 5.1) --- */
html[data-colores='oscuro'] {
  --fondo: #121815;
  --superficie: #1E2622;
  --texto: #F6F7F2;
  --texto-suave: #C9D4CD;
  --texto-tenue: #C9D4CD;
  --borde: #3A4640;
  --borde-fuerte: #5A6A62;
  --principal: #7FC8B2;
  --principal-texto: #121815;
  --principal-oscuro: #A9DCCB;
  --principal-suave: #3F6B5D;
  --acento: #F2B544;
  --acento-texto: #121815;
  --aviso-fondo: #3D3014;
  --aviso-texto: #FBE3AE;
  --neutro: #1E2622;
  --neutro-fuerte: #3A4640;
  --enlace: #7FC8B2;
  --superficie-marcada: #1F3A32;
  --boton-oscuro: #F6F7F2;
  --boton-oscuro-texto: #121815;
  --panel-oscuro: #1E2622;
  --panel-oscuro-texto: #F6F7F2;
  --panel-oscuro-suave: #C9D4CD;
  --panel-oscuro-tarjeta: #2A3A32;
  --panel-oscuro-borde: #3A4640;
  --panel-oscuro-acento: #F2B544;
  --cap-memoria-fondo: #1F3A32;      --cap-memoria-texto: #CDE9DF;
  --cap-atencion-fondo: #3D3014;     --cap-atencion-texto: #FBE3AE;
  --cap-rapidez-fondo: #25324A;      --cap-rapidez-texto: #D4E0F5;
  --cap-razonamiento-fondo: #33264A; --cap-razonamiento-texto: #E3D5F3;
  --cap-lenguaje-fondo: #4A1E2E;     --cap-lenguaje-texto: #F7D3DE;
  --cap-calculo-fondo: #17404A;      --cap-calculo-texto: #CDEBF3;
  --cap-orientacion-fondo: #2F3D18;  --cap-orientacion-texto: #DDEDC2;
  --cap-recuerdos-fondo: #43301F;    --cap-recuerdos-texto: #F0DFCB;
  --consejo-fondo: #3D3014;   --consejo-texto: #FBE3AE;   --consejo-borde: #7A6230;
  --urgencia-fondo: #4A1F1A;  --urgencia-texto: #F9D2CC;  --urgencia-borde: #E2705F;
  --comparativa-no-fondo: #4A2E18;  --comparativa-no-texto: #FBD9BC;
  --equipo-azul-fondo: #25324A;     --equipo-azul-texto: #D4E0F5;     --equipo-azul-borde: #A9C3EC;
  --equipo-naranja-fondo: #4A2E18;  --equipo-naranja-texto: #FBD9BC;  --equipo-naranja-borde: #F0B285;
  --equipo-verde-fondo: #1F3A32;    --equipo-verde-texto: #CDE9DF;    --equipo-verde-borde: #7FC8B2;
  --equipo-morado-fondo: #33264A;   --equipo-morado-texto: #E3D5F3;   --equipo-morado-borde: #C7AEE6;
  --casilla-1: #2A7A66; --casilla-2: #3A6A9E; --casilla-3: #9C5026;
  --casilla-4: #7D4FA0; --casilla-5: #7D5F16; --casilla-6: #B04152;
  --casilla-7: #41698C; --casilla-8: #5A7B2C; --casilla-9: #8E4C7C;
  --casilla-encendida: #F6F7F2;
  --casilla-encendida-texto: #121815;
  --figura-rojo: #F08A93; --figura-azul: #8DB4EA; --figura-verde: #84D0A0; --figura-amarillo: #F2B544;
  --vistazo-senal: #F2B544;
  --vistazo-distractor: #9FB0A6;
  --vistazo-mascara-1: #F6F7F2;
  --vistazo-mascara-2: #3F6B5D;
  --vistazo-mascara-3: #F2B544;
  --vistazo-mascara-4: #121815;
  --sombra-tarjeta: none;
  --sombra-carta: none;
  --velo-pausa: rgba(0, 0, 0, 0.8);
  --tique-fondo: #2A3A32; --tique-texto: #F6F7F2; --calle: #3A4640;
}

/* --- Menos movimiento: sin transiciones ni giros --- */
html[data-movimiento='reducido'] {
  --tiempo-giro: 0ms;
  --tiempo-suave: 0ms;
}