/* ═══════════════════════════════════════════════════════════
   VOCCA — sistema de diseño
   Implementación de DESIGN.md. Si cambias algo aquí que
   contradiga ese documento, cámbialo primero allí.

   Principio: herramienta afilada.
   · El color no decora: informa.
   · Neutros + verde acierto + rojo error. Nada más en la base.
   · EL COLOR ES EL PREMIO: solo vive dentro de la recompensa.
   · Sin sombras. Jerarquía por línea y espacio.
   · Una tipografía. Tres radios. Escala de 4.
   ═══════════════════════════════════════════════════════════ */

/* El progreso de una lección, como TIPO y no como texto suelto.
   Declararlo así es lo que permite que el navegador lo interpole: una
   variable sin tipo dentro de un degradado salta de un valor al otro de
   golpe, y lo que se busca aquí es justo lo contrario — que la fila y el
   nodo del mapa se vayan llenando. Lo usan la ruta en lista y el mapa. */
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}

:root{
  /* ── Neutros: ocho pasos, ni uno más ── */
  --n0:#FFFDFB;
  --n5:#F7F4EF;
  --n10:#EDE8E1;
  --n20:#DBD5CB;
  --n40:#A9A299;
  --n60:#726B62;
  --n90:#221F1B;
  --n100:#14110E;

  /* ── Marca ──
     Valor de base; la capa PAPEL (más abajo) lo fija en verde bosque. El
     violeta del logotipo y del icono sale del mapache y vive en
     tools/marca.py, a juego con --prim. */
  --marca:#1F7A44;

  /* ── Semántico: solo dos ── */
  --ok:#17803D;  --ok-bg:#F0F8F2;  --ok-line:#BFDECB;  --on-ok:#FFFFFF;
  --no:#BE2F26;  --no-bg:#FDF3F2;  --no-line:#EDC7C4;  --on-no:#FFFFFF;

  /* ── Paleta del PREMIO. Prohibida fuera de la recompensa. ── */
  --rw-blue:#2E7DF6;
  --rw-violet:#7C4DFF;
  --rw-amber:#F5A524;

  /* ── Espaciado: escala de 4 ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --pad:20px;

  /* ── Forma: tres radios ── */
  --r-s:8px; --r-m:14px; --r-full:999px;

  /* ── Movimiento: una curva, tres duraciones ── */
  --ease:cubic-bezier(.2,0,0,1);
  --t-micro:120ms; --t-move:200ms; --t-enter:320ms;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* El aire entre las partes de un ejercicio: el bloque de audio, las
     opciones y el botón de acción. Uno solo para los tres huecos, que es lo
     que hace que un ejercicio de dos opciones y otro de cinco se lean igual.
     Es `--s5` con nombre propio: se toca aquí y cambia en los 24 tipos. */
  --ex-aire:var(--s5);
  /* Alto común de «Escuchar» y «Más despacio». Los dos, o dejan de parecer
     el mismo control. */
  --audio-btn-h:44px;

  /* Alias heredados: el sistema real son los tokens de arriba. */
  /* El fondo lleva un tinte cálido y las tarjetas van en blanco: así se
     despegan sin necesitar sombra, que el sistema no permite. */
  --bg:#FAF7F2; --surface:#FFFDFB; --surface-2:var(--n5);
  /* El papel de la portada NO cambia con el tema, a propósito: ver `.gate-hero`. */
  --paper:#FAF7F2;
  --line:var(--n20); --ink:var(--n90); --ink-2:var(--n60); --ink-3:var(--n40);
  --track:var(--n10); --veil:rgba(11,11,12,.55);
  --accent:var(--n100); --accent-soft:var(--n5); --accent-tint:var(--n5);
  --brand:var(--n100); --brand-lo:var(--n100); --brand-hi:var(--n100);
  --brand-soft:var(--n5); --brand-line:var(--n20);
  --jet:var(--n100); --on-jet:var(--n0); --on-brand:var(--n0);
  --ok-soft:var(--ok-bg); --no-soft:var(--no-bg);
  --gold:var(--n90); --gold-soft:var(--n5); --gold-line:var(--n20); --on-gold:var(--n0);
  /* ── Paleta pastel apagada ──────────────────────────────────────────
     Todo en blanco y negro salía demasiado severo. Estos siete tonos están
     desaturados a propósito (nunca por encima del 30% de saturación): dan
     color sin gritar y sin competir con el verde y el rojo, que siguen
     siendo los únicos que significan algo. El color aquí es una ETIQUETA
     —de qué tipo es cada cosa—, no decoración: mismo tipo, mismo tono
     siempre, en la práctica, en la sesión y en la ruta. */
  /* Más saturada desde el 30 oct 2026: la versión empolvada se leía triste.
     Ninguno coincide con --ok ni --no, que siguen siendo acierto y fallo. */
  --p-sage:#22A55E;   --p-sage-soft:#DCF5E6;
  --p-blue:#2E7DF6;   --p-blue-soft:#DCEAFF;
  --p-plum:#7C4DFF;   --p-plum-soft:#ECE4FF;
  --p-clay:#FF7A45;   --p-clay-soft:#FFE8DC;
  --p-sand:#F5A524;   --p-sand-soft:#FFF1D2;
  --p-teal:#14B8A6;   --p-teal-soft:#D3F5EF;
  --p-rose:#F0508A;   --p-rose-soft:#FFE1EC;

  /* Nombres antiguos que ya usaba la pantalla de práctica. Estaban sin
     definir, así que todas las tarjetas salían grises. */
  --p-coral:var(--p-clay);   --p-yellow:var(--p-sand);
  --p-violet:var(--p-plum);  --p-green:var(--p-sage);
  --p-pink:var(--p-rose);

  --c-vocab:var(--p-blue); --c-grammar:var(--p-sage); --c-phon:var(--p-rose);
  --c-logic:var(--p-clay); --c-build:var(--p-sand); --c-listen:var(--p-teal);
  --c-boss:var(--p-plum);
  --c-vocab-soft:var(--p-blue-soft); --c-grammar-soft:var(--p-sage-soft);
  --c-phon-soft:var(--p-rose-soft); --c-logic-soft:var(--p-clay-soft);
  --c-build-soft:var(--p-sand-soft); --c-listen-soft:var(--p-teal-soft);
  --c-boss-soft:var(--p-plum-soft);
  /* Acento por pestaña: cada zona de la app tiene su tono, así que se sabe
     dónde estás por el color antes de leer el título. */
  --acc-home:var(--p-sage); --acc-route:var(--p-blue);
  --acc-practice:var(--p-plum); --acc-progress:var(--p-teal);
  --acc-me:var(--p-clay);

  --reel-bg:var(--n5); --shadow:none; --shadow-lg:none;
  --r-l:var(--r-m); --r-xl:var(--r-m);
  color-scheme:light;
}

/* Oscuro: inversión real de la escala, no gris sucio. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --n0:#12100E; --n5:#1A1714; --n10:#231F1B; --n20:#332E28;
    --n40:#615A52; --n60:#978F85; --n90:#EDE9E3; --n100:#FFFDFB;
    --bg:#0E0C0A; --surface:#17140F;
    --ok:#4ADE80; --ok-bg:#0F1A13; --ok-line:#1F3A28; --on-ok:#06200F;
    --no:#F87171; --no-bg:#1C1210; --no-line:#3A211E; --on-no:#250906;
    --veil:rgba(0,0,0,.72);
    /* Los pasteles de día quedan casi invisibles sobre fondo oscuro: aquí
       suben de luminosidad y bajan de saturación para no vibrar. */
    --p-sage:#5BE39A; --p-blue:#5B9BFF; --p-plum:#A98BFF;
    --p-clay:#FF9466; --p-sand:#FFC247; --p-teal:#3EE0CC; --p-rose:#FF7AAA;
    --p-sage-soft:#10241A; --p-blue-soft:#0F1B30; --p-plum-soft:#1B1433;
    --p-clay-soft:#2B170D; --p-sand-soft:#2A1F09; --p-teal-soft:#0B2622;
    --p-rose-soft:#2B0F1B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --n0:#12100E; --n5:#1A1714; --n10:#231F1B; --n20:#332E28;
  --n40:#615A52; --n60:#978F85; --n90:#EDE9E3; --n100:#FFFDFB;
  --bg:#0E0C0A; --surface:#17140F;
  --ok:#4ADE80; --ok-bg:#0F1A13; --ok-line:#1F3A28; --on-ok:#06200F;
  --no:#F87171; --no-bg:#1C1210; --no-line:#3A211E; --on-no:#250906;
  --veil:rgba(0,0,0,.72);
  --p-sage:#5BE39A; --p-blue:#5B9BFF; --p-plum:#A98BFF;
  --p-clay:#FF9466; --p-sand:#FFC247; --p-teal:#3EE0CC; --p-rose:#FF7AAA;
  --p-sage-soft:#10241A; --p-blue-soft:#0F1B30; --p-plum-soft:#1B1433;
  --p-clay-soft:#2B170D; --p-sand-soft:#2A1F09; --p-teal-soft:#0B2622;
  --p-rose-soft:#2B0F1B;
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  background:var(--n0);color:var(--n90);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;   /* los contadores no bailan */
  -webkit-font-smoothing:antialiased;user-select:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{width:100%;height:100%;display:block}
.hidden{display:none !important}

/* ── Escala tipográfica. Todo texto sale de aquí. ── */
.t-display{font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.035em}
.t-title,h2,.h2,.route-head h2,.sum-head{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin:0}
.t-head,.me-name,.teach-h{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.t-body-lg{font-size:17px;line-height:1.45}
.t-strong{font-weight:600;letter-spacing:-.01em}
.t-caption,.hint-p{font-size:14px;line-height:1.4;font-weight:500;color:var(--n60)}
.t-micro,.q-kicker,.arc-badge,.intro-tag,.teach-kick{
  font-size:12.5px;line-height:1.2;font-weight:600;letter-spacing:.07em;text-transform:uppercase}

/* ═══════════ EL INTERVALO ═══════════
   La única forma gráfica de la marca: cinco trazos cuya separación crece,
   como los intervalos de repaso (1·3·8·21·55). No es un adorno, es el
   motor de la app dibujado. Solo neutros: nunca verde, rojo ni premio. */
.interval{display:flex;align-items:flex-end;gap:0;height:14px}
.interval i{
  display:block;width:2px;background:var(--n20);border-radius:1px;height:100%;
  transition:background var(--t-move) var(--ease);
}
.interval i:nth-child(1){margin-left:0}
.interval i:nth-child(2){margin-left:3px}
.interval i:nth-child(3){margin-left:6px}
.interval i:nth-child(4){margin-left:11px}
.interval i:nth-child(5){margin-left:18px}
.interval.on i{background:var(--n100)}
.interval.lg{height:28px}
.interval.lg i{width:3px}
.interval.sep{margin:var(--s5) 0 var(--s3)}
.interval.faint i{background:var(--n10)}
.interval i.f{background:var(--n100)}
/* La marca abre la pantalla de inicio: se llena sola al cargar. */

/* Elementos retirados del sistema anterior. `.xp-dot` estaba en esta lista y
   no debía: el código lo sigue creando en cada acierto para lanzar las
   partículas hacia el contador de gemas, así que la animación existía y no
   se veía. Ahora tiene estilo propio, justo debajo. */
.blobby,.illus,.blob,.route-deco,.prac-blob,.verdict-face,
.charge-glow,.zone-card{display:none !important}

/* Las gemas que vuelan del botón al contador al acertar. */
.xp-dot{position:fixed;width:10px;height:10px;border-radius:50%;
  background:var(--p-blue);pointer-events:none;z-index:60}

#app{height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;position:relative;overflow:hidden}

/* ─────────── HUD ─────────── */
#hud{padding:calc(var(--safe-t) + var(--s3)) var(--pad) 0;flex:0 0 auto;z-index:20}
.hud-row{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.hud-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s3);
  border-radius:var(--r-full);border:1px solid var(--n20);font-size:14px;font-weight:600}
.hud-chip .i{width:17px;height:17px;flex:0 0 auto;fill:var(--n60);stroke:none}
.hud-chip.streak{border-color:color-mix(in srgb,var(--p-clay) 40%,transparent)}
.hud-chip.streak .i{fill:var(--p-clay)}
.hud-chip.gems{border-color:color-mix(in srgb,var(--p-blue) 40%,transparent)}
.hud-chip.gems .i{fill:var(--p-blue)}
.hud-chip.ghost{border-color:transparent;color:var(--n60)}
.spin-chip{margin-left:auto;background:var(--n100);color:var(--n0);border-color:var(--n100)}
.pulse-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ─────────── Pantallas ─────────── */
.screen{flex:1 1 auto;display:none;flex-direction:column;min-height:0}
.screen.active{display:flex}
.home-scroll,.prog-scroll,.route-scroll,.me-scroll,.prac-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--s5) var(--pad) var(--s7)}
.route-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s4)}
.route-head span{font-size:14px;color:var(--n60);font-weight:500}
.h2{margin:var(--s6) 0 var(--s4)}
.hint-p{margin:0 0 var(--s4)}

/* ─────────── Inicio ─────────── */
.arc-card{text-align:center;padding:var(--s4) 0 0}
.arc{width:190px;margin:0 auto}
.arc path{fill:none;stroke-linecap:butt;stroke-width:8}
.arc-bg{stroke:var(--n10)}
.arc-fg{stroke:var(--n100);stroke-dasharray:0 100;transition:stroke-dasharray var(--t-enter) var(--ease)}
.arc-inner{margin-top:-54px}
/* Tope de ancho: dentro del arco solo caben unos 130 px a esa altura. Con
   `clip` en vez de puntos suspensivos, un rótulo largo se recorta sin
   cruzar nunca el trazo — que es el fallo que se veía. */
.arc-badge{display:inline-block;color:var(--n60);max-width:132px;
  overflow:hidden;text-overflow:clip;white-space:nowrap}
.arc-num{font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.035em;margin-top:var(--s2)}
.arc-cap{color:var(--n60);font-size:14px;font-weight:500}

.cta{width:100%;margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-full);
  background:var(--marca);color:#fff;text-align:center;
  transition:transform var(--t-micro) var(--ease),filter var(--t-micro)}
.cta:active{transform:scale(.96);filter:brightness(.92)}
.cta-label{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.cta-sub{display:block;font-size:13.5px;opacity:.65;margin-top:2px;font-weight:500}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s5)}
.mini-card{border:1px solid var(--n20);border-radius:var(--r-m);padding:var(--s4);position:relative}
.mini-k{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.mini-l{font-size:13.5px;color:var(--n60);margin-top:2px;font-weight:500}
.mini-card{background:var(--surface)}
.mini-card .mini-k{color:var(--ink)}

.chest-card{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);
  padding:var(--s4);border:1px solid var(--n20);border-radius:var(--r-m)}
.chest-ico{width:24px;height:24px;flex:0 0 auto}
.chest-ico svg{fill:var(--n60);stroke:none}
.chest-body{flex:1;min-width:0}
.chest-t{font-weight:600;font-size:14px}
.chest-s{font-size:13.5px;color:var(--n60)}
.chest-btn{padding:var(--s2) var(--s4);border-radius:var(--r-full);background:var(--n100);
  color:var(--n0);font-size:14px;font-weight:600}
.chest-btn:disabled{opacity:.35}

.week-strip{display:flex;gap:var(--s1);margin-top:var(--s5)}
.wk{flex:1;text-align:center}
.wk-bar{height:32px;border-radius:var(--r-s);background:var(--n5);position:relative;overflow:hidden}
.wk-bar i{position:absolute;bottom:0;left:0;right:0;background:var(--n40);display:block}
.wk-bar.met i{background:var(--n100)}
.wk-d{font-size:11.5px;color:var(--n40);margin-top:var(--s1);text-transform:uppercase;font-weight:600;letter-spacing:.06em}

.powerup-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.pu{padding:5px var(--s3);border-radius:var(--r-full);border:1px solid var(--n20);
  font-size:13.5px;color:var(--n60);font-weight:500}

/* ─────────── Práctica ─────────── */
.prac-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.prac-card{position:relative;text-align:left;padding:var(--s4);border-radius:var(--r-m);
  border:1px solid var(--n20);min-height:106px;background:var(--n0);
  transition:border-color var(--t-micro),transform var(--t-micro) var(--ease)}
.prac-card:active{transform:scale(.98);border-color:var(--pc,var(--n100))}
.prac-card b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
  margin-top:var(--s3);color:color-mix(in srgb, var(--pc,var(--n90)) 30%, var(--n90))}
.prac-card i{display:block;font-style:normal;font-size:13.5px;color:var(--n60);line-height:1.35;margin-top:2px;font-weight:500}
/* El color va en el icono, no en el fondo de la tarjeta: así se distingue
   el tipo de actividad de un vistazo sin que la rejilla parezca un mosaico. */
.prac-i{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-s);
  border:1px solid color-mix(in srgb, var(--pc,var(--n40)) 45%, transparent);
  background:color-mix(in srgb, var(--pc,var(--n40)) 16%, var(--n0));
  color:var(--pc,var(--n90))}
.prac-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ─────────── Ruta ─────────── */
#route-map{position:relative;margin-top:var(--s2)}
#route-svg{position:absolute;inset:0;width:100%;pointer-events:none}
#route-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.node{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--n0);border:1px solid var(--n20);color:var(--n60);
  transform:translate(-50%,-50%);z-index:2;transition:transform var(--t-micro) var(--ease)}
.node:active{transform:translate(-50%,-50%) scale(.95)}
.node .n-i{width:18px;height:18px;fill:currentColor;stroke:none}
.node .n-num{font-size:16px;font-weight:600;letter-spacing:-.02em}
.node.done,.node.current{background:var(--n100);color:var(--n0);border-color:var(--n100)}
.node.current::after{content:'';position:absolute;inset:-5px;border-radius:inherit;border:1px solid var(--n100)}
.node.locked{color:var(--n40);border-color:var(--n10)}
.node.branch{width:36px;height:36px}
.node.branch .n-i{width:18px;height:18px}
.node.k-grammar,.node.k-boss{border-radius:var(--r-m)}
.node.k-boss{width:60px;height:60px}

/* ─────────── Lección ─────────── */
.lesson-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--pad) 0}
.x-btn{width:24px;height:24px;flex:0 0 auto;color:var(--n60)}
.x-btn svg{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.prog-rail{flex:1;height:2px;background:var(--n10);overflow:hidden}
.prog-fill{height:100%;width:0;background:var(--n100);transition:width var(--t-move) var(--ease)}
.combo-tag{min-width:36px;text-align:right;font-weight:600;font-size:14px;color:var(--n40)}
.combo-tag small{font-size:11.5px}
.combo-tag.hot{color:var(--n100)}

/* El esqueleto compartido del ejercicio.
   Una sola caja para los 24 tipos, con el mismo aire entre sus partes tenga
   dos opciones o cinco. Arranca SIEMPRE a la misma altura, justo bajo el
   rótulo, y lo que sobra se queda abajo.

   Antes se centraba en vertical y salió mal por dos lados: en los ejercicios
   cortos dejaba 150-180 px de vacío arriba (y en los de escribir el campo
   caía justo donde luego sale el teclado), y en los largos, como el dictado,
   el centrado empujaba el principio por encima del borde y no había scroll
   que llegara a él. Lo que NO vuelve es lo de antes de eso: nada de márgenes
   automáticos que manden las opciones o el botón al fondo de la pantalla. */
.stage{flex:1;overflow-y:auto;padding:var(--s4) var(--pad) var(--s5);
  display:flex;flex-direction:column;justify-content:flex-start;gap:var(--ex-aire)}
.stage > *{flex:0 0 auto}
/* La cabecera vacía no ocupa.
   Sin esto dejaba un hueco salido de la nada en el par mínimo, que solo tiene
   etiqueta y esa ya vive arriba.

   Va contra `.q-head` y NO contra `.stage > :empty`, que fue el primer
   intento y se llevó por delante dos ejercicios: `:empty` también casa con un
   `<input>` —no tiene hijos— y con el hueco de «ordena la frase», que nace
   vacío a propósito. Desaparecieron el campo de escribir y la zona de soltar
   fichas. Aquí solo puede afectar a la caja del enunciado. */
.q-head:empty{display:none}
/* La salida de los ejercicios de voz. Discreta pero siempre visible: si
   hablar fuera obligatorio, se perderían todas las sesiones que no ocurren
   en casa. */
.saltar-btn{margin-top:var(--s4);align-self:center;padding:6px var(--s3);
  border-radius:var(--r-full);border:1px solid transparent;
  font-size:13px;font-weight:500;color:var(--n40)}
.saltar-btn:active{border-color:var(--n20)}
.ses-donde{padding:var(--s2) var(--pad) 0;font-size:13px;font-weight:600;color:var(--marca);text-align:center}
.ses-donde:empty{display:none}
.ex-cabecera{flex:0 0 auto;display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--pad) 0;min-height:30px}
.ex-label{flex:1;min-width:0}
.ex-esquina{flex:0 0 auto;margin-left:auto}

.q-kicker{color:var(--n60)}
.stage .q-kicker{margin-bottom:var(--s3)}
.q-prompt{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.03em}
.q-prompt.sm{font-size:20px;line-height:1.3;letter-spacing:-.02em}
.q-ipa{color:var(--n60);font-size:14px;margin-top:var(--s2);letter-spacing:0}
.q-note{color:var(--n60);font-size:14px;margin-top:var(--s2);line-height:1.45}
.gap-slot{color:var(--n40)}

.sayable{cursor:pointer;border-bottom:1px solid var(--n20)}
.sayable.ringing{border-bottom-color:var(--n100)}

.tr-btn{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);padding:6px var(--s3);
  border-radius:var(--r-full);border:1px solid var(--n20);font-size:13.5px;color:var(--n60);font-weight:500}
.tr-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-btn.on{border-color:var(--n100);color:var(--n90)}
.tr-out{max-height:0;overflow:hidden;opacity:0;font-size:14px;color:var(--n60);line-height:1.45;
  transition:max-height var(--t-move) var(--ease),opacity var(--t-micro),margin-top var(--t-move) var(--ease)}
.tr-out.on{max-height:140px;opacity:1;margin-top:var(--s3)}

/* Sin `margin-top:auto`. Lo llevaba para empujar las opciones al fondo, y era
   justo el origen del hueco: con poco contenido arriba dejaba medio scroll en
   blanco. El aire ahora lo pone el `gap` del esqueleto, igual para todos. */
.opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{padding:var(--s4);border-radius:var(--r-m);text-align:left;border:1px solid var(--n20);
  font-size:15px;font-weight:500;transition:border-color var(--t-micro),transform var(--t-micro) var(--ease)}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--n100)}
.opt.right{border-color:var(--ok);color:var(--ok)}
.opt.wrong{border-color:var(--no);color:var(--no)}
.opt.dim{opacity:.4}
.opt:disabled{pointer-events:none}
.opts.two{flex-direction:row}
.opts.two .opt{flex:1;text-align:center;font-size:18px;font-weight:600;padding:var(--s5) var(--s3)}

/* Sin `margin:auto 0`. Absorbía todo el hueco libre y empujaba al fondo a
   sus hermanos —entre ellos el botón de acción, que volvía a quedarse
   descolgado abajo. Centrar es cosa del esqueleto, no de cada caja. */
.intro-card,.teach-card{padding:var(--s5);border-radius:var(--r-m);border:1px solid var(--n20)}
.intro-tag,.teach-kick{color:var(--n60)}
.intro-en{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.035em;margin-top:var(--s2);display:inline-block}
.intro-es{font-size:17px;margin-top:var(--s2);color:var(--n90)}
.intro-ex{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--n10)}
.intro-ex b{display:inline-block;font-size:15px;font-weight:600}
.intro-ex span{display:block;font-size:14px;color:var(--n60);margin-top:2px}
.teach-h{margin-top:var(--s2)}
.teach-p{font-size:15px;line-height:1.55;margin-top:var(--s3)}
.teach-table{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:14px}
.teach-table th{text-align:left;padding:var(--s2);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--n60);border-bottom:1px solid var(--n20)}
.teach-table td{padding:var(--s2);border-bottom:1px solid var(--n10)}
.teach-ex{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--n10);display:grid;gap:var(--s3)}
.teach-ex-row b{display:block;font-size:14px;font-weight:600}
.teach-ex-row span{display:block;font-size:14px;color:var(--n60);margin-top:2px}
.teach-warn{margin-top:var(--s4);padding:var(--s3);border-radius:var(--r-s);
  border:1px solid var(--no-line);font-size:14px;line-height:1.45}
.teach-warn b{display:block;color:var(--no);font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}

.say-btn,.slow-btn,.mini-btn{display:inline-flex;align-items:center;gap:6px;
  padding:var(--s2) var(--s3);border-radius:var(--r-full);border:1px solid var(--n20);
  font-size:14px;font-weight:500;transition:border-color var(--t-micro)}
.mini-btn{margin-top:var(--s3)}
.say-btn svg,.slow-btn svg{width:18px;height:18px;fill:var(--n60);stroke:none}
/* Los iconos de trazo (el cuentakilómetros) piden lo contrario que los de
   relleno (el altavoz). Se marcan con `.i-linea` y no por el botón donde
   viven, para que cambiar un icono no obligue a tocar el CSS.
   Lleva `svg` delante para pesar lo mismo que `.slow-btn svg` y ganarle por
   ir después: con solo `.i-linea` perdía y el cuentakilómetros salía relleno,
   como una cúpula. */
svg.i-linea{fill:none;stroke:var(--n60);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.say-btn.playing,.slow-btn.playing{border-color:var(--n100)}

/* El botón de pista.
   Vive como bombilla discreta en la esquina y solo se abre a píldora si el
   usuario lleva un rato sin tocar nada. Estaba al fondo de la pantalla, donde
   competía con el botón de comprobar y en el ejercicio de escuchar se quedaba
   medio tapado por él. */
.hint-btn{display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);border:1px solid transparent;
  font-size:13.5px;font-weight:500;
  margin-top:0;width:28px;height:28px;padding:0;
  border-color:transparent;color:var(--n40);overflow:hidden;
  transition:width var(--t-move) var(--ease),border-color var(--t-micro),
             color var(--t-micro),padding var(--t-move) var(--ease)}
.hint-btn svg{width:18px;height:18px;flex:0 0 auto}
.hint-btn .hint-txt,.hint-btn .hint-precio{opacity:0;white-space:nowrap;
  transition:opacity var(--t-micro)}
.hint-btn .hint-txt{width:0}
.hint-btn .hint-precio{width:0;font-style:normal;font-size:12px;color:var(--n60)}
/* Abierta: la píldora con el texto y, si se paga, lo que cuesta. El precio va
   ANTES de poder pulsarla — ofrecerla sin decirlo invita a gastar sin querer. */
.hint-btn.abierta{width:auto;padding:0 var(--s3);gap:6px;
  border-color:var(--n20);color:var(--n90)}
.hint-btn.abierta .hint-txt,.hint-btn.abierta .hint-precio{opacity:1;width:auto}


/* Los dos botones de audio: mismo alto y mismo ancho.
   Antes uno llevaba icono y el otro no, y el ancho lo decidía el largo del
   texto, así que quedaban desparejos en todas las pantallas. Ahora reparten
   la fila a partes iguales y el alto lo fija `--audio-btn-h` para los dos. */
.say-row{display:flex;gap:var(--s2);align-items:stretch;justify-content:center;width:100%}
.say-row .say-btn,.say-row .slow-btn{flex:1 1 0;min-width:0;justify-content:center;
  height:var(--audio-btn-h);padding:0 var(--s3);margin-top:0}
.say-row .say-btn.big{padding:0 var(--s3);font-size:14px}

/* La onda y los botones son UNA pieza: si se separan, vuelve a poder faltar
   la onda en un ejercicio y estar en otro, que es de donde venimos. */
.audio-bloque{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.audio-bloque .orb-wrap{margin:0}
/* Talla compacta: la onda es una tira y la fila no se estira a todo el ancho,
   porque va pegada a un texto y no es la protagonista. */
.audio-bloque.compacto{align-items:flex-start;gap:var(--s2);margin-top:var(--s4)}
.audio-bloque.compacto .say-row{width:auto;justify-content:flex-start}
.audio-bloque.compacto .say-row .say-btn,
.audio-bloque.compacto .say-row .slow-btn{flex:0 0 auto;height:36px}
.onda-fina{display:block;opacity:.85}
.mini-btn:disabled{opacity:.35}

.type-in{width:100%;margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-m);background:var(--n0);
  border:1px solid var(--n20);color:var(--n90);font-size:18px;font-weight:500;outline:none;user-select:text}
.type-in:focus{border-color:var(--n100)}

.build-slot{min-height:76px;margin-top:var(--s5);padding:var(--s2);border-radius:var(--r-m);
  border:1px dashed var(--n20);display:flex;flex-wrap:wrap;gap:var(--s1);align-content:flex-start}
.build-bank{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}
.tile{padding:var(--s2) var(--s3);border-radius:var(--r-s);border:1px solid var(--n20);font-size:14px;font-weight:500}
.tile.used{opacity:.18;pointer-events:none}

/* Mantener el dedo en el micro hacía que iOS seleccionara el texto de al
   lado (la frase, la traducción) y sacara el menú de copiar. En el ejercicio
   nada se selecciona —se toca—, salvo los campos donde se escribe. */
#screen-lesson{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  /* Sin doble toque para hacer zoom: iOS se tragaba el segundo toque rápido
     (tocar una caja y su pareja seguidas) esperando a ver si era un zoom. */
  touch-action:manipulation}
#screen-lesson input,#screen-lesson textarea{-webkit-user-select:text;user-select:text}
.mic-wrap{text-align:center}
.mic{width:80px;height:80px;border-radius:50%;margin:var(--s5) auto 0;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,#fff 35%,var(--marca));
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 52%),var(--marca);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 18px -8px color-mix(in srgb,var(--marca) 70%,transparent);
  transition:transform var(--t-move) var(--ease)}
.mic svg{width:28px;height:28px;fill:#fff;stroke:none}
/* Grabando: crece un poco y le late un halo, para que se vea que escucha. */
@keyframes escucha{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--marca) 45%,transparent)}
  100%{box-shadow:0 0 0 22px color-mix(in srgb,var(--marca) 0%,transparent)}}
.mic.rec{transform:scale(1.16);transition-duration:var(--t-micro);animation:escucha 1.1s var(--ease) infinite}
.heard{margin-top:var(--s4);font-size:14px;color:var(--n60);min-height:20px}
.score-bar{height:2px;background:var(--n10);margin:var(--s3) auto 0;width:70%;overflow:hidden}
.score-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width var(--t-move) var(--ease)}

.syls{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s6);flex-wrap:wrap}
.syl{padding:var(--s3) var(--s4);border-radius:var(--r-s);border:1px solid var(--n20);font-size:18px;font-weight:600}
.syl.sel{border-color:var(--n100)}
.syl.right{border-color:var(--ok);color:var(--ok)}
.syl.wrong{border-color:var(--no);color:var(--no)}
.syl.dim{opacity:.4}

/* ─────────── Juegos ─────────── */
.ws-title{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s4)}
.ws-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;padding:var(--s2);
  border-radius:var(--r-m);border:1px solid var(--n20)}
.ws-cell{aspect-ratio:1;border-radius:var(--r-s);background:var(--n5);
  font-size:14px;font-weight:600;color:var(--n60);display:grid;place-items:center;
  transition:background var(--t-micro),color var(--t-micro)}
.ws-cell.pick{background:var(--n100);color:var(--n0)}
.ws-cell.hit{background:var(--ok);color:var(--on-ok)}
.ws-cell.miss{background:var(--no);color:var(--on-no)}
.ws-list{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}
.ws-word{padding:6px var(--s2);border-radius:var(--r-s);border:1px solid var(--n20);font-size:13.5px;line-height:1.25}
.ws-word b{display:block;font-weight:600}
.ws-word i{font-style:normal;color:var(--n60);font-size:12.5px}
.ws-word.done{border-color:var(--ok);color:var(--ok)}
.ws-word.done b{text-decoration:line-through}

/* Pasillo ancho entre columnas: por ahí van las líneas de unir. */
.match-cols{position:relative;display:flex;gap:var(--s7);margin-top:var(--s5)}
.match-col{flex:1;display:flex;flex-direction:column;gap:var(--s1)}
.match-b{padding:var(--s3) var(--s2);border-radius:var(--r-s);border:1px solid var(--n20);
  font-size:14px;font-weight:500;min-height:46px;transition:border-color var(--t-micro)}
.match-b.sel{border-color:var(--n100)}

.match-b.miss{border-color:var(--no);color:var(--no)}

/* `auto` y no una medida fija: igual que las listas de opciones, las fichas
   bajan hasta el pulgar en vez de amontonarse arriba dejando medio móvil
   vacío. Con dos trozos el hueco era casi toda la pantalla. */
/* Sin `margin-top:auto`, igual que en las opciones: empujaba el hueco de las
   letras al fondo de la pantalla y dejaba media pantalla en blanco entre el
   enunciado y el ejercicio. El aire lo pone el esqueleto. */
.ana-slot{min-height:54px;padding:var(--s2);border-radius:var(--r-m);
  border:1px dashed var(--n20);display:flex;flex-wrap:wrap;gap:var(--s1);align-content:center;justify-content:center}
.ana-bank{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4);justify-content:center}
.ana-tile{width:38px;height:42px;border-radius:var(--r-s);border:1px solid var(--n20);
  font-size:17px;font-weight:600;text-transform:uppercase}
.ana-tile.used{opacity:.18;pointer-events:none}

/* Los trozos de palabra no son letras: llevan de dos a siete caracteres y
   con el ancho fijo del anagrama se salían de la ficha. */
.chunk-bank{gap:var(--s2)}
.chunk-tile{width:auto;min-width:52px;padding:0 var(--s3);height:46px;
  font-size:18px;letter-spacing:.01em;text-transform:none}

/* ─────────── Unir palabras ─────────── */
.coll-out{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.coll-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-s);background:var(--p-sage-soft)}
.coll-row b{font-size:14.5px;font-weight:600;color:var(--p-sage)}
.coll-row span{font-size:13px;color:var(--n60);text-align:right}

/* ─────────── Tarjetones ilustrados ─────────── */
.pic-hero{width:min(232px,58vw);aspect-ratio:1;margin:0 auto var(--s3);
  border-radius:var(--r-m);border:1px solid var(--n20);padding:var(--s5);background:var(--n0)}
.pic-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
/* Sin esto heredan el texto centrado y el alto mínimo de `.opt`, que están
   pensados para una línea de texto y aquí dejan la ilustración diminuta. */
.opt.pic-card{aspect-ratio:1;min-height:0;padding:var(--s4);display:grid;place-items:center}
.opt.pic-card.sel{border-color:var(--n100);background:var(--n5)}
/* La corregida sigue estando `sel`, y `.pic-card.sel` le ganaba en
   especificidad a `.opt.right`: el borde se quedaba negro justo cuando debía
   cantar el acierto. */
.opt.pic-card.right{border-color:var(--ok)}
.opt.pic-card.wrong{border-color:var(--no)}

/* La ilustración trae su propio fondo crema de borde a borde, así que el
   relleno de la tarjeta le sobra: con él quedaría un marco doble. */
.pic-foto{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;user-select:none;-webkit-user-drag:none}
.pic-hero.foto,.opt.pic-card.foto{padding:0;overflow:hidden}
/* Con la foto ocupándolo todo, el borde de un píxel de `.opt.right` casi no
   se ve. El halo interior sí, y no mueve nada de sitio. */
.opt.pic-card.foto.sel{box-shadow:inset 0 0 0 3px var(--n100)}
.opt.pic-card.foto.right{box-shadow:inset 0 0 0 3px var(--ok)}
.opt.pic-card.foto.wrong{box-shadow:inset 0 0 0 3px var(--no)}

/* Una traducción entera ocupa dos renglones: sin aire propio las cuatro
   opciones se leen como un bloque y hay que releerlas. */
.opts.stack .opt{line-height:1.4;padding:var(--s3) var(--s4)}

/* ─────────── Botón de acción ─────────── */
/* Ya no es un «pie»: vive dentro del bloque central, justo debajo de las
   opciones y a la misma distancia de ellas que las opciones del audio. Sin
   relleno propio ni línea superior — el aire lo pone el esqueleto, y el
   acierto o el fallo ya se ven en el color del propio botón y del veredicto,
   que es donde mira el ojo. */
.lesson-foot{flex:0 0 auto}
.verdict{min-height:0;font-size:14px;line-height:1.4;display:flex}
/* Bajo el botón: aparece sin mover nada de lo que hay encima. */
.verdict.show{margin-top:var(--s4);animation:rise var(--t-enter) var(--ease)}
.verdict-txt{flex:1;min-width:0}
.verdict b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.verdict.ok b{color:var(--ok)}
.verdict.no b{color:var(--no)}
.verdict span{color:var(--n60)}
.check{width:100%;padding:var(--s4);border-radius:var(--r-full);background:var(--n100);color:var(--n0);
  font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform var(--t-micro) var(--ease)}
