*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sll-font-body);
  background:
    radial-gradient(900px 500px at 12% -10%, var(--sll-primary-50) 0%, transparent 55%),
    radial-gradient(800px 500px at 110% 0%, var(--sll-purple-50) 0%, transparent 50%),
    var(--sll-bg-page);
  color:var(--sll-copy-default);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 14px 60px;
}
.app-shell{width:100%;max-width:640px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--sll-font-title);color:var(--sll-gray-900);line-height:1.15}
.oculto{display:none !important}

/* ---- base táctil (28/08, base de diseño 869er3ccp) ----
 * El design system nació para web con puntero; esto se juega con el pulgar. Todo elemento
 * tocable hereda estas dos reglas: sin el flash gris por defecto del navegador al tocar, y sin
 * el retardo de doble-tap-para-zoom que arrastra cualquier toque ~300ms. Zona táctil mínima de
 * la app: 44px (piso de Apple HIG) en controles de utilidad, 48px+ (piso de Material, más
 * generoso) en todo lo que es flujo de juego — botones, opciones, chips, cajas. */
button,a,.opcion,.tema-chip,.nivel-card,.categoria-caja,.frase-arrastrable,.palabra-marcable{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:flex;align-items:center;gap:8px;font-family:var(--sll-font-title);font-weight:800;color:var(--sll-primary-600);text-transform:uppercase;font-size:13px;letter-spacing:.4px;line-height:1.1}
/* 11/09: con «Cognitín 1.0» y el chip de nivel, a 375 px la marca se parte en dos líneas («COGNITÍN» / «1.0»)
 * dentro de los 32 px del icono; la topbar no crece. Es lo que cede: los chips y el selector van en una línea. */
/* Cognitín de cabecera (31/08, encargo de JJ: «un Cognitín base junto al logo de SCL»).
 * Tres restricciones mandaban por encima del diseño:
 *  · No puede robar altura. La topbar ya mide 44 px porque el selector de idioma tiene esa altura
 *    mínima; a 32 px Cognitín cabe dentro de ese alto y la topbar NO crece ni un píxel.
 *  · No puede competir con el Cognitín de la corrección. Arriba es identidad y está quieto: pose
 *    neutra, de pie y sin gesto, sin animación de entrada y sin el «pop» de la pista. La reacción
 *    emocional sigue siendo solo de abajo.
 *  · No puede tocar las zonas táctiles. Es decorativo (`alt=""` + `aria-hidden`), no es enlace ni
 *    botón: el logotipo sigue sin ser clicable, así que no hay ningún objetivo táctil nuevo que
 *    dimensionar. Sustituye al punto coral, que era pura decoración y hacía el mismo papel. */
.marca .cognitin-base{width:32px;height:32px;object-fit:contain;flex-shrink:0;display:block}
.puntos-chip{background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--sll-primary-600);white-space:nowrap}
/* Chip «nivel» (11/09): al lado de las estrellas, mismo pill. Compacto a propósito: a 375 px la
 * topbar lleva marca + selector + dos chips y no puede crecer (R6, presión vertical: si se parte
 * en dos filas, todo lo de abajo baja). El rótulo va en minúscula y gris para que el valor (A2…C2)
 * sea lo que se lee. */
.nivel-chip{padding:6px 10px}
.nivel-chip #nivel-chip-rotulo{font-weight:600;font-size:11px;color:var(--sll-copy-soft);text-transform:uppercase;letter-spacing:.3px}
.topbar-derecha{display:flex;align-items:center;gap:6px}
.idioma-toggle{min-height:44px;min-width:44px;background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:999px;padding:6px 10px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--sll-copy-default);cursor:pointer;font-family:var(--sll-font-title)}
.idioma-toggle:hover{border-color:var(--sll-primary-300)}
.idioma-toggle:active{background:var(--sll-primary-50);border-color:var(--sll-primary-300)}

/* ---- tarjeta genérica ---- */
.tarjeta{background:var(--sll-bg-card);border:1px solid var(--sll-gray-200);border-radius:20px;box-shadow:0 10px 30px rgba(31,36,48,.08);padding:24px}

/* ---- pantalla inicio ---- */
/* Revisión de Paula 04/09: los márgenes laterales eran de 4px y el bloque respiraba
 * menos que cualquier otra tarjeta. Se le da el horizontal del canon (.tarjeta usa 24px)
 * y aire propio arriba y abajo. */
