/* =====================================================================
   ISLAS EMOCIONALES: estilos de las islas, sus pantallas y sus minijuegos.
   Los colores generales vienen de tokens.css; los colores PROPIOS de cada
   isla (sus paletas) se definen SOLO aquí, para la apariencia clara y la
   nocturna. Todas las animaciones son suaves y se apagan con "reducir
   movimiento".

   ¿PARA QUÉ SIRVE ESTE ARCHIVO?
   Tiene lo propio de las islas: las cinco paletas, el dibujo de cada isla,
   la pantalla «¿Cómo quieres pasar este momento?», el selector de islas,
   el mapa, el selector de juegos y niveles, la página que aloja los
   minijuegos y la tarjeta destacada del espacio de calma. Lo común
   (botones, tarjetas, insignias, Nubbit) está en componentes.css y
   actividades.css, que aquí NO se modifican.

   ¿QUÉ PÁGINAS LO USAN?
   isla.html, isla-juegos.html, islas.html, juego.html y espacio-calma.html.
   Se carga el ÚLTIMO, después de tokens.css, base.css, componentes.css y
   (en espacio-calma.html) actividades.css.

   CÓMO SE USA UNA PALETA
   El elemento lleva la clase paleta-<id> (por ejemplo paleta-volcan; el id
   sale de "paleta" en contenido/islas.json). Esa clase define variables
   --isla-...; todo lo que está adentro las lee con var(). Los minijuegos
   también las leen desde JavaScript (getComputedStyle) para pintar el canvas.
   Lo que se toca sigue siendo violeta (botones de componentes.css): los
   colores de las islas solo decoran (ver docs/identidad-visual.md).

   ÍNDICE DE SECCIONES
   1. Paletas de las islas (apariencia clara).
   2. Paletas nocturnas automáticas (prefers-color-scheme: dark).
   3. Paletas nocturnas elegidas en Ajustes (data-apariencia="nocturna").
   4. Dibujo de la isla (SVG hecho con código en js/islas-comun.js).
   5. Pantalla de la isla (isla.html): escena y opciones del momento.
   6. Selector de islas y mapa (isla.html e islas.html).
   7. Selector de juegos y niveles (isla-juegos.html).
   8. Página del minijuego (juego.html): barra, área y cierre.
   9. Piezas de los minijuegos (las crean los módulos de js/juegos/).
   9 b. El camino de niveles de cada isla (isla-juegos.html).
   10. Espacio de calma (espacio-calma.html).
   10 b. Ambiente: fondo animado de las páginas, marco del juego, cierre y camino.
   11. Reducir movimiento (accesibilidad).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Paletas de las islas (apariencia clara)
   --------------------------------------------------------------------- */
/* Cada paleta define las mismas variables:
     --isla-cielo   fondo de arriba del dibujo
     --isla-mar     agua alrededor de la isla
     --isla-tierra  la isla
     --isla-forma   montaña, árboles, muros o escalones
     --isla-acento  lava, lago, luz del farol, senderos o sol
     --isla-luz     brillos y destellos
     --isla-niebla  vapor, nubes y niebla
     --isla-fondo   fondo de las tarjetas de la isla
     --isla-borde   borde de esas tarjetas
     --isla-texto   texto de color sobre --isla-fondo (contraste de 4.5:1 o más)
   Ningún color es agresivo: incluso el volcán usa rojos y naranjas suaves. */
.paleta-volcan {
  --isla-cielo: #fde9df;   /* durazno muy claro */
  --isla-mar: #f3c7b5;     /* coral pálido */
  --isla-tierra: #d9a38a;  /* arcilla suave */
  --isla-forma: #c9775c;   /* terracota suave */
  --isla-acento: #e88a5c;  /* lava naranja suave */
  --isla-luz: #ffd1a8;     /* brillo cálido */
  --isla-niebla: #fff6f0;  /* vapor casi blanco */
  --isla-fondo: #fff3ec;   /* tarjeta crema rosada */
  --isla-borde: #f0c7b4;   /* borde coral claro */
  --isla-texto: #9a3f22;   /* óxido oscuro (6.4:1 sobre el fondo) */
  --volcan-palma: #7fae6b; /* hojas de las palmeras del fondo (Géiser y Enfriar la Lava) */
} /* fin de la paleta del Volcán */

.paleta-lago {
  --isla-cielo: #e4ecf3;   /* gris azulado claro */
  --isla-mar: #a9c3d9;     /* azul lluvia */
  --isla-tierra: #b7c4cf;  /* gris piedra */
  --isla-forma: #8fa3b5;   /* colinas gris azul */
  --isla-acento: #5f8fb8;  /* lago azul */
  --isla-luz: #f3f6f9;     /* reflejo claro */
  --isla-niebla: #ffffff;  /* nubes blancas */
  --isla-fondo: #eef3f8;   /* tarjeta azul muy pálida */
  --isla-borde: #c8d6e3;   /* borde azul gris */
  --isla-texto: #2f5878;   /* azul profundo (7:1) */
  --lago-alga: #7fb3a0;    /* algas del fondo del lago (Salto de los Recuerdos) */
  --lago-pez: #f2b880;     /* pececitos (durazno suave) */
  --lago-hoja: #8fbf9a;    /* hojas de nenúfar y juncos (Gotas al Lago) */
  --lago-flor: #f5b8c8;    /* florecitas y flor de nenúfar (rosa suave) */
} /* fin de la paleta del Lago de lluvia */

.paleta-bosque {
  --isla-cielo: #e3eee2;   /* verde muy pálido */
  --isla-mar: #b8d1bc;     /* verde agua */
  --isla-tierra: #6f9474;  /* musgo */
  --isla-forma: #3f6b4a;   /* pino oscuro */
  --isla-acento: #f2c94c;  /* luz amarilla del farol */
  --isla-luz: #ffe79a;     /* halo amarillo */
  --isla-niebla: #f6fbf3;  /* bruma clara */
  --isla-fondo: #eef5ec;   /* tarjeta verde pálida */
  --isla-borde: #c3d8c4;   /* borde verde claro */
  --isla-texto: #2f5a39;   /* verde bosque (7.3:1) */
  /* Adornos del bosque (Defensor Lumínico y Faroles del Bosque) y las sombras que se acercan. */
  --bosque-arbusto: #5f8f5a; /* arbustos */
  --bosque-hongo: #e8907a;   /* sombrerito de los hongos (salmón suave) */
  --bosque-roca: #a9b8a6;    /* piedras */
  --bosque-sombra: #4d4660;  /* las sombras: gris violeta, bien distinto del verde de los pinos */
} /* fin de la paleta del Bosque de sombras */

.paleta-laberinto {
  --isla-cielo: #efeaf6;   /* lavanda muy pálida */
  --isla-mar: #d6cfe3;     /* lavanda gris */
  --isla-tierra: #c4bcd3;  /* gris lila */
  --isla-forma: #9f95b5;   /* muros lavanda */
  --isla-acento: #8f7fc0;  /* senderos lavanda */
  --isla-luz: #faf8fd;     /* claridad */
  --isla-niebla: #ffffff;  /* niebla blanca */
  --isla-fondo: #f4f1f9;   /* tarjeta lila pálida */
  --isla-borde: #dbd3e8;   /* borde lila */
  --isla-texto: #5a4a86;   /* lavanda oscura (7:1) */
  /* Nubes de colores del Pinball Mental y fondos de las palabras de Palabras en la Niebla (pasteles suaves).
     Encima siempre va texto tinta (#2a2340), que se lee bien sobre todos. */
  --nube-1: #ffd3e0;       /* rosa */
  --nube-2: #c9e4ff;       /* celeste */
  --nube-3: #cff3df;       /* menta */
  --nube-4: #fff0b3;       /* amarillo */
  --nube-5: #e3d7ff;       /* lavanda */
  --nube-6: #ffdcc4;       /* durazno */
} /* fin de la paleta del Laberinto de niebla */

.paleta-templo {
  --isla-cielo: #fff6d6;   /* amarillo crema */
  --isla-mar: #e6efc0;     /* verde limón pálido */
  --isla-tierra: #cfe0a0;  /* pasto cálido */
  --isla-forma: #e9c46a;   /* piedra dorada */
  --isla-acento: #f2b632;  /* sol */
  --isla-luz: #ffe17a;     /* rayos */
  --isla-niebla: #fffbea;  /* aire luminoso */
  --isla-fondo: #fffae8;   /* tarjeta crema */
  --isla-borde: #ecdfa6;   /* borde dorado claro */
  --isla-texto: #6d5a0c;   /* ocre oscuro (6.4:1) */
  --templo-colina: #b8d98f; /* colinas del paisaje del DJ y del Jardín */
  --templo-cerca: #fffdf5;  /* la cerquita blanca del Jardín */
} /* fin de la paleta del Templo de sol */

/* ---------------------------------------------------------------------
   2. Paletas nocturnas automáticas
   (mismo patrón que tokens.css: si el sistema está oscuro y la persona no eligió "clara")
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Volcán de noche: brasas tenues */
  :root:not([data-apariencia="clara"]) .paleta-volcan {
    --isla-cielo: #3a2420; --isla-mar: #4d2c25; --isla-tierra: #6b3d30; --isla-forma: #8a4c39; /* tierra y montaña */
    --isla-acento: #e8946a; --isla-luz: #f2b48a; --isla-niebla: #4a3430; /* lava, brillo y vapor */
    --isla-fondo: #2c1d1b; --isla-borde: #5a3a31; --isla-texto: #ffb898; /* tarjetas y texto */
    --volcan-palma: #4e7a45; /* palmeras de noche */
  } /* fin del Volcán nocturno automático */
  /* Lago de noche: azules grises */
  :root:not([data-apariencia="clara"]) .paleta-lago {
    --isla-cielo: #1d2733; --isla-mar: #2b3d52; --isla-tierra: #3a4655; --isla-forma: #4c5b6d; /* cielo y colinas */
    --isla-acento: #8db5d9; --isla-luz: #c9d6e2; --isla-niebla: #3a4654; /* lago, reflejo y nubes */
    --isla-fondo: #1a222c; --isla-borde: #344355; --isla-texto: #a9c9e6; /* tarjetas y texto */
    --lago-alga: #2f5a50; --lago-pez: #d99a66; --lago-hoja: #3f6a4c; --lago-flor: #d78fa3; /* adornos del lago de noche */
  } /* fin del Lago nocturno automático */
  /* Bosque de noche: verdes oscuros con luz amarilla */
  :root:not([data-apariencia="clara"]) .paleta-bosque {
    --isla-cielo: #142319; --isla-mar: #1d3324; --isla-tierra: #24402c; --isla-forma: #2f5a3a; /* cielo y pinos */
    --isla-acento: #f2cf62; --isla-luz: #ffe08a; --isla-niebla: #2a3c2f; /* farol, halo y bruma */
    --isla-fondo: #15201a; --isla-borde: #2c4434; --isla-texto: #a8d8b0; /* tarjetas y texto */
    --bosque-arbusto: #2f5a38; --bosque-hongo: #d98a74; --bosque-roca: #3e4d40; /* adornos del bosque de noche */
    --bosque-sombra: #9c93b8; /* sombras de noche: lila claro, para que se vean sobre el fondo oscuro */
  } /* fin del Bosque nocturno automático */
  /* Laberinto de noche: lavandas y grises oscuros */
  :root:not([data-apariencia="clara"]) .paleta-laberinto {
    --isla-cielo: #221e2c; --isla-mar: #2f2a3c; --isla-tierra: #3c3650; --isla-forma: #4f4767; /* cielo y muros */
    --isla-acento: #b8a9e6; --isla-luz: #d8d0ee; --isla-niebla: #3e3850; /* senderos, claridad y niebla */
    --isla-fondo: #1e1a27; --isla-borde: #3b344b; --isla-texto: #cbbff0; /* tarjetas y texto */
    --nube-1: #e8a7bd; --nube-2: #92bde8; --nube-3: #93d3b2; /* nubes de noche: pasteles más hondos */
    --nube-4: #e8d27a; --nube-5: #b9a6f0; --nube-6: #eab08f; /* (el texto encima sigue siendo tinta) */
  } /* fin del Laberinto nocturno automático */
  /* Templo de noche: dorados y verdes cálidos apagados */
  :root:not([data-apariencia="clara"]) .paleta-templo {
    --isla-cielo: #2c2a17; --isla-mar: #333a1d; --isla-tierra: #44502a; --isla-forma: #8a7633; /* cielo y escalones */
    --isla-acento: #f2c45a; --isla-luz: #ffd970; --isla-niebla: #3a3820; /* sol, rayos y aire */
    --isla-fondo: #23221a; --isla-borde: #45422a; --isla-texto: #f0dc8f; /* tarjetas y texto */
    --templo-colina: #4f6b35; --templo-cerca: #6b6650; /* paisaje del templo de noche */
  } /* fin del Templo nocturno automático */
} /* fin del @media (prefers-color-scheme: dark) */

/* ---------------------------------------------------------------------
   3. Paletas nocturnas elegidas en Ajustes (los mismos valores de arriba)
   Si cambias un valor aquí, cámbialo también en la sección 2 (deben ser iguales).
   --------------------------------------------------------------------- */
