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

/* Tipografía servida desde el propio dominio: nada de Google Fonts, que en una web
   europea dirigida a menores es un problema de RGPD que no hace falta tener.
   Outfit es variable (300-700) y pesa 47 KB con los dos subconjuntos. Licencia OFL. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fuentes/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fuentes/outfit-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Chasis M5 «aurora cálida». Un solo sistema, tres temperamentos por etapa. ---- */
:root{
  --fondo:#FDFBF7; --tinta:#1A1720; --tinta-suave:#6C6577; --linea:rgba(26,23,32,.09);
  /* Dos familias de color, y la distinción importa:
     — `--coral` y `--teal` son DECORATIVOS: solo pintan la aurora, que va desenfocada y
       nunca lleva texto encima.
     — `--coral-solido` y `--teal-solido` son los que van DEBAJO DE TEXTO. Son más
       oscuros porque los vivos no llegan al 4,5:1 con blanco: medido, el coral daba
       4,39 y el teal 3,58. Sobre mostaza el texto va en tinta (9,15), nunca blanco,
       que daría 1,93 y es prácticamente ilegible. */
  --mostaza:#E8B23C; --coral:#D8433B; --teal:#2D968E;
  --coral-solido:#C93A32; --teal-solido:#1F6E68;
  --acento:var(--mostaza); --acento-2:var(--teal-solido); --sobre-acento:#1A1720;
  --cristal:rgba(255,255,255,.78); --cristal-alto:#FFFFFF;
  --radio:16px; --radio-g:22px; --cuerpo:16px; --paso:clamp(1rem,3vw,1.7rem);
  --objetivo-toque:44px;
  --aurora:.42;
  --texto:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Contrato público para los juegos. V3 los escribió contra este espacio de nombres
     `--em-*` y es un nombre mejor que el mío, así que lo publica el motor en vez de
     hacer reescribir cinco juegos. Al cambiar el estilo, los juegos cambian solos. */
  --em-fondo:var(--fondo); --em-tinta:var(--tinta); --em-tinta-suave:var(--tinta-suave);
  --em-borde:var(--linea); --em-marca:var(--acento); --em-fuente:var(--texto);
  /* `--em-acento` y `--em-acento-2` son FONDOS TENUES, y tienen que serlo.
     Los ocho juegos los usan para el mismo papel —lo llaman `tenue`, `suelo`, `suave`— y
     escriben texto encima en `--em-tinta-suave`. Se veía en su color de reserva, `#eaf2fb`,
     que es azul pálido: eso es lo que esperaban.
     Estaban apuntando a `var(--acento)`, es decir, AL MISMO COLOR QUE `--em-marca`, que es el
     de los botones. Así que el chip salía del color del botón y el texto encima desaparecía.
     Lo cazó el usuario mirando la sopa de letras el 2026-08-16: «Encontradas 0/6» y «Palabras»
     ilegibles sobre verde. Estaba en los OCHO juegos, así que se arregla aquí y no ocho veces.
     Medido sobre estos valores: tinta suave (#6C6577) sobre #FBF0D9 da 5,4:1, y sobre #E4F1EF
     da 5,6:1. Los dos pasan el 4,5:1 que exige la norma para texto normal. */
  --em-acento:#FBF0D9; --em-acento-2:#E4F1EF;
  --em-ok:var(--teal-solido); --em-error:var(--coral-solido); --em-radio:var(--radio);
  /* El color del TEXTO que va encima de --em-marca. Nunca `#fff` a pelo: en la etapa
     de adultos la marca es mostaza y el blanco encima da 1,93:1. */
  --em-sobre-acento:var(--sobre-acento); --em-superficie:var(--cristal-alto);
  /* El color del texto que va encima de `--em-ok` y `--em-error`, que son OSCUROS. No sirve
     `--em-sobre-acento`: ese es tinta oscura porque está pensado para la mostaza, y encima del
     verde daba 2,94:1 y encima del rojo 3,48:1 —la casilla acertada de la sopa salía verde
     oscuro con letra oscura—. Lo destapó `tools/contraste.py` el 2026-08-16, después de que el
     usuario cazara a ojo el defecto hermano de los chips. Blanco sobre esos dos: 5,63 y 5,29. */
  --em-sobre-fuerte:#FFFFFF;
}
/* Primaria: aurora más viva, más redondo, más grande. */
[data-etapa="primaria"]{--acento:var(--coral-solido);--acento-2:var(--mostaza);--sobre-acento:#fff;
  --radio:22px;--radio-g:28px;--cuerpo:18px;--aurora:.62}
/* Secundaria: a medio camino. */
[data-etapa="secundaria"]{--acento:var(--teal-solido);--acento-2:var(--mostaza);--sobre-acento:#fff;
  --radio:18px;--radio-g:24px;--cuerpo:17px;--aurora:.5}
/* Adultos: la aurora se retira y manda el texto. */
[data-etapa="adultos"]{--acento:var(--mostaza);--acento-2:var(--teal);--sobre-acento:#1A1720;
  --radio:14px;--radio-g:18px;--cuerpo:16px;--aurora:.3}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);min-height:100vh;position:relative;
  font:var(--cuerpo)/1.6 var(--texto);overflow-x:hidden;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* La aurora. Vive detrás de todo, no se imprime y desaparece con reduced-motion
   en su versión animada (aquí es estática, así que solo se atenúa). */
/* **El `-6rem` de la derecha eran 96 px de scroll horizontal en TODAS las páginas.** Lo
   midió V12 el 2026-08-25 en cinco rutas distintas —incluida la portada— y a 375, 768 y
   1280 px de ancho: **96 en los tres**. En un móvil, la cuarta parte de la pantalla.

   `body` tiene `overflow-x:hidden`, pero en `body` ese valor **se propaga al viewport** y
   entonces el propio `body` se comporta como `visible`: no recorta su pseudo-elemento. El
   viewport impide arrastrar con el dedo, pero el documento sigue siendo 96 px más ancho y
   se puede desplazar por programa, que es lo que V12 midió.

   Se quita el sangrado en vez de recortarlo. Las dos maneras de recortar tienen precio:
   `html{overflow-x:hidden}` **rompería el `position:sticky` de `.jg-barra`** —la barra de
   los juegos—, y `overflow-x:clip` es más nuevo que el navegador más viejo que queremos
   servir. Sin sangrado no hay nada que recortar, y bajo `blur(38px)` con gradientes que se
   desvanecen al 68-72 % la diferencia no se ve. */
body::before{content:"";position:absolute;inset:-18rem 0 auto 0;height:46rem;
  pointer-events:none;z-index:0;opacity:var(--aurora);filter:blur(38px);
  background:
    radial-gradient(42% 52% at 16% 26%,var(--acento) 0,transparent 68%),
    radial-gradient(38% 46% at 80% 12%,var(--coral) 0,transparent 70%),
    radial-gradient(46% 56% at 52% 46%,var(--acento-2) 0,transparent 72%)}

.env{position:relative;z-index:1;max-width:64rem;margin:0 auto;padding:1.4rem var(--paso) 4.5rem}

a{color:inherit}
h1,h2,h3{letter-spacing:-.035em;line-height:1.04;font-weight:600}
h1{font-size:clamp(2.2rem,5.6vw,4.1rem);margin:3.4rem 0 .9rem;max-width:16ch;letter-spacing:-.045em}
h1 em{font-style:normal;font-weight:600;
  background:linear-gradient(100deg,var(--acento),var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);
  font-weight:600;margin:2.8rem 0 1rem}
h3{font-size:1.06rem;margin:0 0 .12rem;letter-spacing:-.025em}
.lede{font-size:1.08rem;font-weight:300;color:var(--tinta-suave);max-width:46ch;
  margin:0 0 2.6rem;line-height:1.62}