.check:active:not(:disabled){transform:scale(.98)}
.check:disabled{background:var(--n10);color:var(--n40)}
.check.ok{background:var(--ok);color:var(--on-ok)}
.check.no{background:var(--no);color:var(--on-no)}

/* ─────────── Resumen ─────────── */
.sum-wrap{flex:1;overflow-y:auto;padding:var(--s7) var(--pad) calc(var(--safe-b) + var(--s5));display:flex;flex-direction:column}
.sum-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s5) 0 auto}
.sum-cell{border:1px solid var(--n20);border-radius:var(--r-m);padding:var(--s4)}
.sum-cell b{display:block;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.sum-cell span{font-size:13.5px;color:var(--n60);font-weight:500}
.tease{margin:var(--s5) 0 0;padding:var(--s4);border-radius:var(--r-m);border:1px solid var(--n20);
  font-size:14px;line-height:1.45}
.ghost-btn{width:100%;padding:var(--s4);margin-top:var(--s2);color:var(--n60);font-size:14px;font-weight:500}

/* ─────────── Progreso ─────────── */
.legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4);font-size:11.5px;color:var(--n60);font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:5px}
.dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.s-mastered{background:var(--n100)}.s-review{background:var(--n60)}
.s-learning{background:var(--n40)}.s-new{background:var(--n10)}
.unit{margin-bottom:var(--s4)}
.unit-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
.unit-h b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.unit-h span{font-size:11.5px;color:var(--n40);font-weight:500}
.cells{display:flex;flex-wrap:wrap;gap:3px}
.cell{width:100%;max-width:18px;height:18px;border-radius:3px;background:var(--n10);flex:1 1 14px}
.cell.learning{background:var(--n40)}
.cell.review{background:var(--n60)}
.cell.mastered{background:var(--n100)}

.almost{position:relative;display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s4);border-radius:var(--r-m);margin-bottom:var(--s2);border:1px solid var(--n20);
  transition:transform var(--t-micro) var(--ease)}
.almost:active{transform:scale(.99)}
.almost.lead{border-color:var(--n100)}
.almost-ring{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:conic-gradient(var(--n100) calc(var(--p)*1%), var(--n10) 0)}
.almost-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--n0)}
.almost-ring span{position:relative;z-index:1;font-size:13.5px;font-weight:700;letter-spacing:-.02em}
.almost-ring small{font-size:8px}
.almost-body{flex:1;min-width:0}
.almost-body b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.almost-body i{display:block;font-style:normal;font-size:12.5px;color:var(--n60);margin-top:1px;font-weight:500}
.almost-go{font-size:16px;color:var(--n40)}
.empty-hint{font-size:14px;color:var(--n60);line-height:1.5;padding:var(--s4);
  border-radius:var(--r-m);border:1px dashed var(--n20)}

.risk-card{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-m);border:1px solid var(--no-line)}
.risk-top{display:flex;align-items:center;gap:var(--s3)}
.risk-n{flex:0 0 auto;min-width:42px;height:42px;padding:0 var(--s2);border-radius:var(--r-s);
  border:1px solid var(--no);color:var(--no);display:grid;place-items:center;
  font-size:19px;font-weight:700;letter-spacing:-.03em}
.risk-top b{display:block;font-size:14px;font-weight:600;color:var(--no)}
.risk-top i{display:block;font-style:normal;font-size:11.5px;color:var(--n60);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.risk-btn{width:100%;margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-full);
  background:var(--no);color:var(--on-no);font-size:14px;font-weight:600}

.mile{padding:var(--s4);border-radius:var(--r-m);border:1px solid var(--n20);margin-bottom:var(--s2)}
.mile-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.mile-h b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.mile-h span{font-size:11.5px;color:var(--n60);font-weight:500}
.mile-rail{height:2px;background:var(--n10);margin-top:var(--s3);overflow:hidden}
.mile-rail i{display:block;height:100%;background:var(--n100);transition:width var(--t-enter) var(--ease)}
.avatar{width:48px;height:48px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--n100);color:var(--n0);font-size:20px;font-weight:700;letter-spacing:-.02em}
.me-sub{font-size:12.5px;color:var(--n60);margin-top:1px;font-weight:500}
.xp-rail{height:2px;background:var(--n10);margin-top:var(--s2);overflow:hidden;width:150px}
.xp-rail i{display:block;height:100%;background:var(--n100)}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ach{display:flex;gap:var(--s2);align-items:center;padding:var(--s3);border-radius:var(--r-s);border:1px solid var(--n20)}
.ach.off{opacity:.4}
.ach-i{width:26px;height:26px;flex:0 0 auto;border-radius:var(--r-s);display:grid;place-items:center;
  border:1px solid var(--n20);color:var(--n40)}
.ach.on .ach-i{background:var(--n100);color:var(--n0);border-color:var(--n100)}
.ach-i svg{width:13px;height:13px;fill:currentColor;stroke:none}
.ach-t{font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.ach-s{font-size:12.5px;color:var(--n60);margin-top:1px;font-weight:500}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--n10)}
.setting-row label{font-size:14.5px;font-weight:500}
.setting-row select,.setting-in{background:var(--n0);border:1px solid var(--n20);color:var(--n90);
  padding:var(--s2) var(--s3);border-radius:var(--r-s);font-size:13.5px;outline:none;max-width:60%}
.setting-in{user-select:text}
.setting-val{color:var(--n60);font-size:13.5px;text-align:right;font-weight:500}
.setting-val.ok{color:var(--ok)}
.setting-val.no{color:var(--no)}
.setting-note{display:block;font-size:11.5px;color:var(--n40);margin-top:2px;font-weight:500}
.danger-btn{margin-top:var(--s5);width:100%;padding:var(--s3);border-radius:var(--r-full);
  border:1px solid var(--no-line);color:var(--no);font-size:14px;font-weight:600}

/* ─────────── Tabbar ─────────── */
#tabbar{flex:0 0 auto;display:flex;border-top:1px solid var(--n10);padding-bottom:var(--safe-b);background:var(--n0)}
.tab{flex:1;padding:var(--s3) 0 var(--s2);color:var(--n40);display:grid;justify-items:center;gap:3px}
.tab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab span{font-size:11.5px;font-weight:600;letter-spacing:.02em}
/* La pestaña activa toma el color de su sección. Antes todas se ponían
   negras y no se distinguía dónde estabas salvo leyendo. */
.tab.active{color:var(--n100)}
.tab.active[data-screen="home"]{color:var(--acc-home)}
.tab.active[data-screen="route"]{color:var(--acc-route)}
.tab.active[data-screen="practice"]{color:var(--acc-practice)}
.tab.active[data-screen="progress"]{color:var(--acc-progress)}
.tab.active[data-screen="me"]{color:var(--acc-me)}
body.in-lesson #tabbar,body.in-lesson #hud .hud-row{display:none}

/* ═══════════ LA RECOMPENSA — el único sitio con color ═══════════
   Toda la app es acromática. Aquí, y solo aquí, entra el color: por eso
   golpea. Cuanto más raro el premio, más color, y nunca se queda. */
.slot-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center}
.slot-overlay.on{display:flex}
.slot-veil{position:absolute;inset:0;background:var(--veil)}
.slot-box{position:relative;width:min(360px,88vw);padding:var(--s5) var(--s5) var(--s4);
  border-radius:var(--r-m);background:var(--n0);border:1px solid var(--n20);text-align:center;
  animation:rise var(--t-enter) var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot-kicker{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--n60);margin-bottom:var(--s4)}
.reels{position:relative;display:flex;gap:var(--s1);justify-content:center;padding:var(--s2);
  border-radius:var(--r-s);background:var(--n5)}
.reel{width:64px;height:96px;overflow:hidden;border-radius:var(--r-s);background:var(--n0)}
.strip{display:flex;flex-direction:column;will-change:transform}
.cellsym{height:96px;display:grid;place-items:center;flex:0 0 96px}
.cellsym svg{width:32px;height:32px}
.payline{position:absolute;left:var(--s2);right:var(--s2);top:50%;height:1px;background:var(--n10)}
.slot-result{min-height:62px;display:grid;place-content:center;gap:2px;margin-top:var(--s4)}
.slot-amount{font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.035em}
.slot-label{font-size:12.5px;color:var(--n60);font-weight:500}
.slot-mult{font-size:11.5px;color:var(--n60);font-weight:500}
.slot-btn{width:100%;margin-top:var(--s2);padding:var(--s4);border-radius:var(--r-full);
  background:var(--n100);color:var(--n0);font-size:15px;font-weight:600;
  transition:transform var(--t-micro) var(--ease)}
.slot-btn:active{transform:scale(.98)}
.slot-btn:disabled{opacity:.35}
#confetti{position:absolute;inset:0;pointer-events:none;z-index:110}
.sym-gem,.sym-bolt,.sym-star,.sym-hex,.sym-core{fill:var(--n40)}
.sym-ring{fill:none;stroke:var(--n40);stroke-width:2.4}
.sym-hole{fill:var(--n0)}

/* El color del premio. Se aplica por tier y se retira solo. */
.rw{--rw:var(--rw-blue)}
.rw-medium{--rw:var(--rw-blue)}
.rw-big{--rw:var(--rw-violet)}
.rw-mega{--rw:var(--rw-amber)}
.rw-jackpot{--rw:var(--rw-amber)}
.slot-box.rw-on .slot-amount{color:var(--rw)}
.slot-box.rw-on .payline{background:var(--rw)}
.slot-box.rw-on .sym-gem,.slot-box.rw-on .sym-bolt,.slot-box.rw-on .sym-star,
.slot-box.rw-on .sym-hex,.slot-box.rw-on .sym-core{fill:var(--rw)}
.slot-box.rw-on .sym-ring{stroke:var(--rw)}
.slot-box.rw-on{border-color:var(--rw)}
.slot-box.rw-flash{animation:rwflash 400ms var(--ease)}
@keyframes rwflash{0%{border-color:var(--rw)}100%{border-color:var(--n20)}}
/* Jackpot: el único momento en que el color toma la pantalla entera. */
.slot-overlay.rw-flood .slot-veil{background:var(--rw);opacity:.92;
  animation:flood 900ms var(--ease)}
@keyframes flood{from{opacity:0}to{opacity:.92}}

#slot-mini{position:fixed;left:50%;top:calc(var(--safe-t) + 46px);transform:translate(-50%,-8px);
  opacity:0;pointer-events:none;z-index:95;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-full);background:var(--n0);
  border:1px solid var(--n20);transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease)}
#slot-mini.on{opacity:1;transform:translate(-50%,0)}
#slot-mini.rw-on{border-color:var(--rw)}
#slot-mini.rw-on .mini-amount{color:var(--rw)}
.mini-reels{display:flex;gap:3px}
.mini-reel{width:24px;height:30px;overflow:hidden;border-radius:4px;background:var(--n5)}
.mini-strip{display:flex;flex-direction:column;will-change:transform}
.mini-cell{height:30px;flex:0 0 30px;display:grid;place-items:center}
.mini-cell svg{width:19px;height:19px}
.mini-amount{min-width:38px;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--n90);text-align:right}

#toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 76px);transform:translate(-50%,8px);
  background:var(--n100);color:var(--n0);padding:var(--s2) var(--s4);border-radius:var(--r-full);
  font-size:14px;font-weight:500;opacity:0;pointer-events:none;
  transition:all var(--t-move) var(--ease);z-index:200;max-width:88vw}
#toast.on{opacity:1;transform:translate(-50%,0)}

.shake{animation:shake 240ms var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.06s !important}}

/* ═══════════ ARRANQUE ═══════════
   Una pregunta por pantalla, sin ruido. El progreso se lee arriba con la
   forma de la marca: el intervalo llenándose. */
.onb{
  position:fixed;inset:0;z-index:300;background:var(--n0);
  display:flex;flex-direction:column;max-width:520px;margin:0 auto;
}
.onb.hidden{display:none}
.onb-top{
  display:flex;align-items:center;gap:var(--s3);
  padding:calc(var(--safe-t) + var(--s4)) var(--pad) 0;flex:0 0 auto;
}
.onb-back,.onb-skip{flex:0 0 auto;color:var(--n60)}
.onb-back{width:24px;height:24px}
.onb-back svg{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.onb-skip{font-size:14px;font-weight:500}
.onb-steps{flex:1;display:flex;gap:3px;align-items:center}
.onb-steps i{flex:1;height:2px;background:var(--n10);transition:background var(--t-move) var(--ease)}
.onb-steps i.on{background:var(--n100)}

.onb-body{flex:1;overflow-y:auto;padding:var(--s7) var(--pad) var(--s5);display:flex;flex-direction:column}
.onb-foot{flex:0 0 auto;padding:var(--s3) var(--pad) calc(var(--safe-b) + var(--s4))}
.onb-foot .cta{margin-top:0}

.onb-kick{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n60)}
.onb-q{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin-top:var(--s2)}
.onb-sub{font-size:14px;color:var(--n60);line-height:1.5;margin-top:var(--s3)}
.onb-list{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s6)}
.onb-opt{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-m);
  border:1px solid var(--n20);text-align:left;
  transition:border-color var(--t-micro),transform var(--t-micro) var(--ease);
}
.onb-opt:active{transform:scale(.99)}
.onb-opt.sel{border-color:var(--n100)}
.onb-opt.disabled{opacity:.4;pointer-events:none}
.onb-opt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.onb-opt i{display:block;font-style:normal;font-size:12.5px;color:var(--n60);margin-top:1px;font-weight:500}
.onb-opt .tick{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid var(--n20);
  display:grid;place-items:center;margin-left:auto;
}
.onb-opt.sel .tick{background:var(--n100);border-color:var(--n100)}
.onb-opt.sel .tick::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--n0)}
.onb-opt .flag{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-s);
  border:1px solid var(--n20);display:grid;place-items:center;font-size:12.5px;font-weight:700}

/* Resultado del test */
.onb-result{margin-top:var(--s6);border:1px solid var(--n20);border-radius:var(--r-m);padding:var(--s5)}
.onb-level{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.04em}
.onb-level-cap{font-size:14px;color:var(--n60);margin-top:var(--s2);font-weight:500}
.onb-skills{margin-top:var(--s5);display:grid;gap:var(--s3)}
.onb-skill{display:grid;gap:var(--s1)}
.onb-skill-h{display:flex;justify-content:space-between;font-size:12.5px;font-weight:500}
.onb-skill-h b{font-weight:600}
.onb-skill-h span{color:var(--n60)}
.onb-skill-rail{height:2px;background:var(--n10);overflow:hidden}
.onb-skill-rail i{display:block;height:100%;background:var(--n100);transition:width var(--t-enter) var(--ease)}
.onb-seeded{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--n10);
  font-size:14px;color:var(--n60);line-height:1.5}
.onb-seeded b{color:var(--n90);font-weight:600}

/* Pregunta del test dentro del arranque */
.onb-test-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s5)}
.onb-test-top b{font-size:14px;font-weight:600}
.onb-test-top span{font-size:13.5px;color:var(--n60);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

body.onb-open #app{display:none}

/* ═══════════ ACCESO ═══════════
   "Épica" dentro del sistema: no es color ni brillo, es escala. Una marca
   que se dibuja sola, una frase enorme y aire. Nada más. */
.gate{
  position:fixed;inset:0;z-index:400;background:var(--n0);
  display:flex;flex-direction:column;max-width:520px;margin:0 auto;overflow-y:auto;
}
.gate.hidden{display:none}
body.gate-open #app,body.gate-open #onb{display:none}

/* La portada va en PAPEL, no en negro.
   El logotipo de BlaBlaLearn es la cara del mapache con letras violeta. Poner
   la portada en crema permite usar el original y además es lo primero que ve
   alguien de la app: si la app es cálida, la puerta también.

   El resplandor verde de detrás no es decoración: es el mismo tono que
   aparece cuando se consigue una racha. */
/* La portada va en papel SIEMPRE, también con el tema oscuro. No es un
   descuido: el logotipo bueno tiene las letras oscuras y la onda verde, y en
   oscuro no hay salida limpia —con `wordmark.svg` desaparecen las letras y con
   `wordmark-neg.svg` desaparece el verde, que es lo que identifica la marca—.
   Fijando el papel se usa el original y la puerta queda igual de cálida a
   cualquier hora. Las tintas se fijan aquí dentro por lo mismo: si heredaran
   `--n100` del tema oscuro, el titular saldría casi blanco sobre crema. */
.gate-hero{
  position:relative;flex:0 0 auto;overflow:hidden;
  padding:calc(var(--safe-t) + var(--s8)) var(--pad) var(--s7);
  background:var(--paper);
  --n100:#0B0B0C; --n90:#1F1F23; --n60:#6E6E77;
  color:var(--n90);
}
/* Aquí había un resplandor radial. Se ha ido por dos motivos: era un degradado,
   que el sistema prohíbe (§0), y no comunicaba nada (§0: «si no comunica algo,
   se borra»). No lo sustituye nada: el vacío es material de construcción, y la
   forma de la marca entra abajo, en el separador, donde se lee entera. Se probó
   ponerla también aquí de fondo y el recorte del hero la partía —parecía
   suciedad, no marca—. */

/* El separador de sección (§7). Se llena trazo a trazo con 120 ms entre cada
   uno —el «cargando» que describe el sistema—, y es de donde sale la energía
   que al color no se le permite dar. */
.gate-iv-sep{margin:0 0 var(--s5)}
.gate-iv-sep i{animation:ivpop var(--t-move) var(--ease) both}
.gate-iv-sep i:nth-child(1){animation-delay:340ms}
.gate-iv-sep i:nth-child(2){animation-delay:460ms}
.gate-iv-sep i:nth-child(3){animation-delay:580ms}
.gate-iv-sep i:nth-child(4){animation-delay:700ms}
.gate-iv-sep i:nth-child(5){animation-delay:820ms}
@keyframes ivpop{
  from{opacity:0;transform:translateY(6px);background:var(--n20)}
  to{opacity:1;transform:none;background:var(--n100)}
}
/* La marca suelta —la «g»— va con `currentColor` y hereda el color de donde
   se ponga. El logotipo completo tiene su propio fichero por versión, porque
   el original lleva las letras y la onda en colores distintos. */
.logo{fill:currentColor;display:block}
.gate-logo{position:relative;width:min(276px,74%);height:auto;display:block;
  margin-bottom:var(--s6);animation:gateup 460ms var(--ease) 60ms both}
.gate-claim{
  position:relative;
  font-size:44px;line-height:1.02;font-weight:700;letter-spacing:-.04em;
  margin:var(--s3) 0 0;color:var(--n100);
  animation:gateup 420ms var(--ease) 200ms both;
}
/* La segunda línea, en el verde de marca: parte el titular en dos y lo saca
   del blanco y negro sin añadir ni un elemento más. */
.gate-claim em{font-style:normal;color:var(--marca)}
.gate-sub{position:relative;font-size:14.5px;line-height:1.5;color:var(--n60);
  margin:var(--s4) 0 0;max-width:30ch;
  animation:gateup 420ms var(--ease) 320ms both}
@keyframes gateup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.gate-panel{flex:1 1 auto;padding:var(--s6) var(--pad) calc(var(--safe-b) + var(--s6))}
.gate-tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--n10);margin-bottom:var(--s6)}
.gate-tab{padding:0 0 var(--s3);font-size:15px;font-weight:600;color:var(--n40);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-micro)}
.gate-tab.active{color:var(--n100);border-bottom-color:var(--marca)}

/* Accesos rápidos. Borde y nada más: el sistema construye jerarquía con línea
   y espacio, nunca con relleno ni sombra (§5). Los marcos van en monocromo
   porque la app es acromática (§1). */
.gate-social{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.gate-oauth{
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  width:100%;padding:var(--s4);border-radius:var(--r-full);
  border:1px solid var(--n20);background:var(--n0);color:var(--n90);
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:border-color var(--t-micro),transform var(--t-micro) var(--ease);
}
.gate-oauth svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
.gate-oauth:hover{border-color:var(--n40)}
.gate-oauth:active{transform:scale(.98)}
/* Face ID va el primero y en verde: si está, es la forma de entrar. */
.gate-bio{background:var(--marca);border-color:transparent;color:#fff}
.gate-bio svg{fill:none;stroke:currentColor;width:22px;height:22px}

/* La «o» parte la pantalla en las dos maneras de entrar. La línea es el mismo
   1px de siempre; el hueco lo abre el fondo, no un color nuevo. */
.gate-or{
  display:flex;align-items:center;gap:var(--s3);
  margin:0 0 var(--s5);color:var(--n40);font-size:13px;font-weight:500;
}
.gate-or::before,.gate-or::after{content:'';flex:1;height:1px;background:var(--n10)}

.gate-form{display:grid;gap:var(--s4)}
.gate-field{display:grid;gap:6px}
.gate-field.hidden{display:none}
.gate-field span{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n60)}
.gate-field input{
  width:100%;padding:var(--s4);border-radius:var(--r-m);background:var(--n0);
  border:1px solid var(--n20);color:var(--n90);font:inherit;font-size:16px;
  outline:none;user-select:text;transition:border-color var(--t-micro);
}
.gate-field input:focus{border-color:var(--marca)}
.gate-error{font-size:14px;color:var(--no);line-height:1.4}
.gate-info{font-size:14.5px;color:var(--n60);line-height:1.5;margin:0}
.gate-info b{color:var(--n100);word-break:break-all}
#in-codigo{letter-spacing:.3em;font-size:20px;font-weight:600}
#in-codigo::placeholder{letter-spacing:normal;font-size:16px;font-weight:400}
.gate-form .cta{margin-top:var(--s2);background:var(--marca);color:var(--n0)}
.gate-legal{font-size:13.5px;color:var(--n40);line-height:1.5;margin:var(--s5) 0 0}

/* «¿Has olvidado la contraseña?». Va como enlace y no como botón: es una
   salida, no una acción principal, y competir con el CTA sería un error. */
.gate-link{display:block;width:100%;margin-top:var(--s3);padding:var(--s2);
  font:inherit;font-size:14px;color:var(--n60);text-align:center;
  text-decoration:underline;text-underline-offset:3px}
.gate-link:hover{color:var(--n90)}

/* El código de recuperación. Ocupa el sitio del formulario a propósito: es la
   única vez que se puede ver y no debe competir con nada. */
/* Activar Face ID. Pantalla entera, como la puerta: es una decisión de
   seguridad y merece su sitio, no un aviso de esquina. */
.bio-offer{position:fixed;inset:0;z-index:450;background:var(--pagina,var(--n0));
  display:flex;flex-direction:column;justify-content:space-between;max-width:520px;margin:0 auto;
  padding:calc(var(--safe-t) + var(--s8)) var(--pad) calc(env(safe-area-inset-bottom,0px) + var(--s5));
  opacity:0;transform:translateY(12px);transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease)}
.bio-offer.on{opacity:1;transform:none}
.bio-offer.hidden{display:none}
.bo-body{display:grid;gap:var(--s4);justify-items:start}
.bo-glyph{width:112px;height:112px;border-radius:32px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--marca) 12%,transparent);color:var(--marca);margin-bottom:var(--s3)}
.bo-glyph svg{width:72px;height:72px;stroke:currentColor}
.bo-frame,.bo-face,.bo-check{stroke-dasharray:60;stroke-dashoffset:0}
.bio-offer.on .bo-frame{animation:bodraw 700ms var(--ease) both}
.bio-offer.on .bo-face{animation:bodraw 500ms var(--ease) 350ms both}
.bo-check{stroke-dashoffset:60;opacity:0}
.bo-glyph.scan .bo-face{animation:boscan 1.1s ease-in-out infinite}
.bo-glyph.done{background:var(--marca);color:#fff}
.bo-glyph.done .bo-face{opacity:0;transition:opacity var(--t-micro)}
.bo-glyph.done .bo-check{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 420ms var(--ease) 80ms}
@keyframes bodraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes boscan{50%{opacity:.25}}
.bo-h{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--n100)}
.bo-p{font-size:16px;line-height:1.5;color:var(--n60)}
.bo-p b{color:var(--n100)}
.bo-list{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s2);padding:0}
.bo-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.45;color:var(--n60)}
.bo-list li b{color:var(--n100);font-weight:600}
.bo-list li::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:8px;
  border-left:2px solid var(--marca);border-bottom:2px solid var(--marca);transform:rotate(-45deg)}
.bo-list.hidden{display:none}
.bo-err{min-height:1.2em;font-size:14px;color:var(--no)}
.bo-foot .cta{margin-top:0}

.gate-codigo{display:grid;gap:var(--s3);justify-items:start}
.gc-h{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--n100)}
.gc-p{font-size:14.5px;line-height:1.5;color:var(--n60)}
.gc-code{
  width:100%;padding:var(--s4);border-radius:var(--r-m);
  background:var(--n5);border:1px solid var(--n20);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;font-weight:600;letter-spacing:.12em;text-align:center;
  color:var(--n100);user-select:all;
}
.gc-ok{display:flex;align-items:center;gap:var(--s3);font-size:14.5px;
  color:var(--n90);margin-top:var(--s2)}
.gc-ok input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--marca)}
.gate-codigo .cta{width:100%;margin-top:var(--s2)}
.gate-codigo .cta:disabled{opacity:.4}

/* ═══════════ RUTA COMO TEMARIO ═══════════
   Un círculo con un número no enseña nada. Aquí cada lección dice qué es,
   qué vas a poder hacer al terminarla y en qué punto del camino estás. */
.lv-head{margin:var(--s7) 0 var(--s4)}
.lv-head:first-child{margin-top:var(--s2)}
.lv-badge{display:inline-flex;align-items:baseline;gap:var(--s2)}
.lv-code{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.04em}
.lv-name{font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n60)}
.lv-claim{font-size:15px;font-weight:600;margin-top:var(--s3)}
.lv-can{font-size:13.5px;color:var(--n60);line-height:1.5;margin-top:var(--s1)}
.lv-meta{display:flex;gap:var(--s4);margin-top:var(--s3);font-size:13.5px;color:var(--n40);font-weight:500}
.lv-rule{height:1px;background:var(--n100);margin-top:var(--s4)}

.blk{margin-top:var(--s5)}
.blk-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.blk-t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.blk-n{font-size:11.5px;color:var(--n40);font-weight:600;white-space:nowrap}
.blk-why{font-size:12.5px;color:var(--n60);line-height:1.5;margin-top:var(--s1)}
.blk-list{margin-top:var(--s3);border:1px solid var(--n20);border-radius:var(--r-m);overflow:hidden}

/* La fila se RELLENA de verde según lo que llevas dominado de esa lección.
   Un «43%» al final de la línea es un dato que hay que leer y comparar; una
   barra que ocupa cuatro décimos de la fila se entiende sin leer nada, y de
   paso deja ver de un vistazo cuáles del bloque están a medias.
   El verde es el apagado (--ok-bg); el fuerte se reserva al número. */
.les{display:flex;align-items:center;gap:var(--s3);width:100%;
  text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--n10);
  background:linear-gradient(to right, var(--ok-bg) var(--p,0%), transparent var(--p,0%));
  transition:background-color var(--t-micro),--p var(--t-enter) var(--ease)}
.les:last-child{border-bottom:0}
/* `background-color` y no `background`: el atajo borraría el relleno. Como
   el degradado acaba en `transparent`, el gris del toque se ve por debajo
   justo en el tramo que aún no está hecho. */
.les:active{background-color:var(--n5)}
.les-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--n20);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--n60);
  transition:border-color var(--t-move),color var(--t-move),background var(--t-move)}
/* Empezada: el número toma el verde fuerte y el borde se tiñe. Terminada:
   el círculo entero en verde, que es el «check» del que hablabas. */
.les.viva .les-n{border-color:var(--ok-line);color:var(--ok)}
.les.done .les-n{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.les.current .les-n{border-color:var(--n100);color:var(--n100);border-width:2px}
.les.current.viva .les-n{border-color:var(--ok);color:var(--ok)}
.les.locked{opacity:.45}
.les-b{flex:1;min-width:0}
.les-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.les-c{font-size:13.5px;color:var(--n60);margin-top:1px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.les-r{flex:0 0 auto;font-size:12.5px;color:var(--n40);font-weight:600;
  transition:color var(--t-move)}
.les.viva .les-r{color:var(--ok)}
.les-soon{flex:0 0 auto;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n40);border:1px solid var(--n20);
  border-radius:var(--r-full);padding:2px var(--s2)}

/* ═══════════ MAPA DE LA LECCIÓN ═══════════ */
.map-scroll{flex:1;overflow-y:auto;padding:var(--s5) var(--pad) var(--s6)}
.map-foot{flex:0 0 auto;padding:var(--s3) var(--pad) calc(var(--safe-b) + var(--s4));
  border-top:1px solid var(--n10)}
.map-foot .cta{margin-top:0}
.map-crumb{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n60)}
.map-t{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.035em;margin-top:var(--s2)}
.map-can{font-size:16px;line-height:1.45;margin-top:var(--s4);padding-left:var(--s4);
  border-left:2px solid var(--n100)}
.map-sec{margin-top:var(--s6)}
.map-sec-h{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--n60);margin-bottom:var(--s3)}
.map-points{display:grid;gap:var(--s3)}
.map-point{display:flex;gap:var(--s3);font-size:14.5px;line-height:1.45}

/* Las palabras que faltan. Van como celdas y no como lista corrida: son datos
   —inglés y español—, no prosa, y en dos columnas se leen de un vistazo. */
.map-pend-n{float:right;font-style:normal;letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;color:var(--n40)}
.map-pend{display:grid;gap:2px;margin-top:var(--s2)}
.map-pend-w{display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);border-radius:var(--r-s);background:var(--n5)}
.map-pend-w b{font-size:15px;font-weight:600;color:var(--n90)}
.map-pend-w span{font-size:14px;color:var(--n60);text-align:right}
.map-pend-mas{margin-top:var(--s3);font-size:13.5px;color:var(--n40)}
.map-pend-fin{font-size:14.5px;line-height:1.45;color:var(--n60)}
.map-point .interval{height:8px;flex:0 0 auto;margin-top:6px}
.map-point .interval i{width:2px;background:var(--n100)}
.map-why{font-size:14px;color:var(--n60);line-height:1.55}
.map-trap{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--no-line);
  border-radius:var(--r-m);font-size:13.5px;line-height:1.5}
.map-trap b{display:block;color:var(--no);font-size:12.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--s1)}
.map-parts{display:grid;gap:var(--s2)}
.map-part{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--n20);border-radius:var(--r-s)}
.map-part-n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--n100);
  color:var(--n0);display:grid;place-items:center;font-size:11.5px;font-weight:700}
.map-part b{font-size:13.5px;font-weight:600;display:block}
.map-part i{font-style:normal;font-size:11.5px;color:var(--n60);display:block;margin-top:1px}
.map-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.map-stat{border:1px solid var(--n20);border-radius:var(--r-m);padding:var(--s4)}
.map-stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em}
.map-stat span{font-size:13.5px;color:var(--n60);font-weight:500}
.map-soon{margin-top:var(--s5);padding:var(--s4);border:1px dashed var(--n20);
  border-radius:var(--r-m);font-size:13.5px;color:var(--n60);line-height:1.5}

/* Casillas del arranque: verde al completarse. El verde ya significa
   "bien" en todo el sistema, así que aquí informa, no decora. */
.onb-steps i.done{background:var(--ok)}
.onb-steps i.just{animation:stepin 320ms var(--ease)}
@keyframes stepin{from{transform:scaleX(.2);opacity:.4}to{transform:scaleX(1);opacity:1}}

/* Cálculo del nivel */
.calc{margin-top:var(--s7)}
.calc-mark{margin-bottom:var(--s6)}
.calc-mark .interval i{background:var(--n20)}
.calc-mark .interval i.f{background:var(--ok)}
.calc-lines{display:grid;gap:var(--s3)}
.calc-line{display:flex;align-items:center;gap:var(--s3);font-size:14px;color:var(--n60);
  opacity:0;transform:translateY(4px);transition:opacity var(--t-move),transform var(--t-move) var(--ease)}
.calc-line.in{opacity:1;transform:none}
.calc-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}

/* Por qué está mal lo que elegiste */
.v-mine{display:block;color:var(--no) !important;margin-bottom:2px}

/* Un nivel cada vez */
.lv-nav{display:flex;gap:var(--s2);margin-bottom:var(--s5)}
.lv-pill{padding:var(--s2) var(--s4);border-radius:var(--r-full);border:1px solid var(--n20);
  font-size:14px;font-weight:600;color:var(--n60)}
.lv-pill.on{background:var(--n100);border-color:var(--n100);color:var(--n0)}
.lv-bar{height:2px;background:var(--n10);margin-top:var(--s4);overflow:hidden}
.lv-bar i{display:block;height:100%;background:var(--n100);transition:width var(--t-enter) var(--ease)}
.lv-next{margin-top:var(--s7);padding:var(--s5);border:1px solid var(--n20);border-radius:var(--r-m)}
.lv-next.locked{border-style:dashed;opacity:.75}
.lv-next-h{display:flex;align-items:baseline;gap:var(--s3)}
.lv-next-code{font-size:26px;font-weight:700;letter-spacing:-.03em}
.lv-next-name{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--n60)}
.lv-next-can{font-size:13.5px;color:var(--n60);line-height:1.5;margin-top:var(--s2)}
.lv-next-req{font-size:14px;margin-top:var(--s3)}
.lv-next-req b{font-weight:600}

/* Vista lista / mapa */
.view-switch{display:flex;border:1px solid var(--n20);border-radius:var(--r-full);overflow:hidden}
.view-btn{padding:6px var(--s3);font-size:13.5px;font-weight:600;color:var(--n60)}
.view-btn.active{background:var(--n100);color:var(--n0)}
.route-sub{font-size:14px;color:var(--n60);margin:calc(var(--s3) * -1) 0 var(--s4);font-weight:500}

/* El mapa */
#route-canvas{position:relative;margin-top:var(--s5)}
.mp-svg{position:absolute;inset:0;width:100%;pointer-events:none}
.mp-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* El camino: dos trazos superpuestos. El de abajo está siempre entero (si
   no, con cero lecciones hechas no se ve ningún camino); el de arriba se
   recorta con dasharray y marca lo andado. */
.mp-road{stroke:var(--n20);stroke-width:2;stroke-dasharray:1 7}
/* Lo andado va en verde: es el mismo verde del acierto, así que el mapa
   cuenta lo mismo que la sesión sin necesitar otra clave de color. Cada
   tramo se pinta por separado, de modo que un hueco sin hacer se ve como
   un hueco y no queda tapado por un trazo continuo. */
.mp-seg{stroke:transparent;stroke-width:2;fill:none;
  transition:stroke var(--t-enter) var(--ease)}
.mp-seg.on{stroke:var(--ok)}

/* Paisaje. Un pixel de trazo en el gris más claro: se ve si lo miras y
   desaparece si lees. Nunca debe competir con los nodos. */
.mp-scene{pointer-events:none}

/* Árboles planos. La copa es una silueta MACIZA, no un contorno: es lo que
   les da el aire de lámina de vegetación. El tronco va por encima y asoma
   por arriba, con ramas curvas, igual que en la referencia — pero toda la
   diferencia la hacen la forma y el tono, nunca el color. */
/* Los selectores llevan `.mp-svg` delante a propósito: `.mp-svg path`
   declara `fill:none` y con una sola clase ganaba por especificidad, así
   que todo lo dibujado con <path> (gota, pino, hierba, arbustos) salía sin
   relleno y solo se veían los árboles hechos con <circle> y <rect>. */