:root[data-apariencia="nocturna"] .paleta-volcan {
  --isla-cielo: #3a2420; --isla-mar: #4d2c25; --isla-tierra: #6b3d30; --isla-forma: #8a4c39; /* tierra y montaña */
  --isla-acento: #e8946a; --isla-luz: #f2b48a; --isla-niebla: #4a3430; /* lava, brillo y vapor */
  --isla-fondo: #2c1d1b; --isla-borde: #5a3a31; --isla-texto: #ffb898; /* tarjetas y texto */
  --volcan-palma: #4e7a45; /* palmeras de noche */
} /* fin del Volcán nocturno elegido */
:root[data-apariencia="nocturna"] .paleta-lago {
  --isla-cielo: #1d2733; --isla-mar: #2b3d52; --isla-tierra: #3a4655; --isla-forma: #4c5b6d; /* cielo y colinas */
  --isla-acento: #8db5d9; --isla-luz: #c9d6e2; --isla-niebla: #3a4654; /* lago, reflejo y nubes */
  --isla-fondo: #1a222c; --isla-borde: #344355; --isla-texto: #a9c9e6; /* tarjetas y texto */
  --lago-alga: #2f5a50; --lago-pez: #d99a66; --lago-hoja: #3f6a4c; --lago-flor: #d78fa3; /* adornos del lago de noche */
} /* fin del Lago nocturno elegido */
:root[data-apariencia="nocturna"] .paleta-bosque {
  --isla-cielo: #142319; --isla-mar: #1d3324; --isla-tierra: #24402c; --isla-forma: #2f5a3a; /* cielo y pinos */
  --isla-acento: #f2cf62; --isla-luz: #ffe08a; --isla-niebla: #2a3c2f; /* farol, halo y bruma */
  --isla-fondo: #15201a; --isla-borde: #2c4434; --isla-texto: #a8d8b0; /* tarjetas y texto */
  --bosque-arbusto: #2f5a38; --bosque-hongo: #d98a74; --bosque-roca: #3e4d40; /* adornos del bosque de noche */
  --bosque-sombra: #9c93b8; /* sombras de noche: lila claro, para que se vean sobre el fondo oscuro */
} /* fin del Bosque nocturno elegido */
:root[data-apariencia="nocturna"] .paleta-laberinto {
  --isla-cielo: #221e2c; --isla-mar: #2f2a3c; --isla-tierra: #3c3650; --isla-forma: #4f4767; /* cielo y muros */
  --isla-acento: #b8a9e6; --isla-luz: #d8d0ee; --isla-niebla: #3e3850; /* senderos, claridad y niebla */
  --isla-fondo: #1e1a27; --isla-borde: #3b344b; --isla-texto: #cbbff0; /* tarjetas y texto */
  --nube-1: #e8a7bd; --nube-2: #92bde8; --nube-3: #93d3b2; /* nubes de noche: pasteles más hondos */
  --nube-4: #e8d27a; --nube-5: #b9a6f0; --nube-6: #eab08f; /* (el texto encima sigue siendo tinta) */
} /* fin del Laberinto nocturno elegido */
:root[data-apariencia="nocturna"] .paleta-templo {
  --isla-cielo: #2c2a17; --isla-mar: #333a1d; --isla-tierra: #44502a; --isla-forma: #8a7633; /* cielo y escalones */
  --isla-acento: #f2c45a; --isla-luz: #ffd970; --isla-niebla: #3a3820; /* sol, rayos y aire */
  --isla-fondo: #23221a; --isla-borde: #45422a; --isla-texto: #f0dc8f; /* tarjetas y texto */
  --templo-colina: #4f6b35; --templo-cerca: #6b6650; /* paisaje del templo de noche */
} /* fin del Templo nocturno elegido */

/* ---------------------------------------------------------------------
   4. Dibujo de la isla (<svg class="isla-dibujo">, lo arma crearDibujoIsla() en js/islas-comun.js)
   --------------------------------------------------------------------- */
.isla-dibujo {
  display: block; /* bloque: ocupa su propia línea */
  width: 100%; /* todo el ancho de su contenedor */
  height: auto; /* alto proporcional (el viewBox es de 320 × 200) */
} /* fin de la regla .isla-dibujo */
.isla-dibujo__cielo { fill: var(--isla-cielo); } /* rectángulo del fondo */
.isla-dibujo__mar { fill: var(--isla-mar); } /* agua alrededor */
.isla-dibujo__tierra { fill: var(--isla-tierra); } /* la isla */
.isla-dibujo__forma { fill: var(--isla-forma); } /* montaña, árboles, muros o escalones */
.isla-dibujo__acento { fill: var(--isla-acento); } /* lava, lago, farol o sol */
.isla-dibujo__luz { fill: var(--isla-luz); } /* brillos */
.isla-dibujo__niebla { fill: var(--isla-niebla); opacity: 0.85; } /* vapor y nubes, un poco transparentes */
.isla-dibujo__trazo { fill: none; stroke: var(--isla-acento); stroke-width: 5; stroke-linecap: round; } /* senderos y lluvia */

/* Las nubes y el vapor flotan muy despacio (se apaga con "reducir movimiento", sección 11) */
.isla-dibujo__niebla {
  animation: isla-flotar 6s ease-in-out infinite alternate; /* va y vuelve sin parar, en 6 s */
} /* fin de la animación de la niebla */
@keyframes isla-flotar {
  from { transform: translateX(-4px); } /* 4 px a la izquierda */
  to { transform: translateX(4px); } /* 4 px a la derecha */
} /* fin de @keyframes isla-flotar */

/* Detalles del dibujo: luz, sombra, agua y lo propio de cada isla. La sombra es tinta muy suave (sirve igual
   de día y de noche); los brillos usan --isla-luz. Los adornos usan los colores propios de cada paleta
   (--volcan-palma, --lago-hoja, --lago-flor, --bosque-arbusto, --bosque-hongo, --nube-1 a --nube-6,
   --templo-colina y --templo-cerca), que ya tienen versión clara y nocturna. */
