/* ============================================================
   Bichito Curioso — hoja de estilos única

   Papel blanco, tinta azul marino y primarios planos de juguete
   (cielo, coral, girasol, verde y violeta), sin degradados. El color lo
   ponen las cosas —los dibujos, las materias, la tarjeta del inicio—
   y no el fondo.

   Una sola regla para saber qué se toca: lo que se aprieta tiene un
   escalón abajo y se hunde al apretarlo; lo que no se aprieta es plano.

   Dos registros, según la edad del que juega (js/app.js los prende en
   <html>): de 4 a 7, todo más grande, más redondo y con menos texto (la
   vara es Pok Pok); de 8 a 12, más compacto y con más datos (la vara es
   Duolingo). El detalle está en DESIGN.md.
   ============================================================ */

/* Baloo 2, la tipografía redonda de toda la app. Va embebida en el
   proyecto (assets/fuentes/) y no pedida a Google, porque la app tiene
   que verse igual sin internet. Es variable: un archivo de 32 KB cubre
   de 400 a 800. Licencia OFL 1.1, ver assets/fuentes/LICENCIA.txt */
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fuentes/baloo2.woff2') format('woff2-variations'),
       url('../assets/fuentes/baloo2.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* La tinta y el papel. Los pisan las ranuras «letras» y «fondo» de la
     tienda (js/tienda/catalogo.js): cualquier combinación que se pueda
     comprar pasa 4,5:1. */
  --tinta:        #27304A;
  --tinta-suave:  #5B6478;
  --papel:        #ffffff;
  --tarjeta:      #ffffff;
  --borde:        #E3E8F0;   /* el filo de 2px de todo */
  --sombra-clay:  #CFD7E3;   /* el escalón de abajo, el que se hunde */
  --pista:        #C9D3E1;   /* rieles, interruptores apagados */
  --seleccion:    #DDEEFC;   /* el relleno de lo elegido */
  --agua:         #A8D8F5;   /* el mar de los mapas */

  /* La tarjeta grande del inicio y los carteles de los grandes. Se llama
     «barra» por la clave con la que se guarda la compra en la tienda. */
  --barra:         #1E90E0;
  --barra-fuerte:  #1672B8;
  --sobre-barra:   #ffffff;
  --marca-acento:  #FFC93C;

  /* Los botones grandes y lo que está elegido (ranura «botones»). */
  --primario:       #1673C4;
  --primario-osc:   #0F5796;
  --sobre-primario: #ffffff;
  --violeta:        #7B5AE0;
  --rosa:           #ec4899;
  --rosa-osc:       #be185d;

  /* Acertar y errar. No los pisa ningún tema: tienen que querer decir
     siempre lo mismo. */
  --exito:        #16a34a;
  --exito-osc:    #15803d;
  --exito-suave:  #DCF5E4;
  --error:        #ef4444;
  --error-osc:    #b91c1c;
  --error-suave:  #FDE3E3;
  --aviso:        #f59e0b;

  /* Los primarios de juguete, los mismos de los dibujos
     (js/nucleo/dibujos.js). Son de las cosas, no del tema: una estrella
     es amarilla aunque el chico se haya comprado todo en verde. */
  --cielo:    #1E90E0;
  --coral:    #E5533D;
  --girasol:  #FFC93C;
  --oro:      #D99A00;   /* el trazo de las estrellas y las monedas */
  --verde:    #2E9E4F;
  --lila:     #7B5AE0;
  --fuego:    #FF7A1A;
  --fuego-claro: #FFB547;  /* el relleno de adentro de la llama */
  --fuego-suave: #FFEDDC;  /* la pastilla de la racha */

  /* Lo que se mira y se toca en los juegos y las lecciones no es texto
     para leer: una cifra, una sílaba, un dibujo. Tiene su propia escala,
     aparte de la de la letra (DESIGN.md, Typography: pieza y cartel). */
  --letra-pieza:  1.6rem;                      /* teclas, fichas, sílabas, contadores */
  --letra-cartel: 2.5rem;                      /* un número o una palabra sola, grande */
  --dibujo-chico: 2.8rem;                      /* un dibujo en una tarjeta o una respuesta */
  --dibujo-grande: clamp(4.2rem, 18vw, 5.4rem); /* el dibujo de «Conocé lo nuevo» */

  /* La forma de mancha de los dibujos: redonda pero no un círculo de
     compás, como una mancha de témpera. */
  --mancha: 57% 43% 52% 48% / 47% 56% 44% 53%;

  --radio:   22px;
  --radio-s: 16px;
  --paso:    4px;   /* lo que mide el escalón de lo que se aprieta */

  /* Lo único que flota (el globo del tutorial, la hoja del nivel, el
     cartel de confirmar) lleva sombra corrida para abajo y difusa. */
  --sombra-flota: 0 18px 36px -14px rgba(39, 48, 74, .38);

  /* Todo se frena como algo que se apoya. El rebote quedó para festejar. */
  --suave:  cubic-bezier(.22, 1, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);

  --ico-relleno: currentColor;
  --fuente: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Dibujitos de un trazo para las marcas que no son un ícono de
     iconos.js: la tilde y la cruz de las respuestas, la lamparita de la
     pista, el ojo del «era ésta», la flechita y el más de los
     desplegables. Se usan de máscara, así toman el color de donde estén
     (y los de fondo blanco, directo). */
  --tilde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.6'/%3E%3C/svg%3E");
  --tilde-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.6'/%3E%3C/svg%3E");
  --cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --cruz-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --lamparita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18h5.6M10.2 21.3h3.6M12 2.8a6.3 6.3 0 0 0-3.7 11.4c.7.5 1.1 1.3 1.1 2.1v.7h5.2v-.7c0-.8.4-1.6 1.1-2.1A6.3 6.3 0 0 0 12 2.8z'/%3E%3C/svg%3E");
  --otra-vez: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3L4.5 8.8'/%3E%3Cpath d='M4.5 4.8v4h4'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* De 4 a 7: la letra base sube de 16 a 17px y con ella cada medida que
   está en rem; los radios se agrandan y el escalón se hace más hondo. */
:root.registro-chico {
  font-size: 106.25%;
  --radio:   26px;
  --radio-s: 20px;
  --paso:    5px;
}

/* ---------------- Íconos ----------------
   Dibujados en js/nucleo/iconos.js. Toman el color del texto de al
   lado; la capa de relleno sale de --ico-relleno. */
.ico {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-blando { fill: var(--ico-relleno); opacity: .32; stroke: none; }
.ico-trazo  { fill: none; }

/* La cajita sin clase donde iconos.js mete un dibujo: mide justo lo que
   el dibujo, para que quede centrado en su botón. */
span[data-ico]:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
span[data-ico]:not([class]) > .ico { vertical-align: 0; }

/* Los dibujos de js/nucleo/dibujos.js llenan la caja donde los pongan. */
.dibujo { display: block; width: 100%; height: 100%; }

/* ---------------- La base ---------------- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--pista) transparent;
}
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* en columna y con el alto de la pantalla como mínimo, para que el pie
     quede abajo de todo aunque la pantalla tenga poco */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

button { font: inherit; }

/* ---------------- Lo que no dibujamos nosotros ----------------
   La selección de texto, el cursor de escribir, la barra de scroll y el
   anillo del teclado también son de la app, no del navegador. */
::selection { background: var(--seleccion); color: var(--tinta); }
input, textarea { caret-color: var(--primario); accent-color: var(--primario); }
::placeholder { color: var(--tinta-suave); opacity: 1; }
a { color: var(--primario-osc); text-underline-offset: .2em; text-decoration-thickness: 2px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--pista);
  border: 3px solid var(--papel);
  border-radius: 999px;
}

/* El anillo del teclado va en la tinta y no en el color de los botones:
   el azul marino se despega de todo (del blanco, del cielo de la
   portada, del verde de Ciencias), y el azul de los botones no. */
:where(button, a, input, summary, canvas, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

/* [hidden] tiene que ganarle a los display de las pantallas */
[hidden] { display: none !important; }

/* El fondo es liso: el color del papel y nada más. Esta capa existe
   para los fondos que se compran en la tienda (burbujas, nubes…): son
   un dibujo que el chico eligió. Sin nada comprado queda transparente. */
#fondo-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--deco, none);
}
/* La bienvenida iba sobre un fondo de color con burbujas. Ahora es
   blanca como el resto: la capa queda apagada. */
#fondo-bienvenida { display: none; }

/* ---------------- Estructura ---------------- */
#app {
  flex: 1;          /* empuja el pie hasta abajo */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* el inset del notch: en modo app el reloj y la batería del celular
     quedarían encima del contenido */
  padding:
    calc(clamp(14px, 3vw, 30px) + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(40px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
}

/* Una columna como la de un teléfono, también en la tableta y en la
   compu: a lo ancho, una tarjeta de 1000px con dos renglones adentro es
   una pantalla vacía. El juego sí usa todo el ancho, por el mapa. */
.pantalla {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  animation: entrar .32s var(--suave) both;
}
#pantalla-juego { max-width: none; }
#pantalla-juegos, #pantalla-aprender, #pantalla-tienda, #pantalla-personalizacion { max-width: 820px; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.titulo-grande {
  margin: .1em 0 .15em;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.subtitulo {
  margin: 0 0 1.4em;
  color: var(--tinta-suave);
  font-size: 1.05rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Los títulos de las pantallas con dibujo (la tienda, los ajustes, las
   lecciones de una materia): el dibujo a la izquierda, del alto de dos
   renglones de título. */
.titulo-con-dibujo { display: flex; align-items: center; gap: 12px; }
.dibujo-titulo { flex: none; width: 1.9em; height: 1.9em; }
/* Y los que llevan un ícono (el examen, un juego): del color de los botones. */
.ico-titulo {
  width: 1em;
  height: 1em;
  margin-right: .3em;
  vertical-align: -.12em;
  color: var(--primario);
  stroke-width: 2;
}
.ico-titulo-caja { display: inline-flex; margin-right: .3em; vertical-align: -.1em; color: var(--primario); }
.ico-titulo-caja .ico { width: .95em; height: .95em; stroke-width: 2; }

/* Los títulos de sección («Para hoy», «Cómo vas en cada materia»):
   frases que se leen solas, del color del texto y un poco más grandes. */
.etiqueta-grupo {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tinta);
}

/* ============================================================
   La cortina de arranque

   Lo primero que se ve: la mascota que aparece parada sobre su sol y el
   nombre armándose letra por letra, sobre el mismo blanco de la app.
   Poco más de un segundo, y es el único momento de la app que rebota
   sin que nadie haya ganado nada. El dibujo está escrito en el
   index.html para que empiece con la primera pintada; cuándo se va lo
   decide js/nucleo/arranque.js.
   ============================================================ */
.arranque {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--papel);
  color: var(--tinta);
  /* La red de seguridad: si el JavaScript nunca corre, la cortina se
     levanta igual a los 6 segundos. */
  animation: arranque-seguro .3s linear 6s both;
}
@keyframes arranque-seguro {
  to { opacity: 0; visibility: hidden; }
}
.arranque.arranque-sale {
  pointer-events: none;
  animation: arranque-se-va .38s var(--suave) both;
}
@keyframes arranque-se-va {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(1.04); }
}

.arranque-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}

