/* ===== Aprendo Jugando — estilos ===== */
:root {
    --cielo-1: #bfe9ff;
    --cielo-2: #fff3d6;
    --tinta: #2d3a5a;
    --blanco: #ffffff;
    --sombra: 0 8px 0 rgba(45, 58, 90, .12), 0 14px 30px rgba(45, 58, 90, .12);
    --radio: 28px;
    --color: #4fc3f7;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
    font-family: "Baloo 2", "Nunito", "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
    font-size: 20px;
    color: var(--tinta);
    background: linear-gradient(180deg, var(--cielo-1), var(--cielo-2)) fixed;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

button, a { font: inherit; color: inherit; cursor: pointer; }
a { text-decoration: none; }
:focus-visible { outline: 5px solid #ffca28; outline-offset: 3px; }

/* ----- fondo ----- */
.fondo { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.nube {
    position: absolute; width: 180px; height: 56px; border-radius: 60px;
    background: rgba(255, 255, 255, .85);
    animation: flotar 60s linear infinite;
}
.nube::before, .nube::after {
    content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.nube::before { width: 80px; height: 80px; left: 26px; top: -36px; }
.nube::after  { width: 60px; height: 60px; right: 30px; top: -24px; }
.n1 { top: 12%; left: -200px; }
.n2 { top: 38%; left: -200px; animation-duration: 85s; animation-delay: -30s; transform: scale(.7); }
.n3 { top: 70%; left: -200px; animation-duration: 110s; animation-delay: -70s; transform: scale(1.2); opacity: .6; }
@keyframes flotar { to { left: 110%; } }

/* ----- barra superior ----- */
.barra {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
}
.barra h1 {
    flex: 1; margin: 0; text-align: center;
    font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.1;
}
.logo { font-size: 2.2rem; width: 60px; text-align: center; }
.ajustes { display: flex; gap: 8px; }

.boton-redondo {
    width: 60px; height: 60px; flex: none;
    display: grid; place-items: center;
    font-size: 1.7rem; line-height: 1;
    background: var(--blanco); border: 0; border-radius: 50%;
    box-shadow: 0 5px 0 rgba(45, 58, 90, .15);
    transition: transform .12s, box-shadow .12s, opacity .2s;
}
.boton-redondo:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(45, 58, 90, .15); }
.boton-redondo.apagado { opacity: .45; filter: grayscale(1); }
.boton-redondo[data-ajuste="calma"] { opacity: .45; filter: grayscale(1); }
.boton-redondo[data-ajuste="calma"].encendido { opacity: 1; filter: none; background: #d1c4e9; }

/* ----- menú ----- */
.menu { max-width: 1000px; margin: 0 auto; padding: 8px 20px 40px; }
.saludo { text-align: center; font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; margin: 6px 0 24px; }

.tarjetas {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tarjeta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 16px 20px;
    background: var(--blanco);
    border: 6px solid var(--color);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    transition: transform .15s;
}
.tarjeta:hover { transform: translateY(-6px) rotate(-1deg); }
.tarjeta:active { transform: translateY(4px); }
.tarjeta-emoji {
    width: 130px; height: 130px; display: grid; place-items: center;
    font-size: 4.6rem; line-height: 1;
    background: color-mix(in srgb, var(--color) 28%, white);
    border-radius: 50%;
}
.tarjeta-titulo { font-size: 1.5rem; font-weight: 800; text-align: center; line-height: 1.15; margin-top: 8px; }
.tarjeta-estrellas { min-height: 1.6em; font-size: 1.1rem; font-weight: 700; }

/* ----- juego ----- */
.juego { max-width: 1100px; margin: 0 auto; padding: 0 16px 28px; }

.instruccion {
    display: flex; align-items: center; gap: 14px;
    background: var(--blanco); border-radius: var(--radio);
    padding: 10px 20px 10px 10px; box-shadow: var(--sombra);
}
.instruccion p { margin: 0; font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.2; }
.instruccion .boton-redondo { background: var(--color); }

.progreso { display: flex; justify-content: center; gap: 12px; margin: 18px 0 14px; }
.punto {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, .8); border: 4px solid var(--color);
    transition: background .3s, transform .3s;
}
.punto.lleno { background: var(--color); transform: scale(1.15); }

.tablero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.escena {
    background: color-mix(in srgb, var(--color) 18%, white);
    border: 6px solid var(--blanco);
    border-radius: var(--radio); box-shadow: var(--sombra);
    display: grid; place-items: center; padding: 12px; min-height: 300px;
}
.dibujo { width: 100%; height: min(56vh, 470px); display: block; }

.bandeja {
    display: grid; gap: 14px; align-content: center;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.ficha {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 130px; padding: 10px;
    background: var(--blanco); border: 5px solid transparent; border-radius: 24px;
    box-shadow: 0 6px 0 rgba(45, 58, 90, .14);
    transition: transform .12s, opacity .3s, border-color .2s;
}
.ficha:active { transform: translateY(5px); }
.ficha-icono { font-size: 3.4rem; line-height: 1.1; }
.ficha-icono svg { width: 3.6rem; height: 3.6rem; display: block; }
.ficha-nombre { font-size: 1.15rem; font-weight: 700; text-align: center; line-height: 1.1; }
.ficha.hecha { opacity: .35; pointer-events: none; border-color: #81c784; }
.ficha.hecha .ficha-nombre::after { content: " ✔"; color: #43a047; }
.ficha.pista { border-color: #ffca28; animation: latir 1.1s ease-in-out infinite; }
.ficha.no { animation: negar .4s; }
@keyframes latir { 50% { transform: scale(1.06); } }
@keyframes negar { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* situación (juego de emociones) */
.situacion { font-size: clamp(6rem, 22vw, 11rem); line-height: 1; }
.situacion span { display: inline-block; }
.situacion span.entra { animation: aparecer .4s; }
@keyframes aparecer { from { transform: scale(.5); opacity: 0; } }

.situacion.chica { font-size: clamp(3rem, 9vw, 5.4rem); line-height: 1.25; text-align: center; max-width: 4.6em; }
.numero {
    display: grid; place-items: center; width: 1.25em; height: 1.25em; margin: 0 auto;
    font-weight: 800; color: #fff; background: var(--color); border-radius: 50%;
}

/* títulos de grupo en el menú */
.grupo {
    display: inline-block; margin: 26px 0 14px; padding: 4px 20px;
    font-size: 1.35rem; font-weight: 800;
    background: rgba(255, 255, 255, .8); border-radius: 40px;
}
.saludo + .grupo { margin-top: 0; }

/* memoria */
.tablero.solo { grid-template-columns: 1fr; }
.bandeja.memoria { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; width: 100%; }
.carta { min-height: 150px; background: var(--color); }
.carta::before { content: "❓"; font-size: 3.2rem; line-height: 1; }
.carta .ficha-icono, .carta .ficha-nombre { display: none; }
.carta.abierta { background: var(--blanco); border-color: var(--color); animation: aparecer .3s; }
.carta.abierta::before { display: none; }
.carta.abierta .ficha-icono, .carta.abierta .ficha-nombre { display: block; }
.carta.pareja { border-color: #81c784; background: #f1f8e9; }

/* ventana para elegir la voz */
.ventana-voces {
    border: 0; border-radius: 30px; padding: 24px 26px 26px; width: min(92vw, 440px);
    font: inherit; color: var(--tinta); box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.ventana-voces::backdrop { background: rgba(45, 58, 90, .45); }
.ventana-voces h2 { margin: 0 0 10px; font-size: 1.7rem; text-align: center; }
.ventana-voces label { display: block; font-weight: 700; margin-top: 10px; }
.ventana-voces select {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 1.05rem; color: inherit;
    background: #f3f7fc; border: 3px solid #cfdcec; border-radius: 16px;
}
.ventana-voces .aviso { font-size: 1rem; background: #fff3cd; border-radius: 14px; padding: 10px 14px; }
.ventana-voces .premio-botones { margin-top: 22px; }
.ventana-voces .boton-grande { min-width: 130px; }

/* tira de pasos (rutinas) */
.tira {
    list-style: none; margin: 0; padding: 4px; height: auto; width: 100%;
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.casilla {
    position: relative; min-height: 124px; padding: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .55); border: 4px dashed var(--color); border-radius: 22px;
    transition: background .4s, border-color .4s;
}
.casilla-numero {
    position: absolute; top: -10px; left: -10px; width: 38px; height: 38px;
    display: grid; place-items: center; font-weight: 800; color: #fff;
    background: var(--color); border-radius: 50%; border: 3px solid #fff;
}
.casilla-icono { font-size: 3rem; line-height: 1.1; }
.casilla-icono svg { width: 3.2rem; height: 3.2rem; display: block; }
.casilla-nombre { font-size: 1rem; font-weight: 700; text-align: center; line-height: 1.1; }
.casilla-icono, .casilla-nombre { opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s; }
.casilla.llena { background: #fff; border-style: solid; }
.casilla.llena .casilla-icono, .casilla.llena .casilla-nombre { opacity: 1; transform: none; }

/* ----- capas de los dibujos ----- */
.capa { opacity: 0; transition: opacity .5s, transform .5s; transform-box: fill-box; }
.nino .c-interior, .nino .c-camiseta, .nino .c-pantalon,
.nino .c-calcetines, .nino .c-zapatos, .c-toalla { transform: translateY(-26px); }

.hecho-interior   .c-interior,
.hecho-camiseta   .c-camiseta,
.hecho-pantalon   .c-pantalon,
.hecho-calcetines .c-calcetines,
.hecho-zapatos    .c-zapatos,
.modo-banarse     .c-interior { opacity: 1; transform: none; }
.terminado .c-brillos { opacity: 1; animation: brillar 1.4s ease-in-out infinite; }
@keyframes brillar { 50% { opacity: .35; } }

/* baño */
.manchas { transition: opacity .8s; }
.hecho-agua .c-gotas { opacity: 1; }
.hecho-agua .gota { animation: caer 1s linear infinite; }
@keyframes caer { from { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(170px); opacity: 0; } }
.hecho-jabon  .c-espuma-cuerpo,
.hecho-champu .c-espuma-pelo { opacity: 1; }
.hecho-enjuagar .c-espuma-cuerpo,
.hecho-enjuagar .c-espuma-pelo,
.hecho-enjuagar .manchas { opacity: 0; }
.hecho-toalla .c-gotas { opacity: 0; }
.hecho-toalla .c-toalla { opacity: 1; transform: none; }

/* dientes */
.dientes rect { fill: #efe2a2; transition: fill .8s; }
.boca .c-cepillo { transform: translate(34px, 62px); }
.hecho-cepillo .c-cepillo { opacity: 1; }
.hecho-pasta .c-pasta { opacity: 1; }
.hecho-cepillar .c-cepillo { transform: none; }
.hecho-cepillar .cepillo-mov { animation: cepillar .45s ease-in-out infinite alternate; }
@keyframes cepillar { from { transform: translateX(-34px); } to { transform: translateX(14px); } }
.hecho-cepillar .c-espuma { opacity: 1; }
.hecho-enjuagar .c-espuma, .hecho-enjuagar .c-cepillo, .boca.hecho-enjuagar .manchas { opacity: 0; }
.hecho-enjuagar .dientes rect { fill: #ffffff; }

/* ----- premio ----- */
.premio {
    position: fixed; inset: 0; z-index: 10;
    display: grid; place-items: center; padding: 20px;
    background: rgba(45, 58, 90, .45);
}
.premio[hidden] { display: none; }
.premio-caja {
    background: var(--blanco); border-radius: 36px; padding: 26px 30px 30px;
    text-align: center; max-width: 480px; width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: aparecer .4s;
}
.premio-estrella { font-size: 6rem; line-height: 1; animation: girar 2.4s ease-in-out infinite; }
@keyframes girar { 50% { transform: rotate(14deg) scale(1.12); } }
.premio-caja h2 { margin: 6px 0 0; font-size: 2.4rem; font-weight: 800; }
.premio-caja p { margin: 4px 0 20px; font-size: 1.35rem; font-weight: 600; }
.premio-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.boton-grande {
    display: inline-block; padding: 14px 24px; min-width: 170px;
    font-size: 1.3rem; font-weight: 800;
    background: #66bb6a; color: #fff; border: 0; border-radius: 22px;
    box-shadow: 0 6px 0 #3d8b40;
}
.boton-grande.secundario { background: #4fc3f7; box-shadow: 0 6px 0 #2c93c4; }
.boton-grande:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }

.confeti { position: fixed; top: -50px; font-size: 2rem; z-index: 11; pointer-events: none; animation: llover linear forwards; }
@keyframes llover { to { transform: translateY(110vh) rotate(360deg); } }

/* ----- pantallas pequeñas ----- */
@media (max-width: 760px) {
    .tablero { grid-template-columns: 1fr; }
    .dibujo { height: 38vh; }
    .tira { height: auto; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
    .casilla { min-height: 96px; }
    .carta { min-height: 110px; }
    .carta::before { font-size: 2.4rem; }
    .bandeja.memoria { gap: 10px; }
    .casilla-icono { font-size: 2.2rem; }
    .escena { min-height: 0; }
    .bandeja { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .ficha { min-height: 104px; }
    .ficha-icono { font-size: 2.6rem; }
    .boton-redondo { width: 50px; height: 50px; font-size: 1.4rem; }
    .barra { padding: 10px; gap: 6px; }
    .ajustes { gap: 5px; }
}

/* fotos reales (reemplazan a los emojis cuando existen en assets/img) */
.foto { display: block; object-fit: cover; border-radius: 18px; background: #eef3f9; }
.ficha-icono .foto { width: 104px; height: 104px; margin-bottom: 4px; }
.casilla-icono .foto { width: 84px; height: 84px; }
.situacion .foto { width: min(100%, 340px); height: min(44vh, 340px); border-radius: 26px; }
.tarjeta-emoji .foto { width: 100%; height: 100%; border-radius: 50%; }
.tarjeta-emoji { overflow: hidden; }

/* respiración */
.globo {
    width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
    font-size: 4.4rem; line-height: 1;
    background: radial-gradient(circle at 35% 30%, #fff, var(--color) 70%);
    box-shadow: 0 10px 30px rgba(45, 58, 90, .18);
    transition: transform 4s ease-in-out;
}
.globo.grande { transform: scale(1.65); }

/* página de imágenes (para adultos) */
.tabla-fotos { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; font-size: 1rem; user-select: text; }
.tabla-fotos th, .tabla-fotos td { padding: 6px 12px; text-align: left; border-bottom: 1px solid #e6edf5; }
.tabla-fotos code, .nota code { background: #eef3f9; padding: 2px 8px; border-radius: 8px; }
.tabla-fotos .foto { width: 54px; height: 54px; }
.tabla-fotos .mini { font-size: 1.8rem; }
.nota { background: #fff; border-radius: 18px; padding: 14px 18px; font-size: 1.05rem; user-select: text; }
.enlace-adultos { display: block; text-align: center; margin-top: 34px; font-size: 1rem; text-decoration: underline; opacity: .7; }

/* ===== animaciones ===== */
@keyframes pop      { 0% { transform: scale(.6); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes mecer    { 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes respirar { 50% { transform: translateY(-5px); } }
@keyframes saltar   { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-34px) scale(1.03, .97); } 60% { transform: translateY(-34px); } }
@keyframes parpadear { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes burbuja  { to { transform: translateY(-5px) scale(1.12); } }
@keyframes girarSol { to { transform: rotate(360deg); } }
@keyframes saludar  { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes chispa   { to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(200deg); opacity: 0; } }

/* sol del fondo */
.sol {
    position: absolute; top: 120px; right: 5%; width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, #fff59d 0 45%, #ffd54f 46% 100%);
    box-shadow: 0 0 60px 20px rgba(255, 213, 79, .45);
}
.sol::before {
    content: ""; position: absolute; inset: -34px; border-radius: 50%; z-index: -1;
    background: repeating-conic-gradient(rgba(255, 213, 79, .55) 0 12deg, transparent 12deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53% 70%, transparent 71%);
            mask: radial-gradient(circle, transparent 0 52%, #000 53% 70%, transparent 71%);
    animation: girarSol 40s linear infinite;
}

/* menú */
.logo { animation: saludar 2.5s ease-in-out infinite; display: inline-block; }
.saludo { animation: pop .6s backwards; }
.tarjeta { animation: pop .5s backwards; }
.tarjeta:nth-child(2) { animation-delay: .08s; } .tarjeta:nth-child(3) { animation-delay: .16s; }
.tarjeta:nth-child(4) { animation-delay: .24s; } .tarjeta:nth-child(5) { animation-delay: .32s; }
.tarjeta:nth-child(6) { animation-delay: .4s; }
.tarjeta-emoji { animation: mecer 3.6s ease-in-out infinite; }
.tarjeta:nth-child(2n) .tarjeta-emoji { animation-delay: -1.2s; }
.tarjeta:nth-child(3n) .tarjeta-emoji { animation-delay: -2.4s; }
.tarjeta:hover .tarjeta-emoji, .tarjeta:focus-visible .tarjeta-emoji { animation: saludar .5s ease-in-out infinite; }

/* juego */
.instruccion { animation: pop .5s backwards; }
.ficha.nueva { animation: pop .45s backwards; }
.ficha.hecha .ficha-icono { animation: pop .4s; }
.punto.lleno { animation: pop .45s; }
.casilla.llena { animation: pop .5s; }
.casilla.llena .casilla-icono { animation: mecer 3s ease-in-out .5s infinite; }
.situacion span.entra { animation: aparecer .4s, mecer 3.2s ease-in-out .4s infinite; }
.carta.pareja .ficha-icono { animation: saludar .6s ease-in-out 2; }
.premio-caja { animation: pop .55s; }
.premio-caja h2 { animation: mecer 2s ease-in-out infinite; }

/* Leo */
.nino, .boca { animation: respirar 3.2s ease-in-out infinite; }
.nino.terminado, .boca.terminado { animation: saltar .7s ease-in-out 3; }
.ojo { transform-box: fill-box; transform-origin: center; animation: parpadear 4.5s infinite; }
.c-espuma-cuerpo circle, .c-espuma-pelo circle, .c-espuma circle, .tina circle {
    transform-box: fill-box; transform-origin: center;
    animation: burbuja 1.4s ease-in-out infinite alternate;
}
.capa circle:nth-child(2n) { animation-delay: -.5s; }
.capa circle:nth-child(3n) { animation-delay: -.9s; }

/* chispas al acertar */
.chispa {
    position: fixed; z-index: 12; pointer-events: none; font-size: 1.6rem; line-height: 1;
    animation: chispa .8s ease-out forwards;
}

/* ----- modo tranquilo: sin ningún movimiento ----- */
.calma *, .calma *::before, .calma *::after { animation: none !important; }
.calma .confeti, .calma .chispa { display: none; }
.calma .fondo { opacity: .5; }
.calma .tarjeta:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    .confeti, .chispa { display: none; }
}

/* las fotos no se mecen */
.situacion span.entra:has(.foto) { animation: aparecer .4s; }