.isla-dibujo__parada { stop-color: var(--isla-luz); } /* color de los degradados (horizonte, brillo del mar y halos) */
.isla-dibujo__sombra { fill: #2a2340; opacity: 0.14; } /* lados en sombra y sombra de la isla en el agua */
.isla-dibujo__brillo { fill: var(--isla-luz); opacity: 0.3; } /* lados con luz */
.isla-dibujo__arena { fill: var(--isla-luz); opacity: 0.6; } /* orilla de la isla */
.isla-dibujo__ola { fill: none; stroke: var(--isla-luz); stroke-width: 2.5; stroke-linecap: round; opacity: 0.6; } /* olitas */
.isla-dibujo__lejos { fill: var(--isla-forma); opacity: 0.32; } /* montañas y pinos lejanos, muy suaves */
.isla-dibujo__sol { fill: var(--isla-acento); } /* sol del templo y flores */
.isla-dibujo__sol--tenue { opacity: 0.6; } /* el sol de la tarde del volcán */
.isla-dibujo__lava { fill: none; stroke: var(--isla-acento); stroke-width: 5; stroke-linecap: round; } /* ríos de lava */
.isla-dibujo__tronco { fill: none; stroke: var(--isla-forma); stroke-width: 4; stroke-linecap: round; } /* tronco de la palmera */
.isla-dibujo__poste { fill: none; stroke: var(--isla-forma); stroke-width: 3; stroke-linecap: round; } /* poste del farol y troncos */
.isla-dibujo__palma { fill: none; stroke: var(--volcan-palma); stroke-width: 4.5; stroke-linecap: round; } /* hojas de palmera */
.isla-dibujo__gota { fill: none; stroke: var(--isla-acento); stroke-width: 3; stroke-linecap: round; } /* gotas de lluvia */
.isla-dibujo__reflejo { fill: none; stroke: var(--isla-luz); stroke-width: 2; stroke-linecap: round; opacity: 0.8; } /* reflejos del lago */
.isla-dibujo__onda { fill: none; stroke: var(--isla-luz); stroke-width: 1.5; } /* ondas de las gotas */
.isla-dibujo__hoja { fill: var(--lago-hoja); } /* nenúfares */
.isla-dibujo__flor { fill: var(--lago-flor); } /* flor de nenúfar */
.isla-dibujo__junco { fill: none; stroke: var(--lago-hoja); stroke-width: 2.5; stroke-linecap: round; } /* juncos */
.isla-dibujo__arcoiris { fill: none; stroke-width: 6; opacity: 0.45; } /* arcoíris suave del lago */
.isla-dibujo__arco-1 { stroke: var(--lago-flor); } /* rosa */
.isla-dibujo__arco-2 { stroke: var(--lago-pez); } /* durazno */
.isla-dibujo__arco-3 { stroke: var(--lago-hoja); } /* verde */
.isla-dibujo__arco-4 { stroke: var(--isla-acento); } /* azul */
.isla-dibujo__arbusto { fill: var(--bosque-arbusto); } /* arbustos del bosque */
.isla-dibujo__hongo { fill: var(--bosque-hongo); } /* sombrerito de los hongos */
.isla-dibujo__nube-1 { fill: var(--nube-1); } /* nubecitas de colores del laberinto: rosa */
.isla-dibujo__nube-2 { fill: var(--nube-2); } /* celeste */
.isla-dibujo__nube-3 { fill: var(--nube-3); } /* menta */
.isla-dibujo__nube-4 { fill: var(--nube-4); } /* amarilla */
.isla-dibujo__nube-5 { fill: var(--nube-5); } /* lavanda */
.isla-dibujo__techo { fill: var(--isla-mar); } /* parte de arriba del laberinto */
.isla-dibujo__muro { fill: none; stroke: var(--isla-forma); stroke-width: 5; stroke-linecap: round; } /* muros */
.isla-dibujo__muro--fino { stroke-width: 2.5; } /* muros del laberinto pequeño del camino */
.isla-dibujo__muro-luz { fill: none; stroke: var(--isla-luz); stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; } /* borde de luz */
.isla-dibujo__sendero { fill: none; stroke: var(--isla-acento); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 6; } /* sendero de puntos */
.isla-dibujo__estrella { fill: var(--nubbit-color-estrella); stroke: #b07a10; stroke-width: 1; stroke-linejoin: round; } /* la salida */
.isla-dibujo__colina { fill: var(--templo-colina); } /* colinas del templo */
.isla-dibujo__copa { fill: var(--templo-colina); stroke: var(--isla-forma); stroke-width: 1.5; } /* arbolitos del templo */
.isla-dibujo__columna { fill: var(--templo-cerca); stroke: var(--isla-forma); stroke-width: 1.5; } /* columnas blancas */
.isla-dibujo__rayos { stroke: var(--isla-luz); stroke-width: 4; stroke-linecap: round; } /* rayos del sol */
.isla-dibujo__ave { fill: none; stroke: var(--isla-texto); stroke-width: 2; stroke-linecap: round; opacity: 0.45; } /* pájaros */
.isla-dibujo__brasa { fill: var(--isla-luz); } /* brasas del volcán */

/* Movimiento del dibujo: todo muy lento y sin destellos fuertes (nada cambia más de una vez por segundo).
   Se apaga con "reducir movimiento" (sección 11). */
.isla-dibujo__flota {
  animation: isla-flotar 7s ease-in-out infinite alternate; /* las nubecitas de colores van y vienen */
} /* fin de la regla .isla-dibujo__flota */
.isla-dibujo__halo,
.isla-dibujo__lava { /* y la lava */
  animation: isla-halo 3.5s ease-in-out infinite alternate; /* la luz respira despacio */
} /* fin de la regla de los halos */
@keyframes isla-halo {
  from { opacity: 0.6; } /* un poco más tenue */
  to { opacity: 1; } /* más clara */
} /* fin de @keyframes isla-halo */
.isla-dibujo__brasa {
  animation: isla-brasa 3s ease-out infinite; /* sube y se apaga */
} /* fin de la animación de las brasas */
@keyframes isla-brasa {
  from { transform: translateY(0); opacity: 0; } /* nace en el cráter */
  30% { opacity: 1; } /* se ve */
  to { transform: translateY(-18px); opacity: 0; } /* sube y se apaga */
} /* fin de @keyframes isla-brasa */
.isla-dibujo__lluvia {
  animation: isla-lluvia 1.8s linear infinite; /* las gotas bajan despacio */
} /* fin de la regla .isla-dibujo__lluvia */
@keyframes isla-lluvia {
  from { transform: translateY(-4px); opacity: 0; } /* aparece */
  30% { opacity: 1; } /* se ve */
  to { transform: translateY(8px); opacity: 0; } /* baja y se va */
} /* fin de @keyframes isla-lluvia */
.isla-dibujo__onda {
  transform-box: fill-box; /* crece desde su propio centro */
  transform-origin: center; /* (ídem) */
  animation: isla-onda 3.6s ease-out infinite; /* se abre y se desvanece */
} /* fin de la animación de las ondas */
@keyframes isla-onda {
  from { transform: scale(0.5); opacity: 0.9; } /* pequeñita */
  to { transform: scale(1.9); opacity: 0; } /* grande y transparente */
} /* fin de @keyframes isla-onda */
.isla-dibujo__destello {
  transform-box: fill-box; /* desde su centro */
  transform-origin: center; /* (ídem) */
  animation: isla-destello 2.6s ease-in-out infinite alternate; /* brilla y se atenúa despacio */
} /* fin de la animación de los destellos */
@keyframes isla-destello {
  from { opacity: 0.25; transform: scale(0.8); } /* tenue */
  to { opacity: 1; transform: scale(1); } /* brillante */
} /* fin de @keyframes isla-destello */
.isla-dibujo__rayos {
  transform-box: fill-box; /* gira alrededor del sol */
  transform-origin: center; /* (ídem) */
  animation: isla-girar 60s linear infinite; /* una vuelta por minuto */
} /* fin de la animación de los rayos */
@keyframes isla-girar {
  to { transform: rotate(360deg); } /* una vuelta */
} /* fin de @keyframes isla-girar */
/* Retrasos negativos: cada pieza empieza en otro punto de su animación (así no se mueven todas a la vez).
   Van al final para ganarle al "animation" de las reglas de arriba. */
.isla-dibujo__retraso-1 { animation-delay: -1.2s; } /* 1,2 s adelantada */
.isla-dibujo__retraso-2 { animation-delay: -2.4s; } /* 2,4 s adelantada */

/* Isla «iluminada» (sus 10 niveles completados): un halo dorado alrededor del dibujo */
.isla--iluminada .isla-dibujo {
  filter: drop-shadow(0 0 10px var(--isla-luz)); /* resplandor del color de luz de la isla */
} /* fin de la regla .isla--iluminada .isla-dibujo */

/* ---------------------------------------------------------------------
   5. Pantalla de la isla (isla.html)
   --------------------------------------------------------------------- */
/* Tarjeta con el dibujo de la isla, Nubbit y la frase */
.escena-isla {
  display: grid; /* cuadrícula */
  gap: var(--espacio-3); /* 16 px entre sus partes */
  padding: var(--espacio-4); /* 24 px de relleno */
  border: 1px solid var(--isla-borde); /* borde del color de la isla */
  border-radius: var(--radio-grande); /* esquinas de 24 px */
  background: var(--isla-fondo); /* fondo del color de la isla */
  margin-bottom: var(--espacio-4); /* 24 px debajo */
} /* fin de la regla .escena-isla */

/* El dibujo y Nubbit, uno encima del otro (Nubbit queda abajo a la derecha del dibujo) */
.escena-isla__dibujo {
  position: relative; /* referencia para ubicar a Nubbit */
  overflow: hidden; /* el dibujo respeta las esquinas */
  border-radius: var(--radio); /* esquinas de 14 px */
} /* fin de la regla .escena-isla__dibujo */
.escena-isla__nubbit {
  position: absolute; /* encima del dibujo */
  right: 4%; /* cerca del borde derecho */
  bottom: 2%; /* cerca del borde de abajo */
  width: min(120px, 32%); /* tamaño de Nubbit: 120 px como máximo */
} /* fin de la regla .escena-isla__nubbit */

/* Frase de la isla y bienvenida de la primera visita */
.escena-isla__frase {
  margin: 0; /* sin márgenes: el gap da el espacio */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla, con buen contraste */
} /* fin de la regla .escena-isla__frase */
.escena-isla__bienvenida {
  margin: 0; /* sin márgenes */
  color: var(--color-texto); /* texto normal */
} /* fin de la regla .escena-isla__bienvenida */

/* Las tres opciones de «¿Cómo quieres pasar este momento?»: botones grandes, uno debajo del otro */
.opciones-momento {
  display: grid; /* cuadrícula de una columna */
  gap: var(--espacio-3); /* 16 px entre botones */
  margin: var(--espacio-3) 0; /* 16 px arriba y abajo */
} /* fin de la regla .opciones-momento */
.opciones-momento .boton {
  width: 100%; /* cada botón ocupa todo el ancho: fácil de tocar */
} /* fin de la regla .opciones-momento .boton */

/* Letra pequeña del nivel 1: «Si lo necesitas, entra a Necesito apoyo» (sin alarmas) */
.nota-apoyo {
  margin: var(--espacio-2) 0 0; /* 8 px arriba */
  font-size: var(--texto-pequeno); /* 14 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .nota-apoyo */

/* ---------------------------------------------------------------------
   6. Selector de islas (isla.html) y mapa (islas.html)
   --------------------------------------------------------------------- */
/* Lista de tarjetas de islas en columnas (igual que las tarjetas de actividades) */
.lista-islas {
  display: grid; /* cuadrícula */
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); /* columnas de al menos 224 px */
  gap: var(--espacio-3); /* 16 px entre tarjetas */
  margin: 0 0 var(--espacio-4); /* 24 px debajo */
  padding: 0; /* sin sangría de lista */
  list-style: none; /* sin viñetas */
} /* fin de la regla .lista-islas */

/* Tarjeta de una isla: dibujo arriba, nombre y datos abajo. Puede ser <button>, <a> o <div> (apagada). */
.tarjeta-isla {
  display: flex; /* caja flexible */
  flex-direction: column; /* en columna */
  gap: var(--espacio-2); /* 8 px entre sus partes */
  width: 100%; /* todo el ancho de su celda */
  height: 100%; /* todo el alto: las tarjetas de una fila miden igual */
  min-height: 44px; /* área mínima para tocar */
  padding: var(--espacio-3); /* 16 px de relleno */
  border: 2px solid var(--isla-borde); /* borde del color de la isla */
  border-radius: var(--radio-grande); /* esquinas de 24 px */
  background: var(--isla-fondo); /* fondo del color de la isla */
  color: var(--color-texto); /* texto normal */
  font: inherit; /* los botones heredan la letra de la página */
  text-align: left; /* texto a la izquierda (los botones lo centran) */
  text-decoration: none; /* sin subrayado (en los <a>) */
  box-shadow: var(--sombra); /* sombra suave */
  transition: transform var(--transicion), box-shadow var(--transicion); /* se levanta suave */
} /* fin de la regla .tarjeta-isla */
/* Las que se pueden tocar (button y a) se levantan al pasar el mouse y muestran el puntero de manito */
button.tarjeta-isla,
a.tarjeta-isla { /* y los enlaces con forma de tarjeta */
  cursor: pointer; /* manito */
} /* fin de la regla de las tarjetas tocables */
button.tarjeta-isla:hover,
a.tarjeta-isla:hover { /* lo mismo para los enlaces */
  transform: translateY(-3px); /* sube 3 px */
  box-shadow: var(--sombra-elevada); /* sombra más grande */
  color: var(--color-texto); /* el texto no cambia de color (le gana a a:hover de base.css) */
} /* fin de la regla :hover de las tarjetas tocables */
.tarjeta-isla__nombre {
  font-family: var(--fuente-titulos); /* letra redondeada de los títulos */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .tarjeta-isla__nombre */
.tarjeta-isla__dato {
  display: flex; /* ícono y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-1); /* 4 px entre ellos */
  font-size: var(--texto-pequeno); /* 14 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .tarjeta-isla__dato */
.tarjeta-isla__dato .icono {
  width: 1.1em; /* ícono del tamaño de la letra */
  height: 1.1em; /* cuadrado */
  flex: none; /* no se encoge */
} /* fin de la regla .tarjeta-isla__dato .icono */
/* Isla sin descubrir: apagada (gris y con el dibujo desaturado), no se puede tocar */
.tarjeta-isla--apagada {
  border-style: dashed; /* borde de rayitas */
  box-shadow: none; /* sin sombra */
} /* fin de la regla .tarjeta-isla--apagada */
.tarjeta-isla--apagada .isla-dibujo {
  filter: grayscale(0.85) opacity(0.55); /* casi gris y medio transparente */
} /* fin de la regla del dibujo apagado */
/* Isla iluminada (10 de 10): borde dorado de la isla y halo */
.tarjeta-isla.isla--iluminada {
  border-color: var(--isla-acento); /* borde del color de acento */
} /* fin de la regla .tarjeta-isla.isla--iluminada */
/* Estrellita del avance (recompensa visual) */
.estrellita {
  color: var(--nubbit-color-estrella); /* amarillo de las estrellas de Nubbit */
} /* fin de la regla .estrellita */
.estrellita .icono {
  fill: currentColor; /* estrella rellena */
  stroke: #b07a10; /* contorno ámbar (igual que las estrellas de Nubbit) */
} /* fin de la regla .estrellita .icono */

/* ---------------------------------------------------------------------
   7. Selector de juegos y niveles (isla-juegos.html)
   --------------------------------------------------------------------- */
/* Cabecera de la isla: dibujo pequeño al lado del título en pantallas grandes */
.cabecera-isla {
  display: grid; /* cuadrícula */
  grid-template-columns: minmax(0, 9rem) 1fr; /* dibujo de hasta 144 px y el texto */
  gap: var(--espacio-3); /* 16 px */
  align-items: center; /* centrados en vertical */
  padding: var(--espacio-3); /* 16 px de relleno */
  margin-bottom: var(--espacio-4); /* 24 px debajo */
  border: 1px solid var(--isla-borde); /* borde de la isla */
  border-radius: var(--radio-grande); /* esquinas de 24 px */
  background: var(--isla-fondo); /* fondo de la isla */
} /* fin de la regla .cabecera-isla */
.cabecera-isla h1 {
  margin: 0; /* sin márgenes */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .cabecera-isla h1 */
.cabecera-isla p {
  margin: var(--espacio-1) 0 0; /* 4 px arriba */
} /* fin de la regla .cabecera-isla p */

/* Candado y texto del juego que todavía no se abre (resumen de juegos de isla-juegos.html) */
.tarjeta-juego__aviso {
  display: flex; /* candado y texto en fila */
  align-items: center; /* centrados */
  gap: var(--espacio-2); /* 8 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .tarjeta-juego__aviso */

/* Avance del juego en palabras («3 de 5 niveles») con su estrellita */
.avance-juego {
  display: flex; /* estrella y texto en fila */
  align-items: center; /* centrados */
  gap: var(--espacio-1); /* 4 px */
  margin: var(--espacio-2) 0 0; /* 8 px arriba */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .avance-juego */

/* ---------------------------------------------------------------------
   8. Página del minijuego (juego.html)
   --------------------------------------------------------------------- */
/* Título del juego y su nivel, más pequeño que el de las demás páginas para dejar espacio al juego */
.titulo-juego {
  margin: 0 0 var(--espacio-2); /* 8 px debajo */
  font-size: var(--texto-grande); /* 20 px */
  color: var(--isla-texto, var(--color-texto)); /* color de la isla (o el normal si todavía no hay paleta) */
} /* fin de la regla .titulo-juego */

/* Barra con «Salir», «Pausa» y el sonido: siempre visible arriba del juego */
.barra-juego {
  display: flex; /* en fila */
  flex-wrap: wrap; /* en celulares angostos, baja a otra línea */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-2); /* 8 px */
  margin-bottom: var(--espacio-2); /* 8 px debajo */
} /* fin de la regla .barra-juego */
.barra-juego__sonido {
  margin-left: auto; /* empuja el interruptor de sonido a la derecha */
} /* fin de la regla .barra-juego__sonido */
.barra-juego .boton {
  min-height: 44px; /* 44 px: el mínimo cómodo para tocar, más compacto que los botones normales */
  padding: 0 var(--espacio-3); /* 16 px a los lados */
} /* fin de la regla .barra-juego .boton */

/* La instrucción de una sola línea (y los mensajes amables, como «Respira, vamos otra vez») */
.instruccion-juego {
  min-height: 1.5em; /* reserva su alto aunque esté vacía: la página no salta */
  margin: 0 0 var(--espacio-2); /* 8 px debajo */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .instruccion-juego */
.mensaje-juego {
  min-height: 1.5em; /* reserva su alto */
  margin: var(--espacio-2) 0 0; /* 8 px arriba */
  color: var(--color-texto-suave); /* gris violeta */
  text-align: center; /* centrado */
} /* fin de la regla .mensaje-juego */

/* El área donde cada minijuego dibuja (canvas, SVG o botones) */
.area-juego {
  position: relative; /* referencia para lo que el juego ponga encima (por ejemplo, la pausa) */
  overflow: hidden; /* nada se sale del recuadro */
  min-height: 360px; /* alto mínimo */
  height: min(68vh, 560px); /* alto: 68 % de la ventana, máximo 560 px */
  border: 1px solid var(--isla-borde); /* borde de la isla */
  border-radius: var(--radio-grande); /* esquinas de 24 px */
  background: var(--isla-cielo); /* fondo del cielo de la isla */
  touch-action: none; /* el dedo dentro del juego no desplaza la página (el juego lo usa) */
  user-select: none; /* no se selecciona texto al tocar varias veces */
  -webkit-user-select: none; /* lo mismo en Safari (iPhone) */
} /* fin de la regla .area-juego */
.area-juego:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul al llegar con la tecla Tab */
  outline-offset: 3px; /* un poco separado del borde */
} /* fin de la regla .area-juego:focus-visible */
.area-juego canvas {
  display: block; /* sin espacio extra debajo */
  width: 100%; /* todo el ancho del área */
  height: 100%; /* todo el alto */
} /* fin de la regla .area-juego canvas */
/* Velo de la pausa: cubre el juego con un mensaje tranquilo */
.area-juego__pausa {
  position: absolute; /* encima del juego */
  inset: 0; /* ocupa toda el área (arriba, derecha, abajo e izquierda en 0) */
  display: grid; /* centra el texto */
  place-items: center; /* centrado */
  padding: var(--espacio-4); /* 24 px */
  background: rgb(0 0 0 / 0.35); /* oscurece un poco el juego */
  color: #ffffff; /* texto blanco */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 700; /* negrita */
  text-align: center; /* centrado */
} /* fin de la regla .area-juego__pausa */
.area-juego__pausa[hidden] {
  display: none; /* hidden de verdad (display: grid le ganaría al atributo hidden) */
} /* fin de la regla .area-juego__pausa[hidden] */

/* Pantalla de cierre del nivel: Nubbit, su frase y los botones */
.cierre-juego {
  text-align: center; /* todo centrado */
  border-color: var(--isla-borde); /* borde de la isla */
  background: var(--isla-fondo); /* fondo de la isla */
} /* fin de la regla .cierre-juego */
.cierre-juego__nubbit {
  width: min(160px, 45vw); /* Nubbit de hasta 160 px */
  margin: 0 auto var(--espacio-2); /* centrado y 8 px debajo */
} /* fin de la regla .cierre-juego__nubbit */
.cierre-juego__frase {
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .cierre-juego__frase */
.cierre-juego .acciones {
  justify-content: center; /* botones centrados */
} /* fin de la regla .cierre-juego .acciones */
/* Aviso cálido de «Se abrió un juego nuevo» o «Tu isla brilla» */
.aviso-isla {
  display: inline-flex; /* estrella y texto en fila */
  align-items: center; /* centrados */
  gap: var(--espacio-2); /* 8 px */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  border-radius: 999px; /* pastilla */
  background: var(--color-sol-suave); /* amarillo claro */
  color: var(--color-texto); /* texto normal */
  font-weight: 700; /* negrita */
} /* fin de la regla .aviso-isla */
.aviso-isla[hidden] {
  display: none; /* hidden de verdad */
} /* fin de la regla .aviso-isla[hidden] */

/* ---------------------------------------------------------------------
   9. Piezas de los minijuegos
   (las crean los módulos de js/juegos/; los que dibujan en canvas toman los colores de la paleta)
   --------------------------------------------------------------------- */
/* Botones grandes dentro de un juego (palabras, macetas, respuestas rápidas...) */
.juego-opciones {
  display: flex; /* en fila */
  flex-wrap: wrap; /* bajan si no caben */
  justify-content: center; /* centradas */
  gap: var(--espacio-2); /* 8 px */
  padding: var(--espacio-3); /* 16 px */
} /* fin de la regla .juego-opciones */
.juego-opcion {
  min-width: 44px; /* área mínima para tocar */
  min-height: 48px; /* alto cómodo */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  border: 2px solid var(--color-primario); /* borde violeta: se puede tocar */
  border-radius: 999px; /* pastilla */
  background: var(--color-superficie); /* fondo blanco (u oscuro) */
  color: var(--color-primario); /* texto violeta */
  font: inherit; /* letra de la página */
  font-weight: 700; /* negrita */
  cursor: pointer; /* manito */
} /* fin de la regla .juego-opcion */
.juego-opcion:hover,
.juego-opcion[aria-pressed="true"] { /* o cuando ya está elegida */
  background: var(--color-primario-suave); /* lila */
} /* fin de la regla .juego-opcion:hover */
.juego-opcion:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul con teclado */
  outline-offset: 2px; /* separado del borde */
} /* fin de la regla .juego-opcion:focus-visible */

/* --- El DJ de las Alturas (js/juegos/dj-de-las-alturas.js): botones y SVG, sin canvas --- */
.dj {
  display: flex; /* columna */
  flex-direction: column; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px */
  height: 100%; /* todo el alto del área */
  padding: var(--espacio-3); /* 16 px */
  overflow-y: auto; /* en pantallas bajas se puede desplazar */
  touch-action: pan-y; /* aquí el dedo sí desplaza (es el contenedor que se desplaza) */
} /* fin de la regla .dj */
/* El paisaje es un escenario: Nubbit en el centro y los elementos alrededor, en un óvalo
   (dj-de-las-alturas.js pone la posición de cada elemento con left y top en %). */
.dj__escena {
  position: relative; /* referencia para Nubbit, los elementos y las notitas que vuelan */
  flex: none; /* no se encoge dentro de la columna del DJ */
  height: 16rem; /* 256 px: espacio para el óvalo de elementos */
  border-radius: var(--radio); /* esquinas */
  background: linear-gradient(var(--isla-cielo), var(--isla-mar)); /* cielo soleado (el paisaje va encima) */
} /* fin de la regla .dj__escena */
.dj__escenario {
  position: absolute; /* encima del paisaje */
  left: 50%; /* en el centro */
  top: 54%; /* un poco abajo del centro (sobre la tarima) */
  width: 7.5rem; /* Nubbit de 120 px */
  transform: translate(-50%, -50%); /* centrado de verdad */
  pointer-events: none; /* no tapa los elementos al tocar */
} /* fin de la regla .dj__escenario */
.dj__luz {
  position: absolute; /* a los pies de Nubbit */
  left: 50%; /* centrada */
  bottom: -4px; /* bajo los pies */
  width: 130%; /* más ancha que Nubbit */
  height: 26%; /* óvalo bajito */
  border-radius: 50%; /* óvalo */
  background: radial-gradient(ellipse, var(--isla-luz), transparent 70%); /* luz del escenario */
  opacity: 0.55; /* suave */
  transform: translateX(-50%); /* centrada de verdad */
} /* fin de la regla .dj__luz */
/* La luz late con cada paso de baile (crece y se aclara un momento; nunca un destello fuerte) */
.dj__luz--pulso {
  animation: dj-luz var(--dj-pulso, 0.45s) ease-out; /* dura lo mismo que una nota */
} /* fin de la regla .dj__luz--pulso */
@keyframes dj-luz {
  30% { opacity: 0.95; transform: translateX(-50%) scale(1.3); } /* más grande y más clara */
} /* fin de @keyframes dj-luz */
.dj__elementos {
  position: absolute; /* ocupa todo el paisaje */
  inset: 0; /* (para repartir los elementos en el óvalo) */
} /* fin de la regla .dj__elementos */
.dj__elemento {
  position: absolute; /* en su lugar del óvalo (left y top los pone el JavaScript) */
  transform: translate(-50%, -50%); /* el centro del botón queda en su punto */
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida); /* rebote suave */
  width: 56px; /* 56 px: más que los 44 px mínimos */
  height: 56px; /* cuadrado */
  padding: 6px; /* aire para el dibujo */
  border: 2px solid var(--color-primario); /* borde violeta: se puede tocar */
  border-radius: 50%; /* redondo */
  background: var(--isla-fondo); /* fondo claro de la isla */
  cursor: pointer; /* manito */
} /* fin de la regla .dj__elemento */
.dj__elemento:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul con teclado */
  outline-offset: 2px; /* separado */
} /* fin de la regla .dj__elemento:focus-visible */
.dj__elemento svg {
  width: 100%; /* el dibujo llena el botón */
  height: 100%; /* (cuadrado) */
} /* fin de la regla .dj__elemento svg */
/* Colores de cada elemento (y de su casilla en la pista). El nombre de la nota también va escrito. */
.dj__elemento--c0 { --dj-color: var(--isla-acento); } /* do */
.dj__elemento--c1 { --dj-color: var(--nivel-2); } /* mi */
.dj__elemento--c2 { --dj-color: var(--nivel-4); } /* sol */
.dj__elemento--c3 { --dj-color: var(--color-acento); } /* la */
.dj__elemento--c4 { --dj-color: var(--color-primario); } /* do agudo */
.dj__elemento--cascada { --dj-color: var(--nivel-1); } /* cascada de luz */
.dj__elemento--nube { --dj-color: var(--color-texto-suave); } /* nube */
.dj__trazo {
  fill: none; /* solo línea */
  stroke: var(--dj-color, var(--color-primario)); /* del color del elemento */
  stroke-width: 3; /* grosor */
  stroke-linecap: round; /* puntas redondas */
} /* fin de la regla .dj__trazo */
.dj__trazo--nube { fill: var(--dj-color); fill-opacity: 0.35; } /* la nube, rellena a medias */
.dj__cabeza { fill: var(--dj-color, var(--color-primario)); } /* cabeza de la nota */
/* Brillo corto al tocar un elemento: una sola vez por toque (nunca parpadea) */
.dj__elemento--toque {
  animation: dj-toque 350ms ease-out; /* 0,35 s */
} /* fin de la regla .dj__elemento--toque */
@keyframes dj-toque {
  from { box-shadow: 0 0 0 8px var(--isla-luz); } /* halo de luz */
  to { box-shadow: 0 0 0 0 transparent; } /* desaparece */
} /* fin de @keyframes dj-toque */
.dj__nubbit {
  position: relative; /* encima de la luz */
  width: 100%; /* Nubbit llena el escenario */
  transform-origin: 50% 90%; /* los pasos de baile giran y se estiran desde los pies */
} /* fin de la regla .dj__nubbit */
/* El elemento que suena en la canción rebota y brilla */
.dj__elemento--sonando {
  transform: translate(-50%, -50%) scale(1.2); /* más grande */
  box-shadow: 0 0 0 6px var(--isla-luz); /* halo de luz */
} /* fin de la regla .dj__elemento--sonando */
/* Pasos de baile de Nubbit al escuchar la canción: uno distinto en cada nota (duran lo mismo que una nota) */
.dj-paso--salto { animation: dj-paso-salto var(--dj-pulso, 0.45s) ease-out; } /* salto con aplastón */
.dj-paso--izquierda { animation: dj-paso-izquierda var(--dj-pulso, 0.45s) ease-in-out; } /* paso a la izquierda */
.dj-paso--derecha { animation: dj-paso-derecha var(--dj-pulso, 0.45s) ease-in-out; } /* paso a la derecha */
.dj-paso--estira { animation: dj-paso-estira var(--dj-pulso, 0.45s) ease-in-out; } /* se aplasta y se estira */
.dj-paso--giro { animation: dj-paso-giro var(--dj-pulso, 0.45s) ease-in-out; } /* da una vuelta */
.dj-paso--final { animation: dj-paso-final 1s ease-out; } /* gran salto con vuelta al terminar */
@keyframes dj-paso-salto {
  15% { transform: scale(1.12, 0.86); } /* se agacha */
  50% { transform: translateY(-28px) scale(0.94, 1.08); } /* salta */
  85% { transform: scale(1.1, 0.9); } /* cae */
} /* fin de @keyframes dj-paso-salto */
@keyframes dj-paso-izquierda {
  50% { transform: translateX(-24px) translateY(-8px) rotate(-16deg); } /* paso y se inclina a la izquierda */
} /* fin de @keyframes dj-paso-izquierda */
@keyframes dj-paso-derecha {
  50% { transform: translateX(24px) translateY(-8px) rotate(16deg); } /* paso y se inclina a la derecha */
} /* fin de @keyframes dj-paso-derecha */
@keyframes dj-paso-estira {
  30% { transform: scale(1.2, 0.8); } /* aplastado */
  65% { transform: scale(0.86, 1.2) translateY(-6px); } /* estirado hacia arriba */
} /* fin de @keyframes dj-paso-estira */
@keyframes dj-paso-giro {
  50% { transform: translateY(-14px) rotate(180deg); } /* sube girando */
  100% { transform: rotate(360deg); } /* vuelta completa */
} /* fin de @keyframes dj-paso-giro */
@keyframes dj-paso-final {
  20% { transform: scale(1.15, 0.85); } /* se prepara */
  55% { transform: translateY(-40px) rotate(360deg) scale(1.1); } /* gran salto con vuelta */
  85% { transform: scale(1.1, 0.9); } /* aterriza */
} /* fin de @keyframes dj-paso-final */
.dj__estado {
  margin: 0; /* sin márgenes */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .dj__estado */
.dj__pista {
  display: flex; /* casillas en fila */
  flex-wrap: wrap; /* bajan si no caben */
  gap: 6px; /* 6 px */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin números de lista (el número va en la etiqueta) */
} /* fin de la regla .dj__pista */
.dj__casilla {
  display: grid; /* centra el texto */
  place-items: center; /* centrado */
  position: relative; /* para el puntito del ritmo */
  min-width: 44px; /* tamaño cómodo */
  height: 44px; /* cuadrada */
  padding: 0 4px; /* aire a los lados */
  border: 2px dashed var(--color-borde-control); /* vacía: rayitas */
  border-radius: var(--radio); /* esquinas */
  font-size: var(--texto-pequeno); /* 14 px */
  font-weight: 700; /* negrita */
} /* fin de la regla .dj__casilla */
.dj__casilla--llena {
  border-style: solid; /* llena: borde continuo */
  border-color: var(--dj-color); /* del color de su elemento */
  background: var(--isla-fondo); /* fondo claro */
  color: var(--color-texto); /* texto normal */
} /* fin de la regla .dj__casilla--llena */
.dj__casilla--golpe::after {
  content: ""; /* puntito del ritmo */
  position: absolute; /* debajo de la casilla */
  bottom: -8px; /* 8 px abajo */
  left: 50%; /* al centro */
  width: 8px; /* tamaño */
  height: 8px; /* redondo */
  margin-left: -4px; /* centrado de verdad */
  border-radius: 50%; /* círculo */
  background: var(--nivel-1); /* color de la cascada */
} /* fin de la regla .dj__casilla--golpe::after */
.dj__casilla--sonando {
  background: var(--isla-luz); /* la casilla que suena se ilumina */
  color: #2a2340; /* texto tinta: la luz es clara en las dos apariencias */
  transform: translateY(-3px); /* y sube un poquito */
} /* fin de la regla .dj__casilla--sonando */
.dj__acciones {
  display: flex; /* en fila */
  flex-wrap: wrap; /* bajan si no caben */
  gap: var(--espacio-2); /* 8 px */
  align-items: center; /* centrados */
} /* fin de la regla .dj__acciones */
.dj__acciones button[disabled] {
  opacity: 0.55; /* apagado */
  cursor: not-allowed; /* prohibido */
} /* fin de la regla de los botones apagados */
.dj__ayuda {
  margin: 0; /* sin márgenes */
  font-size: var(--texto-pequeno); /* 14 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .dj__ayuda */

/* Variante suave de las pastillas («Ninguna se parece», «Ahora no») */
.juego-opcion--suave {
  border-color: transparent; /* sin borde */
  background: var(--color-primario-suave); /* fondo lila */
} /* fin de la regla .juego-opcion--suave */
/* Palabras y etiquetas de colores (Palabras en la Niebla): fondo pastel de --nube-1 a --nube-6 (css de la paleta
   del Laberinto) con texto tinta, que se lee bien sobre todos; el borde sigue violeta: se puede tocar. */
.juego-opcion--nube-1, .niebla__chip--nube-1 { background: var(--nube-1); color: #2a2340; } /* rosa */
.juego-opcion--nube-2, .niebla__chip--nube-2 { background: var(--nube-2); color: #2a2340; } /* celeste */
.juego-opcion--nube-3, .niebla__chip--nube-3 { background: var(--nube-3); color: #2a2340; } /* menta */
.juego-opcion--nube-4, .niebla__chip--nube-4 { background: var(--nube-4); color: #2a2340; } /* amarillo */
.juego-opcion--nube-5, .niebla__chip--nube-5 { background: var(--nube-5); color: #2a2340; } /* lavanda */
.juego-opcion--nube-6, .niebla__chip--nube-6 { background: var(--nube-6); color: #2a2340; } /* durazno */

/* --- Palabras en la Niebla (js/juegos/palabras-en-la-niebla.js) --- */
.niebla,
.jardin-gratitud { /* y el Jardín de Gratitud: los dos son de botones y se pueden desplazar */
  display: flex; /* columna */
  flex-direction: column; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px */
  height: 100%; /* todo el alto del área */
  padding: var(--espacio-3); /* 16 px */
  overflow-y: auto; /* en pantallas bajas se puede desplazar */
  touch-action: pan-y; /* aquí el dedo sí desplaza */
  user-select: text; /* se puede seleccionar y escribir (Safari no deja escribir si un padre lo prohíbe) */
  -webkit-user-select: text; /* lo mismo en Safari */
} /* fin de la regla .niebla, .jardin-gratitud */
.niebla__escena {
  position: relative; /* referencia para la niebla */
  flex: none; /* no se encoge */
  overflow: hidden; /* respeta las esquinas */
  max-height: 34%; /* deja espacio para las palabras */
  border-radius: var(--radio); /* esquinas */
} /* fin de la regla .niebla__escena */
.niebla__escena .isla-dibujo {
  height: 100%; /* llena el alto disponible */
  object-fit: cover; /* (en SVG ayuda a no deformar) */
} /* fin de la regla del dibujo en la niebla */
.niebla__velo {
  position: absolute; /* encima del dibujo */
  inset: 0; /* lo cubre todo */
  background: var(--isla-niebla); /* niebla del color de la isla */
  opacity: 0.9; /* empieza casi opaca; palabras-en-la-niebla.js la aclara */
  transition: opacity 600ms ease-out; /* se aclara suave (instantáneo con "reducir movimiento") */
} /* fin de la regla .niebla__velo */
.niebla__titulo,
.niebla__pregunta,
.niebla__nombradas { /* y lo que se nombró */
  margin: 0; /* sin márgenes */
  text-align: center; /* centrados */
} /* fin de la regla de los textos de la niebla */
.niebla__titulo {
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .niebla__titulo */
.niebla__nombradas {
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .niebla__nombradas */

/* --- Jardín de Gratitud (js/juegos/jardin-de-gratitud.js) --- */
.jardin__macetas {
  position: relative; /* referencia para el paisaje de fondo */
  display: flex; /* macetas en fila */
  flex-wrap: wrap; /* bajan si no caben */
  justify-content: center; /* centradas */
  align-items: flex-end; /* paradas sobre el pasto */
  gap: var(--espacio-2); /* 8 px */
  padding: 4.5rem var(--espacio-2) var(--espacio-2); /* arriba, espacio para el cielo y el sol */
  border-radius: var(--radio); /* esquinas */
  background: linear-gradient(var(--isla-cielo), var(--isla-mar)); /* cielo soleado (el paisaje va encima) */
} /* fin de la regla .jardin__macetas */
.maceta {
  width: 72px; /* ancho: más que los 44 px mínimos */
  height: 96px; /* alto */
  padding: 4px; /* aire */
  border: 2px solid var(--color-primario); /* borde violeta: se puede tocar */
  border-radius: var(--radio); /* esquinas */
  background: var(--isla-fondo); /* fondo de la isla */
  cursor: pointer; /* manito */
} /* fin de la regla .maceta */
.maceta:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul con teclado */
  outline-offset: 2px; /* separado */
} /* fin de la regla .maceta:focus-visible */
.maceta--florecida {
  border-style: dashed; /* ya floreció: borde de rayitas (no se vuelve a abrir) */
  cursor: default; /* sin manito */
} /* fin de la regla .maceta--florecida */
.maceta__dibujo {
  width: 100%; /* llena el botón */
  height: 100%; /* (proporción 60 × 80) */
} /* fin de la regla .maceta__dibujo */
.maceta__matera { fill: var(--isla-forma); } /* la matera dorada */
.maceta__tallo { fill: none; stroke: var(--nivel-4); stroke-width: 3; stroke-linecap: round; } /* tallo verde */
.maceta__hoja { fill: var(--nivel-4); } /* hojas verdes */
.maceta__brote { fill: none; stroke: var(--nivel-4); stroke-width: 3; stroke-linecap: round; } /* brote */
.maceta__centro { fill: var(--isla-acento); } /* centro de la flor */
.maceta__petalo--0 { fill: var(--color-rosa-suave); stroke: var(--color-acento); } /* pétalos rosados */
.maceta__petalo--1 { fill: var(--isla-luz); stroke: var(--isla-forma); } /* amarillos */
.maceta__petalo--2 { fill: var(--color-cielo-suave); stroke: var(--nivel-2); } /* celestes */
.maceta__petalo--3 { fill: var(--color-primario-suave); stroke: var(--color-primario); } /* lilas */
.maceta__petalo--4 { fill: var(--color-menta-suave); stroke: var(--nivel-4); } /* menta */
/* Antes de florecer solo se ve el brote; al florecer aparece la planta (tallo, hojas y flor) en su grupo <g>. */
.maceta__planta {
  opacity: 0; /* oculta */
  transform-box: fill-box; /* la planta crece desde su propia caja */
  transform-origin: center bottom; /* desde abajo */
  transform: scale(0.3); /* pequeña */
  transition: opacity 500ms ease-out, transform 600ms ease-out; /* crece suave */
} /* fin de la regla de la planta oculta */
.maceta--florecida .maceta__planta {
  opacity: 1; /* visible */
  transform: none; /* tamaño normal */
} /* fin de la regla de la planta florecida */
.maceta--florecida .maceta__brote {
  opacity: 0; /* el brote se esconde */
} /* fin de la regla del brote */
.jardin__pregunta {
  padding: var(--espacio-3); /* 16 px */
  border: 1px solid var(--isla-borde); /* borde de la isla */
  border-radius: var(--radio); /* esquinas */
  background: var(--color-superficie); /* fondo de tarjeta */
} /* fin de la regla .jardin__pregunta */
.jardin__texto {
  margin: 0; /* sin márgenes */
  font-weight: 700; /* negrita */
  color: var(--isla-texto); /* color de la isla */
} /* fin de la regla .jardin__texto */
.jardin__escribir {
  display: flex; /* en fila */
  flex-wrap: wrap; /* bajan si no caben */
  align-items: center; /* centrados */
  gap: var(--espacio-2); /* 8 px */
} /* fin de la regla .jardin__escribir */
.jardin__escribir label {
  width: 100%; /* la etiqueta ocupa su propia línea */
  font-weight: 700; /* negrita */
} /* fin de la regla de la etiqueta */
.jardin__escribir input {
  flex: 1 1 12rem; /* el campo se estira (mínimo unos 192 px) */
  min-height: 48px; /* alto cómodo */
  padding: 0 var(--espacio-3); /* 16 px a los lados */
  border: 2px solid var(--color-borde-control); /* borde de campo */
  border-radius: var(--radio); /* esquinas */
  background: var(--color-superficie); /* fondo */
  color: var(--color-texto); /* texto */
  font: inherit; /* letra de la página */
} /* fin de la regla del campo */
.jardin__contador {
  font-size: var(--texto-pequeno); /* 14 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .jardin__contador */

/* --- Interacción de los juegos de botones (DJ, Palabras en la Niebla y Jardín de Gratitud) --- */
/* Pista: lo que conviene tocar late despacio con un halo de luz (menos de una vez por segundo, sin parpadeos) */
.juego-pista {
  animation: juego-pista 1.4s ease-in-out infinite; /* el halo crece y se va */
} /* fin de la regla .juego-pista */
@keyframes juego-pista {
  0%, 100% { box-shadow: 0 0 0 0 transparent; } /* sin halo */
  50% { box-shadow: 0 0 0 8px var(--isla-luz); } /* halo de luz de la isla */
} /* fin de @keyframes juego-pista */
.dj__nota-flotante {
  position: absolute; /* encima del paisaje */
  pointer-events: none; /* no se puede tocar (decorativa) */
  font-size: 1.4rem; /* notita grande */
  font-weight: 700; /* gruesa */
  color: var(--color-primario); /* violeta */
  transform: translate(-50%, 0); /* centrada sobre el elemento */
  animation: dj-nota 1s ease-out forwards; /* sube y se desvanece */
} /* fin de la regla .dj__nota-flotante */
@keyframes dj-nota {
  from { opacity: 1; transform: translate(-50%, 0); } /* sale del elemento */
  to { opacity: 0; transform: translate(-50%, -42px); } /* sube 42 px y desaparece */
} /* fin de @keyframes dj-nota */
.dj__nubbit--salta {
  animation: dj-salta 300ms ease-out; /* un saltico por toque */
} /* fin de la regla .dj__nubbit--salta */
@keyframes dj-salta {
  50% { transform: translateY(-10px); } /* arriba 10 px y vuelve */
} /* fin de @keyframes dj-salta */
.dj__casilla--nueva,
.niebla__chip--nueva { /* y la etiqueta recién nombrada */
  animation: dj-pop 300ms ease-out; /* «pop» */
} /* fin de la regla del «pop» */
@keyframes dj-pop {
  50% { transform: scale(1.15); } /* crece un poquito y vuelve */
} /* fin de @keyframes dj-pop */
.juego-opcion--aparece {
  animation: palabra-aparece 400ms ease-out both; /* aparece suave (cada una con su retraso) */
} /* fin de la regla .juego-opcion--aparece */
@keyframes palabra-aparece {
  from { opacity: 0; transform: translateY(6px); } /* desde un poco abajo, transparente */
  to { opacity: 1; transform: none; } /* en su lugar */
} /* fin de @keyframes palabra-aparece */
.juego-opcion--elegida,
.juego-opcion--elegida:hover { /* también con el mouse encima */
  background: var(--color-primario); /* la elegida se llena de violeta */
  color: var(--color-sobre-primario); /* texto claro */
  transform: scale(1.06); /* un poco más grande */
} /* fin de la regla .juego-opcion--elegida */
.niebla__chip {
  display: inline-block; /* etiqueta en línea */
  padding: 2px 10px; /* aire */
  border-radius: 999px; /* pastilla */
  background: var(--color-primario-suave); /* lila */
  color: var(--color-primario); /* violeta */
  font-weight: 700; /* negrita */
} /* fin de la regla .niebla__chip */
.niebla__destello {
  position: absolute; /* sobre el dibujo */
  inset: 0; /* lo cubre */
  pointer-events: none; /* decorativo */
  background: radial-gradient(circle, var(--isla-luz) 0%, transparent 70%); /* luz desde el centro */
  opacity: 0; /* empieza invisible */
  animation: niebla-destello 450ms ease-out; /* un solo destello suave */
} /* fin de la regla .niebla__destello */
@keyframes niebla-destello {
  40% { opacity: 0.8; } /* se ilumina */
  100% { opacity: 0; } /* y se va */
} /* fin de @keyframes niebla-destello */
/* Velos de bruma que van y vienen despacio dentro de la niebla (se aclaran con ella) */
.niebla__bruma {
  position: absolute; /* dentro del velo de niebla */
  width: 70%; /* ancho del velo */
  height: 34%; /* alto */
  border-radius: 50%; /* óvalo */
  background: radial-gradient(ellipse, var(--isla-luz) 0%, transparent 70%); /* bruma clara y difusa */
  opacity: 0.7; /* suave */
  animation: niebla-deriva 9s ease-in-out infinite alternate; /* va y viene (muy despacio) */
} /* fin de la regla .niebla__bruma */
.niebla__bruma:nth-child(1) { top: 8%; left: -10%; } /* arriba a la izquierda */
.niebla__bruma:nth-child(2) { top: 40%; left: 30%; animation-duration: 12s; animation-delay: -4s; } /* al centro */
.niebla__bruma:nth-child(3) { top: 66%; left: -5%; animation-duration: 10s; animation-delay: -7s; } /* abajo */
@keyframes niebla-deriva {
  from { transform: translateX(0); } /* a un lado */
  to { transform: translateX(40%); } /* al otro */
} /* fin de @keyframes niebla-deriva */
.juego-opciones .juego-opcion {
  position: relative; /* referencia para las chispas de la palabra elegida */
} /* fin de la regla de la posición de las palabras */
.niebla__chispa {
  position: absolute; /* sobre la palabra */
  left: 50%; /* al centro */
  top: 50%; /* al centro */
  width: 7px; /* chispa */
  height: 7px; /* redonda */
  margin: -3.5px; /* centrada */
  border-radius: 50%; /* círculo */
  background: var(--chispa-color, var(--nube-1)); /* de un color pastel (lo pone el JavaScript) */
  box-shadow: 0 0 0 1px rgb(42 35 64 / 0.25); /* contorno muy suave para verla sobre fondos claros */
  pointer-events: none; /* decorativa */
  animation: niebla-chispa 600ms ease-out forwards; /* sale hacia afuera */
} /* fin de la regla .niebla__chispa */
@keyframes niebla-chispa {
  from { opacity: 1; transform: rotate(var(--angulo)) translateY(0); } /* desde el centro de la palabra */
  to { opacity: 0; transform: rotate(var(--angulo)) translateY(-38px); } /* hacia afuera, en su dirección */
} /* fin de @keyframes niebla-chispa */
.maceta {
  position: relative; /* referencia para las chispas y la mariposa */
} /* fin de la regla .maceta (posición) */
.maceta:not(.maceta--florecida):hover .maceta__dibujo {
  animation: maceta-meneo 600ms ease-in-out; /* la maceta se menea al pasar el mouse */
} /* fin de la regla del meneo */
@keyframes maceta-meneo {
  25% { transform: rotate(-4deg); } /* a un lado */
  75% { transform: rotate(4deg); } /* al otro */
} /* fin de @keyframes maceta-meneo */
.jardin__chispa {
  position: absolute; /* sobre la maceta */
  left: 50%; /* al centro */
  top: 30%; /* cerca de la flor */
  width: 6px; /* chispa pequeña */
  height: 6px; /* redonda */
  margin: -3px; /* centrada */
  border-radius: 50%; /* círculo */
  background: var(--nubbit-color-estrella); /* amarilla */
  pointer-events: none; /* decorativa */
  animation: jardin-chispa 800ms ease-out forwards; /* sale hacia afuera */
} /* fin de la regla .jardin__chispa */
@keyframes jardin-chispa {
  from { opacity: 1; transform: rotate(var(--angulo)) translateY(0); } /* desde el centro de la flor */
  to { opacity: 0; transform: rotate(var(--angulo)) translateY(-34px); } /* hacia afuera, en su dirección */
} /* fin de @keyframes jardin-chispa */
.jardin__mariposa {
  position: absolute; /* sobre la maceta */
  top: -6px; /* arriba */
  right: -8px; /* a la derecha */
  width: 22px; /* tamaño */
  height: 18px; /* tamaño */
  pointer-events: none; /* decorativa */
  animation: mariposa 2.4s ease-in-out infinite alternate; /* revolotea despacio */
} /* fin de la regla .jardin__mariposa */
@keyframes mariposa {
  from { transform: translate(0, 0) scaleX(1); } /* alas abiertas */
  50% { transform: translate(-6px, -6px) scaleX(0.7); } /* aletea */
  to { transform: translate(-12px, 2px) scaleX(1); } /* se corre un poquito */
} /* fin de @keyframes mariposa */

/* --- Paisaje del Templo de sol (js/juegos/paisaje-templo.js): fondo del DJ y del Jardín de Gratitud ---
   Solo decoración, detrás de los botones: sol con rayos, nubes, pajaritos, colinas y un templito; en el DJ,
   la tarima del escenario; en el jardín, una cerquita y pasto. */
.paisaje-templo {
  --alto-colinas: 40%; /* alto de las colinas (el templito se para encima) */
  position: absolute; /* detrás de todo lo de la escena */
  inset: 0; /* la cubre entera */
  overflow: hidden; /* respeta las esquinas */
  border-radius: inherit; /* las mismas esquinas de la escena */
  pointer-events: none; /* no recibe toques: los botones siguen funcionando igual */
} /* fin de la regla .paisaje-templo */
.paisaje-templo--jardin {
  --alto-colinas: 48%; /* en el jardín, colinas un poco más altas */
} /* fin de la regla .paisaje-templo--jardin */
.paisaje-templo__sol {
  position: absolute; /* arriba a la derecha */
  top: 6px; /* (ídem) */
  right: 10px; /* (ídem) */
  width: 3.5rem; /* 56 px */
  height: 3.5rem; /* cuadrado */
  transition: transform 800ms ease-out; /* en el jardín sube suave con cada flor */
} /* fin de la regla .paisaje-templo__sol */
.paisaje-templo--jardin .paisaje-templo__sol {
  transform: translateY(calc((1 - var(--subida, 0)) * 1.75rem)); /* empieza más abajo y sube con cada flor */
} /* fin de la regla del sol del jardín */
.paisaje-templo__rayos {
  stroke: var(--isla-luz); /* rayos dorados */
  stroke-width: 3; /* gruesos */
  stroke-linecap: round; /* puntas redondas */
  transform-box: view-box; /* gira alrededor del centro del dibujo */
  transform-origin: 50% 50%; /* (ídem) */
  animation: paisaje-rayos 40s linear infinite; /* una vuelta muy lenta */
} /* fin de la regla .paisaje-templo__rayos */
.paisaje-templo__disco {
  fill: var(--isla-luz); /* el sol */
  transform-box: view-box; /* late desde el centro */
  transform-origin: 50% 50%; /* (ídem) */
} /* fin de la regla .paisaje-templo__disco */
@keyframes paisaje-rayos {
  to { transform: rotate(360deg); } /* una vuelta */
} /* fin de @keyframes paisaje-rayos */
/* Mientras suena la canción del DJ, el sol gira más rápido y late al compás (crece un poquito, sin destellos). */
.dj--sonando .paisaje-templo__rayos {
  animation-duration: 8s; /* más rápido */
} /* fin de la regla de los rayos con música */
.dj--sonando .paisaje-templo__disco {
  animation: paisaje-sol-late var(--dj-pulso, 0.45s) ease-in-out infinite alternate; /* al ritmo de las notas */
} /* fin de la regla del sol con música */
@keyframes paisaje-sol-late {
  to { transform: scale(1.15); } /* un poquito más grande */
} /* fin de @keyframes paisaje-sol-late */
.paisaje-templo__nube {
  position: absolute; /* arriba */
  fill: var(--isla-niebla); /* blanca (gris suave de noche) */
  opacity: 0.9; /* casi opaca */
  animation: paisaje-nube 18s ease-in-out infinite alternate; /* pasa despacio y vuelve */
} /* fin de la regla .paisaje-templo__nube */
.paisaje-templo__nube--1 {
  top: 10px; /* arriba */
  left: 6%; /* a la izquierda */
  width: 4.5rem; /* 72 px */
} /* fin de la regla .paisaje-templo__nube--1 */
.paisaje-templo__nube--2 {
  top: 34px; /* un poco más abajo */
  left: 48%; /* al centro */
  width: 3.25rem; /* más pequeña */
  animation-duration: 24s; /* a otro ritmo */
  animation-direction: alternate-reverse; /* hacia el otro lado */
} /* fin de la regla .paisaje-templo__nube--2 */
@keyframes paisaje-nube {
  to { transform: translateX(2.5rem); } /* 40 px hacia la derecha */
} /* fin de @keyframes paisaje-nube */
.paisaje-templo__ave {
  position: absolute; /* en el cielo */
  width: 1.375rem; /* 22 px */
  fill: none; /* solo la línea */
  stroke: var(--isla-texto); /* del color del texto de la isla */
  stroke-width: 2; /* fina */
  stroke-linecap: round; /* puntas redondas */
  opacity: 0.5; /* suave (están lejos) */
  animation: paisaje-ave 7s ease-in-out infinite alternate; /* planea */
} /* fin de la regla .paisaje-templo__ave */
.paisaje-templo__ave--1 {
  top: 18%; /* arriba */
  left: 28%; /* a la izquierda */
} /* fin de la regla .paisaje-templo__ave--1 */
.paisaje-templo__ave--2 {
  top: 26%; /* un poco más abajo */
  left: 36%; /* al lado */
  width: 1rem; /* más pequeño (más lejos) */
  animation-duration: 9s; /* a otro ritmo */
} /* fin de la regla .paisaje-templo__ave--2 */
.paisaje-templo__ave--3 {
  top: 12%; /* arriba */
  left: 68%; /* a la derecha */
  animation-duration: 11s; /* a otro ritmo */
  animation-direction: alternate-reverse; /* hacia el otro lado */
} /* fin de la regla .paisaje-templo__ave--3 */
@keyframes paisaje-ave {
  to { transform: translate(1.5rem, -0.5rem); } /* planea hacia un lado y sube un poquito */
} /* fin de @keyframes paisaje-ave */
.paisaje-templo__colinas {
  position: absolute; /* abajo */
  left: 0; /* de lado a lado */
  bottom: 0; /* (ídem) */
  width: 100%; /* todo el ancho */
  height: var(--alto-colinas); /* su alto */
} /* fin de la regla .paisaje-templo__colinas */
.paisaje-templo__colina-lejos {
  fill: var(--templo-colina); /* verde */
  opacity: 0.55; /* más suave: está lejos */
} /* fin de la regla .paisaje-templo__colina-lejos */
.paisaje-templo__colina-cerca {
  fill: var(--templo-colina); /* verde */
} /* fin de la regla .paisaje-templo__colina-cerca */
.paisaje-templo__templo {
  position: absolute; /* sobre la colina de atrás, a la izquierda */
  left: 5%; /* (ídem) */
  bottom: calc(var(--alto-colinas) * 0.6); /* parado en la colina */
  width: 2.75rem; /* 44 px */
} /* fin de la regla .paisaje-templo__templo */
.paisaje-templo__techo,
.paisaje-templo__piso { /* y el escalón */
  fill: var(--templo-cerca); /* blanco cálido */
  stroke: var(--isla-forma); /* contorno dorado */
  stroke-width: 1.5; /* fino */
  stroke-linejoin: round; /* esquinas redondas */
} /* fin de la regla del techo y el piso */
.paisaje-templo__columnas {
  stroke: var(--templo-cerca); /* columnas blancas */
  stroke-width: 3.5; /* gruesas */
} /* fin de la regla .paisaje-templo__columnas */
.paisaje-templo__tarima {
  position: absolute; /* el escenario del DJ */
  left: 50%; /* centrada */
  top: 86%; /* abajo (bajo los pies de Nubbit) */
  width: 68%; /* óvalo ancho */
  height: 16%; /* y plano */
  border-radius: 50%; /* óvalo */
  background: var(--isla-forma); /* dorado suave */
  transform: translate(-50%, -50%); /* centrada de verdad */
} /* fin de la regla .paisaje-templo__tarima */
.paisaje-templo__cerca {
  position: absolute; /* detrás de las macetas */
  left: 0; /* de lado a lado */
  right: 0; /* (ídem) */
  bottom: 1rem; /* sobre el pasto */
  height: 2.25rem; /* 36 px */
  opacity: 0.85; /* un poco suave */
  background: /* dos travesaños y tablitas */
    linear-gradient(var(--templo-cerca), var(--templo-cerca)) 0 30% / 100% 4px no-repeat,
    linear-gradient(var(--templo-cerca), var(--templo-cerca)) 0 72% / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--templo-cerca) 0 7px, transparent 7px 20px);
} /* fin de la regla .paisaje-templo__cerca */
.paisaje-templo__pasto {
  position: absolute; /* abajo del todo */
  left: 0; /* de lado a lado */
  right: 0; /* (ídem) */
  bottom: 0; /* (ídem) */
  height: 1.25rem; /* 20 px */
  background: /* florecitas repartidas sobre el pasto */
    radial-gradient(circle at 12px 8px, var(--isla-luz) 0 3px, transparent 3.5px) 0 0 / 46px 100%,
    radial-gradient(circle at 30px 13px, var(--isla-acento) 0 2.5px, transparent 3px) 0 0 / 58px 100%,
    var(--templo-colina); /* el pasto */
} /* fin de la regla .paisaje-templo__pasto */

/* ---------------------------------------------------------------------
   9 b. El camino de niveles de cada isla (isla-juegos.html)
   Un camino que serpentea de abajo hacia arriba, con un círculo por nivel, estrellas encima, Nubbit en el
   nivel que sigue, un regalo que abre el segundo juego y un sol al final que ilumina la isla. Lo arma
   js/paginas/isla-juegos.js. Sin vidas, sin cronómetros y sin puntajes: las estrellas solo dicen «completado».
   --------------------------------------------------------------------- */
.camino-juegos {
  display: grid; /* los dos juegos */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); /* lado a lado si caben */
  gap: var(--espacio-3); /* 16 px */
  margin: 0 0 var(--espacio-4); /* 24 px debajo */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .camino-juegos */
.camino-juego {
  padding: var(--espacio-3); /* 16 px */
  border: 1px solid var(--isla-borde); /* borde de la isla */
  border-radius: var(--radio); /* esquinas */
  background: var(--color-superficie); /* fondo de tarjeta */
} /* fin de la regla .camino-juego */
.camino-juego h2 {
  margin: 0 0 var(--espacio-1); /* 4 px debajo */
  font-size: var(--texto-normal); /* 16 px */
} /* fin de la regla .camino-juego h2 */
.camino-juego p {
  margin: 0; /* sin márgenes */
  font-size: var(--texto-pequeno); /* 14 px */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .camino-juego p */
.camino-juego--bloqueado {
  border-style: dashed; /* rayitas: todavía no se abre */
  background: var(--color-superficie-suave); /* lila muy claro */
} /* fin de la regla .camino-juego--bloqueado */

.camino {
  position: relative; /* referencia para los niveles */
  max-width: 26rem; /* ancho máximo (como la pantalla de un celular) */
  margin: 0 auto var(--espacio-4); /* centrado y 24 px debajo */
  overflow: hidden; /* respeta las esquinas */
  border: 1px solid var(--isla-borde); /* borde de la isla */
  border-radius: var(--radio-grande); /* esquinas de 24 px */
  background: linear-gradient(var(--isla-cielo), var(--isla-fondo) 45%, var(--isla-mar)); /* cielo → agua */
} /* fin de la regla .camino */
.camino__svg {
  display: block; /* sin espacio extra */
  width: 100%; /* todo el ancho */
  height: auto; /* proporcional */
} /* fin de la regla .camino__svg */
.camino__sol { fill: var(--isla-luz); opacity: 0.45; } /* sol suave arriba */
.camino__nube { fill: var(--isla-niebla); opacity: 0.6; } /* nubes */
.camino__piedra { fill: var(--isla-forma); opacity: 0.4; } /* piedras en el agua, abajo */
.camino__orilla { fill: none; stroke: var(--isla-borde); stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; } /* borde del camino */
.camino__ruta { fill: none; stroke: var(--color-superficie); stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; } /* el camino */
.camino__puntos {
  position: absolute; /* encima del dibujo */
  inset: 0; /* lo cubre todo */
  margin: 0; /* sin márgenes de lista */
  padding: 0; /* sin sangría */
  list-style: none; /* sin números de lista */
} /* fin de la regla .camino__puntos */
.camino__punto {
  position: absolute; /* lo ubica isla-juegos.js con left y top en % */
  display: flex; /* contenido centrado */
  flex-direction: column; /* en columna */
  align-items: center; /* centrado */
  transform: translate(-50%, -50%); /* el centro del círculo queda en su punto */
} /* fin de la regla .camino__punto */
/* El círculo de cada nivel */
.camino__nivel {
  display: grid; /* centra el número */
  place-items: center; /* centrado */
  width: 58px; /* 58 px: más que los 44 px mínimos para tocar */
  height: 58px; /* círculo */
  border: 4px solid var(--color-superficie); /* aro blanco, como en el camino */
  border-radius: 50%; /* redondo */
  background: var(--color-primario-suave); /* lila */
  color: var(--color-primario); /* número violeta */
  font-size: 1.3rem; /* número grande */
  font-weight: 700; /* negrita */
  text-decoration: none; /* sin subrayado */
  box-shadow: var(--sombra); /* sombra suave */
} /* fin de la regla .camino__nivel */
a.camino__nivel:hover {
  transform: translateY(-2px); /* se levanta un poco */
  color: var(--color-primario); /* el número no cambia de color */
} /* fin de la regla a.camino__nivel:hover */
a.camino__nivel:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul con teclado */
  outline-offset: 3px; /* separado */
} /* fin de la regla a.camino__nivel:focus-visible */
.camino__nivel--completado,
.camino__nivel--completado:hover { /* también con el mouse encima */
  background: var(--color-primario); /* violeta lleno */
  color: var(--color-sobre-primario); /* número claro */
} /* fin de la regla .camino__nivel--completado */
.camino__nivel--siguiente {
  width: 66px; /* el que sigue es un poco más grande */
  height: 66px; /* círculo */
  background: var(--color-primario-hover); /* violeta oscuro */
  color: var(--color-sobre-primario); /* número claro */
  animation: juego-pista 1.6s ease-in-out infinite; /* halo que late despacio */
} /* fin de la regla .camino__nivel--siguiente */
.camino__nivel--bloqueado {
  background: var(--color-superficie-suave); /* lila muy claro */
  color: var(--color-texto-suave); /* gris violeta */
  border-style: dashed; /* rayitas: todavía no se puede */
  box-shadow: none; /* sin sombra */
} /* fin de la regla .camino__nivel--bloqueado */
.camino__nivel .icono {
  width: 1.2em; /* candado del tamaño del número */
  height: 1.2em; /* cuadrado */
} /* fin de la regla del candado */
/* Las tres estrellas encima de cada nivel: se encienden al completarlo (no son un puntaje) */
.camino__estrellas {
  position: absolute; /* encima del círculo */
  bottom: calc(100% + 2px); /* justo arriba */
  display: flex; /* en fila */
  align-items: flex-end; /* la del medio, más alta */
  gap: 1px; /* juntitas */
  pointer-events: none; /* no se tocan */
} /* fin de la regla .camino__estrellas */
.camino__estrellas .icono {
  width: 18px; /* estrellita */
  height: 18px; /* cuadrada */
  fill: var(--color-borde-control); /* apagada: gris */
  stroke: none; /* sin borde */
} /* fin de la regla de las estrellas apagadas */
.camino__estrellas .icono:nth-child(2) {
  width: 24px; /* la del medio, más grande (como en el dibujo de referencia) */
  height: 24px; /* cuadrada */
} /* fin de la regla de la estrella del medio */
.camino__estrellas--encendidas .icono {
  fill: var(--nubbit-color-estrella); /* encendidas: amarillas */
  stroke: #b07a10; /* contorno ámbar */
  stroke-width: 1.5; /* fino */
} /* fin de la regla de las estrellas encendidas */
/* Nubbit encima del nivel que sigue, en una burbujita (como el avatar del dibujo de referencia) */
.camino__avatar {
  position: absolute; /* al lado del círculo */
  bottom: 60%; /* arriba */
  left: 70%; /* a la derecha */
  width: 46px; /* tamaño */
  height: 46px; /* cuadrado */
  padding: 3px; /* aire */
  border: 3px solid var(--color-superficie); /* aro blanco */
  border-radius: 14px; /* esquinas redondeadas */
  background: var(--color-primario-suave); /* lila */
  box-shadow: var(--sombra); /* sombra */
  pointer-events: none; /* no se toca (el nivel sí) */
} /* fin de la regla .camino__avatar */
/* Regalo (abre el juego 2) y sol final (ilumina la isla) */
.camino__regalo,
.camino__final { /* y el sol del final */
  display: grid; /* centra el dibujo */
  place-items: center; /* centrado */
  width: 74px; /* más grande que un nivel */
  height: 74px; /* círculo */
  border: 4px dotted var(--isla-borde); /* borde de puntitos, como una nube */
  border-radius: 50%; /* redondo */
  background: var(--color-superficie); /* blanco */
  box-shadow: var(--sombra); /* sombra */
} /* fin de la regla del regalo y del sol */
.camino__regalo svg,
.camino__final svg { /* y el dibujo del sol */
  width: 46px; /* tamaño del dibujo */
  height: 46px; /* cuadrado */
} /* fin de la regla de los dibujos */
.camino__regalo--cerrado svg,
.camino__final--apagado svg { /* y el sol apagado */
  filter: grayscale(0.7) opacity(0.7); /* todavía no: más gris */
} /* fin de la regla de lo que todavía no se abre */
.camino__final--encendido {
  border-color: var(--isla-acento); /* borde de color */
  box-shadow: 0 0 0 6px var(--isla-luz), var(--sombra); /* halo de luz: la isla brilla */
} /* fin de la regla .camino__final--encendido */
.camino-regalo__caja { fill: #f2c94c; stroke: #b07a10; stroke-width: 1.5; } /* caja dorada */
.camino-regalo__cinta { fill: var(--color-primario); } /* cinta violeta */
.camino-sol__centro { fill: var(--nubbit-color-estrella); stroke: #b07a10; stroke-width: 1.5; } /* sol */
.camino-sol__rayo { stroke: #e0a31a; stroke-width: 3; stroke-linecap: round; } /* rayos */
/* Etiquetas: nombre del juego al comienzo de su tramo, y lo que dice el regalo y el sol */
.camino__etiqueta {
  margin-top: 4px; /* debajo del círculo */
  padding: 2px 10px; /* aire */
  border-radius: 999px; /* pastilla */
  background: var(--color-superficie); /* fondo claro para que se lea sobre el camino */
  color: var(--isla-texto); /* color de la isla */
  font-size: 0.8rem; /* pequeña */
  font-weight: 700; /* negrita */
  white-space: nowrap; /* en una sola línea */
  box-shadow: var(--sombra); /* sombra suave */
} /* fin de la regla .camino__etiqueta */
.camino__etiqueta-juego { /* (también la del regalo y la del sol) */
  position: absolute; /* debajo del primer nivel de cada juego */
  top: calc(100% + 6px); /* debajo del círculo */
} /* fin de la regla .camino__etiqueta-juego */

/* ---------------------------------------------------------------------
   10. Espacio de calma (espacio-calma.html)
   Reutiliza tarjeta, tarjeta-actividad, insignia, etiqueta-duracion y frase-nubbit de actividades.css;
   aquí solo se agrega la variante «destacada» para «Respira con Nubbit».
   --------------------------------------------------------------------- */
.tarjeta-actividad--destacada {
  border: 2px solid var(--color-primario); /* borde violeta: es la primera sugerencia */
} /* fin de la regla .tarjeta-actividad--destacada */

/* ---------------------------------------------------------------------
   10 b. Ambiente de las páginas de las islas
   El fondo animado de cada isla (lo arma js/fondo-islas.js), el marco y la celebración de juego.html y unos
   detalles del camino de niveles. Solo decoración: nada de esto se toca ni cambia cómo se juega, y todo
   queda quieto con "reducir movimiento" (sección 11).
   --------------------------------------------------------------------- */
/* El fondo: fijo en la ventana y DETRÁS de todo (z-index -1: encima del color de la página y debajo del
   contenido). Va dentro del <main>, así toma la paleta de la isla. */
.fondo-islas {
  position: fixed; /* quieto al desplazar la página */
  inset: 0; /* toda la ventana */
  z-index: -1; /* detrás del contenido */
  overflow: hidden; /* nada se sale */
  pointer-events: none; /* no recibe toques */
} /* fin de la regla .fondo-islas */
/* Resplandores suaves del color de la isla (muy transparentes: el texto se sigue leyendo igual) */
.fondo-islas__brillo {
  position: absolute; /* en su esquina */
  width: 70vmax; /* grandes */
  height: 70vmax; /* redondos */
  border-radius: 50%; /* círculo */
  background: radial-gradient(closest-side, var(--isla-acento), transparent); /* del centro hacia afuera */
  opacity: 0.16; /* muy suave */
  animation: fondo-respirar 16s ease-in-out infinite alternate; /* crece y se achica muy despacio */
} /* fin de la regla .fondo-islas__brillo */
.fondo-islas__brillo--1 {
  top: -35vmax; /* arriba a la izquierda */
  left: -25vmax; /* (ídem) */
} /* fin de la regla .fondo-islas__brillo--1 */
.fondo-islas__brillo--2 {
  top: 20vh; /* a la derecha, un poco abajo */
  right: -40vmax; /* (ídem) */
  background: radial-gradient(closest-side, var(--isla-luz), transparent); /* del color de luz */
  opacity: 0.22; /* suave */
  animation-delay: -6s; /* a otro ritmo */
} /* fin de la regla .fondo-islas__brillo--2 */
.fondo-islas__brillo--3 {
  bottom: -45vmax; /* abajo */
  left: 15vw; /* (ídem) */
  background: radial-gradient(closest-side, var(--isla-mar), transparent); /* del color del agua */
  opacity: 0.35; /* suave */
  animation-delay: -11s; /* a otro ritmo */
} /* fin de la regla .fondo-islas__brillo--3 */
.fondo-islas--mapa .fondo-islas__brillo {
  background: radial-gradient(closest-side, var(--isla-acento), transparent); /* en el mapa, el acento de cada isla */
  opacity: 0.18; /* suave */
} /* fin de la regla de los resplandores del mapa */
@keyframes fondo-respirar {
  from { transform: scale(0.9); } /* un poco más pequeño */
  to { transform: scale(1.1); } /* un poco más grande */
} /* fin de @keyframes fondo-respirar */
/* Olas que pasan abajo */
.fondo-islas__olas {
  position: absolute; /* abajo de la ventana */
  left: 0; /* de lado a lado */
  bottom: 0; /* (ídem) */
  width: 100%; /* todo el ancho */
  height: 7rem; /* 112 px */
} /* fin de la regla .fondo-islas__olas */
.fondo-islas__ola {
  fill: var(--isla-mar); /* color del agua de la isla */
  transform-box: fill-box; /* el 50 % es la mitad del largo de la ola */
  animation: fondo-olas 48s linear infinite; /* pasa muy despacio */
} /* fin de la regla .fondo-islas__ola */
.fondo-islas__ola--lejos {
  opacity: 0.25; /* la de atrás, más suave */
} /* fin de la regla .fondo-islas__ola--lejos */
.fondo-islas__ola--cerca {
  opacity: 0.4; /* la de adelante */
  animation-duration: 32s; /* un poco más rápida */
} /* fin de la regla .fondo-islas__ola--cerca */
@keyframes fondo-olas {
  to { transform: translateX(-50%); } /* corre medio largo y vuelve a empezar sin que se note */
} /* fin de @keyframes fondo-olas */
/* Partículas: por defecto, puntitos de luz que suben despacio (Templo y, con su color, Volcán y mapa).
   --x, --y, --tam, --duracion, --retraso y --deriva los pone fondo-islas.js (al azar). */
.fondo-islas__particula {
  position: absolute; /* en su lugar */
  left: var(--x); /* a lo ancho */
  top: 100%; /* nacen abajo de la ventana */
  width: var(--tam); /* tamaño */
  height: var(--tam); /* redondas */
  border-radius: 50%; /* círculo */
  background: var(--isla-luz); /* color de luz */
  box-shadow: 0 0 calc(var(--tam) * 2) var(--isla-acento); /* resplandor */
  opacity: 0; /* aparecen en la animación */
  animation: fondo-subir var(--duracion) linear var(--retraso) infinite; /* suben */
} /* fin de la regla .fondo-islas__particula */
@keyframes fondo-subir {
  0% { transform: translate(0, 0); opacity: 0; } /* nace */
  12% { opacity: 0.75; } /* se ve */
  85% { opacity: 0.5; } /* se va apagando */
  100% { transform: translate(var(--deriva), -110vh); opacity: 0; } /* llega arriba y se apaga */
} /* fin de @keyframes fondo-subir */
/* Volcán: brasas */
.fondo-islas--volcan .fondo-islas__particula {
  background: var(--isla-acento); /* naranja suave */
  box-shadow: 0 0 calc(var(--tam) * 2) var(--isla-luz); /* resplandor cálido */
} /* fin de la regla de las brasas */
/* Mapa: chispitas del color de cada isla */
.fondo-islas--mapa .fondo-islas__particula {
  background: var(--isla-acento); /* el color de su isla */
  box-shadow: 0 0 calc(var(--tam) * 2) var(--isla-acento); /* resplandor del mismo color */
} /* fin de la regla de las chispitas del mapa */
/* Lago: lluvia fina que cae */
.fondo-islas--lago .fondo-islas__particula {
  top: -6%; /* nace arriba de la ventana */
  width: 2px; /* gota fina */
  height: calc(var(--tam) * 3); /* alargada */
  border-radius: 2px; /* puntas redondas */
  background: var(--isla-acento); /* azul */
  box-shadow: none; /* sin resplandor */
  animation-name: fondo-llover; /* cae */
  animation-duration: calc(var(--duracion) / 4); /* de 2 a 4,5 s */
} /* fin de la regla de la lluvia */
@keyframes fondo-llover {
  0% { transform: translate(0, 0); opacity: 0; } /* nace */
  10% { opacity: 0.45; } /* se ve */
  90% { opacity: 0.35; } /* casi abajo */
  100% { transform: translate(-30px, 110vh); opacity: 0; } /* llega abajo */
} /* fin de @keyframes fondo-llover */
/* Bosque: luciérnagas que vagan y brillan despacio */
.fondo-islas--bosque .fondo-islas__particula {
  top: var(--y); /* en cualquier altura */
  box-shadow: 0 0 10px 2px var(--isla-luz); /* halo amarillo */
  animation: fondo-vagar var(--duracion) ease-in-out var(--retraso) infinite alternate,
    fondo-titilar 3.2s ease-in-out var(--retraso) infinite alternate; /* vagan y titilan (menos de una vez por segundo) */
} /* fin de la regla de las luciérnagas */
@keyframes fondo-vagar {
  from { transform: translate(0, 0); } /* donde nació */
  50% { transform: translate(var(--deriva), -30px); } /* se corre */
  to { transform: translate(calc(var(--deriva) * -1), 20px); } /* y vuelve por otro lado */
} /* fin de @keyframes fondo-vagar */
@keyframes fondo-titilar {
  from { opacity: 0.1; } /* casi apagada */
  to { opacity: 0.85; } /* brilla */
} /* fin de @keyframes fondo-titilar */
/* Laberinto: nubecitas de colores que cruzan */
.fondo-islas--laberinto .fondo-islas__particula {
  left: -14%; /* nacen a la izquierda, afuera */
  top: var(--y); /* en cualquier altura */
  width: calc(var(--tam) * 7); /* alargadas */
  height: calc(var(--tam) * 2.6); /* bajitas */
  border-radius: 999px; /* pastilla */
  box-shadow: none; /* sin resplandor */
  opacity: 0.45; /* suaves */
  animation: fondo-cruzar calc(var(--duracion) * 3) linear calc(var(--retraso) * 3) infinite; /* cruzan despacio */
} /* fin de la regla de las nubecitas */
.fondo-islas--laberinto .fondo-islas__particula::before {
  content: ""; /* el bulto de arriba de la nube */
  position: absolute; /* encima */
  left: 22%; /* (ídem) */
  bottom: 35%; /* (ídem) */
  width: 45%; /* tamaño */
  height: 130%; /* (ídem) */
  border-radius: 50%; /* redondo */
  background: inherit; /* del mismo color */
} /* fin de la regla del bulto de la nube */
.fondo-islas__particula--nube-1 { background: var(--nube-1); } /* rosa */
.fondo-islas__particula--nube-2 { background: var(--nube-2); } /* celeste */
.fondo-islas__particula--nube-3 { background: var(--nube-3); } /* menta */
.fondo-islas__particula--nube-4 { background: var(--nube-4); } /* amarillo */
.fondo-islas__particula--nube-5 { background: var(--nube-5); } /* lavanda */
.fondo-islas__particula--nube-6 { background: var(--nube-6); } /* durazno */
@keyframes fondo-cruzar {
  from { transform: translateX(0); } /* a la izquierda */
  to { transform: translateX(130vw); } /* hasta salir por la derecha */
} /* fin de @keyframes fondo-cruzar */

/* Marco del juego (juego.html): la isla en miniatura junto al título, la barra como una pastilla y el área
   con un borde de luz del color de la isla */
.titulo-juego {
  display: flex; /* la islita y el texto en fila */
  align-items: center; /* centrados */
  gap: var(--espacio-2); /* 8 px */
} /* fin de la regla .titulo-juego (marco) */
.titulo-juego__isla {
  flex: none; /* no se encoge */
  width: 3.5rem; /* 56 px */
} /* fin de la regla .titulo-juego__isla */
.barra-juego {
  padding: 6px 6px 6px 6px; /* aire alrededor de los botones */
  border: 1px solid var(--isla-borde, var(--color-borde)); /* borde de la isla */
  border-radius: 1.75rem; /* pastilla en una fila (28 px = la mitad de su alto); si baja a dos filas, esquinas suaves */
  background: var(--isla-fondo, var(--color-superficie)); /* fondo de la isla */
  box-shadow: var(--sombra); /* sombra suave */
} /* fin de la regla .barra-juego (marco) */
.barra-juego__sonido {
  padding-right: var(--espacio-2); /* el interruptor no toca el borde de la pastilla */
} /* fin de la regla .barra-juego__sonido (marco) */
.area-juego {
  border-width: 2px; /* borde un poco más marcado */
  box-shadow:
    0 0 0 5px var(--isla-fondo), /* un marco del color de la isla */
    0 18px 40px -16px var(--isla-acento); /* y un resplandor abajo */
} /* fin de la regla .area-juego (marco) */
/* Cierre: luz detrás de Nubbit, Nubbit que salta, tres estrellas que aparecen y papelitos de colores */
.cierre-juego {
  position: relative; /* referencia para los papelitos */
  overflow: hidden; /* los papelitos no se salen */
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--isla-luz) 45%, transparent), transparent 42%), /* luz suave detrás de Nubbit */
    var(--isla-fondo); /* fondo de la isla */
} /* fin de la regla .cierre-juego (celebración) */
.cierre-juego__nubbit {
  animation: cierre-salto 900ms ease-out 200ms both; /* aparece con un saltito */
} /* fin de la regla .cierre-juego__nubbit (celebración) */
@keyframes cierre-salto {
  0% { transform: scale(0.6) translateY(20px); opacity: 0; } /* pequeñito */
  60% { transform: scale(1.08) translateY(-8px); opacity: 1; } /* salta */
  100% { transform: none; } /* en su lugar */
} /* fin de @keyframes cierre-salto */
.cierre-juego__estrellas {
  display: flex; /* en fila */
  justify-content: center; /* centradas */
  align-items: flex-end; /* la del medio, más alta */
  gap: var(--espacio-2); /* 8 px */
  margin-bottom: var(--espacio-2); /* 8 px debajo */
} /* fin de la regla .cierre-juego__estrellas */
.cierre-juego__estrellas .icono {
  width: 2.25rem; /* 36 px */
  height: 2.25rem; /* (ídem) */
  fill: var(--nubbit-color-estrella); /* amarilla */
  stroke: #b07a10; /* contorno ámbar (como las estrellas de Nubbit) */
  animation: cierre-estrella 500ms ease-out 400ms both; /* aparece girando */
} /* fin de la regla de las estrellas del cierre */
.cierre-juego__estrellas .icono:nth-child(2) {
  width: 2.75rem; /* la del medio, más grande */
  height: 2.75rem; /* (ídem) */
  animation-delay: 650ms; /* después de la primera */
} /* fin de la regla de la estrella del medio */
.cierre-juego__estrellas .icono:nth-child(3) {
  animation-delay: 900ms; /* la última */
} /* fin de la regla de la tercera estrella */
@keyframes cierre-estrella {
  from { transform: scale(0) rotate(-40deg); opacity: 0; } /* no se ve */
  70% { transform: scale(1.2) rotate(8deg); opacity: 1; } /* aparece grande */
  to { transform: none; } /* en su lugar */
} /* fin de @keyframes cierre-estrella */
.cierre-juego__confeti {
  position: absolute; /* encima de la tarjeta */
  inset: 0; /* toda la tarjeta */
  overflow: hidden; /* no se salen */
  pointer-events: none; /* no tapan los botones */
} /* fin de la regla .cierre-juego__confeti */
.cierre-juego__confeti span {
  position: absolute; /* cada papelito */
  top: -14px; /* nacen arriba */
  left: var(--x); /* a lo ancho (lo pone juego.js) */
  width: 8px; /* papelito */
  height: 12px; /* rectangular */
  border-radius: 2px; /* esquinas suaves */
  background: var(--isla-acento); /* color de la isla */
  opacity: 0; /* aparecen en la animación */
  animation: cierre-confeti var(--duracion) ease-in var(--retraso) forwards; /* caen una sola vez */
} /* fin de la regla de los papelitos */
.cierre-juego__confeti span:nth-child(5n + 2) { background: var(--nubbit-color-estrella); } /* amarillo */
.cierre-juego__confeti span:nth-child(5n + 3) { background: var(--color-primario); border-radius: 50%; width: 9px; height: 9px; } /* violeta, redondo */
.cierre-juego__confeti span:nth-child(5n + 4) { background: var(--isla-forma); } /* color de la isla */
.cierre-juego__confeti span:nth-child(5n + 5) { background: var(--isla-luz); border-radius: 50%; width: 9px; height: 9px; } /* luz, redondo */
@keyframes cierre-confeti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; } /* arriba */
  80% { opacity: 1; } /* cayendo */
  100% { transform: translate(var(--deriva), 480px) rotate(var(--giro)); opacity: 0; } /* abajo, se desvanece */
} /* fin de @keyframes cierre-confeti */

/* Camino de niveles: sombra suave bajo el camino, una línea de puntos en el centro y tarjetas de los juegos
   con el color de la isla */
.camino__sombra { fill: none; stroke: #2a2340; stroke-opacity: 0.12; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; } /* sombra */
.camino__linea { fill: none; stroke: var(--isla-borde); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 14; } /* puntos del centro */
.camino__isleta { fill: var(--isla-tierra); opacity: 0.7; } /* islitas con adornos a los lados del camino */
.camino__isleta-orilla { fill: var(--isla-luz); opacity: 0.55; } /* su orilla */
.camino-juego {
  border-left: 5px solid var(--isla-acento); /* una franja del color de la isla */
  background: var(--isla-fondo); /* fondo de la isla */
} /* fin de la regla .camino-juego (color) */
.camino-juego--bloqueado {
  border-left-color: var(--isla-borde); /* todavía cerrado: franja suave */
} /* fin de la regla .camino-juego--bloqueado (color) */

/* Página del juego en el celular (menos de 900 px: el menú va abajo). Mientras se juega, el menú de abajo
   se esconde para que el juego use toda la pantalla (arriba siguen «Salir», «Pausa», el sonido y «Necesito
   apoyo»); vuelve en el cierre del nivel. :has() = «la página que tiene el juego visible» (en navegadores
   viejos, sin :has, el menú simplemente se queda). El alto del área lo ajusta juego.js. */
@media (max-width: 899px) {
  body.pagina-juego:has(#vista-juego:not([hidden])) .menu {
    display: none; /* sin menú de abajo mientras se juega */
  } /* fin de la regla del menú escondido */
  body.pagina-juego:has(#vista-juego:not([hidden])) main {
    padding-bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom)); /* sin el espacio del menú */
  } /* fin de la regla del relleno de abajo */
  body.pagina-juego main {
    padding-top: var(--espacio-3); /* 16 px arriba en vez de 40: más lugar para el juego */
  } /* fin de la regla del relleno de arriba */
  .area-juego {
    min-height: 280px; /* mínimo más bajo: en el celular, juego.js le pone el alto visible */
  } /* fin de la regla del área en el celular */
} /* fin del @media (max-width: 899px) del juego */
/* Celular de lado (poca altura): la cabecera deja de quedarse pegada arriba, así juego.js puede dejar la
   barra del juego arriba de la pantalla y el área llena lo que queda (mínimo 200 px) */
@media (orientation: landscape) and (max-height: 500px) {
  body.pagina-juego .cabecera {
    position: static; /* la cabecera se va al desplazar: más lugar para el juego */
  } /* fin de la regla de la cabecera de lado */
  .area-juego {
    min-height: 200px; /* de lado hay poca altura */
  } /* fin de la regla del área de lado */
} /* fin del @media de lado */
/* Celulares angostos (menos de 480 px): título más pequeño y la barra compacta en una sola fila */
@media (max-width: 479px) {
  .titulo-juego {
    font-size: 1.125rem; /* 18 px */
  } /* fin de la regla del título en el celular */
  .titulo-juego__isla {
    width: 2.75rem; /* 44 px */
  } /* fin de la regla de la islita en el celular */
  .barra-juego {
    gap: var(--espacio-1); /* 4 px entre los botones */
    padding: 4px; /* menos aire */
  } /* fin de la regla de la barra en el celular */
  .barra-juego .boton {
    padding: 0 var(--espacio-2); /* 8 px a los lados (siguen midiendo 44 px de alto) */
  } /* fin de la regla de los botones de la barra en el celular */
  .barra-juego__sonido {
    gap: var(--espacio-2); /* 8 px entre «Sonido» y el interruptor */
    padding-right: 6px; /* el interruptor no toca el borde */
  } /* fin de la regla del sonido en el celular */
  .barra-juego__sonido label {
    font-size: var(--texto-pequeno); /* 14 px */
  } /* fin de la regla del texto «Sonido» en el celular */
  .dj__escena {
    height: 14rem; /* el escenario del DJ un poco más bajo: cabe más de la canción a la vista */
  } /* fin de la regla del escenario del DJ en el celular */
} /* fin del @media (max-width: 479px) del juego */

/* ---------------------------------------------------------------------
   11. Reducir movimiento (accesibilidad)
   base.css ya acorta todas las transiciones; aquí se quitan del todo la niebla que flota y el levantarse
   de las tarjetas. Los minijuegos también lo revisan desde JavaScript (js/juegos/base.js).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .isla-dibujo__niebla,
  .isla-dibujo__flota,
  .isla-dibujo__halo,
  .isla-dibujo__lava,
  .isla-dibujo__brasa,
  .isla-dibujo__lluvia,
  .isla-dibujo__onda,
  .isla-dibujo__destello,
  .isla-dibujo__rayos { /* y todo lo que se mueve en el dibujo de la isla */
    animation: none; /* la niebla queda quieta
  } /* fin de la regla de la niebla quieta */
  button.tarjeta-isla:hover,
  a.tarjeta-isla:hover { /* y los enlaces */
    transform: none; /* no se levantan */
  } /* fin de la regla de las tarjetas quietas */
  .dj-paso--salto,
  .dj-paso--izquierda,
  .dj-paso--derecha,
  .dj-paso--estira,
  .dj-paso--giro,
  .dj-paso--final,
  .dj__luz--pulso,
  .dj__elemento--toque { /* y el brillo del toque */
    animation: none; /* Nubbit no baila: la casilla y el elemento iluminados siguen mostrando la canción */
  } /* fin de la regla del DJ quieto */
  .dj__elemento--sonando {
    transform: translate(-50%, -50%); /* el elemento que suena brilla sin crecer */
  } /* fin de la regla del elemento quieto */
  .dj__casilla--sonando {
    transform: none; /* la casilla se ilumina sin moverse */
  } /* fin de la regla de la casilla quieta */
  .maceta__planta {
    transform: none; /* la flor aparece sin crecer */
    transition: none; /* de una vez */
  } /* fin de la regla de la flor quieta */
  /* Las pistas no laten: queda un halo quieto, para que se siga viendo qué tocar */
  .juego-pista,
  .camino__nivel--siguiente { /* y el nivel que sigue en el camino */
    animation: none; /* sin latido */
    box-shadow: 0 0 0 6px var(--isla-luz); /* halo quieto */
  } /* fin de la regla de las pistas quietas */
  .dj__nota-flotante,
  .dj__nubbit--salta,
  .dj__casilla--nueva,
  .niebla__chip--nueva,
  .juego-opcion--aparece,
  .niebla__destello,
  .jardin__mariposa,
  .maceta:not(.maceta--florecida):hover .maceta__dibujo { /* y el meneo de la maceta */
    animation: none; /* sin movimiento */
  } /* fin de la regla de las animaciones quietas */
  .jardin__chispa,
  .niebla__chispa { /* y las de las palabras */
    display: none; /* sin chispas */
  } /* fin de la regla de las chispas */
  .niebla__bruma {
    animation: none; /* la bruma queda quieta */
  } /* fin de la regla de la bruma quieta */
  a.camino__nivel:hover {
    transform: none; /* el nivel no se levanta */
  } /* fin de la regla del nivel quieto */
  .paisaje-templo__rayos,
  .paisaje-templo__disco,
  .paisaje-templo__nube,
  .paisaje-templo__ave { /* el paisaje del templo queda quieto (también con música) */
    animation: none; /* sin movimiento */
  } /* fin de la regla del paisaje quieto */
  .paisaje-templo__sol {
    transition: none; /* en el jardín, el sol cambia de lugar sin deslizarse */
  } /* fin de la regla del sol quieto */
  .fondo-islas__particula,
  .cierre-juego__confeti { /* y los papelitos del cierre */
    display: none; /* sin partículas que se mueven */
  } /* fin de la regla de las partículas */
  .fondo-islas__brillo,
  .fondo-islas__ola,
  .cierre-juego__nubbit,
  .cierre-juego__estrellas .icono { /* el fondo y el cierre quedan quietos */
    animation: none; /* sin movimiento */
  } /* fin de la regla del ambiente quieto */
} /* fin del @media (prefers-reduced-motion: reduce) */