.mp-svg .mp-crown{fill:var(--n10);stroke:none}
.mp-svg .mp-leaf{fill:var(--n5);stroke:none}
.mp-svg .mp-trunk{fill:none;stroke:var(--n40);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.mp-svg .mp-grass{fill:var(--n20);stroke:none}
.mp-svg .mp-bush{fill:var(--n40);stroke:none}
.mp-svg .mp-stem{fill:none;stroke:var(--n40);stroke-width:1.1;stroke-linecap:round}
.mp-svg .mp-petal{fill:var(--n20);stroke:none}
.mp-svg .mp-pollen{fill:var(--n40);stroke:none}

/* ── El paisaje que reverdece ──────────────────────────────────────────
   DESIGN.md dice que el color no persiste. Esta es la excepción y está
   razonada: aquí el color no decora, es el registro de lo que ya has
   hecho. Vive en el fondo, nunca sobre texto, y solo aparece detrás de
   ti — delante el mapa sigue en gris, así que la frontera entre lo hecho
   y lo que falta se ve de un vistazo, sin leer un número.

   Los verdes salen del MISMO verde del acierto y las flores usan los tres
   colores de recompensa que ya existen: no se inventa paleta nueva. */
.mp-plant *{transition:fill var(--t-enter) var(--ease),stroke var(--t-enter) var(--ease)}

.mp-plant.alive .mp-crown{fill:color-mix(in srgb, var(--ok) 26%, var(--n0))}
.mp-plant.alive .mp-leaf{fill:color-mix(in srgb, var(--ok) 12%, var(--n0))}
.mp-plant.alive .mp-trunk{stroke:#8A6A4F}
.mp-plant.alive .mp-grass{fill:color-mix(in srgb, var(--ok) 34%, var(--n0))}
.mp-plant.alive .mp-bush{fill:color-mix(in srgb, var(--ok) 52%, var(--n0))}
.mp-plant.alive .mp-stem{stroke:color-mix(in srgb, var(--ok) 46%, var(--n0))}

/* Tres tonos de copa para que un bosque entero no salga de un solo verde. */
.mp-plant.alive.t2 .mp-crown{fill:color-mix(in srgb, var(--ok) 38%, var(--n0))}
.mp-plant.alive.t3 .mp-crown{fill:color-mix(in srgb, var(--ok) 17%, var(--n0))}

/* Las flores toman los colores de premio, uno por tono. */
.mp-plant.alive.t1 .mp-petal{fill:color-mix(in srgb, var(--rw-amber) 62%, var(--n0))}
.mp-plant.alive.t2 .mp-petal{fill:color-mix(in srgb, var(--rw-violet) 46%, var(--n0))}
.mp-plant.alive.t3 .mp-petal{fill:color-mix(in srgb, var(--rw-blue) 44%, var(--n0))}
.mp-plant.alive .mp-pollen{fill:var(--rw-amber)}

/* El nodo se llena DE ABAJO ARRIBA, como un vaso, según lo dominado de esa
   lección. Va en el degradado del propio fondo y no en un hijo: el círculo
   ya recorta por el radio, y así no estorba al aro de «estás aquí». */
.mp-node{position:absolute;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid var(--n20);color:var(--n60);
  background:linear-gradient(to top, var(--ok-bg) var(--p,0%), var(--n0) var(--p,0%));
  font-size:14px;font-weight:600;display:grid;place-items:center;z-index:2;
  transition:transform var(--t-micro) var(--ease),--p var(--t-enter) var(--ease),
             border-color var(--t-move),color var(--t-move)}
.mp-node:active{transform:translate(-50%,-50%) scale(.92)}
.mp-node.viva{border-color:var(--ok-line);color:var(--ok)}
.mp-node.done{background:var(--ok);color:var(--on-ok);border-color:var(--ok)}
/* La actual NO se pinta de verde: marca DÓNDE ESTÁS, no algo conseguido.
   Pero tampoco puede ir en negro macizo como antes, porque tapaba justo el
   relleno de la única lección cuyo progreso se está moviendo. Se distingue
   por el aro doble, que no tiene ningún otro nodo, y por el trazo grueso. */
.mp-node.current{border-color:var(--n100);border-width:2px;color:var(--n100)}
.mp-node.current::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--n100)}
.mp-node.locked{opacity:.4}
.mp-label{position:absolute;transform:translateX(-50%);width:132px;text-align:center;
  font-size:11.5px;font-weight:600;line-height:1.25;z-index:1;pointer-events:none}
.mp-sep{position:absolute;left:0;right:0;display:flex;align-items:center;gap:var(--s3);z-index:1;pointer-events:none}
.mp-sep::before,.mp-sep::after{content:'';flex:1;height:1px;background:var(--n10)}
.mp-sep span{flex:0 0 auto;font-size:13.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n60);padding:0 var(--s2)}

/* ── Producción oral ─────────────────────────────────────────────────
   Decir la frase, decirla encima del audio, escribirla al oírla o
   contestar tú. Es la única parte de la app donde el usuario produce,
   así que el objetivo visual es uno: que se vea DÓNDE ha fallado. */
.q-sub-note{font-size:14px;color:var(--n60);margin-top:var(--s2);line-height:1.4}
.q-trans{font-size:14px;color:var(--n60);margin-top:var(--s3)}
.q-prompt.say-es{font-size:24px;color:var(--n90);font-weight:600}
.sent-target{font-size:24px;line-height:1.25;margin-top:var(--s4)}

.sent-slot{min-height:8px;margin-top:var(--s5)}
.sent{font-size:20px;line-height:1.5;font-weight:600;letter-spacing:-.01em}
.sent .w-ok{color:var(--ok)}
.sent .w-no{color:var(--no);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:4px}

/* Las formas débiles: el motivo real de que un español suene a español. */
.weak-row{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.weak-t{width:100%;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n60);margin-bottom:var(--s1)}
.weak-chip{font-size:14px;padding:4px 10px;border:1px solid var(--n20);
  border-radius:var(--r-full);color:var(--n90)}
.weak-chip i{color:var(--n60);font-style:normal}

.mic-block{text-align:center;margin-top:var(--s5)}
.say-row.big .say-btn{padding:var(--s3) var(--s5)}

.respond-hint{margin-top:var(--s5);font-size:18px;color:var(--n60);
  border-left:2px solid var(--n20);padding-left:var(--s3)}
.respond-out{text-align:left}
.ro-ok{color:var(--ok);font-weight:700;font-size:18px}
.ro-no{color:var(--no);font-weight:700;font-size:18px}
.ro-list{margin-top:var(--s3);font-size:14px;color:var(--n60);line-height:1.6}
.ro-list b{color:var(--n90);font-weight:600}

/* Los ejercicios de habla llevan poco contenido y mucho micrófono: sin
   centrar verticalmente queda medio pantallazo vacío bajo el botón. */
.speak-wrap{width:100%}

/* Conversación por turnos. La frase del otro va en un bloque con línea a la
   izquierda: es alguien hablándote, no un enunciado de ejercicio. */
.dlg-scene{font-size:14px;color:var(--n60);line-height:1.5;margin-bottom:var(--s4)}
.dlg-bubble{border-left:2px solid var(--n100);padding:var(--s1) 0 var(--s1) var(--s4);
  font-size:20px;line-height:1.3;font-weight:600}
.dlg-es{font-size:14px;color:var(--n60);font-weight:400;margin-top:var(--s2)}
.dlg-task{margin-top:var(--s5);font-size:16px;color:var(--n90)}

/* Con paisaje detrás, el texto de las etiquetas cruzaba las líneas de las
   montañas. Un fondo del color del papel bajo cada línea lo separa sin
   recurrir a sombras. */
.mp-label span{background:var(--bg);padding:1px 5px;border-radius:var(--r-s);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── Inicio: qué hacer ahora ───────────────────────────────────────────
   Bajo el resumen del día quedaba media pantalla vacía. Estos tres bloques
   responden a las tres preguntas que se hacen ahí: por dónde sigo, qué
   practico si no me apetece la ruta, y quién más está en esto. */
.next-card{display:block;width:100%;text-align:left;margin-top:var(--s5);
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface)}
.next-card:active{background:var(--surface-2)}
.nc-kick{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.nc-t{display:block;margin-top:var(--s2);font-size:18px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.nc-s{display:block;margin-top:2px;font-size:14px;color:var(--ink-2)}

/* Separador en flujo normal. `.zone-sep` no sirve aquí: es absolute porque
   se posiciona con `top` sobre el lienzo del mapa, y en una columna normal
   se sale del flujo y acaba flotando encima de la barra inferior. */
.row-sep{display:flex;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s3)}
.row-sep::before,.row-sep::after{content:'';flex:1;height:1px;background:var(--n10)}
.row-sep span{flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

/* Misma rejilla que en Práctica, con las mismas medidas. */
.quick-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

/* La liga. Sin medallas ni podio: una tabla ordenada por XP, con tu fila
   marcada. La comparación ya motiva por sí sola; adornarla la abarata. */
.friends{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.fr-empty{padding:var(--s4);font-size:14px;color:var(--ink-2);line-height:1.5}
.fr-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);font-size:15px}
.fr-row:last-child{border-bottom:0}
.fr-row.me{background:var(--surface-2)}
.fr-xp{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.fr-x{width:24px;color:var(--ink-3);font-size:18px;line-height:1}
.fr-foot{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--s4);
  border-top:1px solid var(--line)}
.fr-btn{flex:1;padding:var(--s2) var(--s3);border:1px solid var(--n100);
  border-radius:var(--r-full);font-size:14px;font-weight:600;
  background:var(--n100);color:var(--n0)}
.fr-code{padding:var(--s2) var(--s3);border:1px solid var(--line);
  border-radius:var(--r-full);font-size:13.5px;color:var(--ink-2)}
.fr-code b{color:var(--ink);letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* ── Liga y rango ──────────────────────────────────────────────────────
   El rango es lo primero que se mira, así que va arriba y grande. Debajo,
   el aviso de si esta semana lo conservas: sin él, el rango parecería un
   adorno en vez de algo que hay que sostener cada semana. */
.rank-badge{display:flex;flex-direction:column;gap:2px;padding:var(--s4);
  border-bottom:1px solid var(--line)}
.rk-n{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.rk-s{font-size:13px;color:var(--ink-2)}
.rk-s.ok{color:var(--ok)}

.fr-tabs{display:flex;gap:var(--s1);padding:var(--s3) var(--s4) 0}
.fr-tab{flex:1;padding:var(--s2) 0;font-size:14px;font-weight:600;
  color:var(--ink-3);border-bottom:2px solid transparent}
.fr-tab.on{color:var(--ink);border-bottom-color:var(--ink)}

.fr-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line)}
.fr-row:last-child{border-bottom:0}
.fr-row.me{background:var(--surface-2)}
.fr-pos{width:20px;color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums}
.fr-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink-2)}
.fr-av img{width:100%;height:100%;object-fit:cover}
.fr-who{flex:1;min-width:0}
.fr-who b{display:block;font-size:15px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-who i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3)}
.fr-xp{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
.fr-x{width:28px;color:var(--ink-3);font-size:20px;line-height:1}

/* ── El color, donde se mira ────────────────────────────────────────────
   Subir la saturación no bastaba: el color solo estaba en iconos de 38px.
   Estas son las superficies grandes, que son las que dan el tono general
   a la pantalla. El texto sigue en neutro: el color acompaña, no se lee. */

/* El arco del día, en el acento de Inicio. */
.arc-fg{stroke:var(--p-sage)}
.arc-num{color:var(--ink)}

/* Cada tarjeta de dato con su tono, en vez de cuatro cajas iguales. */
.grid-2 .mini-card:nth-child(1){background:var(--p-sage-soft);
  border-color:color-mix(in srgb,var(--p-sage) 22%,transparent)}
.grid-2 .mini-card:nth-child(2){background:var(--p-blue-soft);
  border-color:color-mix(in srgb,var(--p-blue) 22%,transparent)}
.grid-2 .mini-card:nth-child(3){background:var(--p-teal-soft);
  border-color:color-mix(in srgb,var(--p-teal) 22%,transparent)}
.grid-2 .mini-card:nth-child(4){background:var(--p-sand-soft);
  border-color:color-mix(in srgb,var(--p-sand) 22%,transparent)}

/* La semana: los días cumplidos en verde de acierto, no en negro. */
.wk-bar i{background:color-mix(in srgb,var(--p-sage) 45%,var(--n0))}
.wk-bar.met i{background:var(--p-sage)}

/* La tarjeta de «lo siguiente» lleva el tono de la ruta. */
.next-card{background:var(--p-blue-soft);
  border-color:color-mix(in srgb,var(--p-blue) 25%,transparent)}
.nc-kick{color:color-mix(in srgb,var(--p-blue) 70%,var(--ink-2))}

/* Amigos: cabecera de rango con su tono. */
.rank-badge{background:var(--p-plum-soft);
  border-bottom-color:color-mix(in srgb,var(--p-plum) 22%,transparent)}
.rk-n{color:color-mix(in srgb,var(--p-plum) 55%,var(--ink))}
.fr-tab.on{color:var(--p-plum);border-bottom-color:var(--p-plum)}
.fr-xp{color:color-mix(in srgb,var(--p-plum) 45%,var(--ink))}

/* Ruta: el nivel actual y las cabeceras de bloque toman el azul. */
.lv-code{color:var(--p-blue)}
.lv-pill.on{background:var(--p-blue);border-color:var(--p-blue);color:var(--n0)}

/* Práctica: el separador de zona con tono. */
.row-sep span{color:var(--ink-3)}
.row-sep::before,.row-sep::after{background:var(--n10)}

/* ── Diálogo propio ────────────────────────────────────────────────────
   Sustituye a prompt(): aquel enseña el dominio del servidor, no se puede
   estilar y saca al usuario de la app durante un segundo. */
.modal-veil{position:fixed;inset:0;background:var(--veil);z-index:80;
  opacity:0;transition:opacity var(--t-move) var(--ease)}
.modal-veil.on{opacity:1}
.modal{position:fixed;z-index:81;left:50%;top:50%;width:min(360px,calc(100vw - 40px));
  transform:translate(-50%,-46%) scale(.97);opacity:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5);transition:opacity var(--t-move) var(--ease),
  transform var(--t-move) var(--ease)}
.modal.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal.hidden,.modal-veil.hidden{display:none}
.modal h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.modal-p{margin-top:var(--s2);font-size:14px;line-height:1.45;color:var(--ink-2)}
.modal-p b{color:var(--ink)}
.modal-in{width:100%;margin-top:var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);
  font-size:16px;color:var(--ink)}
.modal-in:focus{border-color:var(--p-plum);outline:none}
.modal-err{min-height:18px;margin-top:var(--s2);font-size:13px;color:var(--no)}
.modal-row{display:flex;gap:var(--s2);margin-top:var(--s3)}
.modal-btn{flex:1;padding:var(--s3);border-radius:var(--r-full);font-size:15px;
  /* Verde de marca. Iba en morado, que era un color del sistema anterior y
     no pinta nada en un diálogo de BlaBlaLearn. */
  font-weight:600;background:var(--marca);color:var(--n0);
  border:1px solid var(--marca)}
.modal-btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.modal-btn:disabled{opacity:.5}
.modal-in.hidden{display:none}
.modal-btn.danger{background:var(--no);border-color:var(--no)}

/* ── Perfil ────────────────────────────────────────────────────────────
   La única pantalla que habla de quién eres y no de lo que te falta. Toma
   el tono del avatar, que se deriva del @nombre: así el perfil de cada uno
   tiene su color sin guardar ninguna preferencia. */
.me-card{border:1px solid color-mix(in srgb,var(--pc,var(--line)) 30%,var(--line));
  border-radius:var(--r-m);padding:var(--s5);
  background:color-mix(in srgb,var(--pc,var(--n0)) 7%,var(--surface))}
.me-top{display:flex;align-items:center;gap:var(--s4)}

.me-av{width:76px;height:76px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:30px;font-weight:700;
  color:var(--pc,var(--ink));position:relative;
  background:color-mix(in srgb,var(--pc,var(--n40)) 16%,var(--n0));
  border:2px solid color-mix(in srgb,var(--pc,var(--n40)) 45%,transparent)}
.me-av img{width:100%;height:100%;object-fit:cover}
/* La cámara solo aparece al tocar: el avatar no es un botón que grite. */
.me-av::after{content:'';position:absolute;inset:auto 0 0 0;height:26px;
  background:linear-gradient(transparent,rgba(0,0,0,.45));opacity:0;
  transition:opacity var(--t-micro)}
.me-av:active::after{opacity:1}

.me-id{flex:1;min-width:0}
.me-name{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-handle{font-size:15px;color:var(--pc,var(--ink-2));font-weight:600;margin-top:1px}
.me-edit{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--line);background:var(--surface)}
.me-edit svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* El galón. Va en el tono del perfil y con caja propia para que se lea
   como una insignia y no como un icono más de la interfaz. */
.me-rank{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid color-mix(in srgb,var(--pc,var(--line)) 22%,var(--line))}
.me-rank-ico{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-s);
  display:grid;place-items:center;color:var(--pc,var(--ink));
  background:color-mix(in srgb,var(--pc,var(--n40)) 12%,var(--n0));
  border:1px solid color-mix(in srgb,var(--pc,var(--n40)) 30%,transparent)}
.rk-badge{display:block}
.me-rank-txt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.me-rank-txt i{display:block;font-style:normal;font-size:13px;color:var(--ink-3);margin-top:1px}

/* Conservar el rango. Es la parte que hace que no sea un adorno: si esta
   barra no se llena, el galón baja. */
.me-keep{margin-top:var(--s4)}
.me-keep-t{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.me-keep-t b{color:var(--ink)}
.me-keep.ok .me-keep-t b{color:var(--ok)}
.me-keep-rail{height:6px;border-radius:var(--r-full);background:var(--track);
  margin-top:var(--s2);overflow:hidden}
.me-keep-rail i{display:block;height:100%;border-radius:var(--r-full);
  background:var(--pc,var(--ink));transition:width var(--t-enter) var(--ease)}
.me-keep.ok .me-keep-rail i{background:var(--ok)}

.me-note{margin-top:var(--s3);font-size:13px;color:var(--ink-3);line-height:1.45;
  padding-left:var(--s3);border-left:2px solid var(--line)}
.me-note.hidden{display:none}

.me-actions{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.me-actions .xp-rail{flex:1;width:auto}
.me-mini{padding:6px var(--s3);border:1px solid var(--line);border-radius:var(--r-full);
  font-size:12.5px;color:var(--ink-3)}

.modal-lbl{display:block;margin-top:var(--s4);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.modal-lbl+.modal-in{margin-top:var(--s2)}
/* Correo y contraseña en «Tu perfil»: se ven, y «Cambiar» abre su diálogo. */
.ed-cuenta{margin-top:var(--s4);border-top:1px solid var(--line, rgba(0,0,0,.08))}
.ed-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.ed-fila>div{min-width:0;text-align:left}
.ed-fila .modal-lbl{margin-top:var(--s3)}
.ed-val{margin-top:var(--s1, 4px);font-size:15px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ed-cambia{flex:none;border:0;background:none;padding:var(--s2) 0;font:inherit;
  font-size:14px;font-weight:700;color:var(--prim, var(--p-plum));cursor:pointer}
.modal-at{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.modal-at span{font-size:17px;font-weight:700;color:var(--ink-3)}
.modal-at .modal-in{margin-top:0}
.me-actions{align-items:flex-end}
.me-lvl{flex:1;min-width:0}
.me-lvl .xp-rail{width:100%;margin-top:var(--s2);height:4px;border-radius:var(--r-full)}
.me-lvl .xp-rail i{background:var(--p-sand);border-radius:var(--r-full)}
.me-mini.hidden{display:none}
/* Logros: el icono era negro macizo y desentonaba con el resto. */
.ach.on .ach-i{background:color-mix(in srgb,var(--p-sand) 22%,var(--n0));
  color:var(--p-sand);border:1px solid color-mix(in srgb,var(--p-sand) 45%,transparent)}
.ach.on .ach-i svg{fill:currentColor;stroke:none}
/* Botón de la agenda. Va aparte de la fila de acciones porque es un camino
   distinto, no una variante de «Añadir». */
.modal-alt{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-full);
  border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink-2)}
.modal-alt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.modal-alt.hidden{display:none}

/* ── Lo que has movido ─────────────────────────────────────────────────
   Terminar una práctica daba XP y poco más. Aquí se ve QUÉ ha mejorado y
   cuánto: es la diferencia entre «he ganado puntos» y «he aprendido esto». */
.worked{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;background:var(--surface);text-align:left}
.worked.hidden{display:none}
.wk-h{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink)}
.wk-h i{font-style:normal;color:var(--ink-3);font-weight:500}
.wk-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4)}
.wk-w{font-weight:600;font-size:14.5px;color:var(--ink);min-width:92px}
.wk-e{flex:1;font-size:13px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wk-bar{width:62px;height:5px;border-radius:var(--r-full);background:var(--track);
  overflow:hidden;flex:0 0 auto}
.wk-bar i{display:block;height:100%;background:var(--p-sage);border-radius:var(--r-full);
  transition:width var(--t-enter) var(--ease)}
.wk-p{font-size:12.5px;color:var(--ink-3);width:34px;text-align:right;
  font-variant-numeric:tabular-nums}
.wk-mas{padding:var(--s2) var(--s4) var(--s3);font-size:12.5px;color:var(--ink-3)}

/* ── El pulso de la voz ────────────────────────────────────────────────
   `--p` es la amplitud del audio en tiempo real (0 a 1) y `--e` la escala
   que sale de ella; las escribe PULSE en cada fotograma. Aquí solo se
   traducen a tamaño y opacidad: ninguna animación en bucle, todo lo que se
   mueve lo mueve la voz. */
/* La esfera que habla. Todo lo que se mueve lo dibuja el canvas leyendo el
   espectro real; aquí solo se le da sitio. */
.orb-wrap{display:grid;place-items:center;width:100%;margin:var(--s5) 0;
  transition:transform var(--t-micro) var(--ease)}
.orb-wrap:active{transform:scale(.97)}
.orb{display:block}

/* Lo que suelta la esfera cuando la manosean. Aparece bajo ella, sin mover
   nada de sitio: si empujara el contenido, cada roce daría un salto. */
.orb-wrap{position:relative;touch-action:none}
.orb-say{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,8px);
  padding:6px 14px;border-radius:var(--r-full);
  background:var(--n100);color:var(--n0);
  font-size:13.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease)}
.orb-say.on{opacity:1;transform:translate(-50%,0)}

/* ═══════════ MEJORAR: ERRORES Y JARDÍN ═══════════ */

/* Las dos entradas grandes de Práctica. Son más altas que las tarjetas de
   formato a propósito: no compiten con ellas, están por encima. */
.big-entry{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s4);margin-top:var(--s3);border:1px solid var(--n20);
  border-radius:var(--r-m);background:var(--n0);
  transition:border-color var(--t-micro),transform var(--t-micro) var(--ease)}
.big-entry:active{transform:scale(.99);border-color:var(--n40)}
.be-ico{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-s);
  display:grid;place-items:center;background:var(--n5)}
.be-ico svg{width:24px;height:24px;fill:none;stroke:var(--n90);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
#entry-mistakes .be-ico{background:var(--no-bg)}
#entry-mistakes .be-ico svg{stroke:var(--no)}
#entry-garden .be-ico{background:var(--p-sage-soft)}
#entry-garden .be-ico svg{stroke:var(--p-sage)}
.be-body{flex:1;min-width:0}
.be-body b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.be-body i{display:block;font-style:normal;font-size:13.5px;color:var(--n60);margin-top:2px}
.be-n{flex:0 0 auto;font-size:20px;font-weight:700;color:var(--n40);letter-spacing:-.02em}
.be-n.hot{color:var(--no)}

/* ── Errores ── */
.mis-scroll{flex:1;overflow-y:auto;padding:var(--s5) var(--pad) var(--s6)}
.mis-foot{flex:0 0 auto;padding:var(--s3) var(--pad) calc(var(--safe-b) + var(--s4));
  border-top:1px solid var(--n10)}
.ghost-link{font-size:14px;font-weight:600;color:var(--n60)}
.mis-list{margin-top:var(--s4);border:1px solid var(--n20);border-radius:var(--r-m);overflow:hidden}
.mis-row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--n10);
  transition:background-color var(--t-micro)}
.mis-row:last-child{border-bottom:0}
.mis-row:active{background-color:var(--n5)}
/* El número de fallos es el dato: va grande y en rojo cuando se repite.
   Una palabra fallada cinco veces tiene que verse distinta de una fallada
   una, o la lista se lee como un montón indiferenciado. */
.mis-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;font-size:13px;font-weight:700;
  border:1px solid var(--n20);color:var(--n60)}
.mis-row.terco .mis-n{background:var(--no);border-color:var(--no);color:var(--on-no)}
.mis-b{flex:1;min-width:0}
.mis-en{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.mis-es{display:block;font-size:13px;color:var(--n60);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mis-cefr{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--n40);
  letter-spacing:.04em}
.mis-empty{margin-top:var(--s6);padding:var(--s5);border-radius:var(--r-m);
  border:1px dashed var(--n20);text-align:center}
.mis-empty-t{font-size:16px;font-weight:600}
.mis-empty-s{font-size:13.5px;color:var(--n60);margin-top:var(--s2);line-height:1.45}

/* ── Jardín ── */
.gd-scroll{flex:1;overflow-y:auto;padding:var(--s5) var(--pad) var(--s7)}
.gd-search{width:100%;margin-top:var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--n20);border-radius:var(--r-full);font-size:15px;
  background:var(--n0);color:var(--n90)}
.gd-filters{display:flex;gap:var(--s2);margin-top:var(--s3);overflow-x:auto;
  padding-bottom:var(--s1);scrollbar-width:none}
.gd-filters::-webkit-scrollbar{display:none}
.gd-f{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px var(--s3);
  border:1px solid var(--n20);border-radius:var(--r-full);font-size:13px;
  font-weight:600;color:var(--n60);white-space:nowrap}
.gd-f b{font-size:12px;color:var(--n40)}
.gd-f.on{border-color:var(--n100);color:var(--n100)}
.gd-f.on b{color:var(--n90)}

/* En fila y no en rejilla: en la rejilla cada celda tenía que reservar
   la altura de una flor abierta, así que las semillas y los brotes —que
   son casi todas al principio— dejaban media tarjeta vacía. En fila la
   planta ocupa lo que ocupa y el resto es texto. */
.gd-grid{display:flex;flex-direction:column;margin-top:var(--s4);
  border:1px solid var(--n20);border-radius:var(--r-m);overflow:hidden}
.gd-cell{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s2) var(--s4) var(--s3);border-bottom:1px solid var(--n10);
  transition:background-color var(--t-micro)}
.gd-cell:last-child{border-bottom:0}
.gd-cell:active{background-color:var(--n5)}
.gd-b{flex:1;min-width:0}
.gd-es{display:block;font-size:12.5px;color:var(--n60);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-pct{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--n40)}
.gd-cell.seca .gd-pct{color:var(--no)}
.gd-plant{flex:0 0 auto;width:50px;height:64px;display:block;
  fill:none;stroke:var(--n60);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gd-plant .gd-soil{stroke:var(--n20)}
.gd-plant .gd-seed{stroke:var(--n40);fill:var(--n10)}
.gd-plant .gd-stem,.gd-plant .gd-leaf{stroke:var(--p-sage)}
.gd-plant .gd-leaf{fill:var(--p-sage-soft)}
.gd-plant .gd-bud{stroke:var(--p-sage);fill:var(--p-sage-soft)}
/* La flor abierta es lo ÚNICO que se lleva color saturado. Es el premio de
   la pantalla: si todas las etapas llevaran color, florecer no sería nada. */
.gd-plant .gd-petal{stroke:var(--p-rose);fill:var(--p-rose-soft)}
.gd-plant .gd-core{stroke:var(--p-sand);fill:var(--p-sand-soft)}
/* Marchita: se descuelga y pierde el color. La palabra se está yendo. */
.gd-plant.seca{opacity:.5;transform:rotate(-6deg)}
.gd-plant.seca .gd-petal,.gd-plant.seca .gd-core,
.gd-plant.seca .gd-stem,.gd-plant.seca .gd-leaf,.gd-plant.seca .gd-bud{
  stroke:var(--n40);fill:var(--n5)}
.gd-cell.seca .gd-w{color:var(--n60)}

.gd-w{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-bar{display:block;height:3px;border-radius:2px;background:var(--n10);
  margin-top:6px;max-width:170px;overflow:hidden}
.gd-bar i{display:block;height:100%;background:var(--p-sage);
  transition:width var(--t-enter) var(--ease)}
.gd-empty{margin-top:var(--s6);text-align:center;font-size:14px;color:var(--n60);
  line-height:1.5}

/* Ficha de la palabra */
.gd-sheet{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end}
.gd-sheet-veil{position:absolute;inset:0;background:var(--veil)}
.gd-sheet-card{position:relative;width:100%;background:var(--n0);
  border-radius:var(--r-m) var(--r-m) 0 0;
  padding:var(--s5) var(--pad) calc(var(--safe-b) + var(--s4));
  animation:sheetUp var(--t-enter) var(--ease)}
@keyframes sheetUp{from{transform:translateY(14px);opacity:0}}
.gd-sheet-plant{display:grid;place-items:center;margin-bottom:var(--s2)}
.gd-sheet-plant .gd-plant{height:96px;width:76px}
.gd-sheet-en{font-size:28px;font-weight:700;letter-spacing:-.02em;text-align:center}
.gd-sheet-ipa{font-size:14px;color:var(--n60);text-align:center;margin-top:2px}
.gd-sheet-es{font-size:14.5px;color:var(--n60);text-align:center;margin-top:var(--s2)}
.gd-sheet-ex{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-s);
  background:var(--n5);font-size:14px;line-height:1.45}
.gd-sheet-ex:empty{display:none}
.gd-sheet-ex b{display:block;font-weight:600}
.gd-sheet-ex span{color:var(--n60);font-size:13.5px}
.gd-skills{display:flex;gap:var(--s2);margin:var(--s4) 0 var(--s4)}
.gd-skill{flex:1;min-width:0;text-align:center}
.gd-skill i{display:block;height:4px;border-radius:2px;background:var(--n10);
  position:relative;overflow:hidden}
.gd-skill i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:var(--p-sage)}
.gd-skill em{display:block;font-style:normal;font-size:11px;color:var(--n60);
  margin-top:5px;font-weight:600}

/* Fila de lección en el resumen de la sesión: la MISMA barra verde que en la
   ruta, para que se lea de un vistazo que lo que acabas de practicar ha
   movido tu ruta. Antes solo salía el nombre de la unidad, sin progreso. */
.wk-les{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--n10);
  background:linear-gradient(to right, var(--ok-bg) var(--p,0%), transparent var(--p,0%))}
.wk-les-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-les-p{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--ok)}

/* El veredicto de un examen de nivel: es un texto que hay que leer entero,
   no una fila de datos. */
.wk-nota{padding:var(--s3) var(--s4);font-size:14px;line-height:1.5;color:var(--n60)}

/* Entrada al examen de nivel. Va discreta dentro de la cabecera del nivel:
   es un atajo para quien ya sabe, no la vía normal. */
.lv-exam{display:block;width:100%;text-align:left;margin-top:var(--s3);
  padding:var(--s3) var(--s4);border:1px dashed var(--n20);border-radius:var(--r-m);
  transition:border-color var(--t-micro)}
.lv-exam:active{border-color:var(--n40);background:var(--n5)}
.lv-exam b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.lv-exam i{display:block;font-style:normal;font-size:13px;color:var(--n60);margin-top:2px}
.lv-next .lv-exam{margin-top:var(--s4);background:var(--n0)}
.lv-next.locked .lv-exam{opacity:1}

/* ─────────── Racha de hoy ─────────── */
.racha-hoy{margin-top:var(--s5);padding:var(--s3) var(--s4) var(--s4);
  border:1px solid var(--n20);border-radius:var(--r-m);background:var(--n0);
  transition:border-color var(--t-move)}
.racha-hoy.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.rh-h{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s3)}
.racha-hoy.ok .rh-h{color:var(--ok)}
.rh-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.rh-l{flex:0 0 74px;font-size:12.5px;color:var(--n60);font-weight:600}
.rh-bar{flex:1;height:6px;border-radius:3px;background:var(--n10);overflow:hidden}
.rh-bar i{display:block;height:100%;width:0;background:var(--p-sage);
  transition:width var(--t-enter) var(--ease)}
.racha-hoy.ok .rh-bar i{background:var(--ok)}
.rh-n{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--n40);min-width:44px;text-align:right}

/* ═══════════ RACHA CONSEGUIDA ═══════════
   Papel, verde de marca y calma. Nada de partículas flotando: el sistema de
   esta app es línea y espacio, y unos puntos brillando sueltos por la
   pantalla son de otro producto.

   Lo que celebra no es un efecto, son los DÍAS: una marca por cada uno, en
   el mismo lenguaje que la tira de la semana en Inicio. Se mira y se cuenta,
   que es justo lo que uno quiere hacer con una racha. */
.racha-fiesta{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:var(--bg);opacity:0;transition:opacity var(--t-enter) var(--ease)}
.racha-fiesta.on{opacity:1}
.racha-fiesta.hidden{display:none}

/* Un único resplandor, muy suave y quieto. Es lo único que se permite
   porque es color de marca. Ni parpadea ni se mueve por la pantalla. */
.rf-luz{position:absolute;width:min(640px,140vw);aspect-ratio:1;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--p-sand) 20%, transparent) 0%,
    color-mix(in srgb, var(--marca) 6%, transparent) 44%, transparent 70%);
  animation:rfLuz 4200ms var(--ease) infinite}
@keyframes rfLuz{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}

.rf-cuerpo{position:relative;z-index:2;text-align:center;padding:var(--pad);
  max-width:420px;width:100%;margin-bottom:min(24vh,150px)}
@keyframes rfEntra{0%{transform:translateY(24px) scale(.76);opacity:0}
  62%{transform:translateY(-5px) scale(1.05)}100%{transform:none;opacity:1}}
@keyframes rfFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.rf-num{font-size:104px;line-height:.94;font-weight:700;letter-spacing:-.05em;
  color:var(--marca);animation:rfNum 700ms var(--ease) both}
@keyframes rfNum{0%{transform:scale(.45);opacity:0}56%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.rf-dias{margin-top:var(--s2);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--n60)}

/* EL PRADO. Una planta por día de racha, floreciendo en orden.
   Son las mismas plantas del jardín de vocabulario: en esta app crecer se
   dibuja siempre igual. Tres filas con perspectiva —las de atrás más
   pequeñas y pálidas— para que a los treinta días parezca un campo y no una
   hilera. */
.rf-prado{position:absolute;left:0;right:0;bottom:0;height:min(38vh,240px);
  pointer-events:none;display:flex;align-items:flex-end}
.rf-prado svg{width:100%;height:100%;overflow:visible}
.rf-prado .pl{transform-origin:0 0;animation:plFlorece 640ms var(--ease) both}
@keyframes plFlorece{
  0%{transform:scale(0)}
  64%{transform:scale(1.1)}
  100%{transform:scale(1)}}
.rf-prado .pl-t{stroke:var(--p-sage);stroke-width:2.2;stroke-linecap:round;fill:none}
.rf-prado .pl-h{fill:color-mix(in srgb, var(--p-sage) 34%, var(--n0));
  stroke:var(--p-sage);stroke-width:1.1}
.rf-prado .pl-f circle{fill:color-mix(in srgb, var(--p-sand) 55%, var(--n0));
  stroke:var(--p-sand);stroke-width:.9}
.rf-prado .pl-c{fill:var(--marca) !important;stroke:none !important}
/* Profundidad: las de atrás se apagan, las de delante mandan. */
.rf-prado .lejos{opacity:.42}
.rf-prado .medio{opacity:.7}
/* La de hoy, en el verde de marca: es la que se acaba de ganar. */
.rf-prado .hoy .pl-f circle{fill:color-mix(in srgb, var(--marca) 40%, var(--n0));
  stroke:var(--marca)}
.rf-prado .pl-mas{fill:var(--n40);font-size:12px;font-weight:600;
  font-family:inherit;letter-spacing:.02em}

.rf-txt{margin-top:var(--s5);font-size:17.5px;line-height:1.45;color:var(--n90);
  font-weight:500;animation:rfEntra 700ms 200ms var(--ease) both}
.rf-ok{margin-top:var(--s6);background:var(--marca);color:var(--n0)}

/* ─────────── Rangos ───────────
   Capa a nivel de body: dentro de `#app` heredaría el padding y el scroll de
   la pantalla que hubiera debajo, y la escalera se cortaría por los lados. */
.no-scroll{overflow:hidden}
/* Por encima de la cabecera y de la barra de pestañas (110 y 200): es una
   pantalla completa, no un panel que se asome por debajo de ellas. */
.rangos{position:fixed;inset:0;z-index:320;background:var(--bg);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:max(env(safe-area-inset-top),var(--s4)) 0 var(--s8);
  animation:rgEntra 260ms var(--ease) both}
.rangos.hidden{display:none}
@keyframes rgEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.rg-top{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4)}
.rg-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--n5);border:0;flex:0 0 auto}
.rg-x svg{width:19px;height:19px;fill:none;stroke:var(--n90);stroke-width:2;
  stroke-linecap:round}
.rg-tabs{display:flex;gap:var(--s2);margin-left:auto}
.rg-tab{border:1px solid var(--n20);background:transparent;color:var(--n70);
  border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600}
.rg-tab.on{background:var(--n100);color:var(--n0);border-color:var(--n100)}

.rg-head{padding:var(--s5) var(--s4) var(--s3);text-align:center}

/* ── La medalla del rango actual ──
   Es la ÚNICA pieza en color de la pantalla, y por eso funciona: el sistema
   guarda el color saturado para el premio (§1b), así que aquí golpea porque en
   todo lo demás no hay ninguno. El tono sube con el rango —ámbar, violeta,
   azul— y sale de la paleta de premio, que son exactamente esos tres.

   El resplandor es una excepción consciente a «no hay sombras» (§5): lo pidió
   el usuario y es lo que separa una medalla puesta de un icono. Va con la
   curva y la duración del sistema, y no se mueve más de 8px. */
.rg-medal{
  display:flex;justify-content:center;margin-bottom:var(--s2);
  animation:medalin var(--t-enter) var(--ease) both;
}
/* La medalla es la cabecera: la cinta ya dice el rango, así que el titular de
   texto se queda para lectores de pantalla y no se pinta. */
