/* =====================================================================
   ¡A leer, Alonso! — estilos
   Tipografía: Baloo 2 (botones y títulos) · Andika (letras y lectura:
   hecha para enseñar a leer, con la "a" y la "g" como se escriben a mano)
   ===================================================================== */

@font-face { font-family:'Baloo 2'; font-weight:600; font-display:swap; src:url(../fonts/baloo-2-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Baloo 2'; font-weight:800; font-display:swap; src:url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Andika'; font-weight:400; font-display:swap; src:url(../fonts/andika-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Andika'; font-weight:700; font-display:swap; src:url(../fonts/andika-latin-700-normal.woff2) format('woff2'); }

:root{
  --tinta:#2B2560; --tinta2:#5B53A0; --suave:#8C86BF; --linea:#E7E2F7;
  --morado:#7048E8; --sol:#FFC933; --oro:#F5A700; --coral:#FF6B6B; --verde:#2FB344; --verde-os:#1E8A33;
  --papel:#FFFDF8;
  --c:#7048E8; --c-os:#5130C0; --c-cl:#EFE9FF;          /* color del mundo activo */
  --f-ui:'Baloo 2', ui-rounded, system-ui, sans-serif;
  --f-leer:'Andika', 'Baloo 2', system-ui, sans-serif;
  --sombra:0 10px 24px rgba(43,37,96,.13);
  --arriba:env(safe-area-inset-top, 0px);
  --abajo:env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
html,body{ margin:0; padding:0; }
body{ background:#BFE6FF; font-family:var(--f-ui); color:var(--tinta); -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
img{ -webkit-user-drag:none; }
button{ font-family:var(--f-ui); color:inherit; }
#app{ min-height:100vh; min-height:100dvh; }

.pantalla{ min-height:100vh; min-height:100dvh; position:relative; animation:entrar .3s ease-out both; overflow-x:hidden; }
@keyframes entrar{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- Botón 3D (el ladrillo de toda la app) ---------- */
.b3d{
  --bc:var(--c); --bs:var(--c-os);
  border:none; cursor:pointer; color:#fff; background:var(--bc);
  font-weight:800; font-size:20px; letter-spacing:.2px;
  border-radius:22px; padding:14px 22px;
  box-shadow:0 6px 0 var(--bs), 0 12px 18px rgba(43,37,96,.14);
  transition:transform .09s, box-shadow .09s;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.b3d:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--bs), 0 4px 8px rgba(43,37,96,.1); }
.b3d.blanco{ --bc:#fff; --bs:#DAD3F2; color:var(--tinta); }
.b3d.verde{ --bc:var(--verde); --bs:var(--verde-os); }
.b3d.grande{ font-size:25px; padding:18px 30px; border-radius:26px; }
.b3d.ancho{ width:100%; }
.b3d svg{ width:26px; height:26px; }

.redondo{
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--tinta2); display:grid; place-items:center;
  box-shadow:0 4px 0 #DAD3F2, 0 8px 14px rgba(43,37,96,.12);
  transition:transform .09s, box-shadow .09s; flex-shrink:0;
}
.redondo:active{ transform:translateY(3px); box-shadow:0 1px 0 #DAD3F2; }
.redondo svg{ width:26px; height:26px; }

/* Stickers: el recorte con borde blanco, como calcomanía */
.sticker{
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
          drop-shadow(0 7px 8px rgba(30,20,80,.22));
}
.sombrita{ filter: drop-shadow(0 8px 8px rgba(30,20,80,.2)); }

/* Animaciones de vida */
@keyframes flotar{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes mece{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
@keyframes respira{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@keyframes salta{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-16px); } 55%{ transform:translateY(0); } 70%{ transform:translateY(-5px); } }
@keyframes pop{ 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
@keyframes temblar{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-9px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(4px); } }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@keyframes girar{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes nube{ from{ transform:translateX(-30vw); } to{ transform:translateX(130vw); } }
.flota{ animation:flota 3s ease-in-out infinite; }
.mece{ animation:mece 3.2s ease-in-out infinite; transform-origin:50% 100%; }
.respira{ animation:respira 2.6s ease-in-out infinite; }
.temblar{ animation:temblar .45s; }
.pop{ animation:pop .4s cubic-bezier(.2,1.3,.4,1) both; }

/* Partículas de celebración */
.chispa{ position:fixed; width:12px; height:12px; border-radius:3px; pointer-events:none; z-index:90;
  animation:chispa .9s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes chispa{ from{ transform:translate(0,0) rotate(0) scale(1); opacity:1; }
  to{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4); opacity:0; } }

/* ================= SPLASH ================= */
.splash{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px;
  background: radial-gradient(circle at 50% 42%, #FFF6D8 0, #FFD978 26%, #FF9E57 62%, #F2637C 100%); overflow:hidden; }
.splash .rayos{ pointer-events:none; position:absolute; left:50%; top:42%; width:900px; height:900px; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.22) 0 9deg, transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 12%, transparent 62%); mask:radial-gradient(circle, #000 12%, transparent 62%);
  animation:girar 40s linear infinite; transform:translate(-50%,-50%); }
.splash .personajes{ position:relative; height:250px; width:320px; }
.splash .personajes img{ position:absolute; }
.splash h1{ position:relative; margin:4px 0 0; font-size:52px; line-height:.95; color:#fff; text-align:center; letter-spacing:-.5px;
  text-shadow:0 4px 0 #D94F2B, 0 10px 22px rgba(120,30,0,.3); }
.splash h1 small{ display:block; font-size:34px; }
.splash .b3d{ position:relative; z-index:1; }
.splash p{ position:relative; margin:0 0 14px; color:#7A2A10; font-size:19px; font-weight:600; }

/* ================= INICIO: el mapa de aventura ================= */
.inicio{ background:linear-gradient(180deg,#8ED4FF 0,#C6ECFF 330px,#5CC0FA 331px,#3AA3EE 720px,#2B86D8 100%); padding-bottom:calc(40px + var(--abajo)); }
.inicio .cielo-deco{ position:absolute; inset:0 0 auto 0; height:330px; overflow:hidden; pointer-events:none; }
.inicio .cielo-deco .nube-v{ position:absolute; opacity:.9; animation:nube linear infinite; }
.inicio .cielo-deco .sol-v{ position:absolute; right:-18px; top:calc(58px + var(--arriba)); width:96px; animation:respira 4s ease-in-out infinite; }

.barra-top{ position:relative; z-index:3; display:flex; align-items:center; gap:10px; padding:calc(12px + var(--arriba)) 14px 6px; }
.avatar{ width:56px; height:56px; border-radius:50%; background:#fff; border:3px solid #fff; box-shadow:0 4px 0 #DAD3F2; overflow:hidden; display:grid; place-items:end center; flex-shrink:0; }
.avatar img{ width:130%; margin-bottom:-38%; }
.saludo{ flex:1; line-height:1.05; }
.saludo b{ display:block; font-size:24px; color:var(--tinta); }
.saludo span{ font-size:14px; color:var(--tinta2); font-weight:600; }
.chip{ background:#fff; border:none; border-radius:18px; padding:6px 12px; font-weight:800; font-size:18px; color:var(--oro);
  box-shadow:0 4px 0 #DAD3F2; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.chip.stk{ color:var(--c-os); }
.chip svg{ width:20px; height:20px; }

.hoy{ position:relative; z-index:2; margin:14px 16px 0; background:#fff; border-radius:30px; padding:18px 18px 18px;
  box-shadow:0 8px 0 rgba(43,37,96,.08), var(--sombra); }
.hoy .eti{ font-size:14px; font-weight:800; color:var(--c); text-transform:uppercase; letter-spacing:1.2px; }
.hoy h2{ margin:2px 0 0; font-size:30px; line-height:1.05; color:var(--tinta); max-width:62%; }
.hoy .sub{ font-size:15px; color:var(--tinta2); font-weight:600; margin-top:2px; max-width:62%; }
.hoy .heroe{ position:absolute; right:8px; top:-14px; width:112px; height:112px; object-fit:contain; }
.hoy .pasos-hoy{ display:flex; gap:8px; margin:14px 0 14px; }
.paso-hoy{ flex:1; border:none; cursor:pointer; font-family:var(--f-ui); box-shadow:0 4px 0 #E4DEF7; transition:transform .09s; border-radius:16px; padding:8px 6px; text-align:center; font-size:13px; font-weight:800; color:var(--tinta2); background:#F4F1FF; position:relative; }
.paso-hoy:active{ transform:translateY(3px); }
.paso-hoy i{ display:block; font-style:normal; font-size:22px; }
.paso-hoy.hecho{ background:#DDF7E7; color:var(--verde-os); }
.paso-hoy.hecho::after{ content:'✓'; position:absolute; top:-7px; right:-5px; width:22px; height:22px; border-radius:50%; background:var(--verde); color:#fff; font-size:14px; display:grid; place-items:center; }
.paso-hoy.toca{ background:var(--c-cl); color:var(--c-os); box-shadow:inset 0 0 0 2px var(--c); }

/* Mar con islas */
.mar{ position:relative; margin-top:26px; padding:10px 0 20px; }
.mar::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:radial-gradient(ellipse 22px 6px at 20px 20px, #fff 60%, transparent 62%) 0 0/120px 90px,
             radial-gradient(ellipse 16px 5px at 80px 64px, #fff 60%, transparent 62%) 0 0/120px 90px; }
.camino-mar{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.isla{ position:relative; z-index:1; width:88%; height:214px; border:none; background:none; padding:0; cursor:pointer; display:block; }
.isla.der{ margin-left:auto; } .isla.izq{ margin-right:auto; }
.isla + .isla{ margin-top:18px; }
.isla .tierra{ position:absolute; left:4%; right:4%; bottom:30px; height:96px; border-radius:50%;
  background:linear-gradient(180deg,#8FE463 0,#63C63F 44%,#F7DB97 45%,#E8BE6E 100%);
  box-shadow:0 0 0 12px rgba(255,255,255,.18), 0 16px 0 rgba(0,40,90,.18), inset 0 -10px 0 rgba(150,90,20,.14); }
.isla .tierra::after{ content:''; position:absolute; left:14%; right:14%; top:9%; height:26%; border-radius:50%; background:rgba(255,255,255,.22); }
.isla .pj{ position:absolute; bottom:78px; object-fit:contain; transform-origin:50% 100%; }
.isla:active .tierra{ transform:translateY(3px); }
.isla .cartel{ position:absolute; top:auto; bottom:0; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2; background:var(--ic); color:#fff; border-radius:18px; padding:6px 14px 7px;
  box-shadow:0 5px 0 var(--io), 0 10px 14px rgba(0,0,0,.14); text-align:left; line-height:1.05; }

.isla .cartel b{ display:block; font-size:19px; }
.isla .cartel small{ font-size:13px; font-weight:600; opacity:.95; }
.isla .barrita{ margin-top:6px; height:8px; width:120px; border-radius:6px; background:rgba(255,255,255,.35); overflow:hidden; }
.isla .barrita i{ display:block; height:100%; background:#fff; border-radius:6px; }

.botones-pie{ display:flex; gap:12px; padding:18px 16px 0; }
.botones-pie .b3d{ flex:1; font-size:17px; padding:13px 10px; }

/* ================= MUNDO: el camino de lecciones ================= */
.mundo{ background:linear-gradient(180deg, var(--c-cl) 0, #fff 520px, var(--c-cl) 100%); padding-bottom:calc(60px + var(--abajo)); }
.cabecera{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:calc(10px + var(--arriba)) 14px 12px;
  background:var(--c); color:#fff; box-shadow:0 5px 0 var(--c-os); border-radius:0 0 26px 26px; }
.cabecera h1{ flex:1; margin:0; font-size:23px; line-height:1.05; }
.cabecera h1 small{ display:block; font-size:14px; font-weight:600; opacity:.9; }
.cabecera .redondo{ width:46px; height:46px; }
.cabecera .chip{ box-shadow:0 4px 0 rgba(0,0,0,.15); }

.camino{ position:relative; padding:30px 0 10px; }
.camino svg.ruta{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.nodo-fila{ position:relative; padding:12px 0 18px; display:flex; justify-content:center; }
.nodo-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }
.nodo{ position:relative; width:84px; height:84px; border-radius:50%; border:5px solid #fff; cursor:pointer;
  background:var(--c); color:#fff; font-family:var(--f-leer); font-weight:700; font-size:34px; line-height:1;
  box-shadow:0 7px 0 var(--c-os), 0 12px 18px rgba(43,37,96,.18); display:grid; place-items:center; padding:0;
  transition:transform .1s, box-shadow .1s; }
.nodo:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--c-os); }
.nodo .ico{ font-size:30px; font-family:var(--f-ui); }
.nodo img{ width:64px; height:64px; object-fit:contain; }
.nodo.bloq{ background:#CDD3E0; box-shadow:0 7px 0 #A9B1C4; color:#fff; }
.nodo.bloq img{ filter:grayscale(1) opacity(.45); }
.nodo.bloq::after{ content:''; position:absolute; right:-6px; bottom:-4px; width:28px; height:28px; border-radius:50%; background:#8F98AE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center/16px no-repeat; border:3px solid #fff; }
.nodo.actual{ width:100px; height:100px; font-size:42px; animation:latido 1.6s ease-in-out infinite; }
.nodo.actual::before{ content:''; position:absolute; inset:-14px; border-radius:50%; border:4px solid var(--c); opacity:.45; animation:anillo 1.6s ease-out infinite; }
@keyframes anillo{ from{ transform:scale(.85); opacity:.6; } to{ transform:scale(1.25); opacity:0; } }
.nodo.hecho{ background:linear-gradient(160deg, var(--c) 0, var(--c-os) 100%); }
.nodo .mini-estrellas{ position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); display:flex; gap:1px; }
.nodo .mini-estrellas svg{ width:19px; height:19px; }
.nodo-titulo{ margin-top:30px; white-space:nowrap;
  font-size:14px; font-weight:800; color:var(--tinta2); background:#fff; padding:2px 10px; border-radius:10px; box-shadow:0 2px 0 var(--linea); }
.nodo.actual + .nodo-titulo{ margin-top:18px; color:var(--c-os); }
.aqui{ position:absolute; top:-6px; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.aqui img{ width:66px; animation:flota 1.8s ease-in-out infinite; }
.aqui .bocadillo{ background:#fff; color:var(--c-os); font-weight:800; font-size:16px; padding:5px 11px; border-radius:14px; box-shadow:var(--sombra); margin-bottom:2px; white-space:nowrap; }
.deco-camino{ position:absolute; width:96px; opacity:.95; pointer-events:none; }

/* ================= LECCIÓN ================= */
.leccion{ background:radial-gradient(circle at 50% -10%, #fff 0, var(--c-cl) 70%); display:flex; flex-direction:column; }
.lec-top{ display:flex; align-items:center; gap:12px; padding:calc(10px + var(--arriba)) 14px 6px; }
.lec-top .redondo{ width:44px; height:44px; }
.barra-prog{ flex:1; height:20px; border-radius:12px; background:#fff; box-shadow:inset 0 3px 0 rgba(0,0,0,.06); overflow:hidden; }
.barra-prog i{ display:block; height:100%; width:0; border-radius:12px; background:var(--c); transition:width .5s cubic-bezier(.3,1.3,.5,1);
  background-image:linear-gradient(180deg, rgba(255,255,255,.35) 0 38%, transparent 38%); }
.lec-escena{ flex:1; display:flex; flex-direction:column; align-items:center; padding:6px 16px calc(20px + var(--abajo)); gap:16px; width:100%; max-width:560px; margin:0 auto; }

.instruccion{ width:100%; display:flex; align-items:center; gap:12px; background:#fff; border-radius:22px; padding:10px 16px 10px 10px; box-shadow:0 4px 0 var(--linea); }
.instruccion .redondo{ width:48px; height:48px; background:var(--c); color:#fff; box-shadow:0 4px 0 var(--c-os); }
.instruccion span{ font-size:21px; font-weight:800; line-height:1.15; color:var(--tinta); }
.instruccion .ll{ font-family:var(--f-leer); color:var(--c-os); font-size:26px; }

/* Fichas (letras, sílabas, números) */
.fichas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; width:100%; }
.fichas.rej3{ display:grid; grid-template-columns:repeat(3, 1fr); max-width:340px; }
.ficha{ min-width:84px; height:92px; padding:0 16px; border:none; border-radius:24px; background:#fff; color:var(--tinta);
  font-family:var(--f-leer); font-weight:700; font-size:50px; line-height:1; cursor:pointer;
  box-shadow:0 7px 0 #DDD6F3, 0 12px 18px rgba(43,37,96,.10); display:grid; place-items:center;
  transition:transform .1s, box-shadow .1s, background .2s, color .2s; }
.ficha:active{ transform:translateY(5px); box-shadow:0 2px 0 #DDD6F3; }
.ficha.chica{ font-size:40px; height:80px; min-width:74px; }
.ficha.ok{ background:var(--verde); color:#fff; box-shadow:0 7px 0 var(--verde-os); animation:pop .35s; }
.ficha.mal{ background:#FFE1E1; animation:temblar .45s; }
.ficha.apagada{ opacity:.18; pointer-events:none; }
.ficha.color{ background:var(--c); color:#fff; box-shadow:0 7px 0 var(--c-os); }
.ficha.naranja{ background:#FF9F43; color:#fff; box-shadow:0 7px 0 #D77716; }
.ficha.fusion{ background:linear-gradient(90deg, var(--c) 0 50%, #FF9F43 50% 100%); color:#fff; box-shadow:0 7px 0 var(--c-os); animation:pop .4s; }

/* Tarjetas con dibujo */
.cartas{ display:flex; gap:12px; justify-content:center; width:100%; flex-wrap:wrap; }
.carta{ flex:1; min-width:96px; max-width:150px; border:none; background:#fff; border-radius:26px; padding:12px 8px 10px; cursor:pointer;
  box-shadow:0 7px 0 #DDD6F3, 0 12px 18px rgba(43,37,96,.10); display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .1s, box-shadow .1s, background .2s; }
.carta:active{ transform:translateY(5px); box-shadow:0 2px 0 #DDD6F3; }
.carta .vis{ width:96px; height:96px; display:grid; place-items:center; }
.carta .vis img{ max-width:96px; max-height:96px; object-fit:contain; }
.carta .vis .emo{ font-size:70px; line-height:1; }
.carta .nom{ font-family:var(--f-leer); font-size:20px; font-weight:700; color:var(--tinta2); min-height:24px; }
.carta .nom b{ color:var(--c-os); }
.carta.ok{ background:#DDF7E7; box-shadow:0 7px 0 #9FDDB5; animation:pop .35s; }
.carta.mal{ background:#FFE1E1; animation:temblar .45s; }

.emo{ font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* Conocer letra / número */
.presenta{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.letra-hero{ position:relative; border:none; cursor:pointer; background:#fff; border-radius:40px; padding:6px 34px 10px; box-shadow:0 10px 0 var(--linea), var(--sombra);
  font-family:var(--f-leer); font-weight:700; font-size:128px; line-height:1.1; color:var(--c); display:flex; gap:22px; align-items:baseline; animation:pop .5s both; }
.letra-hero .min{ color:var(--tinta); font-size:108px; }
.letra-hero.num{ font-size:150px; padding:0 44px 6px; }
.clave{ display:flex; align-items:center; gap:14px; background:#fff; border:none; border-radius:28px; padding:10px 22px 10px 12px; cursor:pointer; box-shadow:0 6px 0 var(--linea); animation:pop .5s .25s both; }
.clave .vis img{ width:104px; height:104px; object-fit:contain; }
.clave .vis .emo{ font-size:80px; }
.clave .pal{ font-family:var(--f-leer); font-size:40px; font-weight:700; color:var(--tinta); }
.clave .pal b{ color:var(--c); }
.silabas-muestra{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.silabas-muestra button{ border:none; background:var(--c-cl); color:var(--c-os); font-family:var(--f-leer); font-weight:700; font-size:26px; border-radius:14px; padding:4px 14px; cursor:pointer; }

.bandeja{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; min-height:70px; max-width:360px; }
.bandeja img{ width:62px; height:62px; object-fit:contain; animation:pop .35s both; }
.bandeja.chica img{ width:50px; height:50px; }

/* Campo para contar */
.campo{ position:relative; width:100%; max-width:380px; height:320px; background:linear-gradient(180deg,#E8F9E4 0,#CFF0C4 100%); border-radius:32px; box-shadow:inset 0 -8px 0 rgba(47,140,40,.10); overflow:hidden; }
.campo .cosa{ position:absolute; width:84px; height:84px; border:none; background:none; padding:0; cursor:pointer; transition:transform .15s; }
.campo .cosa img{ width:100%; height:100%; object-fit:contain; }
.campo .cosa .num{ position:absolute; top:-6px; right:-4px; width:34px; height:34px; border-radius:50%; background:var(--c); color:#fff; font-weight:800; font-size:20px; display:grid; place-items:center; border:3px solid #fff; animation:pop .3s; box-shadow:0 3px 6px rgba(0,0,0,.2); }
.campo .cosa.contada img{ animation:salta .5s; }

.grupos{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.grupo{ flex:1; min-height:170px; background:#fff; border:none; border-radius:28px; padding:12px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:4px; cursor:pointer; box-shadow:0 7px 0 #DDD6F3; transition:transform .1s; position:relative; }
.grupo img{ width:48px; height:48px; object-fit:contain; }
.grupo.ok{ background:#DDF7E7; box-shadow:0 7px 0 #9FDDB5; } .grupo.mal{ background:#FFE1E1; animation:temblar .45s; }
.grupo .cuenta{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--c); color:#fff; font-weight:800; font-size:20px; border-radius:14px; padding:0 12px; }
.signo{ font-size:44px; font-weight:800; color:var(--c-os); }
.opciones-num{ display:flex; gap:14px; justify-content:center; }

.canasta{ position:relative; width:100%; max-width:380px; min-height:150px; border-radius:30px 30px 60px 60px; padding:16px 12px 28px;
  background:repeating-linear-gradient(90deg,#D9A35B 0 14px,#C78A43 14px 28px); box-shadow:inset 0 10px 0 rgba(0,0,0,.08), 0 8px 0 #9E6A2E;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:4px; }
.canasta .rotulo{ position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); background:#fff; color:var(--tinta); font-weight:800; font-size:28px; min-width:64px; text-align:center; border-radius:18px; padding:0 14px; box-shadow:0 4px 0 #DAD3F2; }
.canasta img, .monton img{ width:54px; height:54px; object-fit:contain; cursor:pointer; }
.monton{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; min-height:70px; max-width:380px; }

/* Palabra para leer */
.palabra-leer{ display:flex; align-items:center; gap:4px; background:#fff; border-radius:30px; padding:8px 12px 8px 22px; box-shadow:0 8px 0 var(--linea), var(--sombra); animation:pop .45s both; }
.palabra-leer .sil{ border:none; background:none; cursor:pointer; font-family:var(--f-leer); font-weight:700; font-size:62px; color:var(--tinta); padding:0 2px; border-radius:14px; line-height:1.2; }
.palabra-leer .sil:nth-child(odd){ color:var(--c-os); }
.palabra-leer .sil.dicha{ background:#FFF0B3; }
.palabra-leer .redondo{ margin-left:8px; }
.huecos{ display:flex; gap:10px; justify-content:center; }
.hueco{ min-width:90px; height:88px; border-radius:22px; border:4px dashed #CFC6EE; background:rgba(255,255,255,.6); display:grid; place-items:center; font-family:var(--f-leer); font-size:48px; font-weight:700; color:#fff; }
.hueco.lleno{ border:none; background:var(--c); box-shadow:0 6px 0 var(--c-os); animation:pop .35s; }
.dibujo-grande{ height:150px; display:grid; place-items:center; }
.dibujo-grande img{ max-height:150px; max-width:200px; object-fit:contain; }
.dibujo-grande .emo{ font-size:112px; line-height:1; }

.frase{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; background:#fff; border-radius:26px; padding:14px 18px; box-shadow:0 6px 0 var(--linea); }
.frase .pal{ border:none; background:none; cursor:pointer; font-family:var(--f-leer); font-weight:700; font-size:36px; color:var(--tinta); padding:0 4px; border-radius:10px; }
.frase .pal.dicha{ background:#FFF0B3; }
.sino{ display:flex; gap:16px; }
.sino .b3d{ min-width:130px; font-size:26px; }
.sino .no{ --bc:#FF6B6B; --bs:#D94545; }

/* Tren para ordenar */
.tren{ display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap; justify-content:center; min-height:96px; }
.vagon{ width:58px; height:62px; border-radius:12px 12px 6px 6px; background:rgba(255,255,255,.7); border:3px dashed #CFC6EE; position:relative; display:grid; place-items:center; font-family:var(--f-leer); font-weight:700; font-size:34px; color:#fff; }
.vagon::before,.vagon::after{ content:''; position:absolute; bottom:-12px; width:16px; height:16px; border-radius:50%; background:#4B4478; border:3px solid #fff; }
.vagon::before{ left:6px; } .vagon::after{ right:6px; }
.vagon.lleno{ border:none; background:var(--c); animation:pop .35s; }
.locomotora{ font-size:58px; line-height:1; margin-right:2px; }

/* Trazar */
.pizarra{ position:relative; width:100%; max-width:380px; aspect-ratio:1; background:#fff; border-radius:36px; box-shadow:0 10px 0 var(--linea), var(--sombra); touch-action:none; }
.pizarra canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:36px; touch-action:none; }
.pizarra .fondo-lineas{ position:absolute; inset:0; border-radius:36px; pointer-events:none;
  background:linear-gradient(180deg, transparent 11%, #F1EEFB 11% 11.8%, transparent 11.8% 50%, #F6F4FD 50% 50.6%, transparent 50.6% 88.5%, #F1EEFB 88.5% 89.3%, transparent 89.3%); }
.palabra-trazo{ display:flex; gap:6px; }
.palabra-trazo span{ font-family:var(--f-leer); font-weight:700; font-size:40px; color:#CFC6EE; min-width:30px; text-align:center; }
.palabra-trazo span.hecha{ color:var(--c); }
.palabra-trazo span.ahora{ color:var(--tinta); text-decoration:underline 4px var(--sol); text-underline-offset:6px; }
.fila-botones{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Burbujas */
.cielo-burbujas{ position:relative; width:100%; max-width:420px; height:min(58vh, 460px); border-radius:32px; overflow:hidden;
  background:linear-gradient(180deg,#BFE7FF 0,#E8F7FF 100%); box-shadow:inset 0 -8px 0 rgba(30,120,200,.08); }
.burbuja{ position:absolute; width:82px; height:82px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,.35) 11% 40%, rgba(170,220,255,.35) 70%, rgba(120,190,255,.55) 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.8), 0 6px 14px rgba(30,100,180,.18);
  font-family:var(--f-leer); font-weight:700; font-size:40px; color:var(--tinta); display:grid; place-items:center; }
.contador-burbujas{ display:flex; gap:6px; }
.contador-burbujas i{ width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px var(--linea); }
.contador-burbujas i.si{ background:var(--c); box-shadow:none; animation:pop .3s; }

/* Festejo entre pasos */
.festejo{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; justify-content:center; align-items:flex-end; gap:6px;
  padding:0 12px calc(10px + var(--abajo)); pointer-events:none; }
.festejo img{ height:150px; animation:subir .5s cubic-bezier(.2,1.3,.4,1) both; }
.festejo .globo-dialogo{ margin-bottom:84px; background:#fff; color:var(--verde); font-size:30px; font-weight:800; border-radius:24px; padding:10px 20px; box-shadow:0 6px 0 #C9EFD5, var(--sombra); animation:pop .4s .1s both; white-space:nowrap; }
.festejo.fuera img, .festejo.fuera .globo-dialogo{ animation:bajar .35s ease-in forwards; }
@keyframes subir{ from{ transform:translateY(170px); } to{ transform:none; } }
@keyframes bajar{ to{ transform:translateY(200px); opacity:0; } }

/* ================= PREMIO ================= */
.premio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:calc(24px + var(--arriba)) 20px calc(28px + var(--abajo)); overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #FFF7D6 0, #FFD76A 28%, #FFAF4D 62%, #FF7F50 100%); text-align:center; }
.premio .rayos{ pointer-events:none; position:absolute; left:50%; top:40%; width:800px; height:800px; border-radius:50%; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(255,255,255,.28) 0 10deg, transparent 10deg 20deg);
  -webkit-mask:radial-gradient(circle, #000 10%, transparent 64%); mask:radial-gradient(circle, #000 10%, transparent 64%);
  animation:girar 24s linear infinite; }
.premio h1{ position:relative; margin:0; font-size:42px; line-height:1; color:#fff; text-shadow:0 4px 0 #D9622B, 0 10px 20px rgba(140,40,0,.25); }
.premio .estrellas-premio{ position:relative; display:flex; gap:6px; align-items:flex-end; }
.premio .estrellas-premio svg{ width:74px; height:74px; transform:scale(0); }
.premio .estrellas-premio svg:nth-child(2){ width:92px; height:92px; margin-bottom:16px; }
.premio .estrellas-premio svg.si{ animation:pop .5s cubic-bezier(.2,1.5,.4,1) forwards; }
.premio .estrellas-premio svg.no{ animation:pop .5s forwards; opacity:.35; }
.premio .nuevo{ position:relative; font-size:19px; font-weight:800; color:#8A3A10; background:rgba(255,255,255,.7); border-radius:16px; padding:3px 14px; }
.premio .stk-grande{ position:relative; width:210px; height:210px; object-fit:contain; animation:pop .6s .9s both, mece 3s 1.6s ease-in-out infinite; }
.premio .b3d{ position:relative; margin-top:6px; }

/* ================= STICKERS ================= */
.stickers{ background:linear-gradient(180deg,#FFF4E0 0,#FFE3EC 100%); padding-bottom:calc(40px + var(--abajo)); }
.album-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:14px 10px; padding:18px 14px; }
.album-rejilla button{ border:none; background:rgba(255,255,255,.65); border-radius:22px; padding:8px 4px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.album-rejilla img{ width:78px; height:78px; object-fit:contain; }
.album-rejilla .silueta img{ filter:brightness(0) opacity(.13); }
.album-rejilla span{ font-size:13px; font-weight:800; color:var(--tinta2); line-height:1.05; }
.album-rejilla .silueta span{ color:#C4BEDC; }
.resumen-album{ margin:14px 16px 0; background:#fff; border-radius:24px; padding:12px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 5px 0 rgba(0,0,0,.05); }
.resumen-album .barra{ flex:1; height:16px; border-radius:10px; background:#F1ECFF; overflow:hidden; }
.resumen-album .barra i{ display:block; height:100%; background:linear-gradient(90deg,#FF9F43,#EC4899); border-radius:10px; }

/* ================= CUENTOS ================= */
.cuento{ background:#FFF8EC; display:flex; flex-direction:column; }
.cuento .lec-top{ position:absolute; z-index:5; left:0; right:0; }
.cuento .puntos{ flex:1; display:flex; gap:6px; justify-content:center; }
.cuento .puntos i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cuento .puntos i.si{ background:#fff; width:24px; border-radius:6px; }
.escena{ position:relative; width:100%; height:min(56vh, 520px); overflow:hidden; border-radius:0 0 36px 36px; box-shadow:0 8px 0 rgba(0,0,0,.06); }
.escena .actor{ position:absolute; border:none; background:none; padding:0; cursor:pointer; transform-origin:50% 100%; }
.escena .actor img{ width:100%; display:block; }
.escena .actor .emo{ display:block; text-align:center; line-height:1; }
.escena .actor.toque{ animation:salta .6s !important; }
.escena .aviso-toca{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:rgba(255,255,255,.92); border-radius:18px; padding:6px 16px; font-weight:800; font-size:17px; color:var(--tinta); box-shadow:var(--sombra); animation:pop .4s; z-index:4; white-space:nowrap; }
.texto-cuento{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:18px 18px calc(18px + var(--abajo)); max-width:620px; width:100%; margin:0 auto; }
.texto-cuento .frase-c{ font-family:var(--f-leer); font-size:29px; line-height:1.45; color:var(--tinta); text-align:center; }
.frase-c .w{ display:inline-block; cursor:pointer; padding:0 3px; border-radius:9px; transition:background .12s, transform .12s; }
.frase-c .w.activa{ background:#FFE066; transform:scale(1.07); }
.controles-cuento{ display:flex; align-items:center; justify-content:center; gap:14px; }
.controles-cuento .redondo{ width:60px; height:60px; }
.controles-cuento .redondo.listo{ background:var(--c); color:#fff; box-shadow:0 5px 0 var(--c-os); animation:latido 1.2s ease-in-out infinite; }
.controles-cuento .redondo:disabled{ opacity:.35; pointer-events:none; }
.modo-lectura{ border:none; background:#fff; border-radius:16px; padding:6px 12px; font-weight:800; font-size:14px; color:var(--tinta2); box-shadow:0 3px 0 #DAD3F2; }
.modo-lectura.on{ background:var(--c); color:#fff; box-shadow:0 3px 0 var(--c-os); }
.portada-cuento{ position:relative; border:none; background:#fff; border-radius:28px; overflow:hidden; padding:0; cursor:pointer; box-shadow:0 8px 0 rgba(43,37,96,.08), var(--sombra); text-align:left; }
.pregunta-c{ text-align:center; font-size:26px; font-weight:800; color:var(--tinta); margin:0; line-height:1.15; }

/* Fondos de escena */
.f-parque{ background:radial-gradient(ellipse 70% 30% at 20% 100%, #6FCF4C 60%, transparent 61%), radial-gradient(ellipse 80% 34% at 85% 104%, #5BBF3A 60%, transparent 61%), linear-gradient(180deg,#8ED6FF 0,#CFEFFF 62%,#8FDC66 62%,#6FCF4C 100%); }
.f-mar{ background:linear-gradient(180deg,#8ED6FF 0,#CFEFFF 38%,#48B7F3 38%,#1F8FE0 100%); }
.f-isla{ background:radial-gradient(ellipse 60% 22% at 50% 102%, #F7DB97 70%, transparent 71%), linear-gradient(180deg,#8ED6FF 0,#D4F1FF 44%,#48C3F3 44%,#2AA0E6 100%); }
.f-granja{ background:repeating-linear-gradient(90deg, transparent 0 34px, #E9D3A7 34px 40px) 0 58%/100% 42px no-repeat, linear-gradient(180deg,#9EDBFF 0,#E1F5FF 55%,#A6E07A 55%,#7FCB50 100%); }
.f-espacio{ background:radial-gradient(1.5px 1.5px at 12% 20%, #fff 99%, transparent), radial-gradient(2px 2px at 30% 60%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 72% 16%, #fff 99%, transparent), radial-gradient(2px 2px at 86% 52%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 52% 36%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 20% 84%, #fff 99%, transparent), radial-gradient(2px 2px at 64% 80%, #fff 99%, transparent), radial-gradient(circle at 50% 120%, #4B3AA8 0, #231A5C 55%, #120C33 100%); }
.f-noche{ background:radial-gradient(circle at 80% 18%, rgba(255,240,180,.55) 0, transparent 22%), radial-gradient(1.5px 1.5px at 18% 22%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 40% 12%, #fff 99%, transparent), radial-gradient(2px 2px at 62% 30%, #fff 99%, transparent), radial-gradient(ellipse 90% 30% at 50% 104%, #2E4D3A 70%, transparent 71%), linear-gradient(180deg,#2C2466 0,#4B3A8E 70%,#6A4E9E 100%); }
.f-submarino{ background:radial-gradient(ellipse 80% 16% at 50% 104%, #F2D491 70%, transparent 71%), linear-gradient(170deg, rgba(255,255,255,.18) 0 12%, transparent 12% 20%, rgba(255,255,255,.12) 20% 26%, transparent 26%), linear-gradient(180deg,#4FC3F7 0,#1E88E5 60%,#1565C0 100%); }
.f-casa{ background:linear-gradient(180deg,#FFE9C7 0,#FFF3DF 64%,#D9A86C 64%,#C8914F 100%); }

/* ================= PAPÁ Y MAMÁ ================= */
.padres{ background:#F4F2FB; padding-bottom:calc(40px + var(--abajo)); }
.puerta{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:30px; min-height:70vh; text-align:center; }
.mantener{ position:relative; width:140px; height:140px; border-radius:50%; border:none; background:#fff; box-shadow:0 7px 0 #DAD3F2; font-size:46px; cursor:pointer; overflow:hidden; }
.mantener i{ position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(112,72,232,.25); }
.panel{ margin:14px 16px 0; background:#fff; border-radius:24px; padding:16px; box-shadow:0 4px 0 #E4E0F2; }
.panel h3{ margin:0 0 10px; font-size:19px; color:var(--tinta); }
.panel p{ margin:4px 0; color:var(--tinta2); font-size:15px; line-height:1.4; }
.metricas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metrica{ background:#F7F5FF; border-radius:18px; padding:10px 12px; }
.metrica b{ display:block; font-size:28px; color:var(--tinta); line-height:1.1; }
.metrica span{ font-size:13px; color:var(--tinta2); font-weight:600; }
.barras-dias{ display:flex; align-items:flex-end; gap:8px; height:90px; padding-top:6px; }
.barras-dias div{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--suave); font-weight:700; }
.barras-dias i{ width:100%; border-radius:8px 8px 4px 4px; background:var(--morado); min-height:3px; }
.letras-estado{ display:flex; flex-wrap:wrap; gap:6px; }
.letras-estado span{ width:38px; height:40px; border-radius:12px; display:grid; place-items:center; font-family:var(--f-leer); font-weight:700; font-size:22px; background:#F1EEF9; color:#B9B2D6; }
.letras-estado span.si{ background:var(--verde); color:#fff; }
.fila-ajuste{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #F0EDF8; }
.fila-ajuste:first-of-type{ border-top:none; }
.fila-ajuste div{ flex:1; }
.fila-ajuste b{ display:block; font-size:16px; } .fila-ajuste small{ color:var(--tinta2); font-size:13px; }
.fila-ajuste .b3d{ font-size:15px; padding:10px 14px; border-radius:16px; }
.interruptor{ width:58px; height:34px; border-radius:20px; border:none; background:#D5D1E6; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.interruptor::after{ content:''; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.interruptor.on{ background:var(--verde); } .interruptor.on::after{ transform:translateX(24px); }

/* ================= PARQUE DE JUEGOS ================= */
.parque{ background:linear-gradient(180deg,#DDF7E7 0,#fff 60%); padding-bottom:calc(40px + var(--abajo)); }
.rejilla-juegos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 14px; }
.juego{ position:relative; border:none; cursor:pointer; border-radius:26px; padding:12px 10px 14px; background:#fff; box-shadow:0 7px 0 var(--js), 0 12px 18px rgba(43,37,96,.1);
  display:flex; flex-direction:column; align-items:center; gap:6px; overflow:hidden; transition:transform .1s, box-shadow .1s; }
.juego::before{ content:''; position:absolute; inset:0 0 auto 0; height:62%; background:var(--jc); opacity:.16; border-radius:0 0 50% 50%/0 0 22% 22%; }
.juego:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--js); }
.juego .vis{ position:relative; height:84px; display:grid; place-items:center; }
.juego .vis img{ max-height:84px; max-width:110px; object-fit:contain; }
.juego .vis .emo{ font-size:62px; line-height:1; }
.juego b{ position:relative; font-size:17px; line-height:1.1; color:var(--tinta); text-align:center; }
.juego.destacado{ grid-column:1 / -1; flex-direction:row; justify-content:center; gap:14px; padding:14px; }
.juego.destacado b{ font-size:22px; text-align:left; }
.juego.destacado b small{ display:block; font-size:14px; color:var(--tinta2); font-weight:600; }

/* ================= JUEGOS ORIGINALES (se ven igual que siempre) ================= */
body.modo-legacy{ background:linear-gradient(180deg, #BDE3FF 0%, #E7F6FF 45%, #FFF4D6 100%); background-attachment:fixed; }
.legacy{ padding:calc(18px + var(--arriba)) 14px calc(40px + var(--abajo)); max-width:460px; margin:0 auto; }
.legacy .btn{ border:none; border-radius:28px; cursor:pointer; color:#fff; font-family:var(--f-ui); font-weight:800; box-shadow:0 7px 0 rgba(0,0,0,0.18); transition:transform .08s, box-shadow .08s; }
.legacy .btn:active{ transform:translateY(5px) scale(.98); box-shadow:0 2px 0 rgba(0,0,0,0.2); }
.legacy .card{ background:#fff; border-radius:32px; padding:22px; text-align:center; box-shadow:0 6px 0 rgba(0,0,0,0.06); }
.legacy .encabezado{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.legacy .estrellas-pill{ background:#fff; border-radius:20px; padding:8px 14px; font-size:20px; font-weight:800; color:#e8a100; box-shadow:0 3px 0 rgba(0,0,0,0.08); }
.confeti-pieza{ position:absolute; top:-10%; animation:caer 1.6s ease-in forwards; }
.shake{ animation:temblar .4s; }
@keyframes aparecer{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
@keyframes caer{ to{ transform:translateY(115vh) rotate(340deg); opacity:.9; } }
@keyframes latir{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.lapiz{ width:46px; cursor:pointer; background:none; border:none; padding:0; transition:transform .18s cubic-bezier(.34,1.56,.64,1); transform:translateY(10px); filter:drop-shadow(0 4px 3px rgba(0,0,0,.22)); }
.lapiz.activo{ transform:translateY(-14px) rotate(-4deg); }
.lapiz .punta{ width:0; height:0; margin:0 auto; border-left:23px solid transparent; border-right:23px solid transparent; border-bottom:26px solid #E8C39E; }
.lapiz .mina{ width:0; height:0; margin:-26px auto 0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:10px solid var(--c); position:relative; top:16px; }
.lapiz .cuerpo{ height:82px; border-radius:3px 3px 6px 6px; background:var(--c); background-image:linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,.12) 55%, rgba(0,0,0,.26) 100%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; }
.lapiz .cuerpo span{ color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.lapiz .goma{ height:12px; border-radius:0 0 6px 6px; background:rgba(0,0,0,.28); }
.zona-svg path, .zona-svg circle, .zona-svg ellipse, .zona-svg rect, .zona-svg polygon{ transition:fill .25s; }
.pintable{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Respuesta clara en teléfonos */
button, canvas { touch-action: manipulation; }
.pizarra canvas { touch-action: none; }
[hidden] { display: none !important; }
.trazo-estado, .actividad-cuenta { font-size: 18px; font-weight: 700; color: var(--c-os); text-align: center; margin: 8px 0; }
.paso-cuenta { white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--suave); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Letramon: criaturas dibujadas con CSS, sin descargas de imágenes. */
.captura{background:#f6f2ff;max-width:1000px;margin:auto;min-height:100dvh}
.captura .cabecera{gap:10px;flex-wrap:wrap}.captura .cabecera h1{flex:1;font-size:26px}.captura .capt-album{font-size:14px;padding:10px}
.capt-contenido{width:100%;padding:0 12px 28px;box-sizing:border-box}.capt-bienvenida{text-align:center;max-width:580px;margin:20px auto;display:flex;flex-direction:column;align-items:center;gap:18px}.capt-bienvenida h2{font-size:30px;line-height:1.15;margin:0}.capt-bienvenida p{margin:0;line-height:1.6;color:#655681}.capt-insignia{font-size:12px;letter-spacing:2px;font-weight:800;color:#7956bc}.capt-amigos{display:flex;gap:20px;padding:22px 0}.capt-criatura{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--criatura);width:90px;height:110px;border-radius:45% 45% 35% 35%;box-shadow:inset -8px -9px 0 #00000012;border:3px solid #fff;color:#fff;isolation:isolate}.capt-criatura strong{font-family:var(--f-leer);font-size:55px;line-height:1.1;text-shadow:0 3px #0002}.capt-ojos{font-size:15px;letter-spacing:9px;padding-left:9px;color:#30264a;line-height:24px}.capt-cuernos:before,.capt-cuernos:after{content:'';position:absolute;top:-12px;width:25px;height:30px;background:var(--criatura);border-radius:80% 15%;z-index:-1}.capt-cuernos:before{left:7px;transform:rotate(-25deg)}.capt-cuernos:after{right:7px;transform:rotate(35deg)}.capt-pies:before,.capt-pies:after{content:'';position:absolute;bottom:-10px;width:24px;height:16px;background:var(--criatura);border-radius:50%}.capt-pies:before{left:8px}.capt-pies:after{right:8px}.capt-modos{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.capt-modos button{min-height:76px}.capt-modos small{display:block;font-size:13px;margin-top:5px}.capt-nota{font-size:13px;color:#716581}.capt-mision{max-width:680px;margin:auto}.capt-marcador{display:flex;justify-content:space-between;font-weight:800;color:#7051c7;font-size:17px;padding:14px 4px}.capt-marcador span:last-child{color:#c27b06;letter-spacing:3px}.capt-pedido{display:flex;justify-content:center;align-items:center;gap:18px;background:white;border-radius:22px;padding:12px;font-weight:800;font-size:19px}.capt-pedido b{font-family:var(--f-leer);font-size:52px;color:#6b40b7}.capt-pradera{position:relative;background:linear-gradient(#d8f1ff 0%,#e9f9fc 60%,#c8edb1 61%,#aed992 100%);height:310px;border-radius:28px;overflow:hidden;margin-top:14px;border:3px solid #fff}.capt-nubes{position:absolute;top:12px;left:25px;right:25px;font-size:45px;opacity:.75}.capt-nubes span{float:right}.capt-opciones{position:absolute;inset:60px 8px 80px;display:flex;align-items:center;justify-content:space-evenly;gap:4px}.capt-mon{position:relative;border:0;background:none;padding:10px 2px 18px;cursor:pointer;min-width:88px;touch-action:manipulation}.capt-mon .capt-criatura{animation:capt-flota 2.4s ease-in-out infinite;animation-delay:calc(var(--turno) * -.6s)}.capt-mon:focus-visible{outline:4px solid #7550c5;border-radius:20px}.capt-mon:disabled{opacity:1}.capt-sombra{position:absolute;bottom:0;left:10%;width:80%;height:12px;border-radius:50%;background:#25400a1a}.capt-orbe{position:absolute;width:50px;height:50px;bottom:18px;left:calc(50% - 25px);border:3px solid #483080;border-radius:50%;background:linear-gradient(#9b79f2 0 44%,#483080 45% 55%,#fff 56%);box-shadow:0 5px 0 #0002;pointer-events:none}.capt-orbe i{position:absolute;left:16px;top:16px;width:13px;height:13px;border-radius:50%;border:3px solid #483080;background:#fff}.capt-atrapado .capt-criatura{animation:capt-desaparece .45s .3s forwards}.capt-mensaje{min-height:54px;text-align:center;font-weight:800;color:#4b3675;line-height:1.5;margin:14px 0}.capt-trofeo{font-size:78px}.capt-botin{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 0}.capt-criatura.mini{width:48px;height:62px;border-width:2px}.capt-criatura.mini strong{font-size:30px}.capt-criatura.mini .capt-ojos{font-size:9px;line-height:14px;letter-spacing:5px;padding-left:5px}.capt-criatura.mini .capt-cuernos:before,.capt-criatura.mini .capt-cuernos:after{width:15px;height:18px;top:-8px}.capt-criatura.mini .capt-pies:before,.capt-criatura.mini .capt-pies:after{width:15px;height:11px;bottom:-6px}.capt-album-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px}.capt-album-titulo h2{font-size:24px}.capt-album-titulo small{display:block;font-size:14px;color:#756386}.capt-coleccion>p{line-height:1.5;color:#655681}.capt-album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:12px}.capt-ficha{border:2px solid #e7def6;background:white;border-radius:20px;padding:20px 5px 12px;display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer}.capt-ficha small{font-size:12px;color:#645179}.capt-pendiente{background:#ede8f3}.capt-silueta{display:grid;place-items:center;height:64px;font-size:38px;font-family:var(--f-leer);font-weight:700;color:#a599b6}.captura button{touch-action:manipulation}@keyframes capt-flota{50%{transform:translateY(-7px)}}@keyframes capt-desaparece{to{transform:scale(0);opacity:0}}@media(max-width:360px){.capt-mon .capt-criatura{width:73px;height:97px}.capt-amigos{gap:8px}.captura .cabecera h1{font-size:22px}.capt-marcador{font-size:14px}.capt-pedido{gap:10px;font-size:17px}}@media(prefers-reduced-motion:reduce){.capt-mon .capt-criatura{animation:none}.capt-atrapado .capt-criatura{opacity:.25}}