.hero{text-align:center;padding:22px 24px 24px}
.hero h1{font-size:30px;margin-bottom:8px}
.hero p{color:var(--sll-copy-default);font-size:15px;line-height:1.5;max-width:480px;margin:0 auto 24px}
/* Móvil primero: botones apilados a ancho completo (spec del sistema: "100% full-width móvil"),
 * fila lado a lado solo en pantallas anchas — esta app se diseña para el caso móvil, no al revés. */
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:10px}
/* Solo en el hero: separar los dos botones del subtítulo (Paula 04/09). El resto de sitios
 * que reutilizan .hero-cta (resumen y CTA final) se quedan como estaban. */
.hero .hero-cta{margin-top:16px}
.hero-cta .btn{width:100%}
@media (min-width:600px){
  .hero-cta{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .hero-cta .btn{width:auto}
}

.btn{
  font-family:var(--sll-font-title);
  font-weight:700;
  font-size:15px;
  border:none;
  border-radius:14px;
  padding:13px 22px;
  min-height:54px; /* spec del sistema §6 Botón: alto 54px móvil */
  cursor:pointer;
  background:var(--sll-primary-500);
  color:#fff;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 6px 16px rgba(236,91,102,.35);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.secundario{background:var(--sll-gray-0);color:var(--sll-primary-600);border:2px solid var(--sll-primary-200);box-shadow:none}
.btn.secundario:active{background:var(--sll-primary-50)}
.btn.fantasma{background:transparent;color:var(--sll-copy-soft);box-shadow:none;border:1px dashed var(--sll-gray-300)}
.btn.fantasma:active{background:var(--sll-gray-100)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.grande{padding:16px 30px;font-size:17px;min-height:58px}
/* Los CTA de llamada de los cierres son enlaces (<a class="btn">, abren la reserva en pestaña
 * nueva): sin esto heredan el subrayado y la alineación de texto del enlace, no del botón. */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* ---- portada por nivel ---- */
.niveles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.nivel-card{min-height:76px;background:var(--sll-gray-0);border:2px solid var(--sll-gray-200);border-radius:16px;padding:16px 10px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .1s ease,box-shadow .1s ease}
.nivel-card:hover{border-color:var(--sll-primary-300)}
.nivel-card:active{transform:scale(.96);box-shadow:inset 0 2px 6px rgba(31,36,48,.12)}
.nivel-card .nivel-etiqueta{font-family:var(--sll-font-title);font-weight:800;font-size:20px;color:var(--sll-gray-900)}
.nivel-card .nivel-meta{font-size:11px;color:var(--sll-copy-soft);margin-top:4px}
.nivel-card.vacio{cursor:default;opacity:.55;border-style:dashed}
.nivel-card.vacio:hover{border-color:var(--sll-gray-200)}
.nivel-card.vacio:active{transform:none;box-shadow:none}
@media (max-width:480px){.niveles-grid{grid-template-columns:repeat(3,1fr);gap:8px}.nivel-card{padding:12px 6px}.nivel-card .nivel-etiqueta{font-size:17px}}

.temas-lista{display:flex;flex-direction:column;gap:32px;margin-top:10px;text-align:left} /* 32px — canon §3 "entre cards" movil (revision 28/08: el primer arreglo (10→18px, tras la queja de JJ) seguia bajo el valor canonico; se sube al canon en vez de quedarse a medias */
.tema-chip{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:14px;padding:12px 16px;cursor:pointer;transition:transform .1s ease}
.tema-chip:hover{border-color:var(--sll-primary-300)}
.tema-chip:active{transform:scale(.98);background:var(--sll-primary-50)}
.tema-chip .nombre{font-weight:700;color:var(--sll-gray-900)}
.tema-chip .meta{font-size:12px;color:var(--sll-copy-soft)}
/* «Jugar →» es una sola cosa y no se parte: sin esto, con un rótulo largo el flex le quitaba
 * ancho y el propio «Jugar →» caía en dos líneas, encima del rótulo que ya venía roto. */
.tema-chip .flecha{color:var(--sll-primary-500);font-weight:800;white-space:nowrap;flex-shrink:0}

/* ---- barra progreso ---- */
.barra-top{display:flex;align-items:center;gap:12px}
.progreso-track{flex:1;height:10px;background:var(--sll-gray-200);border-radius:999px;overflow:hidden}
.progreso-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sll-primary-400),var(--sll-primary-600));transition:width .3s ease}
.contador{font-size:13px;color:var(--sll-copy-soft);white-space:nowrap}

