/* El Bosque de las Palabras · IC Games */
:root{
  --noche:#051810; --bosque:#0d2818; --bosque-2:#1a4d2e; --hoja:#2d6b3f; --brote:#7dc88f;
  --oro:#f4c430; --oro-2:#ffdf6b; --oro-3:#b8860b; --crema:#fff8e7; --tinta:#1d2a20;
  --menta:#2ec4a6; --rojo:#d9603f; --rojo-bg:#fde3da;
  --base:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Andika','Trebuchet MS',sans-serif;background:var(--noche);color:var(--crema);overflow-x:hidden;font-size:var(--base);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
body.grande{--base:24px}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:4px solid var(--oro-2);outline-offset:3px}

/* ---------- Escenario ---------- */
.escena{position:fixed;inset:0;overflow:hidden;z-index:0}
/* Fondos del kit: bosque vertical en teléfono, horizontal en pantallas anchas; cada reto usa su lugar */
.fondo{position:absolute;inset:0;background:#0d2818 url('tilo/fondos/bosque-vertical.webp') center bottom/cover no-repeat;transition:background-image .4s}
.fondo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,15,.15) 0%,rgba(8,24,15,0) 30%,rgba(8,24,15,.25) 100%)}
@media (min-aspect-ratio:3/4){.fondo{background-image:url('tilo/fondos/bosque-horizontal.webp')}}
body[data-fondo] .fondo{background-position:25% center}
body[data-fondo="fuente"] .fondo{background-image:url('tilo/fondos/fondo-fuente-horizontal.webp')}
body[data-fondo="casa"] .fondo{background-image:url('tilo/fondos/fondo-casa-horizontal.webp')}
body[data-fondo="bosque"] .fondo{background-image:url('tilo/fondos/fondo-arbol-horizontal.webp')}
body[data-fondo="puente"] .fondo{background-image:url('tilo/fondos/fondo-puente-horizontal.webp')}
/* v2.13 · Tilo nica: las cuentas de Nicaragua ven el Pueblo de las Palabras (archivos nuevos; los del bosque quedan para las de afuera) */
body.pueblo .fondo{background-color:#5b8db8;background-image:url('tilo/fondos/pueblo-vertical.webp')}
@media (min-aspect-ratio:3/4){body.pueblo .fondo{background-image:url('tilo/fondos/pueblo-horizontal.webp')}}
body.pueblo[data-fondo="fuente"] .fondo{background-image:url('tilo/fondos/pueblo-fuente-horizontal.webp')}
body.pueblo[data-fondo="casa"] .fondo{background-image:url('tilo/fondos/pueblo-casa-horizontal.webp')}
body.pueblo[data-fondo="bosque"] .fondo{background-image:url('tilo/fondos/pueblo-mercado-horizontal.webp')}
body.pueblo[data-fondo="puente"] .fondo{background-image:url('tilo/fondos/pueblo-muelle-horizontal.webp')}
@media (min-aspect-ratio:3/4){body[data-fondo] .fondo{background-position:center}}
.luciernaga{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--oro-2);box-shadow:0 0 10px var(--oro),0 0 22px rgba(244,196,48,.6);animation:flotar 8s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translate(0,0);opacity:.35}25%{transform:translate(30px,-40px);opacity:1}50%{transform:translate(-20px,-80px);opacity:.6}75%{transform:translate(40px,-50px);opacity:1}}

/* ---------- Pantallas ---------- */
.pantallas{position:relative;z-index:2;min-height:100vh;min-height:100dvh}
.pantalla{display:none;min-height:100vh;min-height:100dvh;padding:76px 16px 120px;align-items:center;justify-content:center}
.pantalla.activa{display:flex;animation:entrar .45s cubic-bezier(.2,.9,.3,1)}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#pInicio,#pFin{padding-top:24px}

.titulo{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:clamp(34px,7vw,58px);line-height:1;color:var(--oro);text-shadow:0 3px 0 #5a3d00,0 0 30px rgba(244,196,48,.35);text-align:center}
.sub{color:var(--brote);font-size:16px;margin-top:8px;text-align:center;letter-spacing:.04em}

.btn-grande{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,var(--oro-2),var(--oro));color:var(--bosque);border:0;border-radius:18px;padding:16px 34px;font-size:calc(var(--base) + 2px);font-weight:700;box-shadow:0 5px 0 var(--oro-3),0 10px 24px rgba(0,0,0,.35);min-height:62px;transition:transform .1s,box-shadow .1s}
.btn-grande:active{transform:translateY(4px);box-shadow:0 1px 0 var(--oro-3)}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;color:var(--crema);border:2px solid rgba(255,248,231,.35);border-radius:16px;padding:14px 24px;font-size:var(--base);text-decoration:none;min-height:58px}

/* ---------- Tilo (componente del kit: cuerpo por energía + pantalla de puntitos) ---------- */
.robot{width:110px;flex-shrink:0;transform-origin:bottom center;position:relative}
.robot-grande{width:170px}
.tilo-vivo{width:100%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))}
.tilo-vivo noscript img{width:100%;height:auto}
.robot.feliz{animation:saltar .7s ease-out}
@keyframes saltar{30%{transform:translateY(-22px) scale(1.04,.96)}60%{transform:translateY(0) scale(.98,1.02)}}
.robot.pensando{animation:pensar 2.2s ease-in-out infinite}
@keyframes pensar{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
/* Halo suave cuando Tilo está a plena energía */
.robot[data-etapa="4"] .tilo-vivo{filter:drop-shadow(0 0 22px rgba(244,196,48,.45)) drop-shadow(0 12px 18px rgba(0,0,0,.42))}
.tilo-cara-img{display:block;width:100%;height:auto}

.burbuja{background:var(--crema);color:var(--tinta);border:3px solid var(--oro);border-radius:20px;padding:14px 18px;font-size:var(--base);line-height:1.4;box-shadow:0 0 18px rgba(244,196,48,.3),0 6px 14px rgba(0,0,0,.3);position:relative;max-width:420px;min-height:56px}
.burbuja.grande{font-size:calc(var(--base) + 1px);max-width:460px;text-align:center}
.burbuja.pop{animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Inicio ---------- */
.inicio,.fin{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:620px}
.inicio .burbuja::after{content:'';position:absolute;top:-14px;left:50%;margin-left:-12px;border:12px solid transparent;border-bottom:14px solid var(--oro);border-top:0}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));background:rgba(5,24,16,.94);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.hud-lugar{font-weight:700;font-size:15px;background:rgba(255,248,231,.12);padding:6px 12px;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.hud-puntos{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.hud-puntos i{width:12px;height:12px;border-radius:50%;background:rgba(255,248,231,.22)}
.hud-puntos i.hecho{background:var(--brote)}
.hud-puntos i.ahora{background:var(--oro);box-shadow:0 0 0 3px rgba(244,196,48,.3)}
.hud-estrellas{font-weight:700;font-size:16px;white-space:nowrap}
.hud-btn{background:rgba(255,248,231,.12);border:0;color:var(--crema);width:42px;height:42px;border-radius:12px;font-size:18px}

/* ---------- Mapa ---------- */
.mapa-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:520px}
.mapa-titulo{font-family:'Fraunces',serif;font-size:28px;color:var(--oro);text-align:center}
.mapa{position:relative;width:100%;display:flex;flex-direction:column-reverse;gap:18px;padding:10px 0}
.sendero{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.sendero path{fill:none;stroke:rgba(244,196,48,.35);stroke-width:2.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.lugar{position:relative;z-index:1;display:flex;align-items:center;gap:14px;background:rgba(13,40,24,.86);border:2px solid rgba(125,200,143,.3);border-radius:20px;padding:14px 16px;width:82%;backdrop-filter:blur(4px)}
.lugar:nth-child(odd){align-self:flex-start}.lugar:nth-child(even){align-self:flex-end}
.lugar .l-ico{font-size:36px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:rgba(255,248,231,.08);border-radius:50%;flex-shrink:0}
.lugar .l-nom{font-weight:700;font-size:17px;line-height:1.2}
.lugar .l-hab{font-size:13px;color:var(--brote)}
.lugar .l-barra{height:8px;background:rgba(255,248,231,.15);border-radius:99px;margin-top:8px;overflow:hidden}
.lugar .l-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--brote),var(--oro));border-radius:99px;transition:width .8s}
.lugar.listo{border-color:var(--oro)}
.lugar.listo .l-ico{background:rgba(244,196,48,.18)}

