/* ================================================================
   RUTIK · Estilos de la aplicación
   Diseño infantil: botones grandes, esquinas redondeadas,
   colores alegres tomados de los personajes Rutik y Ruki.
   ================================================================ */

/* ---------- Colores de la marca (fáciles de cambiar aquí) ---------- */
:root {
  --azul:        #2E86E4;   /* Rutik */
  --azul-oscuro: #1C63B8;
  --verde:       #7CC63E;
  --amarillo:    #FFC02E;
  --rosa:        #F03CA0;   /* Ruki */
  --morado:      #9B51E0;
  --naranja:     #FF6A3D;
  --gris:        #9AA6B2;

  --texto:       #33404D;
  --blanco:      #FFFFFF;

  --sombra:      0 8px 0 rgba(0,0,0,0.12);
  --sombra-suave:0 10px 30px rgba(0,0,0,0.12);
  --radio:       28px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  color: var(--texto);
  background: #EAF4FF;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

button { font-family: inherit; cursor: pointer; border: none; }
img { -webkit-user-drag: none; user-drag: none; }

/* Contenedor: centra el contenido y limita el ancho en pantallas grandes */
#app {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

/* ================================================================
   SISTEMA DE PANTALLAS  (solo una visible a la vez)
   ================================================================ */
.screen {
  display: none;
  width: 100%;
  max-width: 640px;               /* En computador se ve centrada, no estirada */
  min-height: 100dvh;
  padding: clamp(18px, 5vw, 40px);
  padding-top: max(clamp(18px, 5vw, 40px), env(safe-area-inset-top));
  padding-bottom: max(clamp(18px, 5vw, 40px), env(safe-area-inset-bottom));
  flex-direction: column;
  animation: pop .35s ease;
}
.screen.is-active { display: flex; }

@keyframes pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   BOTONES GENERALES
   ================================================================ */
.btn {
  border-radius: var(--radio);
  color: var(--blanco);
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: var(--sombra);
  transition: transform .08s ease, filter .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
.btn:disabled { filter: grayscale(.6) opacity(.6); box-shadow: none; }
/* Mismo caso que .category[hidden] más abajo: .btn ya trae su propio
   "display", que le gana a la regla [hidden] del navegador. */
.btn[hidden] { display: none; }

.btn--green  { background: var(--verde); }
.btn--blue   { background: var(--azul); }
.btn--pink   { background: var(--rosa); }
.btn--purple { background: var(--morado); }
.btn--gray   { background: var(--gris); }
.btn--orange { background: var(--naranja); }

.btn--big  { font-size: clamp(20px, 5vw, 26px); padding: 18px 30px; width: 100%; }
.btn--huge { font-size: clamp(24px, 6vw, 34px); padding: 22px 44px; }
.btn-star  { font-size: 1.2em; }

/* Botón "volver" redondo, arriba a la izquierda */
.btn-back {
  align-self: flex-start;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--azul);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--sombra-suave);
  margin-bottom: 10px;
}
.btn-back:active { transform: scale(.92); }

/* ================================================================
   PANTALLA 1 · BIENVENIDA
   ================================================================ */
.screen--welcome {
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #DCEEFF 55%, #BFE0FF 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.welcome-content { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.welcome-logo   { width: min(72vw, 320px); height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.12)); }

/* Rutik y Ruki, JUNTOS, uno al lado del otro, mismo tamaño y centrados */
.welcome-friends {
  display: flex;
  align-items: flex-end;              /* comparten la misma "línea de suelo" */
  justify-content: center;
  gap: clamp(6px, 2.5vw, 22px);       /* separación suficiente, no se superponen */
  margin-top: 6px;
  width: 100%;
}
.friend {
  width: min(41vw, 210px);            /* ambos con el mismo tamaño visual */
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
}
/* Animación suave para que ambos se sientan vivos (desfasada para que no vayan idénticos) */
.friend--rutik { animation: floatSoft 3s ease-in-out infinite; }
.friend--ruki  { animation: floatSoft 3s ease-in-out infinite; animation-delay: .6s; }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .friend--rutik, .friend--ruki { animation: none; }
}

.welcome-title {
  font-size: clamp(24px, 6.5vw, 36px);
  color: var(--azul-oscuro);
  margin: 6px 0 18px;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}

/* ================================================================
   TARJETAS (perfil y preguntas)
   ================================================================ */