/* ---- ejercicio ---- */
.etiqueta-tipo{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--sll-purple-500);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.enunciado{font-size:19px;font-family:var(--sll-font-title);color:var(--sll-gray-900);margin-bottom:18px;line-height:1.4}
/* S8 primera pasada (11/09, feedback de Marina: «la instrucción la pondría un poco más grande»):
 * 13 px gris -> 15 px en el color de cuerpo. Paula afina tamaño y contraste (P3). */
.consigna{font-size:15px;line-height:1.45;color:var(--sll-copy-default);margin-bottom:14px}

.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{min-height:52px;display:flex;align-items:center;gap:12px;background:var(--sll-gray-0);border:2px solid var(--sll-gray-200);border-radius:14px;padding:13px 16px;cursor:pointer;text-align:left;font-size:16px;color:var(--sll-gray-900);transition:transform .08s ease}
.opcion:hover{border-color:var(--sll-primary-300)}
.opcion:active{transform:scale(.98)}
.opcion .letra{width:28px;height:28px;border-radius:50%;background:var(--sll-gray-200);color:var(--sll-gray-700);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.opcion.correcta{border-color:var(--sll-green-700);background:var(--sll-green-50)}
.opcion.correcta .letra{background:var(--sll-green-700);color:#fff}
/* Incorrecto = naranja, NUNCA el coral de marca — el sistema deja blue/purple/green/orange sin
 * rol fijado ("úsense como estados"), así que naranja para "incorrecto" es aplicar esa regla, no
 * saltársela. El coral queda solo para marca/CTA — antes se solapaban los dos significados. */
.opcion.incorrecta{border-color:var(--sll-orange-700);background:var(--sll-orange-50)}
.opcion.incorrecta .letra{background:var(--sll-orange-700);color:#fff}
.opcion:disabled,.opcion[aria-disabled="true"]{cursor:default}

.hueco-form{display:flex;flex-direction:column;gap:14px}
.hueco-input{min-height:52px;font-size:17px;padding:12px 16px;border-radius:12px;border:2px solid var(--sll-gray-300);font-family:var(--sll-font-body)}
.hueco-input:focus{outline:none;border-color:var(--sll-primary-400)}
.hueco-input.correcta{border-color:var(--sll-green-700);background:var(--sll-green-50)}
.hueco-input.incorrecta{border-color:var(--sll-orange-700);background:var(--sll-orange-50)}
.hueco-form .btn{width:100%}
/* Aviso de tilde (S5): la respuesta casó sin tilde; se da por buena y se recuerda la tilde. */
.aviso-tilde{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--sll-purple-700)}

.categorias-drop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.categorias-drop.cols-3{grid-template-columns:1fr 1fr 1fr}
/* S8 primera pasada (11/09, Marina: cajas «superchico y feo»): 90 -> 120 px de alto mínimo, más
 * relleno y rótulo a 14,5 px. El borde discontinuo y el tratamiento final son de Paula (P2). */
.categoria-caja{border:2px dashed var(--sll-gray-300);border-radius:14px;padding:14px 12px;min-height:120px;font-size:14.5px;color:var(--sll-copy-soft);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px;transition:transform .1s ease}
.categoria-caja:active{transform:scale(.97)}
.categoria-caja.arrastre-sobre{border-color:var(--sll-primary-400);background:var(--sll-primary-50)}
.categoria-caja .etiqueta-caja{font-weight:700;color:var(--sll-gray-800)}
.frase-arrastrable{min-height:44px;display:flex;align-items:center;background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:10px;padding:9px 12px;font-size:14px;cursor:grab;color:var(--sll-gray-900)}
.frase-arrastrable.colocada.correcta{border-color:var(--sll-green-700);background:var(--sll-green-50)}
.frase-arrastrable.colocada.incorrecta{border-color:var(--sll-orange-700);background:var(--sll-orange-50)}
.frase-arrastrable[aria-disabled="true"]{opacity:.55;cursor:default}
.bandeja-frases{display:flex;flex-direction:column;gap:8px;margin-top:12px}

/* marcar_palabras: cada palabra tocable tiene que ser un objetivo táctil de verdad, no un span
 * de 1px de padding — con palabras de 2-3 letras eso quedaba muy por debajo de 44px. */
.marcar-texto{font-size:16px;line-height:2.4}
.palabra-marcable{display:inline-block;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;border-radius:8px;padding:8px 6px;margin:2px 0;background:rgba(168,146,211,.18);transition:transform .08s ease}
.palabra-marcable:active{transform:scale(.94)}
.palabra-marcable.marcada{background:var(--sll-primary-200)}
.palabra-marcable.marcada.correcta{background:var(--sll-green-50);text-decoration:none}
.palabra-marcable.marcada.incorrecta{background:var(--sll-orange-100)}
.palabra-marcable.omitida{outline:2px dashed var(--sll-orange-700);outline-offset:1px}

/* ---- la pantalla de corrección — lo más cuidado de la app (criterio de JJ, 28/08) ---- */
/* Rejilla de 2 columnas: Cognitín y la cabecera (marca + bandera) comparten la primera fila; el
 * texto de la pista cruza las dos columnas en la segunda, así la explicación conserva el ancho
 * completo de la tarjeta en móvil (con la ilustración a su lado se quedaría en ~163px de los 263
 * disponibles a 375px de viewport). */
.pista{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:8px;
  align-items:center;
  background:var(--sll-purple-50);
  border:2px solid var(--sll-purple-500);
  border-radius:16px;
  padding:16px 18px;
  font-size:15px;
  line-height:1.55;
  color:var(--sll-gray-900);
  animation:pistaAparece .22s ease-out;
  --pista-fondo:var(--sll-purple-50);
}
/* Cuadro fijo de 88x88 con width/height también en el HTML: la ilustración llega después del texto
 * en conexiones malas (el canal principal es Instagram en móvil) y sin reserva de sitio la marca
 * daría un salto al aparecer. Los PNG son 176x176 — exactamente 2x, para pantallas densas. */
.pista-cognitin{width:88px;height:88px;object-fit:contain;animation:pistaPop .35s ease-out}
.pista-texto{grid-column:1 / -1;position:relative}
/* Plegado por umbral (31/08). `max-height` la pone app.js SIEMPRE como un múltiplo exacto del alto
 * de línea, así que el corte cae entre dos líneas: nunca media letra ni media línea. Y hay suelo:
 * la pista no puede quedarse en cero, el porqué no se esconde detrás de un botón. */
.pista[data-plegada="si"] .pista-texto{overflow:hidden}
/* El control va SUPERPUESTO al final de la última línea visible, no en una fila propia. No es
 * cosmética: una fila propia costaría 32 px de alto y esos 32 px son justo los que dejan «Siguiente
 * →» fuera de pantalla en el ejercicio más largo (medido: con fila propia sobra 10 px; superpuesto
 * entra con 22 px de margen). El degradado corto evita que el texto choque con el enlace; el
 * enlace en sí va sobre fondo sólido, así que su contraste no depende del degradado. */
.pista-mas{
  position:absolute;right:0;bottom:0;border:0;cursor:pointer;
  font-family:var(--sll-font-title);font-weight:800;font-size:14px;line-height:inherit;
  color:var(--sll-purple-700);text-decoration:underline;text-underline-offset:2px;
  padding:0 0 0 34px;
  background:linear-gradient(90deg,transparent 0,var(--pista-fondo) 30px,var(--pista-fondo) 100%);
}
/* Zona táctil de 45 px sin que el control ocupe 45 px de maquetación: el pseudoelemento agranda el
 * área de toque y no participa en el flujo. */
.pista-mas::after{content:"";position:absolute;inset:-11px -12px}
/* DESPLEGADA: el control sale del flujo superpuesto y baja a su propia línea (Paula 04/09).
 * Superpuesto tiene sentido plegada -tapa una línea que de todas formas continúa debajo-, pero
 * desplegada tapaba el FINAL de la explicación y parecía cortada. Al ocupar línea solo en el
 * estado desplegado, la geometría del estado plegado -de la que depende que «Siguiente» siga
 * en pantalla- no se toca. */
.pista[data-plegada="no"] .pista-mas{position:static;display:block;width:fit-content;margin:10px 0 0 auto;padding:0;background:none}
.pista-mas:active{color:var(--sll-primary-600)}
.pista[data-plegada="si"] .pista-mas .menos,
.pista[data-plegada="no"] .pista-mas .mas{display:none}
/* Una sola versión a la vista (31/08). El español y el inglés se emiten los dos y el CSS enseña
 * uno; el botón solo cambia `data-pista-lang` en el contenedor. Las dos versiones heredan el mismo
 * --sll-gray-900 y el mismo tamaño: traducir no degrada la pista a nota al pie, que era el efecto
 * de la versión apilada, y no toca el contraste ya verificado en la revisión del 28/08. */
.pista[data-pista-lang="es"] [data-idioma="en"],
.pista[data-pista-lang="en"] [data-idioma="es"]{display:none}
.pista-texto [data-idioma]{display:block}
.pista b{color:var(--sll-purple-700)} /* 28/08 revisión: purple-500 sobre los fondos -50 daba 2.29:1 (falla AA); purple-700 da ~7.3-7.7:1 en los tres fondos posibles (neutro/bien/mal) */
.pista.bien{background:var(--sll-green-50);border-color:var(--sll-green-700);--pista-fondo:var(--sll-green-50)}
.pista.mal{background:var(--sll-orange-50);border-color:var(--sll-orange-700);--pista-fondo:var(--sll-orange-50)}
/* Cabecera de la pista: la marca y, debajo, la bandera que la traduce. En columna a propósito —
 * en fila, a 375px, la columna que queda junto a Cognitín (~159px) no da para «No exactamente.»
 * (~132px) más un control de 44px sin partir la marca en dos líneas. Apilados caben en los 88px
 * de alto que ya ocupa la ilustración, así que el control NO añade ni un píxel a la tarjeta. */
.pista-cabecera{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* text-transform y letter-spacing se apagan a propósito: `.marca` es también la clase del logotipo
 * de la topbar, que sí va en versalitas, y la pista heredaba esa mayúscula por colisión de nombre,
 * no por diseño. Además strings.json guarda las cadenas en caja de frase, que es como se leen. */
.pista .marca{font-weight:800;font-size:16px;line-height:1.25;text-transform:none;letter-spacing:normal}
/* El control que traduce ESTA pista — no la app: por eso vive dentro de la tarjeta de corrección y
 * no en la cabecera, junto al 🌐 que sí cambia la app entera. Fondo blanco propio para que su
 * contraste no dependa de cuál de los tres fondos de pista le toque. */
/* El borde es lo que separa el botón del fondo de la pista: su relleno blanco contra los fondos
 * -50 solo da 1.12-1.19:1, así que el contorno tiene que cargar con el 3:1 de WCAG 1.4.11 para
 * elementos de interfaz. gray-400 daba 1.93-2.04 y gray-500 se quedaba en 2.74-2.89; gray-600 da
 * 4.00 sobre purple-50, 4.19 sobre green-50 y 4.22 sobre orange-50. Medido, no elegido a ojo. */
.pista-traducir{min-height:44px;display:inline-flex;align-items:center;gap:7px;background:var(--sll-gray-0);border:1px solid var(--sll-gray-600);border-radius:999px;padding:6px 13px;font-family:var(--sll-font-title);font-weight:700;font-size:13px;line-height:1;letter-spacing:.4px;color:var(--sll-gray-700);cursor:pointer}
.pista-traducir:active{background:var(--sll-gray-100);transform:scale(.97)}
.pista-traducir .destino{display:inline-flex;align-items:center;gap:7px}
.pista-traducir .bandera{width:22px;height:11px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(29,28,33,.25)}
.pista[data-pista-lang="es"] .destino-es,
.pista[data-pista-lang="en"] .destino-en{display:none}
.pista.bien .marca{color:var(--sll-green-800)} /* 28/08 revisión: green-700 sobre green-50 daba 4.15:1 (falla AA a 16px bold); green-800 da 7.39:1 */
.pista.mal .marca{color:var(--sll-orange-800)} /* 28/08 revisión: orange-700 sobre orange-50 daba 3.82:1 (falla AA a 16px bold); orange-800 da 9.19:1 */
@keyframes pistaAparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pistaPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pista,.pista-cognitin,.resumen .emoji-grande{animation:none !important}
}

.acciones-ejercicio{display:flex;justify-content:flex-end;margin-top:18px}
.acciones-ejercicio .btn{width:100%}
@media (min-width:600px){.acciones-ejercicio .btn{width:auto}}

/* ---- pantalla fin de bloque — celebración, no boletín de notas ---- */
.resumen{text-align:center;padding:6px 0}
.resumen .emoji-grande{display:inline-block;font-size:44px;animation:pistaPop .4s ease-out}
.resumen .puntuacion{font-family:var(--sll-font-title);font-size:38px;font-weight:800;color:var(--sll-primary-600);margin:8px 0}
.resumen h2{overflow-wrap:anywhere}
.resumen p{color:var(--sll-copy-default);font-size:15px;line-height:1.5;max-width:440px;margin:0 auto 18px}
.resumen .hero-cta{max-width:360px;margin-left:auto;margin-right:auto}

/* ---- CTA final ---- */
.cta-final{text-align:center}
.cta-final .badge-nivel{display:inline-block;background:var(--sll-primary-50);color:var(--sll-primary-600);font-weight:800;border-radius:999px;padding:6px 16px;font-size:13px;margin-bottom:10px}
.cta-final h2{font-size:22px;margin-bottom:8px;overflow-wrap:anywhere}
.cta-final .puntuacion{font-family:var(--sll-font-title);font-size:38px;font-weight:800;color:var(--sll-primary-600);margin:8px 0}
.cta-final .pista-cognitin{display:block;margin:0 auto 10px}
.cta-final .hero-cta{max-width:360px;margin-left:auto;margin-right:auto}
.cta-final p{font-size:14px;color:var(--sll-copy-default);max-width:460px;margin:0 auto 18px;line-height:1.5}
.cta-final small{display:block;margin-top:10px;color:var(--sll-copy-soft);font-size:11.5px}

.footer-nota{text-align:center;font-size:11px;color:var(--sll-copy-soft);margin-top:6px}
.badge-prueba{position:fixed;top:10px;right:10px;background:var(--sll-gray-900);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;opacity:.85;z-index:50;letter-spacing:.3px}

/* CTA persistente — visible sin buscarlo, sin ser protagonista (criterio de JJ 28/08). Antes de
 * esta base, la única llamada a la acción vivía dentro del panel que solo aparece tras terminar
 * el test de nivel: invisible mientras el alumno solo juega. Este enlace vive en el pie, en todas
 * las pantallas, con el tratamiento visual más discreto que ya existía (mismo estilo que el link
 * de la demo técnica) — no compite con los botones de flujo. */
.cta-persistente{text-align:center;margin-top:2px}
.cta-persistente a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;color:var(--sll-gray-700);font-size:12.5px;text-decoration:underline;text-underline-offset:2px} /* 28/08 revisión: copy-soft sobre gray-100 (fondo real aquí) daba 2.63:1 — el peor de la app y el único CTA visible durante el juego. gray-600 (sugerido en la revisión) solo llega a 4.6:1 sobre BLANCO; contra el gray-100 real de esta zona da 4.22:1 y sigue sin pasar — se verificó antes de aplicar. gray-700 da 6.49:1 sobre gray-100, con margen */
.cta-persistente a:active{color:var(--sll-primary-600)}

@media (max-width:480px){
  .categorias-drop{grid-template-columns:1fr}
  .hero h1{font-size:24px}
}

/* =============================================================================================
 * PORTADA — Paula afina aquí (P1). Primera pasada de Sentinel, 11/09 (decisiones 2 y 3 de JJ:
 * Cognitín es quien habla y tiene protagonismo en la portada). Todo lo de la portada nueva vive en
 * este bloque, aislado: lo de arriba (.hero, .hero-cta, .btn) no se ha tocado y sigue mandando en el
 * resto de pantallas que lo reutilizan. Va al final del archivo a propósito: misma o más
 * especificidad, gana por orden. Restricción medida a 375×812: la rejilla de niveles tiene que
 * verse sin scroll largo, así que el hero no crece en vertical respecto al anterior —el Cognitín
 * y el bocadillo van EN FILA, no apilados—.
 * ============================================================================================= */
/* Fila Cognitín + bocadillo. Ancho útil a 375 px: 375 − 28 (body) − 48 (tarjeta) = 299 px;
 * 100 px de imagen + 10 de hueco dejan 189 px al bocadillo. */
.hero-cognitin{display:flex;align-items:center;gap:10px;text-align:left;margin-bottom:14px}
/* 176×176 nativo -> 100 px CSS (1,76x): nítido en móvil. `flex-shrink:0` para que el bocadillo no
 * lo aplaste cuando el h1 inglés o español necesite más líneas. */
.hero-cognitin-img{width:100px;height:100px;object-fit:contain;flex-shrink:0;display:block}
/* El bocadillo lleva los mismos colores que la pista (purple-50 / purple-500): es la misma voz, la
 * de Cognitín, y el alumno la reconoce después en cada corrección. La cola es un cuadrado girado
 * con el mismo fondo y borde, pegado al lado izquierdo, hacia Cognitín. */
.bocadillo{position:relative;flex:1;min-width:0;background:var(--sll-purple-50);border:2px solid var(--sll-purple-500);border-radius:16px;padding:12px 14px}
.bocadillo::before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--sll-purple-50);border-left:2px solid var(--sll-purple-500);border-bottom:2px solid var(--sll-purple-500);transform:rotate(45deg)}
.bocadillo h1{font-size:22px;line-height:1.15;margin:0 0 6px}
/* `.hero p` (arriba) mete margin-bottom:24px y max-width; aquí se anula: el subtítulo va pegado al h1. */
.hero .bocadillo .hero-subtitulo{font-size:14px;line-height:1.35;color:var(--sll-copy-default);max-width:none;margin:0}
/* El párrafo de Cognitín sigue centrado y a ancho completo, con menos aire que antes (24 -> 16 px)
 * para compensar los ~14 px que crece la fila respecto al h1 solo. */