/* ---------- Reto ---------- */
.reto-wrap{width:100%;max-width:980px;display:flex;flex-direction:column;gap:14px}
.robot-lado{display:flex;align-items:flex-end;gap:12px}
.robot-lado .robot{width:88px}
.robot-lado .burbuja::before{content:'';position:absolute;left:-15px;bottom:18px;border:10px solid transparent;border-right:14px solid var(--oro);border-left:0}
.tarjeta-reto{background:var(--crema);color:var(--tinta);border-radius:26px;padding:20px 18px 22px;box-shadow:0 0 0 4px rgba(244,196,48,.35),0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:14px;flex:1}
.reto-cab{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px}
.reto-lugar{font-size:14px;font-weight:700;color:var(--hoja);background:#e6f2e6;padding:5px 12px;border-radius:99px}
.btn-oir{border:0;background:#fff1c4;color:var(--tinta);border-radius:12px;padding:8px 14px;font-size:15px;font-weight:700;min-height:42px}
.visual{font-size:96px;line-height:1;min-height:100px;display:flex;align-items:center;justify-content:center}
.visual img{width:150px;height:150px;object-fit:cover;border-radius:22px;border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.visual.chico{font-size:64px;min-height:70px}.visual.chico img{width:100px;height:100px}
.enunciado{font-size:calc(var(--base) + 2px);font-weight:700;text-align:center}
.texto-reto{font-size:calc(var(--base) + 4px);line-height:1.45;text-align:center;max-width:620px;font-weight:700;color:#2a3b2e}
.texto-reto .hueco{display:inline-block;min-width:3.2em;border-bottom:4px dashed var(--oro-3);margin:0 4px;color:var(--hoja)}
.texto-reto .hueco.lleno{border-bottom-style:solid;border-color:var(--hoja)}

.palabra{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ficha{min-width:58px;height:74px;padding:0 12px;border-radius:14px;background:#fff;border:3px solid #e2d6b4;display:flex;align-items:center;justify-content:center;font-size:calc(var(--base) + 22px);font-weight:700;color:var(--tinta);box-shadow:0 3px 0 #e2d6b4}
.ficha.hueco{border:3px dashed var(--oro-3);background:#fff7dc;color:var(--oro-3)}
.ficha.lleno{border-style:solid;border-color:var(--hoja);background:#e6f6e9;color:var(--hoja);animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
.palabra.silabas .ficha{min-width:86px}

.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:100%;max-width:640px}
.opcion{background:#fff;border:3px solid #d6c9a3;border-radius:18px;min-height:78px;font-size:calc(var(--base) + 12px);font-weight:700;color:var(--tinta);box-shadow:0 5px 0 #d6c9a3;transition:transform .1s,box-shadow .1s,background .2s}
.opcion.palabra-op{font-size:calc(var(--base) + 6px)}
.opcion:active{transform:translateY(4px);box-shadow:0 1px 0 #d6c9a3}
.opcion.bien{background:#dff5e3;border-color:var(--hoja);box-shadow:0 5px 0 var(--hoja);color:var(--hoja)}
.opcion.mal{background:var(--rojo-bg);border-color:var(--rojo);box-shadow:0 5px 0 var(--rojo);color:var(--rojo);animation:temblar .4s}
.opcion.apagada{opacity:.35;pointer-events:none}
.opcion.mira{animation:latir 1s ease-in-out infinite;border-color:var(--oro-3)}
.opcion:disabled{cursor:default}
@keyframes temblar{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes latir{50%{transform:scale(1.06);box-shadow:0 5px 0 var(--oro-3),0 0 0 8px rgba(244,196,48,.25)}}

.feedback{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.ingles{display:flex;align-items:center;gap:10px;background:#e8f1fb;color:#1f4a7a;padding:10px 18px;border-radius:14px;font-size:calc(var(--base) + 2px);font-weight:700}
.ingles{border:0;font-family:inherit;cursor:pointer;box-shadow:0 2px 0 #c7dcf2;transition:transform .12s}
.ingles:hover{background:#dcebfa}.ingles:active{transform:scale(.97)}.ingles:focus-visible{outline:3px solid #1f4a7a;outline-offset:2px}
.ingles small{font-size:14px;font-weight:400;color:#4b6b8f}
.voz-panel{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff3cf;border-radius:18px;padding:16px;width:100%;max-width:640px}
.frase-leer{font-size:calc(var(--base) + 6px);font-weight:700;text-align:center;line-height:1.4}
.voz-pregunta{font-size:15px;color:#7a5a00;font-weight:700}
.voz-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-voz{border:0;border-radius:14px;padding:12px 20px;font-size:17px;font-weight:700;min-height:52px}
.btn-voz.si{background:var(--hoja);color:#fff}
.btn-voz.no{background:#fff;color:var(--tinta);border:2px solid #d6c9a3}

/* ---------- Fin ---------- */
.fin-estrellas{font-size:44px;letter-spacing:4px}
.fin-datos{font-size:var(--base);color:var(--crema);line-height:1.6}
.fin-datos b{color:var(--oro)}
.medallas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.medalla{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(244,196,48,.14);border:2px solid var(--oro);border-radius:16px;padding:10px 14px;animation:pop .5s backwards}
.medalla span{font-size:34px}
.medalla b{font-size:15px}
.fin-mision{font-weight:700;color:var(--oro-2);font-size:var(--base);background:rgba(244,196,48,.12);border:2px solid rgba(244,196,48,.4);border-radius:14px;padding:10px 16px}
.fin-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- Barra del tutor ---------- */
.tutor-barra{position:fixed;left:0;right:0;bottom:0;z-index:9;background:rgba(255,248,231,.97);color:var(--tinta);border-top:3px solid var(--oro);padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;font-family:system-ui,sans-serif}
.tutor-toggle{border:0;background:#e6f2e6;color:var(--hoja);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;white-space:nowrap;font-family:inherit}
.tutor-guia{font-size:15px;line-height:1.4}
.tutor-barra.cerrada .tutor-guia{display:none}

/* ---------- Toasts y partículas ---------- */
.toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:90%}
.toast{background:var(--oro);color:var(--bosque);font-weight:700;padding:10px 20px;border-radius:99px;font-size:17px;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:toast 2.8s ease-out forwards;text-align:center}
@keyframes toast{0%{opacity:0;transform:translateY(-12px) scale(.9)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.particulas{position:fixed;inset:0;pointer-events:none;z-index:15}
.particula{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--oro-2);box-shadow:0 0 8px var(--oro)}
.particula.est{width:auto;height:auto;background:none;box-shadow:none;color:var(--oro);font-size:20px}

/* ---------- Modo calma ---------- */
body.calma #luciernagas,body.calma .particulas{display:none}
body.calma .robot,body.calma .tilo__float,body.calma .tilo__spark{animation:none!important}
body.calma .opcion.mal{animation:none}
body.calma .pantalla.activa{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ---------- Pantallas amplias: el juego vive en una columna central de 560 px ---------- */
.inicio,.fin,.mapa-wrap,.reto-wrap{max-width:560px;width:100%;margin-left:auto;margin-right:auto}
.reto-wrap{position:relative}
@media (max-width:480px){
  .pantalla{padding:68px 12px 130px}
  .visual{font-size:76px;min-height:80px}
  .ficha{min-width:48px;height:64px;padding:0 9px}
  .palabra.silabas .ficha{min-width:72px}
  .opciones{grid-template-columns:repeat(2,1fr)}
  .hud-lugar{display:none}
  .lugar{width:94%}
}

/* ---------- Pantallas del niño: entrada y Mi bosque ---------- */
.nino{position:relative;z-index:2;min-height:100vh;min-height:100dvh;padding:24px 16px 110px;display:flex;flex-direction:column;align-items:center}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nino-caja{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:460px;margin:auto 0;width:100%}
.nino-txt{font-size:calc(var(--base) + 1px);color:var(--crema)}
.nino-error{background:var(--rojo-bg);color:#8a2a14;font-weight:700;padding:10px 16px;border-radius:14px}
.nino-form{display:flex;flex-direction:column;gap:14px;width:100%;align-items:center}
.nino-codigo{width:100%;max-width:340px;text-align:center;font-family:'Andika',sans-serif;font-weight:700;font-size:40px;letter-spacing:.22em;text-transform:uppercase;padding:14px 10px;border-radius:18px;border:4px solid var(--oro);background:var(--crema);color:var(--tinta)}
.nino-codigo:focus{outline:none;box-shadow:0 0 0 6px rgba(244,196,48,.35)}
.nino-codigo::placeholder{color:#cbbf9b;letter-spacing:.22em}
.nino-adulto{color:var(--brote);font-size:15px;margin-top:10px}
.bosque-cab{width:100%;max-width:560px;display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bosque-yo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;margin-right:auto}
.bosque-avatar{width:48px;height:48px;border-radius:50%;background:#fff3cf;border:3px solid var(--oro);display:flex;align-items:center;justify-content:center;font-size:26px}
.bosque{width:100%;max-width:560px;display:grid;gap:18px}
.bosque-robot{display:flex;align-items:flex-end;gap:12px}
.bosque-robot .robot{width:110px}
.bosque-robot .burbuja{flex:1;max-width:none}
.bosque-robot .burbuja::before{content:'';position:absolute;left:-15px;bottom:18px;border:10px solid transparent;border-right:14px solid var(--oro);border-left:0}
.tarjeta-nino{background:var(--crema);color:var(--tinta);border-radius:26px;padding:22px 20px;box-shadow:0 0 0 4px rgba(244,196,48,.3),0 14px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.tarjeta-nino h2{font-family:'Fraunces',Georgia,serif;font-size:26px;color:var(--bosque-2)}
.tarjeta-nino p{font-size:var(--base)}
.mision-pasos{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mision-pasos span{width:54px;height:54px;border-radius:50%;border:3px dashed #d6c9a3;display:flex;align-items:center;justify-content:center;font-size:28px;background:#fff}
.mision-pasos span.hecho{border:3px solid var(--oro);background:#fff3cf}
.mision-estado{font-weight:700;color:var(--hoja)}
.tarjeta-nino .medalla{background:#fff3cf;color:var(--tinta)}
.medalla-img{width:40px;height:40px;object-fit:cover;border-radius:10px}
.mochila-dato{font-size:15px!important;color:#6b6b52}



.hud-energia{font-weight:700;font-size:15px;white-space:nowrap;background:rgba(244,196,48,.15);color:var(--oro-2);padding:5px 10px;border-radius:99px}

.energia{width:100%;max-width:420px;background:rgba(13,40,24,.75);border:2px solid rgba(244,196,48,.35);border-radius:18px;padding:12px 16px;text-align:left}
.energia-cab{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;gap:10px}
.energia-cab b{color:var(--oro-2);font-size:20px}
.energia-barra{height:12px;border-radius:99px;background:rgba(255,248,231,.15);overflow:hidden;margin:8px 0 10px}
.energia-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brote),var(--oro));transition:width 1s}
.energia-piezas{display:flex;gap:6px;flex-wrap:wrap}
.energia-piezas span{font-size:13px;padding:3px 9px;border-radius:99px;background:rgba(255,248,231,.08);color:rgba(255,248,231,.45)}
.energia-piezas span.on{background:rgba(244,196,48,.2);color:var(--oro-2);font-weight:700}
.energia-clara{background:#fff;border-color:#eadfbf;color:var(--tinta);max-width:none}
.energia-clara .energia-cab b{color:var(--oro-3)}
.energia-clara .energia-barra{background:#efe8d3}
.energia-clara .energia-piezas span{background:#f4ecd5;color:#9a8f6e}
.energia-clara .energia-piezas span.on{background:#fff0bf;color:#7a5a00}

.historia-puntos{display:flex;gap:8px}
.historia-puntos i{width:10px;height:10px;border-radius:50%;background:rgba(255,248,231,.25)}
.historia-puntos i.on{background:var(--oro)}
#pHistoria .burbuja{min-height:96px}

.carta{border:3px dashed var(--oro);background:#fffaf0}
.carta-texto{font-size:calc(var(--base) + 3px)!important;font-weight:700;color:var(--bosque-2)}

/* ---------- Chat con el robot ---------- */
.chat-abrir{position:fixed;right:16px;bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:30;border:0;border-radius:99px;background:var(--crema);color:var(--tinta);font-family:inherit;font-weight:700;font-size:17px;padding:12px 20px;min-height:52px;box-shadow:0 0 0 3px var(--oro),0 10px 24px rgba(0,0,0,.4)}
body:has(.tutor-barra:not([hidden])) .chat-abrir{bottom:84px}
.chat{position:fixed;right:16px;bottom:84px;z-index:31;width:min(400px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 120px));background:var(--crema);color:var(--tinta);border-radius:24px;box-shadow:0 0 0 4px var(--oro),0 24px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
.chat-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bosque);color:var(--crema);font-size:18px}
.chat-cara > svg,.chat-cara > img{width:38px;height:38px;display:block}
.chat-cerrar{margin-left:auto;border:0;background:rgba(255,255,255,.12);color:#fff;width:36px;height:36px;border-radius:10px;font-size:16px}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:18px;font-size:var(--base);line-height:1.4}
.chat-msg.de-robot{background:#fff;border:2px solid #eadfbf;border-bottom-left-radius:6px;align-self:flex-start}
.chat-msg.de-yo{background:var(--hoja);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.chat-ops{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 14px;border-top:2px solid #eadfbf;background:#fffdf5}
.chat-op{border:2px solid #d6c9a3;background:#fff;border-radius:99px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:15px;color:var(--tinta);min-height:42px}
.chat-op:active{transform:translateY(1px)}
.chat-op-jugar{background:var(--oro);border-color:var(--oro-3)}
@media (max-width:480px){.chat{right:8px;left:8px;width:auto;bottom:76px}.chat-abrir{right:12px;font-size:15px;padding:10px 16px}}

/* Demo: Tilo pregunta el nombre */
.nino-nombre{letter-spacing:.02em;text-transform:none;font-size:34px}
.nino-nombre::placeholder{letter-spacing:.02em}
.nino-saltar{background:none;border:0;font:inherit;font-size:15px;text-decoration:underline;cursor:pointer;color:var(--brote)}
.nino-privado{font-size:14px;color:rgba(255,255,255,.62);margin-top:6px;max-width:320px;text-align:center}
/* Fin de la demo: invitación a crear cuenta */
.fin-invita{background:var(--crema);color:var(--tinta);border-radius:22px;padding:20px 22px;max-width:420px;width:100%;text-align:center;box-shadow:0 0 0 4px rgba(244,196,48,.35)}
.fin-invita b{display:block;font-family:'Andika',sans-serif;font-size:21px;line-height:1.25;margin-bottom:6px}
.fin-invita p{font-size:15px;opacity:.8;margin:0 0 14px}
.fin-btns button.btn-sec{background:none;font:inherit;cursor:pointer}
.fin{padding-bottom:96px}
.mapa-cab{display:flex;align-items:center;justify-content:center;gap:12px}.robot-mapa{width:72px}
body:has(.tutor-barra:not([hidden])) .pantalla.activa{padding-bottom:150px}
body:has(.chat-abrir) .fin-btns,body:has(.chat-abrir) .mapa-wrap{padding-bottom:70px}
/* Mi bosque en teléfonos angostos: Tilo más chico y el botón de escuchar sobre el globo, para que el texto respire */
@media (max-width:420px){
  .bosque-robot{position:relative;gap:10px}
  .bosque-robot .robot{width:84px}
  .bosque-robot .btn-oir{position:absolute;right:-6px;top:-10px;z-index:2}
  .bosque-robot .burbuja{padding-right:22px}
}

/* ---------- Kit visual: íconos y tarjetas ---------- */
.energia-piezas span{display:inline-flex;align-items:center;gap:6px}
.energia-piezas img{width:24px;height:24px;filter:grayscale(1) opacity(.45);transition:filter .5s}
.energia-piezas span.on img{filter:none}
.ico-estrella{width:22px;height:22px;vertical-align:-4px}
.hud-estrellas{display:inline-flex;align-items:center;gap:4px}
.tarjeta-tilo{position:relative;gap:10px}
.tarjeta-tilo .burbuja{width:100%;max-width:none;text-align:center;padding-right:44px}
.tarjeta-tilo .burbuja::before{content:'';position:absolute;left:50%;bottom:-15px;margin-left:-10px;border:10px solid transparent;border-top:14px solid var(--oro);border-bottom:0}
.tarjeta-tilo .btn-oir{position:absolute;right:28px;top:30px;min-height:36px;padding:4px 10px}
.robot-bosque{width:190px;margin-top:6px}
.tarjeta-tilo h2{margin-top:-4px}
.tarjeta-tilo .energia{width:100%}
.mision-pasos img{width:58px;height:58px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.mision-pasos img:not(.hecho){opacity:.85}
.frasco{width:120px;height:auto}
.chat-cara{width:40px;flex:none}
.chat-cara .tilo-vivo{filter:none}
.tarjeta-nino .medalla-img{width:56px;height:56px;object-fit:contain;border-radius:0}
.logo-juego{margin:0;line-height:0}.logo-juego img{width:min(320px,78vw);height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
/* Retos: dibujos del kit, lugar y tarjeta de la palabra */
.reto-lugar{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 4px}
.reto-lugar img{width:30px;height:30px}
.lugar .l-ico{background:none;width:64px;height:64px}
.lugar .l-ico img{width:100%;height:100%}
.visual{min-height:150px}
.visual img.dibujo{width:160px;height:160px;object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));animation:pop .45s backwards}
.visual img.dibujo[src*="/uploads/"]:not([src$=".svg"]){object-fit:cover;border-radius:22px;border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.18);filter:none}
.visual img.dibujo-lugar{width:120px;height:120px;border:0;border-radius:50%;box-shadow:none;opacity:.95}
.visual.chico img.dibujo{width:120px;height:120px}
.tarjeta-palabra{background:#fff8e7;border:3px solid #e9d9a8;border-radius:22px;padding:14px 28px;font-family:'Andika',sans-serif;font-weight:700;font-size:56px;line-height:1;color:var(--tinta);box-shadow:0 5px 0 #e2d2a0;animation:pop .45s backwards}
.tarjeta-palabra b{color:var(--oro-2)}
.fin-estrellas{display:flex;gap:6px;justify-content:center;font-size:0}
.fin-estrellas img{width:58px;height:58px;animation:pop .5s backwards}
@media (max-width:480px){.visual img.dibujo{width:128px;height:128px}.visual{min-height:120px}.tarjeta-palabra{font-size:46px}}
/* El camino de Tilo, versión mapa (kit) */
.mapa-ilustrado{position:relative;width:100%;max-width:420px;aspect-ratio:941/1672;border-radius:26px;overflow:hidden;background:#0d2818 url('tilo/fondos/mapa-camino-vertical.webp') center/cover no-repeat;box-shadow:0 0 0 4px rgba(244,196,48,.35),0 18px 40px rgba(0,0,0,.45)}
body.pueblo .mapa-ilustrado{background-color:#5b8db8;background-image:url('tilo/fondos/pueblo-mapa-camino-vertical.webp')}
body.pueblo .inicio .sub{display:inline-block;color:#fff8e7;background:rgba(10,30,60,.62);padding:6px 14px;border-radius:999px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.punto{position:absolute;width:max-content;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}
.punto img{width:68px;height:68px;border-radius:50%;filter:grayscale(.55) brightness(.8) drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:transform .2s,filter .4s}
.punto.con-luz img{filter:drop-shadow(0 0 12px rgba(255,223,107,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.punto.listo img{box-shadow:0 0 0 4px var(--oro)}
.punto:hover img,.punto:focus-visible img,.punto.elegido img{transform:scale(1.12)}
.punto:focus-visible{outline:none}.punto:focus-visible img{outline:3px solid var(--oro);outline-offset:3px}
.punto-etiqueta{display:flex;flex-direction:column;background:rgba(255,248,231,.95);color:var(--tinta);border-radius:12px;padding:5px 10px;text-align:left;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.35);line-height:1.15}
.punto-etiqueta b{font-size:13px}
.punto-etiqueta small{font-size:12px;color:var(--hoja);font-weight:700}
.punto.lado-izq{flex-direction:row-reverse}
.punto.lado-der{transform:translate(-34px,-50%)}
.punto.lado-izq{transform:translate(calc(-100% + 34px),-50%)}
.mapa-lista{width:100%;max-width:420px}
.mapa-lista summary{cursor:pointer;color:var(--brote);font-size:15px;text-align:center;padding:6px;list-style:none}
.mapa-lista summary::-webkit-details-marker{display:none}
.mapa-lista summary::after{content:' ▾'}
.mapa-lista[open] summary::after{content:' ▴'}
.mapa-lista .mapa{margin-top:10px}
@media (max-width:400px){.punto img{width:54px;height:54px}.punto-etiqueta{white-space:normal;max-width:118px}.punto-etiqueta b{font-size:12px}.punto-etiqueta small{font-size:11px}.punto.lado-der{transform:translate(-27px,-50%)}.punto.lado-izq{transform:translate(calc(-100% + 27px),-50%)}}
.bosque-avatar{overflow:hidden}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Personaje del niño junto a Tilo */
.duo{display:flex;align-items:flex-end;justify-content:center;gap:4px}
.personaje{width:150px;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.personaje.pop{animation:pop .45s backwards}
.duo .robot-grande{width:150px}
.personaje-lee{width:110px;height:auto;margin-bottom:-6px}
.tutor-cara{width:26px;height:26px;border-radius:50%;vertical-align:-7px;background:#fff3cf}
@media (max-width:400px){.personaje{width:124px}.duo .robot-grande{width:124px}}
/* Selector de personaje en pantallas del niño */
.elegir-personaje{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px}
.personaje-op{position:relative;cursor:pointer}
.personaje-op input{position:absolute;opacity:0;width:1px;height:1px}
.personaje-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px 8px;border-radius:20px;background:rgba(255,248,231,.12);border:3px solid rgba(255,248,231,.25);transition:border-color .15s,transform .15s,background .15s}
.personaje-card img{width:100%;max-width:140px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.personaje-card b{font-size:19px;color:var(--crema)}
.personaje-op:hover .personaje-card{transform:translateY(-2px)}
.personaje-op input:checked + .personaje-card{border-color:var(--oro);background:rgba(244,196,48,.18);box-shadow:0 0 0 4px rgba(244,196,48,.25)}
.personaje-op input:focus-visible + .personaje-card{outline:3px solid var(--crema);outline-offset:2px}
.nino-elige{margin-top:4px}

/* Regla de oro: ninguna imagen se deforma. Si el espacio no calza, se ajusta (contain), nunca se estira. */
img{object-fit:contain}
.tilo .tilo__body{width:100%!important;height:100%!important;object-fit:contain!important}

/* ---------- Entrar con QR ---------- */
.btn-qr{width:100%;max-width:340px}
.btn-qr img{width:34px;height:34px;object-fit:contain}
.nino-o{color:var(--brote);font-size:16px;margin:-4px 0}
.nino-aviso{font-size:14px;color:var(--oro-2);max-width:340px}
.escaner{position:fixed;inset:0;z-index:50;background:rgba(5,24,16,.94);display:flex;align-items:center;justify-content:center;padding:16px}
.escaner[hidden]{display:none}
.escaner-caja{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px}
.escaner-txt{font-size:calc(var(--base) + 2px);font-weight:700;color:var(--oro);text-align:center}
.escaner-vista{position:relative;width:100%;aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 0 4px rgba(244,196,48,.35),0 18px 40px rgba(0,0,0,.5)}
.escaner-vista video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.escaner-marco{position:absolute;inset:14%;pointer-events:none}
.escaner-marco i{position:absolute;width:24%;height:24%;border:6px solid var(--oro-2);animation:latirMarco 1.4s ease-in-out infinite}
.escaner-marco i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.escaner-marco i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.escaner-marco i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 18px}
.escaner-marco i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 18px 0}
@keyframes latirMarco{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.escaner-marco i{animation:none}}

/* ---------- Jugador: menú, mochila, logros, título ---------- */
body:has(.nav-nino) .nino{padding-bottom:120px}
.nav-nino{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(5,24,16,.94);border-top:2px solid rgba(244,196,48,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav-nino a{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:rgba(255,248,231,.7);font-size:18px;font-weight:700;padding:6px 4px;border-radius:14px;min-height:62px}
.nav-nino a.on{background:rgba(244,196,48,.16);color:var(--oro-2)}
.nn-ico{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.nn-ico img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.nav-nino a.jugar .nn-ico{background:linear-gradient(180deg,var(--oro-2),var(--oro));border-radius:50%;box-shadow:0 3px 0 var(--oro-3)}
.nav-nino a.jugar .nn-ico img{width:26px;height:26px}
.nn-punto{position:absolute;top:-2px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 2px var(--noche)}
.titulo-pagina{font-size:clamp(30px,6vw,44px)}
.titulo-ayudante{display:flex;align-items:center;gap:12px;background:rgba(13,40,24,.8);border:2px solid rgba(244,196,48,.4);border-radius:22px;padding:10px 16px 10px 10px;text-align:left}
.ta-pj{width:70px;height:90px;object-fit:contain;flex-shrink:0}
.ta-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ta-txt small{font-size:13px;color:var(--brote);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ta-txt>b{font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--oro);line-height:1.1}
.ta-txt span{font-size:15px;color:rgba(255,248,231,.85)}
.ta-txt span b{color:var(--oro-2)}
.ta-barra{height:10px;border-radius:99px;background:rgba(255,248,231,.15);overflow:hidden;margin:3px 0}
.ta-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brote),var(--oro))}
.logro-aviso{display:flex;align-items:center;gap:12px;text-decoration:none;background:linear-gradient(180deg,var(--oro-2),var(--oro));color:var(--bosque);border-radius:20px;padding:10px 16px;box-shadow:0 5px 0 var(--oro-3),0 10px 24px rgba(0,0,0,.3);animation:pop .6s cubic-bezier(.34,1.56,.64,1)}
.logro-aviso img{width:52px;height:52px;object-fit:contain}
.logro-aviso span{display:flex;flex-direction:column;text-align:left}
.logro-aviso small{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.logro-aviso b{font-size:20px}
.logro-aviso em{font-style:normal;font-size:14px}
.btn-sec-claro{color:var(--bosque-2);border-color:#d9cba3;background:#fff;font-weight:700}
.semana-hojas{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.semana-hojas span{display:flex;flex-direction:column;align-items:center;gap:2px;width:42px;padding:6px 0;border-radius:14px;background:#f1ead4;color:#9a8f6e;font-weight:700;font-size:15px}
.semana-hojas span i{font-style:normal;font-size:22px;filter:grayscale(1) opacity(.35)}
.semana-hojas span.si{background:#e2f3e2;color:var(--hoja)}
.semana-hojas span.si i{filter:none}
.semana-hojas span.hoy{box-shadow:0 0 0 3px var(--oro)}
.semana-hojas span.fut{opacity:.55}
.medallas-resumen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.medallas-resumen span{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid #eadfbf;border-radius:99px;padding:4px 14px 4px 6px;font-size:16px}
.medallas-resumen img{width:32px;height:32px;object-fit:contain}
.mochila-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;width:100%}
.mp{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2px solid #eadfbf;border-radius:18px;padding:10px 6px 8px}
.mp-dibujo{position:relative;width:62px;height:62px}
.mp-dibujo>img:first-child{width:100%;height:100%;object-fit:contain}
.mp-med{position:absolute;right:-12px;bottom:-8px;width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.mp b{font-size:16px;margin-top:6px}
.mp small{font-size:12px;color:#8a8062}
.mp-0 .mp-dibujo>img:first-child{filter:brightness(0) opacity(.18)}
.mp-0{background:#f6f1e1;border-style:dashed}
.mp-1 .mp-dibujo>img:first-child{opacity:.6}
.mp-4{border-color:var(--oro);background:#fff8dc}
.postales{display:flex;flex-direction:column;gap:12px;width:100%}
.postal{display:flex;gap:12px;align-items:center;text-align:left;background:#fffdf5;border:2px solid #eadfbf;border-radius:16px;padding:12px 14px;transform:rotate(var(--giro));box-shadow:0 4px 0 #eadfbf}
.postal img{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.postal p{font-size:calc(var(--base) - 2px)!important;line-height:1.4}
.postal small{font-size:13px;color:#8a8062}
.logros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;width:100%}
.logro{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid #eadfbf;border-radius:18px;padding:14px 8px 10px}
.logro img{width:56px;height:56px;object-fit:contain}
.logro b{font-size:16px;line-height:1.2}
.logro small{font-size:12.5px;color:#7a7259;line-height:1.3}
.logro em{font-style:normal;font-size:12px;color:var(--hoja);font-weight:700}
.logro.ganado{border-color:var(--oro);background:#fff8dc}
.logro.falta img{filter:grayscale(1) opacity(.35)}
.logro.falta b{color:#9a8f6e}
.logro.nuevo{animation:latir 1.4s ease-in-out 3}
.logro-nuevo{position:absolute;top:-10px;right:-6px;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px}
.fin-logros{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
.fin-logro{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--oro-2),var(--oro));color:var(--bosque);border-radius:16px;padding:8px 14px;text-align:left;animation:pop .6s cubic-bezier(.34,1.56,.64,1) backwards}
.fin-logro img{width:44px;height:44px;object-fit:contain}
.fin-logro small{display:block;font-size:12px;font-weight:700;text-transform:uppercase}
.fin-logro b{font-size:17px}
@media (prefers-reduced-motion:reduce){.logro.nuevo,.logro-aviso,.fin-logro{animation:none}}
body.calma .logro.nuevo,body.calma .logro-aviso,body.calma .fin-logro{animation:none}
body:has(.nav-nino) .chat-abrir{bottom:calc(92px + env(safe-area-inset-bottom))}
body:has(.nav-nino) .chat{bottom:calc(150px + env(safe-area-inset-bottom))}
.semana-hojas{flex-wrap:nowrap;width:100%;max-width:360px}
.semana-hojas span{flex:1;width:auto;min-width:0}
body:has(.nav-nino) .chat{max-height:min(560px,calc(100dvh - 200px))}
/* Lumi, guía del lado del niño */
.lumi-guia{width:min(220px,58vw);height:auto;margin:0 auto 6px;display:block;filter:drop-shadow(0 0 26px rgba(255,214,107,.55));animation:lumi-flota 3.2s ease-in-out infinite}
.lumi-anima{animation:lumi-duda .9s ease-in-out 2}
@keyframes lumi-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lumi-duda{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.lumi-guia,.lumi-anima{animation:none}}
.lumi-celebra{animation:lumi-salta .5s ease-out 2!important}
@keyframes lumi-salta{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-22px) scale(1.06)}}
/* ---- Mis juegos (galería del niño, guía: Lumi) ---- */
body.lado-ic{background:#0b1430}
body.lado-ic .escena .fondo{background:linear-gradient(180deg,#0b1430 0%,#1b2a5c 60%,#2a3570 100%)}
.mj{max-width:760px;margin:0 auto;padding:18px 16px 110px;color:#fff}
.mj-saludo{display:flex;align-items:center;gap:6px;margin:4px 0 14px}
.mj-lumi{width:120px;margin:0;flex:0 0 auto}
.mj-globo{background:#fff;color:#1b2a5c;border-radius:20px;padding:12px 16px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:18px;line-height:1.3}
.mj-globo::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:#fff}
.mj-globo b{display:block;font-size:21px}
.mj-titulo{font-size:22px;margin:22px 0 12px;color:#ffe08a}
.mj-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mj-tarjeta{position:relative;display:block;aspect-ratio:2/3;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35);transition:transform .15s}
.mj-tarjeta:active{transform:scale(.97)}
.mj-tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mj-nombre{position:absolute;inset:auto 0 0;padding:40px 12px 12px;background:linear-gradient(0deg,rgba(6,10,28,.95) 35%,rgba(6,10,28,0))}
.mj-nombre b{display:block;font-size:18px;line-height:1.15}
.mj-nombre small{display:block;font-size:18px;line-height:1.25;opacity:.85;margin-top:2px}
.mj-actividades{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mj-act{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 10px;border-radius:18px;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,rgba(255,224,138,.16),rgba(27,42,92,.9));border:1px solid rgba(255,224,138,.35)}
.mj-act img{width:64px;height:64px;filter:drop-shadow(0 0 10px rgba(255,214,107,.6))}
.mj-act b{font-size:18px;line-height:1.2}
.mj-act small{font-size:18px;opacity:.85}
.mj-vacio{opacity:.85}
@media (min-width:640px){.mj-fila{grid-template-columns:repeat(3,1fr)}}


/* ============================================================
   Lado del jugador en la plataforma (Inicio, Lumi, Premios) + menú de abajo
   El menú es el marco de la plataforma: azul noche y dorado en todos los mundos.
   ============================================================ */
.nav-nino{background:rgba(11,20,48,.95);border-top-color:rgba(246,196,69,.45)}
.nav-nino a{color:rgba(233,236,255,.72)}
.nav-nino a.on{background:rgba(246,196,69,.18);color:#ffe08a}
.nav-nino .nn-ico img{object-fit:contain}
.nav-nino .nn-inicio .nn-ico img{border-radius:9px}
body.mundo-lumi-nino .escena .fondo{background:radial-gradient(ellipse at 50% 0%,#3a2f8a 0%,#1a1f52 45%,#0b1430 100%)}
.mj-h1{font-size:30px;color:#ffe08a;text-align:center;margin:6px 0 12px}
.mj-mundos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.mj-mundo{position:relative;display:block;aspect-ratio:2/3;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .15s}
.mj-mundo:active{transform:scale(.97)}
.mj-mundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mm-tilo{border:3px solid #7dc88f}
.mm-lumi{border:3px solid #c9c2ff}
.mm-zaro{border:3px solid #7cc8ff}
.mj-entrar{display:inline-block;margin-top:8px;font-style:normal;font-weight:800;font-size:18px;padding:6px 12px;border-radius:999px;background:#f6c445;color:#1d1606}
.mj-premios{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:18px;text-decoration:none;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,224,138,.4)}
.mj-premios img{width:46px;height:46px;object-fit:contain}
.mj-premios b{display:block;font-size:19px}
.mj-premios small{opacity:.8}
.mj-premios em{margin-left:auto;font-style:normal;font-weight:800;font-size:18px;background:#e0533d;color:#fff;padding:4px 10px;border-radius:999px}
.mj-salir{text-align:center;margin-top:18px}
.mj-salir button{background:none;border:0;color:rgba(233,236,255,.6);font:inherit;font-size:18px;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 14px}
.mj-act{position:relative}
.mj-act-ico{font-size:34px;line-height:1}
.mj-act-estrella{min-height:18px;font-size:18px}
.mj-act.perfecta{border-color:#ffe08a;box-shadow:0 0 18px rgba(255,224,138,.35)}
@media (min-width:640px){.mj-mundos{max-width:560px}}

/* Premios */
.pr-resumen{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pr-resumen span{background:rgba(255,255,255,.1);border-radius:999px;padding:6px 14px;font-size:15px}
.pr-resumen b{color:#ffe08a;font-size:18px}
.pr-saltos{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.pr-saltos a{flex:none;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.pr-mundo{border-radius:24px;padding:14px 12px 4px;margin-bottom:18px}
.pr-tilo{background:linear-gradient(180deg,#123321,#0d2818)}
.pr-lumi{background:linear-gradient(180deg,#2e2f7a,#1a1f52);padding-bottom:16px}
.pr-cab{display:flex;align-items:center;gap:10px;margin:0 4px 12px;color:#fff}
.pr-cab img{width:48px;height:48px;object-fit:contain}
.pr-cab small{display:block;font-size:13px;opacity:.75}
.pr-cab b{font-size:20px}
.pr-tilo .tarjeta-nino{margin-bottom:14px;scroll-margin-top:12px}
.pr-lumi-cuerpo{background:#fff;color:#1b1d4a;border-radius:20px;padding:16px;text-align:center}
.pr-lumi-dato{margin:0 0 12px}
.pr-estrellas{list-style:none;padding:0;margin:0;display:grid;gap:8px;text-align:left}
.pr-estrellas li{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:8px;padding:10px 12px;border-radius:14px;background:#f1effd}
.pr-estrellas li.si{background:#fff4d1}
.pr-estrellas span{grid-row:span 2;font-size:24px;text-align:center}
.pr-estrellas small{opacity:.7}

.mj{width:100%;min-width:0;box-sizing:border-box}
.premios .tarjeta-nino{max-width:100%;box-sizing:border-box}
.nn-emoji{font-size:28px;line-height:1}
/* Mundos en el inicio: tarjetas horizontales grandes, fáciles de tocar */
.mj-mundos{grid-template-columns:1fr}
.mj-mundo{aspect-ratio:16/10}
.mj-mundo .mj-nombre{padding:60px 16px 16px}
.mj-mundo .mj-nombre b{font-size:22px}
.mj-mundo .mj-nombre small{font-size:18px}
@media (min-width:640px){.mj-mundos{grid-template-columns:1fr 1fr;max-width:none}}
.premios .tarjeta-nino{padding:18px 12px}
.premios .logros-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.premios .mochila-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-h2{font-size:22px;margin:0 0 12px}
.logro-emoji{font-size:40px;line-height:1.1}
.pr-lumi .logro.falta{opacity:.55;filter:grayscale(.6)}
.aj-nino{max-width:520px}
.aj-yo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;font-size:20px}
.aj-yo .avatar-nino{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#fff4d1;display:grid;place-items:center;font-size:44px;box-shadow:0 0 0 4px #f6c445}
.aj-yo .avatar-nino img{width:100%;height:100%;object-fit:cover}
.aj-ok{background:#e5f4e8;color:#1d5a32;border-radius:14px;padding:10px 14px;text-align:center;font-weight:700}
.aj-form{display:grid;gap:10px}
.aj-op{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,224,138,.35);border-radius:18px;padding:14px 16px;cursor:pointer;min-height:64px}
.aj-op input{width:28px;height:28px;accent-color:#f6c445;flex:none}
.aj-op b{display:block;font-size:18px}
.aj-op small{opacity:.8}
.aj-form .btn-grande{justify-self:center;margin-top:6px}
.aj-salir{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:26px}
.aj-salir button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:12px 26px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;min-height:52px}
.aj-salir small{opacity:.65}
.puerta-jugador .nino-o{color:rgba(233,236,255,.75)}
.puerta-jugador .nino-adulto{color:rgba(233,236,255,.7)}
.puerta-jugador .titulo{color:#ffe08a}
.demo-barra{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;background:rgba(11,20,48,.88);color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,224,138,.5);white-space:nowrap}
.demo-barra b{color:#ffe08a}

/* ============================================================
   Reto en una sola pantalla (sin bajar): todo se ajusta a la altura disponible.
   ============================================================ */
#pReto.pantalla{padding-top:calc(64px + env(safe-area-inset-top));padding-bottom:12px;min-height:0;height:100vh;height:100dvh;align-items:stretch;overflow-y:auto}
body:has(.tutor-barra:not([hidden])) #pReto.pantalla.activa{padding-bottom:84px}
#pReto .reto-wrap{gap:8px;height:100%}
#pReto .robot-lado{align-items:center;gap:8px;flex:none}
#pReto .robot-lado .robot{width:48px;flex:none}
#pReto .robot-lado .burbuja{font-size:calc(var(--base) - 1px);line-height:1.3;padding:8px 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:calc(var(--base) - 2px)}
#pReto .robot-lado .burbuja::before{bottom:auto;top:50%;margin-top:-8px}
#pReto .tarjeta-reto{padding:12px 14px 14px;gap:min(12px,1.5vh);justify-content:space-evenly;min-height:0}
#pReto .visual{font-size:min(84px,11vh);min-height:0}
#pReto .visual img,#pReto .visual img.dibujo{width:min(140px,16vh);height:min(140px,16vh)}
#pReto .enunciado{margin:0}
#pReto .ficha{height:min(70px,8.5vh);min-width:min(56px,7vh);font-size:min(calc(var(--base) + 22px),5.4vh)}
#pReto .opciones{gap:10px}
#pReto .opcion{min-height:min(76px,9.5vh);font-size:min(calc(var(--base) + 12px),5vh)}
#pReto .opciones:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
#pReto .opciones:has(> .palabra-op:nth-child(3):last-child) .opcion{font-size:min(calc(var(--base) + 2px),4vh);padding:0 4px}
/* Al acertar: queda solo la opción correcta y el "Siguiente" entra en el lugar de las demás. */
#pReto .tarjeta-reto:has(.feedback:not([hidden])) .opcion:not(.bien){display:none}
#pReto .tarjeta-reto:has(.feedback:not([hidden])) .opciones{grid-template-columns:minmax(0,260px);justify-content:center}
#pReto .feedback{gap:8px}
#pReto .ingles{padding:6px 14px;font-size:var(--base)}
#pReto #btnSiguiente{min-height:56px;padding:10px 40px}
#pReto .voz-panel{padding:10px}
/* v2.58 · Franco (29 oct, captura de El Muelle): al responder una frase quedaba scroll. Mientras se pide leerla en voz alta, la
   tarjeta muestra solo lo que hace falta: la frase completa, quién la lee y los botones (el dibujo, la consigna y la opción se van). */
#pReto .tarjeta-reto:has(.feedback:not([hidden])) .comodines{display:none}
#pReto .tarjeta-reto:has(.voz-panel:not([hidden])) :is(.visual,.enunciado,#palabraVista,.opciones){display:none}
#pReto .personaje-lee{width:min(110px,13vh)}
@media (min-width:768px) and (min-height:800px){#pReto .robot-lado .robot{width:72px}}

.luz-nino{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#fff;font-weight:700}
.luz-nino span{font-size:14px;white-space:nowrap}
.luz-barra{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.luz-barra i{display:block;height:100%;background:linear-gradient(90deg,#c9c2ff,#ffe08a);border-radius:99px}
.luz-clara{color:#1b1d4a}.luz-clara .luz-barra{background:#e2def5}
.mj-act.rec{border:2px solid #ffe08a;box-shadow:0 0 22px rgba(255,224,138,.4)}
.mj-rec{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#ffe08a;color:#1d1606;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px}
.postal-lumi img{border-radius:50%}

/* Puerta del niño a una sala */
.mj-sala{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:20px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,rgba(61,123,217,.35),rgba(140,123,240,.3));border:1.5px solid rgba(255,233,168,.35)}
.mj-sala .mjs-ico{font-size:2rem}
.mj-sala b{display:block;font-size:18px}
.mj-sala small{display:block;opacity:.85;line-height:1.3;font-size:18px}
.mj-sala i{margin-left:auto;font-style:normal;font-size:1.4rem;color:#FFE9A8}
@media (min-width:640px){.mj-sala{max-width:none}}

/* ===== Arte de Lumi v2 ===== */
.lumi-faro{position:relative;border-radius:24px;overflow:hidden;margin-bottom:16px;aspect-ratio:3/2;max-height:340px;width:100%;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.lf-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.lf-on{opacity:var(--luz,0);transition:opacity 1.2s}
.lf-capa{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:8px;padding:12px}
.lf-lumi{height:clamp(96px,26vw,150px);width:auto;filter:drop-shadow(0 0 18px rgba(255,214,110,.75));animation:lumi-flota 3.2s ease-in-out infinite}
.lf-lumi.guardian{filter:drop-shadow(0 0 26px rgba(255,230,140,.95)) brightness(1.12)}
.lumi-faro .mj-globo small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.lumi-faro .luz-nino{position:absolute;left:12px;right:12px;bottom:10px;margin:0;background:rgba(8,12,34,.6);border-radius:999px;padding:6px 12px}
.mj-isla{width:100%;max-width:130px;aspect-ratio:1;object-fit:contain;filter:saturate(.75) brightness(.85)}
.mj-isla.on{filter:drop-shadow(0 0 14px rgba(255,214,110,.6))}
.mj-dominada{font-size:11px;font-weight:800;color:#5A3F00;background:#FFE08A;border-radius:999px;padding:1px 8px}
.logro-insignia{width:76px;height:76px;object-fit:contain}
.logro.falta .logro-insignia{filter:grayscale(1) opacity(.45)}

/* ===== Tablet (iPad y similares): aprovechar la pantalla, no dejar todo en chiquito ===== */
@media (min-width:768px) and (min-height:600px){
  .mj{zoom:1.22}
  .nav-nino{zoom:1.18}
  .bosque,.bosque-cab{zoom:1.25}
  .inicio,.fin,.mapa-wrap,.nino-caja,.escaner-caja{zoom:1.2}
  .chat-abrir{zoom:1.2}
  #pReto .reto-wrap{max-width:920px}
  #pReto .robot-lado .robot{width:84px}
  #pReto .robot-lado .burbuja{font-size:calc(var(--base) + 4px);max-width:none}
  #pReto .visual{font-size:min(150px,14vh)}
  #pReto .visual img,#pReto .visual img.dibujo{width:min(260px,22vh);height:min(260px,22vh)}
  #pReto .ficha{height:min(116px,10vh);min-width:min(92px,8.5vh);font-size:min(calc(var(--base) + 40px),6.6vh)}
  #pReto .opcion{min-height:min(128px,12vh);font-size:min(calc(var(--base) + 26px),6vh);border-radius:22px}
  #pReto .texto-reto{font-size:calc(var(--base) + 10px);max-width:820px}
  #pReto #btnSiguiente{min-height:72px;font-size:24px}
}
@media (min-width:1100px) and (min-height:760px){
  .mj{zoom:1.32}
}

/* ---------- v0.9 · Tilo más juego: lugares con estrellas, guardianes, racha, comodines, Relámpago y retos ---------- */
.punto-img{position:relative;display:inline-block;line-height:0}
.punto-marca{position:absolute;right:-6px;top:-6px;font-style:normal;font-size:22px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.punto-marca:empty{display:none}
.punto-est{color:var(--oro-3);font-size:13px;letter-spacing:1px;line-height:1.1}
.punto.cerrado img{filter:grayscale(1) brightness(.55) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.punto.cerrado .punto-etiqueta{opacity:.8}
.punto.guardian img{box-shadow:0 0 0 4px #fff,0 0 22px 6px rgba(255,223,107,.85);animation:latir 1.6s ease-in-out infinite}
.punto.vencido img{box-shadow:0 0 0 4px var(--oro),0 0 16px rgba(244,196,48,.7)}
@keyframes latir{50%{transform:scale(1.08)}}

.desafios{display:grid;gap:10px;width:100%;max-width:420px}
.desafio{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:18px;padding:10px 14px;background:rgba(255,248,231,.96);color:var(--tinta);box-shadow:0 6px 16px rgba(0,0,0,.35);font:inherit;min-height:66px}
.desafio .d-ico{flex:0 0 48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#f3e7c4;overflow:hidden}
.desafio .d-ico img{width:100%;height:100%;object-fit:cover}
.desafio .d-txt{flex:1;display:flex;flex-direction:column;line-height:1.2}
.desafio b{font-size:16px}
.desafio small{font-size:13px;color:var(--hoja);font-weight:700}
.desafio i{font-style:normal;font-weight:700;font-size:22px;color:var(--oro-3)}
.desafio.d-reto{background:linear-gradient(180deg,#fff3c4,#ffe28a)}
.desafio.d-rayo .d-ico{background:#2a2350;color:var(--oro-2)}
.desafio.off{opacity:.62;box-shadow:none;cursor:default}
.desafio:not(.off):active{transform:scale(.98)}

.hud-racha{font-weight:700;font-size:15px;white-space:nowrap;padding:5px 10px;border-radius:99px;background:rgba(255,248,231,.12)}
.hud-racha.fuego{background:linear-gradient(180deg,#ffb347,#ff6a2b);color:#fff;box-shadow:0 0 14px rgba(255,120,40,.7)}
.hud-racha.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}

.comodines{display:flex;gap:8px;width:100%;justify-content:center;flex-wrap:wrap}
.comodin{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--oro-3);background:#fff8df;color:var(--bosque);border-radius:99px;padding:6px 14px;font-size:15px;font-weight:700;min-height:40px}
.comodin b{background:var(--oro);border-radius:99px;min-width:22px;padding:0 6px;text-align:center}
.comodin:disabled{opacity:.4;cursor:default}
.opcion{position:relative}
.opcion.quitada{text-decoration:line-through}
.mas-estrellas{position:absolute;left:50%;top:-8px;transform:translateX(-50%);color:#ff7a1a;font-weight:800;font-size:20px;white-space:nowrap;text-shadow:0 2px 0 #fff;animation:subeEst 1.3s ease-out forwards;pointer-events:none}
@keyframes subeEst{to{transform:translate(-50%,-40px);opacity:0}}

.fantasma,.guardian-cab{max-width:560px;width:100%;margin:0 auto 10px;background:rgba(5,24,16,.82);border-radius:16px;padding:8px 12px}
.fantasma{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}   /* v1.47 · el compañero acompaña, sin marcador */
.fa-av{flex:0 0 auto;display:flex}.fa-av .fantasma-av{width:30px;height:30px;border-radius:50%}
.fa-dice{flex:1;color:var(--brote)}
.fantasma.fa-costo .fa-dice{color:var(--oro-2)}
.guardian-cab{display:flex;align-items:center;gap:10px;border:2px solid var(--oro)}
.guardian-cab img{width:44px;height:44px;border-radius:50%}
.guardian-cab span{flex:1;display:flex;flex-direction:column;line-height:1.15}
.guardian-cab small{font-size:12px;color:var(--oro-2);text-transform:uppercase;letter-spacing:.06em}
.guardian-cab em{font-style:normal;font-size:13px;font-weight:700;background:rgba(244,196,48,.18);color:var(--oro-2);padding:4px 10px;border-radius:99px}
body[data-modo="diez"] .fondo{filter:saturate(1.2) hue-rotate(-20deg) brightness(.85)}

.hoja{position:fixed;inset:0;z-index:40;background:rgba(3,12,8,.72);display:grid;place-items:center;padding:20px}
.hoja-caja{background:var(--crema);color:var(--tinta);border-radius:26px;padding:24px 22px 18px;max-width:420px;width:100%;text-align:center;display:grid;gap:12px;justify-items:center;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.hoja-img{position:relative;line-height:0}
.hoja-img img{width:110px;height:110px;border-radius:50%;box-shadow:0 0 0 5px var(--oro)}
.hoja-img .avatar-img,.hoja-img .d-av{width:96px;height:96px;border-radius:50%}
.hoja-escudo{position:absolute;right:-8px;bottom:-4px;font-size:40px;line-height:1}
.hoja-rayo,.hoja-av{font-size:72px;line-height:1}
.hoja-caja h3{font-size:calc(var(--base) + 6px);color:var(--bosque)}
.hoja-caja p{font-size:var(--base);line-height:1.35}
.hoja-caja .btn-sec{color:var(--bosque-2);border-color:#d9cba3;background:none;font:inherit;padding:8px 18px;min-height:44px}

.fin-modo{display:grid;gap:4px;background:rgba(5,24,16,.8);border:2px solid rgba(255,248,231,.3);border-radius:18px;padding:12px 16px;text-align:center;max-width:460px;width:100%}
.fin-modo b{font-size:calc(var(--base) + 2px)}
.fin-modo span{font-size:16px;opacity:.92}
.fin-modo.gano{border-color:var(--oro);background:linear-gradient(180deg,rgba(244,196,48,.25),rgba(5,24,16,.85))}
.btn-reto{border:2px solid var(--oro);background:rgba(244,196,48,.12);color:var(--oro-2);border-radius:16px;padding:12px 18px;font-size:16px;font-weight:700;max-width:460px;width:100%}
.btn-reto:disabled{opacity:.9;cursor:default}
@media (prefers-reduced-motion:reduce){.punto.guardian img{animation:none}}
body.calma .punto.guardian img{animation:none}
@media (min-width:768px) and (min-height:600px){.desafio b{font-size:18px}.desafio small{font-size:14px}}
.retos-nino{display:grid;gap:10px}
.reto-fila{display:flex;align-items:center;gap:12px;background:#fff3c4;color:var(--tinta);border-radius:16px;padding:10px 12px;text-decoration:none}
.reto-fila.resp{background:rgba(255,248,231,.9)}
.rf-av{flex:0 0 46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:26px;overflow:hidden}
.rf-av img{width:100%;height:100%;object-fit:cover}
.rf-txt{flex:1;display:flex;flex-direction:column;line-height:1.2}
.rf-txt small{font-size:14px;color:var(--hoja);font-weight:700}
.reto-fila i{font-style:normal;font-weight:700;color:var(--oro-3);white-space:nowrap}
.mj-aviso{display:inline-block;font-style:normal;font-weight:800;font-size:18px;background:#ff7a1a;color:#fff;border-radius:99px;padding:3px 10px;margin:4px 0;width:max-content}
.fin-logro-ico{font-size:34px;width:46px;text-align:center}
.fin-logro em{display:block;font-style:normal;font-size:12px;font-weight:700;opacity:.85}
.fin-logro em:empty{display:none}
.pr-cruzados{background:linear-gradient(180deg,rgba(60,40,110,.85),rgba(20,20,50,.9));border-radius:24px}
.pr-cab-av{display:inline-grid;place-items:center;width:64px;height:64px}
.logro-regalo{display:block;color:#7a4f00;font-weight:800}
.logro.falta .logro-regalo{color:#8a7a60}
/* Avatar vestido dentro del juego y estela elegida en el Taller */
.yo-juego{display:inline-grid;place-items:center;flex:none}
.inicio-yo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--crema);background:rgba(5,24,16,.55);border-radius:999px;padding:4px 16px 4px 4px}
.particula{background:var(--estela,var(--oro-2));box-shadow:0 0 8px var(--estela,var(--oro))}
.particula.est{color:var(--estela,var(--oro))}
.luciernaga{background:var(--estela2,var(--oro-2));box-shadow:0 0 10px var(--estela,var(--oro)),0 0 22px var(--estela,rgba(244,196,48,.6))}
.mj-taller{background:linear-gradient(90deg,rgba(107,68,36,.95),rgba(58,35,18,.95))}
.mjt-lobo{width:56px;height:auto;flex:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.mj-yo{display:inline-grid;place-items:center;flex:none;order:3;margin-left:auto}
.mm-busqueda,.mm-rondas{border:3px solid #F5C542}
/* v1.6 · sin ceros a la vista del niño */
.mj-nombre small.mj-empieza{display:inline-block;opacity:1;font-weight:800;font-size:18px;color:#2b2140;background:#ffd85a;border-radius:999px;padding:3px 10px;margin-top:6px}
/* v1.9 · Mis juegos sin juegos habilitados (institución) */
.mj-vacio{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:22px;background:rgba(255,255,255,.08);text-align:center;font-size:18px}
.mj-vacio span{opacity:.8;font-size:18px}

/* v1.12 · Festejo de respaldo: la Exploradora saluda y salta mientras llega su arte de festejo. */
img[src$="#festeja"]{animation:festeja-css 1.1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes festeja-css{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12%) rotate(-4deg)}60%{transform:translateY(-4%) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){img[src$="#festeja"]{animation:none}}
.mm-caroline{border:3px solid #e8b54a}.mm-caroline img{object-position:50% 40%}

/* v1.16 · reto «Armá la palabra» (motor Construir dentro de Tilo) */
#opciones .tilo-armar { grid-column: 1 / -1; width: 100%; height: clamp(330px, 56vh, 520px); border-radius: 18px; overflow: hidden; }
.tilo-armar .co-lumi { display: none; }
.tilo-armar .co-fin { display: none; }
.visual.armar-oculto { display: none; }   /* una palabra del docente sin dibujo: el dibujo del lugar no ayuda y quita lugar */
.visual.armar { flex-shrink: 0; max-height: 120px; }
.visual.armar img { max-height: 110px; width: auto; }

/* ================= v1.18.5 · arte nuevo del lado del niño ================= */
/* El niño entra con su código: el portal de luz de fondo y el teclado al centro, sobre un vidrio oscuro. */
.fondo-arte,.fondo-arte img{position:absolute;inset:0;width:100%;height:100%}
.fondo-arte img{object-fit:cover;object-position:center center}
.con-fondo-arte .escena::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,14,36,.25) 0%,rgba(8,14,36,.55) 70%,rgba(8,14,36,.75) 100%)}
.con-fondo-arte .nino-caja{background:rgba(10,18,46,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,226,140,.28);border-radius:28px;padding:22px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.con-fondo-arte .nino-caja .lumi-guia{width:110px;height:auto}
/* Bandas arriba de «Mis juegos» y «Mis logros»: bajas, para que la lista empiece a la vista. */
.mj .banda{position:relative;margin:-6px 0 14px;border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.mj .banda img{display:block;width:100%;height:clamp(96px,22vw,170px);object-fit:cover;object-position:right 55%}
/* v1.18.5 · a 320 px el avatar del saludo no se sale por la derecha */
@media (max-width:360px){.mj-saludo{flex-wrap:wrap}.mj-yo{max-width:100%}}
/* v1.24.2 · Gotita y la promesa en Mis juegos: borde de agua y Gotita a la vista */
.mm-gotita{border:3px solid #7fd3ff}.mm-gotita img{object-position:82% 78%}
/* v1.26 · Zaro, el protagonista: primero y a lo ancho en Mis juegos */
.mj-mundos .mm-zaro{order:-1;grid-column:1/-1;aspect-ratio:16/9;border:3px solid #4fb8ff;box-shadow:0 0 0 4px rgba(79,184,255,.25),0 14px 34px rgba(42,143,230,.45)}
.mj-mundos .mm-zaro .mj-entrar{background:linear-gradient(180deg,#6cc8ff,#2a8fe6);color:#04122e}
.mj-logo-zaro{width:min(220px,55%);height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(79,184,255,.55))}.mj-zaro-nombre{display:block;line-height:0}

/* ===== v1.47 · Sello IC (C4 y C5): lo que toca el niño mide 48 px o más y lo que lee, 18 px o más ===== */
.btn-oir,.tarjeta-tilo .btn-oir{min-height:48px;font-size:18px;padding:8px 16px}
.comodin{min-height:48px;font-size:18px;padding:8px 16px}
#pReto .opcion{min-height:max(48px,min(76px,9.5vh))}
.punto{font-size:18px}
.punto-etiqueta{padding:6px 12px;line-height:1.15}
.punto-etiqueta b{font-size:18px}
.punto-etiqueta small{font-size:18px}
.punto-est{font-size:16px;letter-spacing:1px}
@media (max-width:400px){.punto-etiqueta{max-width:150px}.punto-etiqueta b,.punto-etiqueta small{font-size:18px}}
.desafio .d-txt b{font-size:19px}.desafio .d-txt small{font-size:18px}
.fantasma{font-size:18px}
#pFin .mundo-reto b{font-size:18px}
#pFin .mundo-reto small{font-size:18px;text-transform:none}
#pFin .mundo-reto button{min-height:48px;font-size:18px;padding:10px 18px}
.sub{font-size:18px}
.energia-cab{font-size:18px}
.energia-piezas span{font-size:18px}
.mapa-lista summary{font-size:18px;min-height:48px;display:flex;align-items:center;justify-content:center}
.lugar .l-nom{font-size:19px}.lugar .l-hab{font-size:18px}
.reto-lugar{font-size:18px}
#pReto .opciones:has(> .palabra-op:nth-child(3):last-child) .opcion{font-size:max(18px,min(calc(var(--base) + 2px),4vh))}
#pReto .opcion.palabra-op{font-size:max(18px,calc(var(--base) + 6px))}
.fin-logro small{font-size:18px;text-transform:none}.fin-logro b{font-size:19px}.fin-logro em{font-size:18px}
.fin-modo span{font-size:18px}
#pFin .ff-mas span{font-size:max(18px,.6em)}

/* v1.47 · Teléfono acostado (C3): el reto entero entra; lo que no entra, se desliza (antes quedaba tapado por la barra del adulto). */
@media (orientation:landscape) and (max-height:520px){
  #pReto.pantalla{align-items:flex-start}
  #pReto .reto-wrap{height:auto;flex:none}
  #pReto .robot-lado .burbuja{-webkit-line-clamp:2;font-size:18px}
  #pReto .robot-lado .robot{width:40px}
  #pReto .tarjeta-reto{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);grid-template-areas:"cab com" "vis enun" "vis pal" "vis ops" "vis fb";
    align-items:center;justify-items:center;column-gap:16px;row-gap:6px;flex:none;overflow:visible;padding:10px 14px}
  #pReto .reto-cab .reto-lugar{display:none}   /* el lugar ya se lee arriba, en la barra */
  #pReto .reto-cab{justify-content:center}
  #pReto .reto-cab{grid-area:cab}
  #pReto .comodines{grid-area:com;justify-content:flex-end}
  #pReto .visual{grid-area:vis}
  #pReto .enunciado{grid-area:enun}
  #pReto #palabraVista{grid-area:pal}
  #pReto .opciones{grid-area:ops;width:100%}
  #pReto .feedback{grid-area:fb;width:100%}
  #pReto .tilo-armar{grid-column:1 / -1}
  #pReto .visual img,#pReto .visual img.dibujo{width:min(96px,25vh);height:min(96px,25vh)}
  #pReto .visual{font-size:min(72px,20vh)}
  #pReto .texto-reto{font-size:20px;line-height:1.3}
  #pReto .opcion{min-height:52px}
  #pReto .reto-cab .reto-lugar img{width:26px;height:26px}
  body:has(.tutor-barra:not([hidden])) #pReto.pantalla.activa{padding-bottom:72px}
}
.btn-reto{font-size:18px;min-height:52px}
.fantasma,.guardian-cab{flex:none;margin-bottom:0}
.btn-oir{white-space:nowrap}

/* v1.51 (integrador) · Mientras Tilo le pregunta al adulto «¿la leyó?», la barra del adulto se corre: el panel ya es para él y,
   en el teléfono (sobre todo acostado o con el compañero del reto arriba), la barra tapaba «✓ Sí, la leyó». Y cuando hay barra,
   lo que se desliza solo para que se vea queda por encima de ella. */
body:has(#vozPanel:not([hidden])) .tutor-barra{display:none}
body:has(.tutor-barra:not([hidden])) #pReto.pantalla{scroll-padding-bottom:72px}
/* v1.51 (integrador) · La palabra de la medalla nueva, en el final del niño, también a 18 px (regla C5 del Sello; salía a 15). */
#pFin .medalla b{font-size:18px}

/* ===== v2.33 · Tilo en el teléfono de un niño de 1.º (revisión a 390 px) ===== */
/* Los avisos, de a uno y un poco más cortos (juego.js los encola). */
.toast{font-size:18px;animation-duration:2.2s}
/* El 🔊 de la tarjeta de Tilo ya no tapa el final de la primera línea de lo que dice. */
.tarjeta-tilo .burbuja{padding-right:76px}
/* El título de ayudante y la mochila: letra de 18 px. */
.titulo-ayudante small,.titulo-ayudante span,.titulo-ayudante span b{font-size:18px}
.mochila-dato{font-size:18px!important}
/* ¿Solo o con alguien?: lo de abajo de cada opción, en juntos.css (18 px). */
/* La barra de arriba del juego: el 🔊 de 48 px y los números a 18 px. */
.hud-btn{width:48px;height:48px}
.hud-energia,.hud-racha{font-size:18px}
/* La palabra en inglés: 48 px de alto y su nota a 16 px (es la ayuda chiquita, al lado de la palabra grande). */
.ingles{min-height:48px}
.ingles small{font-size:16px}
/* «Hablar con Tilo» en el teléfono: un botón redondo con 💬 (el texto queda para el lector de pantalla), así no tapa la
   tarjeta de Tilo ni la misión. Y lo último de la página se puede subir por encima de él. */
@media (max-width:480px){
  .chat-abrir{font-size:0;width:60px;height:60px;min-height:60px;padding:0;display:grid;place-items:center}
  .chat-abrir[hidden]{display:none}
  .chat-abrir::before{content:'💬';font-size:28px;line-height:1}
  body:has(.chat-abrir) .nino{padding-bottom:84px}   /* v2.36 · solo en las páginas que bajan; las pantallas de jugar ya no bajan */
}

/* ===== v2.33 · Lumi en el teléfono de un niño de 1.º ===== */
/* «Luz», 18 px; «Capítulo 1 de 5» y «Lumi te recomienda» son etiquetas chiquitas arriba de algo grande: 16 px (a 18 no
   entran en la tarjeta de 155 px del teléfono). */
.luz-nino span{font-size:18px}
.lumi-faro .mj-globo small{font-size:16px}
.mj-rec{font-size:16px;top:-12px}

/* ===== v2.36 · Sin scroll en las pantallas de jugar (Sello IC; Franco, 25 oct) ===== */
/* Cada pantalla del juego de Tilo mide lo que mide el teléfono. Lo que no entra se achica por ALTO (dvh), no por ancho.
   Lo vigila pruebas/ui_sin_scroll.py en 360×640, 390×844 y 844×390. */
#pInicio.activa,#pHistoria.activa,#pMapa.activa{height:100vh;height:100dvh;min-height:0;overflow:hidden;align-items:stretch;
  padding:calc(60px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom))}
#pInicio .inicio,#pHistoria .inicio{height:100%;min-height:0;justify-content:space-evenly;gap:min(14px,1.5dvh);flex-wrap:nowrap}
#pInicio .inicio>*,#pHistoria .inicio>*{flex-shrink:0}
#pInicio .robot-grande,#pHistoria .robot-grande{width:min(170px,11dvh)}
#pInicio .inicio-yo .avv{--s:min(64px,6.5dvh)}
#pHistoria .personaje{width:min(150px,16dvh)}
#pInicio .logo-juego img{width:auto;height:min(176px,13dvh);max-width:78vw}
#pInicio .sub{margin:0}
#pInicio .energia{padding:8px 14px}
#pInicio .energia-barra{margin:6px 0}
#pInicio .btn-grande,#pHistoria .btn-grande,#pMapa .btn-grande{flex:none}
#pHistoria .burbuja{min-height:0}
/* Teléfono chico parado: las piezas de la energía (ojos, corazón…) se ven en la casa de Tilo; acá, la barra sola. */
#pInicio .energia-piezas{display:none}   /* las piezas (ojos, corazón…) se ven en la casa de Tilo; acá, la barra sola */
@media (max-height:720px){#pInicio .sub{display:none}#pInicio .inicio .burbuja,#pHistoria .burbuja{padding:8px 12px;font-size:18px;line-height:1.3}#pInicio .logo-juego img{height:11dvh}}
/* El camino (el mapa): el dibujo toma el alto que queda, sin estirarse; los desafíos, en una fila; el detalle de cada
   lugar se lee en el mapa mismo. */
#pMapa .mapa-wrap{height:100%;min-height:0;gap:min(12px,1.4dvh);justify-content:flex-start;max-width:560px}
#pMapa .mapa-cab .robot-mapa{width:min(72px,7dvh)}
#pMapa .mapa-ilustrado{flex:none;height:min(calc(100dvh - 340px),calc((100vw - 28px) * 1.777));width:auto;max-width:none;align-self:center}
/* En el teléfono el dibujo del camino queda de fondo y los 4 lugares van en 2 × 2, grandes y sin cortarse. */
@media (max-width:600px),(max-height:520px){
  #pMapa .mapa-ilustrado{flex:1 1 auto;min-height:0;height:auto;width:100%;max-width:520px;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;align-content:space-evenly;gap:10px;padding:12px;background-size:cover;background-position:center 60%}
  #pMapa .mapa-ilustrado .punto,#pMapa .mapa-ilustrado .punto.lado-izq,#pMapa .mapa-ilustrado .punto.lado-der{position:static;transform:none;flex-direction:column;width:auto;gap:4px;justify-self:center}
  #pMapa .punto img{width:min(64px,8dvh);height:min(64px,8dvh)}
  #pMapa .punto-etiqueta{white-space:normal;max-width:none;text-align:center;align-items:center;padding:4px 10px}
}
@media (max-height:720px){#pMapa .punto-est{display:none}}
#pMapa .mapa-lista{display:none}
#pMapa .desafios{display:flex;gap:8px;max-width:none;flex:none}
#pMapa .desafios>*{flex:1 1 0;min-width:0}

/* Teléfono acostado: dos columnas. */
@media (orientation:landscape) and (max-height:520px){
  #pInicio.activa,#pHistoria.activa,#pMapa.activa{padding-top:calc(56px + env(safe-area-inset-top))}
  #pInicio .inicio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto);align-content:center;justify-items:center;column-gap:20px;row-gap:6px;max-width:820px}
  #pInicio .robot-grande{grid-column:1;grid-row:1 / 3;width:min(120px,22dvh)}
  #pInicio .inicio .burbuja{grid-column:1;grid-row:3 / 6;align-self:start;font-size:18px;padding:8px 12px}
  #pInicio .inicio-yo{grid-column:2;grid-row:1}
  #pInicio .logo-juego{grid-column:2;grid-row:2}
  #pInicio .logo-juego img{height:min(96px,22dvh)}
  #pInicio .sub{display:none}
  #pInicio .energia{grid-column:2;grid-row:4}
  #pInicio #btnVamos{grid-column:2;grid-row:5}
  #pInicio .energia-piezas{display:none}
  #pHistoria .inicio{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto;align-items:center;column-gap:20px;row-gap:8px;max-width:820px}
  #pHistoria .duo{grid-column:1;grid-row:1 / 4}
  #pHistoria .robot-grande{width:min(120px,26dvh)}
  #pHistoria .personaje{width:min(120px,30dvh)}
  #pHistoria .burbuja{grid-column:2;grid-row:1;font-size:18px}
  #pHistoria .historia-puntos{grid-column:2;grid-row:2;justify-self:center}
  #pHistoria #btnHistoria{grid-column:2;grid-row:3;justify-self:center}
  #pMapa .mapa-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;row-gap:10px;max-width:820px;align-items:start}
  #pMapa .mapa-ilustrado{grid-column:1;grid-row:1 / 4;height:100%;max-width:none}
  #pMapa .punto img{width:min(52px,12dvh);height:min(52px,12dvh)}
  #pMapa .mapa-ilustrado .punto,#pMapa .mapa-ilustrado .punto.lado-izq,#pMapa .mapa-ilustrado .punto.lado-der{flex-direction:row;justify-self:stretch}
  #pMapa .punto-etiqueta{text-align:left;align-items:flex-start;flex:1;min-width:0}
  #pMapa .punto-est{display:none}
  #pMapa .mapa-cab{grid-column:2;grid-row:1}
  #pMapa #btnEmpezar{grid-column:2;grid-row:2;justify-self:center}
  #pMapa .desafios{grid-column:2;grid-row:3;flex-direction:column}
}
/* «Armá la palabra» dentro de Tilo (GUION-ARMA-PALABRA-CLARITA.md §3-B): la consigna una vez (el título), sin los
   comodines de arriba (en este juego no se usan: queda «✨ Pista» abajo) y un solo 🔊 («Escuchar», arriba). */
#pReto .tarjeta-reto:has(.tilo-armar) .comodines{display:none}
.tilo-armar .co-globo-grande,.tilo-armar .co-redondo,.tilo-armar .co-oir-grande{display:none}
/* «Armá la palabra» toma el alto que queda en la tarjeta (antes, una caja de 330 a 520 px que se deslizaba adentro). */
#pReto .tarjeta-reto:has(.tilo-armar){justify-content:flex-start}
#pReto #opciones:has(.tilo-armar){flex:1 1 0;min-height:0;display:flex}
#opciones .tilo-armar{height:auto;flex:1 1 auto;min-height:0}
.tilo-armar .co-top{min-height:0;padding:4px 10px}
.tilo-armar .co-globo{min-height:40px;padding:4px 12px}
.tilo-armar .co-medio{padding:8px 10px;gap:min(14px,1.6dvh)}
.tilo-armar .co-hueco{min-width:max(52px,min(80px,9dvh));min-height:max(52px,min(80px,9dvh))}
.tilo-armar .co-pieza{min-width:max(52px,min(72px,8.5dvh));min-height:max(52px,min(72px,8.5dvh));font-size:max(24px,min(42px,5dvh))}
.tilo-armar .co-medio{overflow:hidden}
.tilo-armar .co-bandeja{min-height:0}
@media (max-height:700px){#pReto .tarjeta-reto:has(.tilo-armar) .visual img{width:min(90px,12dvh);height:min(90px,12dvh)}}
@media (orientation:landscape) and (max-height:520px){
  #pReto .reto-wrap:has(.tilo-armar){height:100%}
  #pReto .tarjeta-reto:has(.tilo-armar){flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,26%) minmax(0,1fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"cab ops" "vis ops" "enun ops"}
  #pReto .tarjeta-reto:has(.tilo-armar) #opciones{grid-area:ops;height:100%;align-self:stretch}
  #pReto .tarjeta-reto:has(.tilo-armar) #palabraVista,#pReto .tarjeta-reto:has(.tilo-armar) .feedback{display:none}
  #pReto .tarjeta-reto:has(.tilo-armar) .enunciado{font-size:20px}
  #pReto .tilo-armar{grid-column:auto}
}
@media (orientation:landscape) and (max-height:520px){.tilo-motor-capa .dc-medio{gap:3px;padding:3px 8px}.tilo-motor-capa .dc-dibujo{width:44px;height:44px}
  .tilo-motor-capa .dc-pantalla{min-height:48px;padding-top:2px;padding-bottom:2px}.tilo-motor-capa .dc-abajo{padding-top:4px}
  .tilo-motor-capa .dc-medio{overflow:hidden}.tilo-motor-capa .dc-top{min-height:48px;padding-top:2px;padding-bottom:2px}.tilo-motor-capa .dc-globo{min-height:40px;padding:4px 12px}}

/* ---- v2.36 · Las páginas del niño que no bajan («fija»): la casa de Tilo, Mi isla y Ajustes ---- */
body.fija{height:100vh;height:100dvh;overflow:hidden}
body.fija .nino{height:100vh;height:100dvh;min-height:0;overflow:hidden;justify-content:flex-start;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom))}
body.fija:has(.nav-nino) .nino{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
body.fija .nino .bosque-cab{flex:none;padding-left:62px;margin-bottom:6px;min-height:48px}
/* El sobre que avisa «¡Te llegó algo!» va arriba a la derecha (abajo tapaba la barra y el botón de jugar). */
body:has(.nav-nino) .sb-aviso{top:calc(8px + env(safe-area-inset-top));bottom:auto;min-height:48px;padding:6px 12px 6px 6px}
@media (max-width:480px){body:has(.nav-nino) .sb-aviso b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
body.fija:has(.sb-aviso:not([hidden])) .bosque-cab{padding-right:96px}
/* La casa de Tilo: arriba el título de ayudante, al medio Tilo con «¡A jugar!», abajo los atajos. */
.bosque-fija .bosque{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:min(10px,1.2dvh)}
.bosque-fija .bosque>*{flex-shrink:0}
.bosque-fija .titulo-ayudante{padding:6px 12px 6px 6px;gap:8px}
.bosque-fija .titulo-ayudante .ta-pj{height:min(56px,6dvh);width:auto}
.bosque-fija .logro-aviso{padding:6px 12px}
.bosque-fija .tarjeta-tilo{flex:1 1 auto;min-height:0;padding:12px 14px;gap:min(8px,1dvh);justify-content:space-evenly}
.bosque-fija .tarjeta-tilo .burbuja{font-size:18px;line-height:1.3;padding:8px 66px 8px 12px}
.bosque-fija .tarjeta-tilo .btn-oir{top:16px;right:20px}
.bosque-fija .robot-bosque{width:min(190px,9dvh);margin:0}
.bosque-fija .tarjeta-tilo>*{flex-shrink:0}
.bosque-fija .chat-abrir{display:none!important}   /* «Hablar con Tilo» va en los atajos de abajo */
.bosque-fija .tarjeta-tilo h2{margin:0;font-size:20px}
.bosque-fija .tarjeta-tilo .energia{padding:6px 12px}
.bosque-fija .tarjeta-tilo .energia-cab span{display:none}
.bosque-fija .tarjeta-tilo .energia-cab{justify-content:flex-end}
.bosque-fija .tarjeta-tilo .energia-barra{margin:4px 0}
@media (max-height:900px){.bosque-fija .tarjeta-tilo h2,.bosque-fija .tarjeta-tilo .energia-piezas{display:none}}
@media (max-height:700px){.bosque-fija .titulo-ayudante .ta-barra,.bosque-fija .titulo-ayudante span{display:none}
  .bosque-fija .tarjeta-tilo .burbuja{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}   /* lo entero lo dice el 🔊 */
  .bosque-fija .robot-bosque{width:8dvh}
  .bosque-fija .tarjeta-tilo .btn-grande{min-height:56px;padding-top:8px;padding-bottom:8px}
  .bosque-fija .bm-atajo{min-height:58px}
  .bosque-fija .titulo-ayudante .ta-pj{height:40px}
  .bosque-fija .titulo-ayudante{padding:4px 10px 4px 4px}
  .bosque-fija .tarjeta-tilo .energia{display:flex;align-items:center;gap:10px;padding:4px 12px}
  .bosque-fija .tarjeta-tilo .energia-barra{flex:1;margin:0}
  .bosque-fija .tarjeta-tilo{padding:8px 12px}}
.bosque-mas{display:flex;gap:6px;flex:none}
.bm-atajo{flex:1 1 0;min-width:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;
  border:0;border-radius:16px;background:var(--crema);color:var(--tinta);font-family:inherit;cursor:pointer;box-shadow:0 0 0 3px rgba(244,196,48,.35),0 6px 14px rgba(0,0,0,.3)}
.bm-atajo img{width:28px;height:28px;object-fit:contain}.bm-atajo .bm-emo{font-size:24px;line-height:1}
.bm-atajo b{font-size:16px;line-height:1.1;text-align:center;white-space:nowrap}
.bm-atajo small{font-size:16px;font-weight:800;color:var(--oro-3)}
.bm-hoja{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto}
.bm-hoja::backdrop{background:rgba(5,24,16,.72)}
.bm-hoja .tarjeta-nino{margin-bottom:10px}
.bm-hoja .bm-cerrar{display:flex;margin:0 auto;min-height:52px;background:rgba(5,24,16,.85)}
/* Acostado: Tilo a la izquierda y lo demás a la derecha. */
@media (orientation:landscape) and (max-height:520px){
  .bosque-fija .bosque{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 14px;max-width:820px}
  .bosque-fija .titulo-ayudante,.bosque-fija .logro-aviso{grid-column:2}
  .bosque-fija .tarjeta-tilo{grid-column:1;grid-row:1 / 3;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;column-gap:10px;padding:8px 12px}
  .bosque-fija .tarjeta-tilo .burbuja{grid-column:2;grid-row:1}
  .bosque-fija .tarjeta-tilo .btn-oir{top:12px;right:16px}
  .bosque-fija .robot-bosque{grid-column:1;grid-row:1 / 3;width:min(120px,26dvh)}
  .bosque-fija .tarjeta-tilo .energia{display:none}
  .bosque-fija .tarjeta-tilo .btn-grande{grid-column:2;grid-row:2;justify-self:center}
  .bosque-fija .tarjeta-tilo .burbuja{font-size:18px;line-height:1.25;padding:6px 56px 6px 10px}
  .nav-nino{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
  .nav-nino a{flex-direction:row;justify-content:center;min-height:48px;padding:2px 6px;gap:6px}
  .nav-nino .nn-ico img{width:28px;height:28px}
  .bosque-fija .tarjeta-tilo h2,.bosque-fija .tarjeta-tilo .energia-piezas{display:none}
  .bosque-fija .bosque-mas{grid-column:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;align-self:end}
  .bosque-fija .bm-atajo{min-height:56px;padding:4px 2px}
  .bosque-fija .bm-atajo small{display:none}
  .bosque-fija .titulo-ayudante .ta-barra{display:none}
  body.fija:has(.nav-nino) .nino{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
/* Mis ajustes, sin bajar */
body.fija .aj-nino{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:min(10px,1.2dvh)}
body.fija .aj-nino>*{flex-shrink:0;margin:0}
body.fija .aj-yo{margin:0;gap:4px}
body.fija .aj-yo .avatar-nino{width:min(84px,9dvh);height:min(84px,9dvh)}
body.fija .aj-form{gap:min(10px,1.2dvh)}
body.fija .aj-op{padding:8px 14px;min-height:56px}
body.fija .aj-nino{justify-content:flex-start}
body.fija .aj-salir{margin-top:auto;padding-top:min(14px,1.6dvh);border-top:2px dashed rgba(255,224,138,.3);width:100%}   /* «Salir», abajo y aparte: que no se toque sin querer */
@media (max-height:700px){body.fija .aj-op small,body.fija .aj-salir small{display:none}body.fija .aj-nino .mj-h1{font-size:24px}}
@media (orientation:landscape) and (max-height:520px){body.fija:has(.sb-aviso:not([hidden])) .aj-nino{padding-top:58px}}
@media (orientation:landscape) and (max-height:520px){
  body.fija .aj-nino{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-rows:auto 1fr auto;column-gap:20px;max-width:820px;align-content:center}
  body.fija .aj-nino .mj-h1{grid-column:1;grid-row:1;font-size:24px}
  body.fija .aj-yo{grid-column:1;grid-row:2}
  body.fija .aj-ok{grid-column:2}
  body.fija .aj-form{grid-column:2;grid-row:1 / 4}
  body.fija .aj-salir{grid-column:1;grid-row:3;align-self:end;margin-top:12px}
  body.fija .aj-op small{display:none}
}
/* Mi isla, sin bajar (la v2.38 la vuelve el fondo del lobby; acá solo entra en la pantalla) */
body.fija .isla{flex:1 1 auto;min-height:0;width:100%;padding:0;display:flex;flex-direction:column;align-items:center;gap:min(10px,1.2dvh)}
body.fija .isla>*{flex-shrink:0}
body.fija .isla h1{font-size:min(1.7rem,3.4dvh)}
body.fija .isla-cielo{flex:1 1 auto;min-height:0;padding:8px;display:flex;align-items:center;justify-content:center}
body.fija .isla-tierra{height:100%;width:auto;max-width:100%;aspect-ratio:1024/907}
body.fija .isla-tierra img.base{width:100%;height:100%;object-fit:contain}
body.fija .isla-caja{padding:10px 14px}
body.fija .isla-caja h2{font-size:18px;margin-bottom:6px}
body.fija .isla-caja p:empty{display:none}
body.fija .isla-masc-lista button{min-height:48px}
@media (max-height:700px){body.fija .isla-ayuda{display:none}}
@media (orientation:landscape) and (max-height:520px){
  body.fija .isla{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:16px;row-gap:8px;max-width:none;height:100%;align-items:start}
  body.fija .isla-cielo{grid-column:1;grid-row:1 / 5;height:100%;align-self:stretch;padding:4px;border-radius:20px}
  body.fija .isla h1{display:none}
  body.fija .isla-ayuda{grid-column:2;grid-row:2;display:block;font-size:18px;margin-top:56px}
  body.fija .isla-masc-lista{gap:6px}
  body.fija .isla-masc-lista button img{width:36px;height:36px}
  body.fija .isla-caja{grid-column:2;grid-row:3;align-self:start}
  body.fija .isla .btn-sec{display:none}   /* acostado, «Volver» es «Yo» en la barra de abajo (no entraba) */
}
/* Los desafíos del camino (el guardián, «Diez seguidas»…), todos a la vista: en el teléfono, compactos en una fila. */
@media (max-width:600px),(max-height:520px){
  #pMapa .desafios{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px}
  #pMapa .desafio{padding:6px 8px;gap:8px;min-height:56px}
  #pMapa .desafio .d-ico{flex-basis:36px;height:36px;font-size:22px}
  #pMapa .desafio small,#pMapa .desafio i{display:none}
  #pMapa .desafio b{font-size:18px;line-height:1.1}
}
@media (orientation:landscape) and (max-height:520px){#pMapa .desafios{grid-auto-flow:row;grid-template-columns:1fr}}
@media (max-width:480px){body:has(.chat-abrir:not([hidden])) #pMapa .desafios{padding-right:66px}}   /* el 💬 de Tilo no tapa «Diez seguidas» */

/* ---- v2.38 · Mi isla con acceso propio, arriba de Mis juegos («la isla se decora desde la isla») ---- */
.mj-isla-acceso{grid-column:1/-1;order:-2;display:flex;align-items:center;gap:10px;min-height:60px;padding:6px 8px 6px 12px;border-radius:18px;
  background:linear-gradient(90deg,rgba(63,174,90,.28),rgba(58,166,220,.22));border:2px solid rgba(140,220,150,.65);color:inherit;text-decoration:none}
.mj-cuentos-acceso{background:linear-gradient(90deg,rgba(246,196,69,.3),rgba(120,90,220,.22));border-color:rgba(246,196,69,.7)}   /* v2.41 */
.mj-isla-acceso .mj-isla-ic{font-size:30px;line-height:1}
.mj-isla-acceso b{flex:1;font-size:20px}
.mj-isla-acceso .mj-isla-deco{min-height:48px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:#fff8e7;color:#3a2a14;font-weight:800;font-size:18px}

/* v2.48.1 · Solo para lectores de pantalla (lo vio Leonel en Studio: sin esta regla, los nombres de las cosas se veían gigantes). */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;display:block!important}