/* La mascota parada sobre un sol, con su sombrita en el piso. */
.arranque-insignia {
  position: relative;
  width: clamp(150px, 40vw, 190px);
  height: clamp(150px, 40vw, 190px);
  /* Flex y no grid: en una grilla, el height:100% de la mascota se mide
     contra la fila, que crece hasta el tamaño propio del dibujo (250px);
     la mascota se salía de la insignia y tapaba «Bichito». En flex se
     mide contra la insignia. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.arranque-insignia::before {
  content: '';
  position: absolute;
  inset: 4% 6% 16%;
  border-radius: 50%;
  background: #FFEBB0;
  animation: arranque-sol .5s var(--suave) both;
}
.arranque-insignia::after {
  content: '';
  position: absolute;
  bottom: 1%;
  left: 30%;
  right: 30%;
  height: 10px;
  border-radius: 50%;
  background: rgba(39, 48, 74, .12);
}
.arranque-globo {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  transform-origin: 50% 100%;
  animation: arranque-mascota .6s var(--rebote) .1s both;
}
@keyframes arranque-sol {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes arranque-mascota {
  from { opacity: 0; transform: translateY(26px) scale(.82); }
  to   { opacity: 1; transform: none; }
}

.arranque-nombre {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(2.3rem, 10vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.arranque-palabra { display: block; }
/* «Bichito» en tinta y «Curioso» en coral: el coral es el de la
   melena de la mascota, y da 3,7:1 contra el blanco a este tamaño. */
.arranque-palabra-2 { color: var(--coral); }

/* Cada letra sube y se endereza, una atrás de la otra. */
.arranque-palabra i {
  display: inline-block;
  font-style: normal;
  animation: arranque-letra .46s var(--rebote) both;
  animation-delay: calc(.28s + var(--l) * .035s);
}
@keyframes arranque-letra {
  from { opacity: 0; transform: translateY(24px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.arranque-puntos {
  display: flex;
  gap: 9px;
  margin-top: 6px;
  animation: arranque-letra .4s var(--suave) .8s both;
}
.arranque-puntos i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cielo);
  animation: arranque-punto .9s ease-in-out .8s infinite;
}
.arranque-puntos i:nth-child(2) { background: var(--coral); animation-delay: .92s; }
.arranque-puntos i:nth-child(3) { background: var(--verde); animation-delay: 1.04s; }
@keyframes arranque-punto {
  0%, 100% { transform: translateY(0); opacity: .5; }
  40%      { transform: translateY(-7px); opacity: 1; }
}

/* Con el celular acostado (320 a 440 de alto) la cortina mide unos 390px
   y no entraba: se cortaban «Curioso» y los puntitos. Ahí se achica
   según el alto. */
@media (max-height: 440px) {
  .arranque-caja { gap: 8px; padding: 12px; }
  .arranque-insignia { width: 42vh; height: 42vh; }
  .arranque-nombre { font-size: clamp(2rem, 11vh, 2.8rem); }
}

/* ---- Y atrás de la cortina, el inicio entrando ----
   El inicio ya está dibujado abajo de la cortina, así que espera a la
   clase que pone arranque.js al levantarla para entrar por partes. */
@media (prefers-reduced-motion: no-preference) {
  body.arrancado #pantalla-inicio { animation: none; }
  body.arrancado #pantalla-inicio > * { animation: asomar .5s var(--suave) both; }
  body.arrancado #pantalla-inicio > :nth-child(2) { animation-delay: .06s; }
  body.arrancado #pantalla-inicio > :nth-child(3) { animation-delay: .12s; }
  body.arrancado #pantalla-inicio > :nth-child(4) { animation-delay: .18s; }
  body.arrancado #pantalla-inicio > :nth-child(n+5) { animation-delay: .24s; }
}
@keyframes asomar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Inicio

   Arriba, quién sos, lo que juntaste y el candado de los grandes. En el
   medio, lo único que manda: el próximo paso, con un botón que lo
   empieza de un toque. Abajo, las dos puertas (Jugar y Aprender), lo
   de hoy, y chico lo que se usa menos.
   ============================================================ */
.barra-inicio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

/* La carita: lleva al perfil, que es donde se pone la foto. */
.yo {
  flex: none;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  text-decoration: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.yo:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.yo-cara { display: grid; width: 100%; height: 100%; border-radius: 50%; }
.yo-cara .carita-letra { font-size: 1.4rem; }

/* Lo que juntaste: la racha, las estrellas y las monedas. Las dos
   primeras son un dato, así que van sueltas; las monedas llevan a la
   tienda, así que son un botón con su escalón. */
.cuentas {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cuenta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  color: var(--tinta);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.cuenta .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.cuenta .ico-blando { opacity: 1; }
.cuenta-racha .ico { color: var(--fuego); --ico-relleno: var(--fuego-claro); }
/* Si hoy todavía no jugó, la llama se apaga pero no desaparece: la
   racha sigue viva hasta que termine el día. */
.cuenta-racha.racha-pendiente { color: var(--tinta-suave); }
.cuenta-racha.racha-pendiente .ico { color: #A9B3C4; --ico-relleno: var(--borde); }
.cuenta-estrellas .ico,
.cuenta-monedas .ico { color: var(--oro); --ico-relleno: var(--girasol); }
.cuenta-monedas {
  margin-left: 2px;
  padding: 0 12px 0 8px;
  border: 2px solid var(--borde);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.cuenta-monedas:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }

/* La puerta de los grandes: chica y sin color, para que la encuentre el
   que la busca sin llamarle la atención a un chico. Adentro pide el PIN. */
.boton-padres {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  height: 48px;
  padding: 0 14px 0 12px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta-suave);
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), color .15s, border-color .15s;
}
.boton-padres .ico { width: 20px; height: 20px; }
.boton-padres:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
/* En un celular angosto no entran las tres cuentas y la palabra: queda
   el candado solo (el lector de pantalla sigue leyendo «Modo parental»). */
@media (max-width: 419px) {
  .boton-padres { padding: 0; width: 48px; }
  .boton-padres-texto { display: none; }
}

@media (hover: hover) {
  .yo:hover, .cuenta-monedas:hover, .boton-padres:hover { border-color: var(--pista); }
  .boton-padres:hover { color: var(--tinta); }
}

/* ---- El próximo paso ----
   La tarjeta grande, del color de la portada que eligió el chico en la
   tienda. Adentro, el saludo, qué sigue y el botón; a la derecha la
   mascota, parada al lado del dibujo de la materia, con el sol atrás.
   No se aprieta entera (el que se aprieta es el botón), así que es
   plana: sin escalón.

   Todo lo que va escrito acá es grande y gordo (1,2rem o más, en
   negrita): el blanco sobre el cielo da 3,4:1, que es lo que pide la
   letra grande. */
.seguir {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 214px;
  margin: 0 0 16px;
  padding: 20px clamp(128px, 40%, 250px) 22px 22px;
  border-radius: var(--radio);
  background: var(--barra);
  color: var(--sobre-barra);
}
.seguir-cuerpo {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* El saludo lo dice la mascota: un globito blanco con la punta
   mirándola a ella. Letra oscura sobre blanco, así que puede ser chica. */
.seguir-titulo {
  position: relative;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 5px 14px 6px;
  border-radius: 16px;
  background: #ffffff;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}
.seguir-titulo::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: 9px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #ffffff;
  transform: rotate(45deg);
}
.seguir-que {
  margin: 0 0 16px;
  font-size: clamp(1.45rem, 5.6vw, 2.05rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.seguir-boton {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 26px 0 20px;
  border-radius: var(--radio-s);
  background: #ffffff;
  color: var(--barra-fuerte);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 var(--paso) 0 rgba(20, 28, 52, .3);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.seguir-boton .ico { width: 22px; height: 22px; }
.seguir-boton .ico-blando { opacity: 1; }
.seguir-boton:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 rgba(20, 28, 52, .3); }
.seguir-boton:focus-visible { outline-color: #ffffff; }

.seguir-escena {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(128px, 40%, 250px);
  pointer-events: none;
}
.seguir-sol {
  position: absolute;
  top: -34px;
  right: -30px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--marca-acento);
}
/* parada en el borde de abajo de la tarjeta: el dibujo deja un aire
   chiquito debajo de los pies, que queda afuera */
.seguir-bichito {
  position: absolute;
  right: -4px;
  bottom: -8px;
  height: 200px;
}
/* El dibujo de la materia, apoyado en el piso al lado de la mascota. */
.seguir-materia {
  position: absolute;
  left: -22px;
  bottom: 4px;
  width: 74px;
  height: 74px;
  z-index: 1;
}
.registro-chico .seguir { min-height: 236px; }

/* En la tableta y en la compu la tarjeta tiene 720px: la frase crece y
   la escena también, para que no quede un charco de color en el medio. */
@media (min-width: 640px) {
  .seguir,
  .registro-chico .seguir {
    min-height: 272px;
    padding: 30px clamp(128px, 42%, 300px) 30px 32px;
  }
  .seguir-escena { width: clamp(128px, 42%, 300px); }
  .seguir-titulo { font-size: 1.1rem; }
  .seguir-que { font-size: clamp(2rem, 4.2vw, 2.7rem); }
  .seguir-sol { top: -52px; right: -40px; width: 230px; height: 230px; }
  .seguir-bichito,
  .registro-chico .seguir-bichito { right: 26px; bottom: -10px; height: 258px; }
  .seguir-materia { left: 6px; bottom: 16px; width: 96px; height: 96px; }
}

/* ---- Las dos puertas: Jugar y Aprender ----
   Cada una con su dibujo sobre una mancha de color: es lo que reconoce
   un chico que todavía no lee. */
.puertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 24px;
}
.puerta {
  --puerta-mancha: var(--seleccion);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.puerta:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
#menu-jugar    { --puerta-mancha: #FFE3DC; --puerta-filo: var(--coral); }
#menu-aprender { --puerta-mancha: #EAE4FD; --puerta-filo: var(--lila); }
@media (hover: hover) {
  .puerta:hover { border-color: var(--puerta-filo, var(--pista)); }
}
.puerta-dibujo {
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
  border-radius: var(--mancha);
  background: var(--puerta-mancha);
}
.puerta-dibujo .dibujo { width: 84%; height: 84%; }
.puerta-nombre { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.puerta-dato { font-size: .9rem; line-height: 1.25; color: var(--tinta-suave); }
/* de 4 a 7: el dibujo más grande y sin la bajada */
.registro-chico .puerta-dibujo { width: 116px; height: 116px; }
.registro-chico .puerta-dato { display: none; }
/* en pantalla ancha cada puerta mide 350px: el dibujo crece con ella */
@media (min-width: 640px) {
  .puerta { padding: 20px 16px 18px; }
  .puerta-dibujo { width: 136px; height: 136px; }
  .registro-chico .puerta-dibujo { width: 156px; height: 156px; }
}

/* ---- Para hoy: la meta, el repaso y la prueba gratis ---- */
.hoy { margin: 0 0 24px; }
.hoy > .meta-hoy + .meta-hoy { margin-top: 12px; }

.meta-hoy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: inherit;
  text-decoration: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.meta-hoy:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
@media (hover: hover) { .meta-hoy:hover { border-color: var(--pista); } }
.meta-hoy-dibujo { flex: none; width: 60px; height: 60px; }
.meta-hoy-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.meta-hoy-titulo { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.meta-hoy-texto { font-size: .9rem; line-height: 1.3; color: var(--tinta-suave); }
.meta-hoy-barra { height: 14px; }
.meta-hoy-barra i { background: var(--girasol); }
.meta-hoy.cumplida .meta-hoy-barra i { background: var(--exito); }
.meta-hoy.cumplida .meta-hoy-titulo { color: var(--exito-osc); }
.plan-hoy.vencida .meta-hoy-titulo { color: var(--error-osc); }

.meta-cumplida {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--exito-suave);
  color: #14532d;
  font-weight: 800;
}
.meta-cumplida .ico { width: 20px; height: 20px; }

/* ---- Lo que se usa menos: la mascota y los ajustes ---- */
.atajos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 26px;
}
.atajo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 14px 8px 8px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.atajo:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
@media (hover: hover) { .atajo:hover { border-color: var(--pista); } }
.atajo-dibujo { flex: none; width: 44px; height: 44px; }

/* ---- ¿Quién juega? ----
   Una fichita por chico: su carita, el nombre y la edad. La del que
   está jugando va marcada con el color de los botones y una tilde; si
   son muchos hermanos, la fila se desliza de costado. */
.quien-juega { margin: 0 0 24px; }
.fila-jugadores {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* lugar para el escalón de abajo y el aro del teclado */
  padding: 4px 4px 12px;
  margin: -4px -4px 0;
  scrollbar-width: none;
}
.fila-jugadores::-webkit-scrollbar { display: none; }

.jugador {
  position: relative;
  flex: none;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.jugador:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
@media (hover: hover) { .jugador:hover { border-color: var(--pista); } }

.jugador-cara {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.9rem;
  line-height: 1;
}
.jugador-foto {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.jugador-nombre {
  max-width: 100%;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jugador-edad { font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--tinta-suave); }

/* el que está jugando */
.jugador[aria-pressed="true"] {
  cursor: default;
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}
.jugador[aria-pressed="true"]:active { transform: none; box-shadow: 0 var(--paso) 0 var(--primario-osc); }
.jugador-marca {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--tarjeta);
  background: var(--primario);
  color: var(--sobre-primario);
}
.jugador-marca .ico { width: 13px; height: 13px; stroke-width: 3; }

/* el de sumar otro chico */
.jugador-nuevo { border-style: dashed; border-color: var(--pista); box-shadow: none; }
.jugador-nuevo:active { transform: none; }
.jugador-nuevo .jugador-cara {
  border: 2px dashed var(--pista);
  color: var(--tinta-suave);
}
.jugador-nuevo .jugador-cara .ico { width: 26px; height: 26px; stroke-width: 2.6; }

/* ---- El cartel para instalar la app ---- */
.instalar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--radio);
  background: var(--seleccion);
}
.instalar-icono {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--primario);
}
.instalar-icono .ico { width: 26px; height: 26px; }
.instalar-cuerpo { flex: 1 1 220px; display: flex; flex-direction: column; }
.instalar-cuerpo b { font-size: 1.05rem; }
.instalar-cuerpo span { color: var(--tinta); font-size: .93rem; line-height: 1.35; }
.instalar #btn-instalar { flex: none; }
/* según el navegador se muestra el botón o las instrucciones de iPhone */
.instalar .instalar-ios,
.instalar[data-modo="ios"] .instalar-boton { display: none; }
.instalar[data-modo="ios"] .instalar-ios { display: inline; }

/* ============================================================
   El cartel del bichito: la mascota y un globo de historieta

   Las pantallas de elegir materia abren con la mascota diciendo el
   título desde un globo: un chico de cinco no lee encabezados, mira si
   hay alguien. Son el mismo h1 y la misma bajada de siempre, así que el
   lector de pantalla lee lo mismo. El globo no se aprieta: es plano.
   ============================================================ */
.cartel-bichito {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 22px;
}
.cartel-bichito-quien {
  flex: none;
  height: clamp(100px, 27vw, 132px);
  transform-origin: 50% 95%;
  animation: saludar 1.3s ease-in-out .35s 1 both;
}
@keyframes saludar {
  0%, 100% { transform: none; }
  30%      { transform: rotate(-4deg) translateY(-4px); }
  65%      { transform: rotate(3deg) translateY(-2px); }
}
.cartel-bichito-globo {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-bottom: 22px;
  padding: 12px 16px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
/* La punta del globo mirando a la mascota: un cuadradito girado con el
   mismo filo, tapado a medias por el globo. */
.cartel-bichito-globo::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 22px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-left: 2px solid var(--borde);
  border-bottom: 2px solid var(--borde);
  border-bottom-left-radius: 4px;
  background: var(--tarjeta);
}
.cartel-bichito-globo .titulo-grande {
  margin: 0;
  font-size: clamp(1.4rem, 5.4vw, 1.9rem);
}
.cartel-bichito-globo .subtitulo {
  margin: 3px 0 0;
  font-size: 1rem;
  line-height: 1.3;
}
@media (min-width: 720px) {
  .cartel-bichito { max-width: 640px; }
  .cartel-bichito-quien { height: 140px; }
}

/* ============================================================
   Fichas de materias, juegos y lecciones

   Blancas, con su filo y su escalón, y el color en el dibujo. Las
   materias llevan su dibujo entero sobre una mancha de su color (como
   los objetos de Pok Pok); los juegos y las lecciones, su ícono en un
   círculo pleno del color del juego, con su propio escalón.
   ============================================================ */
.grilla-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

/* Cinco materias en dos columnas dejan una sola abajo. En vez de un
   hueco, la última fila va centrada: dos, dos y una en el medio en el
   celular; tres y dos en la tableta. */
#grilla-materias,
#grilla-materias-aprender {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#grilla-materias > *,
#grilla-materias-aprender > * { flex: 0 1 calc(50% - 7px); }
/* el repaso y el examen, debajo de las materias */
.mas-formas { margin-top: 24px; }
@media (min-width: 600px) {
  #grilla-materias > *,
  #grilla-materias-aprender > * { flex-basis: calc(33.333% - 9.34px); }
}

.card {
  --sombra-color: var(--sombra-clay);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-color);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) {
  .card:hover:not(:disabled) { border-color: var(--card-color, var(--pista)); }
}
.card:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-color); }
.card:disabled { cursor: not-allowed; }
.card:disabled .card-dibujo,
.card:disabled .card-icono { filter: grayscale(1); opacity: .45; }

/* El círculo del ícono de un juego o una lección: pleno, del color del
   juego, con el dibujo en blanco (o en tinta sobre los colores claros,
   ver tarjeta() en js/app.js) y su escalón un tono más oscuro. */
.card-icono {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card-color, var(--primario));
  color: var(--card-glifo, #ffffff);
  font-size: 2.3rem;
  line-height: 1;
  box-shadow: 0 4px 0 var(--card-borde, var(--sombra-clay));
}
.card-icono .ico { width: 40px; height: 40px; stroke-width: 2; }
.card-icono .ico-blando { opacity: .3; }

/* El dibujo de una materia, sobre su mancha. */
.card-dibujo {
  width: 104px;
  height: 104px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--mancha);
  background: var(--card-suave, var(--seleccion));
}
.card-dibujo .dibujo { width: 86%; height: 86%; }
.registro-chico .card-dibujo { width: 122px; height: 122px; }

/* Todo lo que no es el dibujo: título, bajada, récord, barras. */
.card-cuerpo {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.card-titulo { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.card-texto { font-size: .86rem; line-height: 1.25; color: var(--tinta-suave); }
.registro-chico .card-con-dibujo .card-texto { display: none; }
.registro-chico .card-con-dibujo .card-titulo { font-size: 1.3rem; }

/* «Pronto», en las materias que todavía no están: un dato de la ficha,
   en el renglón de la bajada. */
.card-cinta {
  align-self: center;
  margin-top: 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.card-record {
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #FFF1C7;
  color: #6B4A00;
  font-size: .87rem;
  font-weight: 700;
}
.card-record .ico { width: 1em; height: 1em; margin-right: .15em; }

/* ============================================================
   Los juegos de una materia: la cabecera y una fila por juego
   ============================================================ */
/* La cabecera, del tono vivo de la materia con la letra oscura encima
   (los cinco pares están medidos en js/app.js, en MATERIAS). Plana: no
   se aprieta. El dibujo va en un círculo blanco para que no se pierda
   contra su propio color. */
.materia-cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 2px 0 18px;
  padding: 16px;
  border-radius: var(--radio);
  background: var(--materia-color, var(--barra));
  color: var(--materia-tinta, var(--tinta));
}
.materia-cabecera-icono {
  width: 76px;
  height: 76px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
}
.materia-cabecera-icono .dibujo { width: 86%; height: 86%; }
.materia-cabecera-datos { flex: 1 1 140px; min-width: 0; }
.materia-cabecera-titulo {
  margin: 0;
  font-size: clamp(1.6rem, 5.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
}
.materia-cabecera-texto { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }

/* El atajo a las lecciones de la materia: un botón blanco con su
   escalón, apoyado en el cartel. */
.materia-aprender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--materia-tinta, var(--tinta));
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 var(--paso) 0 rgba(20, 28, 52, .22);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.materia-aprender:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 rgba(20, 28, 52, .22); }
.materia-aprender .ico { width: 1.2em; height: 1.2em; }

.grilla-cards.grilla-filas { display: flex; flex-direction: column; gap: 12px; }
.card.card-fila {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  text-align: left;
}
.card-fila .card-icono { width: 62px; height: 62px; font-size: 1.9rem; }
.card-fila .card-icono .ico { width: 34px; height: 34px; }
.card-fila .card-cuerpo { flex: 1; align-items: flex-start; gap: 3px; }
.card-fila-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.card-fila .card-titulo { font-size: 1.15rem; }
.card-fila .card-texto { font-size: .9rem; }
.card-fila .avance { max-width: 300px; margin-top: 4px; }
.card-fila .nivel-barra { height: 10px; }
.card-fila .nivel-barra i { background: var(--card-color, var(--girasol)); }
.card-fila .avance-cuenta { font-size: .8rem; }
.card-empezar { margin-top: 3px; font-size: .84rem; font-weight: 800; color: var(--tinta-suave); }
.card-fila .card-edad { position: static; box-shadow: none; }
.card-fila .card-consejo { align-items: flex-start; width: 100%; max-width: 300px; }
.card-fila .card-consejo-listo { justify-content: flex-start; }
.card-fila .traba-texto { text-align: left; }
.card-fila .card-dominado { margin-top: 5px; }
/* la flechita de «se toca» */
.card-flecha {
  flex: none;
  align-self: center;
  display: inline-flex;
  color: var(--pista);
  transition: transform .15s var(--suave), color .15s;
}
.card-flecha .ico { width: 24px; height: 24px; stroke-width: 3; }
@media (hover: hover) {
  .card-fila:hover .card-flecha { transform: translateX(3px); color: var(--card-color, var(--primario)); }
}
.registro-chico .card-fila .card-icono { width: 70px; height: 70px; }
.registro-chico .card-fila .card-texto { display: none; }

/* en la fila de un juego: las estrellas ganadas en su camino */
.card-estrellas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font-size: .82rem;
  font-weight: 800;
  color: #6B4A00;
}
.card-estrellas .ico { width: 15px; height: 15px; color: var(--oro); }
.card-estrellas .ico-blando { fill: var(--girasol); opacity: 1; }

/* ============================================================
   Los juegos y las lecciones para más grandes

   No están trabados: se pueden jugar igual. Los distingue una etiqueta
   con la edad y, abajo, una barra que se llena a medida que domina los
   de su edad.
   ============================================================ */
.card-edad {
  position: absolute;
  right: -10px;
  bottom: -2px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta-suave);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}
/* ya está listo: la etiqueta se prende, en el verde oscuro (la letra
   chica en blanco sobre el verde claro no llega a 4,5:1) */
.card-edad-listo {
  border-color: var(--exito-osc);
  background: var(--exito-osc);
  color: #ffffff;
}
.card-consejo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tinta-suave);
}
.card-consejo-listo {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  color: var(--exito-osc);
}
.card-consejo .ico { width: 14px; height: 14px; flex: none; margin-top: .15em; }
.traba-texto { min-width: 0; text-align: center; }
.card-consejo-listo .traba-texto { text-align: left; }

/* «Lo dominás»: una partida entera sin errores. */
.card-dominado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--exito-suave);
  color: #14532d;
  font-size: .8rem;
  font-weight: 800;
}
.card-dominado .ico { width: 14px; height: 14px; stroke-width: 2.6; }

/* La barra de avance y su número: chiquita en la ficha, entera en el
   cartel de arriba. */
.avance { display: flex; align-items: center; gap: 8px; width: 100%; }
.avance .nivel-barra { flex: 1; min-width: 40px; }
.avance-cuenta {
  flex: none;
  font-size: .82rem;
  font-weight: 800;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.card-consejo .nivel-barra { height: 9px; }
.card-consejo .avance-cuenta { font-size: .76rem; }

.card-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.card-minutos, .card-leida, .card-repasar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--tinta);
  font-size: .84rem;
  font-weight: 700;
}
.card-leida { background: var(--exito-suave); color: #14532d; }
.card-pie .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.card-repasar { background: var(--seleccion); color: var(--tinta); }

/* El atajo a la otra mitad de la app («Aprender matemática», «Jugar a
   inglés»): discreto, pero con 44px de alto para el dedo. */
.enlace-cruzado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--primario-osc);
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.enlace-cruzado .ico { width: 1.1em; height: 1.1em; }
@media (hover: hover) { .enlace-cruzado:hover { text-decoration: underline; } }
.enlace-leccion { text-align: center; margin: -1em 0 1.2em; }

/* ============================================================
   Nivel de una materia

   El cartel de arriba de los juegos (y el de los resultados): hasta
   qué edad le corresponde, una barra, y cuánto falta para la
   siguiente. Es una meta, así que va en el girasol de las metas. Plano:
   no se aprieta.
   ============================================================ */