.hero #hero-texto{margin-bottom:16px}
.hero .hero-cta{margin-top:0}
@media (min-width:600px){
  .hero-cognitin-img{width:120px;height:120px}
  .bocadillo h1{font-size:26px}
  .hero .bocadillo .hero-subtitulo{font-size:15px}
}

/* CTA fijo del pie (decisión 10 de JJ, texto de Viraltia variante A). Antes era un enlace gris
 * subrayado de 12,5 px «para no competir con los botones de flujo»; JJ pide que se vea. Pasa a
 * pastilla secundaria: blanco, borde coral, texto primary-600 (contraste ya verificado en .btn.secundario),
 * 14 px, sin subrayado. 87 caracteres = 2-3 líneas a 375 px, por eso line-height 1.35 y sin nowrap.
 * Sigue siendo <a> y sigue en todas las pantallas (actualizarCtaPersistente no cambia). */
.cta-persistente{margin-top:4px}
.cta-persistente a{display:flex;width:100%;max-width:460px;margin:0 auto;min-height:48px;padding:11px 16px;background:var(--sll-gray-0);border:2px solid var(--sll-primary-200);border-radius:14px;color:var(--sll-primary-600);font-family:var(--sll-font-title);font-weight:700;font-size:14px;line-height:1.35;text-align:center;text-decoration:none}
.cta-persistente a:active{background:var(--sll-primary-50);color:var(--sll-primary-600)}