.screen--profile, .screen--questions {
  background: linear-gradient(180deg, #EAF4FF 0%, #F6ECFF 100%);
  align-items: center;
}
.card {
  background: var(--blanco);
  width: 100%;
  border-radius: 34px;
  padding: clamp(22px, 6vw, 40px);
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: auto 0;
}
.card-title { font-size: clamp(20px, 5vw, 26px); color: var(--azul-oscuro); margin: 12px 0; }
.mini-buddy { width: 120px; height: auto; }
.mini-buddy--float { animation: bob 2.6s ease-in-out infinite; }

/* Campo de texto grande */
.text-input {
  width: 100%;
  font-size: 24px;
  text-align: center;
  padding: 16px;
  border: 3px solid #DCE6F2;
  border-radius: 20px;
  outline: none;
  font-family: inherit;
  color: var(--texto);
}
.text-input:focus { border-color: var(--azul); }

/* Selección de edad */
.age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-bottom: 22px; }
.age-chip {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #F1F6FC;
  color: var(--azul-oscuro);
  font-size: 30px;
  font-weight: 700;
  box-shadow: inset 0 0 0 3px #DCE6F2;
  transition: transform .08s ease;
}
.age-chip.is-selected { background: var(--amarillo); color: #7a5200; box-shadow: 0 6px 0 rgba(0,0,0,.12); transform: translateY(-2px); }
.age-chip:active { transform: scale(.94); }

/* ================================================================
   PANTALLA 3 · PREGUNTAS
   ================================================================ */
.card--question { gap: 4px; }
.question-for-adult {
  background: #FFF4D6; color: #9a6b00;
  padding: 8px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
}
.progress-dots { display: flex; gap: 8px; margin: 4px 0 10px; }
.progress-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #DCE6F2; }
.progress-dots .dot.is-done { background: var(--verde); }
.progress-dots .dot.is-current { background: var(--azul); transform: scale(1.25); }

.question-text { font-size: clamp(22px, 5.5vw, 30px); color: var(--azul-oscuro); margin: 6px 0 18px; min-height: 2.2em; display: flex; align-items: center; }

.answer-buttons { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.btn--answer { font-size: clamp(19px, 5vw, 22px); padding: 18px 20px; width: 100%; line-height: 1.2; }

/* ================================================================
   PANTALLA · PREPARANDO LA AVENTURA (transición)
   ================================================================ */
.screen--preparando {
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #E3F1FF 50%, #CFE8FF 100%);
  align-items: center;
  text-align: center;
}
.prep-content { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; margin: auto 0; }
.prep-friends { margin-bottom: 2px; }
.prep-text {
  font-size: clamp(22px, 6vw, 32px);
  color: var(--azul-oscuro);
  margin: 0;
  min-height: 1.2em;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.prep-dots { display: flex; gap: 12px; }
.prep-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul);
  animation: prepBounce 1s ease-in-out infinite;
}
.prep-dots span:nth-child(2) { background: var(--morado); animation-delay: .15s; }
.prep-dots span:nth-child(3) { background: var(--rosa);   animation-delay: .30s; }
@keyframes prepBounce { 0%,100% { transform: translateY(0); opacity:.55; } 50% { transform: translateY(-9px); opacity:1; } }
.prep-btn { margin-top: 4px; }

/* ================================================================
   PANTALLA · MI AVENTURA DE HOY (presentación)
   ================================================================ */
.screen--aventura {
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #E3F1FF 50%, #CFE8FF 100%);
  align-items: center;
  text-align: center;
}
.aventura-content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: auto 0; }
.aventura-friends { margin-bottom: 2px; }
.aventura-title {
  font-size: clamp(24px, 6.5vw, 34px);
  color: var(--azul-oscuro);
  margin: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.aventura-text { font-size: clamp(16px, 4.5vw, 20px); color: var(--texto); margin: 0; max-width: 24ch; }
.aventura-btn { margin-top: 8px; }
/* Fila breve "📚 Aprender · 💜 Emociones · 🤝 Amigos" — solo texto, sin
   tarjetas nuevas, para no recargar visualmente la pantalla. */
.aventura-areas { font-size: clamp(15px, 4vw, 18px); font-weight: 600; color: var(--azul-oscuro); margin: 0; }
.aventura-dot { color: var(--gris); margin: 0 2px; }
/* Mismo botón discreto que ya usa Padres en Inicio (.parents-link),
   solo con menos margen porque aquí va debajo del botón principal,
   no al final de una lista de tarjetas. */
.aventura-info-link { margin-top: 4px; }

/* ================================================================
   MI AVENTURA · transición breve entre paradas — sin botones, avanza
   sola cuando termina su narración (ver assets/js/mi-aventura.js).
   ================================================================ */
.screen--aventura-transicion {
  background: radial-gradient(circle at 50% 0%, #FFFDF5 0%, #FFF3D6 45%, #FFE8C2 100%);
  align-items: center; justify-content: center; text-align: center;
}
.aventura-transicion-content { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aventura-transicion-titulo { font-size: clamp(24px, 7vw, 34px); color: #e0762a; margin: 0; text-shadow: 0 2px 0 rgba(255,255,255,.7); }

/* ================================================================
   PANTALLA 4 · INICIO INFANTIL
   ================================================================ */
.screen--home {
  background: radial-gradient(circle at 50% -10%, #FFFFFF 0%, #E3F1FF 45%, #CFE8FF 100%);
  align-items: center;
}
.home-top { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; }
.home-buddy { width: min(40vw, 160px); height: auto; animation: bob 3s ease-in-out infinite; }
.home-hello { font-size: clamp(26px, 7vw, 38px); color: var(--azul-oscuro); margin: 0; text-align: center; }

.btn--adventure {
  width: 100%;
  background: linear-gradient(90deg, var(--amarillo), var(--naranja));
  color: #6b3900;
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 700;
  padding: 22px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  transition: transform .08s ease;
}
.btn--adventure:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,.12); }

/* Tres opciones grandes */
.home-tiles { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tile {
  display: flex; align-items: center; gap: 18px;
  width: 100%;
  padding: 24px 26px;
  border-radius: var(--radio);
  color: var(--blanco);
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  box-shadow: var(--sombra);
  transition: transform .08s ease;
}
.tile:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.tile-emoji { font-size: 1.5em; }
.tile--green  { background: var(--verde); }
.tile--purple { background: var(--morado); }
.tile--blue   { background: var(--azul); }

.parents-link {
  margin-top: 28px;
  background: rgba(255,255,255,.7);
  color: var(--azul-oscuro);
  font-size: 17px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: var(--sombra-suave);
}
.parents-link:active { transform: scale(.95); }

/* ================================================================
   PANTALLAS DE SECCIÓN (Aprendo · Emociones · Amigos)
   ================================================================ */
.screen--section { background: linear-gradient(180deg, #F3FbFF 0%, #E9F5FF 100%); }
.section-title { font-size: clamp(26px, 7vw, 34px); margin: 6px 0 20px; text-align: center; }
.section-title--green  { color: #4f8a1a; }
.section-title--purple { color: #7a2fc4; }
.section-title--blue   { color: var(--azul-oscuro); }

.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.category {
  background: var(--blanco);
  border-radius: 26px;
  padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--sombra-suave);
  transition: transform .1s ease;
  min-height: 130px;
  justify-content: center;
}
/* El atributo hidden por sí solo no basta: .category ya trae su propio
   "display", que en la cascada le gana a la regla [hidden] del navegador.
   Sin esto, ocultar una tarjeta por JS (el.hidden = true) no la escondía
   de verdad, solo marcaba el atributo sin ningún efecto visual. */
.category[hidden] { display: none; }
.category:active { transform: scale(.95); }
.category-emoji { font-size: 46px; }
.category-name { font-size: clamp(15px, 4vw, 18px); font-weight: 600; color: var(--texto); text-align: center; }

/* Si hay un número impar, la última ocupa toda la fila */
.section-grid .category:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ================================================================
   PANTALLA APRENDO · identidad de Rutik (guía + tarjetas coloridas)
   (solo afecta a Aprendo gracias a .aprendo-grid / clases cat--*)
   ================================================================ */
.aprendo-guide {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 2px 0 20px;
}
.aprendo-buddy { width: clamp(62px, 19vw, 92px); height: auto; animation: floatSoft 3s ease-in-out infinite; }
.speech-bubble {
  position: relative;
  background: #fff;
  color: var(--azul-oscuro);
  font-weight: 600;
  font-size: clamp(15px, 4.2vw, 19px);
  padding: 12px 18px;
  border-radius: 18px;
  box-shadow: var(--sombra-suave);
  max-width: 62%;
}
.speech-bubble::before {
  content: "";
  position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-right-color: #fff;
}

/* Tarjetas de Aprendo: icono grande + nombre */
.aprendo-grid .category { min-height: 152px; gap: 12px; }
.aprendo-grid .cat-icon { width: clamp(66px, 22vw, 96px); height: auto; display: block; }
.aprendo-grid .category-name { font-size: clamp(15px, 4vw, 18px); font-weight: 700; color: #3A4A5A; }

/* Un color pastel suave por categoría (alegre, sin saturar) */
.cat--letras   { background: #E3F0FF; }
.cat--palabras { background: #E8F7DD; }
.cat--numeros  { background: #FFF3D6; }
.cat--colores  { background: #FFE3F1; }
.cat--pensar   { background: #EEE6FF; }

/* ================================================================
   PANTALLA LETRAS · 4 opciones (misma línea visual de Aprendo)
   ================================================================ */
.letras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.letras-grid .category { min-height: 152px; gap: 12px; }
.letras-grid .cat-icon { width: clamp(66px, 22vw, 100px); height: auto; display: block; }
.letras-grid .category-name { font-size: clamp(15px, 4vw, 18px); font-weight: 700; color: #3A4A5A; text-align: center; }

/* Un color pastel suave por opción */
.opt--vocales     { background: #E3F0FF; }
.opt--consonantes { background: #FFF3D6; }
.opt--silabas     { background: #EEE6FF; }
.opt--trazo       { background: #FFE3F1; }

/* ================================================================
   PANTALLA TEMPORAL · PRÓXIMAMENTE
   ================================================================ */
.screen--proximamente {
  background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #E3F1FF 50%, #CFE8FF 100%);
  align-items: center;
  text-align: center;
}
.prox-content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: auto 0; }
.prox-friends { margin-bottom: 2px; }
.prox-title {
  font-size: clamp(24px, 6.5vw, 34px);
  color: var(--azul-oscuro);
  margin: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.prox-text { font-size: clamp(16px, 4.5vw, 20px); color: var(--texto); margin: 0; max-width: 24ch; }

/* ================================================================
   PANTALLA 8 · ÁREA PARA PADRES
   ================================================================ */
.screen--parents { background: #F3F6FA; }
.parents-title { font-size: clamp(24px, 6.5vw, 32px); color: var(--azul-oscuro); margin: 6px 0 18px; text-align: center; }
.parents-card {
  background: var(--blanco);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--sombra-suave);
  margin-bottom: 16px;
}
.parents-card h3 { margin: 0 0 14px; font-size: 20px; color: var(--azul-oscuro); }
.learned-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.learned-list li { font-size: 17px; }
.demo-note { font-size: 13px; color: var(--gris); margin: 14px 0 0; font-style: italic; }

.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.progress-row span { width: 130px; font-size: 14px; font-weight: 600; }
.bar { flex: 1; height: 16px; background: #E8EEF5; border-radius: 999px; overflow: hidden; min-width: 40px; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--verde), var(--azul)); }
.progress-count { flex-shrink: 0; font-size: 12px; color: var(--gris); white-space: nowrap; }
.parents-hoy-total { font-size: 18px; font-weight: 700; color: var(--azul-oscuro); margin: 0 0 10px; }

.profile-summary { font-size: 17px; line-height: 1.6; }
.profile-summary .chip { display: inline-block; background: #EEF4FF; color: var(--azul-oscuro); padding: 4px 12px; border-radius: 999px; font-weight: 600; margin: 2px; }

/* ================================================================
   JUEGO · ¿Dónde está la vocal?
   ================================================================ */
.screen--juego {
  background: linear-gradient(180deg, #F3FbFF 0%, #EAF3FF 100%);
  position: relative;
}
.juego-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.progreso-dots { display: flex; gap: 10px; }
.progreso-dots .pdot { width: 16px; height: 16px; border-radius: 50%; background: #DCE6F2; transition: background .2s, transform .2s; }
.progreso-dots .pdot.done { background: var(--verde); }
.progreso-dots .pdot.current { background: var(--azul); transform: scale(1.25); }

.juego-guia { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0 6px; text-align: center; }
.juego-buddy { width: min(30vw, 120px); height: auto; animation: floatSoft 3s ease-in-out infinite; }
.juego-pregunta { font-size: clamp(22px, 6vw, 30px); color: var(--azul-oscuro); font-weight: 600; margin: 0; }

/* Enunciado con imagen (etapa 6–7 de "Vocal e imagen") */
.juego-pregunta .preg-linea { display: block; }
.juego-pregunta .preg-ilus { display: block; width: clamp(84px, 26vw, 124px); margin: 8px auto 2px; }
.juego-pregunta .preg-ilus svg { width: 100%; height: auto; display: block; }
.juego-pregunta .preg-palabra { display: block; font-size: 1.05em; color: var(--texto); }
.juego-pregunta .preg-acertijo { letter-spacing: 3px; font-weight: 700; }

.opciones-vocales {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(12px, 5vw, 30px);
  flex-wrap: wrap;
  margin: auto 0;
}
.letra-opcion {
  width: clamp(84px, 26vw, 130px);
  height: clamp(84px, 26vw, 130px);
  border-radius: 26px;
  background: #fff;
  color: var(--azul);
  font-family: inherit;
  font-size: clamp(46px, 14vw, 76px);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--sombra);
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease;
}
.letra-opcion:active { transform: scale(.94); }
.letra-opcion.correcta {
  background: #EAF7DD; color: #4f8a1a;
  box-shadow: 0 0 0 5px #B6E38A, var(--sombra);
  animation: correctaPop .6s ease;
}
.letra-opcion.revelada {
  background: #FFF3D6; color: #9a6b00;
  box-shadow: 0 0 0 5px var(--amarillo), var(--sombra);
  animation: correctaPop .6s ease;
}
.letra-opcion.pista { animation: pistaGlow 1s ease-in-out infinite; }
.letra-opcion.tocada-mal { animation: suaveShake .4s ease; }
@keyframes correctaPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1.08); } }
@keyframes pistaGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,192,46,0), var(--sombra); transform: scale(1); }
  50%     { box-shadow: 0 0 0 7px rgba(255,192,46,.65), var(--sombra); transform: scale(1.06); }
}
@keyframes suaveShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Encuentro la palabra: botones con una palabra escrita completa (no una sola letra) */
.opcion-palabra {
  min-width: clamp(90px, 26vw, 150px);
  padding: 14px 20px;
  border-radius: 22px;
  background: #fff;
  color: var(--azul);
  font-family: inherit;
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: var(--sombra);
  border: none;
  transition: transform .1s ease;
}
.opcion-palabra:active { transform: scale(.94); }
.letra-inicial { color: var(--naranja); }
.opcion-palabra.correcta {
  background: #EAF7DD; color: #4f8a1a;
  box-shadow: 0 0 0 5px #B6E38A, var(--sombra);
  animation: correctaPop .6s ease;
}
.opcion-palabra.revelada {
  background: #FFF3D6; color: #9a6b00;
  box-shadow: 0 0 0 5px var(--amarillo), var(--sombra);
  animation: correctaPop .6s ease;
}
.opcion-palabra.pista { animation: pistaGlow 1s ease-in-out infinite; }
.opcion-palabra.tocada-mal { animation: suaveShake .4s ease; }

/* NÚMEROS: número grande tocable ("Conozco los números"), puntos de
   cantidad, y fila de objetos repetidos para contar/sumar. */
.numero-grande {
  width: clamp(130px, 40vw, 200px);
  height: clamp(130px, 40vw, 200px);
  margin: 6px auto;
  border: none;
  border-radius: 32px;
  background: #fff;
  color: var(--azul);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(64px, 22vw, 110px);
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.numero-grande:active { transform: scale(.94); }

.numero-puntos {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 10px 0;
  font-size: clamp(20px, 6vw, 30px);
  color: var(--naranja);
  min-height: 32px;
}

.numero-objetos {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 6px; margin: 6px 0;
}
.numero-objetos .ilus { width: clamp(38px, 11vw, 56px); height: auto; display: block; }
.numero-objetos .ilus svg { width: 100%; height: auto; display: block; }

.numero-signo {
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 700;
  color: var(--azul);
  margin: 0 6px;
}

/* Número que falta: la secuencia es el elemento principal — tarjeta
   blanca grande y centrada, números grandes y gruesos. */
.numero-secuencia {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 4vw, 26px);
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--sombra);
  padding: clamp(16px, 5vw, 28px) clamp(18px, 6vw, 34px);
  margin: 14px auto;
  max-width: 92vw;
  width: fit-content;
}
.numero-secuencia-item {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(38px, 11vw, 60px);
  color: var(--azul);
  line-height: 1;
}
.numero-secuencia-hueco {
  min-width: 1em;
  min-height: 1em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 5px dashed var(--azul);
  border-radius: 16px;
  padding: 0 .15em;
}
.numero-secuencia-hueco.correcta {
  border-style: solid;
  background: #EAF7DD; color: #4f8a1a; border-color: #B6E38A;
  animation: correctaPop .6s ease;
}
.numero-secuencia-hueco.revelada {
  border-style: solid;
  background: #FFF3D6; color: #9a6b00; border-color: var(--amarillo);
  animation: correctaPop .6s ease;
}

/* Acertijos de letra que falta ("¿Qué letra falta?" en Vocales,
   Consonantes y "Completo la palabra"): misma tarjeta grande y
   centrada que .numero-secuencia, pero las letras van pegadas como
   una palabra real (casi sin espacio entre ellas) en vez de separadas. */
.palabra-secuencia {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(1px, .6vw, 4px);
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--sombra);
  padding: clamp(14px, 4vw, 24px) clamp(20px, 6vw, 36px);
  margin: 10px auto;
  max-width: 92vw;
  width: fit-content;
}
.palabra-secuencia-item {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(34px, 10vw, 54px);
  color: var(--azul);
  line-height: 1;
  letter-spacing: 1px;
}
.palabra-secuencia-hueco {
  min-width: .85em;
  min-height: 1.1em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 5px dashed var(--azul);
  border-radius: 14px;
  margin: 0 3px;
}
.palabra-secuencia-hueco.correcta {
  border-style: solid;
  background: #EAF7DD; color: #4f8a1a; border-color: #B6E38A;
  animation: correctaPop .6s ease;
}
.palabra-secuencia-hueco.revelada {
  border-style: solid;
  background: #FFF3D6; color: #9a6b00; border-color: var(--amarillo);
  animation: correctaPop .6s ease;
}

/* COLORES Y FORMAS: pastilla grande de un color sólido (sin texto, no
   depende de leer) y tarjeta con una forma dibujada dentro, sobre un
   fondo pastel suave (varía por posición, ver nth-child abajo) en vez
   de blanco liso siempre — para que la sección se sienta más alegre
   sin perder el contraste con la figura. */
.opcion-color {
  position: relative;
  width: clamp(84px, 24vw, 130px);
  height: clamp(84px, 24vw, 130px);
  border-radius: 26px;
  border: none;
  box-shadow: var(--sombra);
  transition: transform .1s ease;
}
.opcion-color:active { transform: scale(.94); }
.opcion-color.correcta { box-shadow: 0 0 0 6px #4f8a1a, var(--sombra); animation: correctaPop .6s ease; }
.opcion-color.revelada { box-shadow: 0 0 0 6px var(--amarillo), var(--sombra); animation: correctaPop .6s ease; }
.opcion-color.pista { animation: pistaGlow 1s ease-in-out infinite; }
.opcion-color.tocada-mal { animation: suaveShake .4s ease; }

.opcion-forma {
  position: relative;
  width: clamp(84px, 24vw, 130px);
  height: clamp(84px, 24vw, 130px);
  border-radius: 26px;
  background: #FFF6D8; /* amarillo crema por defecto, ver variantes nth-child */
  border: none;
  box-shadow: var(--sombra);
  padding: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease;
}
.opcion-forma svg { width: 100%; height: 100%; display: block; }
.opcion-forma:active { transform: scale(.94); }
.opcion-forma.correcta { box-shadow: 0 0 0 6px #4f8a1a, var(--sombra); animation: correctaPop .6s ease; }
.opcion-forma.revelada { box-shadow: 0 0 0 6px var(--amarillo), var(--sombra); animation: correctaPop .6s ease; }
.opcion-forma.pista { animation: pistaGlow 1s ease-in-out infinite; }
.opcion-forma.tocada-mal { animation: suaveShake .4s ease; }

/* Fondos pastel MUY suaves, rotan por posición (nunca todas blancas,
   nunca colores fuertes de fondo — la figura sigue siendo la que
   lleva el color vivo). */
.opcion-forma:nth-child(5n+2) { background: #DFF6E4; } /* verde menta */
.opcion-forma:nth-child(5n+3) { background: #FFE3EE; } /* rosado muy claro */
.opcion-forma:nth-child(5n+4) { background: #EFE6FB; } /* lila muy claro */
.opcion-forma:nth-child(5n+5) { background: #E3F0FF; } /* celeste muy claro */

/* Marca ✓ verde breve sobre la tarjeta que el niño acertó (además del
   rebote y el anillo verde que ya existían). */
.opcion-forma.correcta::after, .opcion-color.correcta::after,
.opcion-forma.marcado::after,  .opcion-color.marcado::after {
  content: "✓";
  position: absolute;
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #4f8a1a;
  color: #fff;
  font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
  animation: correctaPop .5s ease;
}

/* Clasifico: tarjeta ya seleccionada correctamente se queda marcada
   (distinto de "correcta" porque el ejercicio sigue activo, no avanza
   hasta encontrar todas). */
.opcion-forma.marcado, .opcion-color.marcado {
  box-shadow: 0 0 0 6px #4f8a1a, var(--sombra);
  opacity: .55;
}

/* La secuencia de "Secuencias" reutiliza .numero-secuencia con un
   dibujo pequeño adentro en vez de un dígito. */
.numero-secuencia-item .mini-forma { width: clamp(30px, 8vw, 46px); height: clamp(30px, 8vw, 46px); display: block; }

/* Rutik hace un pequeño gesto de alegría al acertar (Colores y formas
   únicamente — la clase solo se agrega desde esas 5 actividades). */
@keyframes rutikFeliz {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.12) rotate(-4deg); }
  60%  { transform: scale(1.05) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.juego-buddy.rutik-feliz { animation: rutikFeliz .6s ease; }

/* Decoración de fondo MUY discreta, solo en el menú y la pantalla final
   de Colores y formas (formas pastel de baja opacidad en las esquinas,
   nunca de pared a pared, para no confundirse con las tarjetas de
   respuesta). Las 5 actividades de esa sección ya no la usan: tienen
   el fondo de escena (.fondo-ruta, al final de este archivo). */
#screen-colores-formas-menu, #screen-colores-formas-fin {
  position: relative;
}
#screen-colores-formas-menu::before, #screen-colores-formas-fin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='%232E86E4' fill-opacity='0.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 90,85 10,85' fill='%23FF6A3D' fill-opacity='0.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='14' y='14' width='72' height='72' rx='14' fill='%237CC63E' fill-opacity='0.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61,37 96,37 68,58 79,92 50,71 21,92 32,58 4,37 39,37' fill='%239B51E0' fill-opacity='0.14'/%3E%3C/svg%3E");
  background-position: 4% 8%, 94% 12%, 6% 90%, 92% 86%;
  background-size: 64px, 56px, 50px, 60px;
}
/* Todo el contenido real queda por encima de la decoración */
#screen-colores-formas-menu > *, #screen-colores-formas-fin > * {
  position: relative;
  z-index: 1;
}

/* Estrellas de celebración */
.celebracion {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;
  font-size: clamp(34px, 10vw, 52px);
}
.celebracion span { opacity: 0; animation: estrellaPop .9s ease forwards; }
@keyframes estrellaPop {
  0%   { opacity: 0; transform: translateY(12px) scale(.4); }
  40%  { opacity: 1; transform: translateY(-6px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

/* ================================================================
   FINAL DEL JUEGO (celebración)
   ================================================================ */
.screen--fin {
  background: radial-gradient(circle at 50% 0%, #FFFDF5 0%, #FFF3D6 45%, #FFE8C2 100%);
  align-items: center; text-align: center;
}
.fin-content { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: auto 0; }
.fin-stars { font-size: clamp(34px, 10vw, 50px); letter-spacing: 6px; animation: floatSoft 2.5s ease-in-out infinite; }
.fin-title { font-size: clamp(30px, 9vw, 46px); color: #e0762a; margin: 0; text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.fin-text { font-size: clamp(16px, 4.5vw, 20px); color: var(--texto); margin: 0 0 6px; }
.screen--fin .btn { width: 100%; max-width: 340px; }
/* Resumen de Mi aventura — reutiliza .learned-list (ya usada en el
   área de padres) en vez de crear otra lista con estilo propio. */
.aventura-fin-resumen { align-items: center; text-align: center; margin: 0 0 6px; }

/* ================================================================
   MODAL LIGERO (por ahora solo lo usa "Para padres" de Mi aventura)
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 45, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 100;
}
/* Mismo caso que .btn[hidden]/.qp-feedback[hidden] de arriba: como
   .modal-overlay ya trae su propio "display", necesita este override
   explícito o el atributo [hidden] del navegador no alcanza a ocultarlo. */
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--blanco);
  border-radius: 24px;
  padding: 30px 24px 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--sombra-suave);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #EEF4FF;
  color: var(--azul-oscuro);
  font-size: 15px; font-weight: 700;
  line-height: 1;
}
.modal-close:active { transform: scale(.92); }
.modal-title { font-size: clamp(19px, 5vw, 22px); color: var(--azul-oscuro); margin: 4px 0 0; }
.modal-text { font-size: 16px; line-height: 1.5; color: var(--texto); margin: 0; }
.modal-card .btn { width: 100%; }

/* ================================================================
   MENÚ DE VOCALES · colores pastel de las 4 actividades
   ================================================================ */
.act--1 { background: #E3F0FF; }
.act--2 { background: #EEE6FF; }
.act--3 { background: #E8F7DD; }
.act--4 { background: #FFF3D6; }

/* ================================================================
   OPCIONES CON IMAGEN (Actividad "Vocal e imagen")
   ================================================================ */
.opciones-imagenes {
  display: flex; justify-content: center; align-items: stretch;
  gap: clamp(10px, 3.5vw, 22px);
  flex-wrap: wrap;
  margin: auto 0;
}
.opcion-imagen {
  position: relative;
  background: #fff;
  border: none;
  border-radius: 24px;
  padding: 16px 12px 14px;
  width: clamp(94px, 27vw, 150px);
  min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--sombra-suave);
  transition: transform .1s ease;
}
.opcion-imagen:active { transform: scale(.95); }
.opcion-imagen .ilus { width: clamp(70px, 20vw, 104px); height: auto; display: block; }
.opcion-imagen .ilus svg { width: 100%; height: auto; display: block; }
.opcion-imagen .palabra { font-size: clamp(15px, 4.2vw, 18px); font-weight: 700; color: #3A4A5A; text-align: center; }
.opcion-imagen.correcta { background: #EAF7DD; box-shadow: 0 0 0 5px #B6E38A, var(--sombra); animation: correctaPop .6s ease; }
.opcion-imagen.revelada { background: #FFF3D6; box-shadow: 0 0 0 5px var(--amarillo), var(--sombra); animation: correctaPop .6s ease; }
.opcion-imagen.pista { animation: pistaGlow 1s ease-in-out infinite; }
.opcion-imagen.tocada-mal { animation: suaveShake .4s ease; }
.opcion-imagen.marcado { background: #EAF7DD; box-shadow: 0 0 0 5px #B6E38A, var(--sombra); opacity: .6; }
.opcion-imagen.correcta::after, .opcion-imagen.marcado::after {
  content: "✓";
  position: absolute; top: -10px; right: -10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #4f8a1a; color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
  animation: correctaPop .5s ease;
}

/* ================================================================
   JUEGOS DE PENSAR
   ================================================================ */

/* Memoria: tarjeta que se "voltea" (cambio simple de contenido con
   un pequeño pop, sin transformación 3D — más seguro en móvil). */
.carta-memoria {
  width: clamp(64px, 20vw, 96px);
  height: clamp(64px, 20vw, 96px);
  border-radius: 18px;
  border: none;
  background: var(--azul);
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  transition: transform .1s ease;
}
.carta-memoria:active { transform: scale(.95); }
.carta-memoria .reverso { font-size: clamp(22px, 7vw, 34px); color: #fff; }
.carta-memoria.volteada { background: #fff; animation: correctaPop .35s ease; }
.carta-memoria.volteada svg { width: 100%; height: 100%; display: block; }
.carta-memoria.emparejada { background: #EAF7DD; box-shadow: 0 0 0 4px #B6E38A, var(--sombra); }
.carta-memoria.tocada-mal { animation: suaveShake .4s ease; }

/* Fila de casillas pequeñas no interactivas (usada por "¿Cuál
   pertenece?" para mostrar el contexto de una categoría). */
.fila-escena {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 6px 0;
}
.slot-escena {
  width: clamp(48px, 14vw, 68px);
  height: clamp(48px, 14vw, 68px);
  border-radius: 14px;
  border: none;
  background: #fff;
  box-shadow: var(--sombra-suave);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  position: relative;
  transition: transform .1s ease;
}
.slot-escena:active { transform: scale(.94); }
.slot-escena svg { width: 100%; height: 100%; display: block; }
.slot-escena.encontrada { box-shadow: 0 0 0 4px #B6E38A, var(--sombra); }
.slot-escena.encontrada::after {
  content: "✓";
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #4f8a1a; color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  animation: correctaPop .5s ease;
}
.slot-escena.tocada-mal { animation: suaveShake .4s ease; }

/* "¿Cuál falta?" (2-3 años): imágenes grandes, pocas (2-3), fila
   simple. Reutiliza el mismo lenguaje visual de .slot-escena pero
   más grande, ya que aquí solo hay 2-3 elementos, no 6. El hueco
   (.vacio) marca dónde estaba el objeto que ahora falta. */
.fila-mira {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 16px; margin: 14px 0;
}
.slot-mira {
  width: clamp(90px, 26vw, 130px);
  height: clamp(90px, 26vw, 130px);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.slot-mira svg { width: 100%; height: 100%; display: block; }
.slot-mira.vacio { background: transparent; border: 4px dashed var(--azul); box-shadow: none; opacity: .55; }

/* Memoria: tablero compacto (nunca enorme), centrado. */
.grid-memoria {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; max-width: 440px; margin: 10px auto;
}

/* "Pienso y resuelvo": fila premisa → respuesta (ejemplo, más chica
   y sin interacción; pregunta, con "?" donde va la respuesta). */
.fila-relacion {
  display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px auto;
}
.fila-relacion.ejemplo { opacity: .72; transform: scale(.8); margin-bottom: -4px; }
.fila-relacion .flecha-relacion { font-size: clamp(22px, 6vw, 32px); color: var(--azul); font-weight: 700; }
.fila-relacion .slot-mira.placeholder { display: flex; align-items: center; justify-content: center; }
.fila-relacion .slot-mira.placeholder span { font-size: clamp(36px, 10vw, 56px); font-weight: 800; color: var(--azul); }

/* "Encuentra las diferencias": dos escenas ILUSTRADAS completas lado
   a lado (cada panel muestra una única composición SVG de
   banco-escenas.js como fondo, con botones invisibles superpuestos
   sobre los elementos que pueden ser diferencia), el niño toca
   directamente el objeto que cambió en cualquiera de las dos.
   `margin:auto 0` (igual que .opciones-vocales en el resto de
   Rutik) reparte el espacio sobrante arriba/abajo en vez de dejarlo
   todo debajo, para que las escenas dominen la pantalla igual que
   en las demás actividades. `aspect-ratio:4/3.2` coincide EXACTO
   con el viewBox de las escenas (400×320) para que no se deformen. */
.escenas-difs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  width: 100%;
  margin: auto 0 10px;
}
/* En esta pantalla las escenas, las estrellas y el contador quedan
   pegados al fondo, justo donde el fondo dibuja las colinas y los
   árboles. Se deja libre abajo ese espacio (≈70% de la altura del
   paisaje, ver .fondo-ruta::after) para que todo quede por encima. */
#screen-juego-encuentra-diferencias {
  padding-bottom: calc(clamp(150px, 26vh, 280px) * 0.7);
}
.escena-panel {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}
.escena-panel > svg { display: block; width: 100%; height: 100%; }
/* Cada elemento interactivo es un rectángulo FIJO (definido a mano
   en banco-escenas.js junto con el dibujo, no medido ni % relativo
   a un contenedor "auto") — el botón es el hitbox (invisible, más
   grande, fácil de tocar) y .df2-marca es un rectángulo MÁS CHICO
   dentro de él, ajustado al objeto real dibujado en el fondo. Así
   el marcador nunca depende del tamaño del botón. */
.df2-elemento { position: absolute; background: none; border: none; padding: 0; margin: 0; cursor: pointer; }
.df2-marca { position: absolute; border-radius: 999px; pointer-events: none; }
.df2-elemento.encontrada .df2-marca {
  box-shadow: 0 0 0 3px #4f8a1a, 0 0 0 7px rgba(79,138,26,.28);
  animation: correctaPop .5s ease;
}
.df2-elemento.tocada-mal .df2-marca { animation: suaveShake .4s ease; }

.estrellas-progreso { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; }
.estrellas-progreso .estrella-p { font-size: clamp(22px, 6vw, 30px); line-height: 1; color: #cbd5e0; transition: color .2s ease, transform .2s ease; }
.estrellas-progreso .estrella-p.llena { color: var(--amarillo); transform: scale(1.15); }
.estrellas-progreso--compacta .estrella-p { font-size: clamp(15px, 4vw, 19px); }
.df2-contador { text-align: center; font-size: 13px; color: #6b7a8a; margin: 2px 0 0; }

/* ================================================================
   LLEVA LA VOCAL (arrastrar)
   ================================================================ */
.lleva-stage { position: relative; width: 100%; min-height: clamp(330px, 52vh, 470px); margin: auto 0; }
.lleva-targets { display: flex; justify-content: center; gap: clamp(10px, 3vw, 20px); flex-wrap: wrap; }
.lleva-target {
  background: #fff; border-radius: 22px; padding: 12px 10px;
  width: clamp(90px, 26vw, 140px); min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--sombra-suave);
}
.lleva-target .ilus { width: clamp(64px, 18vw, 94px); height: auto; }
.lleva-target .ilus svg { width: 100%; height: auto; display: block; }
.lleva-target .palabra { font-size: clamp(13px, 3.6vw, 16px); font-weight: 700; color: #3A4A5A; text-align: center; }
.lleva-target.pista { animation: pistaGlow 1s ease-in-out infinite; }
.lleva-target.correcta { background: #EAF7DD; box-shadow: 0 0 0 5px #B6E38A, var(--sombra); }

.lleva-chip {
  position: absolute; left: 0; top: 0;
  width: 84px; height: 84px;
  border-radius: 24px;
  background: var(--amarillo); color: #7a5200;
  font-size: 52px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  touch-action: none; cursor: grab; user-select: none;
  z-index: 5;
}
.lleva-chip.arrastrando { cursor: grabbing; box-shadow: 0 14px 26px rgba(0,0,0,.28); transform: scale(1.05); }
.lleva-chip.volviendo { transition: left .3s ease, top .3s ease; }

/* ================================================================
   FORMO LA PALABRA (arrastrar sílabas hasta los espacios)
   ================================================================ */
.fp-imagen { width: clamp(120px, 34vw, 190px); margin: 4px auto; }
.fp-imagen svg { width: 100%; height: auto; display: block; }
.fp-imagen img { width: 100%; height: auto; display: block; }

/* Descubro palabras (2-3 años): imagen grande tocable para exploración */
.dp-fase-explorar { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 6px 0; }
.dp-hero {
  width: clamp(180px, 50vw, 260px);
  aspect-ratio: 1 / 1;
  border: none;
  background: #fff;
  border-radius: 32px;
  box-shadow: var(--sombra);
  padding: 14px;
  cursor: pointer;
  transition: transform .15s ease;
  touch-action: manipulation;
}
.dp-hero:active { transform: scale(.94); }
.dp-hero svg { width: 100%; height: 100%; display: block; }

.fp-slots { display: flex; justify-content: center; gap: clamp(10px, 3vw, 18px); margin: 8px 0; flex-wrap: wrap; }
.fp-slot {
  width: clamp(72px, 22vw, 104px); height: clamp(72px, 22vw, 104px);
  border-radius: 22px;
  border: 3px dashed #C2D3E2;
  background: #F4F8FC;
  display: flex; align-items: center; justify-content: center;
}
.fp-slot.ocupado { border-style: solid; border-color: var(--azul); background: #E3F0FF; }
.fp-slot.correcta { border-color: #7CC63E; background: #EAF7DD; box-shadow: 0 0 0 5px #B6E38A; animation: correctaPop .6s ease; }
.fp-slot.pista { border-color: var(--amarillo); animation: pistaGlow 1s ease-in-out infinite; }

.fp-fichas {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(10px, 3vw, 16px);
  flex-wrap: wrap;
  margin: 14px 0 10px;
  min-height: clamp(72px, 22vw, 104px);
}
.fp-ficha {
  width: clamp(64px, 19vw, 92px); height: clamp(64px, 19vw, 92px);
  border-radius: 20px;
  background: #fff;
  color: var(--azul);
  font-family: inherit;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-suave);
  touch-action: none; cursor: grab; user-select: none;
}
.fp-slot .fp-ficha { box-shadow: none; cursor: grab; }
.fp-ficha.arrastrando { cursor: grabbing; box-shadow: 0 14px 26px rgba(0,0,0,.28); transform: scale(1.08); }
.fp-ficha.volviendo { transition: left .26s ease, top .26s ease; }
.fp-ficha.seleccionada { box-shadow: 0 0 0 5px var(--azul), var(--sombra); transform: scale(1.06); }
.fp-ficha.pista { animation: pistaGlow 1s ease-in-out infinite; }
.fp-ficha.tocada-mal { animation: suaveShake .4s ease; }
.fp-slot { cursor: pointer; }

.fp-comprobar:disabled { opacity: .4; box-shadow: none; }

/* ================================================================
   TRAZO DE LETRAS (recorrer una letra con el dedo/mouse)
   ================================================================ */
.tz-lienzo {
  width: clamp(220px, 68vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 6px auto;
  touch-action: none;
}
.tz-lienzo svg { width: 100%; height: 100%; display: block; touch-action: none; }

/* Camino punteado de TODA la letra (siempre visible, guía nada más) */
.tz-guia { fill: none; stroke: #C2D3E2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 7; }
.tz-guia.solida { stroke-dasharray: none; }
.tz-guia.tenue { stroke: #E4ECF4; }

/* Trazos ya completados (verde sólido y fijo) + el trazo activo (se va rellenando) */
.tz-completado { fill: none; stroke: var(--verde); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tz-progreso-path { fill: none; stroke: var(--verde); stroke-linecap: round; stroke-linejoin: round; }
.tz-lienzo.completa .tz-completado,
.tz-lienzo.completa .tz-progreso-path { animation: tzBrillo 1s ease-in-out; }

/* Punto de inicio del trazo ACTIVO: grande, verde, pulsa suave, con su
   número dentro (así SIEMPRE se ve claro que se empieza en el paso 1) */
.tz-inicio {
  fill: var(--verde); stroke: #fff; stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: tzPulso 1.6s ease-in-out infinite;
}
.tz-inicio.oculto { opacity: 0; }
.tz-inicio.destacar { animation: tzPulso .5s ease-in-out 3; }
#tz-inicio-numero { font-size: 8px; pointer-events: none; }

/* Flechas de dirección: varias, pequeñas, integradas en el propio
   camino (no una sola flecha grande flotando encima de la letra) */
.tz-flecha { fill: var(--azul); opacity: .85; transform-box: fill-box; transform-origin: center; }
.tz-flecha.destacar { animation: tzFlechaFlash .6s ease-in-out 2; }

/* Numeritos de paso (1, 2, 3...) sobre el inicio de cada trazo */
.tz-paso-circulo { fill: #fff; stroke: #C2D3E2; stroke-width: 2; }
.tz-paso-circulo.hecho { fill: var(--verde); stroke: var(--verde); }
.tz-paso-circulo.activo { fill: var(--verde); stroke: #fff; }
.tz-paso-texto { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 9px; fill: #3A4A5A; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tz-paso-texto.claro { fill: #fff; }

/* Punto de demostración (recorre brevemente el trazo cuando el niño no avanza) */
.tz-demo { fill: var(--amarillo); stroke: #fff; stroke-width: 2; }

@keyframes tzPulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
@keyframes tzFlechaFlash { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes tzBrillo { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px var(--verde)); } }

/* ================================================================
   BOTÓN DE AUDIO 🔊  (componente reutilizable para las actividades)
   Grande, redondo y reconocible. Se coloca en posición consistente
   dentro de cada actividad. Aún no se usa en las pantallas aprobadas.
   ================================================================ */
.audio-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--amarillo);
  color: #7a5200;
  font-size: 30px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  border: none;
}
.audio-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.audio-btn.is-playing { animation: audioPulse .8s ease-in-out infinite; }
@keyframes audioPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Contenedor + texto "Escuchar otra vez" bajo el botón circular 🔊 de
   REPETIR (ver etiquetarBotonesDeAudio() en audio.js — se agrega solo
   ahí, nunca a .audio-btn--mini). El círculo amarillo y el ícono no
   cambian: solo se agrega esto debajo, centrado y con separación chica. */
.audio-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.audio-btn-label {
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 600;
  color: var(--texto);
  text-align: center;
  line-height: 1.2;
  max-width: 74px; /* que el texto envuelva bajo el círculo, no se estire ancho */
}

/* ================================================================
   GLOBO DE MENSAJE (toast) para pantallas de demostración
   ================================================================ */
.toast {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translateX(-50%) translateY(30px);
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
  text-align: center;
  max-width: 90vw;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================================================================
   MIS EMOCIONES · imágenes reales de Ruki (RukiEmotion())
   object-fit:contain evita deformación y recortes; nunca se estira.
   ================================================================ */
.ruki-emocion {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Ruki + nombre de la emoción debajo (solo ¿Cómo me siento hoy?, vía
   RukiEmotion(clave, {etiqueta:true}) — el resto de actividades sigue
   mostrando la imagen sola, sin texto, sin pasar esta opción). */
.ruki-emocion-conjunto { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ruki-emocion-nombre {
  font-family: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4.6vw, 20px);
  color: var(--azul-oscuro);
  text-align: center;
  line-height: 1.1;
}

/* Opción de respuesta con foto de Ruki (Caras y emociones / ¿Cómo me
   siento hoy?): más grande que .opcion-imagen normal (de por sí pensada
   para íconos pequeños) para que las caras se distingan con claridad. */
.opcion-imagen.opcion-imagen--emocion { width: clamp(112px, 32vw, 172px); min-height: 172px; }
.opcion-imagen--emocion .ruki-emocion { width: clamp(92px, 26vw, 142px); max-width: 100%; margin: 0; }

/* ¿Cómo me siento hoy? · Paso 1 — tarjetas un poco más altas para que
   el nombre quepa cómodo debajo de Ruki sin achicar la imagen. */
.opcion-imagen.opcion-imagen--con-nombre { min-height: 214px; padding-bottom: 16px; }
.opcion-imagen--con-nombre .ruki-emocion { width: clamp(92px, 26vw, 142px); max-width: 100%; margin: 0; }

/* ¿Cómo me siento hoy? — respuesta cálida tras elegir, sin acierto/error */
.sh-respuesta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: auto 0; text-align: center; }
.sh-respuesta[hidden] { display: none; }
.sh-respuesta-img { width: clamp(140px, 40vw, 220px); height: auto; object-fit: contain; }
.sh-respuesta-texto { font-size: clamp(20px, 5.5vw, 26px); color: var(--azul-oscuro); font-weight: 600; max-width: 90vw; }

/* ================================================================
   ENCUENTRA LA EMOCIÓN · reacción de acierto reforzada (sin quedarse
   en un simple check verde): la tarjeta se eleva y crece levemente.
   ================================================================ */
.opcion-imagen.ee-acertada { transform: translateY(-10px) scale(1.06); transition: transform .35s ease; }
.opcion-imagen.ee-acertada .ruki-emocion { animation: none; }

/* Paso 1 de ¿Cómo me siento hoy?: resaltado suave al elegir, SIN
   check de "correcto" (a propósito distinto de .correcta/.marcado,
   que sí muestran el ✓). Aquí no existe una respuesta correcta. */
.opcion-imagen.opcion-imagen--elegida {
  background: #F3E9FF;
  box-shadow: 0 0 0 5px #C9A2F0, var(--sombra);
  transform: scale(1.05);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* ================================================================
   EL ESPEJO DE RUKI / ¿CÓMO ME SIENTO HOY? (paso 3) — foto grande
   para observar e imitar, cuenta regresiva y revelado del nombre.
   ================================================================ */
.espejo-imagen { width: clamp(220px, 62vw, 340px); margin: 10px auto; }
.espejo-imagen .ruki-emocion { width: 100%; max-width: 100%; }

.espejo-cuenta {
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 700;
  color: var(--morado);
  text-align: center;
  margin: 4px 0;
}
@keyframes cuentaPop {
  0%   { opacity: 0; transform: scale(.6); }
  40%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.espejo-cuenta.cuenta-pop { animation: cuentaPop .35s ease; }

.espejo-nombre {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 600;
  color: var(--azul-oscuro);
  text-align: center;
  margin: 6px 0;
}

.espejo-boton { margin: 10px auto 0; max-width: 320px; }

/* ================================================================
   ¿CÓMO ME SIENTO HOY? — pasos (fases) y selector de intensidad
   ================================================================ */
.sh-fase { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; width: 100%; margin: auto 0; }
.sh-fase[hidden] { display: none; }

.sh-intensidad-opciones {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(16px, 6vw, 34px);
  margin: 10px 0;
}
.sh-intensidad-opcion {
  background: #fff; border: none; border-radius: 20px;
  padding: 14px 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--sombra-suave);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sh-intensidad-opcion:active { transform: scale(.95); }
.sh-intensidad-circulo { display: block; border-radius: 50%; background: var(--morado); }
.sh-intensidad-texto { font-size: clamp(14px, 4vw, 17px); font-weight: 700; color: #3A4A5A; }
.sh-intensidad-opcion.sh-intensidad-opcion--elegida {
  background: #F3E9FF;
  box-shadow: 0 0 0 5px #C9A2F0, var(--sombra);
}

/* ================================================================
   ¿CÓMO SE SIENTE RUKI? — escenas de situación (Ruki + un objeto de
   apoyo, SIEMPRE alineados por flexbox a la misma línea inferior:
   por construcción nunca quedan flotando ni mal proporcionados,
   sin coordenadas absolutas que puedan desalinearse).
   ================================================================ */
.situacion-escena {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(14px, 5vw, 30px);
  background: #F3E9FF;
  border-radius: 28px;
  padding: clamp(20px, 6vw, 36px) clamp(16px, 5vw, 28px);
  box-shadow: var(--sombra-suave);
  width: 100%;
  max-width: 420px;
  min-height: clamp(160px, 40vw, 220px);
  margin: 10px auto;
}
.situacion-ruki { width: clamp(100px, 30vw, 150px); height: auto; display: block; }
.situacion-objeto--icono { width: clamp(70px, 22vw, 110px); display: block; }
.situacion-objeto--icono svg { width: 100%; height: auto; display: block; }
.situacion-objeto--emoji { font-size: clamp(50px, 16vw, 84px); line-height: 1; }

/* ================================================================
   ¿POR QUÉ SE SIENTE ASÍ? — MINI-ESCENAS (banco independiente de las
   situaciones de "¿Qué pasó con Ruki?"): cada opción es Ruki + 1-2
   elementos elegidos para leerse como un ACONTECIMIENTO (ej. columpio
   vacío = un amigo que se fue), nunca un objeto suelto sin motivo.
   Tarjetas GRANDES a propósito — nada de Ruki diminuta.
   ================================================================ */
/* ¿Qué pasó con Ruki? — foto real antes/después (misma imagen, se
   cambia el src): tarjeta grande, sin recortes ni deformación. Las
   18 imágenes comparten exactamente la misma proporción 4:3. */
.qp-foto-marco {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  margin: 6px auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  background: #EAF4FF;
}
.qp-foto { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Texto escrito de la retroalimentación (además del audio) — para
   que el nombre de la emoción también se vea, no solo se escuche. */
.qp-feedback {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  color: var(--azul-oscuro);
  text-align: center;
  background: #EAF7DD;
  border-radius: 18px;
  padding: 10px 18px;
  margin: 8px auto 0;
  max-width: 92%;
}
.qp-feedback[hidden] { display: none; }

/* ================================================================
   ¿QUÉ PUEDE HACER RUKI? — tarjetas de acciones (ilustración +
   nombre + botón 🔊 propio). El botón de audio reutiliza .audio-btn
   ya existente, solo más pequeño y superpuesto a una esquina.
   ================================================================ */
.opciones-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(16px, 4.5vw, 28px); margin: auto 0; }
.opcion-accion { position: relative; }
.opcion-accion-tarjeta {
  width: clamp(120px, 34vw, 172px);
  min-height: 150px;
  padding-top: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.opcion-accion-img { width: clamp(78px, 22vw, 116px); height: auto; display: block; }
.opcion-accion-nombre { font-size: clamp(14px, 3.8vw, 17px); font-weight: 700; color: #3A4A5A; text-align: center; }
.audio-btn.audio-btn--mini {
  position: absolute; top: -10px; right: -10px;
  width: 38px; height: 38px;
  font-size: 17px;
  z-index: 2;
}
/* El check verde de acierto (.opcion-imagen.correcta::after, ya
   definido arriba) usa la MISMA esquina superior derecha que el
   audio-btn--mini de esta tarjeta — se mueve a la izquierda solo
   aquí para que no se encimen. */
.opcion-accion-tarjeta.correcta::after { left: -8px; right: auto; }

/* Espaciado propio de esta pantalla: separación clara entre la
   imagen de la situación, la pregunta y las tarjetas — el check/🔊
   de las tarjetas no debe quedar pegado al título. Ajuste puntual,
   no toca .juego-pregunta/.opciones-imagenes de otras pantallas. */
#screen-juego-que-puede-hacer-ruki #qh-pregunta { margin: 10px 0 18px; }
#screen-juego-que-puede-hacer-ruki .opciones-acciones { margin-top: 18px; }

/* Señal visual sutil de "Rutik está hablando" mientras dura el
   feedback de una estrategia acertada — reutiliza la animación
   audioPulse ya existente (.audio-btn.is-playing), sin CSS/JS nuevo
   de animación ni librerías. */
.qp-feedback.qp-feedback--hablando { animation: audioPulse 1.1s ease-in-out infinite; }

/* MIS AMIGOS — reutiliza .opcion-accion-tarjeta (arriba) para sus
   tarjetas de frase, pero aquí no hay imagen: un emoji grande hace
   de apoyo visual (para no depender de la lectura a los 2-3 años). */
.opcion-frase-emoji { font-size: clamp(38px, 11vw, 56px); line-height: 1; display: block; }

/* MIS AMIGOS — refuerzo "esperar_turno": aparece COMO CONTINUACIÓN
   del feedback de la misma ronda (misma familia de fondo verde que
   .qp-feedback, para sentirse "pegado" a él, no una pantalla aparte).
   La imagen es bastante más chica que .qp-foto-marco a propósito. */
.am-refuerzo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px auto 0; padding: 8px 14px 14px; max-width: 92%; background: #EAF7DD; border-radius: 18px; }
.am-refuerzo[hidden] { display: none; }
.am-refuerzo-img { width: 100%; max-width: 190px; aspect-ratio: 4 / 3; object-fit: contain; display: block; border-radius: 14px; background: #EAF4FF; }
.am-refuerzo-texto { font-size: clamp(15px, 4vw, 18px); font-weight: 600; color: var(--azul-oscuro); text-align: center; margin: 0; }

.mini-escena { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 20px); }
.mini-escena-ruki { width: clamp(70px, 22vw, 100px); height: auto; display: block; }
.mini-escena-elemento--icono { width: clamp(50px, 16vw, 72px); display: block; }
.mini-escena-elemento--icono svg { width: 100%; height: auto; display: block; }
.mini-escena-elemento--emoji { font-size: clamp(38px, 12vw, 56px); line-height: 1; }

.opciones-mini-escenas { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(14px, 4vw, 26px); margin: auto 0; }
.opcion-mini-escena { width: clamp(150px, 42vw, 230px); min-height: 190px; padding: 14px 10px; }
.opcion-mini-escena .mini-escena { background: transparent; box-shadow: none; padding: 4px; gap: clamp(8px, 3vw, 16px); }
.opcion-mini-escena .mini-escena-ruki { width: clamp(64px, 20vw, 92px); }
.opcion-mini-escena .mini-escena-elemento--icono { width: clamp(46px, 14vw, 66px); }
.opcion-mini-escena .mini-escena-elemento--emoji { font-size: clamp(34px, 10vw, 50px); }

/* ================================================================
   RESPONSIVE · pantallas grandes (computador)
   ================================================================ */
@media (min-width: 720px) {
  .section-grid { grid-template-columns: repeat(3, 1fr); }
  .section-grid .category:last-child:nth-child(odd) { grid-column: auto; }
}

/* Menús con pocas tarjetas visibles a los 2-3 años (Palabras,
   Números — el resto usa [hidden], arriba). Se fuerza a 2 columnas en
   cualquier ancho de pantalla para que no quede una tercera columna
   vacía ni el menú se vea incompleto. Clase genérica: cualquier grid
   de menú puede usarla, no solo Palabras. */
.section-grid.menu-reducido {
  grid-template-columns: repeat(2, 1fr);
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .section-grid.menu-reducido { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
}

/* ================================================================
   FONDO DE ESCENA · cielo, nubes, colinas, árboles y camino
   ----------------------------------------------------------------
   Reemplaza al fondo de círculos/puntitos de la prueba anterior.
   Se usa con las MISMAS clases de siempre (.fondo-ruta en el HTML,
   no se tocó ninguna pantalla): todo se dibuja solo con CSS, sin
   archivos de imagen ni peticiones de red nuevas (los dibujos van
   incrustados, igual que ya hace "Colores y formas").
   - Las nubes van arriba, en los bordes; las colinas, los árboles y
     el camino abajo. La zona central queda limpia.
   - Todo está DETRÁS del contenido (z-index:-1 dentro de su propio
     contexto de apilamiento) y no capta clics (pointer-events:none).
   - Va AL FINAL de este archivo a propósito: pantallas como
     .screen--juego traen su propio "background" con la misma
     especificidad, y en CSS gana la regla que aparece después.
   ================================================================ */
.fondo-ruta {
  --nube:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70'%3E%3Cg fill='%23ffffff' opacity='0.95'%3E%3Ccircle cx='40' cy='42' r='24'/%3E%3Ccircle cx='76' cy='30' r='30'/%3E%3Ccircle cx='112' cy='42' r='24'/%3E%3Crect x='16' y='40' width='120' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E");
  --arbol-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'%3E%3Crect x='35' y='62' width='10' height='46' rx='4' fill='%23a4713b'/%3E%3Ccircle cx='40' cy='40' r='30' fill='%236db83a'/%3E%3Ccircle cx='24' cy='52' r='20' fill='%237cc63e'/%3E%3Ccircle cx='56' cy='50' r='22' fill='%2386cc4c'/%3E%3Ccircle cx='36' cy='30' r='12' fill='%239bd860' opacity='0.7'/%3E%3C/svg%3E");
  --arbol-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'%3E%3Crect x='35' y='64' width='10' height='44' rx='4' fill='%239a6a38'/%3E%3Ccircle cx='40' cy='42' r='28' fill='%237cc63e'/%3E%3Ccircle cx='56' cy='54' r='20' fill='%238fd155'/%3E%3Ccircle cx='25' cy='54' r='19' fill='%236db83a'/%3E%3Ccircle cx='44' cy='32' r='11' fill='%23a4de68' opacity='0.7'/%3E%3C/svg%3E");
  --colinas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b8e68c'/%3E%3Cstop offset='1' stop-color='%239bd768'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2390d15c'/%3E%3Cstop offset='1' stop-color='%2376c040'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237ac545'/%3E%3Cstop offset='1' stop-color='%2362ae33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 110 C100 60 210 85 320 105 C430 125 540 60 640 90 V240 H0 Z'/%3E%3Cpath fill='url(%23b)' d='M0 165 C110 115 230 145 340 160 C450 175 550 120 640 145 V240 H0 Z'/%3E%3Cpath fill='%23f2e0ae' d='M262 240 C292 212 372 204 448 176 C500 156 546 146 590 138 C552 154 522 168 480 186 C424 212 396 226 388 240 Z'/%3E%3Cpath fill='url(%23c)' d='M0 215 C130 188 250 206 370 214 C490 222 580 196 640 205 V240 H0 Z'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='180' cy='204' r='5'/%3E%3Ccircle cx='232' cy='222' r='4'/%3E%3Ccircle cx='520' cy='214' r='5'/%3E%3Ccircle cx='86' cy='196' r='4'/%3E%3C/g%3E%3Cg fill='%23ffc02e'%3E%3Ccircle cx='180' cy='204' r='2'/%3E%3Ccircle cx='232' cy='222' r='1.6'/%3E%3Ccircle cx='520' cy='214' r='2'/%3E%3Ccircle cx='86' cy='196' r='1.6'/%3E%3C/g%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  overflow: hidden;      /* el paisaje no genera scroll ni se sale */
  background-color: #E4F4FF;
  background-image: linear-gradient(180deg, #C6E6FF 0%, #DAEEFF 30%, #E8F6FF 68%, #E8F6FF 100%);
}
.fondo-ruta::before,
.fondo-ruta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;   /* nunca capturan clics/touch */
  background-repeat: no-repeat;
}
/* Nubes (arriba, en los bordes) */
.fondo-ruta::before {
  top: 0;
  height: 220px;
  background-image: var(--nube), var(--nube), var(--nube);
  background-size: 150px auto, 120px auto, 80px auto;
  background-position: left -30px top 78px, right -16px top 14px, right 6px top 196px;
}
/* Colinas, camino y árboles (abajo) */
.fondo-ruta::after {
  bottom: 0;
  height: clamp(150px, 26vh, 280px);
  background-image: var(--arbol-1), var(--arbol-2), var(--colinas);
  background-size: 74px auto, 60px auto, 100% 62%;
  background-position: left 8% bottom 30%, right 9% bottom 28%, center bottom;
}
/* Pantallas de poca altura (celulares bajitos y laptops de 768 px):
   paisaje más chico para que el contenido de los juegos no toque
   las colinas. */
@media (max-height: 800px) {
  .fondo-ruta::after { height: 130px; }
}

/* ================================================================
   CUENTA DE LOS PADRES (ingreso, crear contraseña, sin acceso,
   quién juega). Reutiliza .card, .btn y .text-input de arriba.
   ================================================================ */
.text-input--cuenta { margin-bottom: 12px; font-size: 19px; }
.cuenta-form { display: flex; flex-direction: column; width: 100%; margin: 6px 0 0; }
.cuenta-form .btn { margin-top: 6px; }

.cuenta-mensaje {
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #FDECEA;
  color: #A33A2E;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.cuenta-mensaje--ok { background: #E6F6EA; color: #2E7A43; }
.cuenta-mensaje[hidden] { display: none; }

.cuenta-link {
  display: block;
  margin: 14px auto 0;
  padding: 8px 12px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-oscuro);
  text-decoration: underline;
  cursor: pointer;
}
.cuenta-ayuda { font-size: 15px; color: var(--texto); margin: 10px 0 0; line-height: 1.4; text-align: center; }
.cuenta-subtitulo { font-size: 17px; color: var(--azul-oscuro); margin: 16px 0 6px; text-align: center; }
.cuenta-dato { font-size: 16px; font-weight: 700; color: var(--texto); margin: 4px 0 0; word-break: break-all; }
.cuenta-lista { list-style: none; margin: 0 0 12px; padding: 0; text-align: center; color: var(--texto); font-weight: 600; }
.cuenta-lista li { padding: 4px 0; }

.ninos-lista { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 8px 0 14px; }
.ninos-lista:empty { margin: 0; }
.screen--profile .card > .btn + .btn { margin-top: 12px; }

a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
a.btn[hidden] { display: none; }
.parents-card[hidden] { display: none; }
#padres-cuenta .btn { margin-top: 10px; }