.nivel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 2px solid #F6D98A;
  border-radius: var(--radio);
  background: #FFF7DE;
  text-align: left;
}
.nivel-titulo { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.nivel-texto { font-size: .93rem; line-height: 1.35; color: var(--tinta); }

/* Las barras de progreso: un riel gris y el relleno con un brillo arriba,
   como las de Duolingo. Se llenan con transform, no con width. */
.nivel-barra {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.nivel-barra i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--girasol);
  /* arranca vacía: el JavaScript le pone cuánto, y se llena desde cero */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--suave);
}
.nivel-barra i::after,
.progreso-barra i::after,
.camino-barra i::after {
  content: '';
  position: absolute;
  top: 22%;
  left: 7px;
  right: 7px;
  height: 22%;
  min-height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
}
/* en los resultados va adentro de la columna, con menos aire */
.nivel-fin { margin: 4px 0 18px; }

/* ============================================================
   Aviso de desbloqueo en los resultados
   ============================================================ */
.desbloqueo { margin: 4px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.desbloqueo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #F6D98A;
  border-radius: var(--radio-s);
  background: #FFF7DE;
  text-align: left;
  animation: aparecer .4s var(--suave) both;
}
.desbloqueo-item > div { flex: 1; min-width: 0; }
.desbloqueo-icono {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--girasol);
  color: #5A3B00;
}
.desbloqueo-icono .ico { width: 26px; height: 26px; }
.desbloqueo-titulo { font-size: 1.25rem; font-weight: 800; text-align: center; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   El examen, el repaso y el tutorial: una fila ancha con su círculo

   El mismo molde que las fichas —blanca, filo y escalón— con el color
   en el círculo, que es donde no molesta.
   ============================================================ */
.tarjeta-examen {
  --examen-color: var(--coral);
  --examen-fuerte: #B83A27;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px 12px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .tarjeta-examen:hover { border-color: var(--examen-color); } }
.tarjeta-examen:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
/* el repaso va en el verde de acertar: es otra cosa que el examen */
.tarjeta-repaso   { --examen-color: var(--verde); --examen-fuerte: #1F7A3A; }
.tarjeta-tutorial { --examen-color: var(--lila);  --examen-fuerte: #5639B8; margin-top: 4px; }

.examen-icono {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--examen-color);
  color: #ffffff;
  box-shadow: 0 4px 0 var(--examen-fuerte);
}
.examen-icono .ico { width: 32px; height: 32px; stroke-width: 2; }
.examen-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.examen-cuerpo b { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.examen-cuerpo span { font-size: .92rem; line-height: 1.3; color: var(--tinta-suave); }
.examen-flecha { flex: none; display: inline-flex; color: var(--pista); }
.examen-flecha .ico { width: 24px; height: 24px; stroke-width: 2.8; }

/* ============================================================
   Botones
   ============================================================ */
/* El botón de la acción principal: pleno, del color de los botones, con
   su escalón. Uno por pantalla. */
.btn-gigante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 34px;
  border: none;
  border-radius: var(--radio-s);
  background: var(--primario);
  color: var(--sobre-primario);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), filter .15s;
}
@media (hover: hover) { .btn-gigante:hover:not(:disabled) { filter: brightness(1.06); } }
.btn-gigante:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--primario-osc); }
.btn-gigante:disabled {
  background: var(--borde);
  color: var(--tinta-suave);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  cursor: not-allowed;
}
.registro-chico .btn-gigante { min-height: 62px; }

/* El de al lado: blanco, con filo y escalón. */
.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  padding: 10px 24px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .btn-secundario:hover { border-color: var(--pista); } }
.btn-secundario:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.btn-secundario > [data-ico] { display: inline-flex; }
.btn-secundario .ico { width: 1.15em; height: 1.15em; }
.btn-secundario.peligro { color: var(--error-osc); }
@media (hover: hover) { .btn-secundario.peligro:hover { border-color: var(--error); } }
.btn-chico { min-height: 44px; padding: 6px 16px; font-size: .95rem; }