.rg-medal img{width:min(232px,62%);height:auto;display:block}
.rg-head .rg-name{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.rg-medal[data-tier="bajo"]  {--medal:#F5A524}
.rg-medal[data-tier="medio"] {--medal:#7C4DFF}
.rg-medal[data-tier="alto"]  {--medal:#2E7DF6}
/* El resplandor va sobre la imagen. Apuntaba a `.rk-medal`, la clase del SVG
   que se generaba aquí antes de que la medalla pasara a ser un fichero: al
   cambiarla por un `<img>` el selector dejó de encontrar nada y el brillo
   desapareció sin que fallara nada. */
.rg-medal img{
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--medal) 45%,transparent))
         drop-shadow(0 0 26px color-mix(in srgb,var(--medal) 22%,transparent));
  animation:medalglow 3.2s var(--ease) infinite;
}
@keyframes medalin{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
/* Latido muy corto de opacidad. Nada se mueve: solo respira. */
@keyframes medalglow{0%,100%{opacity:1}50%{opacity:.86}}
@media (prefers-reduced-motion:reduce){
  .rg-medal,.rg-medal img{animation:none}
}

.rg-name{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--n100)}
.rg-pos{margin-top:2px;font-size:15px;color:var(--n70);font-weight:600}
.rg-note{margin-top:var(--s3);font-size:14px;color:var(--n70);line-height:1.4}
.rg-keep{margin-top:var(--s3);font-size:14px;color:var(--n90);line-height:1.4}

/* La escalera va en horizontal y con scroll propio: en vertical, diez
   peldaños empujan la clasificación fuera de la pantalla. */
/* `flex-shrink:0` no es cosmético: la hoja es una columna flex y la escalera
   cedía altura hasta recortar el nombre de cada peldaño —pedía 114px y le
   daban 64—. Se vio al meterle la medalla a cada uno, que la hizo más alta. */
.rg-ladder{display:flex;flex:0 0 auto;gap:var(--s2);overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:var(--s4) var(--s4);-webkit-overflow-scrolling:touch}
.rg-ladder::-webkit-scrollbar{display:none}
.rg-step{flex:0 0 auto;scroll-snap-align:center;min-width:104px;
  border:1px solid var(--n20);border-radius:var(--r-m);padding:var(--s3) var(--s4);
  display:grid;gap:2px;text-align:center;background:var(--n0)}
.rg-step-n{font-size:14px;font-weight:700;color:var(--n90)}
.rg-step-x{font-size:12px;color:var(--n60)}
.rg-step-g{font-size:11px;color:var(--n50)}
.rg-step-g::after{content:' aquí'}
.rg-step.hecho{border-color:var(--marca);background:color-mix(in srgb,var(--marca) 8%,var(--n0))}
.rg-step.hecho .rg-step-n{color:var(--marca)}
.rg-step.actual{border-color:var(--n100);border-width:2px;background:var(--n100)}
.rg-step.actual .rg-step-n{color:var(--n0)}
/* Blanco fijo no vale: el fondo de este peldaño es `--n100`, que en oscuro ES
   blanco, y el texto desaparecía. Con `--n0` la tinta se da la vuelta sola. */
.rg-step.actual .rg-step-x,.rg-step.actual .rg-step-g{
  color:color-mix(in srgb,var(--n0) 72%,transparent)}
/* Los de arriba se ven pero no se entra. Apagados, no ocultos: saber que
   existen es la mitad de la gracia de una escalera. */
.rg-step.bloqueado{opacity:.45}

/* Los emblemas de la escalera. Van en su color —son los mismos ficheros que
   la medalla grande, sin la cinta—, y el estado lo dice la opacidad: el que
   tienes puesto a plena luz, los pasados algo apagados y los que faltan más
   aún. Es la misma gradación que ya usaba la tarjeta entera. */
/* Sin opacidad propia: `.rg-step.bloqueado` ya baja la tarjeta entera al 45%,
   y encima de eso el emblema se volvía un fantasma. El estado lo dice la
   tarjeta; el emblema solo tiene que verse. */
.rg-step-m{display:block;margin-bottom:6px}
.rg-step-m img{display:block;margin:0 auto;width:56px;height:56px}

.rg-panel{padding:0 var(--s4)}
.rg-list{display:grid;gap:6px}
.rg-cargando{padding:var(--s6) 0;text-align:center;color:var(--n60);font-size:14px}
.rg-row{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);
  border-radius:var(--r-m);border:1px solid transparent;background:var(--n0)}
.rg-row.yo{border-color:var(--n100);background:var(--n5)}
.rg-p{width:24px;text-align:center;font-weight:700;color:var(--n70);font-size:14px}
.rg-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;background:var(--n10);color:var(--n70);
  font-weight:700;font-size:14px}
.rg-av img{width:100%;height:100%;object-fit:cover}
.rg-n{flex:1;min-width:0;font-weight:600;color:var(--n100);font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-amigo,.rg-rango{font-style:normal;font-size:11px;font-weight:600;
  margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--n10);
  color:var(--n60)}
.rg-xp{font-weight:700;color:var(--n90);font-size:14px;flex:0 0 auto}
/* La franja que sube y la que baja: una raya de color a la izquierda basta,
   y no cambia el peso visual de la fila del usuario. */
.rg-row.sube{box-shadow:inset 3px 0 0 var(--marca)}
.rg-row.baja{box-shadow:inset 3px 0 0 var(--no)}
.rg-foot{margin:var(--s4) 0 0;font-size:13px;color:var(--n60);text-align:center}
/* El precio pegado al botón de pista: la decisión de gastar se toma mirando
   el número, así que tiene que estar donde está el dedo. */
.hint-precio{font-style:normal;font-size:12px;font-weight:700;
  padding:2px 7px;border-radius:999px;background:var(--n10);color:var(--n70)}

/* ─────────── Vidas ─────────── */
.vidas{display:flex;gap:5px;align-items:center;flex:0 0 auto}
.vida{width:13px;height:13px;flex:0 0 auto;background:var(--no);
  transition:background 220ms var(--ease),transform 220ms var(--ease);
  -webkit-mask:var(--corazon) center/contain no-repeat;
  mask:var(--corazon) center/contain no-repeat}
.vida.ida{background:var(--n20)}
/* La que se acaba de perder da un salto: sin él, con tres corazones a 13px
   el cambio pasa desapercibido justo cuando más hay que enterarse. */
.vida.rompe{animation:vidaRompe 480ms var(--ease)}
@keyframes vidaRompe{
  0%{transform:scale(1)} 25%{transform:scale(1.55)}
  60%{transform:scale(.82)} 100%{transform:scale(1)}}
:root{--corazon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.7 4.3 13a4.9 4.9 0 0 1 7-6.9l.7.7.7-.7a4.9 4.9 0 0 1 7 6.9L12 20.7Z'/%3E%3C/svg%3E")}

/* ─────────── Sin vidas ───────────
   Capa por encima de la lección y no otra pantalla: al pagar una vida se
   sigue en el mismo ejercicio sin volver a montar nada. */
.susp{position:fixed;inset:0;z-index:340;display:grid;place-items:center;
  padding:var(--s5);background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(6px);animation:rgEntra 220ms var(--ease) both}
.susp.hidden{display:none}
.susp-caja{width:min(400px,100%);text-align:center;display:grid;gap:var(--s3)}
.susp-corazon{justify-self:center;width:64px;height:64px;display:grid;place-items:center}
.susp-corazon svg{width:100%;height:100%;fill:var(--no);opacity:.9;
  animation:suspLatido 1.6s var(--ease) infinite}
@keyframes suspLatido{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(1)}}
.susp-t{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--n100)}
.susp-p{font-size:15.5px;color:var(--n70);line-height:1.5;margin-bottom:var(--s3)}
.susp-gema{background:var(--marca);color:var(--n0)}
.susp-otra{background:var(--n100);color:var(--n0)}
.susp-salir{border:0;background:transparent;color:var(--n60);font-size:14.5px;
  font-weight:600;padding:var(--s3)}
/* La nota de un ajuste silenciado: mientras está en pausa dice cuánto queda,
   y tiene que distinguirse de la explicación normal o se lee como texto de
   ayuda y nadie se entera de que está activo. */
.setting-note.mudo-on{color:var(--marca);font-weight:700}


/* ═══════════════ Alegría (30 oct 2026) ═══════════════
   Todo el movimiento nuevo vive aquí, para poder afinarlo o quitarlo de una
   vez. El freno global de «reducir movimiento» (más arriba) lo apaga solo. */

/* Cada ejercicio entra subiendo, pieza a pieza: primero lo de arriba. */
.stage > *{animation:rise var(--t-enter) var(--ease) both}
.stage > :nth-child(2){animation-delay:50ms}
.stage > :nth-child(3){animation-delay:100ms}
.stage > :nth-child(4){animation-delay:150ms}
.stage > :nth-child(5){animation-delay:200ms}
/* Las opciones entran con su lista, NO una a una. Se probó una a una y al
   elegir otra opción la anterior desaparecía y volvía a entrar: el saltito
   de «elegida» sustituía a la animación de entrada y, al quitarlo, el
   navegador repetía la entrada desde cero. Sin animación de base en `.opt`,
   los saltitos se ponen y se quitan sin arrastrar nada. */

/* Elegir una opción da un saltito, y la buena celebra con un rebote. */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.08)}55%{transform:scale(.97)}
  80%{transform:scale(1.02)}100%{transform:scale(1)}}
.opt.sel{animation:pop 200ms var(--ease)}
.opt.right{animation:boing 520ms var(--ease);background:var(--ok-bg)}
.check.ok{animation:boing 520ms var(--ease)}

/* Las tarjetas de inicio aparecen en cascada. */
.grid-2 .mini-card{animation:rise var(--t-enter) var(--ease) both}
.grid-2 .mini-card:nth-child(2){animation-delay:60ms}
.grid-2 .mini-card:nth-child(3){animation-delay:120ms}
.grid-2 .mini-card:nth-child(4){animation-delay:180ms}

/* ═══════════════ Cristal (30 oct 2026) ═══════════════
   Segunda versión. La primera era un degradado de blanco a blanco sobre un
   fondo casi blanco puro (#FFFDFB): no se veía en ningún sitio. Lo que hace
   que algo se lea como vidrio son tres cosas a la vez, y las tres tienen que
   notarse:
     1. el CANTO — un borde que coge la luz arriba a la izquierda y se apaga
        abajo a la derecha (doble fondo: padding-box + border-box);
     2. el BRILLO — una franja clara en la mitad de arriba;
     3. la PROFUNDIDAD — una sombra suave que lo despega del fondo.
   Y el fondo de la página baja un punto, a hueso neutro, para que el cristal
   claro tenga contra qué recortarse. Sin color: se probó con manchas de
   colores detrás y se descartó. */