/* ---- NPS (Fran, ok JJ 11/09): interstitial previo al primer cierre de nivel ---- */
/* 11 botones de 0 a 10 con zona táctil de 44 px (doctrina de arriba). A 375 px el ancho útil de la
 * tarjeta son 299 px: caben 6 por fila (6×44 + 5×6 = 294; con 7 px de hueco salían 299 justos y saltaba a 5 por fila), así que salen dos filas, 0-5 y 6-10,
 * centradas. Nada de 11 en una fila: serían 24 px cada uno. */
.nps-escala{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:360px;margin:0 auto 14px}
.nps-btn{min-width:44px;min-height:44px;padding:0;border-radius:12px;border:2px solid var(--sll-gray-200);background:var(--sll-gray-0);font-family:var(--sll-font-title);font-weight:800;font-size:16px;color:var(--sll-gray-900);cursor:pointer;transition:transform .08s ease}
.nps-btn:hover{border-color:var(--sll-primary-300)}
.nps-btn:active{transform:scale(.94)}
.nps-btn.elegido{background:var(--sll-primary-500);border-color:var(--sll-primary-500);color:#fff}
.nps-btn:disabled{cursor:default}
.nps-btn:disabled:not(.elegido){opacity:.45}
.nps-gracias{font-weight:700;color:var(--sll-green-800)}