/* El de texto: para lo que casi nunca se usa («Cerrar», «Usar otro mail»). */
.btn-texto {
  display: block;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
@media (hover: hover) { .btn-texto:hover { color: var(--tinta); } }

/* El redondo de un solo ícono (el silenciador de la partida). */
.btn-icono {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.btn-icono .ico { width: 22px; height: 22px; }
.btn-icono:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.btn-icono.apagado { color: var(--tinta-suave); }

/* La flecha de volver: pegada arriba del contenido y quieta al
   scrollear, como el botón de atrás de cualquier app. */
.btn-atras {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 25;
  width: 48px;
  height: 48px;
  margin: 0 0 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.btn-atras .ico { width: 24px; height: 24px; stroke-width: 2.6; }
.btn-atras:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
@media (hover: hover) { .btn-atras:hover, .btn-icono:hover { border-color: var(--pista); } }

/* ============================================================
   Elegir: las opciones de una partida libre, de un examen, la meta
   ============================================================ */
.bloque-config { margin-bottom: 26px; }

.grilla-continentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px 12px;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
@media (hover: hover) { .opcion:hover { border-color: var(--op-color, var(--pista)); } }
.opcion:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
/* Lo elegido: el relleno y el filo del color de los botones, como la
   respuesta elegida de Duolingo. */
.opcion[aria-pressed="true"] {
  border-color: var(--op-color, var(--primario));
  background: var(--op-suave, var(--seleccion));
  box-shadow: 0 var(--paso) 0 var(--op-color, var(--primario));
}
.opcion-icono { flex: none; display: inline-flex; font-size: 1.7rem; line-height: 1; }
.opcion-icono .ico { width: 28px; height: 28px; }
/* cuando el ícono es el número mismo (las tablas): grande y del color
   de la materia */
.opcion-icono.numero {
  display: block;
  min-width: 1.5em;
  color: var(--op-color, var(--primario));
  font-size: 2.3rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.opcion-cuerpo { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.opcion-nombre { font-weight: 800; line-height: 1.2; }
.opcion-detalle { font-size: .86rem; line-height: 1.3; color: var(--tinta-suave); }
/* la selección múltiple se marca con una tilde, no sólo con el color */
.opcion-multiple[aria-pressed="true"] .opcion-icono::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px auto 0;
  background: var(--exito-osc);
  -webkit-mask: var(--tilde) center / contain no-repeat;
          mask: var(--tilde) center / contain no-repeat;
}

.fila-opciones { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.fila-opciones .opcion { min-width: 120px; }

.zona-empezar { text-align: center; margin-top: 30px; }
.resumen-partida { min-height: 1.5em; margin: 0 0 14px; color: var(--tinta-suave); }
.config-al-mapa { text-align: center; margin: -6px 0 18px; }

/* ============================================================
   Los niveles de un juego (el modo libre)
   ============================================================ */
.grilla-niveles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.nivel-opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
@media (hover: hover) { .nivel-opcion:hover { border-color: var(--op-color, var(--pista)); } }
.nivel-opcion:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.nivel-opcion[aria-pressed="true"] {
  border-color: var(--op-color);
  background: var(--op-suave);
  box-shadow: 0 var(--paso) 0 var(--op-color);
}
/* el número, que es lo que ordena: pleno con el número en blanco */
.nivel-numero {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--op-color);
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.nivel-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nivel-nombre { font-weight: 800; line-height: 1.2; }
.nivel-detalle { font-size: .86rem; line-height: 1.25; color: var(--tinta-suave); }
.nivel-sello {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--exito-osc);
  color: #ffffff;
}
.nivel-sello .ico { width: 16px; height: 16px; stroke-width: 3; }

/* La meta propia: el número grande entre un − y un + redondos. */
.meta-personal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.meta-paso {
  width: 54px;
  height: 54px;
  flex: none;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .meta-paso:hover:not(:disabled) { border-color: var(--pista); } }
.meta-paso:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.meta-paso:disabled { opacity: .45; cursor: default; }
.meta-personal-cifra {
  margin: 0;
  min-width: 9.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.meta-personal-cifra b { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-personal-cifra span { font-size: .9rem; color: var(--tinta-suave); }

/* ============================================================
   El juego

   Arriba, una barra gorda que se llena (lo que un chico mira para saber
   cuánto le falta), los intentos y el silenciador. En el medio, la
   pregunta, grande y sin caja. Abajo, las respuestas: fichas blancas
   iguales, que se pintan de verde o de rojo al contestar. El cartel de
   lo que pasó va debajo, en su lugar reservado.
   ============================================================ */
.pantalla-juego { display: flex; flex-direction: column; gap: 14px; }

/* Una sola fila, como en Duolingo: la flecha de volver (que vive afuera
   de la pantalla, pegada arriba), la barra, los intentos y el sonido.
   La pantalla sube lo que mide la flecha y la barra le deja su lugar. */
body.jugando #pantalla-juego { margin-top: -58px; }
.hud {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding-left: 60px;
}
.hud-izq { flex: 1 1 auto; min-width: 0; }
.hud-der { flex: none; display: flex; align-items: center; gap: 10px; }

.progreso-envase { display: flex; align-items: center; gap: 12px; }
.progreso-barra {
  flex: 1;
  height: 18px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.progreso-barra i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--exito);
  /* con transform y no con width: no recalcula la pantalla */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--suave);
}
.progreso-texto {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Los puntos no se muestran mientras se juega (compiten con la
   pregunta); siguen existiendo para el panel de los grandes. */
.marcador {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #FFF1C7;
  color: #6B4A00;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.marcador span { display: inline-flex; }
.marcador .ico { width: 20px; height: 20px; }
body.jugando .marcador,
body.rindiendo .marcador,
body.rindiendo .vidas { display: none; }

/* Los intentos: corazones llenos. El que se pierde se sacude y queda
   gris, sin ser un castigo. */
.vidas { display: flex; gap: 4px; line-height: 1; }
.vidas span { display: inline-flex; transition: transform .25s var(--suave), opacity .25s; }
.vidas .ico { width: 28px; height: 28px; color: var(--error); }
.vidas .ico-blando { opacity: 1; fill: #FF8A8A; }
.vidas span.gastada { opacity: .5; transform: scale(.82); animation: corazon-se-va .5s var(--suave); }
.vidas span.gastada .ico { color: #A9B3C4; }
.vidas span.gastada .ico-blando { fill: var(--borde); }
@keyframes corazon-se-va {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25) rotate(-12deg); }
  100% { transform: scale(.82); }
}

/* ---------------- La pregunta ---------------- */
/* La consigna arriba y lo que hay que mirar abajo, grande y en el medio:
   al lado de la frase, las manzanas de «¿Cuántos hay?» quedaban del
   tamaño de una letra. */
.pregunta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 4px 2px;
  text-align: center;
}
.pregunta-texto {
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.pregunta-texto b { color: var(--primario-osc); }
.pregunta-visual { display: flex; align-items: center; justify-content: center; }
.pregunta-bandera {
  display: block;
  width: auto;
  height: clamp(64px, 9vw, 104px);
  border: 2px solid var(--borde);
  border-radius: 10px;
}

/* ---------------- El mapa ---------------- */
.zona-mapa {
  position: relative;
  width: 100%;
  margin-inline: auto;          /* el ancho máximo lo pone js/mapa.js según la zona */
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--agua);
  overflow: hidden;
  touch-action: none;
}
#mapa { display: block; }
#mapa svg {
  display: block;
  width: 100%;
  height: auto;
  /* el max() evita que el mapa se achique a cero si el navegador informa
     un alto raro (pestaña en segundo plano, ventana recién abierta) */
  max-height: max(240px, min(70vh, 700px));
  background: var(--agua);
  cursor: grab;
}
#mapa svg.arrastrando { cursor: grabbing; }

.pais {
  fill: #EEF1F5;
  stroke: #B9C3CF;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill .18s;
}
.pais.jugable { fill: #CDEBB0; stroke: #6FA043; cursor: pointer; }
.pais.jugable:hover { fill: #B6E08D; }
.punto {
  fill: #CDEBB0;
  stroke: #4D7A2A;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.punto:hover { fill: #B6E08D; }
.pais.correcto, .punto.correcto { fill: var(--exito); stroke: var(--exito-osc); }
.pais.fallo,    .punto.fallo    { fill: var(--error); stroke: var(--error-osc); }
.pais.revelado, .punto.revelado { fill: var(--girasol); stroke: #B37E00; animation: palpitar 1s ease-in-out 3; }
@keyframes palpitar { 50% { opacity: .35; } }
/* en el examen, la elegida se marca en neutro: registrada, sin decir si va bien */
.pais.elegida, .punto.elegida { fill: var(--primario); stroke: var(--primario-osc); }

.etiqueta-mapa {
  font-family: var(--fuente);
  font-weight: 800;
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(39, 48, 74, .88);
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: middle;
  pointer-events: none;
}

.controles-mapa {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-mapa {
  width: 44px;
  height: 44px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.btn-mapa:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sombra-clay); }
.btn-mapa { display: grid; place-items: center; padding: 0; }
.btn-mapa .ico { width: 22px; height: 22px; stroke-width: 2.6; }

.pista-mapa {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--tinta);
  font-size: .8rem;
  pointer-events: none;
  transition: opacity .4s;
}

/* ---------------- Las respuestas ---------------- */
.zona-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 12px;
}
.zona-opciones[data-columnas="4"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.btn-opcion {
  --op-paso: var(--sombra-clay);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--op-paso);
  font: inherit;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
@media (hover: hover) {
  .btn-opcion:hover:not(:disabled) { border-color: var(--pista); background: #F8FAFD; }
}
.btn-opcion:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--op-paso); }
.btn-opcion:disabled { cursor: default; }
.btn-opcion img {
  width: 100%;
  max-width: 180px;
  border: 2px solid var(--borde);
  border-radius: 8px;
}

/* Acertaste / erraste: el relleno, el filo y el escalón del color, y
   además un sello dibujado en la esquina (una tilde o una cruz). El
   color solo no alcanza: un chico que no distingue verde de rojo
   tiene que poder ver cuál era. */
.btn-opcion.correcta {
  --op-paso: var(--exito-osc);
  border-color: var(--exito);
  background: var(--exito-suave);
  color: #14532d;
  animation: salto-acierto .5s var(--suave);
}
.btn-opcion.incorrecta {
  --op-paso: var(--error-osc);
  border-color: var(--error);
  background: var(--error-suave);
  color: #7f1d1d;
  animation: temblar .4s ease-in-out;
}
.btn-opcion.correcta::after,
.btn-opcion.incorrecta::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -8px;
  width: 32px;
  height: 32px;
  border: 3px solid var(--tarjeta);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  animation: sello-entra .3s var(--rebote) both;
}
.btn-opcion.correcta::after   { background-color: var(--exito-osc); background-image: var(--tilde-blanca); }
.btn-opcion.incorrecta::after { background-color: var(--error-osc); background-image: var(--cruz-blanca); background-size: 15px; }
@keyframes sello-entra {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes salto-acierto {
  0%   { transform: none; }
  35%  { transform: translateY(-8px); }
  65%  { transform: translateY(1px); }
  100% { transform: none; }
}
@keyframes temblar {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}
/* en el examen, la elegida se marca en neutro */
.btn-opcion.elegida {
  --op-paso: var(--primario-osc);
  border-color: var(--primario);
  background: var(--seleccion);
}

/* las formas de las respuestas */
.btn-opcion.texto {
  justify-content: center;
  min-height: clamp(66px, 11vw, 88px);
  padding: 10px 14px;
}
.opcion-valor {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.opcion-bandera { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.nombre-opcion { min-height: 1.4em; font-size: .95rem; }

.btn-opcion.palabra { justify-content: center; min-height: clamp(62px, 10vw, 78px); padding: 10px 12px; }
.btn-opcion.palabra .opcion-valor {
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.btn-opcion.emoji { justify-content: center; min-height: clamp(78px, 20vw, 100px); }
.btn-opcion.emoji .opcion-valor { font-size: clamp(2.4rem, 10vw, 3.2rem); }
/* una frase entera va en su renglón, a todo el ancho, alineada a la
   izquierda como se lee */
.btn-opcion.frase {
  grid-column: 1 / -1;
  align-items: flex-start;
  padding: 13px 16px;
  text-align: left;
}
.btn-opcion.frase .opcion-valor {
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 1.3;
  font-variant-numeric: normal;
}
.btn-opcion.fraccion { justify-content: center; min-height: clamp(78px, 18vw, 96px); }
.registro-chico .btn-opcion.texto,
.registro-chico .btn-opcion.palabra { min-height: clamp(76px, 13vw, 96px); }

/* una fracción como se escribe a mano: un número arriba del otro */
.fraccion-escrita {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fraccion-escrita span:first-child { padding: 0 .3em 2px; border-bottom: 3px solid currentColor; }
.fraccion-escrita span:last-child { padding-top: 2px; }

/* el nombre de una categoría con una línea que dice qué es */
.opcion-con-pista { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.opcion-pista { font-size: .82rem; font-weight: 600; line-height: 1.2; color: var(--tinta-suave); }
.btn-opcion.correcta .opcion-pista,
.btn-opcion.incorrecta .opcion-pista { color: inherit; }

/* ---------------- El cartel de lo que pasó ----------------
   Una banda debajo de las respuestas, con su lugar reservado aunque
   esté vacía: si apareciera y desapareciera, el mapa cambiaría de
   tamaño en cada respuesta. Cada tipo trae su dibujito adelante. */
.aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  min-height: 56px;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: var(--radio-s);
  background: transparent;
  color: transparent;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  transition: background-color .16s, color .16s;
}
.aviso::before {
  content: '';
  flex: none;
  width: 0;
  height: 26px;
  -webkit-mask: var(--aviso-dibujo, none) center / contain no-repeat;
          mask: var(--aviso-dibujo, none) center / contain no-repeat;
  background: currentColor;
}
.aviso.bien, .aviso.mal, .aviso.dato, .aviso.pista {
  animation: aparecer-aviso .22s var(--suave) both;
}
.aviso.bien, .aviso.mal, .aviso.dato, .aviso.pista { text-align: left; }
.aviso.bien::before, .aviso.mal::before, .aviso.dato::before, .aviso.pista::before { width: 26px; }
.aviso.bien  { background: var(--exito-osc); color: #ffffff; --aviso-dibujo: var(--tilde); }
/* Al errar, el cartel no reta: el botón elegido ya se marca en rojo con
   su cruz, y el cartel es la parte que anima a probar otra vez. Crema,
   como la pista y como la respuesta de las lecciones, con la flecha de
   «otra vez» en lugar de la cruz. */
.aviso.mal   { background: #FFF1C7; color: #5A3B00; --aviso-dibujo: var(--otra-vez); }
/* «Era ésta»: el dato, en azul, sin ser ni premio ni reto */
.aviso.dato  { background: var(--seleccion); color: var(--tinta); --aviso-dibujo: var(--ojo); }
/* La pista es ayuda, no reto: crema con letra oscura, para leerla con
   calma (9:1). */
.aviso.pista { background: #FFF1C7; color: #5A3B00; --aviso-dibujo: var(--lamparita); }
@keyframes aparecer-aviso {
  from { opacity: .2; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- Lo que se muestra en la pregunta ----------------
   Cada juego pinta su dibujo en #pregunta-visual. */
.reloj { display: block; width: clamp(120px, 22vw, 168px); height: auto; }
.visual-emoji { font-size: clamp(3.6rem, 13vw, 5rem); line-height: 1; }
/* Un lugar con dibujo propio (el río) en vez de emoji: medido en em, crece
   y se achica igual que los emojis que tiene al lado en cada pantalla. */
.visual-paisaje { display: block; width: 1.1em; height: 1.1em; margin-inline: auto; }
.visual-paisaje .dibujo { width: 100%; height: 100%; }
/* sola, en la pregunta, es una foto: más grande que un emoji para que se lea */
.pregunta-visual .visual-paisaje { width: 1.75em; height: 1.75em; }
.visual-con-palabra { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.visual-palabra {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
}
/* el lugar de la letra que falta: una rayita del color de los botones */
.hueco {
  display: inline-block;
  min-width: .8em;
  margin: 0 .05em;
  border-bottom: 4px solid var(--primario);
  color: var(--primario);
  text-align: center;
}

/* De a cinco por fila, como un ábaco: 7 se ve como «cinco y dos». */
.contar {
  /* en flex y no en grilla de cinco: con una sola cosa, la grilla dejaba
     los cuatro lugares vacíos a la derecha y el dibujo quedaba corrido */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  --tam-cosa: clamp(46px, 12.5vw, 64px);
  max-width: calc(5 * (var(--tam-cosa) + 6px) + 4 * 12px);
  margin-inline: auto;
  line-height: 1;
}
.contar img {
  display: block;
  width: var(--tam-cosa);
  height: var(--tam-cosa);
  user-select: none;
  -webkit-user-drag: none;
}

.serie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.serie span {
  min-width: 2.2em;
  padding: 8px 10px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.serie .serie-falta { border: 2px dashed var(--primario); background: var(--seleccion); color: var(--primario-osc); }

.numero-grande {
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 800;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.numero-grande b {
  color: var(--primario);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.figura { display: block; width: clamp(110px, 32vw, 150px); height: auto; }
.figura-ancha { width: clamp(180px, 56vw, 260px); }
/* trazar con el dedo: el caminito gris, lo que se va pintando y el punto
   verde donde se empieza (js/nucleo/trazo.js) */
.trazo { display: flex; justify-content: center; }
.trazo-lienzo {
  display: block;
  width: clamp(190px, 58vw, 260px);
  height: auto;
  touch-action: none;             /* arrastrar el dedo traza, no mueve la pantalla */
  -webkit-user-select: none;
  user-select: none;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.trazo-lienzo:focus-visible { outline: 3px solid var(--primario); outline-offset: 3px; }
/* en las lecciones, la forma quieta para mirar: más chica y sin marco */
.trazo-dibujo { width: clamp(120px, 38vw, 170px); border: 0; background: none; }
.trazo-camino { fill: none; stroke: var(--borde); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.trazo-guia { fill: none; stroke: var(--tinta-suave); stroke-width: 1.4; stroke-dasharray: .5 4.5; stroke-linecap: round; }
.trazo-pintado { fill: none; stroke: var(--primario); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.trazada .trazo-pintado { stroke: var(--exito); }
.trazo-inicio circle { fill: var(--exito); stroke: var(--tinta); stroke-width: 2; }
.trazo-inicio text { fill: var(--sobre-primario); font-weight: 800; }
.trazo-bolita { fill: var(--coral); stroke: var(--tarjeta); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .trazo-inicio.llamar circle { animation: trazo-llamar .45s ease 2; transform-box: fill-box; transform-origin: center; }
}
@keyframes trazo-llamar { 50% { transform: scale(1.45); } }
/* la palabra que ayuda a acordarse de la letra, y las cosas del número */
.trazo-de { font-size: 1.25rem; font-weight: 800; color: var(--tinta-suave); }
.trazo-de b { color: var(--primario-osc); }
.trazo-cosas .act-cosa { width: 32px; height: 32px; }

/* cien cuadraditos: decimales y porcentajes */
.cuadricula { width: clamp(150px, 42vw, 190px); }

/* la plata: billetes dibujados, y lo que se compra con su precio */
.billetes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.billete { display: block; width: clamp(84px, 24vw, 112px); height: auto; }
.compras { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.compra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 8px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.compra-dibujo { font-size: var(--dibujo-chico); line-height: 1.1; }
.compra-nombre { font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.compra b { font-size: 1.25rem; font-weight: 800; }

/* leer y entender: el texto va como en un libro, alineado a la izquierda */
.lectura {
  max-width: 34rem;
  margin-inline: auto;
  padding: 14px 16px;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.55;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.lectura-titulo { display: block; margin-bottom: 4px; font-size: 1.1em; font-weight: 800; color: var(--primario-osc); }
.lectura p { margin: 0; }

/* los problemas son un cuento de dos o tres renglones */
.consigna-larga {
  display: block;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  line-height: 1.4;
  text-align: left;
}

/* inglés: las palabras en inglés van en la misma letra que el resto */
.palabra-en { display: inline-block; }
.frase-en { display: block; margin-top: 6px; font-size: 1.35rem; font-weight: 800; }
.frase-en .hueco { color: var(--primario); letter-spacing: .05em; }

/* el cuadrado de «¿de qué color es?»: el color se muestra, no se escribe */
.visual-color {
  width: clamp(96px, 30vw, 140px);
  height: clamp(96px, 30vw, 140px);
  margin: 0 auto;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}
.visual-bandera {
  display: block;
  width: clamp(120px, 38vw, 190px);
  margin: 0 auto;
  border: 2px solid var(--borde);
  border-radius: 10px;
}

/* ============================================================
   La pizarra

   Abajo de las respuestas, para hacer la cuenta a mano. La hoja va
   cuadriculada como una de carpeta; la cuadrícula es el fondo del
   elemento, así que la goma borra la tinta y la hoja queda.
   ============================================================ */
.pizarra {
  margin-top: 6px;
  padding: 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
.pizarra-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.pizarra-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--tinta-suave);
}
.pizarra-titulo .ico { width: 20px; height: 20px; }
.pizarra-herramientas { display: flex; flex-wrap: wrap; gap: 6px; }
.pizarra-boton,
.pizarra-color {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
.pizarra-boton .ico { width: 22px; height: 22px; }
.pizarra-color i { width: 22px; height: 22px; border-radius: 50%; }
.pizarra-boton:active:not(:disabled),
.pizarra-color:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sombra-clay); }
.pizarra-boton[aria-pressed="true"],
.pizarra-color[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 3px 0 var(--primario);
}
.pizarra-boton:disabled { opacity: .4; cursor: default; box-shadow: none; }
.pizarra-lienzo {
  display: block;
  width: 100%;
  height: clamp(220px, 40vh, 420px);
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background-color: #ffffff;
  background-image:
    linear-gradient(#E6ECF5 1px, transparent 1px),
    linear-gradient(90deg, #E6ECF5 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  /* sin esto, pasar el dedo para dibujar hace scroll de la página */
  touch-action: none;
  cursor: crosshair;
}

/* durante la partida el pie se esconde: así el mapa entra sin scroll */
body.jugando .pie { display: none; }

/* ============================================================
   El juego, vivo: la mascota que pregunta, la voz, la racha

   De 4 a 7 la pregunta la dice la mascota desde un globo, y la voz la
   lee (ver js/nucleo/lector.js); de 8 a 12 va sola, con el parlantito
   al lado para escucharla. La mascota salta con cada acierto y duda con
   cada error: el motor le pone a la pantalla la clase reaccion-bien o
   reaccion-mal, y lo demás lo hace esto.
   ============================================================ */
.pregunta-cabeza {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
/* con dos clases: la regla general de .mascota (display: block) le
   ganaría a una sola */
.pregunta-cabeza .pregunta-mascota { display: none; }
.pregunta-globo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.btn-escuchar {
  flex: none;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--primario-osc);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.btn-escuchar .ico { width: 22px; height: 22px; }
.btn-escuchar:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sombra-clay); }
@media (hover: hover) { .btn-escuchar:hover { border-color: var(--pista); } }
.btn-escuchar-texto {
  width: auto;
  display: inline-flex;
  gap: 6px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
}

.registro-chico .pregunta-cabeza {
  justify-content: flex-start;
  max-width: 560px;
  margin: 0 auto;
}
.registro-chico .pregunta-cabeza .pregunta-mascota {
  display: block;
  flex: none;
  height: clamp(84px, 24vw, 104px);
  transform-origin: 50% 100%;
}
.registro-chico .pregunta-globo {
  position: relative;
  flex: 1;
  justify-content: space-between;
  padding: 12px 12px 12px 18px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: left;
}
/* la punta del globo, mirando a la mascota */
.registro-chico .pregunta-globo::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  transform: rotate(45deg);
  border-left: 2px solid var(--borde);
  border-bottom: 2px solid var(--borde);
  border-bottom-left-radius: 4px;
  background: var(--tarjeta);
}

@keyframes mascota-salta {
  0%   { transform: none; }
  35%  { transform: translateY(-14px) rotate(-4deg); }
  65%  { transform: translateY(0) scale(1.03, .97); }
  100% { transform: none; }
}
@keyframes mascota-duda {
  0%, 100% { transform: none; }
  30%      { transform: rotate(-7deg); }
  65%      { transform: rotate(5deg); }
}
.reaccion-bien .pregunta-mascota { animation: mascota-salta .6s var(--suave); }
.reaccion-mal .pregunta-mascota { animation: mascota-duda .55s ease-in-out; }

/* Cada pregunta entra deslizándose, y sus respuestas detrás. */
@media (prefers-reduced-motion: no-preference) {
  .pregunta.entra { animation: pregunta-entra .34s var(--suave) both; }
  #zona-opciones.entra > * { animation: opcion-entra .36s var(--suave) both; }
  #zona-opciones.entra > :nth-child(2) { animation-delay: .04s; }
  #zona-opciones.entra > :nth-child(3) { animation-delay: .08s; }
  #zona-opciones.entra > :nth-child(n+4) { animation-delay: .12s; }
}
@keyframes pregunta-entra {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes opcion-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* La respuesta que la voz está diciendo, para el que todavía no lee. */
.btn-opcion.leyendo {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}

/* ---- La racha ----
   Con dos seguidas aparece la llamita con el número; con tres, la barra
   de avance se prende del color del fuego. Se corta con un error. */
/* La llamita va encima del final de la barra, en la misma celda: si
   ocupara un lugar propio, en el celular la barra quedaba en un punto. */
.progreso-envase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}
.progreso-barra { grid-column: 1; grid-row: 1; }
.progreso-texto { grid-column: 2; grid-row: 1; }
/* de 4 a 7 no hace falta el «3 / 8»: la barra ya dice cuánto falta */
.registro-chico .progreso-texto { display: none; }
.racha-juego {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  margin-right: -8px;
  border: 2px solid var(--tarjeta);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 10px 0 5px;
  border-radius: 999px;
  background: var(--fuego-suave);
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.racha-juego .ico { width: 22px; height: 22px; color: var(--fuego); }
.racha-juego .ico-blando { fill: var(--fuego-claro); opacity: 1; }
.racha-juego.sube { animation: racha-sube .45s var(--rebote); }
@keyframes racha-sube {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.15); }
  100% { transform: none; }
}
.progreso-barra i { transition: transform .5s var(--suave), background-color .3s; }

/* y al final del nivel, la mejor racha de la partida */
.nivel-fin-racha {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: -4px auto 14px;
  padding: 5px 16px 5px 9px;
  border-radius: 999px;
  background: var(--fuego-suave);
  color: var(--tinta);
  font-weight: 800;
}
.nivel-fin-racha .ico { width: 24px; height: 24px; color: var(--fuego); }
.nivel-fin-racha .ico-blando { fill: var(--fuego-claro); opacity: 1; }
.nivel-fin-racha b { font-variant-numeric: tabular-nums; }
.hud.en-racha .progreso-barra i { background: var(--fuego); }

/* ============================================================
   Contar tocando

   Cada cosa es un botón: al tocarla se marca con su número. Cuando están
   todas contadas, los números se ponen verdes.
   ============================================================ */
.contar-cosa {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 0;
  border-radius: var(--radio-s);
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--suave);
}
.contar-cosa:active { transform: scale(.9); }
.contar-cosa.contada img { opacity: .6; }
.contar-cosa.contada::after {
  content: attr(data-n);
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--tarjeta);
  border-radius: 999px;
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: sello-entra .25s var(--rebote) both;
}
.contar.todas .contar-cosa::after { background: var(--exito-osc); color: #ffffff; }

/* ============================================================
   El teclado de números

   De 8 a 12, las cuentas se escriben una sí y una no. Números grandes
   como los de un teléfono, borrar a la izquierda y «listo» a la derecha.
   ============================================================ */
.teclado {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teclado-pantalla {
  height: 74px;
  display: grid;
  place-items: center;
  border: 2px solid var(--pista);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: var(--letra-cartel);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background-color .15s;
}
.teclado-pantalla.vacia { color: var(--pista); }
.teclado-pantalla.correcta { border-color: var(--exito); background: var(--exito-suave); color: #14532d; }
.teclado-pantalla.incorrecta { border-color: var(--error); background: var(--error-suave); color: #7f1d1d; animation: temblar .4s ease-in-out; }
.teclado-pantalla.elegida { border-color: var(--primario); background: var(--seleccion); }
.teclado-teclas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
}
.tecla {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: var(--letra-pieza);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .1s var(--suave), box-shadow .1s var(--suave);
  touch-action: manipulation;
}
.tecla .ico { width: 26px; height: 26px; stroke-width: 2.6; }
.tecla:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.tecla:disabled { opacity: .5; cursor: default; }
.tecla-borrar { color: var(--tinta-suave); }
.tecla-listo {
  border-color: var(--primario);
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}
.tecla-listo:active:not(:disabled) { box-shadow: 0 0 0 var(--primario-osc); }
.tecla-listo:disabled { border-color: var(--borde); background: var(--borde); color: var(--tinta-suave); box-shadow: 0 var(--paso) 0 var(--sombra-clay); opacity: 1; }

/* ============================================================
   Las fichas: armar la palabra

   Arriba los huecos punteados; abajo las fichas con su escalón. La ficha
   que se usa deja su lugar vacío (no se corre el resto), así el chico
   ve de dónde salió cada una.
   ============================================================ */
.fichas {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.fichas-huecos,
.fichas-mazo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 8px;
}
.hueco,
.ficha {
  min-width: 66px;
  height: 62px;
  padding: 0 14px;
  border-radius: var(--radio-s);
  font: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tinta);
  touch-action: manipulation;
}
.fichas-letras .hueco,
.fichas-letras .ficha { min-width: 56px; padding: 0 10px; }
.hueco {
  border: 2px dashed var(--pista);
  background: var(--papel);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.hueco.lleno { border-style: solid; border-color: var(--primario); background: var(--seleccion); }
.hueco.bien, .hueco.fijo { border-style: solid; border-color: var(--exito); background: var(--exito-suave); color: #14532d; }
.hueco.mal { border-style: solid; border-color: var(--error); background: var(--error-suave); color: #7f1d1d; }
.hueco.elegida { border-style: solid; border-color: var(--primario); background: var(--seleccion); }
.hueco:disabled { cursor: default; }
.ficha {
  border: 2px solid var(--borde);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  cursor: pointer;
  transition: transform .1s var(--suave), box-shadow .1s var(--suave);
}
.ficha:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.ficha.usada { visibility: hidden; }
.fichas.sacudida .fichas-huecos { animation: temblar .4s ease-in-out; }
.fichas.armada .fichas-huecos { animation: salto-acierto .5s var(--suave); }

/* Lo que sólo se escucha: la palabra de «Armá la palabra» la dice la
   voz, pero escrita sería copiarla. */
.solo-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Las palmas de Sílabas
   ============================================================ */
.palmas { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.palmas-boton {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--girasol);
  color: #5A3B00;
  font: inherit;
  font-size: var(--letra-pieza);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--oro);
  transition: transform .08s var(--suave), box-shadow .08s var(--suave);
  touch-action: manipulation;
}
.palmas-boton:active { transform: translateY(5px) scale(.96); box-shadow: 0 0 0 var(--oro); }
.palmas-cuenta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 20px; }
.palma {
  width: 18px;
  height: 18px;
  border: 2px solid var(--oro);
  border-radius: 50%;
  background: var(--girasol);
  animation: sello-entra .25s var(--rebote) both;
}
.palmas-otra {
  min-height: 40px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* ============================================================
   Las respuestas con dibujos («¿Dónde está yellow?»)
   ============================================================ */
.btn-opcion.dibujo {
  justify-content: center;
  min-height: clamp(96px, 26vw, 124px);
  padding: 10px;
}
.opcion-dibujo { display: grid; place-items: center; }
.opcion-dibujo .visual-color { width: clamp(58px, 16vw, 76px); height: clamp(58px, 16vw, 76px); border-radius: 16px; }
.opcion-dibujo .visual-emoji { font-size: var(--dibujo-chico); }
.opcion-dibujo .numero-grande { font-size: var(--letra-cartel); letter-spacing: 0; }

/* ============================================================
   «Cosas nuevas»: lo que trae un nivel, antes de preguntarlo
   ============================================================ */
#pantalla-juego.presentando > :not(.presenta) { display: none !important; }
.presenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 2px;
}
/* la cabeza va al lado de la flecha de volver, como la barra del juego */
.presenta-cabeza {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-left: 60px;
}
.presenta-mascota { flex: none; height: 66px; }
.presenta-titulo { margin: 0; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 800; line-height: 1.1; }
.presenta-tarjeta {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 20px 20px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .presenta-tarjeta.entra { animation: paso-entra .38s var(--suave) both; }
}
.presenta-visual { display: grid; place-items: center; min-height: 112px; cursor: pointer; }
.presenta-visual .visual-emoji { font-size: var(--dibujo-grande); }
.presenta-visual .visual-color { width: 124px; height: 124px; }
.presenta-visual .trozos span { font-size: var(--letra-pieza); }
.presenta-nombre { margin: 8px 0 0; font-size: var(--letra-cartel); font-weight: 800; line-height: 1.1; text-wrap: balance; }
.presenta-dato { margin: 0 0 8px; color: var(--tinta-suave); font-size: 1.15rem; line-height: 1.35; text-wrap: balance; }
/* la letra que importa, en coral (es letra grande: alcanza con 3:1) */
.resalte { color: var(--coral); }
.presenta-puntos { display: flex; justify-content: center; gap: 7px; min-height: 10px; }
.presenta-puntos span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--borde);
  transition: transform .3s var(--suave), background-color .3s;
}
.presenta-puntos .hecho { background: var(--primario); }
.presenta-puntos .ahora { background: var(--primario); transform: scaleX(2.2); margin: 0 6px; }
.presenta-botones { display: flex; gap: 12px; width: 100%; max-width: 440px; }
.presenta-botones .btn-gigante { flex: 1; width: auto; }
.presenta-botones .btn-secundario { flex: none; }

/* ============================================================
   Los resultados

   Sin caja alrededor: la mascota, las estrellas, el título y dos
   recuadros con los números, como la pantalla de lección terminada de
   Duolingo. Las monedas y la meta van abajo y chicas.
   ============================================================ */
.tarjeta-fin {
  padding: clamp(4px, 2vw, 16px) 0 0;
  text-align: center;
}
.mascota-fin {
  height: clamp(130px, 32vw, 170px);
  margin: 0 auto 4px;
  animation: mascota-entra .55s var(--rebote) both;
}
@keyframes mascota-entra {
  from { opacity: 0; transform: translateY(24px) scale(.7); }
  to   { opacity: 1; transform: none; }
}
.titulo-fin {
  margin: .25em 0 .15em;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

.estrellas-fin { display: flex; justify-content: center; gap: 6px; line-height: 1; }
.estrellas-fin span { display: inline-flex; }
.estrellas-fin .ico { width: 50px; height: 50px; color: var(--oro); stroke-width: 1.8; }
.estrellas-fin .ico-blando { fill: var(--girasol); opacity: 1; }
.estrellas-fin .apagada .ico { color: var(--pista); }
.estrellas-fin .apagada .ico-blando { fill: var(--borde); }

.stats-fin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 22px 0;
}
/* Un recuadro por número: el nombre arriba, sobre una banda de color, y
   la cifra grande abajo. Afuera de los resultados (el perfil, el panel
   de los grandes) van neutros: son datos para mirar, no un festejo. */
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  overflow: hidden;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  text-align: center;
}
.stat b {
  display: block;
  padding: 10px 8px 12px;
  color: var(--tinta);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  padding: 5px 8px;
  background: var(--borde);
  color: var(--tinta);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Los colores son fijos y no del tema: la banda lleva letra chica, y
   cada par está medido (el peor da 4,7:1). */
.tarjeta-fin .stat { border-color: var(--stat-banda); }
.tarjeta-fin .stat span { background: var(--stat-banda); color: var(--stat-sobre, #ffffff); }
.tarjeta-fin .stat b { color: var(--stat-cifra, var(--stat-banda)); }
.tarjeta-fin .stat:nth-child(4n+1) { --stat-banda: var(--girasol); --stat-sobre: #5A3B00; --stat-cifra: #8A6000; }
.tarjeta-fin .stat:nth-child(4n+2) { --stat-banda: var(--exito-osc); }
.tarjeta-fin .stat:nth-child(4n+3) { --stat-banda: #1673C4; }
.tarjeta-fin .stat:nth-child(4n+4) { --stat-banda: #6A48D6; }
#pantalla-fin .stat-puntaje { display: none; }
/* una fila con las que se ven (dos, o tres con la racha): así ninguna queda sola */
#pantalla-fin .stats-fin { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* la nota del examen trae tres: en dos columnas el tercero quedaba solo */
@media (min-width: 360px) {
  #nota-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  #nota-stats .stat span { padding-inline: 4px; }
}

/* Lo que hay que repasar: una fila por cosa. */
.repaso { margin: 8px 0 24px; text-align: left; }
.lista-repaso {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.item-repaso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.item-repaso img {
  flex: none;
  width: 46px;
  height: 32px;
  object-fit: cover;
  border: 1px solid var(--borde);
  border-radius: 5px;
}
.item-repaso img.ir-dibujo { width: 42px; height: 42px; object-fit: contain; border: none; border-radius: 0; }
.item-repaso .ir-nombre { font-weight: 800; line-height: 1.2; }
.ir-dato { font-size: .88rem; line-height: 1.3; color: var(--tinta-suave); }
.item-simbolo {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  font-size: 1.5rem;
}

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

/* Las monedas ganadas: chicas y al final. */
.premio-monedas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 16px 0 18px;
}
.premio-cifra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 18px;
  border-radius: 999px;
  background: #FFF1C7;
  color: #6B4A00;
  font-size: 1.3rem;
  font-weight: 800;
  animation: aparecer .35s var(--suave) both;
}
.premio-detalle { font-size: .88rem; color: var(--tinta-suave); }
.chip-monedas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #FFF1C7;
  color: #6B4A00;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.chip-monedas .ico, .premio-cifra .ico, .etiqueta-precio .ico { width: 1.1em; height: 1.1em; color: var(--oro); }
.chip-monedas .ico-blando, .premio-cifra .ico-blando, .etiqueta-precio .ico-blando { fill: var(--girasol); opacity: 1; }

/* La nota de un examen, adentro de un círculo. */
.nota-grande {
  width: clamp(104px, 28vw, 136px);
  height: clamp(104px, 28vw, 136px);
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border: 3px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  font-size: clamp(3.4rem, 12vw, 5rem);
  font-weight: 800;
  line-height: 1;
  animation: aparecer .45s var(--suave) both;
}
.nota-grande.aprobado    { border-color: var(--exito);  background: var(--exito-suave); color: var(--exito-osc); }
.nota-grande.desaprobado { border-color: var(--error);  background: var(--error-suave); color: var(--error-osc); }

/* ============================================================
   Perfil
   ============================================================ */
.cabecera-perfil {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  text-align: left;
}
/* La carita grande es un botón: se toca para poner o cambiar la foto. */
.avatar-grande {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.avatar-grande:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.avatar-emoji { grid-area: 1 / 1; font-weight: 800; font-size: 2.6rem; }
.avatar-foto { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* la camarita del rincón: dice que la foto se cambia acá */
.portada-camara {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--tarjeta);
  border-radius: 50%;
  background: var(--primario);
  color: var(--sobre-primario);
}
.portada-camara .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.titulo-perfil { margin: 0; font-size: clamp(1.6rem, 4.4vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.perfil-sub { margin: 2px 0 0; text-align: left; }
@media (max-width: 560px) {
  #perfil-stats { grid-template-columns: repeat(2, 1fr); }
}

.lista-materias { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.fila-materia, .fila-partida {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.fila-icono { flex: none; display: inline-flex; font-size: 1.6rem; line-height: 1; }
.fila-icono .ico { width: 24px; height: 24px; }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-nombre { font-weight: 800; overflow-wrap: anywhere; }
.fila-dato { flex: none; font-weight: 800; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.barra-progreso {
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.barra-progreso i { display: block; height: 100%; border-radius: 999px; }

.grilla-perfiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px 12px;
  margin-bottom: 24px;
}
.perfil-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.perfil-chip:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.perfil-chip[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}
.perfil-chip-avatar { display: grid; place-items: center; font-size: 1.6rem; line-height: 1; }
.perfil-chip-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.perfil-chip-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.perfil-chip-nombre { min-width: 0; font-weight: 800; overflow-wrap: break-word; }
.perfil-chip-edad { font-size: .82rem; color: var(--tinta-suave); }

.acciones-perfil { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin-top: 8px; }
.vacio { margin: 0; color: var(--tinta-suave); text-align: center; }

/* La carita de cada chico: su foto, o su inicial gorda en el tono
   oscuro de su propio círculo. El tamaño lo pone cada lugar. */
.carita { display: grid; place-items: center; overflow: hidden; }
.carita-letra { font-size: .78em; font-weight: 800; line-height: 1; }
.carita-foto { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.jugador-cara .carita-letra { font-size: 1.7rem; }
/* la tilde del que juega se asoma por fuera del círculo */
.jugador-cara.carita { overflow: visible; }
.perfil-chip-avatar.carita,
.chico-panel-avatar.carita { width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 1.1rem; }
.perfil-chip-avatar .carita-letra,
.chico-panel-avatar .carita-letra { font-size: 1.05rem; }

/* ============================================================
   Bienvenida

   La primera pantalla de la app, y la que vuelve cada vez que se suma
   un hermano. Blanca como el resto, con la mascota arriba y una pregunta
   por vez. Los botones de elegir llevan un dibujo grande: un chico de
   cuatro los reconoce sin leer.
   ============================================================ */
body.en-bienvenida .pie { display: none; }

.pantalla-bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  min-height: calc(100svh - 120px);
}
.bien-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--tinta);
  font-size: 1.1rem;
  font-weight: 800;
}
.bien-marca-globo { flex: none; display: grid; width: 32px; height: 32px; }
.bien-marca-globo img { display: block; width: 32px; height: 32px; border-radius: 9px; }

.tarjeta-bienvenida {
  width: 100%;
  max-width: 520px;
  text-align: center;
}
/* en qué paso va: puntitos, y el de ahora más largo */
.bien-pasos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.bien-pasos span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--borde);
  transition: transform .3s var(--suave), background-color .3s;
}
.bien-pasos .hecho { background: var(--primario); }
.bien-pasos .ahora { background: var(--primario); transform: scaleX(2.2); margin: 0 6px; }

/* cada paso entra corrido desde la derecha, como una página que pasa */
.paso-bienvenida { animation: paso-entra .38s var(--suave) both; }
@keyframes paso-entra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.bien-globo {
  height: clamp(130px, 32vw, 176px);
  margin: 0 auto 4px;
}

.etiqueta-campo {
  display: block;
  margin-bottom: 6px;
  color: var(--tinta);
  font-weight: 800;
  text-align: left;
}
.campo-texto {
  width: 100%;
  min-height: 56px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 2px solid var(--pista);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: 1.2rem;
  transition: border-color .15s, box-shadow .15s;
}
.campo-texto:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--seleccion);
}
.campo-codigo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.error-campo { margin: -8px 0 12px; color: var(--error-osc); font-weight: 800; text-align: left; }

/* ¿Quién está usando la app? El grande arriba y a lo ancho; el nene y la
   nena abajo, de a dos, con la carita grande. */
.grilla-quien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin: 6px 0 4px;
}
.boton-quien {
  --q-mancha: var(--seleccion);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 14px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .boton-quien:hover { border-color: var(--q-filo, var(--pista)); } }
.boton-quien:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.boton-quien-cara {
  width: 84px;
  height: 84px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--q-mancha);
}
.boton-quien-cara .dibujo { width: 88%; height: 88%; }
.boton-quien-texto { display: flex; flex-direction: column; gap: 2px; }
.boton-quien-texto b { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.boton-quien-texto small { font-size: .9rem; line-height: 1.25; color: var(--tinta-suave); }

.boton-quien-adulto {
  --q-mancha: #EAE4FD; --q-filo: var(--lila);
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
  text-align: left;
}
.boton-quien-adulto .boton-quien-cara { width: 68px; height: 68px; }
.boton-quien-nene { --q-mancha: #D9EEFC; --q-filo: var(--cielo); }
.boton-quien-nena { --q-mancha: #FFE1EA; --q-filo: #E0567F; }
.boton-quien-nada { grid-column: 1 / -1; min-height: 56px; }
.boton-quien-nada .boton-quien-texto b { font-size: 1rem; }

/* las edades: números grandes de apretar */
.grilla-edades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 14px 10px;
}
.boton-edad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
.boton-edad b { font-size: 1.8rem; line-height: 1; }
.boton-edad span { font-size: .82rem; color: var(--tinta-suave); }
@media (hover: hover) { .boton-edad:hover { border-color: var(--pista); } }
.boton-edad:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.boton-edad[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}

/* La cuenta (el mail y el código), cuando está prendida. */
.cuenta-otros { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; }
.cuenta-otros .btn-texto { margin: 0; }
.cuenta-otros .btn-texto:disabled { opacity: .55; cursor: default; }
.cuenta-legal { margin: 14px 0 0; font-size: .88rem; line-height: 1.4; color: var(--tinta-suave); text-align: center; }
.cuenta-legal a { font-weight: 800; }
#caja-recuperar .campo-codigo { width: 100%; max-width: 260px; }

/* ============================================================
   Lecciones
   ============================================================ */
.leccion-cabecera { text-align: center; margin-bottom: 18px; }
.titulo-leccion { margin: 0 0 12px; font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 800; line-height: 1.1; text-wrap: balance; }


.puntito {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--borde);
  transition: transform .2s var(--suave), background-color .2s;
}
.puntito.hecho  { background: var(--exito); }
.puntito.actual { background: var(--primario); transform: scaleX(2); margin: 0 5px; }
.leccion-avance { min-height: 1.3em; margin: 0; color: var(--tinta-suave); font-size: .9rem; }

/* Cada paso de la lección va sin caja, como la pantalla de juego: la
   mascota cuenta arriba y abajo se mira o se toca. Los finales (el
   ejercicio, el resultado, el «¿por qué?») sí van en su tarjeta. */
.paso-tarjeta { animation: entrar .28s var(--suave) both; }
.paso-final {
  padding: clamp(18px, 4vw, 30px);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
.paso-titulo { margin: 0 0 .5em; font-size: clamp(1.25rem, 3.4vw, 1.65rem); font-weight: 800; line-height: 1.2; }
.paso-texto { max-width: 62ch; margin: 0 0 1em; font-size: 1.1rem; line-height: 1.55; }
.paso-texto b { color: var(--primario-osc); }
.paso-visual { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin: 18px 0 6px; }
.dibujo-svg { width: clamp(150px, 40vw, 200px); height: auto; }

.paso-truco {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radio-s);
  background: #FFF1C7;
  color: #5A3B00;
  font-weight: 700;
  text-align: left;
  text-wrap: pretty;
}
.paso-truco .truco-icono { width: 24px; height: 24px; margin-top: 1px; color: #9A6B00; }

.paso-video { margin: 18px 0 6px; }
.paso-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
}
.paso-nota { margin: 6px 0 0; font-size: .86rem; color: var(--tinta-suave); text-align: center; }

.paso-final { text-align: center; }
/* la mascota que festeja o que pregunta al final de una lección */
.final-mascota { height: clamp(110px, 28vw, 140px); margin: 0 auto 8px; }
.paso-final .btn-gigante { margin-top: 10px; }

/* Escuchar la lección. Mientras habla dice «Callar» y va pleno. */
.btn-voz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px 0 14px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--primario-osc);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.btn-voz .ico { width: 20px; height: 20px; }
.btn-voz:active { transform: translateY(3px); box-shadow: none; }
.btn-voz[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: 0 3px 0 var(--primario-osc);
}

/* el ejercicio del final de la lección y su resultado */
.ejercicio-regla { margin: 4px 0 6px; font-size: .92rem; font-weight: 700; color: var(--tinta-suave); }
.resultado-cifra { margin: 2px 0 8px; font-size: 1.2rem; font-weight: 800; color: var(--tinta-suave); }
.resultado-cifra b { font-size: 2.6rem; color: var(--tinta); }
.paso-resultado.aprobado .resultado-cifra b { color: var(--exito-osc); }
.resultado-monedas {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #FFF1C7;
  color: #6B4A00;
  font-weight: 800;
}
.resultado-botones { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.leccion-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* La barra de avance de la lección, como la de los juegos. */
.leccion-puntitos { display: block; max-width: 420px; margin: 0 auto 6px; }
.leccion-barra {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.leccion-barra i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--exito);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--suave);
}
.leccion-barra i::after {
  content: '';
  position: absolute;
  top: 22%;
  left: 7px;
  right: 7px;
  height: 22%;
  min-height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
}

/* La práctica del final de un paso: una pregunta, sin cartelito arriba. */
.paso-practica {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--borde);
}
.practica-pregunta { margin-bottom: 4px; font-weight: 700; }

/* ============================================================
   Las actividades de las lecciones: aprender tocando
   (js/aprender/actividades.js)
   ============================================================ */
.actividad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 12px 0 18px;
}
/* lo que dice lo que pasó, abajo de cada actividad */
.act-cartel {
  min-height: 1.5em;
  margin: 0;
  color: var(--tinta);
  font-size: 1.0625rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.act-cartel b { color: var(--primario-osc); }
@media (prefers-reduced-motion: no-preference) {
  .act-cartel.nuevo { animation: aparecer .3s var(--suave) both; }
}
.act-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.act-boton { min-width: 150px; }

/* ---- escuchar: tarjetas que se tocan para oírlas ---- */
/* en flex y no en grilla: con cinco vocales, la última quedaba sola a la
   izquierda; así la que sobra va al medio */
.act-escuchar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 10px;
}
.act-tarjeta {
  position: relative;
  flex: 0 1 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 112px;
  padding: 12px 6px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.act-tarjeta:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-tarjeta.oida { border-color: var(--primario); }
.act-tarjeta.salta .act-tarjeta-visual { animation: mascota-salta .5s var(--suave); }
.act-tarjeta-visual { display: grid; place-items: center; line-height: 1; }
.act-tarjeta-visual .visual-emoji { font-size: var(--dibujo-chico); }
/* una pareja (flor y tambor) entra en una tarjeta: dos por fila */
.act-tarjeta-visual .fila-emojis { flex-wrap: nowrap; gap: 6px; }
.act-tarjeta-visual .fila-emojis .visual-emoji { font-size: calc(var(--dibujo-chico) * .75); }
.act-tarjeta-visual .visual-color { width: 56px; height: 56px; border-radius: var(--radio-s); }
.act-tarjeta-visual .figura { width: 64px; }
.act-tarjeta-nombre { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.act-tarjeta-nombre b { color: var(--primario-osc); }
.act-parlante {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  color: var(--primario-osc);
  opacity: .8;
}
.act-parlante .ico { width: 18px; height: 18px; }

/* ---- contar, sumar y restar ---- */
/* un poco más chicas que en el juego: la tarjeta es más angosta que la
   pantalla, y así entran cinco por fila, como en el ábaco */
.act-contar { margin: 0 auto; --tam-cosa: clamp(38px, 10.5vw, 52px); }
.act-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.act-cosa {
  display: block;
  width: clamp(40px, 11vw, 52px);
  height: clamp(40px, 11vw, 52px);
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .45s var(--suave), opacity .35s;
}
/* Las dos filas de una suma (o la de una resta) van en un solo renglón,
   sean cuantas sean las cosas: el tamaño sale del ancho de la tarjeta
   y de cuántas hay (--n, lo pone actividades.js). */
.actividad-sumar, .actividad-restar { container-type: inline-size; }
.act-suma .act-cosa,
.act-resta .act-cosa {
  width: var(--tam);
  height: var(--tam);
}
.act-suma .act-cosa { --tam: min(46px, calc((100cqi - 92px - var(--n, 5) * 6px) / var(--n, 5))); }
.act-resta .act-cosa { --tam: min(46px, calc((100cqi - 24px - var(--n, 5) * 6px) / var(--n, 5))); }
.act-resta { flex-wrap: nowrap; }
.act-suma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.act-suma .act-fila { flex-wrap: nowrap; }
.act-grupo {
  padding: 8px;
  border: 2px dashed var(--pista);
  border-radius: var(--radio-s);
  transition: transform .45s var(--suave), border-color .3s;
}
.act-signo { font-size: var(--letra-cartel); font-weight: 800; line-height: 1; color: var(--tinta-suave); transition: opacity .25s; }
/* Juntas: los dos montoncitos se corren hasta tocarse (--junta, medido al
   tocar el botón), se va el signo y el borde se hace uno solo, verde. */
.act-suma.juntos .act-signo { opacity: 0; }
.act-suma.juntos .act-grupo { border-color: var(--exito); border-style: solid; }
.act-suma.juntos .act-grupo:first-child {
  transform: translateX(var(--junta, 0px));
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.act-suma.juntos .act-grupo:last-child {
  transform: translateX(calc(var(--junta, 0px) * -1));
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.act-resta .act-cosa.se-va { opacity: 0; transform: translateY(-40px) rotate(20deg) scale(.6); }

/* ---- el reloj ---- */
.act-reloj { width: clamp(170px, 50vw, 220px); }
.act-reloj svg { display: block; width: 100%; height: auto; }
.act-reloj-digital {
  margin: -6px 0 0;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--seleccion);
  color: var(--tinta);
  font-size: var(--letra-pieza);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- multiplicar ---- */
.act-puntos { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.act-puntos-fila { display: flex; gap: 9px; }
.act-puntos .punto-bola { animation: sello-entra .25s var(--rebote) both; }
/* «Filas − 3 +» y «Columnas − 4 +» */
.act-controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.act-control { display: flex; align-items: center; gap: 8px; }
/* el nombre con el mismo ancho: uno arriba del otro, los botones quedan alineados */
.act-control-nombre { min-width: 5.4em; margin-right: 2px; font-weight: 800; text-align: right; }
.act-control-boton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--primario-osc);
  font: inherit;
  font-size: var(--letra-pieza);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.act-control-boton:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-control-boton:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.act-control-valor {
  min-width: 1.3em;
  font-size: var(--letra-pieza);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- sílabas ---- */
.act-silabas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.act-palabra {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.act-palabra:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-silaba {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--tinta);
  font-size: var(--letra-pieza);
  font-weight: 800;
  transition: background-color .15s, color .15s, transform .15s var(--suave);
}
.act-palabra.abierta .act-silaba + .act-silaba { border-left: 2px dotted var(--pista); padding-left: 8px; }
.act-silaba.suena { background: var(--girasol); color: #5A3B00; transform: translateY(-3px); }

/* ---- fracciones: la torta ---- */
.act-torta { width: clamp(170px, 50vw, 230px); height: auto; }
/* los mismos colores que la torta del juego de fracciones (el coral de
   Matemática y el trazo de tinta): en la lección salen las dos juntas */
.act-porcion {
  fill: #ffffff;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .2s;
}
.act-porcion.pintada { fill: var(--coral); }
.act-porcion:focus-visible { outline: none; stroke: var(--primario); stroke-width: 4; }

/* ---- los dibujos de las lecciones para los más chicos ---- */
.fila-emojis { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.act-tarjeta-visual .numero-grande { font-size: var(--letra-cartel); letter-spacing: 0; }
/* dos grupos alineados a la izquierda: se ve cuál es más largo sin contar */
.dos-filas { display: flex; flex-direction: column; gap: 10px; }
.dos-filas .act-fila {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 8px 10px;
  border: 2px dashed var(--pista);
  border-radius: var(--radio-s);
}
.fila-figuras { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; }
/* dividir es repartir: un plato por amigo */
.repartir { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.repartir .act-fila { flex-wrap: nowrap; }
.repartir .act-cosa { width: 34px; height: 34px; }

/* ============================================================
   La mascota cuenta la lección

   Cada paso arranca con la mascota y lo que dice en un globito, como
   el globo de la pregunta en los juegos. Frases cortas y grandes: la voz
   las lee, y el que ya lee las lee de un vistazo.
   ============================================================ */
.narrador {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 14px;
}
.narrador-mascota {
  flex: none;
  height: clamp(92px, 25vw, 118px);
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .narrador-mascota { animation: saludar 1.1s ease-in-out .2s 1 both; }
}
.narrador-globo {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-bottom: 18px;
  padding: 14px 16px 15px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
/* la punta del globo, mirando a la mascota */
.narrador-globo::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 22px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-left: 2px solid var(--borde);
  border-bottom: 2px solid var(--borde);
  border-bottom-left-radius: 4px;
  background: var(--tarjeta);
}
.narrador-globo .paso-texto { margin: 0; font-size: 1.15rem; line-height: 1.45; text-wrap: pretty; }
.narrador-globo .leccion-respuesta { margin: 0 0 10px; }
.paso-tarjeta .paso-visual { margin: 6px 0 14px; }
.paso-tarjeta .actividad { margin: 6px 0 16px; }

/* Lo que aprendió, antes del ejercicio: cada idea con su tilde. */
.aprendiste {
  display: grid;
  gap: 10px;
  max-width: 460px;
  margin: 10px auto 6px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.aprendiste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.aprendiste li b { color: var(--primario-osc); }
.aprendiste-tilde { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--exito-osc); }
@media (prefers-reduced-motion: no-preference) {
  .aprendiste li { animation: aparecer .35s var(--suave) both; }
  .aprendiste li:nth-child(2) { animation-delay: .12s; }
  .aprendiste li:nth-child(3) { animation-delay: .24s; }
}
.ejercicio-titulo { margin: 22px 0 4px; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }

/* ---- clasificar: los grupos arriba y las cosas abajo ---- */
.act-cajones {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.act-cajon {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 118px;
  padding: 10px 8px 12px;
  border: 2px dashed var(--pista);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
/* con una cosa elegida, los grupos se ofrecen: el segundo toque va ahí */
.act-cajones.esperando .act-cajon { border-style: solid; border-color: var(--primario); background: var(--seleccion); }
.act-cajon.sacude { animation: temblar .4s ease-in-out; }
.act-cajon-cabeza { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.act-cajon-dibujo { font-size: var(--letra-pieza); line-height: 1; }
.act-cajon-nombre { font-size: 1.0625rem; font-weight: 800; line-height: 1.15; text-align: center; }
.act-cajon-adentro { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 30px; }
.act-cajon-cosa {
  font-size: var(--letra-pieza);
  line-height: 1;
  animation: sello-entra .3s var(--rebote) both;
}
.act-pila { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.act-ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 16px 6px 10px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.act-ficha:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-ficha.elegida {
  border-color: var(--primario);
  background: var(--seleccion);
  transform: translateY(-4px);
  box-shadow: 0 calc(var(--paso) + 4px) 0 var(--sombra-clay);
}
.act-ficha.puesta { display: none; }
.act-ficha-dibujo { font-size: var(--letra-pieza); line-height: 1; }
.act-ficha-nombre { font-size: 1.0625rem; line-height: 1.1; }

/* ---- tocar la que es ---- */
.act-consigna { margin: 0; font-weight: 800; text-align: center; }
.act-tocar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; }
.act-trozo {
  min-width: 54px;
  min-height: 50px;
  padding: 6px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  font: inherit;
  font-size: var(--letra-pieza);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.act-trozo:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-trozo.bien {
  border-color: var(--exito);
  background: var(--exito-suave);
  color: #14532d;
  box-shadow: 0 var(--paso) 0 var(--exito-osc);
  animation: salto-acierto .5s var(--suave);
}
.act-trozo.sacude { animation: temblar .4s ease-in-out; }
/* las sílabas, pegadas: se ven como una sola palabra cortada */
.act-tocar-silabas { gap: 0; }
.act-tocar-silabas .act-trozo { border-radius: 0; margin-left: -2px; }
.act-tocar-silabas .act-trozo:first-child { border-radius: var(--radio-s) 0 0 var(--radio-s); margin-left: 0; }
.act-tocar-silabas .act-trozo:last-child { border-radius: 0 var(--radio-s) var(--radio-s) 0; }

/* ---- repartir en platos ---- */
.act-repartir-pila .act-cosa.dada { visibility: hidden; }
.act-platos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.act-plato {
  width: clamp(116px, 36vw, 150px);
  min-height: 74px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 4px;
  border: 2px solid var(--pista);
  border-radius: 50%;
  background: var(--tarjeta);
}
.act-plato .act-cosa { width: 30px; height: 30px; animation: sello-entra .3s var(--rebote) both; }

/* ---- los bloques de diez ---- */
.act-bloques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 12px 14px;
  min-height: 150px;
}
.bloques-monton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  border: 2px dashed var(--pista);
  border-radius: var(--radio-s);
}
.bloques-monton.resalta { border-style: solid; border-color: var(--primario); background: var(--seleccion); }
.bloques-etiqueta { font-size: 1.15rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bloques-dibujo { display: flex; align-items: flex-end; gap: 8px; }
.bloques-barras { display: flex; gap: 3px; }
.bloques-cubos { display: grid; grid-template-columns: repeat(5, 16px); gap: 3px; }
.bloque-barra { display: block; width: 16px; height: 91px; }
.bloque-cubo { display: block; width: 16px; height: 16px; transition: opacity .3s; }
.bloque-barra.nuevo, .bloque-cubo.nuevo { animation: sello-entra .35s var(--rebote) both; }
.bloque-cubo.se-va { opacity: .2; }

/* ---- los estados del agua ---- */
.act-estados { display: flex; align-items: center; justify-content: center; gap: 18px; }
.estados-dibujo { width: clamp(130px, 38vw, 170px); }
.estados-dibujo svg { display: block; width: 100%; height: auto; animation: sello-entra .35s var(--rebote) both; }
.estados-termo { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 78px; }
.termo-tubo {
  position: relative;
  width: 18px;
  height: 96px;
  overflow: hidden;
  border: 3px solid var(--tinta);
  border-radius: 999px;
  background: var(--tarjeta);
}
.termo-tubo i { position: absolute; inset: 0; background: var(--coral); transform-origin: 50% 100%; transition: transform .5s var(--suave); }
.termo-grados { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.termo-estado { color: var(--tinta-suave); font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

/* ---- el mapa quieto ---- */
.act-mapa {
  position: relative;
  width: 100%;
  padding: 6px;
  border-radius: var(--radio-s);
  background: var(--seleccion);          /* el agua */
}
.act-mapa svg { display: block; width: 100%; height: auto; max-height: 380px; margin: 0 auto; }
.act-mapa .pais { fill: var(--tarjeta); stroke: #9BA5BB; stroke-width: .8; transition: fill .2s, opacity .2s; }
.act-mapa-continentes .pais[data-cont] { cursor: pointer; stroke: var(--tarjeta); }
.act-mapa-continentes .pais[data-cont="america"] { fill: var(--cielo); }
.act-mapa-continentes .pais[data-cont="europa"]  { fill: var(--lila); }
.act-mapa-continentes .pais[data-cont="africa"]  { fill: var(--girasol); }
.act-mapa-continentes .pais[data-cont="asia"]    { fill: var(--coral); }
.act-mapa-continentes .pais[data-cont="oceania"] { fill: var(--verde); }
/* con uno elegido, los demás se apagan */
.act-mapa-continentes[data-elegido] .pais { opacity: .25; }
.act-mapa-continentes[data-elegido="america"] .pais[data-cont="america"],
.act-mapa-continentes[data-elegido="europa"] .pais[data-cont="europa"],
.act-mapa-continentes[data-elegido="africa"] .pais[data-cont="africa"],
.act-mapa-continentes[data-elegido="asia"] .pais[data-cont="asia"],
.act-mapa-continentes[data-elegido="oceania"] .pais[data-cont="oceania"] { opacity: 1; }
.act-mapa-capitales .pais[data-cont="america"] { cursor: pointer; }
.act-mapa .pais.casa { fill: var(--girasol); }
.act-mapa .pais.marcado { fill: var(--coral); }
.act-mapa-norte {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--tarjeta);
  font-size: .8rem;
  font-weight: 800;
}
.act-mapa-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.act-mapa-boton:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.act-mapa-botones .elegido { border-color: var(--primario); background: var(--seleccion); }
.act-mapa-punto { width: 14px; height: 14px; border: 2px solid var(--tinta); border-radius: 50%; }
.act-mapa-punto[data-cont="america"] { background: var(--cielo); }
.act-mapa-punto[data-cont="europa"]  { background: var(--lila); }
.act-mapa-punto[data-cont="africa"]  { background: var(--girasol); }
.act-mapa-punto[data-cont="asia"]    { background: var(--coral); }
.act-mapa-punto[data-cont="oceania"] { background: var(--verde); }
.fila-figuras .figura { width: clamp(76px, 22vw, 104px); }
.dibujo-planta { width: clamp(230px, 72vw, 300px); }

/* pensar en la lección: la predicción y el «¿por qué?» */
.leccion-opciones { display: grid; gap: 12px; margin: 16px 0 8px; }
.leccion-opcion {
  min-height: 54px;
  padding: 13px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s, background-color .15s;
}
@media (hover: hover) { .leccion-opcion:hover:not(:disabled) { border-color: var(--pista); } }
.leccion-opcion:active:not(:disabled) { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.leccion-opcion:disabled { cursor: default; }
.leccion-opcion.elegida-bien { border-color: var(--exito); background: var(--exito-suave); box-shadow: 0 var(--paso) 0 var(--exito-osc); }
.leccion-opcion.elegida-mal  { border-color: var(--error); background: var(--error-suave); box-shadow: 0 var(--paso) 0 var(--error-osc); }
.leccion-respuesta {
  margin: 12px 0 6px;
  padding: 12px 14px;
  border-radius: var(--radio-s);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.leccion-respuesta.bien { background: var(--exito-suave); color: #14532d; }
.leccion-respuesta.mal  { background: #FFF1C7; color: #5A3B00; }
.reflexion-grande { margin: 10px 0 6px; font-weight: 700; color: var(--tinta-suave); }

/* ---- los dibujos de las lecciones de matemática ---- */
.cuenta-columna {
  display: inline-block;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cuenta-fila { display: flex; justify-content: flex-end; }
.cd { width: 1.1em; border-radius: 6px; text-align: center; }
.cd-marca { background: var(--error-suave); color: var(--error-osc); }
.cd-op { color: var(--tinta-suave); }
.cuenta-llevo { font-size: .5em; color: var(--exito-osc); }
.cd-llevo { width: 2.2em; border-radius: 999px; background: var(--exito-suave); }
/* la raya de la cuenta: un trazo dibujado */
.cuenta-raya { height: 4px; margin: 4px 0 6px; border-radius: 2px; background: var(--tinta); }
.cuenta-resultado { color: var(--primario-osc); }

.puntitos { display: flex; flex-direction: column; gap: 9px; }
.puntitos-fila { display: flex; gap: 9px; }
.punto-bola { width: 26px; height: 26px; border-radius: 50%; background: var(--primario); }

.tarjetitas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tarjetita {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 104px;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.tarjetita-bandera { width: 52px; height: 35px; object-fit: cover; border: 1px solid var(--borde); border-radius: 5px; }
.tarjetita b { font-size: .95rem; text-align: center; }
.tarjetita span { font-size: .84rem; color: var(--tinta-suave); text-align: center; }

/* en las lecciones: una palabra cortada en sílabas, o una lista en fila */
.trozos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.trozos span {
  padding: 8px 14px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  font-weight: 800;
}
.trozos .trozo-fuerte { border-color: var(--primario); background: var(--seleccion); color: var(--primario-osc); }

/* dos columnas: el inglés y qué quiere decir */
.lista-en { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 0 auto; }
.lista-en-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.lista-en-fila b { font-size: 1.05rem; }
.lista-en-fila span { font-size: .92rem; color: var(--tinta-suave); text-align: right; }

/* la resta pidiendo prestado, como en el cuaderno: el número tachado y,
   encima, lo que quedó después de prestar */
.cd-tachado {
  color: var(--tinta-suave);
  text-decoration: line-through;
  text-decoration-thickness: .08em;
}

/* cuánto vale cada cifra: el número con cada cifra en su lugar, su nombre y lo que vale */
.posicional { display: flex; justify-content: center; gap: 10px; }
.posicional-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 76px;
  padding: 10px 8px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.posicional-cifra b { font-size: var(--letra-cartel); line-height: 1; color: var(--primario-osc); }
.posicional-cifra span { font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.posicional-cifra i { font-style: normal; font-size: 1.15rem; font-weight: 800; }

/* una bandera como opción de respuesta */
.bandera-opcion { width: 72px; height: 48px; object-fit: cover; border: 1px solid var(--borde); border-radius: 5px; vertical-align: middle; }

/* la fila de los números, con los saltitos de sumar y de restar */
.recta { display: block; width: min(100%, 360px); height: auto; }

/* una cosa que se convierte en otra: flor → fruto → planta nueva */
.cadena { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
.cadena-paso { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cadena-paso .visual-emoji { font-size: var(--dibujo-chico); }
.cadena-paso b { font-size: 1.0625rem; }
.cadena-flecha { font-size: var(--letra-pieza); font-weight: 800; color: var(--tinta-suave); }

/* un dibujo de la app (el globo de Geografía) en un paso */
.visual-dibujo { width: clamp(130px, 36vw, 170px); aspect-ratio: 1; }
/* el Sol y la Tierra: más ancho que alto */
.dibujo-ancho { width: clamp(240px, 74vw, 330px); }

/* la vocal grande con su dibujo, en las tarjetas para escuchar */
.letra-con { display: flex; align-items: center; gap: 6px; line-height: 1; }
.letra-con b { font-size: var(--letra-cartel); color: var(--primario-osc); }
.letra-con span { font-size: var(--letra-pieza); }

/* los planetas, en las tarjetas para escuchar */
.act-tarjeta-visual .planeta { width: 64px; height: 64px; }

/* una respuesta con el dibujo de la figura adelante */
.figura-opcion { display: inline-block; width: 40px; height: 40px; margin: -6px 10px -6px 0; vertical-align: middle; }

@media (max-width: 620px) {
  .punto-bola { width: 20px; height: 20px; }
  .puntitos, .puntitos-fila { gap: 7px; }
}

/* ============================================================
   El camino de niveles (el mapa de cada juego)

   Como el camino de Duolingo: los niveles son botones redondos gordos,
   con el escalón que se hunde, unidos por un camino que serpentea. Lo
   hecho va del color del juego y lo que falta, gris. Al chico le hablan
   tres cosas sin palabras: su cara sobre el nivel que le toca, el anillo
   de ese nivel, y las estrellas abajo de cada uno que ya pasó.
   ============================================================ */
.camino-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 12px;
  padding: 16px;
  border-radius: var(--radio);
  background: var(--cartel-vivo, var(--camino-color));
  color: var(--cartel-tinta, #ffffff);
}
.camino-cabecera-icono {
  width: 62px;
  height: 62px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: var(--camino-color);
  font-size: 2rem;
}
.camino-cabecera-icono .ico { width: 34px; height: 34px; stroke-width: 2; }
.camino-cabecera-datos { flex: 1; min-width: 0; }
.camino-titulo { margin: 0; font-size: clamp(1.45rem, 5vw, 1.95rem); font-weight: 800; line-height: 1.1; }
.camino-progreso { margin: 3px 0 8px; font-size: .98rem; font-weight: 700; }
.camino-barra {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}
.camino-barra i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--camino-color, var(--girasol));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--suave);
}
.camino-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 10px; }
.camino-acciones a { display: inline-flex; align-items: center; gap: 6px; }
.camino-acciones .ico { width: 1.1em; height: 1.1em; }

.camino { position: relative; max-width: 460px; margin: 0 auto 30px; }
.camino-trazo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.camino-trazo path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.camino-fondo { stroke: var(--borde); stroke-width: 10; stroke-dasharray: 1 18; }
.camino-hecho { stroke: var(--camino-color); stroke-width: 10; opacity: .85; }

.camino-nivel {
  position: absolute;
  z-index: 2;
  width: 70px;
  height: 70px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: var(--camino-color);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--camino-oscuro);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.camino-nivel:active { transform: translate(-50%, calc(-50% + 6px)); box-shadow: 0 0 0 var(--camino-oscuro); }
.camino-cara { display: grid; place-items: center; }
.camino-numero { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.camino-cara .ico { width: 30px; height: 30px; stroke-width: 2.4; }
.camino-cara .ico-blando { opacity: .35; }

/* el que toca: un poco más grande, con un anillo que respira despacio */
.camino-nivel.actual { width: 78px; height: 78px; }
.camino-nivel.actual::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 4px solid var(--camino-color);
  border-radius: 50%;
  opacity: .45;
  animation: anillo 2.2s var(--suave) infinite;
}
@keyframes anillo {
  0%        { transform: scale(.94); opacity: .55; }
  70%, 100% { transform: scale(1.14); opacity: 0; }
}

.camino-nivel.cerrado {
  background: var(--borde);
  color: #8A94A8;
  box-shadow: 0 6px 0 var(--pista);
}
/* los desafíos: más grandes y con filo dorado */
.camino-nivel.desafio { width: 86px; height: 86px; border: 5px solid var(--girasol); }
.camino-nivel.desafio .camino-cara .ico { width: 38px; height: 38px; }
.camino-nivel.desafio.cerrado { border-color: var(--pista); }
.camino-nivel.final { width: 94px; height: 94px; }
.camino-numerito {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--girasol);
  color: #422006;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 2px 0 #B37E00;
}

.camino-estrellas {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  gap: 1px;
  transform: translate(-50%, 8px);
}
.camino-estrellas span { display: grid; color: var(--pista); }
.camino-estrellas .ico { width: 17px; height: 17px; stroke-width: 2; }
.camino-estrellas .ico-blando { fill: var(--borde); opacity: 1; }
.camino-estrellas .ganada { color: var(--oro); }
.camino-estrellas .ganada .ico-blando { fill: var(--girasol); }

/* el que se acaba de abrir aparece con un saltito */
.camino-nivel.recien { animation: se-abre .7s var(--rebote) .7s both; }
@keyframes se-abre {
  0%   { transform: translate(-50%, -50%) scale(.6); }
  60%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* la cara del chico, arriba del nivel que le toca */
.camino-yo {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 44px));
  pointer-events: none;
  transition: left .9s var(--suave), top .9s var(--suave);
}
.camino-yo-cara {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--camino-color);
  border-radius: 50%;
  background: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 6px 12px -4px rgba(39, 48, 74, .35);
}
.camino-yo-cara img { width: 100%; height: 100%; object-fit: cover; }
.camino-yo::after {           /* la puntita del globo, que señala el nivel */
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--camino-color);
  transform: translateX(-50%) rotate(45deg);
}
/* sin foto, la mascota asomada en el círculo */
.camino-yo-cara.con-mascota { place-items: start center; }
.camino-yo-mascota { width: 118%; height: auto; margin-top: 3px; }
.camino-yo-mascota .mascota-img { width: 100%; height: auto; }

.camino-etapa {
  position: absolute;
  z-index: 1;
  max-width: 38%;
  padding: 5px 12px;
  transform: translateY(-50%);
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
}
.camino-etapa.a-la-izquierda { left: 0; }
.camino-etapa.a-la-derecha { right: 0; text-align: right; }

/* ---------- la hoja de un nivel: sube desde abajo ---------- */
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(39, 48, 74, .5);
}
.hoja {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 30px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--tarjeta);
  box-shadow: 0 -10px 30px -12px rgba(39, 48, 74, .35);
  text-align: center;
  transform: translateY(100%);
  transition: transform .3s var(--suave);
}
.hoja-fondo.abierta .hoja { transform: translateY(0); }
.hoja-insignia {
  width: 78px;
  height: 78px;
  margin: -66px auto 8px;
  display: grid;
  place-items: center;
  border: 5px solid var(--tarjeta);
  border-radius: 50%;
  background: var(--camino-color);
  color: #ffffff;
  font-size: 2rem;
  font-weight: 800;
  box-shadow: 0 5px 0 var(--camino-oscuro);
}
.hoja-insignia .ico { width: 34px; height: 34px; stroke-width: 2.2; }
.hoja-insignia.desafio { background: var(--girasol); color: #422006; box-shadow: 0 5px 0 #B37E00; }
.hoja-insignia.cerrado { background: var(--borde); color: #8A94A8; box-shadow: 0 5px 0 var(--pista); }
.hoja-antetitulo { margin: 0; color: var(--tinta-suave); font-size: .92rem; font-weight: 800; }
.hoja-titulo { margin: 2px 0 6px; font-size: 1.55rem; font-weight: 800; line-height: 1.15; }
.hoja-detalle { margin: 0 0 10px; color: var(--tinta-suave); }
.hoja-estrellas { display: flex; justify-content: center; gap: 4px; margin: 0 0 10px; }
.hoja-estrellas span { display: grid; color: var(--pista); }
.hoja-estrellas .ico { width: 30px; height: 30px; }
.hoja-estrellas .ico-blando { fill: var(--borde); opacity: 1; }
.hoja-estrellas .ganada { color: var(--oro); }
.hoja-estrellas .ganada .ico-blando { fill: var(--girasol); }
.hoja-regla { margin: 0 0 16px; color: var(--tinta-suave); font-size: .93rem; font-weight: 700; }
.hoja .btn-gigante { width: 100%; }
.hoja .btn-texto { margin-top: 8px; }

/* ---------- nivel terminado ---------- */
.nivel-fin { text-align: center; }
.nivel-fin-insignia {
  width: 98px;
  height: 98px;
  margin: 4px auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--camino-color);
  color: #ffffff;
  font-size: 2.6rem;
  font-weight: 800;
  box-shadow: 0 7px 0 var(--camino-oscuro);
}
.nivel-fin-insignia .ico { width: 46px; height: 46px; stroke-width: 2.2; }
.nivel-fin-insignia.desafio { background: var(--girasol); color: #422006; box-shadow: 0 7px 0 #B37E00; }
.nivel-fin.paso .nivel-fin-insignia { animation: se-abre-fin .6s var(--rebote) both; }
@keyframes se-abre-fin {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.nivel-fin-estrellas { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 0 0 6px; }
.nivel-fin-estrellas span { display: grid; color: var(--pista); }
.nivel-fin-estrellas .ico { width: 50px; height: 50px; }
.nivel-fin-estrellas .ico-blando { fill: var(--borde); opacity: 1; }
/* la del medio, más grande y más alta, como un podio */
.nivel-fin-estrellas span:nth-child(2) { margin-bottom: 10px; }
.nivel-fin-estrellas span:nth-child(2) .ico { width: 62px; height: 62px; }
.nivel-fin-estrellas .ganada { color: var(--oro); animation: estrella-sale .55s var(--rebote) both; }
.nivel-fin-estrellas .ganada .ico-blando { fill: var(--girasol); }
.nivel-fin-estrellas .ganada:nth-child(2) { animation-delay: .15s; }
.nivel-fin-estrellas .ganada:nth-child(3) { animation-delay: .3s; }
@keyframes estrella-sale {
  0%   { transform: scale(0) rotate(-40deg); }
  65%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- ¿y ahora? ---------- */
.recomendacion { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; text-align: left; }
.recomendacion-titulo { margin: 0; font-size: 1.15rem; font-weight: 800; text-align: center; }
.recomendacion-vacia { margin: 0; color: var(--tinta-suave); text-align: center; }
.recomendacion-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  color: var(--tinta);
  text-decoration: none;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .recomendacion-opcion:hover { border-color: var(--rec-color, var(--pista)); } }
.recomendacion-opcion:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.recomendacion-icono {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rec-color);
  color: #ffffff;
  font-size: 1.6rem;
}
.recomendacion-icono .ico { width: 28px; height: 28px; }
.recomendacion-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.recomendacion-arriba, .recomendacion-abajo { font-size: .86rem; font-weight: 700; color: var(--tinta-suave); }
.recomendacion-cuerpo b { font-size: 1.1rem; line-height: 1.2; }

/* ============================================================
   Tienda y personalización
   ============================================================ */
.tienda-nota { margin: -1em 0 1.8em; font-size: .93rem; text-align: left; }

.grilla-tienda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.grilla-avatares-tienda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.card-tienda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 14px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
@media (hover: hover) { .card-tienda:hover { border-color: var(--pista); } }
.card-tienda:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.card-tienda[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}
.card-avatar { gap: 4px; padding: 12px 8px 10px; }
.card-animal { align-items: center; text-align: center; }
.avatar-muestra { font-size: 2.2rem; line-height: 1.1; }
.tienda-nombre { font-size: 1.05rem; font-weight: 800; }
.tienda-texto { font-size: .86rem; line-height: 1.3; color: var(--tinta-suave); }
.tienda-pie { margin-top: 4px; }

.etiqueta-precio, .etiqueta-tuya, .etiqueta-puesta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
}
.etiqueta-precio { background: #FFF1C7; color: #6B4A00; }
.etiqueta-precio.no-alcanza { background: var(--borde); color: var(--tinta); }
.etiqueta-tuya { background: var(--borde); color: var(--tinta); }
.etiqueta-puesta { background: var(--exito-suave); color: #14532d; }

/* las vistas previas */
.muestra-tema { display: flex; gap: 6px; margin-bottom: 4px; }
.muestra-punto {
  width: 30px;
  height: 30px;
  border: 2px solid var(--tarjeta);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--borde);
}
#paletas-gratis .muestra-punto,
#paletas-compradas .muestra-punto { width: 26px; height: 26px; }
.muestra-fondo {
  width: 100%;
  height: 62px;
  margin-bottom: 4px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--papel);
}

/* la mascota grande arriba y las dos opciones abajo */
.bloque-mascota {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.bloque-mascota .grilla-tienda { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.mascota-preview { flex: none; height: clamp(160px, 40vw, 210px); }
.mascota-mini { display: block; height: 92px; margin: 0 auto 6px; }

.bloque-ranura { margin-bottom: 26px; }
.titulo-ranura { margin: 0 0 2px; font-size: 1.05rem; color: var(--tinta); }
.nota-ranura { margin: 0 0 12px; font-size: .93rem; color: var(--tinta-suave); }
.fila-colores { display: flex; flex-wrap: wrap; gap: 14px 12px; }

/* cada color es una pastilla con su mancha grande arriba: a un chico que
   todavía no lee bien, el nombre no le dice nada y el color sí */
.pastilla-color {
  width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  box-shadow: 0 var(--paso) 0 var(--sombra-clay);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), border-color .15s;
}
.pastilla-tinta {
  width: 46px;
  height: 46px;
  border-radius: var(--mancha);
  background: var(--muestra);
}
.pastilla-nombre { font-size: .84rem; font-weight: 800; line-height: 1.15; }
@media (hover: hover) { .pastilla-color:hover { border-color: var(--pista); } }
.pastilla-color:active { transform: translateY(var(--paso)); box-shadow: 0 0 0 var(--sombra-clay); }
.pastilla-color[aria-pressed="true"] {
  border-color: var(--primario);
  background: var(--seleccion);
  box-shadow: 0 var(--paso) 0 var(--primario-osc);
}
.muestra-color-grande {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 12px;
}

/* ============================================================
   Configuración
   ============================================================ */
#pantalla-configuracion .etiqueta-grupo:not(:first-of-type) { margin-top: 30px; }

.fila-ajuste {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 12px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.fila-ajuste + .fila-ajuste { margin-top: -14px; }
.ajuste-icono { flex: none; display: inline-flex; color: var(--primario-osc); }
.ajuste-icono .ico { width: 26px; height: 26px; }

.interruptor {
  flex: none;
  width: 62px;
  height: 36px;
  padding: 3px;
  border: 2px solid var(--pista);
  border-radius: 999px;
  background: var(--pista);
  cursor: pointer;
  transition: background-color .2s var(--suave), border-color .2s;
}
.interruptor span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(39, 48, 74, .3);
  transition: transform .2s var(--suave);
}
.interruptor[aria-checked="true"] { border-color: var(--exito-osc); background: var(--exito); }
.interruptor[aria-checked="true"] span { transform: translateX(26px); }

.elegir-voz { margin: 4px 0 26px; }
.elegir-voz .fila-opciones { flex-direction: column; gap: 12px; }
.elegir-voz .opcion { width: 100%; justify-content: flex-start; }

.tarjeta-ajustes {
  margin-bottom: 26px;
  padding: clamp(18px, 4vw, 24px);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: center;
}
.tarjeta-ajustes .campo-texto { text-align: left; }
.tarjeta-ajustes .grilla-edades { margin-bottom: 10px; }
.nota-edad { margin: 0 0 16px; }
.aviso-guardado { margin: 12px 0 0; color: var(--exito-osc); font-weight: 800; animation: aparecer .3s var(--suave) both; }
.sobre-app { text-align: left; }
.sobre-app p { margin: 0 0 8px; }
.sobre-app p:last-child { margin-bottom: 0; }
.fila-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--borde);
  color: var(--tinta-suave);
  font-size: .9rem;
}
#ajuste-meta { margin-bottom: 28px; }
#ajuste-meta:has(+ .meta-personal:not([hidden])) { margin-bottom: 0; }
#ajuste-meta + .meta-personal { margin-bottom: 28px; }

.copia-texto { margin: 0 0 14px; line-height: 1.45; color: var(--tinta-suave); }
.copia-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.copia-botones > * { flex: 1 1 200px; }
.copia-botones .btn-gigante { font-size: 1.1rem; padding: 12px 22px; }

/* ============================================================
   El cartel de confirmar

   Reemplaza a window.confirm(), que el propio navegador puede silenciar.
   Es lo único que interrumpe: por eso va encima de todo y con sombra.
   ============================================================ */
.dialogo {
  max-width: min(92vw, 420px);
  padding: 0;
  border: none;
  background: none;
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(39, 48, 74, .55); }
.dialogo-caja {
  padding: clamp(20px, 5vw, 28px);
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: var(--sombra-flota);
  text-align: center;
  animation: entra-dialogo .28s var(--suave) both;
}
@keyframes entra-dialogo {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.dialogo-vista { height: 108px; margin-bottom: 10px; }
.dialogo-vista .mascota-mini { height: 108px; }
.dialogo-vista .muestra-color-grande { height: 72px; margin-top: 18px; }
.dialogo-vista .avatar-muestra { font-size: 4rem; line-height: 108px; }
.dialogo-titulo { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.dialogo-texto { margin: 0 0 20px; line-height: 1.45; color: var(--tinta-suave); }
.dialogo-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
.dialogo-botones .btn-gigante { font-size: 1.15rem; padding: 12px 30px; }

/* ============================================================
   Modo parental

   Es de los grandes: la vara es la de una app de adultos bien hecha.
   Neutro, ordenado y con los números a mano.
   ============================================================ */
.tarjeta-pin {
  max-width: 380px;
  margin: 0 auto;
  padding: 26px 24px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: center;
}
.campo-pin {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 14px;
  padding: 10px 12px;
  border: 2px solid var(--pista);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .5em;
  text-indent: .5em;          /* compensa el espaciado del último caracter */
  text-align: center;
}
.campo-pin:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px var(--seleccion); }
.error-pin { margin: 0 0 12px; color: var(--error-osc); font-weight: 800; }
/* En qué va el pedido de borrar el PIN: letra chica y gris, debajo del
   botón, como la letra chica de la cuenta. */
.nota-pin { margin: 14px 0 0; font-size: .9rem; line-height: 1.45; color: var(--tinta-suave); }
/* Adentro del panel, si entrar canceló un pedido de borrar el PIN */
.aviso-panel { margin: 0 auto 18px; }
/* El PIN en el cartel: entre el texto y los botones */
#dialogo-pin .campo-pin { margin-bottom: 12px; }
#dialogo-pin .dialogo-texto { margin-bottom: 16px; }
.tabla-partidas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }

.parental-chicos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 12px; }
.chico-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 16px 6px 8px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
  transition: transform .12s var(--suave), box-shadow .12s var(--suave);
}
.chico-panel:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sombra-clay); }
.chico-panel[aria-pressed="true"] { border-color: var(--primario); background: var(--seleccion); box-shadow: 0 3px 0 var(--primario-osc); }
.chico-panel-avatar { font-size: 1.5rem; line-height: 1; }

.parental-stats { margin: 0 0 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .parental-stats { grid-template-columns: repeat(4, 1fr); } }

/* las pestañas del panel */
.pestanas {
  position: sticky;
  top: calc(66px + env(safe-area-inset-top, 0px));   /* abajo de la flecha de volver */
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 4px 0 22px;
  padding: 4px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  box-shadow: 0 8px 16px -12px rgba(39, 48, 74, .35);
}
.pestana {
  min-height: 42px;
  padding: 6px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pestana[aria-selected="true"] { background: var(--primario); color: var(--sobre-primario); }
@media (hover: hover) { .pestana:not([aria-selected="true"]):hover { color: var(--tinta); background: var(--borde); } }

.parental-total { grid-template-columns: repeat(3, 1fr); margin: 0 0 26px; }
@media (min-width: 640px) { .parental-total { grid-template-columns: repeat(4, 1fr); } }
.parental-total .stat b { font-size: 1.35rem; }
.parental-total .stat span { font-size: .72rem; }

.titulo-con-selector { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.titulo-con-selector .etiqueta-grupo { margin: 0; }
.selector-periodo { display: inline-flex; gap: 4px; padding: 3px; border: 2px solid var(--borde); border-radius: 999px; background: var(--tarjeta); }
.chip-periodo {
  min-height: 38px;
  padding: 4px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
}
.chip-periodo[aria-pressed="true"] { background: var(--seleccion); color: var(--tinta); }

.grafico-titulo { margin: 4px 0 6px; color: var(--tinta-suave); font-size: .92rem; font-weight: 800; }
.semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 164px;
  margin: 0 0 28px;
  padding: 12px 12px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.semana-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.semana-pozo { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.semana-barra { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--primario); }
.semana-cifra { min-height: 1.1em; color: var(--tinta-suave); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.semana-nombre { min-height: 1.3em; color: var(--tinta-suave); font-size: .8rem; font-weight: 700; text-transform: capitalize; }
.semana-dia.hoy .semana-nombre { color: var(--tinta); font-weight: 800; }
.semana-minutos .semana-barra { background: #0d9488; }
/* treinta días no entran con números arriba: quedan las barras y la fecha cada cinco */
.semana.muchas { gap: 2px; padding-left: 8px; padding-right: 8px; }
.semana.muchas .semana-cifra { visibility: hidden; }
.semana.muchas .semana-barra { border-radius: 4px 4px 2px 2px; }
.semana.muchas .semana-nombre { font-size: .68rem; white-space: nowrap; overflow: visible; }

.parental-tendencia { margin: 0 0 10px; font-weight: 700; }
.parental-lista { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; }
.parental-lista .fila-ajuste { margin-bottom: 0; }
.parental-lista .fila-ajuste + .fila-ajuste { margin-top: 0; }
.parental-bloque { margin-bottom: 28px; }
.parental-sub-grupo { margin: 18px 0 6px; font-size: 1.05rem; font-weight: 800; }
.parental-tiempo-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 8px; }
.parental-tiempo-hoy p { margin: 0; font-weight: 700; }
.etiqueta-oculta {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 800;
  vertical-align: .1em;
}
.idea-juntos { padding: 12px 14px; border: 2px solid var(--borde); border-radius: var(--radio-s); background: var(--tarjeta); }
.idea-juntos b { display: block; margin-bottom: 2px; }
.idea-juntos p { margin: 0; color: var(--tinta-suave); }
#pantalla-parental .fila-materia .ir-dato { margin-top: 4px; }
.parental-cerrar { margin-top: 18px; }

/* cuándo juega */
.parental-cuando { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 28px; }
@media (min-width: 640px) { .parental-cuando { grid-template-columns: 1fr 1fr; } }
.cuando-bloque {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.cuando-titulo { margin-bottom: 2px; }
.cuando-fila { display: grid; grid-template-columns: 5.5em 1fr 3em; align-items: center; gap: 8px; }
.cuando-nombre { color: var(--tinta-suave); font-size: .88rem; font-weight: 700; }
.cuando-riel { height: 10px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.cuando-riel i { display: block; height: 100%; border-radius: inherit; background: var(--primario); }
.cuando-cifra { font-size: .82rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* la memoria: una barra en tres partes */
.memoria { margin: 0 0 28px; }
.memoria-barra { display: flex; height: 22px; margin-bottom: 12px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.memoria-barra i { display: block; flex-basis: 0; min-width: 6px; }
.memoria-aprendiendo { background: #f59e0b; }
.memoria-afianzando { background: #3b82f6; }
.memoria-sabidas { background: #16a34a; }
.memoria-leyenda { display: flex; flex-direction: column; gap: 8px; }
.memoria-item { display: flex; align-items: flex-start; gap: 10px; }
.memoria-item div { display: flex; flex-direction: column; }
.memoria-item span:not(.memoria-punto) { color: var(--tinta-suave); font-size: .86rem; }
.memoria-punto { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; }
.memoria-hoy { margin: 12px 0 0; font-weight: 700; }

/* lecciones */
.parental-resumen-lecciones { margin: 0 0 10px; color: var(--tinta-suave); font-weight: 700; }
.estado-leccion {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 800;
}
.estado-leccion.hecha { background: var(--exito-suave); color: #14532d; }
.estado-leccion.repasar { background: var(--seleccion); color: var(--tinta); }
.fila-leccion:not(.hecha) .fila-nombre { color: var(--tinta-suave); }

/* juego por juego */
.parental-juegos { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; }
.juegos-materia { padding: 0 14px; border: 2px solid var(--borde); border-radius: var(--radio-s); background: var(--tarjeta); }
.juegos-materia summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  list-style: none;
  cursor: pointer;
}
.juegos-materia summary::-webkit-details-marker { display: none; }
.juegos-materia summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  background: var(--tinta-suave);
  -webkit-mask: var(--chevron) center / contain no-repeat;
          mask: var(--chevron) center / contain no-repeat;
  transition: transform .2s var(--suave);
}
.juegos-materia[open] summary::after { transform: rotate(90deg); }
.juegos-materia-resumen { display: flex; flex-direction: column; }
.juegos-materia-resumen span { color: var(--tinta-suave); font-size: .86rem; font-weight: 700; }
.juego-panel { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-top: 2px solid var(--borde); }
.juego-panel-arriba { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.juego-panel-nivel { color: var(--tinta-suave); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.juego-panel-riel { height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.juego-panel-riel i { display: block; height: 100%; border-radius: inherit; }

/* exámenes: la nota adentro del círculo */
.nota-examen {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFF1C7;
  color: #6B4A00;
  font-size: 1.1rem;
  font-weight: 800;
}
.nota-examen.buena { background: var(--exito-suave); color: #14532d; }
.nota-examen.baja  { background: var(--error-suave); color: #7f1d1d; }

/* el descanso: cuando se terminó el tiempo del día */
.tarjeta-descanso {
  max-width: 460px;
  margin: 24px auto;
  padding: 28px 22px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: center;
}
.descanso-icono {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EAE4FD;
  color: var(--lila);
}
.descanso-icono .ico { width: 46px; height: 46px; }
.descanso-icono .ico-blando { opacity: .35; }

/* ============================================================
   El plan (la mensualidad)

   Una pantalla para el grande: arriba el cartel de la portada, después
   el precio y el botón, y recién abajo qué incluye y las preguntas.
   ============================================================ */
.plan-cabecera {
  margin: 2px 0 18px;
  padding: 26px 18px 22px;
  border-radius: var(--radio);
  background: var(--barra);
  color: var(--sobre-barra);
  text-align: center;
}
.plan-insignia {
  width: 68px;
  height: 68px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  color: var(--barra);
}
.plan-insignia svg { width: 38px; height: 38px; }
.plan-insignia img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.plan-marca { margin: 0; font-size: 1.2rem; font-weight: 800; }
.plan-titulo { margin: 2px 0 12px; font-size: clamp(1.7rem, 5.4vw, 2.3rem); font-weight: 800; line-height: 1.1; }
.plan-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--tinta);
  font-size: .93rem;
  font-weight: 800;
}
.plan-estado::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pista); }
.plan-estado.nueva::before   { background: var(--aviso); }
.plan-estado.activa::before  { background: var(--exito); }
.plan-estado.vencida::before { background: var(--error); }

.plan-precio-tarjeta {
  margin: 0 0 28px;
  padding: 22px 18px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  text-align: center;
}
.plan-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.plan-precio b { font-size: clamp(2.3rem, 9vw, 3rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-precio span { color: var(--tinta-suave); font-size: 1.05rem; font-weight: 700; }
/* Sin precio decidido: una frase en vez de un número, y sin «por mes» */
.plan-precio.sin-numero b { font-size: 1.25rem; line-height: 1.3; text-align: center; }
.plan-precio.sin-numero span { display: none; }
.plan-precio-nota { margin: 8px 0 18px; color: var(--tinta-suave); }
.plan-boton { width: 100%; max-width: 420px; }
.plan-descargar { display: inline-flex; margin-top: 4px; }
#btn-plan-revisar { margin-top: 12px; }
.plan-mensaje {
  max-width: 460px;
  margin: 14px auto 0;
  padding: 10px 14px;
  border-radius: var(--radio-s);
  background: var(--borde);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.4;
}
.plan-mensaje.bien { background: var(--exito-suave); color: #14532d; }
.plan-mensaje.mal  { background: var(--error-suave); color: #7f1d1d; }
.plan-puerta { max-width: 360px; margin: 4px auto 0; }
.plan-puerta-texto { margin: 0 0 12px; font-weight: 700; }
.plan-puerta .campo-pin { margin-bottom: 10px; }
.plan-legales { margin: 22px 0 0; font-size: .93rem; font-weight: 700; text-align: center; }
.plan-legales a { color: var(--tinta-suave); }

.plan-incluye { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.plan-incluye li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
}
.plan-incluye-icono {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--seleccion);
  color: var(--primario-osc);
}
.plan-incluye-icono .ico { width: 24px; height: 24px; }
.plan-incluye div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-incluye b { font-size: 1.05rem; }
.plan-incluye span { line-height: 1.4; color: var(--tinta-suave); }

/* cómo funciona: tres pasos numerados, unidos por una línea */
.plan-pasos { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: paso; }
.plan-pasos li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  padding: 0 0 18px 54px;
  counter-increment: paso;
}
.plan-pasos li::before {
  content: counter(paso);
  position: absolute;
  top: -2px;
  left: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--barra);
  color: var(--sobre-barra);
  font-weight: 800;
}
.plan-pasos li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 2px;
  left: 18px;
  width: 2px;
  background: var(--borde);
}
.plan-pasos b { font-size: 1.05rem; }
.plan-pasos span { line-height: 1.4; color: var(--tinta-suave); }

.plan-preguntas { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.plan-preguntas details { padding: 0 14px; border: 2px solid var(--borde); border-radius: var(--radio-s); background: var(--tarjeta); }
.plan-preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.plan-preguntas summary::-webkit-details-marker { display: none; }
.plan-preguntas summary::after {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--tinta-suave);
  -webkit-mask: var(--mas) center / contain no-repeat;
          mask: var(--mas) center / contain no-repeat;
  transition: transform .2s var(--suave);
}
.plan-preguntas details[open] summary::after { transform: rotate(45deg); }
.plan-preguntas p { margin: 0 0 14px; line-height: 1.5; color: var(--tinta-suave); }

/* ============================================================
   Los papelitos del festejo

   La capa va fija sobre todo y NO recibe toques: un chico tiene que
   poder apretar «Seguir» mientras todavía caen. Los tira
   js/nucleo/papelitos.js, que le sortea a cada uno posición, color,
   tamaño, demora, giro y corrida.
   ============================================================ */
.papelitos {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
}
.papelitos i {
  position: absolute;
  top: -12vh;
  display: block;
  animation: papelito linear both;
}
@keyframes papelito {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  80%  { opacity: 1; }
  to   { transform: translate(var(--corrida, 0), 118vh) rotate(var(--giro, 360deg)); opacity: 0; }
}

/* ============================================================
   El tutorial

   La capa tapa todo y oscurece, con un agujero recortado sobre lo que
   se muestra (lo calcula js/tutorial.js). Encima, un aro amarillo que
   viaja de una cosa a la otra, y el globo de la mascota.
   ============================================================ */
.tuto { position: fixed; inset: 0; z-index: 95; }
.tuto-sombra { position: fixed; inset: 0; background: rgba(39, 48, 74, .74); }
.tuto-foco {
  position: fixed;
  border-radius: 26px;
  box-shadow: 0 0 0 4px var(--girasol);
  transition: left .38s var(--suave), top .38s var(--suave), width .38s var(--suave), height .38s var(--suave);
  pointer-events: none;
}
.tuto.sin-foco .tuto-foco { display: none; }

.tuto-globo {
  position: fixed;
  left: 50%;
  width: min(440px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 16px 16px 14px;
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra-flota);
  transform: translateX(-50%);
}
.tuto-globo.al-medio { top: 50%; transform: translate(-50%, -50%); }
.tuto-globo.entra { animation: tuto-entra .36s var(--suave) both; }
.tuto-globo.al-medio.entra { animation-name: tuto-entra-medio; }
@keyframes tuto-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@keyframes tuto-entra-medio {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.tuto-cara { grid-row: 1 / 3; align-self: start; }
.tuto-mascota { height: 92px; }
.tuto-cuerpo { min-width: 0; }
.tuto-titulo { margin: 0 0 2px; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.tuto-texto { margin: 0; font-size: 1rem; line-height: 1.4; }
.tuto-puntos { display: flex; gap: 6px; margin: 10px 0 0; }
.tuto-puntos span { width: 8px; height: 8px; border-radius: 999px; background: var(--borde); transition: transform .2s var(--suave), background-color .2s; }
.tuto-puntos .hecho { background: var(--primario); }
.tuto-puntos .ahora { background: var(--primario); transform: scaleX(2); margin: 0 4px; }
.tuto-botones { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* «Saltar» siempre a la vista, con cara de botón y no de letra chica */
.tuto-saltar, .tuto-atras {
  min-height: 46px;
  padding: 8px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sombra-clay);
}
.tuto-saltar:active, .tuto-atras:active { transform: translateY(3px); box-shadow: none; }
.tuto-seguir { margin-left: auto; min-height: 50px; padding: 10px 24px; font-size: 1.1rem; }
.tuto-saltar[hidden], .tuto-atras[hidden] { display: none; }

/* ============================================================
   La mascota

   Viene de js/nucleo/mascota.js como un dibujo SVG adentro de una caja:
   la caja pone el alto y el dibujo se acomoda, con su proporción.
   ============================================================ */
.mascota { display: block; line-height: 0; }
.mascota-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 5;          /* la del dibujo, 200 × 250: sin esto el SVG no sabe su ancho */
  margin: 0 auto;
  overflow: visible;
  user-select: none;
}
/* en la tarjeta del inicio la escena es angosta: la mascota se sale un
   poco hacia la izquierda antes que achicarse */
.seguir-bichito .mascota-img { max-width: none; }

/* ---------------- El pie ---------------- */
.pie {
  padding: 10px 16px calc(26px + env(safe-area-inset-bottom, 0px));
  color: var(--tinta-suave);
  font-size: .86rem;
  text-align: center;
}

/* ---------------- Celular ---------------- */
@media (max-width: 420px) {
  .vidas .ico { width: 24px; height: 24px; }
  .vidas { gap: 2px; }
}

@media (max-width: 620px) {
  .btn-gigante { width: 100%; }
  .botones-fin .btn-secundario { width: 100%; }
  #mapa svg { max-height: 52vh; }
  .cabecera-perfil { flex-direction: column; gap: 10px; text-align: center; }
  .perfil-sub { text-align: center; }
  .avatar-grande { width: 80px; height: 80px; }
  .opcion { padding: 12px; gap: 9px; }
  .opcion-icono { font-size: 1.45rem; }
}

/* ---------------- Menos movimiento ----------------
   Con «reducir movimiento» puesto en el aparato, nada se mueve solo:
   las cosas aparecen, sin viajar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .camino-nivel.actual::after { animation: none; opacity: .45; transform: scale(1.06); }
}