:root{--orange:#ff7a1a;--yellow:#ffd23f;--blue:#2f80ed;--sky:#e8f4ff;--green:#5cc96b;--purple:#8e5cd9;--pink:#ff6fa5;--ink:#1f2a44;--white:#fff;--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--sky);font-size:1.1rem;line-height:1.5}
img{max-width:100%;height:auto}
a{color:var(--blue)}
:focus-visible{outline:4px solid var(--purple);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}
header{background:var(--yellow);box-shadow:0 4px 0 rgba(0,0,0,.08);position:sticky;top:0;z-index:5}
.bar{max-width:1100px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;margin-right:auto}
.logo img{width:48px;height:48px;border-radius:50%}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;order:3;width:100%;justify-content:space-between}
nav a{display:block;padding:.45rem .8rem;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;background:rgba(255,255,255,.6)}
nav a[aria-current=page]{background:var(--orange);color:#fff}
#lang-toggle{font:inherit;font-weight:800;border:0;border-radius:999px;padding:.45rem .9rem;background:var(--blue);color:#fff;cursor:pointer;min-height:44px}
main{max-width:1100px;margin:auto;padding:1rem}
h1,h2,h3{line-height:1.15;margin:.4em 0}
h1{font-size:clamp(1.9rem,6vw,3.2rem)} h2{font-size:clamp(1.5rem,4.5vw,2.3rem);color:var(--orange)}
.hero{display:grid;gap:1rem;align-items:center;background:linear-gradient(160deg,#fff7d6,#ffe1c4);border-radius:var(--r);padding:1.25rem}
.hero .chars{display:flex;justify-content:center;align-items:flex-end;gap:.25rem}
.hero .chars img{width:30%;max-height:240px;object-fit:contain}
.btn{display:inline-block;font-weight:800;text-decoration:none;color:#fff;background:var(--orange);padding:.7rem 1.2rem;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.18);min-height:44px;margin:.25rem .25rem 0 0;border:0;font:inherit;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(1.07)} .btn.alt{background:var(--purple)} .btn.yt{background:#e62117;font-size:1.25rem}
.btn-soon{background:#9aa5b8;cursor:default;box-shadow:none}
section{margin:2rem 0}
.grid{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:1fr}
.card{background:#fff;border-radius:var(--r);padding:1rem;box-shadow:0 6px 0 rgba(31,42,68,.08);text-align:center}
.card img{border-radius:16px}
.series .card:nth-child(1){border-top:8px solid var(--green)} .series .card:nth-child(2){border-top:8px solid var(--blue)}
.char img{height:200px;width:auto;object-fit:contain}
.book img{box-shadow:0 4px 12px rgba(0,0,0,.15)}
.game img{width:160px;height:160px;object-fit:contain}
.videos-box{background:#fff;border-radius:var(--r);padding:1.5rem;text-align:center}
footer{text-align:center;padding:2rem 1rem;font-size:.95rem;background:var(--ink);color:#fff;margin-top:2rem}
/* memoria */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:560px;margin:1rem auto}
.mem button{aspect-ratio:1;border:0;border-radius:16px;padding:0;background:var(--blue);cursor:pointer;position:relative;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.mem button::after{content:"?";color:#fff;font-size:2rem;font-weight:800}
.mem button img{display:none;width:100%;height:100%;object-fit:cover;border-radius:16px}
.mem button.open,.mem button.done{background:#fff}
.mem button.open::after,.mem button.done::after{content:none}
.mem button.open img,.mem button.done img{display:block}
.mem button.done{outline:4px solid var(--green)}
.status{display:flex;justify-content:center;gap:1rem;align-items:center;flex-wrap:wrap}
.win{font-size:1.4rem;font-weight:800;color:var(--green);text-align:center;min-height:2em}
/* colorear */
.palette{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:.5rem 0}
.palette button{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #ccc;cursor:pointer}
.palette button[aria-pressed=true]{box-shadow:0 0 0 4px var(--ink)}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}
.tools select,.tools input{font:inherit;min-height:44px}
canvas{display:block;width:100%;max-width:800px;margin:0 auto;background:#fff;border-radius:var(--r);touch-action:none;box-shadow:0 6px 0 rgba(31,42,68,.08)}
@media(min-width:700px){
  nav ul{order:0;width:auto} .logo{margin-right:0} .bar{justify-content:space-between}
  .hero{grid-template-columns:1.1fr 1fr;padding:2rem}
  .grid.c2{grid-template-columns:1fr 1fr} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){.grid.c4{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.thumb{width:180px}