:root{
  --pagina:#F6F6F7;
  /* Opaco a propósito: el canto se pinta en border-box, que también cubre el
     interior, y con un cuerpo translúcido se transparentaba y ensuciaba el
     color (la opción seleccionada salía gris turbio). */
  --vidrio:linear-gradient(180deg,#FFFFFF,#FBFBFC);
  --canto:linear-gradient(155deg,#fff 0%,rgba(255,255,255,.6) 30%,rgba(16,18,24,.07) 70%,rgba(16,18,24,.13) 100%);
  --brillo:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 58%);
  --hondo:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(16,18,24,.05),0 6px 16px -8px rgba(16,18,24,.16);
  --desenfoque:blur(18px) saturate(170%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pagina:var(--n0);
    --vidrio:linear-gradient(180deg,#25211C,#1B1814);
    --canto:linear-gradient(155deg,rgba(255,255,255,.30),rgba(255,255,255,.06) 40%,rgba(255,255,255,.02));
    --brillo:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
    --hondo:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -14px rgba(0,0,0,.6)}
}
:root[data-theme="dark"]{
  --pagina:var(--n0);
  --vidrio:linear-gradient(180deg,#25211C,#1B1814);
  --canto:linear-gradient(155deg,rgba(255,255,255,.30),rgba(255,255,255,.06) 40%,rgba(255,255,255,.02));
  --brillo:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
  --hondo:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -14px rgba(0,0,0,.6)}

body,.onb,.gate{background:var(--pagina)}

/* ── Cristal claro: tarjetas, opciones, entradas, chips, barra ── */
.mini-card,.opt,.next-card,.prac-card,.intro-card,.teach-card,.onb-opt,.modal,
.big-entry,.worked,.racha-hoy,.slot-box,.hud-chip,.say-btn,.slow-btn,.gate-field input,
.type-in,.ana-slot,.build-slot,.almost-card,.match-b,.ana-tile{
  border:1px solid transparent;
  background:var(--vidrio) padding-box,var(--canto) border-box;
  box-shadow:var(--hondo)}
#tabbar{background:color-mix(in srgb,var(--pagina) 72%,transparent);
  border-top:1px solid rgba(255,255,255,.7)}
#tabbar,.hud-chip,.modal{-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque)}

/* ── Cristal de color: la receta es la misma, con el tinte de cada pieza ──
   `--vc` es el color. El cuerpo es ese color aclarado, el brillo encima, el
   canto del mismo color y una sombra suave también suya. */
.prac-i,.be-ico,.grid-2 .mini-card{
  border:1px solid transparent;
  background:
    var(--brillo) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--vc) 16%,#fff),color-mix(in srgb,var(--vc) 34%,#fff)) padding-box,
    linear-gradient(155deg,#fff,color-mix(in srgb,var(--vc) 55%,#fff)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px color-mix(in srgb,var(--vc) 14%,transparent),
    0 8px 18px -10px color-mix(in srgb,var(--vc) 60%,transparent)}
.prac-i{--vc:var(--pc,var(--n40))}
.be-ico{--vc:var(--p-blue)}
#entry-mistakes .be-ico{--vc:var(--no);background:
    var(--brillo) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--vc) 12%,#fff),color-mix(in srgb,var(--vc) 26%,#fff)) padding-box,
    linear-gradient(155deg,#fff,color-mix(in srgb,var(--vc) 50%,#fff)) border-box}
#entry-garden .be-ico{--vc:var(--p-sage);background:
    var(--brillo) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--vc) 16%,#fff),color-mix(in srgb,var(--vc) 34%,#fff)) padding-box,
    linear-gradient(155deg,#fff,color-mix(in srgb,var(--vc) 55%,#fff)) border-box}
.be-ico svg{stroke:var(--vc)}
.grid-2 .mini-card:nth-child(1){--vc:var(--p-sage)}
.grid-2 .mini-card:nth-child(2){--vc:var(--p-blue)}
.grid-2 .mini-card:nth-child(3){--vc:var(--p-teal)}
.grid-2 .mini-card:nth-child(4){--vc:var(--p-sand)}

/* ── Botones de cristal: color sólido con brillo, canto y halo suyo ── */
.cta,.check:not(:disabled){
  --vc:var(--marca);
  border:1px solid color-mix(in srgb,#fff 35%,var(--vc));
  /* Brillo suave, no de gel: arriba una veladura y fuera. */
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 50%),var(--vc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 14px -8px color-mix(in srgb,var(--vc) 75%,transparent)}
.check:not(:disabled){--vc:var(--n100)}
.check.ok{--vc:var(--ok)}
.check.no{--vc:var(--no)}

/* Estados de respuesta: el cristal se tiñe, el canto toma el color. */
.opt.sel{background:var(--vidrio) padding-box,
  linear-gradient(155deg,var(--n100),var(--n60)) border-box}
.opt.right{background:var(--brillo) padding-box,var(--ok-bg) padding-box,
  linear-gradient(155deg,#fff,var(--ok)) border-box}
.opt.wrong{background:var(--brillo) padding-box,var(--no-bg) padding-box,
  linear-gradient(155deg,#fff,var(--no)) border-box}


/* ═══════════════ Unir con línea (30 oct 2026) ═══════════════ */
.match-b{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform var(--t-micro) var(--ease),border-color var(--t-micro)}
/* El punto de enganche, en el canto que da al pasillo. */
.match-b::after{content:'';position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--n0);border:2px solid var(--n20);z-index:1;
  transition:transform var(--t-move) var(--ease),background var(--t-move),border-color var(--t-move)}
.match-col:first-child .match-b::after{right:-6px}
.match-col:nth-child(2) .match-b::after{left:-6px}
.match-b.sel{border-color:var(--n100);transform:scale(1.03)}
.match-b.sel::after{border-color:var(--n100);transform:scale(1.35)}
.match-b.apunta{border-color:var(--n60);transform:scale(1.05)}
.match-b.apunta::after{transform:scale(1.35);border-color:var(--n60)}
/* Pareja hecha: se queda con su color, con brillo de cristal, y rebota. */
.match-b.done{pointer-events:none;color:var(--n90);border-color:var(--par);
  background:var(--brillo) padding-box,color-mix(in srgb,var(--par) 16%,#fff) padding-box;
  animation:boing 520ms var(--ease)}
.match-b.done::after{background:var(--par);border-color:var(--par);transform:scale(1.2)}
.match-b.miss{animation:shake 240ms var(--ease);border-color:var(--no)}
.match-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.match-svg path{fill:none;stroke-width:3.5;stroke-linecap:round}
.match-svg path.viva{stroke-width:2.5;stroke-dasharray:3 7}
/* Al cerrar todas, las líneas laten una vez. */
@keyframes latido{0%,100%{stroke-width:3.5}45%{stroke-width:6}}
.match-svg.cerrado path{animation:latido 520ms var(--ease)}

/* Saltar, en la esquina: discreto, que no invite a usarlo por reflejo. */
.saltar-esq{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 var(--s2) 0 var(--s3);
  border-radius:var(--r-full);font-size:13px;font-weight:500;color:var(--n60)}
.saltar-esq svg{width:15px;height:15px}
.saltar-esq:active{transform:scale(.96)}

/* ═══════════════ Cabecera del ejercicio más grande (30 oct 2026) ═══════════════
   En el móvil se veía diminuta: la X, los corazones, el combo, el rótulo y la
   bombilla. Todo se escala con un solo factor, `--cab`; para probar otro
   tamaño se cambia ese número y nada más. Va acotado a la lección para no
   agrandar botones con el mismo nombre en otras pantallas. */
#screen-lesson{--cab:1.7}
#screen-lesson .x-btn{width:calc(24px*var(--cab));height:calc(24px*var(--cab))}
#screen-lesson .x-btn svg{width:100%;height:100%}
#screen-lesson .prog-rail{height:calc(2px*var(--cab));border-radius:var(--r-full)}
#screen-lesson .combo-tag{font-size:calc(14px*var(--cab));min-width:calc(36px*var(--cab))}
#screen-lesson .combo-tag small{font-size:calc(11.5px*var(--cab))}
#screen-lesson .vidas{gap:calc(5px*var(--cab))}
#screen-lesson .vida{width:calc(13px*var(--cab));height:calc(13px*var(--cab))}
#ex-label .q-kicker{font-size:calc(12.5px*var(--cab))}
#screen-lesson .hint-btn{width:calc(28px*var(--cab));height:calc(28px*var(--cab));font-size:calc(13.5px*var(--cab))}
#screen-lesson .hint-btn.abierta{width:auto}
#screen-lesson .hint-btn svg{width:calc(18px*var(--cab));height:calc(18px*var(--cab))}
#screen-lesson .hint-btn .hint-precio{font-size:calc(12px*var(--cab))}
#screen-lesson .saltar-esq{height:calc(28px*var(--cab));font-size:calc(13px*var(--cab))}
#screen-lesson .saltar-esq svg{width:calc(15px*var(--cab));height:calc(15px*var(--cab))}


/* ═══════════════ Practicar varias palabras (30 oct 2026) ═══════════════ */
.gd-acciones{display:flex;gap:var(--s2);margin-top:var(--s4)}
.gd-accion{flex:1;height:40px;border-radius:var(--r-full);font-size:14px;font-weight:600;
  border:1px solid transparent;background:var(--vidrio) padding-box,var(--canto) border-box;
  box-shadow:var(--hondo);color:var(--n90)}
.gd-accion.on{color:var(--no)}
.gd-accion:active{transform:scale(.97)}
/* La elegida se marca con un círculo verde con su check a la derecha, en el
   sitio del porcentaje: lo que importa ahora es si va o no va. */
.gd-cell{position:relative}
.gd-cell.elegida{background:color-mix(in srgb,var(--ok) 9%,transparent)}
.gd-cell.elegida::after{content:'';position:absolute;right:var(--s3);top:50%;width:24px;height:24px;
  margin-top:-12px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;
  animation:pop 200ms var(--ease)}
.gd-cell.elegida .gd-pct{visibility:hidden}
.gd-barra{position:sticky;bottom:0;padding:var(--s3) 0 var(--s2);
  background:linear-gradient(180deg,transparent,var(--pagina) 35%)}
.gd-barra .cta{margin-top:0}
.gd-barra .cta:disabled{background:var(--n10);color:var(--n40);box-shadow:none;border-color:transparent}


/* ═══════════════ Altavoz junto al inglés (30 oct 2026) ═══════════════
   En `em` para que vaya en proporción a lo que acompaña: grande junto al
   enunciado, pequeño junto a una frase de ejemplo. */
.sayable{border-bottom:0;cursor:pointer}
.say-ico{display:inline-grid;place-items:center;width:1.1em;height:1.1em;min-width:22px;min-height:22px;
  margin-left:.32em;vertical-align:-.16em;border-radius:50%;border:1px solid transparent;
  background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:var(--hondo);
  transition:transform var(--t-micro) var(--ease)}
.say-ico svg{width:56%;height:56%;fill:var(--marca);stroke:none}
.sayable:active .say-ico{transform:scale(.9)}
.sayable.ringing .say-ico{animation:pop 260ms var(--ease)}


/* ═══════════════ Mapa de la ruta, en cristal (30 oct 2026) ═══════════════
   Cada bloque tiene su color (`--sec`, lo pone `drawMap`); el verde es solo
   para lo hecho. Va al final y con los mismos selectores para mandar sobre el
   mapa acromático de antes sin tener que borrarlo regla a regla. */

/* El camino: más grueso, punteado redondo, y verde macizo por donde ya has pasado. */
.mp-road{stroke:var(--n20);stroke-width:4;stroke-dasharray:.1 11}
.mp-seg{stroke-width:6}
.mp-seg.on{stroke:color-mix(in srgb,var(--ok) 85%,#fff)}

/* Nodos: cristal tintado del color de su bloque. */
@keyframes mpEntra{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mp-node{width:54px;height:54px;border:1px solid transparent;z-index:2;
  display:grid;place-items:center;font-size:18px;font-weight:700;
  color:color-mix(in srgb,var(--sec) 82%,#000);
  background:
    var(--brillo) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--sec) 14%,#fff),color-mix(in srgb,var(--sec) 30%,#fff)) padding-box,
    linear-gradient(155deg,#fff,color-mix(in srgb,var(--sec) 55%,#fff)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 6px color-mix(in srgb,var(--sec) 16%,transparent),
    0 10px 20px -10px color-mix(in srgb,var(--sec) 70%,transparent);
  animation:mpEntra 420ms var(--ease) backwards;animation-delay:calc(var(--i) * 45ms)}
.mp-node b{font-weight:700}

/* Hecha: cristal verde con su check. */
.mp-node.done{color:#fff;border-color:transparent;
  background:var(--brillo) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--ok) 78%,#fff),var(--ok)) padding-box,
    linear-gradient(155deg,#fff,var(--ok)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px color-mix(in srgb,var(--ok) 80%,transparent)}
.mp-check{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* La que toca: más grande, color macizo, halo que late y su globito. */
@keyframes mpLate{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sec) 45%,transparent),
    0 12px 24px -10px color-mix(in srgb,var(--sec) 80%,transparent)}
  100%{box-shadow:0 0 0 18px color-mix(in srgb,var(--sec) 0%,transparent),
    0 12px 24px -10px color-mix(in srgb,var(--sec) 80%,transparent)}}
.mp-node.toca{width:66px;height:66px;font-size:22px;color:#fff;border:1px solid color-mix(in srgb,#fff 35%,var(--sec));
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 52%),var(--sec);
  animation:mpEntra 420ms var(--ease) backwards,mpLate 1.6s var(--ease) 600ms infinite;
  animation-delay:calc(var(--i) * 45ms),600ms}
.mp-node.toca::after{display:none}
/* El globito va AL LADO del nodo, hacia donde haya sitio (lo decide drawMap
   según hacia qué lado se tuerce el camino). Encima se montaba sobre el
   rótulo del bloque, porque el primer nodo de cada bloque va justo debajo. */
@keyframes mpFlota{0%,100%{translate:0 0}50%{translate:4px 0}}
@keyframes mpFlotaIzq{0%,100%{translate:0 0}50%{translate:-4px 0}}
.mp-aqui{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;
  padding:6px 12px;border-radius:var(--r-full);font-size:13px;font-weight:700;color:var(--n90);
  border:1px solid transparent;background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:var(--hondo);
  pointer-events:none}
.mp-aqui.der{left:calc(100% + 14px);animation:mpFlota 1.8s ease-in-out infinite}
.mp-aqui.izq{right:calc(100% + 14px);animation:mpFlotaIzq 1.8s ease-in-out infinite}
.mp-aqui::after{content:'';position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.mp-aqui.der::after{right:100%;border-right-color:#fff}
.mp-aqui.izq::after{left:100%;border-left-color:#fff}

/* Bloqueada: cristal esmerilado gris. */
/* Bloqueada: cristal blanco con un canto suave de su bloque, para que el
   color del tramo se siga leyendo aunque aún no se pueda entrar. */
.mp-node.locked{opacity:1;color:color-mix(in srgb,var(--sec) 35%,var(--n40));
  background:var(--vidrio) padding-box,linear-gradient(155deg,#fff,color-mix(in srgb,var(--sec) 38%,#fff)) border-box;
  box-shadow:var(--hondo)}
.mp-node.locked b{opacity:.6}

/* Nombre de la lección: chip de cristal. */
@keyframes mpEtiqueta{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.mp-label{animation:mpEtiqueta 420ms var(--ease) backwards;animation-delay:calc(var(--i) * 45ms + 120ms)}
.mp-label span{display:inline-block;padding:4px 10px;border-radius:var(--r-full);font-weight:600;
  border:1px solid transparent;background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:var(--hondo)}

/* Rótulo de bloque: píldora de cristal con su punto de color. */
.mp-sep span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:var(--r-full);
  color:var(--n90);border:1px solid transparent;background:var(--vidrio) padding-box,var(--canto) border-box;
  box-shadow:var(--hondo)}
.mp-sep span::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--sec);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sec) 22%,transparent)}
.mp-sep::before,.mp-sep::after{background:color-mix(in srgb,var(--sec) 25%,transparent)}

/* Paisaje tintado del color de su bloque; lo recorrido sigue reverdeciendo. */
.mp-plant:not(.alive) .mp-crown{fill:color-mix(in srgb,var(--sec) 16%,var(--n0))}
.mp-plant:not(.alive) .mp-leaf{fill:color-mix(in srgb,var(--sec) 8%,var(--n0))}
.mp-plant:not(.alive) .mp-grass,.mp-plant:not(.alive) .mp-petal{fill:color-mix(in srgb,var(--sec) 22%,var(--n0))}
.mp-plant:not(.alive) .mp-bush{fill:color-mix(in srgb,var(--sec) 30%,var(--n0))}
.mp-plant:not(.alive) .mp-trunk,.mp-plant:not(.alive) .mp-stem{stroke:color-mix(in srgb,var(--sec) 35%,var(--n40))}

/* Amigos apagado: ver `AMIGOS` en 1-core.js. */
body.sin-amigos .solo-amigos{display:none!important}

/* ── Examen desde el mapa (30 oct 2026) ──
   Dorado: es la paleta del premio, y llegar a la meta lo es. */
.mp-trofeo{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-meta{position:absolute;width:78px;height:78px;border-radius:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;border:1px solid color-mix(in srgb,#fff 35%,var(--p-sand));
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 52%),var(--p-sand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 28px -12px color-mix(in srgb,var(--p-sand) 85%,transparent);
  animation:mpEntra 420ms var(--ease) backwards;animation-delay:700ms}
.mp-meta .mp-trofeo{width:36px;height:36px}
.mp-meta:active{transform:translate(-50%,-50%) scale(.93)}
.mp-meta-txt{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.mp-meta-txt b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--n90)}
.mp-meta-txt i{display:block;font-style:normal;font-size:13px;color:var(--n60);margin-top:2px}
.mp-examen-arriba{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:var(--r-full);
  white-space:nowrap;border:1px solid transparent;background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:var(--hondo)}
.mp-examen-arriba .mp-trofeo{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--p-sand);box-sizing:border-box}
.mp-examen-arriba b{font-size:14px;font-weight:700;color:var(--n90)}
.mp-examen-arriba i{font-style:normal;font-size:12.5px;color:var(--n60)}
.mp-examen-arriba:active{transform:translateX(-50%) scale(.97)}

/* ── Examen de bloque ──
   Cierra cada tramo del camino: en la lista, una fila más con su trofeo; en
   el mapa, un nodo con el trofeo. El trofeo hereda el color del texto (el
   de la meta va en blanco sobre su disco, este no). */
.blk-exam .les-n .mp-trofeo,.mp-bexam .mp-trofeo{stroke:currentColor}
.blk-exam .les-n .mp-trofeo{width:14px;height:14px}
.blk-exam .les-t{font-weight:600}
.mp-bexam .mp-trofeo{width:24px;height:24px}
.mp-bexam.done{background:var(--ok);color:var(--on-ok)}

/* ═══════════════ Ajustes (30 oct 2026) ═══════════════
   Grupos de cristal, como el resto de la app: cada fila con su icono de
   cristal de color (la misma receta que `.prac-i`) y el valor a la derecha
   con su flecha, sin la caja gris de formulario. */
.set-group{margin-bottom:var(--s5)}
.set-title{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s2) var(--s1);
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n60)}
.set-card{border:1px solid transparent;border-radius:var(--r-m);overflow:hidden;
  background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:var(--hondo)}
.set-card .setting-row{position:relative;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:0;
  min-height:56px;width:100%;text-align:left}
.set-card .setting-row.hidden{display:none}
/* Separador que empieza después del icono, como en los ajustes del iPhone. */
.set-card .setting-row + .setting-row::before{content:"";position:absolute;top:0;right:0;
  left:calc(var(--s4) + 32px + var(--s3));border-top:1px solid var(--n10)}
.set-card .setting-row label{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--n90)}
.set-card .setting-note{font-size:12px;color:var(--n60);font-weight:500;letter-spacing:0;line-height:1.35}
.set-ico{--vc:var(--n40);flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  border:1px solid transparent;
  background:var(--brillo) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--vc) 16%,#fff),color-mix(in srgb,var(--vc) 32%,#fff)) padding-box,
    linear-gradient(155deg,#fff,color-mix(in srgb,var(--vc) 55%,#fff)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -6px color-mix(in srgb,var(--vc) 70%,transparent)}
.set-ico svg{width:17px;height:17px;fill:none;stroke:var(--vc);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.set-title .set-ico{width:22px;height:22px;border-radius:7px}
.set-title .set-ico svg{width:13px;height:13px}
/* El desplegable: solo el valor, en el verde de la marca, con su flecha. El
   selector nativo del iPhone sigue saliendo al tocar. */
.set-card .setting-row select{appearance:none;-webkit-appearance:none;border:0;background:none;box-shadow:none;
  max-width:46%;padding:var(--s2) 18px var(--s2) var(--s2);margin-right:-4px;
  font:inherit;font-size:14px;font-weight:600;color:var(--marca);text-align:right;text-align-last:right;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer}
.set-card .setting-row:has(select)::after{content:"";position:absolute;right:var(--s4);top:50%;
  width:7px;height:7px;margin-top:-5px;border-right:2px solid var(--marca);border-bottom:2px solid var(--marca);
  transform:rotate(45deg);pointer-events:none;opacity:.8}
.set-card .setting-row:has(select){padding-right:calc(var(--s4) + 2px)}
.set-card .setting-val{font-size:14px;font-weight:600}
.set-card .mini-btn{margin:0;flex:0 0 auto;padding:7px 14px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;
  color:var(--marca);border:1px solid color-mix(in srgb,var(--marca) 35%,transparent);
  background:color-mix(in srgb,var(--marca) 8%,transparent);box-shadow:none}
.set-card .setting-in{max-width:46%}
/* Filas que son una acción entera: cerrar sesión, reiniciar. */
.set-act{display:flex;align-items:center;cursor:pointer;transition:background var(--t-micro)}
.set-act:active{background:color-mix(in srgb,var(--n100) 5%,transparent)}
.set-act label{pointer-events:none}
.set-danger label{color:var(--no) !important}
/* Lo técnico de la voz, plegado: casi nadie lo necesita. */
.set-adv summary{list-style:none;cursor:pointer;padding:var(--s2) 0}
.set-adv summary::-webkit-details-marker{display:none}
.set-adv summary::after{content:"";width:6px;height:6px;margin-left:auto;margin-right:var(--s2);
  border-right:2px solid var(--n40);border-bottom:2px solid var(--n40);transform:rotate(45deg);
  transition:transform var(--t-move) var(--ease)}
.set-adv[open] summary::after{transform:rotate(-135deg)}
.set-adv .hint-p{margin:var(--s2) var(--s1) var(--s3)}
.set-adv .setting-row label{font-weight:500}
.set-adv .setting-row + .setting-row::before{left:var(--s4)}

/* «Continuar» que se rellena solo: el acierto pasa al siguiente en 2,5 s. */
.check.auto{position:relative;overflow:hidden}
.check.auto::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(255,255,255,.6);transform-origin:left;animation:autollena 2.5s linear both}
@keyframes autollena{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Hoja de opciones (desplegables de Ajustes) ── */
.set-card .setting-row.con-hoja{cursor:pointer}
.set-card .setting-row.con-hoja select{pointer-events:none}
.set-card .setting-row.con-hoja:active{background:color-mix(in srgb,var(--n100) 4%,transparent)}
.hoja-velo{position:fixed;inset:0;z-index:470;background:var(--veil,rgba(0,0,0,.35));opacity:0;
  transition:opacity var(--t-move) var(--ease)}
.hoja-velo.on{opacity:1}
.hoja-velo.hidden,.hoja.hidden{display:none}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:480;max-width:520px;margin:0 auto;
  max-height:75vh;overflow-y:auto;border-radius:24px 24px 0 0;
  padding:var(--s2) var(--s4) calc(env(safe-area-inset-bottom,0px) + var(--s4));
  border:1px solid transparent;border-bottom:0;
  background:var(--vidrio) padding-box,var(--canto) border-box;box-shadow:0 -10px 30px -12px rgba(16,18,24,.25);
  transform:translateY(100%);transition:transform var(--t-enter) var(--ease)}
.hoja.on{transform:none}
.hoja-asa{width:40px;height:5px;border-radius:3px;background:var(--n20);margin:0 auto var(--s3)}
.hoja-t{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n60);
  text-align:center;margin-bottom:var(--s3)}
.hoja-ops{display:grid;gap:6px}
.hoja-op{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;
  min-height:52px;padding:var(--s3) var(--s4);border-radius:var(--r-m);text-align:left;
  font-size:16px;font-weight:600;color:var(--n90);border:1px solid var(--n10);
  transition:transform var(--t-micro) var(--ease),background var(--t-micro)}
.hoja-op:active{transform:scale(.98)}
.hoja-op svg{width:20px;height:20px;fill:none;stroke:var(--marca);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hoja-op.on{color:var(--marca);border-color:color-mix(in srgb,var(--marca) 45%,transparent);
  background:color-mix(in srgb,var(--marca) 9%,transparent)}
.hoja-op.on svg{opacity:1}

/* Grabando: ver «Pie anclado y respuesta física» más abajo. */
@keyframes oyeHalo{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55),0 14px 30px -12px rgba(0,0,0,.4)}
  100%{box-shadow:0 0 0 26px rgba(255,255,255,0),0 14px 30px -12px rgba(0,0,0,.4)}}

/* ═══════════ Pie anclado y respuesta física (30 oct 2026, 2ª vuelta) ═══════════
   El pie vive ABAJO del todo, al alcance del pulgar, y no se mueve con el
   texto. Al corregir, un panel de color SUBE desde abajo por detrás del
   botón (no aparece de golpe), el botón da un salto si aciertas o tiembla si
   fallas, y el móvil vibra. */
/* (el display lo pone .screen.active: aquí no, o se veía siempre) */
.lesson-foot,.lesson-foot.ok,.lesson-foot.no{
  position:relative;z-index:2;flex:0 0 auto;margin:0;border-radius:0;background:none;animation:none;
  display:flex;flex-direction:column;
  padding:var(--s3) var(--pad) calc(var(--safe-b) + var(--s4))}
.lesson-foot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:28px 28px 0 0;
  background:var(--verde-claro);transform:translateY(102%);
  transition:transform 340ms cubic-bezier(.2,.9,.3,1.15)}
.lesson-foot.no::before{background:var(--rojo-claro)}
.lesson-foot.ok::before,.lesson-foot.no::before{transform:none}
.lesson-foot .verdict{order:-1}
.lesson-foot .verdict.show{margin:var(--s2) 0 var(--s4)}
@keyframes salta{0%{transform:translateY(0)}30%{transform:translateY(-14px) scale(1.03)}
  55%{transform:translateY(0) scale(.99)}75%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes tiembla{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.check.ok{animation:salta 560ms cubic-bezier(.3,1.5,.5,1)}
.check.no{animation:tiembla 420ms ease}

/* ── Micro en el pie: grande, abajo, y crece desde su sitio ── */
.mic-dock{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s2) 0 var(--s3)}
.mic-dock .heard{margin:0;min-height:22px;text-align:center;font-weight:600;color:var(--n60);
  transition:color 300ms ease,font-size 300ms ease}
.mic-dock .mic{margin:0;width:84px;height:84px;transform-origin:50% 100%;
  transition:transform 520ms cubic-bezier(.2,.8,.2,1),background-color 300ms ease,box-shadow 300ms ease;
  animation:none;box-shadow:0 6px 0 var(--verde-osc)}
.mic-dock .mic svg{width:32px;height:32px}
.lesson-foot.con-mic .check:disabled{display:none}

/* ── Grabando: un degradado que sube desde el micro, sin cortes ──
   La pantalla no cambia de golpe a verde: una capa con un degradado de
   arriba (transparente) hacia el micro (verde) aparece poco a poco. El
   enunciado se queda donde estaba, en su sitio, sin tarjeta. */
#screen-lesson::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--verde) 18%,transparent) 35%,
    color-mix(in srgb,var(--verde) 70%,transparent) 72%,var(--verde) 100%);
  transition:opacity 520ms ease}
#screen-lesson{position:relative}
body.grabando #screen-lesson::after{opacity:1}
body.grabando #screen-lesson,body.grabando{background:var(--pagina)}
body.grabando #screen-lesson .q-prompt{margin:0;padding:0;background:none;box-shadow:none;border-radius:0;
  text-align:inherit;animation:none}
body.grabando #screen-lesson .q-prompt *{color:inherit}
body.grabando #screen-lesson :is(.lesson-top,.ses-donde,.ex-cabecera,.saltar-btn,.score-bar,
  .sent-slot,.audio-bloque,.q-sub-note,.q-ipa,.weak-row,.hint-btn){
  opacity:.25;visibility:visible;pointer-events:none;transition:opacity 400ms ease}
body.grabando .mic-dock .heard{color:#fff;font-size:20px;font-weight:800;margin:0}
body.grabando .mic-dock .mic{transform:scale(1.45);background:#fff;border-color:#fff;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35);animation:none}
body.grabando .mic-dock .mic svg{fill:var(--verde)}
body.grabando.oye .mic-dock .mic{animation:oyeHalo 1.1s var(--ease) infinite}
body.grabando .mic-dock{margin-top:0}

/* ── «¿Dónde cae el acento?»: sílabas gorditas, sin la caja rosa ── */
.syl{border:2px solid var(--n20) !important;border-bottom-width:5px !important;border-radius:16px;
  background:var(--n0) !important;box-shadow:none !important;font-weight:800;min-width:64px;
  transition:transform 90ms ease}
.syl:active{transform:translateY(3px)}
.syl.sel{border-color:var(--azul) !important;background:var(--azul-claro) !important;color:var(--azul-osc)}
.syl.right{border-color:var(--verde) !important;background:var(--verde-claro) !important;color:var(--verde-tinta)}
.syl.wrong{border-color:var(--rojo) !important;background:var(--rojo-claro) !important;color:var(--rojo-osc)}
.pausa-btn{align-self:center;margin-top:var(--s3);padding:6px var(--s3);font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--n40)}
.pausa-btn:active{color:var(--n60)}
body.grabando .pausa-btn{visibility:hidden}
/* Al corregir se esconde SIN soltar su hueco: con display:none el botón
   bajaba 40 px justo cuando ibas a pulsarlo. */
/* «Ahora no puedo…» va ENCIMA del botón: así el botón queda a la misma
   altura en todos los ejercicios, y al corregir se puede quitar sin que se
   mueva nada (el pie crece y mengua hacia arriba). */
.pausa-btn{order:-2;margin:0 0 var(--s3)}
.lesson-foot:is(.ok,.no,.saltado) .pausa-btn{display:none}
/* Micro: mientras no hay respuesta, el micro ocupa el sitio del botón. Al
   corregir se va y queda el panel con «Continuar», como en el resto. */
.lesson-foot.con-mic .check:disabled{display:revert}
.lesson-foot.con-mic:not(.ok):not(.no):not(.saltado) .check{display:none}
.lesson-foot:is(.ok,.no,.saltado) .mic-dock{display:none}
/* Solo el titular del veredicto va grande; las negritas de dentro, no. */
.verdict b{font-size:inherit;font-weight:800;display:inline}
.verdict-txt > b{display:block;font-size:20px;margin-bottom:2px}
.verdict-txt > span{display:block;font-size:14.5px;line-height:1.4}
/* El micro crece hacia arriba: el aviso sube con él para no quedar tapado. */
.mic-dock .heard{transition:color 300ms ease,transform 520ms cubic-bezier(.2,.8,.2,1)}
body.grabando .mic-dock .heard{transform:translateY(-44px)}
/* La etiqueta del ejercicio, como titular limpio: sin pastilla de color
   translúcida (se veía como un recuadro rosado sucio), en tinta y grande. */
#screen-lesson .ex-label:not(:empty){padding:0;background:none;border-radius:0;
  color:var(--n100) !important;font-size:21px;font-weight:800;letter-spacing:-.01em;text-transform:none}
#screen-lesson .ex-label .q-kicker{color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;margin:0}

/* ═══════════════════ PAPEL (30 oct 2026, 3ª vuelta) ═══════════════════
   Sacado de las referencias que eligió él en Pinterest (Habitz, «Good
   Morning / Start a session», Minji): papel cálido con cuadrícula suave,
   tarjetas de color SÓLIDO con un bichito con cara, botones en pastilla,
   barra de pestañas flotante con la activa en naranja, y letra redondeada
   (la redondeada del propio iPhone). Nada de canto grueso «de juguete»:
   sombras suaves y que el botón se encoja al pulsarlo. El verde es el de
   la marca, un verde bosque, no el verde chillón. */
:root{
  --papel:#F6F2EC; --tinta:#17150F; --gris:#8A857C; --linea:#E8E2D9; --blanco:#FFFFFF;
  --bosque:#1F7A44; --bosque-osc:#175F35; --bosque-claro:#E3F1E7;
  --naranja:#FF6B35; --naranja-claro:#FFE9DF;
  --azul:#2F7CF6; --azul-claro:#E8F0FF; --azul-osc:#1F5FD0;
  --amarillo:#FFD23F; --rosa:#FF5C8A; --lila:#8F6BEF; --lila-claro:#F1ECFF;
  --coral:#EF5350; --coral-claro:#FDECEB; --coral-osc:#C93A37;
  --verde:var(--bosque); --verde-osc:var(--bosque-osc); --verde-claro:var(--bosque-claro); --verde-tinta:var(--bosque);
  --rojo:var(--coral); --rojo-osc:var(--coral-osc); --rojo-claro:var(--coral-claro);
  --marca:var(--bosque); --ok:var(--bosque); --ok-bg:var(--bosque-claro); --no:var(--coral-osc); --no-bg:var(--coral-claro);
  --pagina:var(--papel);
  --prim:#6A4CF0; --prim-osc:#5236D6; --prim-claro:#EFEBFF;
  --sombra:0 1px 2px rgba(23,21,15,.04),0 8px 24px -12px rgba(23,21,15,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papel:#14120F; --blanco:#1F1C18; --linea:#2E2A24; --tinta:#F4F0EA; --gris:#A39E95;
  --bosque-claro:#173324; --coral-claro:#3A1C1B; --azul-claro:#16264A; --lila-claro:#271F45; --naranja-claro:#3B2215}}
:root[data-theme="dark"]{
  --papel:#14120F; --blanco:#1F1C18; --linea:#2E2A24; --tinta:#F4F0EA; --gris:#A39E95;
  --bosque-claro:#173324; --coral-claro:#3A1C1B; --azul-claro:#16264A; --lila-claro:#271F45; --naranja-claro:#3B2215}

body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background-color:var(--papel);
  background-image:linear-gradient(rgba(23,21,15,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(23,21,15,.035) 1px,transparent 1px);
  background-size:22px 22px}
body,.onb,.gate{background-color:var(--papel)}
.screen,#app{background:transparent}

/* ── Botones en pastilla ── */
.cta,.check:not(:disabled){
  background:var(--prim);color:#fff;border:0;border-radius:999px;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--prim) 90%,transparent);
  font-weight:800;letter-spacing:-.01em;text-transform:none;
  transition:transform 120ms ease,box-shadow 160ms ease,background-color 160ms}
.cta:active,.check:not(:disabled):active{transform:scale(.97);box-shadow:0 4px 12px -8px rgba(23,21,15,.5)}
.cta .cta-label{font-size:18px;font-weight:800;text-transform:none;letter-spacing:-.01em}
.check{font-size:17px;border-radius:999px;text-transform:none;letter-spacing:-.01em}
.check.ok{background:var(--bosque)}
.check.no{background:var(--coral)}
.check:disabled{background:#ECE6DD;color:#ABA59B;box-shadow:none}

/* ── Opciones: tarjetas blancas limpias ── */
.opt{background:var(--blanco) !important;border:1.5px solid var(--linea) !important;border-radius:20px;
  box-shadow:var(--sombra) !important;font-weight:700;color:var(--tinta);
  transition:transform 110ms ease,border-color 140ms,background-color 140ms}
.opt:active{transform:scale(.98)}
.opt.sel{border-color:var(--lila) !important;background:var(--lila-claro) !important;color:#5B3CC4}
.opt.right{border-color:var(--bosque) !important;background:var(--bosque-claro) !important;color:var(--bosque)}
.opt.wrong{border-color:var(--coral) !important;background:var(--coral-claro) !important;color:var(--coral-osc)}
.tile,.ana-tile{background:var(--blanco);border:1.5px solid var(--linea);border-radius:14px;font-weight:700;
  box-shadow:var(--sombra);transition:transform 110ms ease}
.tile:active,.ana-tile:active{transform:scale(.95)}
.build-slot .tile{border-color:var(--lila);color:#5B3CC4;background:var(--lila-claro)}
.syl{background:var(--blanco) !important;border:1.5px solid var(--linea) !important;border-radius:16px;
  box-shadow:var(--sombra) !important;font-weight:800;min-width:64px;transition:transform 110ms ease}
.syl:active{transform:scale(.95)}
.syl.sel{border-color:var(--lila) !important;background:var(--lila-claro) !important;color:#5B3CC4}
.syl.right{border-color:var(--bosque) !important;background:var(--bosque-claro) !important;color:var(--bosque)}
.syl.wrong{border-color:var(--coral) !important;background:var(--coral-claro) !important;color:var(--coral-osc)}
.say-btn,.slow-btn{background:var(--blanco) !important;border:1.5px solid var(--linea) !important;box-shadow:var(--sombra) !important;font-weight:700}
.say-btn svg,.slow-btn svg{color:var(--naranja)}

/* ── Barra de la lección ── */
#screen-lesson .prog-rail{height:12px;border-radius:999px;background:#E9E3DA}
.prog-fill{background:var(--naranja);border-radius:999px;position:relative;transition:width 380ms cubic-bezier(.3,1.4,.5,1)}
.prog-fill::after{content:"";position:absolute;left:6px;right:6px;top:2px;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.combo-tag{color:var(--naranja) !important;font-weight:800}

/* ── El panel al corregir, con su bichito ──
   Un bicho verde contento si aciertas, uno coral pachucho si fallas. */
.lesson-foot .verdict.show{display:flex;align-items:center;gap:var(--s3)}
.lesson-foot.ok .verdict.show::before,.lesson-foot.no .verdict.show::before{content:"";flex:0 0 52px;height:52px;
  background:center/contain no-repeat;animation:bote 520ms cubic-bezier(.3,1.6,.5,1)}
.lesson-foot.ok .verdict.show::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c15 0 28 9 28 27S47 60 32 60 4 49 4 31 17 4 32 4z' fill='%231F7A44'/%3E%3Ccircle cx='23' cy='27' r='7.5' fill='white'/%3E%3Ccircle cx='41' cy='27' r='7.5' fill='white'/%3E%3Ccircle cx='24' cy='26' r='3.6' fill='%2317150F'/%3E%3Ccircle cx='42' cy='26' r='3.6' fill='%2317150F'/%3E%3Cpath d='M23 40q9 9 18 0' stroke='white' stroke-width='3.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.lesson-foot.no .verdict.show::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c15 0 28 9 28 27S47 60 32 60 4 49 4 31 17 4 32 4z' fill='%23EF5350'/%3E%3Ccircle cx='23' cy='28' r='7.5' fill='white'/%3E%3Ccircle cx='41' cy='28' r='7.5' fill='white'/%3E%3Ccircle cx='23' cy='31' r='3.6' fill='%2317150F'/%3E%3Ccircle cx='41' cy='31' r='3.6' fill='%2317150F'/%3E%3Cpath d='M24 46q8-7 16 0' stroke='white' stroke-width='3.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
@keyframes bote{0%{transform:scale(.3) rotate(-12deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
.lesson-foot.ok .verdict b{color:var(--bosque)}
.lesson-foot.no .verdict b{color:var(--coral-osc)}
.lesson-foot.ok .verdict span{color:var(--bosque)}
.lesson-foot.no .verdict span{color:var(--coral-osc)}

/* ── Confeti del acierto ── */
.confeti{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:600;
  animation:confeti 900ms cubic-bezier(.2,.7,.4,1) forwards}
@keyframes confeti{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@media (prefers-reduced-motion:reduce){.confeti{display:none}}

/* ── Micro: verde bosque, y al grabar el degradado sube en verde bosque ── */
.mic-dock .mic{background:var(--prim);border:0;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--prim) 90%,transparent)}
.mic-dock .mic svg{fill:#fff}

/* ── HUD de arriba: pastillas blancas ── */
.hud-chip{background:var(--blanco) !important;border:0 !important;box-shadow:var(--sombra) !important;font-weight:800;color:var(--tinta)}
.hud-chip.streak .i{fill:var(--naranja)}
.hud-chip.gems .i{fill:var(--azul)}

/* ── Barra de pestañas flotante: la activa es una pastilla naranja con nombre ── */
#tabbar{margin:0 var(--s4) calc(var(--safe-b) + var(--s2));padding:6px;border:0 !important;border-radius:999px;
  background:var(--blanco) !important;box-shadow:0 12px 30px -14px rgba(23,21,15,.35);gap:2px}
.tab{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
  padding:12px 0;border-radius:999px;color:var(--gris) !important;
  transition:flex-grow 260ms cubic-bezier(.2,.8,.2,1),background-color 200ms,color 200ms}
.tab span{display:none;font-size:14px;font-weight:800;letter-spacing:0}
.tab.active{flex:2.2;background:var(--naranja);color:#fff !important}
.tab.active span{display:inline}
.tab.active svg{stroke-width:2.2}

/* ── Inicio: la sesión como una tarjeta de color con su bicho ── */
.home-hero{position:relative;overflow:hidden;margin-top:var(--s2);padding:var(--s5) var(--s5) var(--s5);
  border-radius:28px;background:var(--prim);box-shadow:0 18px 36px -20px color-mix(in srgb,var(--prim) 90%,transparent)}
.home-hero .arc-card{position:relative;text-align:left;padding:0;width:62%}
.home-hero .arc{display:none}
.home-hero .arc-inner{margin:0}
.home-hero .arc-badge{color:rgba(255,255,255,.75);font-weight:700;font-size:15px;max-width:none;text-transform:none;letter-spacing:0}
.home-hero .arc-num{color:#fff;font-weight:800;font-size:56px;margin:2px 0 0;letter-spacing:-.04em}
.home-hero .arc-cap{color:rgba(255,255,255,.85);font-weight:600;font-size:16px}
.home-hero .cta{position:relative;margin-top:var(--s5);background:#fff;color:var(--prim);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6)}
.home-hero .cta .cta-sub{color:var(--prim);opacity:.7}
.hh-bicho{position:absolute;right:-6px;top:14px;width:128px;height:128px;transform:rotate(8deg);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6c22 0 52 16 52 50 0 30-22 58-52 58S8 92 8 58C8 26 38 6 60 6z' fill='%23FF6B35'/%3E%3Ccircle cx='44' cy='52' r='12' fill='white'/%3E%3Ccircle cx='76' cy='52' r='12' fill='white'/%3E%3Ccircle cx='47' cy='50' r='6' fill='%2317150F'/%3E%3Ccircle cx='79' cy='50' r='6' fill='%2317150F'/%3E%3Ccircle cx='49' cy='47' r='2' fill='white'/%3E%3Ccircle cx='81' cy='47' r='2' fill='white'/%3E%3Cpath d='M46 76q14 13 28 0' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='70' r='5' fill='%23FFB199'/%3E%3Ccircle cx='86' cy='70' r='5' fill='%23FFB199'/%3E%3C/svg%3E");
  animation:flota 3.2s ease-in-out infinite}
.hh-chispa{position:absolute;right:112px;top:18px;width:26px;height:26px;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23FFD23F'/%3E%3C/svg%3E");
  animation:brilla 2.4s ease-in-out infinite}
@keyframes flota{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
@keyframes brilla{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(25deg)}}
.mini-card{background:var(--blanco) !important;border:0 !important;border-radius:22px;box-shadow:var(--sombra) !important}
.mini-card .mini-k{color:var(--tinta) !important;font-weight:800}
.racha-hoy{background:var(--blanco);border:0;border-radius:24px;box-shadow:var(--sombra)}
.rh-bar{height:10px;border-radius:5px;background:#EFE9E0}
.rh-bar i{background:var(--naranja) !important;border-radius:5px}
.racha-hoy.ok .rh-bar i{background:var(--bosque) !important}

/* ── Ruta en lista ── */
.les-n{width:36px;height:36px;border-radius:12px;font-weight:800;font-size:15px;border:0 !important;
  background:#EFE9E0;color:var(--gris);box-shadow:none}
.les.viva .les-n,.les.open .les-n{background:var(--bosque-claro);color:var(--bosque)}
.les.current .les-n{background:var(--prim);color:#fff}
.les.done .les-n{background:var(--bosque) !important;color:#fff !important}
.les-r{font-weight:800;color:var(--bosque)}
.les-t{font-weight:800}
.les-b{flex:1;min-width:0}
.view-btn.active{background:var(--tinta) !important;color:var(--papel) !important}
.blk-t{font-weight:800}
.blk-n{font-weight:800;color:var(--bosque);background:var(--bosque-claro);padding:2px 8px;border-radius:8px}

/* ── Ajustes: tarjetas blancas como el resto ── */
.set-card{background:var(--blanco);border:0;box-shadow:var(--sombra);border-radius:22px}
.set-card .setting-row select{color:var(--prim)}
.set-card .setting-row:has(select)::after{border-color:var(--prim)}
.set-card .mini-btn{color:var(--prim);border-color:color-mix(in srgb,var(--prim) 30%,transparent);background:var(--prim-claro)}
.hoja-op.on{color:var(--prim);border-color:var(--prim);background:var(--prim-claro)}
.hoja-op svg{stroke:var(--prim)}

/* Grabando: el degradado sube en el color principal (violeta), no en verde. */
#screen-lesson::after{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--prim) 16%,transparent) 35%,
  color-mix(in srgb,var(--prim) 70%,transparent) 72%,var(--prim) 100%)}
body.grabando .mic-dock .mic svg{fill:var(--prim)}
.ses-donde{color:var(--prim) !important;font-weight:700}
.hh-bicho{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6c22 0 52 16 52 50 0 30-22 58-52 58S8 92 8 58C8 26 38 6 60 6z' fill='%23FFD23F'/%3E%3Ccircle cx='44' cy='52' r='12' fill='white'/%3E%3Ccircle cx='76' cy='52' r='12' fill='white'/%3E%3Ccircle cx='47' cy='50' r='6' fill='%2317150F'/%3E%3Ccircle cx='79' cy='50' r='6' fill='%2317150F'/%3E%3Ccircle cx='49' cy='47' r='2' fill='white'/%3E%3Ccircle cx='81' cy='47' r='2' fill='white'/%3E%3Cpath d='M46 74q14 14 28 0' stroke='%2317150F' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='70' r='6' fill='%23FF9DB5'/%3E%3Ccircle cx='86' cy='70' r='6' fill='%23FF9DB5'/%3E%3C/svg%3E")}
.hh-chispa{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23FF9DB5'/%3E%3C/svg%3E")}

/* ═══════════ Estilo «Lima y negro» (Ajustes › Estilo) ═══════════
   La otra referencia que le gustó: lima con negro, plano. Mismas piezas, otros
   colores: botones negros, la tarjeta de inicio en lima con letra negra, la
   pestaña activa negra con texto lima y el bicho en negro. */
html[data-estilo="lima"]{
  --lima:#B7D957; --lima-osc:#9BBF3C; --lima-claro:#EEF6D6;
  --prim:#161616; --prim-osc:#000; --prim-claro:var(--lima-claro);
  --naranja:#161616;
}
html[data-estilo="lima"] .home-hero{background:var(--lima);box-shadow:0 18px 36px -22px rgba(80,110,20,.7)}
html[data-estilo="lima"] .home-hero :is(.arc-badge,.arc-cap){color:rgba(22,22,22,.7)}
html[data-estilo="lima"] .home-hero .arc-num{color:#161616}
html[data-estilo="lima"] .home-hero .cta{background:#161616;color:var(--lima)}
html[data-estilo="lima"] .home-hero .cta .cta-sub{color:#fff;opacity:.7}
html[data-estilo="lima"] .tab.active{background:#161616;color:var(--lima) !important}
html[data-estilo="lima"] .prog-fill{background:#161616}
html[data-estilo="lima"] .opt.sel,html[data-estilo="lima"] .syl.sel{border-color:#161616 !important;background:var(--lima-claro) !important;color:#161616}
html[data-estilo="lima"] .build-slot .tile{border-color:#161616;color:#161616;background:var(--lima-claro)}
html[data-estilo="lima"] .cta,html[data-estilo="lima"] .check:not(:disabled):not(.ok):not(.no){color:var(--lima)}
html[data-estilo="lima"] .mic-dock .mic svg{fill:var(--lima)}
html[data-estilo="lima"] #screen-lesson::after{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--lima) 25%,transparent) 35%,
  color-mix(in srgb,var(--lima) 80%,transparent) 72%,var(--lima) 100%)}
html[data-estilo="lima"] body.grabando .mic-dock .heard{color:#161616}
html[data-estilo="lima"] body.grabando .mic-dock .mic{background:#161616}
html[data-estilo="lima"] body.grabando .mic-dock .mic svg{fill:var(--lima)}
html[data-estilo="lima"] .hh-bicho{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6c22 0 52 16 52 50 0 30-22 58-52 58S8 92 8 58C8 26 38 6 60 6z' fill='%23161616'/%3E%3Ccircle cx='44' cy='52' r='12' fill='white'/%3E%3Ccircle cx='76' cy='52' r='12' fill='white'/%3E%3Ccircle cx='47' cy='50' r='6' fill='%23161616'/%3E%3Ccircle cx='79' cy='50' r='6' fill='%23161616'/%3E%3Ccircle cx='49' cy='47' r='2' fill='white'/%3E%3Ccircle cx='81' cy='47' r='2' fill='white'/%3E%3Cpath d='M46 74q14 14 28 0' stroke='%23B7D957' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
html[data-estilo="lima"] .hh-chispa{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='white'/%3E%3C/svg%3E")}
html[data-estilo="lima"] .les.current .les-n{background:#161616;color:var(--lima)}
html[data-estilo="lima"] .set-card .setting-row select{color:#161616}
html[data-estilo="lima"] .set-card .setting-row:has(select)::after{border-color:#161616}

/* Sin cuadrícula: papel liso. */
body{background-image:none}
/* El panel de corregir no es un bloque recortado: es un degradado que nace
   transparente arriba y se llena de color hacia el botón. */
.lesson-foot::before{border-radius:0;top:-56px;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bosque-claro) 85%,transparent) 38%,var(--bosque-claro) 100%)}
.lesson-foot.no::before{
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--coral-claro) 85%,transparent) 38%,var(--coral-claro) 100%)}

/* ── Práctica: tarjetas con bichito ── */
.prac-card{background:var(--blanco) !important;border:0 !important;border-radius:22px;box-shadow:var(--sombra) !important;
  padding:var(--s4);transition:transform 120ms ease}
.prac-card:active{transform:scale(.97)}
.prac-card b{font-weight:800;font-size:15.5px;margin-top:var(--s2)}
.prac-i,.be-ico{position:relative;width:60px;height:60px;border:0 !important;border-radius:0;
  background:none !important;box-shadow:none !important;display:block}
.prac-i .bicho,.be-ico .bicho{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 8px rgba(23,21,15,.12));
  transition:transform 260ms cubic-bezier(.3,1.6,.5,1)}
.prac-card:active .bicho,.big-entry:active .bicho{transform:scale(.9) rotate(-6deg)}
.prac-chapa{position:absolute;right:-6px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--blanco);box-shadow:0 2px 6px rgba(23,21,15,.15)}
.prac-chapa svg{width:15px !important;height:15px !important;fill:none !important;stroke:var(--pc,var(--tinta)) !important;
  stroke-width:2 !important;stroke-linecap:round;stroke-linejoin:round}
.big-entry{background:var(--blanco) !important;border:0 !important;border-radius:22px;box-shadow:var(--sombra) !important}
.big-entry b{font-weight:800}
.be-ico{width:56px;height:56px}
#entry-review{--pc:var(--p-blue)} #entry-mistakes{--pc:var(--coral)} #entry-garden{--pc:var(--p-sage)}

/* Es una app, no una web: nada de seleccionar texto ni del menú de copiar al
   mantener el dedo. Solo los campos donde se escribe siguen dejando. */
html,body,#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text !important;user-select:text !important;-webkit-touch-callout:default !important}
img,svg{-webkit-user-drag:none}
#tabbar{touch-action:none}
#entry-azar{--pc:var(--p-sand)}

/* ═══════════ Mapa ilustrado (30 oct 2026) ═══════════
   Un camino ancho y blanco, como de tablero, con la raya del centro a trazos
   y en verde por donde ya has pasado. Nodos macizos; la lección que toca es
   un bicho que bota con su bocadillo. El paisaje en pastel: apagado donde no
   has llegado y con todo su color donde ya has pasado. */
.mp-road{stroke:var(--blanco);stroke-width:30;stroke-dasharray:none;filter:drop-shadow(0 6px 10px rgba(23,21,15,.08))}
.mp-seg{stroke:#E4DCCE;stroke-width:4;stroke-dasharray:3 12}
.mp-seg.on{stroke:var(--bosque);stroke-width:8;stroke-dasharray:none}
.mp-node{width:58px;height:58px;border:0 !important;font-size:20px;font-weight:800;
  background:var(--blanco) !important;color:var(--sec);
  box-shadow:0 10px 20px -10px rgba(23,21,15,.35),inset 0 0 0 3px color-mix(in srgb,var(--sec) 30%,transparent) !important}
.mp-node b{font-weight:800}
.mp-node.done{background:var(--bosque) !important;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--bosque) 90%,transparent) !important}
.mp-node.locked{opacity:1;background:#ECE6DD !important;color:#B3ACA1;box-shadow:none !important}
.mp-node.toca{width:84px;height:84px;background:none !important;border:0 !important;box-shadow:none !important;
  animation:mpEntra 420ms var(--ease) backwards,mpBota 1.8s ease-in-out 600ms infinite}
.mp-node.toca .bicho{width:100%;height:100%;filter:drop-shadow(0 10px 12px rgba(23,21,15,.22))}
@keyframes mpBota{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
.mp-aqui{background:var(--blanco) !important;color:var(--tinta) !important;font-weight:800;border:0 !important;
  border-radius:16px;box-shadow:var(--sombra) !important}
.mp-label span{background:var(--blanco);font-weight:800;color:var(--tinta);border-radius:12px;
  box-shadow:0 4px 12px -6px rgba(23,21,15,.25);padding:3px 9px}
.mp-sep span{background:var(--blanco);border-radius:999px;padding:6px 14px;box-shadow:var(--sombra);font-weight:800;color:var(--tinta)}
.mp-sep::before,.mp-sep::after{background:#E4DCCE}
/* Paisaje pastel */
.mp-svg .mp-crown{fill:#E9E2F6}
.mp-svg .mp-leaf{fill:#F2EDFB}
.mp-svg .mp-trunk{stroke:#CDBFAE;stroke-width:2.2}
.mp-svg .mp-grass{fill:#DDE9CF}
.mp-svg .mp-bush{fill:#CFE0BD}
.mp-svg .mp-stem{stroke:#C9D9B4}
.mp-svg .mp-petal{fill:#F6D7E1}
.mp-svg .mp-pollen{fill:#F4D58A}
.mp-plant.alive .mp-crown{fill:#8ED081}
.mp-plant.alive.t2 .mp-crown{fill:#FFC857}
.mp-plant.alive.t3 .mp-crown{fill:#B49CF5}
.mp-plant.alive .mp-leaf{fill:#C9EFC1}
.mp-plant.alive .mp-trunk{stroke:#9C7653}
.mp-plant.alive .mp-grass{fill:#7FC77A}
.mp-plant.alive .mp-bush{fill:#5DB46A}
.mp-plant.alive .mp-petal{fill:#FF7AA2}
.mp-plant.alive .mp-pollen{fill:#FFD23F}
.mp-svg .mp-plant:not(.alive) .mp-crown{fill:#E9E2F6}
.mp-svg .mp-plant:not(.alive) .mp-leaf{fill:#F2EDFB}
.mp-svg .mp-plant:not(.alive) .mp-grass{fill:#DDE9CF}
.mp-svg .mp-plant:not(.alive) .mp-petal{fill:#F6D7E1}
.mp-svg .mp-plant:not(.alive) .mp-trunk{stroke:#CDBFAE}
.mp-svg .mp-plant:not(.alive) .mp-stem{stroke:#C9D9B4}
.mp-svg .mp-plant:not(.alive) .mp-bush{fill:#CFE0BD}

/* ═══════════ Progreso ilustrado (30 oct 2026) ═══════════
   Inspirado en las referencias (Langvi): la tarjeta del mes con el sol, tres
   cifras con icono, un calendario de caritas y las habilidades en barras. */
.ico{display:block;width:40px;height:40px;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.pg-h{margin-top:28px !important}
.pg-mes{position:relative;display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);padding:var(--s4) var(--s5);
  border-radius:28px;background:var(--prim);color:#fff;overflow:hidden;min-height:132px;
  box-shadow:0 18px 36px -22px color-mix(in srgb,var(--prim) 90%,transparent)}
.pg-sol{width:118px;height:118px;flex:0 0 auto;margin:-10px -6px -14px -14px;animation:flota 3.2s ease-in-out infinite}
.pg-mes-t span{font-size:13px;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.pg-mes-t b{display:block;font-size:22px;font-weight:800;line-height:1.15;margin-top:2px}
.pg-mes-t i{display:block;font-style:normal;font-size:14px;opacity:.85;margin-top:4px;font-weight:600}
.pg-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.pg-cifra{padding:var(--s3);border-radius:22px;background:color-mix(in srgb,var(--cc) 14%,var(--blanco));
  display:grid;justify-items:start;gap:2px}
.pg-cifra .ico{width:34px;height:34px;margin-bottom:4px}
.pg-cifra b{font-size:22px;font-weight:800;color:var(--tinta);letter-spacing:-.02em}
.pg-cifra span{font-size:12.5px;font-weight:700;color:var(--gris)}
.pg-cal-dias,.pg-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pg-cal-dias span{text-align:center;font-size:12px;font-weight:800;color:var(--gris);margin-bottom:4px}
.pg-dia{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;background:#ECE6DD}
.pg-dia svg{width:78%;height:78%}
.pg-dia.algo{background:#FFE58A}
.pg-dia.meta{background:#B9E8A0}
.pg-dia.futuro{background:transparent;box-shadow:inset 0 0 0 1.5px #E4DCCE}
.pg-dia.hoy{box-shadow:0 0 0 3px var(--prim)}
.pg-hab{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);border-radius:24px;background:var(--blanco);box-shadow:var(--sombra)}
.pg-hab-f{display:grid;grid-template-columns:34px 76px 1fr 44px;align-items:center;gap:var(--s2)}
.pg-hab-f .ico{width:32px;height:32px}
.pg-hab-t{font-weight:800;font-size:14.5px}
.pg-hab-bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--hc) 14%,#fff);overflow:hidden}
.pg-hab-bar i{display:block;height:100%;border-radius:999px;background:var(--hc);transition:width 600ms cubic-bezier(.3,1.2,.5,1)}
.pg-hab-f b{text-align:right;font-weight:800;font-size:14px;color:var(--tinta)}
/* Tu colección: tarjetas con barra de tres tramos. */
.col-u{padding:var(--s3) var(--s4);border-radius:20px;background:var(--blanco);box-shadow:var(--sombra);margin-bottom:var(--s2)}
.col-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.col-h b{font-weight:800;font-size:15px}
.col-h span{font-weight:800;font-size:13px;color:var(--bosque);background:var(--bosque-claro);padding:2px 9px;border-radius:999px}
.col-bar{display:flex;height:10px;border-radius:999px;background:#EFE9E0;overflow:hidden;margin-top:var(--s2)}
.col-bar i{display:block;height:100%}
.col-bar .d{background:var(--bosque)} .col-bar .r{background:var(--prim)} .col-bar .a{background:var(--amarillo)}
.col-u.full{background:var(--bosque-claro)}
.col-mas{width:100%;padding:var(--s3);border-radius:999px;font-weight:800;color:var(--prim);background:var(--prim-claro);margin-top:var(--s2)}
#screen-progress .legend .dot.s-mastered{background:var(--bosque)}
#screen-progress .legend .dot.s-review{background:var(--prim)}
#screen-progress .legend .dot.s-learning{background:var(--amarillo)}
#screen-progress .legend .dot.s-new{background:#E4DCCE}
.almost,.mile,.risk-card{background:var(--blanco) !important;border:0 !important;border-radius:22px !important;box-shadow:var(--sombra) !important}

/* ── Cifras de Inicio con icono, en pastel (como el «modo día») ── */
.mini-card.cifra{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  background:color-mix(in srgb,var(--cc) 13%,var(--blanco)) !important;box-shadow:none !important;border-radius:24px}
.mini-card.cifra .ico{width:46px;height:46px;flex:0 0 auto}
.mini-card.cifra .mini-k{font-size:26px;line-height:1.05}
.mini-card.cifra .mini-l{font-weight:700;color:var(--gris)}
.hud-chip .ico{width:20px;height:20px}
.hud-chip.ghost{color:var(--tinta) !important}
/* Inicio: botón de empezar en lima con letra oscura, como el modo día. */
.home-hero .cta{background:#C6F04B;color:#1E1B2E;box-shadow:0 10px 0 -4px #9CC22E,0 18px 26px -18px rgba(0,0,0,.5)}
.home-hero .cta .cta-sub{color:#1E1B2E;opacity:.65}
.home-hero .cta:active{transform:translateY(3px) scale(.99);box-shadow:0 5px 0 -4px #9CC22E}
.tab.active{background:var(--prim)}
html[data-estilo="lima"] .home-hero .cta{background:#161616;color:var(--lima);box-shadow:0 18px 26px -18px rgba(0,0,0,.5)}

/* ── Práctica: icono ilustrado sobre una pastilla de su color (como Finch) ── */
.prac-i,.be-ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pc,var(--prim)) 16%,var(--blanco)) !important}
.prac-i .ico,.be-ico .ico{width:42px;height:42px;transition:transform 260ms cubic-bezier(.3,1.6,.5,1)}
.prac-card:active .ico,.big-entry:active .ico{transform:scale(.88) rotate(-8deg)}
#entry-mistakes{--pc:var(--p-rose)}

/* ── Ruta en lista, al estilo Finch: cada lección es una tarjeta ── */
.blk-list{display:grid;gap:10px;border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;overflow:visible !important}
.les{background:var(--blanco) !important;border:0 !important;border-radius:22px;box-shadow:var(--sombra);
  padding:var(--s3) var(--s4) var(--s3) var(--s3);transition:transform 120ms ease}
.les:active{transform:scale(.98)}
.les-n{width:52px;height:52px;border-radius:16px;font-size:20px;font-weight:800;flex:0 0 auto;
  background:color-mix(in srgb,var(--prim) 14%,var(--blanco)) !important;color:var(--prim) !important}
.les-n .ico{width:36px;height:36px}
.les.current .les-n{background:color-mix(in srgb,#FFD23F 30%,var(--blanco)) !important}
.les.current .les-n .ico{width:46px;height:46px}
.les.done .les-n{background:var(--bosque-claro) !important}
.les.locked{opacity:1}
.les.locked .les-n{background:#EFE9E0 !important}
.les.locked .les-t,.les.locked .les-c{color:#A8A196}
.les.current{box-shadow:0 0 0 2.5px var(--prim),var(--sombra)}
.les-r{min-width:48px;text-align:center;padding:6px 8px;border-radius:12px;background:var(--bosque-claro);color:var(--bosque);font-size:13.5px}
.les-c{font-size:13px;color:var(--gris);font-weight:600}
.blk-exam .les-n{background:color-mix(in srgb,#FFD23F 30%,var(--blanco)) !important}
.blk{margin-bottom:var(--s5)}
.blk-why{color:var(--gris);font-weight:600}

/* ═══════════ Perfil ilustrado (30 oct 2026) ═══════════ */
.me-card{background:var(--prim) !important;border:0 !important;border-radius:28px;color:#fff;
  box-shadow:0 18px 36px -22px color-mix(in srgb,var(--prim) 90%,transparent);padding:var(--s5)}
.me-card .me-name{color:#fff;font-weight:800}
.me-card .me-handle{color:#C6F04B;font-weight:700}
.me-av{border:4px solid rgba(255,255,255,.9) !important;background:#FFD23F !important;color:#1E1B2E !important;font-weight:800}
.me-edit{background:rgba(255,255,255,.18) !important;border:0 !important}
.me-edit svg{stroke:#fff !important}
.me-rank{background:rgba(255,255,255,.14);border:0 !important;border-radius:20px;padding:var(--s3)}
.me-rank-ico{width:58px;height:58px;background:none !important;border:0 !important}
.me-rank-ico .ico{width:58px !important;height:58px !important}
.me-rank-txt b{color:#fff;font-weight:800}
.me-rank-txt i{color:rgba(255,255,255,.75)}
.me-keep-t{color:rgba(255,255,255,.9) !important}
.me-keep-t b{color:#C6F04B !important}
.me-keep-rail{background:rgba(255,255,255,.2) !important;height:10px !important;border-radius:999px !important}
.me-keep-rail i{background:#C6F04B !important;border-radius:999px}
.me-card .xp-rail,.me-lvl .xp-rail{background:#E9E3DA;height:8px;border-radius:999px;width:180px}
.xp-rail i{background:var(--prim) !important;border-radius:999px}
.ach{background:var(--blanco) !important;border:0 !important;border-radius:20px;box-shadow:var(--sombra);padding:var(--s3)}
.ach.off{opacity:1}
.ach.off .ach-t,.ach.off .ach-s{color:#ABA59B}
.ach-i{width:46px;height:46px;border:0 !important;border-radius:14px;background:color-mix(in srgb,#FFD23F 22%,var(--blanco)) !important}
.ach.off .ach-i{background:#EFE9E0 !important}
.ach-i .ico{width:34px;height:34px}
.ach-t{font-weight:800;font-size:14px}
.ach-s{font-size:12.5px}

/* ── Mapa: prado ilustrado ── */
#route-canvas{border-radius:28px;overflow:hidden;background:#CFE8B4 url("/static/img/mapa/suelo.svg") 0 0/100% auto repeat-y;
  margin-left:calc(var(--pad) * -.5);margin-right:calc(var(--pad) * -.5)}
.mp-cabecera{position:absolute;left:0;top:0;width:100%;object-fit:cover;object-position:bottom;pointer-events:none;z-index:0}
.mp-svg{z-index:1}
.mp-prop{position:absolute;z-index:1;pointer-events:none;filter:saturate(.35) brightness(1.05);opacity:.85;
  animation:propEntra 480ms cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 45ms);transform-origin:bottom center}
@keyframes propEntra{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.mp-prop.vivo{filter:none;opacity:1}
.mp-prop.destello{filter:none;opacity:1;animation:brilla 2.4s ease-in-out infinite}
.mp-node,.mp-label,.mp-sep,.mp-aqui,.mp-meta,.mp-meta-txt,.mp-examen-arriba{z-index:3}
.mp-road{stroke:#F1D7A9 !important;filter:none !important}
.mp-seg{stroke:#E2BF85 !important}
.mp-seg.on{stroke:var(--bosque) !important}
.mp-sep{z-index:3}
.mp-sep::before,.mp-sep::after{background:rgba(255,255,255,.6) !important}
.mp-node.toca .ico{width:100%;height:100%;filter:drop-shadow(0 10px 12px rgba(23,21,15,.25))}

/* ── El sol en el panel de corregir y en Inicio ── */
.lesson-foot.ok .verdict.show::before{background-image:url("/static/img/ui/sol-feliz.svg") !important;flex-basis:66px;height:66px;margin:-8px 0 -6px}
.lesson-foot.no .verdict.show::before{background-image:url("/static/img/ui/sol-triste.svg") !important;flex-basis:66px;height:66px;margin:-8px 0 -6px}
.hh-bicho,html[data-estilo="lima"] .hh-bicho{background-image:url("/static/img/ui/sol.svg") !important;width:150px;height:150px;right:-14px;top:-2px;transform:none}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
/* Plantas ilustradas del vocabulario */
img.gd-plant{display:block;object-fit:contain;-webkit-user-drag:none}
img.gd-plant.seca{filter:saturate(.25) sepia(.35);transform:rotate(-6deg);transform-origin:bottom center}
/* La lista de lecciones no puede ser más ancha que la pantalla: en una
   rejilla, cada fila crece hasta su texto más largo si no se le dice. */
.blk-list{grid-template-columns:minmax(0,1fr)}
.les{min-width:0;box-sizing:border-box;width:100%}
.les-c{overflow:hidden;text-overflow:ellipsis}
.les-b{flex:1 1 auto;min-width:0}
.les-c{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.les-r,.les-soon{flex:0 0 auto;position:static;margin-left:var(--s2)}

/* ── Sol de Inicio: grande, con racha y bocadillo en inglés ── */
.home-hero{padding-top:var(--s4);min-height:300px}
.hh-sol{position:absolute;right:-18px;top:-8px;width:210px;height:210px;padding:0;background:none;border:0;z-index:1}
.hh-sol img{width:100%;height:100%;display:block;animation:flota 3.2s ease-in-out infinite;
  filter:drop-shadow(0 14px 18px rgba(30,20,80,.35))}
.hh-sol img.salta{animation:solSalta 520ms cubic-bezier(.3,1.6,.5,1),flota 3.2s ease-in-out 520ms infinite}
@keyframes solSalta{0%{transform:scale(1)}35%{transform:scale(1.12) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:none}}
.hh-racha{position:absolute;right:62px;bottom:6px;display:flex;align-items:center;gap:3px;padding:3px 10px 3px 6px;
  border-radius:999px;background:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);font-weight:800;color:#1E1B2E;font-size:15px}
.hh-racha img{width:20px;height:20px}
.hh-chispa{right:196px !important;top:150px !important}
.hh-bocadillo{position:relative;z-index:2;display:block;text-align:left;max-width:calc(100% - 178px);min-height:58px;
  padding:10px 14px;border-radius:20px 20px 6px 20px;background:#fff;color:#1E1B2E;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.5);margin-bottom:var(--s3)}
.hh-bocadillo::after{content:"";position:absolute;right:-9px;bottom:6px;border:9px solid transparent;border-left-color:#fff;border-right:0}
.hh-bocadillo b{display:block;font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.hh-bocadillo i{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--prim);max-height:0;opacity:0;overflow:hidden;
  transition:max-height 260ms ease,opacity 200ms ease,margin 260ms ease}
.hh-bocadillo.traducido i{max-height:40px;opacity:1;margin-top:4px}
.hh-bocadillo.entra{animation:bocaEntra 420ms cubic-bezier(.3,1.5,.5,1)}
@keyframes bocaEntra{from{opacity:0;transform:scale(.7) translateY(8px);transform-origin:right bottom}to{opacity:1;transform:none}}
.home-hero .arc-card{width:56%;position:relative;z-index:2}
.home-hero .arc-num{font-size:48px}
.home-hero .cta{z-index:2}

/* Fondo: más blanco, menos «color carne». */
:root{--papel:#FAF9F6; --pagina:#FAF9F6}

/* ═══════════ Ficha de la lección (30 oct 2026) ═══════════ */
#screen-map{position:relative}
.map-atras{position:absolute;left:var(--pad);top:var(--s2);z-index:5;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--blanco);box-shadow:var(--sombra)}
.map-atras svg{width:22px;height:22px;fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.map-atras:active{transform:scale(.92)}
.map-scroll{padding-top:56px !important}
.map-hero{position:relative;text-align:center;padding:var(--s4) var(--s4) var(--s5);border-radius:28px;
  background:linear-gradient(180deg,#E9F5DC,#F6FBEF);box-shadow:var(--sombra);overflow:hidden}
.map-ilus{display:block;width:210px;height:190px;margin:-6px auto 2px;object-fit:contain;
  animation:propEntra 520ms cubic-bezier(.3,1.5,.5,1) both}
.map-crumb{font-size:12.5px;font-weight:800;color:var(--prim);text-transform:uppercase;letter-spacing:.06em}
.map-t{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px;color:var(--tinta)}
.map-can{font-size:15px;font-weight:600;color:var(--gris);margin-top:6px}
.map-cifras{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.map-cifra{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4);border-radius:22px;background:color-mix(in srgb,var(--cc) 13%,var(--blanco))}
.map-cifra .ico{grid-row:1/3;width:40px;height:40px}
.map-cifra b{font-size:20px;font-weight:800;color:var(--tinta)}
.map-cifra span{font-size:12.5px;font-weight:700;color:var(--gris)}
.map-sec{margin-top:var(--s5)}
.map-sec-h{font-size:19px;font-weight:800;color:var(--tinta);margin-bottom:var(--s3);text-transform:none;letter-spacing:-.01em}
.map-point{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:18px;background:var(--blanco);
  box-shadow:var(--sombra);margin-bottom:8px;font-weight:600}
.map-point .ico{width:26px;height:26px;flex:0 0 auto}
.map-trap{display:flex;align-items:flex-end;gap:var(--s2);margin-top:var(--s3);padding:0 !important;background:none !important;border:0 !important}
.map-trap img{width:84px;height:92px;flex:0 0 auto;object-fit:contain}
.map-trap div{position:relative;padding:var(--s3) var(--s4);border-radius:20px 20px 20px 6px;background:var(--prim-claro);
  font-size:14.5px;line-height:1.4;color:var(--tinta)}
.map-trap b{display:block;color:var(--prim);font-weight:800;margin-bottom:2px}
.map-parts{display:grid;gap:8px}
.map-part{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:18px;background:var(--blanco);box-shadow:var(--sombra)}
.map-part .ico{width:34px;height:34px;flex:0 0 auto}
.map-part b{display:block;font-weight:800}
.map-part i{display:block;font-style:normal;font-size:13px;color:var(--gris);font-weight:600}
.map-soon{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:20px;background:var(--blanco);box-shadow:var(--sombra);font-weight:600}
.map-soon img{width:96px;height:72px;object-fit:contain}
.map-foot{padding:var(--s3) var(--pad) calc(var(--safe-b) + var(--s3));background:linear-gradient(180deg,transparent,var(--pagina) 30%)}

/* ═══════════ Rosa suave (30 oct 2026) ═══════════
   El lila es del mapache, el protagonista: la app no puede ir del mismo
   color o se lo come. Todo lo que era violeta pasa a rosa; el fondo, blanco
   con un pelín de rosa. El lila se queda solo para «lo que has elegido». */
:root{
  --prim:#FF4F8B; --prim-osc:#E23574; --prim-claro:#FFE6EE;
  --papel:#FFF9FB; --pagina:#FFF9FB;
  --coral:#F0483F; --coral-osc:#C9302A;
}
.home-hero{background:linear-gradient(160deg,#FF8DB0 0%,#FF5C93 100%) !important;
  box-shadow:0 18px 36px -22px rgba(226,53,116,.9) !important}
.me-card,.pg-mes{background:linear-gradient(160deg,#FF8DB0 0%,#FF5C93 100%) !important}
.map-hero{background:linear-gradient(180deg,#FFE9F0,#FFF6F9) !important}

/* ═══════════ Ejercicios con vida (30 oct 2026) ═══════════ */
/* El mapache con la consigna en un bocadillo. */
.ex-cabecera{align-items:center !important}
.ex-mapache{width:64px;height:70px;flex:0 0 auto;object-fit:contain;margin:-4px -4px -6px -6px}
.ex-mapache.entra{animation:mapacheEntra 520ms cubic-bezier(.3,1.6,.5,1)}
@keyframes mapacheEntra{0%{transform:translateY(10px) scale(.7);opacity:0}60%{transform:translateY(-3px) scale(1.06)}100%{transform:none;opacity:1}}
#screen-lesson .ex-label:not(:empty){position:relative;padding:10px 14px !important;border-radius:18px 18px 18px 6px !important;
  background:var(--blanco) !important;box-shadow:var(--sombra);font-size:17px !important;flex:0 1 auto}
#screen-lesson .ex-label:not(:empty)::before{content:"";position:absolute;left:-7px;bottom:8px;border:8px solid transparent;
  border-right-color:var(--blanco);border-left:0}
#screen-lesson .ex-label:empty{display:none}
/* En el panel de corregir: el mapache celebra o se pone triste. */
.lesson-foot.ok .verdict.show::before{background-image:url("/static/img/mapache/feliz.svg") !important;flex-basis:74px;height:80px;margin:-16px 0 -8px}
.lesson-foot.ok.racha .verdict.show::before{background-image:url("/static/img/mapache/celebra.svg") !important}
.lesson-foot.no .verdict.show::before{background-image:url("/static/img/mapache/triste.svg") !important;flex-basis:74px;height:80px;margin:-16px 0 -8px}

/* ═══════════ Ranking ilustrado (30 oct 2026) ═══════════ */
.rangos{background:var(--pagina) !important}
.rg-top{position:relative;z-index:3}
.rg-x{background:rgba(255,255,255,.85) !important;border-radius:50%;box-shadow:var(--sombra)}
.rg-tab{border-radius:999px !important;font-weight:800 !important}
.rg-tab.on{background:var(--prim) !important;color:#fff !important}
.rg-head{position:relative;margin:var(--s2) var(--pad) 0;padding:var(--s5) var(--s4) var(--s5);border-radius:28px;
  background:linear-gradient(160deg,#FF8DB0 0%,#FF5C93 100%);color:#fff;text-align:center;overflow:hidden;
  box-shadow:0 18px 36px -22px rgba(226,53,116,.9)}
.rg-head::before{content:"";position:absolute;left:50%;top:70px;width:320px;height:320px;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.16) 0deg 10deg,transparent 10deg 24deg);
  border-radius:50%;animation:rayosGiran2 30s linear infinite;pointer-events:none}
@keyframes rayosGiran2{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rg-medal{position:relative;width:132px;height:132px;margin:0 auto;animation:flota 3.2s ease-in-out infinite}
.rg-medal img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(120,20,60,.35))}
.rg-mapache{position:absolute;right:6px;bottom:-6px;width:96px;height:104px;object-fit:contain;z-index:1}
.rg-name{position:relative;color:#fff !important;font-size:32px !important;font-weight:800;margin-top:var(--s2);
  clip:auto !important;width:auto !important;height:auto !important;overflow:visible !important}
.rg-pos{position:relative;color:rgba(255,255,255,.9) !important;font-weight:700}
.rg-note,.rg-keep{position:relative;color:#fff !important;opacity:.95;max-width:70%;margin:6px auto 0 !important;font-size:14px}
.rg-keep b{color:#FFF3A6 !important}
.rg-ladder{display:flex;gap:10px;overflow-x:auto;padding:var(--s4) var(--pad) var(--s2);scroll-snap-type:x mandatory}
.rg-step{flex:0 0 auto;width:86px;scroll-snap-align:center;display:grid;justify-items:center;gap:2px;padding:var(--s2);
  border-radius:20px;background:var(--blanco) !important;box-shadow:var(--sombra);border:0 !important;opacity:1 !important}
.rg-step-m{width:56px;height:56px;background:none !important;border:0 !important}
.rg-step-m img{width:100%;height:100%;object-fit:contain}
.rg-step-n{font-size:12.5px;font-weight:800;color:var(--tinta)}
.rg-step-x{font-size:11px;font-weight:700;color:var(--gris)}
.rg-step-g{font-size:11px;font-weight:800;color:var(--prim)}
.rg-step.futuro .rg-step-m img,.rg-step.bloqueado .rg-step-m img{filter:grayscale(.9) opacity(.55)}
.rg-step.actual{box-shadow:0 0 0 3px var(--prim),var(--sombra);transform:translateY(-3px)}
.rg-list{display:grid;gap:8px;padding:0 var(--pad)}
.rg-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:18px;background:var(--blanco) !important;
  box-shadow:var(--sombra);border:0 !important}
.rg-row.sube{background:color-mix(in srgb,var(--bosque) 9%,var(--blanco)) !important}
.rg-row.baja{background:color-mix(in srgb,var(--coral) 9%,var(--blanco)) !important}
.rg-row.yo{box-shadow:0 0 0 2.5px var(--prim),var(--sombra);background:var(--prim-claro) !important}
.rg-p{width:30px;text-align:center;font-weight:800;color:var(--gris)}
.rg-podio{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-weight:800;color:#fff}
.rg-podio.p1{background:linear-gradient(160deg,#FFD84D,#F2A900)}
.rg-podio.p2{background:linear-gradient(160deg,#E3E7EF,#A9B1C2)}
.rg-podio.p3{background:linear-gradient(160deg,#F2B07A,#C9773A)}
.rg-av{border-radius:50% !important;background:#FFD23F !important;color:#1E1B2E !important;font-weight:800}
.rg-n{font-weight:800;flex:1;min-width:0}
.rg-xp{font-weight:800;color:var(--prim)}
.rg-foot{padding:0 var(--pad);color:var(--gris);font-weight:600}
.rg-step.actual{background:var(--blanco) !important}
.rg-step.actual .rg-step-n{color:var(--prim) !important}
.rg-step.actual .rg-step-x,.rg-step.actual .rg-step-g{color:var(--gris) !important}
.rg-step.hecho .rg-step-n{color:var(--bosque) !important}
.rangos > *{flex-shrink:0}
.rg-head .rg-name{position:relative !important;width:auto !important;height:auto !important;clip-path:none !important;white-space:normal !important}

/* Semana de Inicio: una ficha por día. Llama si contó para la racha. */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:var(--s4)}
.wk{display:grid;justify-items:center;gap:4px}
.wk-t{width:100%;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:#EFEAE4}
.wk-t svg{width:76%;height:76%}
.wk-t img{width:74%;height:74%;animation:propEntra 480ms cubic-bezier(.3,1.5,.5,1) both}
.wk.algo .wk-t{background:#FFE58A}
.wk.racha .wk-t{background:var(--naranja-claro)}
.wk.hoy .wk-t{box-shadow:0 0 0 3px var(--prim)}
.wk-d{font-size:12px;font-weight:800;color:var(--gris)}
.pg-dia.racha{background:#FFE9DF}
.pg-dia img{width:70%;height:70%}
.rg-note,.rg-keep{max-width:calc(100% - 110px) !important;margin-left:0 !important;margin-right:auto !important;text-align:left;padding-left:var(--s2)}

/* Inicio: el mapache rapero grande y Sol, pequeño, flotando a su lado. */
.hh-sol{right:-6px !important;top:auto !important;bottom:96px;width:176px !important;height:194px !important}
.hh-sol #hh-mapache{width:100%;height:100%;display:block;object-fit:contain;animation:flota 3.4s ease-in-out infinite;
  filter:drop-shadow(0 14px 16px rgba(120,20,60,.35))}
.hh-sol #hh-mapache.salta{animation:solSalta 520ms cubic-bezier(.3,1.6,.5,1),flota 3.4s ease-in-out 520ms infinite}
.hh-sol .hh-sol-mini{position:absolute;left:-30px;top:-14px;width:62px;height:62px;animation:flota 2.6s ease-in-out .4s infinite;
  filter:drop-shadow(0 8px 10px rgba(120,20,60,.3))}
.home-hero{min-height:310px}
.hh-sol #hh-mapache{animation:none !important}

/* ═══════════ Mapache vivo ═══════════
   Cada parte con su movimiento. Los puntos de giro los trae el propio SVG
   (transform-box + transform-origin en cada grupo). */
.mapache-vivo{width:100%;height:100%;filter:drop-shadow(0 14px 16px rgba(120,20,60,.3))}
.mapache-vivo svg{width:100%;height:100%;display:block;overflow:visible}
.mapache-vivo .m-ojos{animation:mParpadeo 4.6s infinite}
.mapache-vivo .m-cola{animation:mCola 1.9s ease-in-out infinite alternate}
.mapache-vivo .m-oreja-izq{animation:mOreja 6s ease-in-out infinite}
.mapache-vivo .m-oreja-der{animation:mOreja 6s ease-in-out 2.3s infinite}
.mapache-vivo .m-cuerpo{animation:mRespira 3.2s ease-in-out infinite}
.mapache-vivo .m-cabeza{animation:mCabeza 4.4s ease-in-out infinite}
.mapache-vivo .m-cadena{animation:mCadena 3.2s ease-in-out infinite}
.mapache-vivo.pose-saluda .m-brazo-der,.mapache-vivo.pose-saluda .m-brazo-izq{animation:mSaluda 1.1s ease-in-out infinite alternate}
.mapache-vivo.pose-celebra .m-brazo-der,.mapache-vivo.pose-celebra .m-brazo-izq,
.mapache-vivo.pose-feliz .m-brazo-der,.mapache-vivo.pose-feliz .m-brazo-izq{animation:mBrazos .5s ease-in-out infinite alternate}
.mapache-vivo.pose-celebra,.mapache-vivo.pose-feliz{animation:mBote .5s ease-in-out infinite alternate}
.mapache-vivo.pose-duerme .m-cuerpo,.mapache-vivo.pose-duerme .m-cabeza{animation:mRespira 4.5s ease-in-out infinite}
.mapache-vivo.pose-duerme .m-ojos{animation:none}
@keyframes mParpadeo{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}97%{transform:scaleY(1)}98.5%{transform:scaleY(.1)}}
@keyframes mCola{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes mOreja{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-10deg)}88%{transform:rotate(4deg)}92%{transform:rotate(0)}}
@keyframes mRespira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes mCabeza{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}70%{transform:rotate(2deg)}}
@keyframes mCadena{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes mSaluda{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes mBrazos{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes mBote{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.mapache-vivo,.mapache-vivo *{animation:none !important}}
.hh-sol #hh-mapache{width:100%;height:100%}

/* Banner de Inicio: morado otra vez (el mapache ahora es verde y destaca
   encima), con el botón de empezar en el rosa de la app. */
.home-hero{background:linear-gradient(160deg,#7B5CF5 0%,#5A3BE0 100%) !important;
  box-shadow:0 18px 36px -22px rgba(74,40,200,.9) !important}
.home-hero .cta{background:var(--prim) !important;color:#fff !important;box-shadow:0 10px 0 -4px var(--prim-osc),0 18px 26px -18px rgba(0,0,0,.5) !important}
.home-hero .cta .cta-sub{color:#fff !important;opacity:.85}
.home-hero .cta:active{box-shadow:0 5px 0 -4px var(--prim-osc) !important}
.hh-bocadillo i{color:#5A3BE0 !important}
/* Flechita del gesto de atrás. */
.atras-flecha{position:fixed;left:8px;top:50%;z-index:900;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--blanco);box-shadow:var(--sombra);opacity:0;pointer-events:none;
  transform:translateY(-50%);transition:opacity 120ms ease}
.atras-flecha svg{width:22px;height:22px;fill:none;stroke:var(--prim);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* Lo que se elige o está activo vuelve al MORADO (pestaña, opción marcada,
   desplegables, la lección que toca…). El fondo sigue en rosa suave. */
:root{--prim:#6A4CF0; --prim-osc:#5236D6; --prim-claro:#EFEBFF}
/* Botón de empezar del banner: blanco con letras moradas. */
.home-hero .cta{background:#fff !important;color:#5A3BE0 !important;
  box-shadow:0 10px 0 -4px #D9D0FF,0 18px 26px -18px rgba(0,0,0,.5) !important}
.home-hero .cta .cta-sub{color:#5A3BE0 !important;opacity:.7}
.home-hero .cta:active{box-shadow:0 5px 0 -4px #D9D0FF !important}

/* ═══════════ Mundo del mapa (30 oct 2026) ═══════════ */
#route-canvas{background-color:#B4DB93;background-size:100% auto;background-repeat:repeat-y}
.mp-zona{position:absolute;left:0;width:100%;object-fit:cover;z-index:2;pointer-events:none}
.mp-hito{position:absolute;z-index:2;pointer-events:none;object-fit:contain;transform-origin:bottom center;
  animation:propEntra 520ms cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 50ms);
  filter:drop-shadow(0 8px 10px rgba(30,40,20,.18))}
.mp-hito.cerrado{filter:saturate(.25) brightness(1.08) drop-shadow(0 8px 10px rgba(30,40,20,.12));opacity:.8}
.mp-hito.hecho{animation:propEntra 520ms cubic-bezier(.3,1.5,.5,1) backwards,hitoVivo 3s ease-in-out 1s infinite;
  animation-delay:calc(var(--i,0) * 50ms),1s}
@keyframes hitoVivo{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-1deg)}}
.mp-prop{filter:none !important;opacity:1 !important}
.mp-node,.mp-label,.mp-sep,.mp-aqui,.mp-meta,.mp-meta-txt,.mp-examen-arriba{z-index:4 !important}
.mp-svg{z-index:1}
.mp-label span{white-space:normal}
.mp-label{width:120px !important}
/* Camino y suelo de cada mundo (el de arena se perdía en la playa). */
#route-canvas[data-mundo="a2"]{background-color:#F6E2BC}
#route-canvas[data-mundo="a2"] .mp-road{stroke:#E9C998 !important}
#route-canvas[data-mundo="a2"] .mp-seg{stroke:#DDB57C !important}
#route-canvas[data-mundo="b1"]{background-color:#DCD7E8}
#route-canvas[data-mundo="b1"] .mp-road{stroke:#F4F1F8 !important}
#route-canvas[data-mundo="b1"] .mp-seg{stroke:#C9C1DB !important}
#route-canvas .mp-seg.on{stroke:var(--bosque) !important}

/* ── Mapa vivo: cada ilustración con su movimiento ── */
.mp-hito{animation:propEntra 520ms cubic-bezier(.3,1.5,.5,1) backwards,var(--anim,hBalanceo) var(--dur,3s) ease-in-out 600ms infinite;
  animation-delay:calc(var(--i,0) * 50ms),calc(600ms + var(--i,0) * 90ms)}
.mp-hito.cerrado{animation:propEntra 520ms cubic-bezier(.3,1.5,.5,1) backwards}
@keyframes hBalanceo{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes hSalto{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px) scale(1.02,.98)}90%{transform:translateY(0) scale(1.03,.97)}}
@keyframes hRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.97)}}
@keyframes hGiro{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-3deg) translateY(-2px)}75%{transform:rotate(3deg) translateY(-2px)}}
/* Sol, arriba del todo, en el cielo. */
.mp-sol{position:absolute;right:12px;top:6px;width:96px;height:96px;z-index:1;pointer-events:none;
  animation:flota 3.2s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(255,140,0,.25))}
/* El mapache que camina por el camino. */
.mp-mapache{position:absolute;left:0;top:0;width:64px;height:72px;z-index:5;pointer-events:none;
  offset-anchor:50% 92%;offset-rotate:0deg;offset-distance:100%}
.mp-mapache img{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.mp-mapache.fijo{transform:translate(-50%,-92%)}
.mp-mapache.anda{animation:mpAnda 2.2s cubic-bezier(.45,.05,.4,1) 700ms both}
.mp-mapache.anda img{animation:mpPaso .26s ease-in-out infinite alternate}
@keyframes mpAnda{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes mpPaso{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(7deg) translateY(-4px)}}
.mp-mapache.quieto img{animation:mpQuieto 2.4s ease-in-out infinite;transform-origin:bottom center}
@keyframes mpQuieto{0%,100%{transform:rotate(-3deg)}25%{transform:rotate(0) translateY(-3px)}50%{transform:rotate(3deg)}75%{transform:rotate(0) scaleY(.97)}}
.mp-node.toca{width:58px;height:58px;background:var(--blanco) !important;box-shadow:0 0 0 4px var(--prim),0 10px 20px -10px rgba(23,21,15,.35) !important;
  animation:mpEntra 420ms var(--ease) backwards !important;color:var(--prim)}
.mp-mapache .mapache-vivo{width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.mp-mapache.anda .mapache-vivo{animation:mpPaso .26s ease-in-out infinite alternate}
.mp-mapache.quieto .mapache-vivo{animation:none}
.mp-mapache{width:72px;height:80px}
#route-canvas[data-mundo="b2"]{background-color:#DFEAF8}
#route-canvas[data-mundo="b2"] .mp-road{stroke:#F7FAFF !important}
#route-canvas[data-mundo="b2"] .mp-seg{stroke:#C8D8EE !important}
#route-canvas[data-mundo="c1"]{background-color:#D7E2FB}
#route-canvas[data-mundo="c1"] .mp-road{stroke:#FFFFFF !important}
#route-canvas[data-mundo="c1"] .mp-seg{stroke:#C9D3F5 !important}
#route-canvas[data-mundo="c2"]{background-color:#251E58}
#route-canvas[data-mundo="c2"] .mp-road{stroke:#3A3175 !important}
#route-canvas[data-mundo="c2"] .mp-seg{stroke:#6A5FC0 !important}
#route-canvas[data-mundo="c2"] .mp-sep::before,#route-canvas[data-mundo="c2"] .mp-sep::after{background:rgba(255,255,255,.25) !important}
/* Sin la sombra rosada alrededor del mapache. */
.mapache-vivo,.mp-mapache .mapache-vivo,.hh-sol #hh-mapache{filter:none !important}

/* ═══════════ Mapa sin césped (30 oct 2026) ═══════════
   Fondo de la app; solo la escena de arriba se funde por abajo; las zonas
   son piezas planas recortadas. Textos que no tapan: rótulos estrechos y
   centrados bajo su nodo, con las ilustraciones apartadas. */
#route-canvas,#route-canvas[data-mundo]{background-color:transparent !important;background-image:none !important;overflow:visible}
.mp-cabecera{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);
  border-radius:28px 28px 0 0}
/* Las zonas son piezas recortadas sobre el fondo: sin fundido. */
.mp-zona{-webkit-mask-image:none;mask-image:none;object-fit:contain}
.mp-label{width:112px !important}
.mp-label span{font-size:12.5px !important;padding:3px 8px !important;line-height:1.25}
.mp-sep span{font-size:13px}
/* Sol grande, arriba del todo. */
.mp-sol{width:150px !important;height:150px !important;right:4px !important;top:-6px !important}
/* El mapache del mapa, al doble. */
.mp-mapache{width:144px !important;height:160px !important}
.mp-node.toca .mp-aqui{display:none}
/* El camino ya recorrido, en morado (no en verde). */
#route-canvas .mp-seg.on,#route-canvas[data-mundo] .mp-seg.on{stroke:var(--prim) !important;stroke-width:9px}
.mp-node.done{background:var(--prim) !important;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--prim) 90%,transparent) !important}
.mp-mapache{width:124px !important;height:138px !important;transition:translate 600ms cubic-bezier(.3,1.3,.5,1)}

.mic-dock{position:relative;z-index:3}
#screen-lesson{overflow:hidden}
/* La frase que hay que decir, siempre bien visible mientras se graba. */
body.grabando #screen-lesson .q-prompt,body.grabando #screen-lesson .q-prompt *{opacity:1 !important;visibility:visible !important;color:var(--tinta) !important}
body.grabando #screen-lesson .speak-wrap,body.grabando #screen-lesson .stage > *{opacity:1 !important}
/* Guiño: de vez en cuando cierra solo el ojo derecho (los dos van abiertos). */
.mapache-vivo .m-ojo-der{animation:mGuino 7.5s ease-in-out 2.2s infinite}
@keyframes mGuino{0%,86%,100%{transform:scaleY(1)}88%,93%{transform:scaleY(.08)}95%{transform:scaleY(1)}}
.mapache-vivo.pose-duerme .m-ojo-der{animation:none}
.mp-mapache.salta .mapache-vivo{animation:mpSalta 520ms cubic-bezier(.3,1.6,.5,1)}
@keyframes mpSalta{0%{transform:none}40%{transform:translateY(-26px) scale(1.06,.96)}70%{transform:translateY(0) scale(.96,1.04)}100%{transform:none}}
.mapache-vivo svg{animation:poseEntra 320ms cubic-bezier(.3,1.5,.5,1)}
@keyframes poseEntra{from{transform:scale(.92) translateY(4px);opacity:.6}to{transform:none;opacity:1}}
/* Si ya te espera en la lección, aparece ahí sin deslizarse desde el nodo. */
.mp-mapache.fijo{transition:none}
/* Poses nuevas del mapache: baila se contonea, salta bota y señala empuja
   el cuerpo hacia el camino. */
.mapache-vivo.pose-baila{animation:mBaila .9s ease-in-out infinite alternate;transform-origin:50% 95%}
.mapache-vivo.pose-baila .m-brazo-der,.mapache-vivo.pose-baila .m-brazo-izq{animation:mBrazos .45s ease-in-out infinite alternate}
.mapache-vivo.pose-salta{animation:mSalto .55s cubic-bezier(.3,0,.5,1) infinite alternate}
.mapache-vivo.pose-senala{animation:mSenala 1.2s ease-in-out infinite;transform-origin:50% 95%}
@keyframes mBaila{from{transform:rotate(-6deg)}to{transform:rotate(6deg) translateY(-3px)}}
@keyframes mSalto{from{transform:none}to{transform:translateY(-14px)}}
@keyframes mSenala{0%,100%{transform:none}50%{transform:rotate(-3deg) translateX(-3px)}}
/* Señala hacia la izquierda: si está a la izquierda del nodo, se da la vuelta
   para señalar la lección. */
.mp-mapache.izq .mapache-vivo.pose-senala{scale:-1 1}
/* ── Fases de una lección: cinco checks en vez de porcentaje ── */
.fases{display:inline-flex;gap:4px;align-items:center}
.fases i{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--prim) 14%,#fff);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--prim) 30%,transparent);position:relative}
.fases i.on{background:var(--prim);box-shadow:none}
.fases i.on::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3.5px;height:6.5px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.les-r .fases i{width:11px;height:11px}
.les-r .fases i.on::after{left:3.4px;top:1.6px;width:3px;height:5.5px;border-width:0 1.6px 1.6px 0}
.map-cifra .fases{margin:4px 0 2px}
.wk-fase{text-align:center;padding:14px 12px 16px;margin-bottom:14px;border-radius:20px;
  background:color-mix(in srgb,var(--prim) 8%,#fff)}
.wk-fase .wk-h{margin:0 0 2px;border:0;padding:0}
.wk-fase-t{font-weight:800;font-size:17px;margin-bottom:10px}
.wk-fase .fases{gap:8px}
.wk-fase .fases i{width:28px;height:28px}
.wk-fase .fases i.on::after{left:9.5px;top:5px;width:6px;height:12px;border-width:0 3px 3px 0}
.wk-fase .fases i.nueva{animation:faseNueva 700ms cubic-bezier(.3,1.6,.5,1) 350ms both}
.wk-fase-s{margin-top:10px;font-size:14px;opacity:.75}
@keyframes faseNueva{from{transform:scale(0);background:color-mix(in srgb,var(--prim) 14%,#fff)}to{transform:scale(1)}}
.les-r:has(.fases){background:none !important;padding:0 !important;box-shadow:none !important}
/* ── Nivel de experiencia y palabras consolidadas ── */
.nivel-xp{margin:var(--s3) 0;padding:14px 16px;border-radius:22px;background:color-mix(in srgb,var(--prim) 8%,var(--blanco));position:relative}
.nivel-xp:empty{display:none}
.nx-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.nx-n{font-size:15px;font-weight:700;color:var(--tinta)}
.nx-n b{font-size:22px;font-weight:900;color:var(--prim)}
.nx-xp{font-size:13px;font-weight:700;opacity:.65}
.nx-bar{height:14px;border-radius:999px;background:color-mix(in srgb,var(--prim) 16%,#fff);overflow:hidden}
.nx-bar i{display:block;height:100%;border-radius:999px;background:var(--prim);transition:width 700ms cubic-bezier(.3,1.1,.5,1)}
.nivel-xp.sube{animation:nxSube 600ms cubic-bezier(.3,1.6,.5,1)}
.nx-sube{text-align:center;font-weight:900;font-size:18px;color:var(--prim);margin-bottom:6px}
@keyframes nxSube{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:none}}
.pg-pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.pg-pal-f{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 14px;border-radius:22px;
  background:color-mix(in srgb,var(--cc) 14%,var(--blanco))}
.pg-pal-f img{width:56px;height:56px}
.pg-pal-f b{font-size:24px;font-weight:900;color:var(--tinta);line-height:1.1}
.pg-pal-f span{font-size:13px;font-weight:800;color:var(--tinta)}
.pg-pal-f i{font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px}
/* ── Nivel de experiencia y palabras consolidadas ── */
.nivel-xp{margin:var(--s3) 0;padding:14px 16px;border-radius:22px;background:color-mix(in srgb,var(--prim) 8%,var(--blanco));position:relative}
.nivel-xp:empty{display:none}
.nx-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.nx-n{font-size:15px;font-weight:700;color:var(--tinta)}
.nx-n b{font-size:22px;font-weight:900;color:var(--prim)}
.nx-xp{font-size:13px;font-weight:700;opacity:.65}
.nx-bar{height:14px;border-radius:999px;background:color-mix(in srgb,var(--prim) 16%,#fff);overflow:hidden}
.nx-bar i{display:block;height:100%;border-radius:999px;background:var(--prim);transition:width 700ms cubic-bezier(.3,1.1,.5,1)}
.nivel-xp.sube{animation:nxSube 600ms cubic-bezier(.3,1.6,.5,1)}
.nx-sube{text-align:center;font-weight:900;font-size:18px;color:var(--prim);margin-bottom:6px}
@keyframes nxSube{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:none}}
.pg-pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.pg-pal-f{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 14px;border-radius:22px;
  background:color-mix(in srgb,var(--cc) 14%,var(--blanco))}
.pg-pal-f img{width:56px;height:56px}
.pg-pal-f b{font-size:24px;font-weight:900;color:var(--tinta);line-height:1.1}
.pg-pal-f span{font-size:13px;font-weight:800;color:var(--tinta)}
.pg-pal-f i{font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px}

/* ═══ Mapache morado y fondos en verde (31 oct 2026) ═══
   El mapache verde recordaba al búho de Duolingo: ahora es morado y lo que
   era fondo morado (banner de Inicio, pantalla al grabar) toma el verde que
   llevaba él. El morado sigue marcando lo activo y lo elegido. */
:root{--verde-mapache:#7FCB45; --verde-mapache-osc:#57A52F}
.home-hero{background:linear-gradient(160deg,var(--verde-mapache) 0%,var(--verde-mapache-osc) 100%) !important;
  box-shadow:0 18px 36px -22px rgba(47,111,34,.85) !important}
.home-hero .cta{box-shadow:0 10px 0 -4px #CDEBB4,0 18px 26px -18px rgba(0,0,0,.45) !important}
.home-hero .cta:active{box-shadow:0 5px 0 -4px #CDEBB4 !important}
#screen-lesson::after{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--verde-mapache) 18%,transparent) 35%,
  color-mix(in srgb,var(--verde-mapache) 75%,transparent) 72%,var(--verde-mapache) 100%)}
/* Los banners (Perfil, «Este mes» y Ranking) también al verde del mapache;
   lo que iba en lima sobre rosa pasa a amarillo claro para que se lea. */
.me-card,.pg-mes,.rg-head{background:linear-gradient(160deg,var(--verde-mapache) 0%,var(--verde-mapache-osc) 100%) !important;
  box-shadow:0 18px 36px -22px rgba(47,111,34,.85) !important}
.me-card .me-handle,.me-keep-t b{color:#FFF3A6 !important}
.me-keep-rail i{background:#FFF3A6 !important}
.map-hero{background:linear-gradient(180deg,#E9F7DC,#F6FCF0) !important}
/* En la cabecera de Progreso va el mapache (vivo), no el Sol. */
.pg-sol.mapache-vivo,#pg-mapache{width:112px;height:124px;margin:-14px -4px -18px -10px;animation:none}
/* Los rayos del Ranking llenan TODA la tarjeta: un círculo tres veces más
   ancho que ella, centrado en la insignia (la tarjeta recorta lo que sobra). */
.rg-head::before{width:300%;height:auto;aspect-ratio:1;top:calc(var(--s5) + 66px)}
/* Lección hecha en la lista: check plano morado sobre lila (nada de 3D). */
.les.done .les-n{background:color-mix(in srgb,var(--prim) 12%,var(--blanco)) !important}
/* Cada lección de la lista lleva su dibujo (el mismo del mapa), no un número.
   Las cerradas, apagadas y con el candado en la esquina. */
.les-n{position:relative}
.les-n .ilus{width:46px;height:42px;object-fit:contain}
.les.locked .les-n .ilus{opacity:.45;filter:grayscale(.8)}
.les.locked .les-n::after{content:"";position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;
  background:url("/static/img/ui/candado.svg") center/contain no-repeat}
.les.open .les-n,.les.locked .les-n{background:color-mix(in srgb,var(--prim) 8%,var(--blanco)) !important}

/* ═══ Mapa: las fases llenan el círculo como un líquido (31 oct) ═══
   Cada sesión completa sube un quinto, con una ola que se mueve arriba.
   Los números de lo que aún no está hecho, en morado suave (no en el color
   del bloque, que salía azul). */
.mp-node:not(.done):not(.toca){color:color-mix(in srgb,var(--prim) 50%,#fff) !important;
  box-shadow:0 10px 20px -10px rgba(23,21,15,.3),inset 0 0 0 3px color-mix(in srgb,var(--prim) 18%,transparent) !important}
.mp-node.viva:not(.done){color:var(--prim) !important}
.mp-node.viva:not(.done)::before{content:"";position:absolute;inset:3px;border-radius:50%;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8'%3E%3Cpath d='M0 4Q7 0 14 4T28 4V8H0Z' fill='%23C9BCFA'/%3E%3C/svg%3E"),
    linear-gradient(#C9BCFA,#C9BCFA);
  background-repeat:repeat-x,no-repeat;background-size:28px 8px,100% var(--p,0%);
  background-position-x:0,0;background-position-y:calc(100% - var(--p,0%) - 4px),100%;
  animation:liquidoOla 2.4s linear infinite}
@keyframes liquidoOla{to{background-position-x:28px,0}}

/* ═══ Avisos (diálogos) con la línea gráfica nueva ═══
   Tarjeta blanca redonda, el mapache asomando pensativo, botón principal
   morado con canto y «Cancelar» en lila suave. Los que borran, en rojo. */
.modal-veil{background:rgba(30,20,70,.42) !important}
.modal{background:#fff !important;border:0 !important;border-radius:30px !important;
  padding:12px 22px 22px !important;text-align:center;overflow:visible;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 30px 60px -24px rgba(40,20,120,.45) !important}
.modal::before{content:"";display:block;width:92px;height:100px;margin:-62px auto 2px;
  background:url("/static/img/mapache/piensa.svg") center/contain no-repeat}
.modal h3{font-size:22px !important;font-weight:900 !important;color:var(--tinta) !important}
.modal-p{font-size:15px !important;line-height:1.5 !important}
.modal-in{border-radius:16px !important;border:2px solid color-mix(in srgb,var(--prim) 18%,#fff) !important;
  background:color-mix(in srgb,var(--prim) 4%,#fff) !important;text-align:left}
.modal-in:focus{border-color:var(--prim) !important}
.modal-row{margin-top:18px !important;gap:10px !important}
.modal-btn{border:0 !important;border-radius:999px !important;padding:14px 10px !important;font-weight:800 !important;
  background:var(--prim) !important;color:#fff !important;box-shadow:0 5px 0 var(--prim-osc) !important;
  transition:transform 120ms ease,box-shadow 120ms ease}
.modal-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--prim-osc) !important}
.modal-btn.ghost{background:color-mix(in srgb,var(--prim) 10%,#fff) !important;color:var(--prim) !important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--prim) 22%,#fff) !important}
.modal-btn.danger{background:#E5484D !important;box-shadow:0 5px 0 #B8323A !important}
/* Escribir con fichas: la fila de arriba se pone verde o roja al corregir. */
.type-slot{min-height:56px}
.type-slot.ok{border-color:var(--ok) !important}
.type-slot.no{border-color:var(--no) !important}
/* Sopa de letras: se arrastra el dedo, así que la cuadrícula no hace scroll. */
.ws-grid{touch-action:none;-webkit-user-select:none;user-select:none}
/* ── Cabecera del nivel en la ruta, como la de Progreso ── */
.lv-head{margin:var(--s2) 0 var(--s5) !important}
.lv-banner{align-items:flex-start}
#lv-mapache{width:96px;height:108px;flex:0 0 auto;margin:-6px -6px -10px -12px}
.lv-banner .pg-mes-t i{font-size:13.5px;line-height:1.4}
.lv-banner .lv-bar{height:10px !important;margin-top:12px !important;border-radius:999px;background:rgba(255,255,255,.28) !important;overflow:hidden}
.lv-banner .lv-bar i{background:#FFF3A6 !important;border-radius:999px;min-width:10px}
.lv-hechas{display:block;font-style:normal;font-size:12.5px;font-weight:800;margin-top:6px;opacity:.9}
.lv-head .pg-cifra b{font-size:19px}
.lv-exam{margin-top:var(--s3) !important;border:0 !important;border-radius:22px !important;padding:14px 16px !important;
  background:color-mix(in srgb,var(--prim) 10%,var(--blanco)) !important}
.lv-exam b{color:var(--prim);font-weight:800 !important}
.lv-va{margin-top:12px;font-size:14px;font-weight:700}
.lv-va b{font-weight:900}
.lv-banner .lv-bar{margin-top:8px !important}
.lv-banner .lv-va b{display:inline;font-size:inherit;margin:0;line-height:inherit}
/* ── Estrellas de los exámenes (0-3) ── */
.estrellas{display:inline-flex;gap:2px;vertical-align:-3px;margin-left:4px}
.estrellas i{width:16px;height:16px;display:block}
.estrellas svg{width:100%;height:100%;fill:#E3DCFB;stroke:#E3DCFB;stroke-width:2;stroke-linejoin:round}
.estrellas i.on svg{fill:#FFC83D;stroke:#FFC83D}
.estrellas.mini{display:flex;justify-content:center;margin:2px 0 0}
.estrellas.mini i{width:14px;height:14px}
.ex-estrellas{text-align:center;margin:4px 0 18px}
.estrellas.grande{gap:10px;margin:0}
.estrellas.grande i{width:58px;height:58px}
.estrellas.grande i:nth-child(2){transform:translateY(-12px) scale(1.12)}
.estrellas.grande i.on{animation:estrellaSale 520ms cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(650ms + var(--k) * 420ms)}
.estrellas.grande i.on svg{filter:none}
@keyframes estrellaSale{from{transform:scale(0) rotate(-40deg);opacity:0}to{opacity:1}}
.estrellas.grande i:nth-child(2).on{animation-name:estrellaSale2}
@keyframes estrellaSale2{from{transform:translateY(-12px) scale(0) rotate(-40deg);opacity:0}to{transform:translateY(-12px) scale(1.12);opacity:1}}
.ex-estrellas-t{font-size:20px;font-weight:900;color:var(--tinta);margin-top:6px}
.ex-estrellas-s{font-size:13.5px;opacity:.7;margin-top:2px}
/* Fichas de la frase: se pueden arrastrar para cambiarlas de sitio. */
.build-slot{touch-action:none}
.build-slot .tile.arrastrando{position:relative;z-index:6;transition:none !important;
  box-shadow:0 12px 22px -8px rgba(40,20,120,.45) !important;border-color:var(--prim) !important}
/* Resumen: sin «Cerrar» abajo; una X arriba a la derecha y menos aire al pie. */
.sum-wrap{position:relative;padding-bottom:var(--s3) !important}
.sum-x{position:absolute;top:calc(var(--s7) - 4px);right:var(--pad);width:40px !important;height:40px !important;
  display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--prim) 10%,var(--blanco));color:var(--prim)}
.sum-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.sum-head{padding-right:52px}
/* ── El resumen como aviso: hoja que sube con el fondo atenuado ── */
#screen-summary.flota.active{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;justify-content:flex-end;
  background:rgba(30,20,70,.42);animation:resumenVelo 220ms ease both}
#screen-summary.flota .sum-wrap{flex:0 1 auto;max-height:90vh;background:var(--pagina);border-radius:30px 30px 0 0;
  padding:22px var(--pad) calc(var(--safe-b) + 16px) !important;box-shadow:0 -20px 50px -20px rgba(40,20,120,.4);
  animation:resumenSube 360ms cubic-bezier(.3,1.15,.5,1) both}
#screen-summary.flota .sum-x{top:18px}
#screen-summary.flota .sum-stats{margin-bottom:var(--s4)}
@keyframes resumenVelo{from{background:rgba(30,20,70,0)}}
@keyframes resumenSube{from{transform:translateY(100%)}}
/* Hoja de resumen más compacta: las cuatro cifras en una fila. */
#screen-summary.flota .sum-head{font-size:24px}
#screen-summary.flota .sum-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
#screen-summary.flota .sum-cell{padding:10px 8px;border-radius:16px;text-align:center}
#screen-summary.flota .sum-cell b{font-size:19px}
#screen-summary.flota .sum-cell span{font-size:11.5px}
/* ── Opciones cortas en cuadrícula de 2 (casillas) ── */
.opts.cuadros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.cuadros .opt{min-height:84px;display:grid;place-items:center;text-align:center;
  font-size:19px;font-weight:800;padding:12px 8px;border-radius:22px}
/* ── Escuchar y Más despacio: dos botones redondos en el lateral, bajo el
   mapache, en vez de dos píldoras debajo del círculo de voz ── */
.audio-bloque:not(.compacto){position:relative;width:100%}
.audio-bloque:not(.compacto) .say-row{position:absolute;left:0;top:0;flex-direction:column;width:auto;gap:10px;z-index:2}
.audio-bloque:not(.compacto) .say-row :is(.say-btn,.slow-btn){flex:0 0 auto !important;width:54px;height:54px;padding:0 !important;
  border-radius:50% !important;display:grid;place-items:center;color:var(--prim)}
.audio-bloque:not(.compacto) .say-row :is(.say-btn,.slow-btn) span{display:none}
.audio-bloque:not(.compacto) .say-row :is(.say-btn,.slow-btn) svg{width:24px;height:24px;margin:0}
.audio-bloque:not(.compacto) .say-row .say-btn{background:var(--prim) !important;border-color:var(--prim) !important;color:#fff}
.audio-bloque:not(.compacto) .say-row .say-btn svg{fill:#fff;stroke:none}
/* El mapache del mapa se encoge si al lado del nodo no cabe entero. */
.mp-mapache{width:calc(124px * var(--esc,1)) !important;height:calc(138px * var(--esc,1)) !important}
/* Sopa de letras: lo que vas marcando, en morado (no en negro). */
.ws-cell.pick{background:var(--prim) !important;color:#fff !important}

/* ═══ Emparejar como piezas de puzle (31 oct) ═══
   Izquierda: pieza con saliente a la derecha. Derecha: pieza con el hueco a la
   izquierda. Sin cuerdas: al acertar encajan y caen juntas. */
.match-cols.puzle{gap:26px !important}
.puzle .match-svg{display:none}
.puzle .match-b{--borde:color-mix(in srgb,var(--prim) 28%,#fff);--fondo:#fff;
  background:var(--fondo) !important;border:2.5px solid var(--borde) !important;border-radius:18px !important;
  font-weight:800;color:var(--tinta);min-height:58px;overflow:visible;
  box-shadow:0 4px 0 var(--borde) !important;
  transition:transform 380ms cubic-bezier(.3,1.2,.5,1),background 160ms,border-color 160ms,opacity 600ms}
.puzle .match-col:first-child .match-b{--fondo:color-mix(in srgb,var(--prim) 9%,#fff)}
/* El saliente: medio círculo que asoma por el canto derecho. */
.puzle .match-col:first-child .match-b::after{right:-14px;left:auto;top:50%;width:24px;height:24px;margin-top:-12px;
  border-radius:50%;background:var(--fondo) !important;border:2.5px solid var(--borde) !important;
  clip-path:inset(-4px -4px -4px 10px);transform:none !important;z-index:2}
/* El hueco: medio círculo del color del fondo, mordiendo el canto izquierdo. */
.puzle .match-col:nth-child(2) .match-b::after{left:-14px;right:auto;top:50%;width:24px;height:24px;margin-top:-12px;
  border-radius:50%;background:var(--pagina) !important;border:2.5px solid var(--borde) !important;
  clip-path:inset(-4px -4px -4px 10px);transform:none !important;z-index:2}
.puzle .match-b.sel,.puzle .match-b.apunta{--borde:var(--prim);--fondo:color-mix(in srgb,var(--prim) 16%,#fff);transform:scale(1.03)}
.puzle .match-b.arrastra{z-index:20;transition:none;box-shadow:0 14px 26px -10px rgba(40,20,120,.45) !important}
/* Encajan (verdes) y caen. */
.puzle .match-b.done{--borde:var(--ok);--fondo:color-mix(in srgb,var(--ok) 14%,#fff);animation:none;pointer-events:none;color:var(--tinta)}
.puzle .match-b.encaja{z-index:15}
.puzle .match-b.cae{transition:transform 650ms cubic-bezier(.55,0,.9,.45),opacity 650ms ease-in;opacity:0}
.puzle .match-b.miss{--borde:var(--no);animation:shake 240ms var(--ease)}
/* ── Al grabar, el círculo del micro crece al 350 % de su diámetro ──
   Crece el círculo blanco de detrás (::before); el icono solo un poco, para
   que no se vea enorme ni borroso. El aviso «Habla ahora» sube por encima. */
.mic-dock .mic{position:relative;overflow:visible}
.mic-dock .mic::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;pointer-events:none;
  background:#fff;transform:scale(.6);opacity:0;
  transition:transform 520ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease}
body.grabando .mic-dock .mic{transform:scale(1.6) !important;background:transparent !important;box-shadow:none !important;animation:none !important}
body.grabando .mic-dock .mic::before{opacity:1;transform:scale(2.19);box-shadow:0 10px 30px -8px rgba(0,0,0,.3)}
body.grabando.oye .mic-dock .mic::before{animation:oyeHalo 1.1s var(--ease) infinite}
body.grabando .mic-dock .heard{transform:translateY(-140px) !important}
/* El montón de parejas ya hechas, debajo de las columnas. La última, arriba. */
.pila{display:flex;flex-direction:column-reverse;align-items:center;margin-top:18px;padding-bottom:6px}
.pila-par{display:flex;gap:4px;margin-top:-14px;transform:translateX(var(--x)) rotate(var(--giro))}
.pila-par .match-col{flex:0 0 auto}
.pila-par .match-b{pointer-events:none;min-height:50px !important;font-size:15px}
.pila-par.aterriza{animation:pilaGolpe 260ms cubic-bezier(.3,1.6,.5,1)}
@keyframes pilaGolpe{0%{transform:translateX(var(--x)) rotate(var(--giro)) scaleY(.88)}100%{transform:translateX(var(--x)) rotate(var(--giro))}}
.puzle .match-b.encaja{transition:transform 170ms cubic-bezier(.3,1.2,.5,1)}
/* ── El círculo del micro al grabar: 115 % del ancho de la pantalla, y sus
   paredes ondulan (suave al escuchar, fuerte con cada trozo de voz) ── */
body.grabando .mic-dock .mic{transform:none !important}
body.grabando .mic-dock .mic svg{width:46px;height:46px}
.mic-dock .mic::before{inset:auto;left:50%;top:50%;width:115vw;height:115vw;margin:-57.5vw 0 0 -57.5vw;transform:scale(.08)}
body.grabando .mic-dock .mic::before{transform:scale(1)}
body.grabando.oye .mic-dock .mic::before{animation:micOnda 1.8s ease-in-out infinite,oyeHalo 1.1s var(--ease) infinite}
body.grabando.oye .mic-dock .mic.habla::before{animation:micSacude 420ms ease-in-out,oyeHalo 1.1s var(--ease) infinite}
@keyframes micOnda{0%,100%{border-radius:50%}
  25%{border-radius:49% 51% 50% 50% / 51% 49% 51% 49%}
  50%{border-radius:51% 49% 49% 51% / 49% 51% 50% 50%}
  75%{border-radius:50% 50% 51% 49% / 50% 50% 49% 51%}}
@keyframes micSacude{0%{border-radius:50%;transform:scale(1)}
  25%{border-radius:46% 54% 52% 48% / 54% 46% 53% 47%;transform:scale(1.025)}
  55%{border-radius:54% 46% 47% 53% / 47% 53% 46% 54%;transform:scale(.99)}
  80%{border-radius:48% 52% 53% 47% / 52% 48% 47% 53%;transform:scale(1.01)}
  100%{border-radius:50%;transform:scale(1)}}
body.grabando .mic-dock .heard{transform:translateY(calc(-57.5vw + 26px)) !important}
/* Con el círculo tan grande, «Habla ahora» va en morado (en blanco no se leía). */
body.grabando .mic-dock .heard{color:var(--prim) !important;font-size:22px !important}
/* Emparejar sin forma de puzle: cajas redondeadas; la pareja hecha, verde y en su sitio. */
.puzle .match-col .match-b::after{display:none !important}
.match-cols.puzle{gap:12px !important}
.puzle .match-b.done{animation:boing 420ms var(--ease) !important}
.puzle .match-col .match-b.done{--borde:var(--ok);--fondo:color-mix(in srgb,var(--ok) 14%,#fff)}
/* Emparejar: más aire entre cajas (entre filas y entre las dos columnas). */
.match-cols.puzle{gap:16px !important}
.puzle .match-col{gap:12px !important}
/* ── Al grabar, lo que pasa se ve por encima del dedo ──
   El icono sube dentro del círculo y encima van cinco barras: quietas y
   grises mientras prepara, ondulando en morado cuando escucha, y dan un
   salto con cada trozo de voz que entiende. */
body.grabando .mic-dock .mic svg{transform:translateY(-64px) scale(1.25);transition:transform 420ms cubic-bezier(.2,.8,.2,1)}
.mic-dock .mic svg{transition:transform 300ms ease}
.mic-ondas{position:absolute;left:50%;bottom:100%;margin-bottom:62px;transform:translateX(-50%);
  display:flex;gap:7px;align-items:center;height:60px;opacity:0;pointer-events:none;transition:opacity 220ms ease}
.mic-ondas i{display:block;width:9px;height:10px;border-radius:9px;background:#C9C2D6;transition:background 200ms}
body.grabando .mic-ondas{opacity:1}
body.grabando.oye .mic-ondas i{background:var(--prim);animation:micBarra 820ms ease-in-out infinite alternate}
body.grabando.oye .mic-ondas i:nth-child(2){animation-delay:-200ms}
body.grabando.oye .mic-ondas i:nth-child(3){animation-delay:-420ms}
body.grabando.oye .mic-ondas i:nth-child(4){animation-delay:-120ms}
body.grabando.oye .mic-ondas i:nth-child(5){animation-delay:-560ms}
@keyframes micBarra{from{height:10px}to{height:30px}}
body.grabando.oye .mic.habla .mic-ondas i{animation:micSalta 420ms cubic-bezier(.3,1.6,.5,1)}
body.grabando.oye .mic.habla .mic-ondas i:nth-child(odd){animation-duration:360ms}
@keyframes micSalta{0%{height:12px}40%{height:56px}100%{height:18px}}

/* ═══ La tirada de premio con la línea gráfica de ahora ═══
   Tarjeta blanca redonda con el mapache celebrando, rodillos lilas con
   símbolos de colores planos, la cifra en morado y el botón morado. */
.slot-veil{background:rgba(30,20,70,.45) !important}
.slot-box{background:#fff !important;border:0 !important;border-radius:30px !important;
  padding:12px 22px 22px !important;box-shadow:0 30px 60px -24px rgba(40,20,120,.5) !important;overflow:visible}
.slot-box::before{content:"";display:block;width:96px;height:104px;margin:-66px auto 0;
  background:url("/static/img/mapache/celebra.svg") center/contain no-repeat}
.slot-kicker{color:var(--prim) !important;font-weight:800 !important;letter-spacing:.08em;margin:2px 0 12px !important}
.reels{background:color-mix(in srgb,var(--prim) 10%,#fff) !important;border-radius:22px !important;padding:10px !important;gap:8px !important}
.reel{width:76px !important;height:96px !important;border-radius:18px !important;background:#fff !important;
  box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--prim) 12%,#fff)}
.cellsym svg{width:40px !important;height:40px !important}
.slot-box .sym-gem,.slot-box.rw-on .sym-gem,#slot-mini .sym-gem{fill:#7B5CF0}
.slot-box .sym-bolt,.slot-box.rw-on .sym-bolt,#slot-mini .sym-bolt{fill:#FFB020}
.slot-box .sym-star,.slot-box.rw-on .sym-star,#slot-mini .sym-star{fill:#FF7AA2}
.slot-box .sym-hex,.slot-box.rw-on .sym-hex,#slot-mini .sym-hex{fill:#3CC48E}
.slot-box .sym-core,.slot-box.rw-on .sym-core,#slot-mini .sym-core{fill:#6A4CF0}
.slot-box .sym-ring,.slot-box.rw-on .sym-ring,#slot-mini .sym-ring{stroke:#FF9D2E}
.payline{height:3px !important;border-radius:3px;background:color-mix(in srgb,var(--prim) 30%,transparent) !important}
.slot-box.rw-on .payline{background:var(--prim) !important;opacity:.6}
.slot-amount,.slot-box.rw-on .slot-amount{color:var(--prim) !important;font-size:46px !important;font-weight:900 !important}
.slot-label{font-size:14px !important;font-weight:800 !important;color:var(--tinta) !important}
.slot-mult{font-size:13px !important;opacity:.7}
.slot-btn{border:0 !important;border-radius:999px !important;padding:15px !important;font-weight:800 !important;font-size:16px !important;
  background:var(--prim) !important;color:#fff !important;box-shadow:0 5px 0 var(--prim-osc) !important}
.slot-btn:active{transform:translateY(4px) !important;box-shadow:0 1px 0 var(--prim-osc) !important}
#slot-mini{background:#fff !important;border:0 !important;box-shadow:0 12px 26px -12px rgba(40,20,120,.45) !important}
#slot-mini .mini-amount,#slot-mini.rw-on .mini-amount{color:var(--prim) !important;font-weight:900}
/* Los puntos de la voz, por encima de todo lo que tienen alrededor. */
.orb-wrap{position:relative;z-index:6;overflow:visible}
.orb{position:relative;z-index:6;pointer-events:none}
/* Al grabar, el icono del micro se queda en su sitio (bajo el dedo), algo más
   grande; las barras de voz, justo encima del dedo. */
body.grabando .mic-dock .mic svg{transform:scale(1.35) !important}
.mic-ondas{margin-bottom:26px !important}

/* ── Lo que vuelve por haberlo fallado: etiqueta arriba ── */
.repite-pill{display:none;width:max-content;max-width:90%;margin:6px auto 0;padding:5px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--no) 12%,#fff);color:var(--no);font-weight:800;font-size:13.5px;text-align:center}
.repite-pill.on{display:block;animation:boing 420ms var(--ease)}

/* ── Resumen: el mapache entra caminando y al llegar celebra ── */
.sum-mapache{width:96px;height:106px;margin:-74px auto 0;position:relative;z-index:2}
.sum-mapache.camina{animation:sumCamina 1.1s cubic-bezier(.3,.9,.4,1) both}
.sum-mapache > div{width:100%;height:100%}
.sum-mapache.camina > div{animation:mpPaso .22s ease-in-out 5 alternate}
@keyframes sumCamina{from{transform:translateX(-62vw)}to{transform:none}}

/* ── Sección completada: fiesta con el mapache y el trofeo ── */
.seccion-fiesta{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(30,20,70,.55);animation:resumenVelo 240ms ease both}
.seccion-fiesta.fuera{opacity:0;transition:opacity 240ms}
.sf-caja{position:relative;width:min(360px,100%);background:#fff;border-radius:32px;padding:14px 22px 22px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(40,20,120,.6);animation:sfEntra 520ms cubic-bezier(.3,1.5,.5,1) both}
@keyframes sfEntra{from{transform:scale(.6) translateY(40px);opacity:0}}
#sf-mapache{width:170px;height:186px;margin:-110px auto 0}
.sf-kicker{font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--prim);margin-top:4px}
.sf-titulo{font-size:26px;font-weight:900;color:var(--tinta);line-height:1.15;margin-top:4px}
.sf-sub{font-size:14.5px;opacity:.7;margin-top:6px}
.sf-btn{width:100%;margin-top:18px;border:0;border-radius:999px;padding:15px;font-weight:800;font-size:16px;
  background:var(--prim);color:#fff;box-shadow:0 5px 0 var(--prim-osc)}
.sf-confeti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sf-confeti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:sfCae 2.6s cubic-bezier(.3,.6,.5,1) both}
@keyframes sfCae{to{transform:translateY(110vh) rotate(var(--giro))}}
/* ── Pantalla de carga al empezar una lección ── */
.carga-leccion{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:32px;background:var(--pagina,#FFF9FB);animation:resumenVelo 180ms ease both;transition:opacity 300ms}
.carga-leccion.fuera{opacity:0}
.cl-mapache{width:170px;height:186px}
.cl-mapache > div{width:100%;height:100%;animation:mBote .5s ease-in-out infinite alternate}
.cl-titulo{font-size:22px;font-weight:900;color:var(--tinta);text-align:center;max-width:300px;line-height:1.2}
.cl-barra{width:min(260px,70vw);height:14px;border-radius:999px;background:color-mix(in srgb,var(--prim) 14%,#fff);overflow:hidden;margin-top:6px}
.cl-barra i{display:block;height:100%;width:0;border-radius:999px;background:var(--prim);animation:clLlena 2.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes clLlena{to{width:100%}}
.cl-frase{font-size:14px;font-weight:700;opacity:.6}
/* Premio pequeño arriba: con título y «+N gemas», que se entienda. */
#slot-mini{flex-direction:column !important;gap:4px !important;padding:8px 16px 10px !important;border-radius:22px !important}
#slot-mini .mini-tit{font-size:12.5px;font-weight:900;color:var(--prim);letter-spacing:.02em}
#slot-mini .mini-fila{display:flex;align-items:center;gap:12px}
#slot-mini .mini-amount{font-size:17px}
/* ── Sección completada, a pantalla completa y en verde ── */
.seccion-fiesta{position:fixed;inset:0;z-index:120;display:flex !important;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:24px;overflow:hidden;text-align:center;color:#fff;
  background:linear-gradient(170deg,var(--verde-mapache) 0%,var(--verde-mapache-osc) 100%) !important;animation:resumenVelo 260ms ease both}
.sf-rayos{position:absolute;left:50%;top:52%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0deg 10deg,transparent 10deg 24deg);
  animation:rayosGiran2 26s linear infinite}
.seccion-fiesta > :not(.sf-rayos):not(.sf-confeti){position:relative;z-index:2}
.sf-kicker{font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#FFF3A6 !important}
.sf-titulo{font-size:34px;font-weight:900;line-height:1.1;color:#fff !important;max-width:320px}
.sf-mapache{width:min(250px,64vw);height:min(275px,70vw);margin:8px 0 2px;animation:sfCamina 1.25s cubic-bezier(.25,.8,.35,1) both}
.sf-mapache > div{width:100%;height:100%;animation:mpPaso .2s ease-in-out 6 alternate}
.seccion-fiesta.llega .sf-mapache{animation:sfSalta 600ms cubic-bezier(.3,1.6,.5,1)}
@keyframes sfCamina{from{transform:translateX(-110vw)}to{transform:none}}
@keyframes sfSalta{0%{transform:none}35%{transform:translateY(-34px) scale(1.06)}100%{transform:none}}
.sf-sub{font-size:16px;font-weight:700;opacity:.92;color:#fff !important}
.sf-btn{margin-top:18px;width:min(320px,100%);border:0;border-radius:999px;padding:17px;font-weight:900;font-size:17px;
  background:#fff !important;color:var(--prim) !important;box-shadow:0 6px 0 #CDEBB4 !important}
.sf-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #CDEBB4 !important}
.seccion-fiesta .sf-caja{display:none}

/* ── Montar frases (y dictado): la frase se escribe sobre renglones, sin
   recuadro, y las fichas son grandes para que un dedo gordo no falle ── */
.build-slot{border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 2px !important;
  min-height:120px !important;gap:10px 8px !important;align-content:flex-start;
  background:repeating-linear-gradient(to bottom,transparent 0 56px,color-mix(in srgb,var(--prim) 30%,#fff) 56px 59px,transparent 59px 60px) !important}
.build-bank{gap:10px 8px !important;justify-content:center;margin-top:22px !important}
.build-slot .tile,.build-bank .tile{height:50px;padding:0 16px !important;font-size:19px !important;font-weight:800 !important;
  display:inline-flex;align-items:center;border-radius:14px !important}
/* ── Premio pequeño dentro de la lección: ocupa el sitio de la barra de
   progreso un momento (la barra, las vidas y el combo se apartan) ── */
body.premio-barra .lesson-top .prog-rail,
body.premio-barra .lesson-top .vidas,
body.premio-barra .lesson-top .combo-tag{display:none !important}
#slot-mini.en-barra{position:relative !important;left:auto !important;top:auto !important;transform:none !important;
  flex:1;min-width:0;display:none;flex-direction:row !important;align-items:center;justify-content:center;
  gap:10px !important;padding:6px 12px !important;border-radius:999px !important;opacity:1;pointer-events:none;
  background:color-mix(in srgb,var(--prim) 10%,#fff) !important;box-shadow:none !important}
#slot-mini.en-barra.on{display:flex !important;animation:premioBarra 520ms cubic-bezier(.3,1.5,.5,1)}
#slot-mini.en-barra .mini-tit{font-size:12.5px;white-space:nowrap}
#slot-mini.en-barra .mini-fila{gap:8px}
#slot-mini.en-barra .mini-amount{font-size:16px;white-space:nowrap}
@keyframes premioBarra{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* Los rodillos pequeños giran de 34 en 34 px (CELL_M en slot.js): con celdas
   de 30 se paraban en un hueco y salían en blanco. */
.mini-reel{height:34px !important;width:26px !important;background:#fff !important;border-radius:8px !important}
.mini-cell{height:34px !important;flex:0 0 34px !important}
.mini-cell svg{width:20px;height:20px}
#slot-mini.en-barra{gap:6px !important;padding:4px 10px !important}
#slot-mini.en-barra .mini-tit{font-size:11.5px}
#slot-mini.en-barra .mini-fila{gap:6px}
#slot-mini.en-barra .mini-amount{font-size:15px;min-width:0}
/* Resumen: mapache a la izquierda y las cuatro cifras en columna a la derecha. */
.sum-fila{display:flex;align-items:center;gap:12px;margin-top:12px}
.sum-fila .sum-mapache{flex:0 0 auto;width:132px;height:146px;margin:0}
#screen-summary .sum-fila .sum-stats{flex:1;min-width:0;display:flex !important;flex-direction:column;gap:6px !important;margin:0 !important}
#screen-summary .sum-fila .sum-cell{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:8px 14px !important;border-radius:14px !important;text-align:left}
#screen-summary .sum-fila .sum-cell b{font-size:19px !important}
#screen-summary .sum-fila .sum-cell span{font-size:12.5px !important}
.sum-nota{font-size:12px;font-weight:700;color:var(--prim);line-height:1.35;padding:2px 4px}
/* Resumen: sus bloques no se aplastan para caber; si no caben, se hace scroll. */
#screen-summary .sum-wrap > *{flex-shrink:0}
#screen-summary.flota .sum-wrap{overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Las cuatro cifras junto al mapache, en 2 columnas y 2 filas. */
#screen-summary .sum-fila .sum-stats{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important}
#screen-summary .sum-fila .sum-cell{flex-direction:column;align-items:center !important;justify-content:center;text-align:center;padding:10px 6px !important}
#screen-summary .sum-fila .sum-cell b{font-size:20px !important}
/* «Otra sesión» fijo abajo y por encima de todo; lo demás pasa por debajo
   al hacer scroll (con un velo que lo funde). */
#screen-summary .sum-wrap #btn-again{position:sticky;bottom:0;z-index:6;margin-top:14px}
/* Una franja del color de la hoja alrededor y debajo del botón tapa lo que
   pasa por detrás (sin taparle a él). */
#screen-summary .sum-wrap #btn-again{box-shadow:0 22px 0 22px var(--pagina,#FFF9FB),0 10px 26px -8px color-mix(in srgb,var(--prim) 60%,transparent) !important}

/* ── Mecha de la racha (31 oct): la línea arde hacia una llama apagada ── */
.mecha{padding:0 2px 8px}
body.in-lesson .mecha{display:none}
.mecha-fila{display:flex;align-items:center;gap:6px}
.mecha-rail{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,#ff8a00 14%,#fff);position:relative}
.mecha-rail i{display:block;height:100%;width:0;border-radius:999px;position:relative;
  background:linear-gradient(90deg,#ffc94d,#ff8a00);transition:width 900ms cubic-bezier(.3,1.1,.5,1)}
/* La chispa que va quemando la punta. */
.mecha-rail i::after{content:"";position:absolute;right:-6px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;
  background:radial-gradient(circle,#fff6c9 0 22%,#ffc94d 42%,rgba(255,138,0,.55) 62%,transparent 72%);
  animation:chispa 520ms ease-in-out infinite alternate}
.mecha.vacia .mecha-rail i::after,.mecha.encendida .mecha-rail i::after{display:none}
@keyframes chispa{from{transform:scale(.8) rotate(0)}to{transform:scale(1.25) rotate(40deg)}}
.mecha-llama{width:24px;height:24px;flex:0 0 auto;filter:grayscale(1);opacity:.38;transform-origin:50% 90%;transition:filter 400ms,opacity 400ms}
.mecha.encendida .mecha-llama{filter:none;opacity:1;animation:llamaViva 1.4s ease-in-out infinite}
@keyframes llamaViva{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}
.mecha-txt{margin-top:3px;font-size:12px;font-weight:600;color:var(--gris,#8a8494);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mecha-txt b{color:#e07400;font-weight:800}
.mecha.encendida .mecha-txt b{color:#ff8a00}

/* ── Resumen: ruta y palabras como tarjetas, no como tabla (31 oct) ── */
#screen-summary .worked{border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;overflow:visible !important;margin-top:18px}
#screen-summary .worked .wk-h{border:0;padding:0 4px;margin:20px 0 10px;font-size:16px;font-weight:800;color:var(--tinta);background:none}
#screen-summary .worked > .wk-h:first-child{margin-top:0}
#screen-summary .wk-les{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px;
  margin-bottom:8px;padding:12px 16px 14px;border:0;border-radius:20px;background:color-mix(in srgb,var(--ok) 9%,#fff)}
#screen-summary .wk-les-t{font-size:15px;font-weight:700;color:var(--tinta)}
#screen-summary .wk-les-p{font-size:14px;font-weight:800;color:var(--ok)}
.wk-les-bar{grid-column:1 / -1;height:10px;border-radius:999px;background:color-mix(in srgb,var(--ok) 16%,#fff);overflow:hidden}
.wk-les-bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
#screen-summary .wk-pals{display:flex;flex-direction:column;gap:6px}
#screen-summary .wk-pals .wk-row{padding:11px 14px;border-radius:16px;background:color-mix(in srgb,var(--prim) 5%,#fff);border:0}
#screen-summary .wk-pals .wk-w{font-size:15.5px;font-weight:800;min-width:84px}
#screen-summary .wk-pals .wk-e{font-size:14px}
#screen-summary .wk-pals .wk-bar{width:54px;height:8px;background:color-mix(in srgb,var(--ok) 15%,#fff)}
#screen-summary .wk-pals .wk-p{font-size:13px;font-weight:800;color:var(--ok);width:38px}

/* ── Une las palabras con el mismo estilo que las opciones (31 oct) ──
   Fuera el borde gordo lila, el canto 3D y la columna teñida: blanco con
   borde fino, lila al elegir y verde al acertar, como en «Elige». */
.puzle .match-b,.puzle .match-col:first-child .match-b{
  background:var(--blanco) !important;border:1.5px solid var(--linea) !important;border-radius:20px !important;
  box-shadow:var(--sombra) !important;font-weight:800;font-size:16.5px;color:var(--tinta);min-height:60px}
.puzle .match-col .match-b.sel,.puzle .match-col .match-b.apunta{border-color:var(--lila) !important;background:var(--lila-claro) !important;color:#5B3CC4}
.puzle .match-col .match-b.done{border-color:var(--bosque) !important;background:var(--bosque-claro) !important;color:var(--bosque)}
.puzle .match-col .match-b.miss{border-color:var(--coral) !important;background:var(--coral-claro) !important;color:var(--coral-osc)}

/* ── Selector de nivel fijo arriba de la ruta (31 oct) ── */
#lv-nav{display:flex;gap:6px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
#lv-nav::-webkit-scrollbar{display:none}
#lv-nav .lv-pill{flex:1 0 auto;min-width:46px;height:36px;padding:0 10px;border-radius:999px;position:relative;
  background:var(--blanco);border:1.5px solid var(--linea);box-shadow:var(--sombra);font-size:14.5px;font-weight:800;color:var(--tinta)}
#lv-nav .lv-pill.cerrado{color:var(--gris);opacity:.75}
#lv-nav .lv-pill.cerrado::after{content:"";display:inline-block;width:9px;height:10px;margin-left:4px;vertical-align:-1px;opacity:.7;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8 0V7a3 3 0 1 1 6 0v2H9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8 0V7a3 3 0 1 1 6 0v2H9Z'/%3E%3C/svg%3E") center/contain no-repeat}
#lv-nav .lv-pill.tuyo:not(.on){border-color:var(--lila);color:#5B3CC4}
#lv-nav .lv-pill.on{background:var(--prim) !important;border-color:var(--prim) !important;color:#fff !important;opacity:1}
.lv-next[data-next]{cursor:pointer}
#lv-nav .lv-pill{flex:1 1 0;min-width:0;padding:0 4px;font-size:14px;white-space:nowrap}
#lv-nav .lv-pill.cerrado::after{margin-left:3px;width:8px;height:9px}
/* Escribir con teclado (examen): con el estilo de las opciones. */
.type-in{border:1.5px solid var(--linea) !important;border-radius:20px !important;background:var(--blanco) !important;
  box-shadow:var(--sombra);font-size:19px;font-weight:700;color:var(--tinta);padding:16px 18px !important}
.type-in:focus{border-color:var(--lila) !important;outline:none}
/* Contestar escribiendo en las situaciones (responder / diálogo). */
.escribe-en-vez{margin:14px 0 4px}
.eev-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--blanco);
  border:1.5px solid var(--linea);box-shadow:var(--sombra);font-size:14px;font-weight:800;color:#5B3CC4}
.eev-btn::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zM6 9h2v2H6zm4 0h2v2h-2zm4 0h2v2h-2zM7 13h10v2H7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zM6 9h2v2H6zm4 0h2v2h-2zm4 0h2v2h-2zM7 13h10v2H7z'/%3E%3C/svg%3E") center/contain no-repeat}
.eev-form{display:flex;gap:8px;align-items:center}
.eev-form .type-in{margin-top:0 !important;flex:1;min-width:0}
.eev-ok{flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--prim);color:#fff;font-size:24px;font-weight:900;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--prim) 70%,transparent)}
/* Racha conseguida: el mapache en llamas encima del número. */
.rf-mapache{display:block;width:min(210px,52vw);height:auto;margin:0 auto -4px;pointer-events:none}
.racha-fiesta .rf-num{font-size:84px}
/* ── Sección completada, épica: carrera, salto, estruendo, trofeo ── */
.seccion-fiesta.epica > .sf-escena{position:absolute;inset:0;z-index:3;pointer-events:none}
.epica > .sf-kicker,.epica > .sf-titulo,.epica > .sf-podio,.epica > .sf-sub,.epica > .sf-btn{opacity:0}
.sf-corredor{position:absolute;left:50%;top:50%;width:min(230px,58vw);aspect-ratio:240/170;margin:calc(min(230px,58vw) * -.354) 0 0 calc(min(230px,58vw) / -2);
  animation:sfLlega 1.7s cubic-bezier(.35,.1,.55,1) both}
.sf-corredor img{display:block;width:100%;height:100%}
@keyframes sfLlega{0%{transform:translate(-62vw,-30vh) scale(.12)}45%{transform:translate(-30vw,-7vh) scale(.42)}100%{transform:translate(0,4vh) scale(1)}}
.epica.salta .sf-corredor{animation:sfBrinca .4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sfBrinca{from{transform:translate(0,4vh) scale(1)}to{transform:translate(0,-12vh) scale(1.15) rotate(-14deg)}}
.epica.boom .sf-corredor{animation:sfEstalla .18s ease-out forwards}
@keyframes sfEstalla{from{transform:translate(0,-12vh) scale(1.15) rotate(-14deg)}to{transform:translate(0,-12vh) scale(1.7);opacity:0}}
.sf-flash{position:absolute;left:50%;top:40%;width:40px;height:40px;margin:-20px;border-radius:50%;background:#fff;opacity:0}
.epica.boom .sf-flash{animation:sfFlash .75s ease-out forwards}
@keyframes sfFlash{0%{opacity:1;transform:scale(.2)}35%{opacity:.95}100%{opacity:0;transform:scale(42)}}
.sf-chispas{position:absolute;left:50%;top:40%}
.sf-chispas i{position:absolute;width:11px;height:11px;margin:-5px;border-radius:50%;opacity:0}
.sf-chispas i:nth-child(3n){border-radius:2px;width:15px;height:6px}
.sf-chispas i:nth-child(5n){width:20px;height:20px;border-radius:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.epica.boom .sf-chispas i{animation:sfChispa 1.2s cubic-bezier(.1,.8,.3,1) both}
@keyframes sfChispa{0%{opacity:1;transform:translate(0,0) scale(var(--s))}70%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 70px)) scale(calc(var(--s) * .4)) rotate(260deg)}}
.seccion-fiesta.epica.boom{animation:sfTiembla .5s linear}
@keyframes sfTiembla{0%,100%{transform:none}12%{transform:translate(-10px,6px)}26%{transform:translate(9px,-7px)}
  42%{transform:translate(-7px,-4px)}58%{transform:translate(6px,6px)}76%{transform:translate(-3px,2px)}}
.sf-podio{display:flex;align-items:flex-end;justify-content:center;margin:6px 0 2px}
.epica .sf-mapache{animation:none !important;width:min(190px,48vw);height:min(210px,53vw);margin:0}
.epica .sf-mapache > div{animation:none !important}
.sf-trofeo{width:min(100px,26vw);height:auto;margin:0 0 4px -30px;transform:translateY(-130vh);filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.epica.trofeo > .sf-podio{opacity:1}
.epica.trofeo .sf-mapache{animation:sfAparece .5s cubic-bezier(.3,1.6,.5,1) both !important}
@keyframes sfAparece{from{transform:scale(.2) translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.epica.trofeo .sf-trofeo{animation:sfCaeTrofeo .9s .15s both}
@keyframes sfCaeTrofeo{
  0%{transform:translateY(-130vh) rotate(-25deg);animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  62%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  76%{transform:translateY(-30px) rotate(6deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  88%{transform:translateY(0) rotate(0);animation-timing-function:ease-out}
  94%{transform:translateY(-8px)}100%{transform:none}}
.epica .sf-kicker{font-size:22px;letter-spacing:.06em;text-shadow:0 3px 0 rgba(0,0,0,.15),0 0 24px rgba(255,243,166,.8)}
.epica .sf-titulo{font-size:38px;text-shadow:0 4px 0 rgba(0,0,0,.16)}
.epica.textos > .sf-kicker{animation:sfSlam .5s cubic-bezier(.2,1.5,.4,1) both}
.epica.textos > .sf-titulo{animation:sfSlam .55s cubic-bezier(.2,1.5,.4,1) .12s both}
.epica.textos > .sf-sub{animation:sfSube .5s ease-out .35s both}
.epica.textos > .sf-btn{animation:sfSube .5s cubic-bezier(.3,1.4,.5,1) .55s both}
@keyframes sfSlam{from{opacity:0;transform:scale(2.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes sfSube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* La app ocupa lo visible: con teclado, lo que queda encima de él. */
#app{height:var(--alto-app,100dvh) !important}
/* Escucha en pausa, a la vista dentro de la lección. */
.mudo-pill{display:none;width:max-content;max-width:90%;margin:6px auto 0;padding:6px 14px;border-radius:999px;border:0;
  background:color-mix(in srgb,var(--coral,#FF6B6B) 14%,#fff);color:var(--coral-osc,#C2413B);font-size:13px;font-weight:800}
.mudo-pill.on{display:block}
/* ── Estrellas del examen, épicas pero planas ── */
.estrellas.grande{gap:14px;margin:6px 0 0;align-items:flex-end}
.estrellas.grande i{position:relative;width:76px;height:76px;--base:translateY(0)}
.estrellas.grande i:nth-child(2){width:92px;height:92px;--base:translateY(-16px)}
.estrellas.grande i:nth-child(2),.estrellas.grande i.on,.estrellas.grande i:nth-child(2).on{transform:var(--base)}
.estrellas.grande svg{position:relative;z-index:2;stroke:none !important;fill:none !important;overflow:visible}
.estrellas.grande .e-base{fill:#E3DCFB;stroke:#E3DCFB;stroke-width:2.2;stroke-linejoin:round}
.estrellas.grande .e-sombra{fill:#D4C8F8;stroke:#D4C8F8;stroke-width:2.2;stroke-linejoin:round}
.estrellas.grande .e-brillo{fill:#fff;opacity:.55}
.estrellas.grande i.on .e-base{fill:#FFD23F;stroke:#FFD23F}
.estrellas.grande i.on .e-sombra{fill:#F2A900;stroke:#F2A900}
.estrellas.grande i.on .e-brillo{fill:#FFF3A6;opacity:1}
.estrellas.grande i.on{animation:estrellaEpica 560ms cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(650ms + var(--k) * 420ms)}
@keyframes estrellaEpica{0%{opacity:0;transform:var(--base) scale(3.2) rotate(-50deg)}
  55%{opacity:1;transform:var(--base) scale(.82) rotate(10deg)}
  75%{transform:var(--base) scale(1.14) rotate(-4deg)}100%{opacity:1;transform:var(--base)}}
/* Resplandor detrás de las encendidas. */
.estrellas.grande i.on::before{content:"";position:absolute;inset:-34%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,210,63,.55),rgba(255,210,63,0) 66%);
  animation:estrellaBrilla 1.6s ease-in-out infinite alternate;animation-delay:calc(950ms + var(--k) * 420ms)}
@keyframes estrellaBrilla{from{transform:scale(.85);opacity:.7}to{transform:scale(1.12);opacity:1}}
/* Al aterrizar: una onda dorada y unos rayos que salen y se apagan. */
.e-onda,.e-rayos{position:absolute;pointer-events:none;opacity:0;z-index:1;border-radius:50%}
.e-onda{inset:4%;border:4px solid #FFD23F}
.e-rayos{inset:-48%;background:repeating-conic-gradient(#FFD23F 0deg 5deg,transparent 5deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 34%,#000 36%,#000 60%,transparent 62%);
  mask:radial-gradient(circle,transparent 34%,#000 36%,#000 60%,transparent 62%)}
.estrellas.grande i.on .e-onda{animation:estrellaOnda 650ms ease-out both;animation-delay:calc(950ms + var(--k) * 420ms)}
.estrellas.grande i.on .e-rayos{animation:estrellaRayos 700ms ease-out both;animation-delay:calc(950ms + var(--k) * 420ms)}
@keyframes estrellaOnda{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(2.1)}}
@keyframes estrellaRayos{0%{opacity:1;transform:scale(.4) rotate(0)}100%{opacity:0;transform:scale(1.25) rotate(25deg)}}
.ex-estrellas{margin:14px 0 20px}
.ex-estrellas-t{font-size:24px;margin-top:12px}
/* ── Oro: examen de bloque y lo que ya está superado ── */
/* El examen en la lista: una línea, dorado, con su trofeo. */
.blk-exam{background:linear-gradient(135deg,#FFE58A,#FFC83D) !important;box-shadow:0 10px 22px -12px rgba(242,169,0,.9) !important;
  align-items:center !important;padding-top:12px !important;padding-bottom:12px !important}
.blk-exam .les-n{background:#fff !important;border:0 !important}
.blk-exam .les-n .ico{width:26px;height:26px}
.blk-exam .les-t{flex:1;min-width:0;font-weight:900 !important;font-size:16px;color:#6B4A00 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-exam .estrellas{flex:0 0 auto}
.blk-exam.locked{filter:saturate(.55);opacity:.85}
/* Bloque aprobado: sus lecciones se vuelven doradas, ya están ganadas. */
.blk.oro .les.done .les-n{background:linear-gradient(135deg,#FFE58A,#FFC83D) !important;color:#6B4A00 !important}
.blk.oro .les.done{box-shadow:0 0 0 2px #FFD23F,var(--sombra) !important}
.blk.oro .fases i.on{background:#F2A900 !important;border-color:#F2A900 !important}
/* Mapa: los puntos del bloque aprobado y su examen, en oro. */
.mp-node.done.oro,.mp-node.mp-bexam.oro{background:linear-gradient(135deg,#FFE58A,#F2A900) !important;
  box-shadow:0 10px 20px -10px rgba(242,169,0,.95),0 0 0 4px rgba(255,210,63,.35) !important}
.mp-node.mp-bexam{background:linear-gradient(135deg,#FFE58A,#FFC83D) !important;color:#6B4A00 !important}
.mp-node.mp-bexam.locked{filter:saturate(.55)}
.mp-label-ex{width:auto !important;max-width:92%;white-space:nowrap}
.mp-label-ex span{display:inline-flex !important;align-items:center;gap:6px;white-space:nowrap !important;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;background:linear-gradient(135deg,#FFE58A,#FFC83D) !important;color:#6B4A00 !important;
  font-weight:900 !important;padding:6px 14px !important;border-radius:999px !important;box-shadow:0 8px 16px -10px rgba(242,169,0,.9)}
.mp-label-ex img{width:18px;height:18px;flex:0 0 auto}
/* Resultado del examen aprobado: trofeo dorado grande arriba. */
.ex-trofeo{position:relative;width:150px;height:150px;margin:-6px auto -18px;display:grid;place-items:center;z-index:3}
.ex-trofeo img{position:relative;z-index:2;width:100%;height:100%;filter:drop-shadow(0 12px 16px rgba(242,169,0,.45));
  animation:exTrofeo 900ms cubic-bezier(.3,1.5,.5,1) both}
.ext-rayos{position:absolute;inset:-40%;border-radius:50%;z-index:1;
  background:repeating-conic-gradient(rgba(255,210,63,.55) 0deg 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);
  animation:rayosGiran2 14s linear infinite}
@keyframes exTrofeo{0%{opacity:0;transform:translateY(-120px) scale(.6) rotate(-20deg)}
  60%{opacity:1;transform:translateY(6px) scale(1.08) rotate(4deg)}100%{transform:none}}
.blk-exam .les-n{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.blk-exam .les-n .estrellas{margin:0;gap:0}
.blk-exam .les-n .estrellas i{width:11px;height:11px}
.blk-exam .les-n .ico{width:24px !important;height:24px !important}
.blk-exam .les-t{font-size:15.5px}
/* Estrellas del examen en la fila dorada: del marrón de las letras (las
   lilas no se veían sobre el oro). */
.blk-exam .estrellas svg{fill:rgba(107,74,0,.22) !important;stroke:rgba(107,74,0,.22) !important}
.blk-exam .estrellas i.on svg{fill:#6B4A00 !important;stroke:#6B4A00 !important}
.blk-exam .les-n .estrellas i{width:13px;height:13px}
/* Mapa: camino de un bloque aprobado en oro y checks en marrón oscuro. */
#route-canvas[data-mundo] .mp-seg.on.oro,#route-canvas .mp-seg.on.oro{stroke:#F2A900 !important}
.mp-node.oro .mp-check{stroke:#6B4A00 !important}
.mp-node.mp-bexam.oro .mp-trofeo{stroke:#6B4A00}
/* Examen en el mapa: el trofeo a color y grande, y encima sus estrellas en
   arco, en el marrón de las letras. */
.mp-node.mp-bexam{width:66px !important;height:66px !important;overflow:visible}
.mp-trofeo-img{width:72%;height:72%;display:block;filter:drop-shadow(0 2px 2px rgba(107,74,0,.25))}
.mp-arco{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-4px;pointer-events:none}
.mp-arco .estrellas{display:flex;gap:1px;margin:0;align-items:flex-end}
.mp-arco .estrellas i{width:18px;height:18px}
.mp-arco .estrellas i:nth-child(1){transform:translateY(7px) rotate(-22deg)}
.mp-arco .estrellas i:nth-child(2){width:21px;height:21px}
.mp-arco .estrellas i:nth-child(3){transform:translateY(7px) rotate(22deg)}
.mp-arco .estrellas svg{fill:rgba(107,74,0,.22) !important;stroke:rgba(107,74,0,.22) !important}
.mp-arco .estrellas i.on svg{fill:#6B4A00 !important;stroke:#6B4A00 !important}
#route-canvas[data-mundo] .mp-seg.on.pasa,#route-canvas .mp-seg.on.pasa{stroke:var(--deg) !important}
/* El mapache de Inicio con una animación de las de anim/ (abandono, avisos). */
#hh-mapache .mapache-anim{display:block;width:100%;height:100%;object-fit:contain}

/* ══ Entrar y bienvenida con el diseño nuevo (31 oct) ══ */
.gate{background:var(--pagina,#FFF9FB) !important}
.gate-hero{position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:0 0 36px 36px;
  padding:calc(var(--safe-t) + 18px) 20px 48px !important;background:linear-gradient(165deg,#7B5CF5 0%,#5B3CD6 100%) !important}
.gate-hero .gate-logo{position:relative;width:min(210px,58%) !important;margin:0 auto 4px !important;animation:spLogo .6s cubic-bezier(.3,1.6,.5,1) both}
.gh-escena{position:relative;height:196px;display:flex;align-items:flex-end;justify-content:center}
.gh-mapache{height:196px;width:auto;filter:drop-shadow(0 12px 14px rgba(20,8,80,.3));animation:ghEntra .7s cubic-bezier(.3,1.5,.5,1) .15s both}
.gh-bocadillo{position:absolute;left:calc(50% + 46px);top:6px;max-width:150px;padding:8px 12px;border-radius:16px;text-align:left;
  background:#fff;color:var(--tinta,#24123F);box-shadow:0 10px 20px -10px rgba(0,0,0,.35);
  animation:ghBocadillo .5s cubic-bezier(.3,1.6,.5,1) .75s both}
.gh-bocadillo::after{content:"";position:absolute;left:14px;bottom:-6px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px}
.gh-bocadillo b{position:relative;display:block;font-size:14px;font-weight:900}
.gh-bocadillo i{position:relative;display:block;font-style:normal;font-size:11.5px;font-weight:700;opacity:.6}
.gate-hero .gate-claim{position:relative;color:#fff !important;font-size:30px !important;font-weight:900 !important;margin:10px 0 0 !important;
  letter-spacing:-.03em;line-height:1.1;animation:gateup .45s var(--ease) .35s both}
.gate-hero .gate-claim em{color:#FFD23F !important}
.gate-panel{position:relative;margin-top:-26px;border-radius:30px 30px 0 0;background:var(--pagina,#FFF9FB);
  padding:22px 20px calc(var(--safe-b) + 20px) !important}
.gate-panel > *{animation:gateup .45s var(--ease) both}
.gate-panel > :nth-child(2){animation-delay:.08s}.gate-panel > :nth-child(3){animation-delay:.16s}.gate-panel > :nth-child(4){animation-delay:.24s}
.gate-tabs{display:grid !important;grid-template-columns:1fr 1fr;gap:4px !important;padding:4px;margin-bottom:20px !important;
  border:0 !important;border-radius:999px;background:var(--prim-claro,#EFEBFF)}
.gate-tab{margin:0 !important;padding:11px 0 !important;border:0 !important;border-radius:999px;font-weight:800 !important;
  color:#5B3CC4 !important;opacity:.65;transition:background .2s,opacity .2s,box-shadow .2s}
.gate-tab.active{opacity:1;background:#fff;box-shadow:0 4px 12px -6px rgba(40,20,120,.35)}
.gate-field span{text-transform:none !important;letter-spacing:0 !important;font-size:13.5px !important;font-weight:800 !important;color:var(--tinta,#24123F) !important}
.gate-field input{padding:15px 16px !important;border:1.5px solid var(--linea) !important;border-radius:18px !important;background:var(--blanco,#fff) !important;box-shadow:var(--sombra)}
.gate-field input:focus{border-color:var(--lila) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--lila,#8F6BEF) 22%,transparent) !important}
.gate-form .cta{border-radius:999px !important;background:#6A4CF0 !important;color:#fff !important;font-weight:900;
  box-shadow:0 6px 0 #5236D6,0 14px 24px -12px rgba(40,20,120,.5) !important}
.gate-form .cta:active{transform:translateY(4px);box-shadow:0 2px 0 #5236D6 !important}
.gate-oauth{border:1.5px solid var(--linea) !important;background:var(--blanco,#fff) !important;font-weight:800 !important;box-shadow:var(--sombra)}
.gate-bio{background:#6A4CF0 !important;color:#fff !important;border-color:transparent !important}
.gate-link{color:#5B3CC4 !important;font-weight:700}
.gate-legal{text-align:center;font-size:12.5px !important}
@keyframes ghEntra{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
@keyframes ghBocadillo{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:none}}
/* Bienvenida */
.splash{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  background:linear-gradient(165deg,#7B5CF5 0%,#5B3CD6 100%);transition:opacity .45s ease,transform .45s ease}
.splash.fuera{opacity:0;transform:scale(1.06);pointer-events:none}
.sp-mapache{position:relative;height:min(270px,36vh);width:auto;filter:drop-shadow(0 14px 16px rgba(20,8,80,.3));animation:ghEntra .7s cubic-bezier(.3,1.5,.5,1) both}
.sp-logo{position:relative;width:min(240px,64vw);height:auto;animation:spLogo .6s cubic-bezier(.3,1.6,.5,1) .35s both}
.sp-puntos{position:relative;display:flex;gap:8px;margin-top:10px}
.sp-puntos i{width:10px;height:10px;border-radius:50%;background:#FFD23F;animation:spPunto .9s ease-in-out infinite}
.sp-puntos i:nth-child(2){animation-delay:.15s}.sp-puntos i:nth-child(3){animation-delay:.3s}
@keyframes spLogo{from{opacity:0;transform:scale(.3) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes spPunto{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-10px);opacity:1}}
/* Sobre el morado, el lila del logotipo no se leía: en blanco entero. */
.gate-hero .gate-logo,.sp-logo{filter:brightness(0) invert(1)}
/* Sin redondeo abajo en el morado: las dos curvas (morado y tarjeta) se
   cruzaban y dejaban picos feos. Ahora la tarjeta se apoya limpia encima. */
.gate-hero{border-radius:0 !important}
/* Entrar: la portada ocupa lo visible (con teclado, lo que queda encima) y
   una franja morada fija tapa la hora y la batería al hacer scroll. */
.gate{height:var(--alto-app,100dvh) !important;bottom:auto !important}
.gate::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--safe-t);background:#7B5CF5;z-index:20;pointer-events:none}
/* Sin redondeo abajo en el morado: las dos curvas (morado y tarjeta) se
   cruzaban y dejaban picos feos. Ahora la tarjeta se apoya limpia encima. */
.gate-hero{border-radius:0 !important}
/* El mapache de la bienvenida entra cuando su imagen ya ha cargado (así va
   a la vez que sus sonidos). */
.sp-mapache{opacity:0;animation:none !important}
.sp-mapache.listo{opacity:1;animation:ghEntra .7s cubic-bezier(.3,1.5,.5,1) both !important}

/* Fondo de la bienvenida y de Entrar: rayos que giran despacio (él los
   prefirió a los bocadillos flotantes). */
.gh-rayos,.sp-rayos{position:absolute;left:50%;top:60%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.08) 0deg 9deg,transparent 9deg 22deg);animation:rayosGiran2 40s linear infinite}
/* Estrellas dentro de los avisos (examen ya aprobado). */
.estrellas.dialogo{display:flex;justify-content:center;gap:6px;margin:10px 0 6px}
.estrellas.dialogo i{width:30px;height:30px}
/* El mapache del mapa haciendo una de sus animaciones (una por visita). */
.mp-mapache .mapache-anim{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center}
/* Opción acertada: verde entero (fondo verde y letra blanca), no solo el
   borde. Él: «quiero que se ponga en verde, todo entero». */
.opt.right,.opt.sel.right,.syl.right,.syl.sel.right{background:var(--bosque,#1F7A44) !important;border-color:var(--bosque,#1F7A44) !important;color:#fff !important}
.opt.right *{color:#fff !important}
/* El bocadillo de Inicio: en pantallas estrechas se quedaba en nada y el
   texto se salía. Puede ocupar hasta 240 px por encima de la cabeza del
   mapache, donde hay sitio. */
.hh-bocadillo{width:fit-content !important;max-width:max(calc(100% - 178px), min(240px, calc(100% - 16px))) !important;overflow-wrap:anywhere}
/* Las ventanas flotantes se centran en lo visible: con el teclado abierto,
   en el hueco que queda encima de él (antes se quedaban detrás). */
.modal{top:calc(var(--alto-app, 100dvh) / 2) !important}
/* ── Editor del perfil: tu foto arriba, sin el mapache ── */
#edit-modal::before{display:none !important}
#edit-modal{padding-top:22px !important}
.ed-cabeza{display:flex;align-items:center;gap:14px;text-align:left;margin-bottom:6px}
.ed-foto{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;padding:0;border:0;
  background:var(--pc,var(--p-plum));color:#fff;font-size:30px;font-weight:900;box-shadow:0 0 0 4px #fff,0 8px 18px -8px rgba(40,20,120,.5)}
.ed-foto-img{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
.ed-foto-img img{width:100%;height:100%;object-fit:cover}
.ed-cam{position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--prim);box-shadow:0 0 0 3px #fff}
.ed-cam svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ed-quien{min-width:0}
.ed-quien h3{margin:0 !important;font-size:22px;font-weight:900}
.ed-quien span{display:block;font-size:14px;font-weight:700;color:#5B3CC4;opacity:.8}
/* ── Menú de la foto (propio de la app) ── */
.hoja-foto{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(30,20,60,0);transition:background .2s}
.hoja-foto.on{background:rgba(30,20,60,.45)}
.hoja-foto.hidden{display:none}
.hf-caja{width:min(520px,100%);background:#fff;border-radius:28px 28px 0 0;padding:18px 18px calc(var(--safe-b) + 18px);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.3,1.1,.5,1);display:grid;gap:8px}
.hoja-foto.on .hf-caja{transform:none}
.hf-tit{text-align:center;font-weight:900;font-size:16px;color:var(--tinta);margin-bottom:4px}
.hf-op{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;border-radius:18px;border:1.5px solid var(--linea);
  background:var(--blanco);font:inherit;font-size:16px;font-weight:800;color:var(--tinta);box-shadow:var(--sombra)}
.hf-op svg{width:22px;height:22px;fill:none;stroke:#5B3CC4;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hf-op.hf-quitar{color:var(--coral-osc,#C2413B)}
.hf-op.hf-quitar svg{stroke:var(--coral-osc,#C2413B)}
.hf-op.hidden{display:none}
.hf-cancel{margin-top:4px;padding:14px;border:0;border-radius:999px;background:var(--prim-claro,#EFEBFF);font:inherit;font-size:16px;font-weight:800;color:#5B3CC4}

/* ── Cofre (31 oct 2026): tarjeta dorada cuando está listo y apertura a
   pantalla completa con gemas que vuelan hasta el contador ── */
.chest-card{border:0 !important;background:var(--blanco,#fff);box-shadow:var(--sombra);border-radius:22px !important;
  padding:12px 14px 12px 8px !important;gap:10px !important;position:relative;overflow:hidden}
.chest-ico{width:74px !important;height:64px !important;display:grid;place-items:center}
.chest-ico .cofre-svg{width:74px;height:auto;display:block;filter:grayscale(.75) opacity(.55);overflow:visible}
.chest-t{font-size:17px !important;font-weight:900 !important;color:var(--tinta,#222)}
.chest-s{font-size:14px !important;font-weight:700}
.chest-btn{background:var(--n10,#eee) !important;color:var(--n60) !important;font-weight:900 !important;padding:11px 16px !important}
.chest-card.listo{background:linear-gradient(135deg,#FFE58A 0%,#FFC93C 55%,#FFB020 100%) !important;
  box-shadow:0 6px 0 #E09A10,0 10px 24px rgba(230,150,0,.32) !important;margin-bottom:6px}
.chest-card.listo::before{content:"";position:absolute;inset:-60% -20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);animation:cofreBrilla 3.2s ease-in-out infinite}
@keyframes cofreBrilla{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.chest-card.listo .chest-t{color:#5C3A1A !important}
.chest-card.listo .chest-s{color:#8A5A1E !important}
.chest-card.listo .cofre-svg{filter:drop-shadow(0 4px 0 rgba(150,90,10,.35));animation:cofreMenea 2.4s ease-in-out infinite;transform-origin:50% 90%}
.chest-card.listo .cf-boca{opacity:1}
@keyframes cofreMenea{0%,62%,100%{transform:none}68%{transform:rotate(-7deg) translateY(-3px)}74%{transform:rotate(6deg) translateY(-3px)}
  80%{transform:rotate(-4deg)}86%{transform:rotate(2deg)}}
.chest-card.listo .cf-tapa{animation:cofreAsoma 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
@keyframes cofreAsoma{0%,64%,92%,100%{transform:none}72%,84%{transform:rotate(-9deg)}}
.chest-card.listo .chest-btn{background:var(--prim) !important;color:#fff !important;box-shadow:0 4px 0 var(--prim-osc) !important;
  font-size:16px !important;padding:12px 18px !important;animation:cofreLate 1.2s ease-in-out infinite}
.chest-card.listo .chest-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--prim-osc) !important;animation:none}
@keyframes cofreLate{0%,100%{transform:none}50%{transform:scale(1.06)}}
.cf-boca{opacity:0}

.cofre-fiesta{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;color:#fff;background:radial-gradient(circle at 50% 46%,#8C72FF 0%,var(--prim) 45%,#3B23A8 100%);
  animation:resumenVelo 260ms ease both}
.cofre-fiesta.fuera{opacity:0;transition:opacity 280ms}
.cfz-luz{position:absolute;left:50%;top:46%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.14) 0deg 10deg,transparent 10deg 24deg);
  animation:cfzGira 24s linear infinite;transition:opacity .4s}
.cofre-fiesta.abierto .cfz-luz{opacity:1;background:repeating-conic-gradient(from 0deg,rgba(255,230,120,.3) 0deg 10deg,transparent 10deg 24deg)}
@keyframes cfzGira{to{transform:rotate(360deg)}}
.cfz-cofre{position:relative;z-index:2;width:min(240px,62vw);animation:cfzCae .6s cubic-bezier(.5,0,.9,.5) both}
.cfz-cofre .cofre-svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 10px 0 rgba(30,15,90,.35))}
@keyframes cfzCae{0%{transform:translateY(-110vh) rotate(-12deg)}80%{transform:translateY(0) rotate(0) scaleY(.88) scaleX(1.08)}
  90%{transform:translateY(-10px) scale(1.02)}100%{transform:none}}
.cofre-fiesta.tiembla .cfz-cofre{animation:cfzTiembla .26s linear}
@keyframes cfzTiembla{0%,100%{transform:none}20%{transform:rotate(-6deg) translateX(-6px)}45%{transform:rotate(5deg) translateX(5px)}
  70%{transform:rotate(-3deg) scale(1.03)}}
.cofre-fiesta.tiembla .cf-tapa{animation:cfzTapaSalta .26s ease-out}
@keyframes cfzTapaSalta{50%{transform:translateY(-6px) rotate(-3deg)}}
.cofre-fiesta .cf-tapa{transform-box:fill-box;transform-origin:0% 100%;transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.cofre-fiesta.abierto .cf-tapa{transform:translate(-2px,-6px) rotate(-36deg)}
.cf-haz{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.cofre-fiesta.abierto .cf-haz{opacity:1;animation:cfzHaz .6s cubic-bezier(.2,1.4,.4,1) both,cfzHazLate 1.6s .6s ease-in-out infinite alternate}
@keyframes cfzHaz{from{transform:scaleY(0);opacity:0}}
@keyframes cfzHazLate{to{opacity:.65;transform:scaleX(1.08)}}
.cofre-fiesta.abierto .cf-boca{opacity:1;filter:drop-shadow(0 0 22px #FFE680)}
.cofre-fiesta.abierto .cfz-cofre{animation:cfzRebota .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes cfzRebota{0%{transform:scale(.9,1.1)}100%{transform:none}}
.cfz-flash{position:absolute;left:50%;top:44%;width:40px;height:40px;margin:-20px;border-radius:50%;background:#FFF6C8;opacity:0;z-index:1;pointer-events:none}
.cofre-fiesta.abierto .cfz-flash{animation:sfFlash .8s ease-out forwards}
.cfz-gema{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:4;pointer-events:none;opacity:0;
  filter:drop-shadow(0 3px 0 rgba(20,10,80,.35))}
.cfz-chip{position:fixed !important;z-index:5;margin:0 !important;pointer-events:none;justify-content:center}
.cfz-premio{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:14px;opacity:0;transform:scale(.4)}
.cfz-premio b{font-size:58px;font-weight:900;line-height:1;color:#FFE066;text-shadow:0 4px 0 #C98A00}
.cfz-premio span{font-size:20px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.cfz-premio i{font-style:normal;margin-top:10px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:900;font-size:15px}
.cofre-fiesta.premio .cfz-premio{animation:cfzPremio .5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes cfzPremio{to{opacity:1;transform:none}}
.cfz-btn{position:relative;z-index:2;margin-top:26px;width:min(320px,calc(100% - 48px));border:0;border-radius:999px;padding:17px;
  font-weight:900;font-size:17px;background:#fff;color:var(--prim);box-shadow:0 6px 0 #C9BCFF;opacity:0;pointer-events:none}
.cofre-fiesta.premio .cfz-btn{opacity:1;pointer-events:auto;transition:opacity .3s .35s}
.cfz-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #C9BCFF}
@media (prefers-reduced-motion:reduce){.cfz-luz,.chest-card.listo::before,.chest-card.listo .cofre-svg,.chest-card.listo .cf-tapa,
  .chest-card.listo .chest-btn{animation:none !important}}