/* ---- cabecera flotante de cristal ---- */
.top{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding:.7rem 1.2rem;
  border-radius:99px;background:var(--cristal);border:1px solid var(--linea);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.top .marca{display:flex;align-items:center;text-decoration:none;margin-right:auto;
  min-height:var(--objetivo-toque)}
.top .marca img{height:24px;width:auto;display:block}
.top nav{display:flex;gap:.4rem .9rem;flex-wrap:wrap;align-items:center}
.top nav a{color:var(--tinta-suave);text-decoration:none;font-weight:500;font-size:.9rem;
  padding:.4rem .2rem;border-radius:99px}
.top nav a:last-child{background:var(--tinta);color:var(--fondo);font-weight:600;padding:.45rem 1.05rem}
.top nav a:hover{color:var(--tinta)}
.top nav a:last-child:hover{opacity:.86;color:var(--fondo)}
/* El activo se marca con el PESO, no con el color: cuando la barra se quedó con un solo
   enlace, ese enlace era a la vez `:last-child` —píldora oscura— y `[aria-current]` —tinta
   oscura—, las dos reglas con la misma especificidad. Resultado medido en producción:
   contraste 1.00:1, texto exactamente del color de su fondo. Invisible. */
.top nav a[aria-current]{font-weight:700}
.top nav a[aria-current]:not(:last-child){color:var(--tinta)}

.cambio-idioma{display:inline-flex;align-items:center;min-height:var(--objetivo-toque);
  padding:.35rem .75rem;border:1px solid var(--linea);border-radius:99px;color:var(--tinta);
  text-decoration:none;font-size:.86rem;font-weight:600;white-space:nowrap}
.cambio-idioma:hover,.cambio-idioma:focus-visible{background:var(--tinte,#F4F0E8);
  border-color:var(--acento)}
.cambio-idioma .cambio-corta{display:none}

/* ---- migas y avisos ---- */
.migas{font-size:.86rem;color:var(--tinta-suave);margin:2.2rem 0 0;font-weight:400}
.migas a{color:var(--tinta-suave);text-decoration:none;display:inline-flex;align-items:center;
  min-height:var(--objetivo-toque)}
.migas a:hover{color:var(--tinta);text-decoration:underline}
.retorno-materia{margin:.75rem 0 -.5rem}
.retorno-materia a{display:inline-flex;align-items:center;min-height:var(--objetivo-toque);
  padding:.55rem .9rem;border:1px solid var(--linea);border-radius:12px;background:var(--cristal-alto);
  color:var(--tinta);font-size:.9rem;font-weight:650;text-decoration:none}
.retorno-materia a::before{content:"←";margin-right:.45rem;color:var(--acento)}
.retorno-materia a:hover,.retorno-materia a:focus-visible{border-color:var(--acento);
  background:var(--tinte,#F4F0E8)}
.aviso{background:var(--cristal);border:1px solid var(--linea);border-left:3px solid var(--acento);
  padding:.95rem 1.1rem;margin:1.4rem 0 0;font-size:.92rem;font-weight:300;
  color:var(--tinta-suave);border-radius:var(--radio);max-width:56ch;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.aviso b{color:var(--tinta);font-weight:600}
.curricular{background:var(--cristal);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1rem 1.15rem;margin:1.4rem 0;color:var(--tinta-suave)}
.curricular>h2{margin-top:0;color:var(--tinta)}
.curricular>ol{display:grid;gap:.85rem;padding-left:1.4rem;margin-bottom:0}
.curricular>ol>li{padding-left:.25rem}
.curricular ul{margin:.55rem 0 0}

/* ---- rejillas y tarjetas ---- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.8rem;
  padding:0;margin:0;list-style:none}
.tarjeta{background:var(--cristal);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.15rem 1.1rem 1.25rem;display:block;text-decoration:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-3px);background:var(--cristal-alto);
  box-shadow:0 16px 32px -20px rgba(26,23,32,.55)}
.tarjeta .clave{display:inline-block;font-size:.73rem;font-weight:600;letter-spacing:.02em;
  background:var(--acento);color:var(--sobre-acento);padding:.16rem .55rem;border-radius:7px;
  margin-bottom:.75rem}
.tarjeta p{margin:.18rem 0 0;font-size:.87rem;font-weight:300;color:var(--tinta-suave)}
.tarjeta .peldano{display:inline-block;margin-top:.7rem;font-size:.73rem;font-weight:600;
  background:var(--acento);color:var(--sobre-acento);padding:.16rem .55rem;border-radius:7px}
/* El tramo es NUESTRO, no del marco europeo: se enseña en gris y en minúscula, para que
   no se lea como parte de la etiqueta oficial. */
h2 .tramo{font-size:.72em;font-weight:500;color:var(--tinta-suave);letter-spacing:0;
  text-transform:lowercase;margin-left:.35rem}
.nota{font-size:.83rem;color:var(--tinta-suave);margin:.2rem 0 1.6rem}

/* ---- color por asignatura ----
   Cada materia tiene el suyo dentro del mismo sistema, así que un reto de inglés y uno de
   matemáticas dejan de sentirse idénticos. Va en el `<html>`, manda sobre el color por etapa
   y lo heredan la cabecera, las chapas, las etapas del reto y las figuras. */
[data-materia="ingles"]{--acento:var(--teal-solido);--acento-2:var(--mostaza);
  --sobre-acento:#fff;--tinte:#E4EFEC}
[data-materia="matematicas"]{--acento:var(--coral-solido);--acento-2:var(--mostaza);
  --sobre-acento:#fff;--tinte:#FBE6DF}
[data-materia="lengua"]{--acento:var(--mostaza);--acento-2:var(--teal-solido);
  --sobre-acento:#1A1720;--tinte:#F7EEDD}

/* ---- la ficha del catálogo ----
   Cuatro datos y ninguno más: de qué va, de qué nivel, cuánto dura y cuántos ejercicios.
   Antes llevaba además un párrafo entero de «fallo típico»: con 63 tarjetas la página era un
   muro de letra pequeña donde todas pesaban igual y no se distinguía una de otra. */
.rejilla--dudas{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:.85rem}
.tarjeta--duda{position:relative;overflow:hidden;padding:1.25rem 1.15rem 1.05rem}
/* La banda de color es lo que da vida a la rejilla: se ve de reojo de qué asignatura es la
   tarjeta antes de leer una palabra, y engorda al pasar por encima. */
.tarjeta--duda::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--acento);transition:width .18s cubic-bezier(.2,.7,.3,1)}
.tarjeta--duda:hover::before,.tarjeta--duda:focus-visible::before{width:9px}
.tarjeta--duda h2,.tarjeta--duda h3{margin:0 0 .32rem;font-size:1.06rem;line-height:1.25;
  letter-spacing:-.02em;padding-right:1.4rem;text-transform:none;color:var(--tinta);
  font-weight:600}
.tarjeta--duda p{font-size:.87rem;line-height:1.45;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* --- GRAMÁTICA. Aquí se LEE, así que la medida es la línea de texto y no la rejilla: el
   cuerpo se limita a 68 caracteres, que es donde el ojo encuentra el renglón siguiente sin
   perderse. Es la única sección del sitio pensada para leerse seguida. */
.gr-idea{background:var(--tinte);border-left:5px solid var(--acento);border-radius:var(--radio);
  padding:1.1rem 1.25rem;margin:1.6rem 0 1.8rem;max-width:62ch}
.gr-idea .uso{margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave)}
.gr-idea p:last-child{margin:0;font-size:1.18rem;line-height:1.4;font-weight:500}
.gr-cuerpo{max-width:68ch}
.gr-cuerpo p{margin:0 0 .9rem;font-size:1rem;line-height:1.62;font-weight:300}
.gr-paradigma{max-width:68ch;margin:1.8rem 0}
.gr-paradigma h2{font-size:1.2rem;margin:0 0 .65rem}
.gr-paradigma .ta-tabla-wrap{border-radius:var(--radio);border:1px solid var(--linea)}
.gr-paradigma table{min-width:100%;width:max-content;max-width:none;border-collapse:collapse}
.gr-paradigma th,.gr-paradigma td{padding:.58rem .68rem;border:1px solid var(--linea);
  text-align:left;vertical-align:top;white-space:normal}
.gr-paradigma th{background:var(--tinte);font-weight:650}
.gr-paradigma-nota{margin:.55rem 0 0;color:var(--tinta-suave);font-size:.88rem;line-height:1.45}
.gr-lista{list-style:none;padding:0;margin:.4rem 0 0;max-width:68ch}
.gr-lista li{padding:.6rem 0;border-top:1px solid var(--linea);display:flex;
  flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.gr-lista li b{font-weight:600}
.gr-lista li span{font-size:.9rem;font-weight:300;color:var(--tinta-suave)}
.gr-preguntas{max-width:68ch;padding-left:1.2rem}
.gr-preguntas li{margin:0 0 1.4rem}
.gr-enun{margin:0 0 .5rem;font-size:1.02rem;font-weight:500}
.gr-zona{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.gr-op{font:inherit;font-size:.95rem;padding:.45rem .95rem;border-radius:999px;cursor:pointer;
  min-height:var(--objetivo-toque);
  border:1px solid var(--linea);background:var(--cristal);color:var(--tinta)}
.gr-op:hover{background:var(--cristal-alto)}
.gr-op-ok{border-color:#1E7A44;background:rgba(30,122,68,.14);font-weight:600}
.gr-op-no{border-color:#B0342C;background:rgba(176,52,44,.12);text-decoration:line-through}
.gr-inp{font:inherit;font-size:1rem;padding:.45rem .7rem;border-radius:var(--radio);
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);min-width:11rem}
.gr-hecho{opacity:.72}
.gr-aviso{margin:.5rem 0 0;font-size:.92rem;font-weight:300;min-height:1.2em}
.gr-aviso.gr-ok{color:#1E7A44}
.gr-aviso.gr-no{color:#B0342C}
/* Sin JavaScript se ve la respuesta; con él, el script vacía la lista y la repinta. */
.gr-sol{margin:.25rem 0 0;font-size:.9rem;font-weight:300;color:var(--tinta-suave)}
/* --- TEORÍA AMPLIADA. Artículo legible, práctica bajo la explicación y fuentes al final. */
.leccion-ampliada{max-width:72rem}
.ta-cabecera{max-width:68ch;margin-bottom:1.4rem}
.ta-cabecera h1{margin-bottom:.35rem}
.ta-objetivos,.ta-prerrequisitos{max-width:68ch;border:1px solid var(--linea);
  border-radius:var(--radio);padding:1rem 1.2rem;margin:1rem 0;background:var(--cristal)}
.ta-objetivos{border-left:5px solid var(--acento);background:var(--tinte)}
.ta-objetivos h2,.ta-prerrequisitos h2{font-size:1rem;margin:0 0 .5rem}
.ta-objetivos ul,.ta-prerrequisitos ul{margin:.2rem 0;padding-left:1.25rem}
.ta-bloque{max-width:68ch;margin:2rem 0}
.ta-bloque h2,.ta-practica h2,.ta-fuentes h2{font-size:1.35rem;margin:0 0 .75rem}
.ta-bloque p,.ta-bloque li{font-size:1rem;line-height:1.65;font-weight:300}
.ta-bloque ol,.ta-bloque ul{padding-left:1.35rem}
.ta-idea-clave{background:var(--tinte);border-left:5px solid var(--acento);
  border-radius:var(--radio);padding:1.15rem 1.3rem}
.ta-definicion dl{margin:0}.ta-definicion dt{font-weight:700}.ta-definicion dd{margin:.35rem 0 0}
.ta-ejemplo-guiado,.ta-procedimiento{border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);padding:1.2rem 0}
.ta-resultado{background:var(--tinte);border-radius:var(--radio);padding:.75rem 1rem}
.ta-error-frecuente{border-left:5px solid var(--mostaza);padding-left:1.1rem}
.ta-mal{color:#9D2C27}.ta-bien{color:#176D3B}
.ta-tabla-wrap{max-width:100%;overflow-x:auto}.ta-tabla-wrap:focus-visible{
  outline:3px solid var(--mostaza);outline-offset:3px}.ta-tabla{border-collapse:collapse}
.ta-tabla-wrap table{width:100%;border-collapse:collapse}
.ta-tabla-wrap th,.ta-tabla-wrap td{border:1px solid var(--linea);padding:.65rem;text-align:left}
.ta-visual{max-width:60rem;margin:2.2rem 0}
.ta-visual img{display:block;width:100%;height:auto;border-radius:var(--radio);background:#fff}
.ta-visual figcaption{max-width:68ch;margin:.55rem 0 0;color:var(--tinta-suave);
  font-size:.88rem;line-height:1.45}
.ta-practica{max-width:68ch;margin:2.5rem 0;padding:1.25rem;border-radius:var(--radio-g);
  background:var(--tinte);border:1px solid var(--linea)}
.ta-practica>ol{padding-left:1.35rem;margin-bottom:0}.ta-ejercicio{margin:0 0 1.5rem}
.ta-ejercicio:last-child{margin-bottom:0}.ta-enunciado{font-weight:600;line-height:1.5}
.ta-opciones{display:grid;gap:.4rem;padding-left:1.2rem}
.ta-solucion{margin-top:.75rem;border-top:1px solid var(--linea);padding-top:.65rem}
.ta-solucion summary{cursor:pointer;font-weight:600;min-height:var(--objetivo-toque);
  display:flex;align-items:center}.ta-solucion p{line-height:1.55}
.ta-apoyo-visual a,.ta-fuentes a{display:inline-flex;align-items:center;
  min-height:var(--objetivo-toque)}
.ta-fuentes{max-width:68ch;margin:2.5rem 0;color:var(--tinta-suave);font-size:.86rem}
.ta-fuentes ul{padding-left:1.2rem}.ta-fuentes li{margin:.45rem 0;line-height:1.5}
.ta-fuentes a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
/* --- LECTURAS. El texto en inglés es lo que se lee de verdad, así que va más grande y con
   más aire que la prosa del sitio, y en una medida corta. `.rd-mira` resalta el párrafo donde
   está la respuesta cuando se falla una pregunta: es lo que convierte el fallo en comprensión
   en vez de en un «no». */
.rd-texto{max-width:60ch;margin:1.6rem 0 2rem}
.rd-texto p{margin:0 0 1rem;font-size:1.08rem;line-height:1.72;font-weight:300;
  border-left:3px solid transparent;padding-left:.7rem;transition:background .25s,border-color .25s}
.rd-texto p.rd-mira{background:var(--tinte);border-left-color:var(--acento)}
.rd-glo ul{max-width:52ch}
.rd-preguntas{max-width:68ch;padding-left:1.2rem}
.rd-preguntas li{margin:0 0 1.4rem}
.rd-enun{margin:0 0 .5rem;font-size:1.02rem;font-weight:500}
.rd-zona{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.rd-op{font:inherit;font-size:.95rem;padding:.45rem .95rem;border-radius:999px;cursor:pointer;
  min-height:var(--objetivo-toque);
  border:1px solid var(--linea);background:var(--cristal);color:var(--tinta);text-align:left}
.rd-op:hover{background:var(--cristal-alto)}
.rd-op-ok{border-color:#1E7A44;background:rgba(30,122,68,.14);font-weight:600}
.rd-op-no{border-color:#B0342C;background:rgba(176,52,44,.12)}
.rd-inp{font:inherit;font-size:1rem;padding:.45rem .7rem;border-radius:var(--radio);
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);min-width:11rem}
.rd-aviso{margin:.5rem 0 0;font-size:.92rem;font-weight:300;min-height:1.2em}
.rd-aviso.rd-ok{color:#1E7A44}
.rd-aviso.rd-no{color:#B0342C}
.gr-materna{margin:2rem 0 0;padding:1.1rem 1.25rem;border-radius:var(--radio);
  background:var(--cristal);border:1px solid var(--linea);max-width:62ch}
.gr-materna h2{margin:0 0 .6rem}
.gr-mal,.gr-bien{margin:0 0 .3rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.gr-mal span,.gr-bien span{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);min-width:6.5rem}
.gr-mal b{text-decoration:line-through;text-decoration-color:#B0342C}
.gr-porque{margin:.7rem 0 0;font-size:.93rem;font-weight:300;color:var(--tinta-suave)}
.gr-salida{margin:2rem 0 0}
/* El botón de oír, en los ejercicios de escucha. Grande y con el texto al lado del icono:
   un triángulo suelto no dice a un niño de seis años que hay que pulsarlo. */
.ej-oir{font:inherit;font-size:1rem;font-weight:600;padding:.6rem 1.3rem;border-radius:999px;
  cursor:pointer;border:none;background:var(--tinta);color:var(--fondo);margin:0 0 .9rem}
.ej-oir::before{content:"▶ ";font-size:.85em}
.ej-oir:hover{opacity:.88}
.ej-oir[disabled]{opacity:.45;cursor:not-allowed}
/* Lo que se dijo, SOLO después de contestar: leerlo antes convierte un ejercicio de oído
   en uno de lectura. */
.ej-dicho{margin:.9rem 0 0;font-size:1.02rem;font-weight:500;font-style:italic}
.ej-aviso{margin:.5rem 0 0;font-size:.9rem;color:#B0342C}
/* --- EL BUSCADOR. Bilingüe: quien escribe «verbos irregulares» encuentra también
   «irregular verbs». No traduce nada en el navegador; busca sobre un índice donde el nombre
   inglés YA está escrito, unidad por unidad. */
.bu{margin:1.8rem 0 2.4rem;max-width:46rem}
.bu-campo{width:100%;font:inherit;font-size:1.05rem;padding:.85rem 1.1rem;
  border-radius:999px;border:1px solid var(--linea);background:var(--cristal);
  color:var(--tinta);box-sizing:border-box}
.bu-campo:focus{outline:2px solid var(--acento);outline-offset:2px;background:var(--fondo)}
.bu-ayuda{margin:.5rem 0 0 1.1rem;font-size:.83rem;font-weight:300;color:var(--tinta-suave)}
.bu-cuenta{margin:1rem 0 .4rem 1.1rem;font-size:.83rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.bu-lista{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.bu-lista li{border-bottom:1px solid var(--linea)}
.bu-lista a{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;
  padding:.7rem 1.1rem;text-decoration:none;color:var(--tinta)}
.bu-lista a:hover,.bu-lista a:focus-visible{background:var(--cristal-alto)}
.bu-lista b{font-weight:600;font-size:1rem}
.bu-meta{margin-left:auto;font-size:.8rem;font-weight:300;color:var(--tinta-suave)}
/* La tarjeta de una hoja descargable. Lleva el icono de PDF y no la flecha de «se abre»:
   lo que va a pasar al pulsar es una descarga, y conviene que se sepa antes. */
.tarjeta--pdf::before{background:#B0342C}
.tarjeta--pdf h3 span{font-weight:400;color:var(--tinta-suave)}
.tarjeta--pdf::after{content:"↓";color:#B0342C;opacity:1;transform:none}
.fi-para{max-width:62ch;margin:.2rem 0 1.2rem;font-size:.95rem;font-weight:300;
  color:var(--tinta-suave)}
.fi-para b{font-weight:600;color:var(--tinta)}
/* Sección anunciada y todavía sin material. Se muestra —esconderla haría que nadie volviera
   a mirar si ya está— pero se ve que no pesa lo mismo: banda gris y tinta más suave. Sigue
   siendo un enlace, y su página dice «aún no» en vez de dar un 404. */
.tarjeta--pronto::before{background:var(--tinta-suave);opacity:.35}
.tarjeta--pronto h3{color:var(--tinta-suave)}
.tarjeta--pronto::after{content:none}
/* La flecha dice que la tarjeta se abre, y no ocupa sitio hasta que hace falta. */
.tarjeta--duda::after{content:"→";position:absolute;right:1rem;top:1.1rem;font-size:1rem;
  color:var(--acento);opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s}
.tarjeta--duda:hover::after,.tarjeta--duda:focus-visible::after{opacity:1;transform:none}
.ch-fila{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.9rem}
.ch{font-size:.72rem;font-weight:600;color:var(--tinta-suave);
  background:rgba(26,23,32,.05);border-radius:99px;padding:.2rem .58rem;white-space:nowrap}
.ch--nivel{background:var(--tinte);color:var(--tinta)}
/* Los tres pasos del método: no son enlaces, así que no se levantan al pasar por encima. */
.pasos .tarjeta{transform:none}
.pasos .tarjeta h3{margin:0}
/* La asignatura es el paso que hay que dar en la portada: se ve como un botón, no como una
   tarjeta más de una rejilla.
   `li` estirado + tarjeta al 100 % de alto: sin esto, la que tiene el texto más largo sale
   más alta que la otra y la fila queda descuadrada. La chapa se ancla abajo con `auto`, así
   que las dos quedan a la misma altura aunque su descripción ocupe una línea más. */
.rejilla{align-items:stretch}
.rejilla > li{display:flex}
.rejilla > li > .tarjeta{flex:1;display:flex;flex-direction:column}
.tarjeta--grande{padding:1.6rem 1.5rem 1.7rem;border-color:var(--acento);
  border-width:2px;min-width:16rem}
.tarjeta--grande h3{font-size:1.6rem;letter-spacing:-.03em;margin:0}
.tarjeta--grande p{font-size:.95rem;margin-top:.35rem}
.tarjeta--grande .peldano{margin-top:auto;align-self:flex-start}

/* ---- selector de país ---- */
/* La ilustración de entrada. Ancho completo, esquinas suaves y una altura acotada para que
   en un móvil no ocupe la pantalla entera y empuje el selector fuera de la vista: lo que hay
   que ver al llegar es en qué idioma se entra, no el dibujo. */
.arte-portada{display:block;width:100%;max-width:52rem;margin:0 auto 1.6rem;
  height:auto;max-height:19rem;object-fit:cover;object-position:center 42%;
  border-radius:1.1rem}
@media (max-width:34rem){.arte-portada{max-height:11rem;margin-bottom:1.1rem}}

/* La ilustración de una materia. Más baja que la de la portada: aquí lo que importa es
   llegar a la lista de unidades, y el dibujo acompaña. */
.arte-materia{display:block;width:100%;height:auto;max-height:13rem;object-fit:cover;
  object-position:center 40%;border-radius:1rem;margin:.2rem 0 1.2rem}
@media (max-width:34rem){.arte-materia{max-height:8rem}}

.paises{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem;
  list-style:none;padding:0;margin:2.8rem 0 0;max-width:46rem}
.paises a{display:flex;align-items:center;gap:1rem;background:var(--cristal);
  border:1px solid var(--linea);border-radius:var(--radio-g);padding:1.25rem 1.3rem;
  text-decoration:none;font-size:1.22rem;font-weight:600;letter-spacing:-.03em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s}
.paises a:hover{transform:translateY(-3px);background:var(--cristal-alto);
  box-shadow:0 18px 36px -22px rgba(26,23,32,.6)}
.paises .bandera{font-size:1.8rem;line-height:1}
.selector-hero{display:grid;grid-template-columns:minmax(17rem,.82fr) minmax(20rem,1.18fr);
  gap:clamp(1.2rem,4vw,3rem);align-items:center;margin:2rem 0 0}
.selector-hero h1{margin:.35rem 0 .9rem}
.selector-hero .lede{margin-bottom:0}
.selector-kicker{margin:0;color:var(--tinta-suave);font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.selector-hero .arte-portada{margin:0;max-height:22rem}
.selector-hero + .paises{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:55rem){.selector-hero + .paises{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pasos{counter-reset:paso;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pasos>li{counter-increment:paso;border-top:2px solid var(--acento);padding-top:.85rem}
.pasos .tarjeta{padding:0;border:0;background:transparent;-webkit-backdrop-filter:none;
  backdrop-filter:none}
.pasos .tarjeta h3::before{content:"0" counter(paso) " · ";color:var(--acento)}
.pasos .tarjeta p{font-size:.94rem;line-height:1.5}

/* ---- navegación y recorridos M6 ---- */
.salto{position:fixed;z-index:30;left:1rem;top:.7rem;padding:.65rem 1rem;border-radius:10px;
  background:var(--tinta);color:var(--fondo);font-weight:700;text-decoration:none;
  transform:translateY(-180%)}
.salto:focus{transform:none}
.top{position:relative;z-index:20}
.nav-materias>summary{list-style:none;cursor:pointer;min-height:var(--objetivo-toque);
  display:flex;align-items:center;gap:.45rem;padding:.35rem .85rem;border-radius:11px;
  color:var(--tinta);font-weight:650}
.nav-materias>summary::-webkit-details-marker{display:none}
.nav-materias>summary::after{content:"⌄";font-size:.9em;transition:transform .18s}
.nav-materias[open]>summary::after{transform:rotate(180deg)}
.nav-panel{position:absolute;right:0;top:calc(100% + .55rem);width:min(38rem,calc(100vw - 2rem));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding:.6rem;
  border:1px solid var(--linea);border-radius:16px;background:var(--fondo);
  box-shadow:0 22px 50px -28px rgba(26,23,32,.65)}
.top nav .nav-panel a,.top nav .nav-panel a:last-child{display:flex;align-items:center;
  min-height:var(--objetivo-toque);padding:.65rem .8rem;border-radius:10px;background:transparent;
  color:var(--tinta);font-weight:550;text-decoration:none}
.top nav .nav-panel a:hover,.top nav .nav-panel a:focus-visible{background:var(--tinte,#F4F0E8);
  color:var(--tinta)}
.top nav .nav-panel a[aria-current="page"]{background:var(--tinte,#F4F0E8);
  box-shadow:inset 3px 0 0 var(--acento)}

.arte-tarjeta{display:block;width:calc(100% + 3rem);height:8.5rem;object-fit:cover;
  object-position:center 42%;margin:-1.6rem -1.5rem 1.15rem;border-radius:calc(var(--radio) - 2px)
  calc(var(--radio) - 2px) 0 0}
.portal-busqueda{display:grid;grid-template-columns:minmax(14rem,.85fr) minmax(18rem,1.15fr);
  gap:clamp(1rem,3vw,2.2rem);align-items:center;margin:1.2rem 0 3rem;padding:1rem 0 1.2rem;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.portal-busqueda>img{display:block;width:100%;height:15rem;object-fit:cover;object-position:center;
  border-radius:var(--radio-g)}
.portal-busqueda h2,.intencion-cabecera h2{margin:0 0 .45rem;font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.08;letter-spacing:-.035em;text-transform:none;color:var(--tinta);font-weight:650}
.portal-busqueda p,.intencion-cabecera p{margin:0;color:var(--tinta-suave);font-weight:350;
  max-width:48ch}
.portal-busqueda .bu{margin:1rem 0 0;max-width:none}
.bloque-intencion{margin:2.8rem 0 3.4rem}
.intencion-cabecera{display:grid;grid-template-columns:1fr minmax(12rem,20rem);gap:1.2rem;
  align-items:end;margin:0 0 1.1rem;padding-top:1.1rem;border-top:1px solid var(--linea)}
.intencion-cabecera>img{display:block;width:100%;height:8.5rem;object-fit:cover;
  object-position:center;border-radius:var(--radio)}
.bloque-intencion .rejilla{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ---- portada guiada: una decisión cada vez ---- */
.inicio-intro{max-width:58rem;margin:clamp(1.2rem,4vw,3rem) 0 1.4rem}
.inicio-intro h1{max-width:17ch;margin:.25rem 0 .75rem;font-size:clamp(2.15rem,6vw,4.6rem);
  line-height:.96;letter-spacing:-.055em;text-transform:none}
.inicio-intro .lede{max-width:54ch;margin:0;font-size:clamp(1rem,2vw,1.18rem)}
.inicio-intro .bu{max-width:46rem;margin:1.35rem 0 0}
.ruta-inicio{max-width:64rem;margin:1.2rem 0 3rem;padding:clamp(1rem,3vw,1.8rem);
  border:1px solid var(--linea);border-radius:var(--radio-g);background:var(--cristal)}
.ruta-inicio>h2{margin:0 0 .25rem;font-size:clamp(1.35rem,3vw,2rem);text-transform:none;
  letter-spacing:-.035em}
.ruta-inicio>.ruta-lede{margin:0 0 1.25rem;color:var(--tinta-suave);max-width:58ch}
.ruta-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  list-style:none;padding:0;margin:0;counter-reset:ruta}
.ruta-paso{counter-increment:ruta;min-width:0;padding:1rem;border-top:3px solid var(--linea);
  border-radius:0 0 14px 14px;background:rgba(255,255,255,.34)}
.ruta-paso[data-activo="true"]{border-color:var(--acento);background:var(--tinte)}
.ruta-paso>label,.ruta-paso>.ruta-etiqueta{display:block;margin:0 0 .55rem;font-weight:700}
.ruta-paso>label::before,.ruta-paso>.ruta-etiqueta::before{content:"0" counter(ruta) " · ";
  color:var(--acento)}
.ruta-paso select{width:100%;min-height:var(--objetivo-toque);padding:.55rem 2.2rem .55rem .7rem;
  border:1px solid var(--linea);border-radius:10px;background:var(--fondo);color:var(--tinta);
  font:inherit;font-weight:550}
.ruta-paso select:disabled{opacity:.58;cursor:not-allowed}
.ruta-nivel-adulto{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--linea)}
.ruta-nivel-adulto label{display:block;margin-bottom:.4rem;font-size:.86rem;font-weight:700}
.ruta-intenciones{display:flex;flex-wrap:wrap;gap:.45rem}
.ruta-intencion{min-height:var(--objetivo-toque);padding:.55rem .8rem;border:1px solid var(--linea);
  border-radius:999px;background:var(--fondo);color:var(--tinta);font:inherit;font-size:.92rem;
  font-weight:650;cursor:pointer}
.ruta-intencion:hover,.ruta-intencion:focus-visible,.ruta-intencion[aria-pressed="true"]{
  border-color:var(--acento);background:var(--acento);color:var(--sobre-acento)}
.ruta-resultados{margin:1.15rem 0 0;padding-top:1.1rem;border-top:1px solid var(--linea)}
.ruta-resultados h3{margin:0 0 .7rem;font-size:1rem}
.ruta-lista{display:grid;gap:.5rem;list-style:none;padding:0;margin:0;max-width:48rem}
.ruta-lista a{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:center;
  min-height:var(--objetivo-toque);padding:.78rem .9rem;border:1px solid var(--linea);
  border-radius:12px;background:var(--fondo);color:var(--tinta);text-decoration:none}
.ruta-lista a::after{content:"→";grid-column:2;grid-row:1 / span 2;color:var(--acento);
  font-weight:800}
.ruta-lista a:hover,.ruta-lista a:focus-visible{border-color:var(--acento);
  box-shadow:0 10px 28px -22px rgba(26,23,32,.65)}
.ruta-lista b{font-size:1rem}.ruta-lista small{color:var(--tinta-suave);font-size:.82rem}
.catalogo-sin-js{margin:1rem 0 0}
@media (max-width:48rem){
  .ruta-pasos{grid-template-columns:1fr}.ruta-paso{padding:.85rem}
  .inicio-intro h1{max-width:15ch}.ruta-inicio{padding:.9rem}
}

/* ---- Juega con Linda · portal infantil separado ---- */
.linda-portal{display:grid;grid-template-columns:minmax(11rem,18rem) minmax(18rem,1fr);
  gap:clamp(1.2rem,4vw,3rem);align-items:center;margin:1.1rem 0 2rem;
  padding:clamp(1rem,3vw,2rem);border:2px solid var(--acento);border-radius:28px;
  background:linear-gradient(135deg,var(--tinte),var(--cristal-alto));overflow:hidden}
.linda-portal>img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center;
  border-radius:24px;box-shadow:0 18px 35px -24px rgba(26,23,32,.65)}
.linda-portal h1{margin:.15rem 0 .65rem;font-size:clamp(2rem,6vw,4.1rem);line-height:.95;
  letter-spacing:-.055em;text-transform:none}
.linda-portal .lede{margin:0;max-width:48ch;font-size:clamp(1rem,2vw,1.22rem)}
.linda-kicker{margin:0 0 .45rem;color:var(--acento);font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.linda-cursos{max-width:34rem}.tarjeta--linda{border:2px solid var(--acento);
  background:linear-gradient(145deg,var(--tinte),var(--cristal-alto))}
.linda-tarjeta{display:block;width:5.4rem;height:5.4rem;object-fit:cover;object-position:center;
  border-radius:50%;margin:0 0 .85rem;border:3px solid var(--acento)}
.linda-instruccion{max-width:58ch;margin:-.5rem 0 1.5rem;padding:.8rem 1rem;
  border-radius:14px;background:var(--tinte);font-weight:600}
.linda-entrada{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:center;
  max-width:35rem;min-height:6rem;margin:1.2rem 0 2rem;padding:.75rem 1rem;
  border:2px solid var(--acento);border-radius:20px;background:var(--tinte);
  color:var(--tinta);text-decoration:none;transition:transform .18s,box-shadow .18s}
.linda-entrada:hover,.linda-entrada:focus-visible{transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(26,23,32,.6)}
.linda-entrada img{display:block;width:5.5rem;height:5.5rem;object-fit:cover;border-radius:16px}
.linda-entrada span{display:grid;gap:.2rem}.linda-entrada b{font-size:1.25rem}
.linda-entrada small{font-size:.9rem;color:var(--tinta-suave)}

/* Las pruebas dejan de depender de los botones nativos del navegador. */
.pn-progreso{display:flex;align-items:center;gap:.8rem;margin:1rem 0 1.5rem;max-width:42rem;
  color:var(--tinta-suave);font-size:.86rem;font-weight:650}
.pn-progreso::before{content:"";display:block;flex:1;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--acento) var(--avance,0%),rgba(26,23,32,.1) 0)}
.pn-items{max-width:48rem;padding-left:1.35rem}
.pn-items>li{margin:0 0 1.5rem}
.pn-enun{font-size:1.05rem;font-weight:550;margin:0 0 .65rem}
.pn-zona{display:flex;flex-wrap:wrap;gap:.55rem}
.pn-op{font:inherit;font-size:.96rem;font-weight:550;min-height:var(--objetivo-toque);
  padding:.65rem 1rem;border:1px solid var(--linea);border-radius:12px;background:var(--cristal-alto);
  color:var(--tinta);cursor:pointer;text-align:left}
.pn-op:hover,.pn-op:focus-visible{border-color:var(--acento);background:var(--tinte)}
.pn-op.es-elegida{border-color:var(--acento);box-shadow:inset 0 0 0 2px var(--acento)}
.pn-inp{font:inherit;min-height:var(--objetivo-toque);padding:.6rem .8rem;border:1px solid var(--linea);
  border-radius:10px;background:var(--cristal-alto);color:var(--tinta)}
.pn-pie{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.pn-resultado{font-weight:550}

@media (max-width:42rem){
  .top{flex-wrap:nowrap;padding:.5rem .65rem;gap:.5rem}
  .top .marca{min-width:0}.top .marca img{height:18px;max-width:100%}.top nav{margin-left:auto}
  .cambio-idioma{padding:.35rem .6rem}.cambio-idioma .cambio-larga{display:none}
  .cambio-idioma .cambio-corta{display:inline}
  .nav-materias>summary{padding:.35rem .6rem}
  .nav-panel{position:fixed;left:1rem;right:1rem;top:4.8rem;width:auto;grid-template-columns:1fr;
    max-height:calc(100vh - 6rem);overflow:auto}
  .portal-busqueda{grid-template-columns:1fr}.portal-busqueda>img{height:10rem}
  .intencion-cabecera{grid-template-columns:1fr}.intencion-cabecera>img{height:7.5rem}
  .arte-tarjeta{height:7rem}
  .selector-hero{grid-template-columns:1fr}.selector-hero .arte-portada{max-height:12rem}
  .selector-hero + .paises{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .linda-portal{grid-template-columns:1fr;padding:1rem;border-radius:22px}
  .linda-portal>img{width:min(13rem,68vw);margin:auto;border-radius:20px}
  .linda-portal h1{text-align:center}.linda-portal .lede,.linda-kicker{text-align:center}
  .linda-entrada{grid-template-columns:4.5rem 1fr}.linda-entrada img{width:4.5rem;height:4.5rem}
}

/* ---- franja del test ---- */
.franja{margin-top:3rem;border-radius:var(--radio-g);background:var(--tinta);color:var(--fondo);
  padding:1.7rem 1.6rem;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.franja b{font-size:1.35rem;font-weight:600;letter-spacing:-.03em}
.franja span{color:rgba(253,251,247,.62);font-weight:300}
.franja .ir{margin-left:auto;background:var(--acento);color:var(--sobre-acento);
  text-decoration:none;font-weight:600;padding:.8rem 1.5rem;border-radius:99px;white-space:nowrap}
.franja .ir:hover{filter:brightness(1.06)}

.pie{margin-top:4rem;border-top:1px solid var(--linea);padding-top:1.3rem;
  font-size:.85rem;font-weight:300;color:var(--tinta-suave);display:flex;gap:1.2rem;flex-wrap:wrap}
.pie a{color:var(--tinta-suave);text-decoration:none;display:inline-flex;align-items:center;
  min-height:var(--objetivo-toque)}
.pie a:hover{color:var(--tinta);text-decoration:underline}

:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:4px}

@media (prefers-color-scheme:dark){
  :root{--fondo:#131117;--tinta:#EFEBE4;--tinta-suave:#9A94A3;--linea:rgba(239,235,228,.11);
    --cristal:rgba(255,255,255,.045);--cristal-alto:rgba(255,255,255,.085);--aurora:.3}
  [data-etapa="primaria"]{--aurora:.42}
  [data-etapa="adultos"]{--aurora:.2}
  .tarjeta:hover,.paises a:hover{box-shadow:0 18px 36px -22px rgba(0,0,0,.9)}
  .franja{background:rgba(255,255,255,.07);color:var(--tinta);border:1px solid var(--linea)}
  .franja span{color:var(--tinta-suave)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  body::before{display:none}
  .top nav,.franja,.pie{display:none}
  .tarjeta,.aviso,.paises a{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- la regla arriba y el reto abajo: lo que distingue una hoja nuestra de un drill ---- */
.ficha-regla{border-left:5px solid var(--acento-solido,#1F6E68);background:var(--fondo-suave,#F4F0E8);
  border-radius:0 12px 12px 0;padding:.7rem 1rem;margin:.4rem 0 1.3rem}
.ficha-regla b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:.2rem}
.ficha-regla p{margin:0;font-weight:500}
.ficha-reto{border:2px dashed var(--linea);border-radius:14px;padding:.8rem 1rem;margin:1.4rem 0 .6rem}
.ficha-reto b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:.25rem}
.ficha-reto p{margin:0 0 .6rem;font-weight:500}
.raya-larga{display:block;width:100%;border-bottom:1px solid var(--linea);height:1.6em}
@media print{.ficha-regla,.ficha-reto{break-inside:avoid}}
/* ---- tipos visuales: se imprimen, y en primaria son los ÚNICOS que valen ---- */
.v-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:1.1rem 1.4rem;margin:.8rem 0 1.4rem}
.v-op{font-variant-numeric:tabular-nums;font-weight:600}
.v-fila{display:flex;justify-content:flex-end;align-items:center}
.v-signo{width:1.1em;text-align:center;font-weight:700}
.v-c{width:1.15em;height:1.5em;line-height:1.5em;text-align:center}
.v-llevadas{min-height:1.1em}
.v-llev{height:1.05em;line-height:1.05em;font-size:.72em;
  border-bottom:1px dotted var(--linea)}
.v-raya{border-top:2px solid var(--tinta);margin:.15em 0 .1em}
.v-hueco{border-bottom:1px solid var(--linea)}
.col-lista{list-style:decimal;padding-left:1.4rem;margin:.6rem 0 1.4rem}
.col-lista li{margin:.55rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.col-enunciado{font-weight:600;min-width:6.5em}
.col-globos{display:flex;gap:.55rem;flex-wrap:wrap}
.col-globo{border:2px solid var(--linea);border-radius:99px;padding:.22rem .85rem;
  font-weight:600;min-width:2.6em;text-align:center}
.uf{display:grid;grid-template-columns:1fr 3.5rem 1fr;align-items:start;gap:0;margin:.7rem 0 1.4rem}
.uf ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.uf-a li{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.uf-b li{display:flex;align-items:center;gap:.6rem}
.uf-p{font-weight:500}
.uf-pt{width:9px;height:9px;border-radius:99px;border:2px solid var(--tinta);flex:0 0 auto}
.uf-medio{border-left:1px dashed var(--linea);margin:0 auto;height:100%}
.ser-lista{list-style:decimal;padding-left:1.4rem;margin:.6rem 0 1.4rem}
.ser-lista li{margin:.5rem 0}
.ser{display:inline-flex;gap:.4rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.ser-c{min-width:2.4em;height:2.1em;line-height:2.1em;text-align:center;font-weight:600;
  border:1.5px solid var(--linea);border-radius:8px}
.ser-hueco{border-style:dashed;background:var(--fondo-suave,#F4F0E8)}
.rec-lista{list-style:decimal;padding-left:1.4rem;margin:.6rem 0 1.6rem}
.rec-lista li{margin:1.1rem 0;display:flex;align-items:flex-start;gap:.8rem}
.rec-pide{font-weight:700;border:2px solid var(--tinta);border-radius:8px;
  padding:.1rem .5rem;flex:0 0 auto}
.rec{display:flex;align-items:flex-start;flex:1;border-top:2px solid var(--tinta);
  padding-top:0;margin-top:.75em}
.rec-m{flex:1;position:relative;text-align:center}
.rec-m i{display:block;width:1px;height:6px;background:var(--tinta);margin:0 auto}
.rec-m.rec-alta i{height:11px}
.rec-m b{display:block;font-size:.72rem;font-weight:600;margin-top:.15rem}
.cl-banco{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1rem;padding:.7rem;
  border:1px dashed var(--linea);border-radius:12px}
.cl-t{border:1.5px solid var(--linea);border-radius:8px;padding:.2rem .7rem;font-weight:600}
.cl-cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;
  margin:0 0 1.4rem}
.cl-caja{border:2px solid var(--linea);border-radius:12px;padding:.6rem .7rem}
.cl-caja h4{margin:0 0 .4rem;font-size:.92rem}
.cl-hueco{min-height:5.5rem}
@media print{
  .v-op,.uf,.cl-caja,.rec-lista li{break-inside:avoid}
  .cl-hueco{min-height:4.5rem}
}

/* ---- la misión ---- */
.ej-opcion.es-correcta{background:#DCEFE0;border-color:#1F6E68;color:#14514c;font-weight:700}
.ej-opcion.es-fallada{background:#F8DAD8;border-color:#C93A32;color:#8f2b25}
.ej-caja.es-correcta{border-color:#1F6E68;background:#DCEFE0}
.ej-caja.es-fallada{border-color:#C93A32;background:#F8DAD8}
.ej-correcta{display:inline-block;margin-left:.6rem;padding:.3rem .8rem;border-radius:8px;
  background:#DCEFE0;border:2px solid #1F6E68;color:#14514c;font-weight:700}
.mi-tarjeta.es-correcta{background:#DCEFE0;border-color:#1F6E68;color:#14514c}
.mi-tarjeta.es-fallada{background:#F8DAD8;border-color:#C93A32;color:#8f2b25}
.ej-select.es-correcta{border-color:#1F6E68;background:#DCEFE0}
.ej-select.es-fallada{border-color:#C93A32;background:#F8DAD8}
.mi-titulo-otras{font-size:1.05rem;margin:1.6rem 0 .6rem}
.mi-otras{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mi-otra{display:block;border:1.5px solid var(--linea);border-radius:12px;padding:.6rem .8rem;
  text-decoration:none;color:inherit}
.mi-otra:hover{border-color:var(--acento)}
.mi-otra b{display:block;font-size:.95rem}
.mi-otra span{font-size:.8rem;color:var(--tinta-suave)}
.mi{min-height:18rem}
.mi-pasos{display:flex;gap:.5rem;margin:0 0 1rem}
.mi-paso{width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;border-radius:99px;
  border:2px solid var(--linea);font-size:.8rem;font-weight:700;color:var(--tinta-suave)}
.mi-paso.es-ahora{background:var(--acento-solido,#1F6E68);border-color:transparent;color:#fff}
.mi-regla{border-left:5px solid var(--acento-solido,#1F6E68);background:var(--fondo-suave,#F4F0E8);
  border-radius:0 14px 14px 0;padding:.8rem 1.1rem;margin:1.4rem 0}
.mi-regla summary{font-weight:700;cursor:pointer}
.mi-corta{margin:.6rem 0 .4rem;font-weight:500}
.mi-error,.mi-tuidioma{margin:.3rem 0;font-size:.94rem;color:var(--tinta-suave)}
.mi-error b,.mi-tuidioma b{color:var(--tinta)}
.mi-marcador{font-size:2rem;font-weight:800;margin:.4rem 0 .8rem}
.mi-banco{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1rem;padding:.7rem;
  border:1px dashed var(--linea);border-radius:12px;min-height:3rem}
.mi-tarjeta{border:1.5px solid var(--linea);border-radius:8px;padding:.25rem .7rem;
  font-weight:600;cursor:pointer;background:var(--superficie,#fff)}
.mi-tarjeta:hover{border-color:var(--acento)}
.mi-tarjeta.es-elegida{background:var(--acento-solido,#1F6E68);color:var(--em-sobre-acento,#fff);
  border-color:transparent}
.mi-cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}
.mi-caja{border:2px solid var(--linea);border-radius:12px;padding:.55rem .65rem;cursor:pointer}
.mi-caja:hover{border-color:var(--acento)}
.mi-caja h4{margin:0 0 .35rem;font-size:.9rem}
.mi-hueco{min-height:3.4rem;display:flex;flex-wrap:wrap;gap:.35rem;align-content:flex-start}
.mi-salidas{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:1rem 0}
.mi-salida{display:block;border:2px solid var(--linea);border-radius:14px;padding:.9rem 1rem;
  text-decoration:none;color:inherit}
.mi-salida:hover{border-color:var(--acento)}
.mi-salida b{display:block;font-size:1rem;margin-bottom:.15rem}
.mi-salida span{font-size:.86rem;color:var(--tinta-suave)}
.ej-caja{width:100%;max-width:26rem;padding:.6rem .8rem;font:inherit;border:2px solid var(--linea);
  border-radius:10px}
.ej-caja:focus{outline:none;border-color:var(--acento)}

/* ---- los tipos de matemáticas ---- */
/* Una fila por pregunta: el enunciado a la izquierda y lo que hay que hacer a la derecha.
   En móvil se apilan, porque una cuenta y cuatro opciones no caben en 360 px. */
.mi-fila{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.55rem 0;border-bottom:1px solid var(--linea)}
.mi-fila:last-child{border-bottom:none}
.mi-fila-t,.mi-cuenta{font-size:1.15rem;font-weight:600;min-width:7.5rem}
.ej-pista{margin:0 0 .35rem;font-size:.95rem;opacity:.8}
.mi-ejemplo{margin-left:.5rem;font-size:.95rem;opacity:.75;font-style:italic}
.mi-fila-t.es-lectura{flex-basis:100%;min-width:0;font-weight:400;font-size:1rem;line-height:1.55}
/* Las cuentas van en cifras tabulares y monoespaciadas: en una columna de resultados, las
   cifras de distinto ancho hacen que 111 parezca más corto que 888. */
.mi-cuenta{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mi-colores{display:flex;flex-wrap:wrap;gap:.45rem}
.mi-color{border:2px solid var(--linea);border-radius:10px;padding:.4rem .95rem;
  font:inherit;font-size:1.05rem;font-weight:600;background:var(--cristal);cursor:pointer;
  min-width:3.4rem;transition:border-color .15s,background .15s}
.mi-color:hover{border-color:var(--acento)}
.mi-color.es-elegida{background:var(--acento-solido,#1F6E68);color:var(--em-sobre-acento,#fff);
  border-color:var(--acento-solido,#1F6E68)}
.mi-color.es-correcta{background:#DCEFE0;border-color:#1F6E68;color:#14514c}
.mi-color.es-fallada{background:#F6DDDC;border-color:#A03530;color:#7d2723}
/* El rótulo de cada casilla cuando la fila pide varias: sin él son tres cajas iguales y
   ninguna dice cuál es el total. Va más pequeño que el enunciado de la fila, que manda. */
.mi-casilla-t{font-size:1rem;font-weight:600;opacity:.8}
.mi-caja-num{width:6.5rem;max-width:6.5rem;text-align:center;
  font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:600}
.mi-serie{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem 0}
.mi-termino{display:inline-block;min-width:3rem;padding:.4rem .6rem;text-align:center;
  border:1.5px solid var(--linea);border-radius:9px;background:var(--cristal);
  font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---- las etapas, con nombre ---- */
.mi-pasos{display:flex;gap:.35rem;list-style:none;padding:0;margin:0 0 .9rem;flex-wrap:wrap}
/* `flex:1 1 0` y no `1 1 5.5rem`: con una base en rem, «COMPRUEBA» sale más ancha que
   «PRUEBA» y las cuatro etapas quedan desiguales. Y el centrado va con flex, no con
   `text-align`, que dejaba el rótulo pegado a la derecha dentro de su caja. */
.mi-pasos .mi-paso{flex:1 1 0;min-width:5.2rem;display:flex;align-items:center;
  justify-content:center;text-align:center;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tinta-suave);
  padding:.5rem .35rem;border-radius:9px;background:rgba(255,255,255,.55);
  border:1px solid var(--linea)}
.mi-pasos .es-ahora{background:var(--acento);border-color:var(--acento);
  color:var(--sobre-acento)}
.mi-pasos .es-hecha{background:#DCEFE0;border-color:#1F6E68;color:#14514c}

/* ---- progreso honesto: piezas de TODO el reto y tiempo calculado ---- */
.mi-prog{display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;font-size:.83rem;
  color:var(--tinta-suave);flex-wrap:wrap}
.mi-prog .mi-barra{flex:1 1 8rem;height:7px;border-radius:99px;
  background:rgba(26,23,32,.08);overflow:hidden}
.mi-prog .mi-barra i{display:block;height:100%;background:var(--acento);border-radius:99px;
  transition:width .35s cubic-bezier(.2,.7,.3,1)}
.mi-cuenta{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- la figura: es el ejercicio, no un adorno ---- */
.mi-fila.es-con-figura{flex-direction:column;align-items:center;gap:.9rem;
  padding:1.1rem 0 1.3rem}
/* **El SVG se estiraba a 970 px de ancho** en un `esquema`, y la página pasaba a
   1885 px de alto: el niño tenía que hacer scroll para ver a la vez el enunciado y
   la caja de respuesta. Lo midió V9 en el DOM el 2026-08-25, en cuanto la figura
   empezó a montarse de verdad. En `colorear` no se notaba porque la caja va dentro
   de `.mi-fila.es-con-figura`, que sí acota; fuera de una fila no había nada que la
   limitara. El tope es el mismo 270 px que ya mide allí. */
.mi-figbox{display:flex;flex-direction:column;align-items:center}
/* Dos dibujos en la misma fila —las dos tiras que hay que comparar— van uno al lado del
   otro, que es lo que permite compararlos de un vistazo. Apilados serían dos ejercicios. */
.mi-fila.es-varias-figuras{flex-wrap:wrap}
.mi-fila.es-varias-figuras .mi-figbox{flex:1 1 12rem;min-width:8rem}
.mi-figbox svg{max-width:min(270px,100%);height:auto}
.fi{width:150px;height:auto;overflow:visible}
.fi--tira{width:210px}
.fi .fi-tr{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:2.2;
  transition:fill .16s}
.fi .fi-tr.es-lleno{fill:var(--acento)}
.fi.es-pintable .fi-tr{cursor:pointer}
.fi.es-pintable .fi-tr:hover{fill:var(--cristal-alto,#eee)}
.fi.es-pintable .fi-tr.es-lleno:hover{fill:var(--acento)}

/* ---- las figuras de 5.º de Primaria ----
   Heredan el color de la materia igual que las fracciones, así que al cambiar el estilo
   cambian solas. Los anchos son los que hacen que un cuadrado de cien casillas se siga
   viendo en un móvil de 360 px, que es donde se abre la mayoría. */
.fi--cuadricula{width:190px}
.fi--escalera{width:250px}
.fi--rectangulo-acotado,.fi--triangulo{width:200px}
.fi--bolsa{width:130px}
.fi .fi-c{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:1.1}
.fi .fi-c.es-lleno{fill:var(--acento)}
.fi .fi-pel{fill:var(--acento);stroke:var(--acento-solido,#1F6E68);stroke-width:1.4}
.fi .fi-rot{font-size:12px;fill:var(--tinta,#1b1b1b);font-weight:600}
.fi .fi-rot--baja,.fi .fi-rot--sube{font-weight:500;font-size:11px}
.fi .fi-caja{fill:none;stroke:var(--acento-solido,#1F6E68);stroke-width:1.2;
  stroke-dasharray:5 4;opacity:.65}
.fi .fi-tri{fill:var(--acento);stroke:var(--acento-solido,#1F6E68);stroke-width:2}
.fi .fi-alt{stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-saco{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:2;opacity:.9}
.fi .fi-bola{stroke:var(--acento-solido,#1F6E68);stroke-width:1.4}
.fi .fi-bola.es-roja{fill:#d94a3d}
.fi .fi-bola.es-azul{fill:#3d6fd9}
/* Las ocho figuras de la ESO y el Bachillerato. Sin estas reglas los SVG salen manchas
   negras: el relleno por defecto de un `polygon` es negro y el trazo de una `line`, ninguno. */
.fi--plano{width:270px}
.fi--poligono,.fi--cuerpo,.fi--circulo-marcado{width:210px}
.fi--espacio{width:210px}
.fi--arbol{width:280px}
.fi--tabla{width:250px}
.fi--balanza{width:210px}
.fi--globo{width:220px}
.fi .fi-rejilla{stroke:var(--linea,#d8d8d8);stroke-width:.8;opacity:.7}
.fi .fi-eje{stroke:var(--tinta,#1b1b1b);stroke-width:1.6;fill:none}
.fi .fi-eje-n{font-size:12px;fill:var(--tinta,#1b1b1b);font-style:italic}
.fi .fi-num{font-size:10.5px;fill:var(--tinta,#1b1b1b)}
.fi .fi-curva{fill:none;stroke:var(--acento-solido,#1F6E68);stroke-width:2.2;
  stroke-linejoin:round;stroke-linecap:round}
.fi .fi-asintota{stroke:#b4483a;stroke-width:1.4;fill:none}
.fi .fi-region{fill:var(--acento,#7fc9c2);opacity:.42;stroke:none}
.fi .fi-poligono{fill:var(--acento,#7fc9c2);opacity:.6;
  stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-vector{stroke:var(--acento-solido,#1F6E68);stroke-width:2.2}
.fi .fi-punta{fill:var(--acento-solido,#1F6E68)}
.fi .fi-punto{fill:var(--acento-solido,#1F6E68);stroke:#fff;stroke-width:1.2}
.fi .fi-poli{fill:var(--acento,#7fc9c2);stroke:var(--acento-solido,#1F6E68);stroke-width:2}
.fi .fi-cuadrado-lado{fill:none;stroke:var(--acento-solido,#1F6E68);stroke-width:1.2;
  opacity:.75}
.fi .fi-diagonal,.fi .fi-recto,.fi .fi-arco{fill:none;
  stroke:var(--acento-solido,#1F6E68);stroke-width:1.4}
.fi .fi-cara{fill:var(--acento,#7fc9c2);fill-opacity:.35;
  stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-arista{stroke:var(--acento-solido,#1F6E68);stroke-width:1.6;fill:none}
.fi .fi-oculta{stroke:var(--acento-solido,#1F6E68);stroke-width:1.1;fill:none;opacity:.65}
.fi .fi-cubito{stroke:var(--acento-solido,#1F6E68);stroke-width:.7;opacity:.55;fill:none}
.fi .fi-paralelogramo{fill:var(--acento,#7fc9c2);fill-opacity:.3;
  stroke:var(--acento-solido,#1F6E68);stroke-width:1.1;stroke-dasharray:4 3}
.fi .fi-sector{fill:var(--acento,#7fc9c2);stroke:#fff;stroke-width:2}
.fi .fi-sector:nth-of-type(2n){fill:var(--acento-solido,#1F6E68);fill-opacity:.7}
.fi .fi-sector:nth-of-type(3n){fill:var(--acento,#7fc9c2);fill-opacity:.45}
.fi .fi-cuadrante{stroke:var(--tinta,#1b1b1b);stroke-width:1.3}
.fi .fi-marca{stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-rama{stroke:var(--acento-solido,#1F6E68);stroke-width:1.5;fill:none}
.fi .fi-hueco{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:1.3}
.fi .fi-celda{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:1.1}
.fi .fi-flecha{fill:none;stroke:var(--acento-solido,#1F6E68);stroke-width:1.5}
.fi .fi-plato{fill:var(--acento,#7fc9c2);stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-pesa{fill:#fff;stroke:var(--acento-solido,#1F6E68);stroke-width:1.6}
.fi .fi-meridiano,.fi .fi-paralelo{fill:none;stroke:var(--acento-solido,#1F6E68);
  stroke-width:.9;opacity:.55}
.fi .fi-meridiano.es-cero,.fi .fi-paralelo.es-cero{stroke-width:1.8;opacity:1}
.fi--cortadas{width:250px}
.fi .fi-paralela{stroke:var(--acento-solido,#1F6E68);stroke-width:2}
.fi .fi-secante{stroke:var(--tinta,#1b1b1b);stroke-width:1.8}
/* Los ejes del espacio en perspectiva: más anchos que una figura normal, porque la
   proyección se lleva sitio hacia el fondo. */
.fi--espacio{width:250px}

/* ---- resumen final ---- */
.mi-fin-t{font-size:1.35rem;letter-spacing:-.03em;margin:.6rem 0 .2rem}
.mi-fin-s{font-size:1rem;margin:1.3rem 0 .5rem}
.mi-marcador{display:flex;gap:.7rem;margin:1rem 0 .4rem;flex-wrap:wrap}
.mi-dato{flex:1 1 6.5rem;background:var(--cristal);border:1px solid var(--linea);
  border-radius:12px;padding:.75rem .9rem}
.mi-dato span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta-suave);font-weight:700}
.mi-dato b{font-size:1.7rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mi-fallos{list-style:none;padding:0;margin:0 0 1rem}
.mi-fallos li{background:#F6DDDC;border-left:4px solid #A03530;border-radius:9px;
  padding:.7rem .9rem;margin-bottom:.5rem;font-size:.92rem}
.mi-fallos b{display:block;margin-bottom:.15rem}
@media (max-width:30rem){.fi{width:118px}.fi--tira{width:168px}}

/* ---- gráfico de barras ---- */
/* Con divs y no con una imagen: así lo lee un lector de pantalla, se adapta al ancho y no
   hay que generar un PNG por cada pregunta. */
.mi-grafico{margin:.4rem 0 1rem;padding:.9rem 1rem;border:1px solid var(--linea);
  border-radius:12px;background:var(--cristal)}
.mi-grafico h4{margin:0 0 .7rem;font-size:.95rem}
.mi-barra{display:flex;align-items:center;gap:.6rem;margin:.3rem 0}
.mi-barra-n{min-width:6rem;font-size:.88rem;color:var(--tinta-suave)}
/* La caja que ocupa el resto de la fila. Es lo que hace que el `width:%` de la tira se calcule
   sobre la ZONA DE BARRAS y no sobre la fila entera: sin ella la barra se pasaba justo el ancho
   del rótulo —medido en el navegador, 561 px donde tocaban 465— y acababa en la marca de al
   lado. Su izquierda coincide con el `margin-left` del eje: 6rem del rótulo + .6rem de hueco. */
.mi-barra-caja{flex:1 1 auto;min-width:0;display:block}
/* `border-box` para que el `width:%` incluya el relleno. Sin él la barra se pasaba **16 px
   constantes** —los .5rem de cada lado—, medido en el navegador: la del 6 acababa en 624 y su
   marca estaba en 608. Un desvío fijo es más traicionero que uno proporcional: parece un
   detalle de dibujo y desplaza TODAS las barras la misma distancia, así que el gráfico sigue
   pareciendo coherente consigo mismo mientras miente contra el eje. */
.mi-barra-v{display:inline-block;box-sizing:border-box;min-width:1.8rem;padding:.15rem .5rem;border-radius:6px;
  background:var(--acento-solido,#1F6E68);color:var(--em-sobre-acento,#fff);
  font-size:.85rem;font-weight:700;text-align:right}
/* El EJE, que hasta el 2026-08-25 no existía: `grafico.escala` se declaraba en 93 items y no
   se leía en ninguna parte, así que la unidad de 2.º de primaria que enseña «si la escala va de
   dos en dos y la barra llega a la tercera raya, no son 3: son 6» se publicaba SIN rayas y con
   el número escrito dentro de la barra. Las marcas se colocan en porcentaje sobre el mismo
   ancho que las tiras, para que caigan donde caen las barras. */
.mi-grafico-eje{position:relative;height:1.1rem;margin:0 0 .35rem 6.6rem;
  border-bottom:1px solid var(--linea)}
.mi-eje-marca{position:absolute;top:0;transform:translateX(-50%);font-size:.72rem;
  color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.mi-eje-marca::after{content:"";position:absolute;left:50%;bottom:-4px;width:1px;height:4px;
  background:var(--linea)}
/* La barra sin valor es deliberada —«falta la barra, dedúcela del total»— y escribía «null». */
.mi-barra-v.es-incognita{background:transparent;color:var(--tinta-suave);
  border:1.5px dashed var(--linea);font-weight:700}
/* `grafico.nota` lleva el dato que la pregunta necesita —«Votaron 20 niños en total»— y
   tampoco se pintaba: sin ella el item de la barra incógnita era indecidible. */
.mi-grafico-nota{margin:.6rem 0 0;font-size:.85rem;color:var(--tinta-suave)}

.mi-figura{margin:.4rem 0 .9rem;padding:.7rem .9rem;border:1.5px dashed var(--linea);
  border-radius:10px;font-weight:600}

/* ---- recta numérica y ordenar ---- */
.mi-recta{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem;margin:.5rem 0 1.1rem}
.mi-marca{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.mi-tramo{flex:1 1 1.2rem;min-width:1.2rem;height:2px;background:var(--linea)}
.mi-tramo.es-medido{height:8px;border-radius:4px;background:var(--acento-solido,#1F6E68)}
.mi-grupo{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 1rem}
.mi-criterio{margin:0;font-size:.92rem;opacity:.85}
.mi-orden{display:flex;flex-wrap:wrap;gap:.4rem;min-height:2.6rem;padding:.45rem;
  border:2px dashed var(--linea);border-radius:10px}
.mi-orden.es-correcta{border-style:solid;border-color:#1F6E68;background:#DCEFE0}
.mi-orden.es-fallada{border-style:solid;border-color:#A03530;background:#F6DDDC}

/* ---- problema de ciencias ---- */
/* Los datos, sueltos del enunciado y en una caja: un problema de física se resuelve
   mirando qué se tiene y qué se pide, y buscarlo dentro del párrafo cada vez es parte de
   lo que hace que estos ejercicios se abandonen. */
.mi-datos{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin:.3rem 0 1rem;
  padding:.7rem .9rem;border:1px solid var(--linea);border-radius:12px;
  background:var(--cristal)}
.mi-dato{display:flex;align-items:baseline;gap:.4rem}
.mi-dato-n{font-size:.85rem;color:var(--tinta-suave)}
.mi-dato-v{font-size:1.05rem;font-variant-numeric:tabular-nums}
.mi-unidad{font-size:1.05rem;font-weight:600;color:var(--tinta-suave)}
/* Los pasos salen solo al fallar, y por eso van numerados y con aire: es la única parte
   de la pantalla que el alumno va a leer despacio. */
.mi-pasos-cuenta{margin:.8rem 0 0;padding:.6rem .9rem .6rem 2.2rem;border-radius:10px;
  background:var(--cristal);border:1px solid var(--linea);font-size:.95rem}
.mi-pasos-cuenta li{margin:.25rem 0;font-variant-numeric:tabular-nums}
@media (max-width:30rem){
  .mi-fila{align-items:flex-start;flex-direction:column;gap:.5rem}
  .mi-fila-t,.mi-cuenta{min-width:0}
}
@media print{.mi,.mi-salidas{display:none}}

/* ---- membrete: TODO lo que se imprime lleva el logo de la web ---- */
.membrete{display:flex;align-items:center;gap:1rem;padding:0 0 .8rem;margin:0 0 1.2rem;
  border-bottom:2px solid var(--linea)}
.membrete-logo{height:34px;width:auto;flex:0 0 auto}
.membrete-url{margin-left:auto;font-size:.8rem;letter-spacing:.1em;font-weight:600;
  color:var(--tinta-suave)}
.ficha-banco{margin:.3rem 0 .6rem;padding:.5rem .8rem;border:1px dashed var(--linea);
  border-radius:10px;font-size:.9rem;color:var(--tinta-suave)}
.hoja-pie{margin:2rem 0 0;padding-top:.7rem;border-top:1px solid var(--linea);
  font-size:.78rem;letter-spacing:.06em;color:var(--tinta-suave);text-align:center}
@media print{
  .membrete{break-after:avoid}
  .membrete-logo{height:30px}
  .imprimir{display:none}
}
/* ---- pasatiempos ---- */
.pz-rejilla{display:grid;grid-template-columns:repeat(var(--columnas),1fr);gap:2px;
  max-width:min(560px,100%);margin:1.4rem 0;background:var(--linea);padding:2px;
  border-radius:8px}
.pz-celda{position:relative;aspect-ratio:1;background:var(--superficie,#fff);display:flex;
  align-items:center;justify-content:center;font-weight:600;font-size:clamp(.7rem,2.4vw,1.05rem);
  border-radius:2px;user-select:none}
.pz-celda input{width:100%;height:100%;border:0;background:transparent;text-align:center;
  font:inherit;font-weight:700;color:var(--acento-solido,#1F6E68);text-transform:uppercase;
  padding:0;border-radius:2px}
.pz-celda input:focus{outline:2px solid var(--acento);outline-offset:-2px}
.pz-negra{background:var(--tinta);border-radius:2px}
.pz-dada{background:var(--fondo-suave,#F4F0E8)}
.pz-bien{background:#DCEFE0}
.pz-mal{background:#F8DAD8}
.pz-hallada{background:#FCE9C3}
.pz-elegida{outline:2px solid var(--acento);outline-offset:-2px}
.pz-fallo{animation:pzsacude .4s}
@keyframes pzsacude{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pz-num{position:absolute;top:1px;left:2px;font-size:.52em;font-weight:700;
  color:var(--tinta-suave);line-height:1}
.pz-sudoku .pz-celda:nth-child(3n of :not(:nth-child(9n))){margin-right:0}
.pz-botones{display:flex;gap:.6rem;flex-wrap:wrap;margin:.3rem 0 1rem}
.pz-btn{border:1px solid var(--linea);background:var(--superficie,#fff);color:var(--tinta);
  border-radius:99px;padding:.5rem 1.1rem;font:inherit;font-weight:600;cursor:pointer}
.pz-btn:hover{border-color:var(--acento)}
.pz-btn-ok{background:var(--acento-solido,#1F6E68);border-color:transparent;color:#fff}
.pz-aviso{font-weight:600;min-height:1.4em;margin:.2rem 0 1rem}
.pz-aviso.pz-completo,.pz-marcador.pz-completo{color:#1F6E68}
.pz-aviso.pz-error{color:#C93A32}
.pz-marcador{font-weight:700;letter-spacing:.08em;margin:.2rem 0}
.pz-palabras{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.6rem 0 1.4rem}
.pz-palabras li{font-weight:600}
.pz-tachada{text-decoration:line-through;opacity:.5}
.pz-definiciones{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pz-definiciones ol{padding-left:1.2rem}
.pz-definiciones li{margin:.3rem 0}
/* ---- solucionario de las fichas ---- */
.solucionario{margin:1.6rem 0;border:1px dashed var(--linea);border-radius:14px;padding:.9rem 1.2rem}
.solucionario summary{font-weight:700;cursor:pointer}
.solucionario .clave{margin-top:.8rem}
.solucionario h3{font-size:.95rem;margin:1rem 0 .3rem}
.solucionario ol{padding-left:1.3rem;margin:0}
.solucionario li{margin:.15rem 0}
@media print{.solucionario{break-before:page;border-style:solid}
  .solucionario[open] summary{list-style:none}}
/* ---- ejercicios ---- */
.ej-barra{height:5px;border-radius:99px;background:var(--linea);overflow:hidden;margin:0 0 1.3rem}
.ej-barra i{display:block;height:100%;background:var(--acento);transition:width .3s}
.ej-progreso{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);font-weight:600;margin:0 0 .5rem}
.ej-enunciado{font-size:1.12rem;font-weight:500;margin:0 0 1.3rem;max-width:48ch}
/* El texto que hay que leer. Va en `blockquote` y no en `p` porque es una cita del material,
   no una instruccion, y asi lo anuncia tambien un lector de pantalla. */
.ej-lectura{margin:0 0 1.3rem;padding:.7rem .95rem;border-left:4px solid var(--acento);
  background:var(--tinte);border-radius:0 .5rem .5rem 0;max-width:48ch;line-height:1.55}
.ej-zona{margin-bottom:1.4rem}
.ej-frase{font-size:1.3rem;font-weight:400;line-height:1.5;margin:0 0 1rem;max-width:40ch}
.ej-caja{font:inherit;font-size:1.1rem;padding:.75rem 1rem;border-radius:var(--radio);
  border:1px solid var(--linea);background:var(--cristal-alto);color:var(--tinta);
  width:min(100%,22rem)}
.ej-opcion,.ej-pieza{font:inherit;font-weight:500;background:var(--cristal);color:var(--tinta);
  border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem 1.1rem;
  margin:0 .5rem .5rem 0;cursor:pointer;min-height:44px}
.ej-opcion{display:block;width:min(100%,32rem);text-align:left}
.ej-opcion.es-elegida{border-color:var(--acento);background:var(--cristal-alto);
  box-shadow:inset 0 0 0 2px var(--acento)}
.ej-pieza{display:inline-block}
.ej-pieza:disabled{opacity:.35}
.ej-frase-montada{min-height:2.2rem;font-size:1.2rem;border-bottom:2px dashed var(--linea);
  padding-bottom:.5rem;margin:0 0 1rem}
.ej-par{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem;flex-wrap:wrap}
.ej-par-a{min-width:9rem;font-weight:500}
.ej-select{font:inherit;padding:.55rem .7rem;border-radius:var(--radio);
  border:1px solid var(--linea);background:var(--cristal-alto);color:var(--tinta);min-height:44px}
.ej-pie{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
/* `inline-flex` y no `inline`: `.ej-btn` se usa también sobre un `<a>`, y el `padding`
   vertical de un elemento en línea NO empuja a lo de al lado. Medido el 2026-08-21 en
   `/es/lengua/`: la caja del botón medía 44 px dentro de un párrafo de 22 y se salía 11 px por
   abajo, comiéndose el aire que lo separaba de la barra de cursos.
   Y su `:hover` es suyo: dentro de `<p class="migas">` heredaba `.migas a:hover{color:
   var(--tinta)}` y se pintaba del mismo color que su fondo —negro sobre negro, 1,0:1—. */
.ej-btn{font:inherit;font-weight:650;background:var(--acento);color:var(--sobre-acento);border:0;
  border-radius:12px;padding:.8rem 1.35rem;cursor:pointer;min-height:var(--objetivo-toque);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.ej-btn:hover,.ej-btn:focus-visible{color:var(--fondo);filter:brightness(.9);
  transform:translateY(-1px);text-decoration:none}
.ej-btn:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.ir-a-jugar{margin:0 0 1.6rem}
.ej-pista{font:inherit;font-weight:500;background:transparent;color:var(--tinta-suave);
  border:1px solid var(--linea);border-radius:99px;padding:.7rem 1.2rem;cursor:pointer;min-height:44px}
.ej-aviso{margin:1rem 0 0;font-weight:500;min-height:1.5rem}
.ej-aviso.es-bien{color:var(--teal-solido)}
.ej-aviso.es-mal{color:var(--coral-solido)}
.ej-fin{font-size:1.3rem;font-weight:600;margin:0 0 .3rem}
.ej-marcador{color:var(--tinta-suave);margin:0 0 1.2rem}
.test-nivel{font-size:clamp(3rem,9vw,5rem);font-weight:600;letter-spacing:-.05em;margin:.2rem 0 .6rem;
  background:linear-gradient(100deg,var(--acento),var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- juegos ---- */
.juego-boton{font:inherit;text-align:left;cursor:pointer;width:100%}
.juego-boton[aria-current]{border-color:var(--acento);box-shadow:inset 0 0 0 2px var(--acento)}
.juego-tablero:not(:empty){margin-top:1.6rem;background:var(--cristal);border:1px solid var(--linea);
  border-radius:var(--radio-g);padding:1.3rem 1.2rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- contenido de lectura ---- */
.cuerpo{max-width:38rem;font-size:1.04rem}
.cuerpo p{margin:0 0 1rem}
.ejemplo{background:var(--cristal);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1rem 1.1rem;margin:0 0 .7rem}
.ejemplo .en{font-size:1.12rem;font-weight:500;margin:0 0 .2rem}
.ejemplo .tr{color:var(--tinta-suave);font-size:.93rem;margin:0;font-weight:300}
.tabla-vocab{width:100%;border-collapse:collapse;margin:1rem 0 0}
.tabla-vocab td{border-bottom:1px solid var(--linea);padding:.7rem .4rem;vertical-align:top}
.tabla-vocab .en{font-weight:600;font-size:1.05rem}
.tabla-vocab .tr{color:var(--tinta-suave)}
.tabla-vocab .ej{color:var(--tinta-suave);font-size:.9rem;font-weight:300}
.trampa{display:inline-block;font-size:.7rem;font-weight:600;background:var(--coral-solido);
  color:#fff;padding:.1rem .45rem;border-radius:6px;margin-left:.4rem}
.par-sonido{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;margin:1.2rem 0}
.par-sonido div{background:var(--cristal);border:1px solid var(--linea);
  border-radius:var(--radio);padding:1.1rem}
.par-sonido b{display:block;font-size:1.5rem;font-weight:600}
.par-sonido code{font-family:ui-monospace,monospace;color:var(--acento-2);font-size:1rem}
.par-sonido span{display:block;color:var(--tinta-suave);font-size:.9rem;margin-top:.3rem}

/* ---- ficha imprimible ---- */
.ficha-hoja{background:#fff;color:#111;border:1px solid var(--linea);border-radius:var(--radio);
  padding:2rem 1.8rem;max-width:44rem}
.ficha-hoja h2{color:#111;font-size:1.2rem;letter-spacing:-.02em;text-transform:none;
  margin:1.6rem 0 .6rem}
.ficha-hoja ol{padding-left:1.4rem;margin:0}
.ficha-hoja li{margin-bottom:.9rem;line-height:2.1;display:flex;align-items:baseline;gap:.6rem}
.ficha-hoja .pieza{font-size:1.05rem}
.ficha-hoja .raya{flex:1 1 6rem;min-width:5rem;border-bottom:1px solid #555;
  align-self:flex-end;margin-bottom:.25rem}
.ficha-hoja .ficha-intro{font-size:1rem;color:#333;border-left:3px solid #bbb;
  padding-left:.9rem;margin:0 0 1.4rem}
.ej-datos{color:var(--tinta-suave);font-size:.95rem;margin:.2rem 0 1rem}
.imprimir{font:inherit;font-weight:600;background:var(--acento);color:var(--sobre-acento);
  border:0;border-radius:99px;padding:.8rem 1.6rem;cursor:pointer;margin-bottom:1.2rem;min-height:44px}
@media print{
  .ficha-hoja{border:0;padding:0;max-width:none;border-radius:0}
  .imprimir,.migas{display:none}
}

/* La SALA DE JUEGO. Antes el juego se montaba en un div debajo de las tarjetas y el alumno se
   quedaba ahí abajo sin ninguna salida: el usuario lo encontró jugando y su frase fue «no sé
   cómo volver». Un juego no es una sección más de una página larga; mientras se juega, es lo
   único que hay.

   Tres cosas lo arreglan, y las tres importan por separado:
   · La sala TAPA el elegidor. No hay dos cosas compitiendo por la atención.
   · La barra de salir va PEGADA ARRIBA (`sticky`). En un móvil, con una rejilla de sopa de
     letras larga, un botón al final de la página no existe.
   · El BOTÓN ATRÁS del navegador sale del juego, porque es lo que la gente pulsa de verdad
     antes de buscar un botón en la página.

   Y visualmente deja de ser «otra tarjeta redondeada»: la sala es un objeto con borde marcado,
   sombra propia y una barra oscura arriba, para que se lea como un tablero y no como un
   formulario. */
.jg-sala{margin:0;border:2px solid var(--tinta);border-radius:var(--radio-g);
  background:var(--cristal-alto);overflow:hidden;
  box-shadow:0 18px 0 -10px rgba(26,23,32,.10), 0 30px 60px -30px rgba(26,23,32,.45)}
.jg-sala[hidden]{display:none}

.jg-barra{position:sticky;top:0;z-index:20;display:flex;gap:.75rem;align-items:center;
  padding:.6rem .75rem;background:var(--tinta);color:var(--fondo)}
.jg-volver{font:inherit;font-weight:700;font-size:.95rem;line-height:1;display:inline-flex;
  gap:.5rem;align-items:center;min-height:44px;padding:.6rem 1rem;border:0;border-radius:999px;
  background:var(--fondo);color:var(--tinta);cursor:pointer}
.jg-volver:hover{background:var(--acento);color:var(--sobre-acento)}
.jg-volver:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.jg-volver span{font-size:1.1em;line-height:0}
.jg-titulo{margin:0;font-size:1rem;font-weight:700;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* El suelo del juego. La trama diagonal es tenue a propósito: da materia sin competir con las
   fichas, que es lo que el alumno tiene que mirar. */
.jg-mesa{padding:clamp(1rem,4vw,2rem);
  background:
    repeating-linear-gradient(135deg, rgba(26,23,32,.022) 0 2px, transparent 2px 9px),
    var(--cristal-alto)}

/* El elegidor: las tarjetas entran escalonadas al cargar. Un solo momento coreografiado vale
   más que diez microanimaciones sueltas. */
.jg-elegir[hidden]{display:none}
.jg-elegir .juego-boton{animation:jg-entra .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes jg-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .jg-elegir .juego-boton{animation:none}
  .jg-sala{scroll-behavior:auto}
}

/* La lista de vocabulario. La decisión que la hace útil y que no es obvia: **la frase de
   ejemplo pesa tanto como la palabra**. Una palabra con su traducción al lado se olvida al
   cerrar la pestaña; dentro de una frase, no. Por eso la frase no va en letra pequeña de nota
   al pie, va en su propia línea y en el idioma que se aprende.

   La numeración se quita a propósito: no es una lista ordenada de pasos, y los números
   invitarían a memorizar por posición. */
.vo-lista{list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:.5rem}
.vo-fila{padding:.85rem 1rem;border-radius:var(--radio);background:var(--cristal);
  border:1px solid var(--linea)}
.vo-par{margin:0;display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline}
.vo-par b{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.vo-tra{color:var(--tinta-suave)}
.vo-tra::before{content:"·";margin-right:.55rem;opacity:.5}
.vo-frase{margin:.3rem 0 0;color:var(--tinta-suave);font-size:.97rem;line-height:1.45}

/* El aviso de falso amigo va EN LA FILA, no en una nota al final: el momento de avisar de que
   `library` no es una librería es cuando se está leyendo `library`, no tres pantallas después.
   El borde izquierdo lo marca sin gritar, y el rótulo lo dice con palabras porque el color
   solo no vale: hay quien no lo distingue. */
.vo-fila--ojo{border-left:4px solid var(--coral-solido);background:var(--cristal-alto)}
.vo-ojo{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:999px;background:var(--coral-solido);color:#fff;
  align-self:center}
.ch--ojo{background:var(--coral-solido);color:#fff}
/* La pregunta que se ha dejado sin contestar. Sin esto, «te faltan 3» entre 28 preguntas
   repartidas en cuatro partes obliga a buscarlas a ojo. */
.pn-falta{border-left:4px solid var(--coral-solido);padding-left:.7rem;
  background:var(--cristal-alto);border-radius:8px}
/* Qué marca cada «Ojo», dicho una vez y VISIBLE. Vivía solo en un `title`, y en un teléfono
   no hay ratón: 195 marcas en 105 páginas sin manera de saber qué avisaban. */
.nota--ojo{border-left:4px solid var(--coral-solido);padding-left:.7rem;margin-top:-1rem}
.nota--ojo b{color:var(--coral-solido);text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem}

/* Adónde se va DESPUÉS. Va al final de toda unidad —lista de vocabulario, lectura, audio— y con
   peso, porque es la respuesta a «¿y ahora qué?».
   Medido el 2026-08-16: ni una lista de vocabulario ni una lectura tenían un solo enlace para
   seguir. Y son las páginas por las que más gente entra desde un buscador —«la ropa en inglés»
   se busca mucho más que «edumaterial»—: se leían catorce palabras o un texto entero y la única
   salida era volver al índice. Ahí es donde se pierde a quien acaba de llegar. */
/* Los filtros por nivel. Van justo encima de los grupos, que es donde se buscan, y se pintan
   solo si hay más de un nivel: un filtro con un botón no filtra nada.
   Botones de verdad —no `select`— porque en un móvil se ven todas las opciones a la vez y se
   pulsan con el dedo sin abrir nada. */
/* PRONUNCIACIÓN. La sección salió publicada **sin una sola regla propia** —lo midió V12 el
   2026-08-25 desde el CSSOM de la página servida— y el efecto no era feo, era ilegible: las
   52 descripciones de sonido pegadas a su símbolo y las 104 palabras de práctica pegadas a su
   AFI, «/ɪ/Vocal breve…», «fish/fɪʃ/». Dos inline seguidos sin espacio en el HTML y sin margen
   aquí.

   El par va LADO A LADO. Un par mínimo existe para comparar dos sonidos que el oído no separa;
   uno encima de otro se lee como dos fichas sueltas. Por debajo de 34rem no caben dos columnas
   con su AFI, y ahí sí se apilan. */
/* LISTENING. La sección tampoco tiene hoja propia, pero su markup es de bloques —`section`,
   `ol`, `details`— y se lee. La única que sí la necesita es el reproductor: un `<audio>` sin
   ancho sale del tamaño que decida el navegador, distinto en cada uno. */
.ls-audio{width:100%;margin:.6rem 0 0}
.ls-turno{margin:.45rem 0 0;padding-left:1.1rem;text-indent:-1.1rem}
.ls-turno b{color:var(--acento)}

.pr-par{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.4rem 0 0}
@media (max-width:34rem){.pr-par{grid-template-columns:1fr}}
.pr-lado{padding:1rem 1.1rem;border-radius:var(--radio);background:var(--cristal);
  border:1px solid var(--linea);text-align:center}
.pr-palabra{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.pr-signif{margin:.35rem 0 0;color:var(--tinta-suave);font-size:.97rem}

/* El AFI. Va en la misma línea que la palabra en las listas y debajo en el par, así que el
   margen lo pone la lista y no él: aquí solo se le da su forma. La fuente monoespaciada es
   deliberada —los símbolos fonéticos se comparan en columna, carácter a carácter— y el color
   suave impide que compita con la palabra, que es lo que se busca. */
.pr-afi{color:var(--tinta-suave);font-family:ui-monospace,"Cascadia Mono",Menlo,monospace;
  font-size:.95em}
.pr-lado .pr-afi{display:block;margin:.3rem 0 0}

/* Los sonidos con su descripción articulatoria: 52 en total, y hasta hoy no las pintaba nadie.
   El símbolo en columna propia para que las descripciones empiecen todas a la misma altura y
   se puedan comparar de un vistazo, que es para lo que están. */
.pr-sonidos{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.pr-sonidos li{display:grid;grid-template-columns:4.5rem 1fr;gap:.4rem;align-items:baseline}
.pr-simbolo{font-family:ui-monospace,"Cascadia Mono",Menlo,monospace;font-size:1.15rem;
  font-weight:700}

/* La frase que mete las dos palabras en la misma oración. Es la única línea de la página donde
   el par aparece en uso, así que se destaca como una cita y no como un ejemplo más. */
.pr-contraste{margin:1.2rem 0 0;padding:.9rem 1.1rem;border-left:4px solid var(--acento);
  border-radius:0 var(--radio) var(--radio) 0;background:var(--cristal-alto);
  font-size:1.08rem;line-height:1.5}

/* Las palabras de práctica. Sin numerar a propósito, igual que el vocabulario: no son pasos. */
.pr-lista{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.pr-lista li{padding:.75rem 1rem;border-radius:var(--radio);background:var(--cristal);
  border:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline}
.pr-lista b{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}

/* `hidden` tiene que ganar SIEMPRE. La regla del navegador es `[hidden]{display:none}`, con
   especificidad de atributo, y cualquier clase que fije el `display` —`.rejilla{display:grid}`,
   sin ir más lejos— le gana. Medido el 2026-08-21 en la web publicada: el filtro por nivel
   escondía los encabezados y dejaba las nueve rejillas de tarjetas en pantalla. El motor del
   filtro además apaga el `display` en línea; esta regla arregla los demás sitios donde se
   marca `hidden`, que no son solo ese. */
[hidden]{display:none!important}
/* Dos barras: la del CURSO —siempre, y primera, porque es como busca un padre— y la del
   nivel europeo, solo en inglés. Cada una con su rótulo delante, porque dos filas de píldoras
   sin decir qué es cada una se leen como una sola lista revuelta. */
.fi-grupo{margin:0 0 1rem}
.fi-grupo:last-of-type{margin-bottom:1.4rem}
.fi-lab{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-suave);margin:0 0 .4rem}
/* El subtítulo de cada tramo de cursos: en Italia, la etapa que el nombre declarado lleva
   detrás de la coma. En España y Portugal no aparece, porque no hay coma que sacar. */
.fi-sub{display:block;font-size:.8rem;color:var(--tinta-suave);margin:.15rem 0 .35rem}
/* En Italia el curso se llama «Classe terza, secondaria di primo grado»: la píldora tiene que
   poder partirse en dos líneas sin romper la fila. */
.fi-btn{white-space:normal;text-align:left}
.fi-vacio{margin:0 0 1.4rem;padding:.9rem 1rem;border-radius:var(--radio-g);
  background:var(--cristal-alto);border:1px solid var(--linea);color:var(--tinta-suave)}
/* El curso al que corresponde cada peldaño, dentro del encabezado. Va detrás del nivel y más
   pequeño: el MCER es lo que se compara fuera; el curso es lo que se reconoce dentro. */
h2 .cursos{display:block;font-size:.8rem;font-weight:600;color:var(--tinta-suave);
  letter-spacing:0;margin-top:.15rem}
.tarjeta p.cursos{margin:.1rem 0 0;font-size:.85rem;color:var(--tinta-suave)}
.fi-barra{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.4rem}
.fi-btn{font:inherit;font-size:.9rem;font-weight:700;min-height:var(--objetivo-toque);padding:.45rem 1rem;
  border:1px solid var(--linea);border-radius:999px;background:var(--cristal-alto);
  color:var(--tinta-suave);cursor:pointer}
.fi-btn:hover{border-color:var(--tinta);color:var(--tinta)}
.fi-btn[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);
  color:var(--fondo)}
.fi-btn:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

.sigue{margin:2.2rem 0 0;padding:1.2rem;border-radius:var(--radio-g);
  background:var(--cristal-alto);border:1px solid var(--linea)}
.sigue h2{margin:0 0 .9rem;font-size:1.05rem}
.vo-botones{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.ej-btn--suave{background:transparent;color:var(--tinta);
  box-shadow:inset 0 0 0 2px var(--tinta)}
.ej-btn--suave:hover{background:var(--tinta);color:var(--fondo)}

@media (max-width:520px){
  .vo-par b{font-size:1.08rem}
  .vo-fila{padding:.75rem .85rem}
  /* En móvil los dos botones ocupan la fila entera: un botón a medio ancho al lado de otro
     invita a fallar el dedo. */
  .vo-botones{flex-direction:column}
  .vo-botones .ej-btn{text-align:center}
}