@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('vendor/fonts/baloo2-700.woff2') format('woff2');
}
@font-face{
  font-family:'Comic Neue'; font-style:normal; font-weight:400; font-display:swap;
  src:url('vendor/fonts/comicneue-400.woff2') format('woff2');
}
@font-face{
  font-family:'Comic Neue'; font-style:normal; font-weight:700; font-display:swap;
  src:url('vendor/fonts/comicneue-700.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('vendor/fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('vendor/fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 600; font-display:swap;
  src:url('vendor/fonts/newsreader-var.woff2') format('woff2');
}

:root{
  --bg1:#f4f1fb; --bg2:#fff3ee;
  --ink:#33304a; --ink-soft:#5c5874;
  --card:#ffffff;
  --peach:#ec6a52; --peach-deep:#f25c3d;
  --mint:#1a7f52; --mint-deep:#14694a;
  --babyblue:#3f8bd6; --babyblue-deep:#2f7fe0;
  --red:#c92f48;
  --amber:#ffb84d;
  --lilac:#e6e6fa;
  --line:#e4def2;
  --line-strong:#b3a8d6;
  --surface-soft:#f7f6fb;
  --radius:24px;
  --border:3px solid #fff;
  --shadow:0 10px 24px rgba(51,48,74,.12);
  --shadow-inner:inset -3px -3px 8px rgba(51,48,74,.08), inset 3px 3px 8px rgba(255,255,255,.95);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font-head:'Baloo 2','Comic Neue',cursive;
  --font-body:'Comic Neue','Comic Sans MS',cursive;
  --sb-paper:#ece7dc; --sb-paper-deep:#e6e0d2; --sb-card:rgba(255,252,244,.72);
  --sb-ink:#2b2721; --sb-ink-soft:rgba(43,39,33,.58); --sb-ink-faint:rgba(43,39,33,.36);
  --sb-hairline:rgba(43,39,33,.14); --sb-earth:#9a6a3e;
  /* Etiquetas de texto de la piel cuaderno: 4.75:1 sobre papel y 5.48:1 sobre tarjeta (medido; AA ≥4.5) */
  --sb-ink-label:rgba(43,39,33,.68);
  --font-sketch-head:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-sketch-body:'Newsreader',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0; padding:0; min-height:100%;}
body{
  font-family:var(--font-body);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  overflow-x:hidden;
}
button{font-family:var(--font-head); cursor:pointer; border:none; background:none; color:inherit;}
button:focus-visible{outline:4px solid var(--babyblue); outline-offset:2px;}
h1,h2,h3{margin:0; font-family:var(--font-head); text-wrap:balance;}

/* ===== Barra superior ===== */
#topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; gap:8px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line);
  box-shadow:0 4px 14px rgba(51,48,74,.08);
}
.tb-btn{
  font-size:1.6rem; width:52px; height:52px; border-radius:16px;
  background:#fff; border:var(--border); box-shadow:var(--shadow-inner),var(--shadow);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s var(--spring);
}
.tb-btn:active{transform:scale(.96);}
#star-box{
  display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:999px; padding:8px 18px;
  box-shadow:var(--shadow-inner),var(--shadow); font-weight:700; font-size:1.3rem;
}
#star-box .star-ico{font-size:1.5rem;}

/* ===== Pantallas ===== */
main{max-width:1040px; margin:0 auto; padding:16px 14px 40px;}
.screen{animation:fadein .35s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ===== Inicio (home sketchbook) ===== */
/* Disco de flecha (estética Understory): círculo papel con flecha del color de la píldora */
.bp-disc{display:grid; flex:none; place-items:center; border-radius:50%; background:#f6f3ed; color:#9b78d0;}
.bp-disc svg{fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s ease;}
.link-btn{display:block; margin:12px auto 0; font-size:1rem; color:var(--ink-soft); text-decoration:underline; padding:14px;}

/* ===== Menú de juegos ===== */
.screen-title{text-align:center; font-size:clamp(1.6rem,5vw,2.2rem); margin:8px 0 18px;}
#menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.tile{
  aspect-ratio:1/1; border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:10px; border:var(--border);
  transition:transform .18s var(--spring);
}
.tile:active{transform:scale(.96);}
.tile-emoji{font-size:3.2rem; line-height:1;}
.tile-name{font-weight:800; font-size:1.05rem; text-align:center;}

/* ===== Pantalla de juego ===== */
#game-head{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 14px;}
#game-head .g-emoji{font-size:2.4rem;}
#game-head h2{font-size:1.5rem;}
#game-root{min-height:60vh;}
#game-bar{
  position:sticky; bottom:10px; z-index:40;
  display:flex; justify-content:center; gap:12px; margin-top:20px;
}
.gbtn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:1.15rem; font-weight:800;
  padding:14px 22px; border-radius:999px; background:#fff;
  border:var(--border); box-shadow:var(--shadow-inner),var(--shadow); transition:transform .18s var(--spring);
}
.gbtn:active{transform:scale(.96);}
.gbtn.back{color:var(--ink);}
.gbtn.repeat{background:linear-gradient(180deg,var(--amber),#ff9d2e); color:var(--ink);}

/* ===== Utilidades de juego ===== */
.big-btn{
  font-size:1.6rem; font-weight:800; color:#fff;
  background:linear-gradient(180deg,var(--babyblue),var(--babyblue-deep));
  padding:16px 34px; border-radius:999px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),var(--shadow);
  display:inline-flex; align-items:center; gap:10px; transition:transform .18s var(--spring);
}
.big-btn:active{transform:scale(.96);}
.quiz-hint{text-align:center; font-size:1.05rem; color:var(--ink-soft); margin:10px 0;}
.feedback-banner{
  text-align:center; font-size:1.5rem; font-weight:800; color:var(--mint-deep);
  background:#e6f9ee; border:3px solid var(--mint); border-radius:var(--radius);
  box-shadow:var(--shadow-inner);
  padding:16px; margin:14px auto; max-width:420px; animation:popin .4s ease;
}
@keyframes popin{0%{transform:scale(.5); opacity:0;} 70%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;}}

.bounce{animation:bounce .5s ease;}
@keyframes bounce{0%,100%{transform:scale(1);} 35%{transform:scale(1.25) rotate(-6deg);} 65%{transform:scale(1.1) rotate(5deg);}}
.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);}}

/* ===== Fotos reales con respaldo emoji ===== */
.phwrap{display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface-soft);}
/* Sin fondo suave donde el slot es el propio arte (manzana dibujada) o la mascota del héroe. */
.apple-photo-whole, .apple-photo-cut, .mascot-big .phwrap{background:none;}
.phwrap img{width:100%; height:100%; object-fit:cover; display:block; outline:1px solid rgba(0,0,0,.1); outline-offset:-1px;}
.seq-card .phwrap{width:72px; height:72px; border-radius:14px; font-size:3rem;}
.seq-slot .phwrap{width:56px; height:56px; border-radius:12px; font-size:2.2rem;}
.slot-e{font-size:2.6rem;}
.step-emoji .phwrap{width:150px; height:150px; border-radius:20px; font-size:5.5rem;}
.rc-photo{width:64px; height:64px; border-radius:16px; font-size:3rem;}
.mini-photo{width:100px; height:100px; border-radius:50%; font-size:4rem;}
.taw-photo{width:64px; height:64px; border-radius:12px; font-size:2.6rem;}
.escudo-photo{width:56px; height:56px; border-radius:8px; font-size:2rem;}
.ct-photo{width:64px; height:64px; font-size:3.6rem;}
.tile-photo{width:56px; height:56px; border-radius:14px; font-size:3.2rem;}
#game-head .phwrap{width:44px; height:44px; border-radius:10px; font-size:2.4rem;}
#btn-lalo .phwrap{width:30px; height:30px; font-size:1.6rem;}
#btn-lalo .phwrap img{object-fit:contain; outline:none;}


/* Confeti */
#confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden;}
.confetti{position:absolute; font-size:1.8rem; animation:confetti-fall 2.2s ease-out forwards;}
@keyframes confetti-fall{
  0%{transform:translateY(-40px) rotate(0); opacity:1;}
  100%{transform:translateY(110vh) rotate(720deg); opacity:.2;}
}

/* ===== Semana Montessori: la manzana ===== */
.menu-group-title{grid-column:1/-1; font-size:1.2rem; margin:12px 0 2px; text-align:left; color:var(--ink); display:flex; align-items:center; gap:8px;}
.mode-bar{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:14px 0;}
.mode-btn{padding:12px 20px; border-radius:999px; font-weight:800; font-size:1.05rem; background:var(--lilac); border:var(--border); box-shadow:var(--shadow-inner),var(--shadow); transition:transform .18s var(--spring);}
.mode-btn.on{background:linear-gradient(180deg,var(--mint),var(--mint-deep)); color:#fff;}
.mode-btn:active{transform:scale(.96);}

/* Secuencias (ciclo y recetas) */
.seq-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:10px 0;}
.seq-card{background:#fff; border-radius:18px; box-shadow:var(--shadow-inner),var(--shadow); padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:96px; border:var(--border); transition:transform .18s var(--spring);}
.seq-card:active{transform:scale(.96);}
.sc-e{font-size:3rem;} .sc-n{font-weight:800; font-size:.95rem;}
.seq-slots{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0;}
.seq-slot{width:96px; min-height:96px; border:3px dashed var(--line-strong); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; position:relative; background:var(--surface-soft); box-shadow:inset 0 2px 6px rgba(51,48,74,.06);}
.seq-slot .slot-num{position:absolute; top:4px; left:8px; font-size:.9rem; font-weight:800; color:var(--ink-soft);}
.seq-tray{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:16px; min-height:100px;}

/* Recetas */
.rec-select{display:flex; justify-content:center; gap:18px; flex-wrap:wrap;}
.rec-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:22px 26px; display:flex; flex-direction:column; align-items:center; gap:8px; border:var(--border); transition:transform .18s var(--spring);}
.rec-card:active{transform:scale(.96);}
.rc-t{font-weight:800; font-size:1.05rem; max-width:180px;}
.rec-title{text-align:center; font-weight:800; font-size:1.4rem; margin:6px 0;}
.rec-area{text-align:center;}
.step-stage{min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#fff; border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:26px; margin:0 auto; max-width:460px;}
.step-emoji{font-size:5.5rem;}
.step-label{font-weight:800; font-size:1.4rem;}
.step-verb{color:var(--ink-soft); font-size:1.1rem;}
.step-nav{display:flex; justify-content:center; gap:14px; margin-top:16px;}

/* Manzana y sus partes */
.partes-wrap{text-align:center;}
.apple-stage{position:relative; width:300px; height:340px; margin:0 auto;}
.apple-photo-whole, .apple-photo-cut{position:absolute; inset:0; font-size:9rem;}
.apple-photo-cut{display:none;}
.apple-stage.cut .apple-photo-whole{display:none;}
.apple-stage.cut .apple-photo-cut{display:block;}
/* Respaldo dibujado cuando no hay foto: entera = manzana roja; cortada = interior (cáscara, pulpa, corazón, semillas) */
.apple-fallback{position:absolute; inset:0;}
.fb-body{position:absolute; left:40px; top:80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 32% 30%, #ff8a80, #e63946 58%, #b71c1c); box-shadow:var(--shadow);}
.fb-stem{position:absolute; left:143px; top:42px; width:14px; height:46px; background:#7c4a21; border-radius:8px; transform:rotate(5deg);}
.fb-leaf{position:absolute; left:162px; top:50px; width:58px; height:30px; background:#4caf50; border-radius:60% 40% 60% 40%; transform:rotate(-24deg);}
.fb-body.cut{background:linear-gradient(90deg,#e63946 0 46%,#fff3d6 46% 100%);}
.fb-rim{position:absolute; top:0; right:0; bottom:0; width:9px; background:#c62828; border-radius:0 110px 110px 0;}
.fb-core{position:absolute; left:113px; top:140px; width:74px; height:92px; background:#f6e7c1; border-radius:50%;}
.fb-seed{position:absolute; width:11px; height:17px; background:#5d3a1a; border-radius:50%;}
.fb-seed.s1{left:126px; top:166px; transform:rotate(20deg);}
.fb-seed.s2{left:144px; top:160px; transform:rotate(-8deg);}
.fb-seed.s3{left:162px; top:166px; transform:rotate(26deg);}
.zone{position:absolute; border:none; background:transparent; z-index:5; cursor:pointer;}
.zone.hl{outline:5px dashed #ffd23f; outline-offset:3px;}
.z-tallo{left:136px; top:34px; width:28px; height:62px;}
.z-hoja{left:158px; top:44px; width:66px; height:42px; transform:rotate(-24deg);}
.z-cascara{left:36px; top:76px; width:228px; height:228px; border-radius:50%;}
.apple-stage.cut .z-cascara{width:114px; border-radius:50% 0 0 50%;}
.z-pulpa{display:none; left:150px; top:76px; width:114px; height:228px; border-radius:0 50% 50% 0;}
.z-corazon{display:none; left:108px; top:134px; width:84px; height:104px; border-radius:50%;}
.z-semillas{display:none; left:118px; top:152px; width:64px; height:56px; border-radius:50%;}
.apple-stage.cut .z-pulpa, .apple-stage.cut .z-corazon, .apple-stage.cut .z-semillas{display:block;}
.knife-anim{position:absolute; font-size:4rem; z-index:9; pointer-events:none; animation:knife-sweep .7s ease forwards;}
@keyframes knife-sweep{0%{transform:translate(20px,60px) rotate(-50deg); opacity:0;} 30%{opacity:1;} 100%{transform:translate(180px,170px) rotate(45deg); opacity:0;}}

/* Manzanas de colores */
.cm-area{text-align:center;}
.mini-apple{position:relative; width:104px; height:104px; border-radius:50%; box-shadow:inset -10px -14px 20px rgba(0,0,0,.15), var(--shadow); border:4px solid rgba(255,255,255,.85); transition:transform .12s; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.mini-apple:active{transform:scale(.96);}
.mini-apple.sel{outline:5px solid var(--amber); transform:scale(1.08);}
.basket-row{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:22px;}
.basket{width:120px; height:110px; border-radius:0 0 26px 26px; border:6px solid; background:#f3e9d2; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:1.7rem; transition:transform .18s var(--spring);}
.basket:active{transform:scale(.96);}

/* Formas */
.shape-row{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:10px 0;}
.shape-btn{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:20px 26px; display:flex; flex-direction:column; align-items:center; gap:14px; border:var(--border); transition:transform .18s var(--spring);}
.shape-btn:active{transform:scale(.96);}
.shape-btn .sn{font-weight:800; font-size:1.1rem;}
.shape-circle{width:110px; height:110px; border-radius:50%; background:#ff7b54;}
.shape-square{width:110px; height:110px; border-radius:8px; background:#55a7ff;}
.shape-tri{width:0; height:0; border-left:62px solid transparent; border-right:62px solid transparent; border-bottom:110px solid #38b000;}

/* Tierra, aire y agua */
.taw-zone{padding:14px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; border-radius:16px; margin:8px auto; max-width:560px; border:4px solid #fff; box-shadow:var(--shadow);}
.taw-air{background:linear-gradient(180deg,#bde6ff,#e8f7ff);}
.taw-land{background:linear-gradient(180deg,#d9f2c5,#b9e6a5);}
.taw-water{background:linear-gradient(180deg,#9fd4ff,#cfe9ff);}
.taw-item{font-size:2.6rem; background:rgba(255,255,255,.9); border:var(--border); border-radius:16px; padding:10px 14px; box-shadow:var(--shadow-inner),0 6px 12px rgba(0,0,0,.12); transition:transform .18s var(--spring);}
.taw-item:active{transform:scale(.96);}

/* Bandera */
.bf-wrap{text-align:center;}
.bandera{display:flex; width:min(80vw,300px); height:190px; margin:0 auto; border:6px solid #fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow);}
.stripe{flex:1; display:flex; align-items:center; justify-content:center; transition:background .4s;}
.stripe.empty{background:var(--line);}
.flag-colors{display:flex; justify-content:center; gap:18px; margin-top:18px; flex-wrap:wrap;}
.flag-color{width:76px; height:76px; border-radius:50%; border:5px solid #fff; box-shadow:var(--shadow); transition:transform .12s;}
.flag-color:active{transform:scale(.96);}

/* Contar manzanas */
.ct-area{text-align:center;}
.apple-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:16px 0;}
.count-apple{font-size:3.6rem; background:#fff; border-radius:20px; box-shadow:var(--shadow-inner),var(--shadow); padding:12px 16px; border:var(--border); transition:transform .18s var(--spring);}
.count-apple.on{outline:5px solid var(--amber); transform:scale(1.12);}
.count-apple:active{transform:scale(.96);}
.num-row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px;}
.num-btn{width:78px; height:78px; border-radius:50%; background:#fff; box-shadow:var(--shadow-inner),var(--shadow); font-size:1.8rem; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; border:var(--border); transition:transform .18s var(--spring);}
.num-btn .dots{font-size:.72rem; letter-spacing:2px; margin-top:2px;}
.num-btn:active{transform:scale(.96);}

/* ===== Camino guiado ===== */
.step-top{display:flex; justify-content:space-between; gap:10px; margin:8px 0 14px; flex-wrap:wrap;}
.gbtn:disabled{opacity:.45; box-shadow:none; cursor:default;}
.step-nav-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px;}
#path-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.step-card-btn{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .18s var(--spring); border:var(--border);}
.step-card-btn:active{transform:scale(.96);}
.step-card-btn .phwrap{width:88px; height:88px; border-radius:20px; font-size:3.4rem;}
.step-card-btn .sdone{font-weight:800; color:var(--mint-deep);}
.stage-card-wrap{text-align:center;}
.stage-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:22px; display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto; max-width:340px; transition:transform .18s var(--spring); border:var(--border);}
.stage-card:active{transform:scale(.96);}
.stage-card .phwrap{width:200px; height:200px; border-radius:24px; font-size:6rem;}
.sc-word{font-weight:800; font-size:1.4rem;}
.age-lines p{margin:6px 0;}
.launch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:18px;}
.launch-grid .act-card{cursor:pointer; text-align:left;}
.launch-photo{width:48px; height:48px; border-radius:12px; font-size:2.4rem;}
.video-box{background:var(--surface-soft); border:var(--border); border-radius:18px; box-shadow:var(--shadow-inner),var(--shadow); padding:14px; margin:12px 0;}
.video-box video{width:100%; max-width:480px; border-radius:14px; display:block; margin:0 auto;}
.video-title{font-weight:800; font-size:1rem; margin-bottom:8px; text-align:center;}
.video-hint{text-align:center; color:var(--ink-soft); font-size:.95rem; padding:18px 10px; border:3px dashed var(--line-strong); border-radius:14px;}

/* ===== Inicio de sesión ===== */
.or-div{text-align:center; color:var(--ink-soft); font-size:.95rem; margin:12px 0;}
.login-actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.login-msg{color:var(--red); font-size:.95rem; margin-top:10px; text-align:center;}
#login-setup-note{color:var(--ink-soft);}
#screen-login .big-btn{display:block; margin:10px auto;}
#screen-login .parent-card{max-width:480px; margin:0 auto;}

/* ===== Zona de papás ===== */
.parent-card{background:#fff; border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-inner),var(--shadow); padding:22px; margin-bottom:18px;}
.parent-card h2{font-size:1.35rem; margin-bottom:10px;}
.parent-card h3{font-size:1.1rem; margin:14px 0 8px;}
.parent-card p, .parent-card li{color:var(--ink-soft); line-height:1.55; font-size:.98rem;}
.act-card{background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px; box-shadow:var(--shadow-inner),0 4px 12px rgba(51,48,74,.06); display:flex; flex-direction:column; gap:8px;}
.act-card .a-top{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.act-card .ae{font-size:2.2rem;}
.act-card .at{font-weight:800; font-size:1rem;}
.act-card .ad{color:var(--ink-soft); font-size:.92rem; line-height:1.5; flex:1;}
.act-badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge{font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px;}
.act-check{display:flex; align-items:center; gap:10px; padding:10px 0; font-weight:700; font-size:.95rem; cursor:pointer;}
.act-check input{width:24px; height:24px; accent-color:var(--mint-deep);}
.act-check input:focus-visible{outline:4px solid var(--babyblue); outline-offset:2px;}
.zone:focus-visible{outline:4px solid var(--babyblue); outline-offset:2px;}
.progress-row{margin:14px 0;}
.progress-label{display:flex; justify-content:space-between; font-weight:800; font-size:.95rem; margin-bottom:6px;}
.progress-track{height:16px; background:var(--line); border-radius:999px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(51,48,74,.08);}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--mint),var(--mint-deep)); border-radius:999px; transition:width .5s;}
.setting-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0;}
.setting-row input[type=text], .setting-row input[type=email], .setting-row input[type=password]{font-family:var(--font-body); font-size:1.1rem; padding:12px 16px; border-radius:14px; border:3px solid var(--line); background:#fff; flex:1; min-width:200px;}
.setting-row input:focus-visible{outline:4px solid var(--babyblue); outline-offset:2px;}
.danger-btn{background:#fff0f2; color:var(--red); border:3px solid var(--red); border-radius:16px; padding:12px 18px; font-weight:800;}
.vocab{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin:8px 0;}
.vocab div{background:var(--surface-soft); border-radius:12px; padding:8px 12px; font-size:.95rem; color:var(--ink);}
.goback{display:block; margin:26px auto 0;}
footer{text-align:center; color:var(--ink-soft); font-size:.85rem; padding:20px 14px 30px;}

/* ===== Tipografía de títulos (Baloo 2) ===== */
.screen-title,.tile-name,.sc-word,.step-label,.rec-title,
.video-title,.at,.sdone,.progress-label,.num-btn,#star-box{font-family:var(--font-head);}

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

/* ===== Hover (solo puntero fino) ===== */
/* Usa `translate` (propiedad independiente) para no pisar los transform de :active ni .on. */
@media (hover:hover){
  .tb-btn,.tile,.gbtn,.big-btn,.mode-btn,.step-card-btn,.stage-card,.rec-card,.seq-card,
  .num-btn,.count-apple,.taw-item,.shape-btn,.basket,.act-card{transition:translate .18s var(--spring);}
  .tb-btn:hover,.tile:hover,.gbtn:hover,.big-btn:hover,.mode-btn:hover,.step-card-btn:hover,
  .stage-card:hover,.rec-card:hover,.seq-card:hover,.num-btn:hover,.count-apple:hover,
  .taw-item:hover,.shape-btn:hover,.basket:hover,.act-card:hover{translate:0 -2px;}
  .store-order{transition:translate .18s var(--spring), background .3s ease, box-shadow .3s ease;}
  .store-order:hover{translate:0 -2px;}
}

/* ===== Tienda (pública) ===== */
.store-tag{text-align:center; color:var(--ink-soft); font-size:1rem; max-width:520px; margin:0 auto 18px;}
#store-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:16px;}
.store-card{
  background:#fff; border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-inner),var(--shadow); padding:18px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.store-emoji{font-size:3.4rem; line-height:1;}
.store-name{font-weight:800; font-size:1.2rem;}
.store-price{font-weight:800; color:var(--peach-deep); font-size:1.3rem;}
.store-desc{color:var(--ink-soft); font-size:.95rem; margin:0;}
.store-order{
  margin-top:10px; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; height:46px; padding:0 9px 0 22px;
  border:0; border-radius:999px; text-decoration:none; text-align:center;
  font-size:1.2rem; font-weight:700; color:#fff;
  background:#9b78d0;
  box-shadow:0 10px 22px rgba(82,53,112,.22);
  transition:background .3s ease, box-shadow .3s ease;
}
.store-order:hover{background:#8d69c5; color:#fff;}
.store-order .bp-disc{width:30px; height:30px;}
.store-order .bp-disc svg{width:10px; height:10px;}
.store-order:hover .bp-disc svg{transform:translateX(2px);}

/* ===== Parent Hub (privado) ===== */
#gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:10px 0 16px;}
.gallery-card{
  margin:0; background:#fff; border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-inner),var(--shadow); padding:10px 10px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.gallery-card .phwrap{width:100%; aspect-ratio:1/1; border-radius:12px; font-size:4rem;}
.gallery-title{font-weight:800; display:block; text-align:center;}
.gallery-cap{color:var(--ink-soft); font-size:.85rem; display:block; text-align:center;}

/* ===== Sketchbook (home + tienda) ===== */
body[data-screen="screen-home"], body[data-screen="screen-store"]{
  color:var(--sb-ink);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(154,106,62,.10), transparent 55%),
    radial-gradient(100% 80% at 10% 8%, rgba(43,39,33,.06), transparent 50%),
    linear-gradient(180deg, var(--sb-paper), var(--sb-paper-deep));
  background-attachment:fixed;
}
body[data-screen="screen-home"] #topbar{
  background:rgba(236,231,220,.92);
  border-bottom:1px solid var(--sb-hairline);
  box-shadow:none;
}
body[data-screen="screen-home"] .tb-btn,
body[data-screen="screen-home"] #star-box{
  background:var(--sb-card);
  border:1px solid var(--sb-hairline);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(43,39,33,.06);
  color:var(--sb-ink);
}

#screen-store .store-tag{color:var(--sb-ink-label); font-family:var(--font-sketch-body);}
#screen-store .store-card{
  background:var(--sb-card); border:1px solid var(--sb-hairline); border-radius:8px;
  box-shadow:0 1px 3px rgba(43,39,33,.08);
}
#screen-store .store-name{font-family:var(--font-sketch-head); font-weight:400; color:var(--sb-ink);}
#screen-store .store-price{color:var(--sb-ink); font-weight:600;}
#screen-store .store-desc{color:var(--sb-ink-label);}
#screen-store .store-order{
  background:var(--sb-ink); color:var(--sb-paper);
  box-shadow:0 10px 22px rgba(43,39,33,.22);
}
#screen-store .store-order:hover{background:#1c1915;}
#screen-store .store-order .bp-disc{background:var(--sb-paper); color:var(--sb-ink);}
#screen-store .link-btn{color:var(--sb-ink-label);}

.store-head{padding:clamp(112px,13svh,152px) clamp(20px,5vw,48px) clamp(24px,4vh,40px); text-align:center;}
.store-title{font-family:var(--font-sketch-head); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:.01em; color:var(--sb-ink); margin:0 0 14px; text-wrap:balance;}
.store-body{max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,48px);}
#screen-store .store-tag{font-family:var(--font-sketch-body); font-size:1.05rem; max-width:560px; margin:0 auto;}
#screen-store .store-name{font-size:1.35rem;}
#screen-store .store-desc{font-family:var(--font-sketch-body); line-height:1.5;}
#screen-store .store-price{font-family:var(--font-sketch-body);}
#screen-store .store-order{box-shadow:0 1px 3px rgba(43,39,33,.08);}
#screen-store .store-order .bp-label{font-family:var(--font-sketch-head); font-weight:400; font-size:1.1rem;}
#screen-store .link-btn{font-family:var(--font-sketch-body);}

.store-foot{
  max-width:min(720px, calc(100vw - 24px)); margin:0 auto;
  background:var(--sb-card); border:1px solid var(--sb-hairline); border-radius:8px;
  box-shadow:0 1px 3px rgba(43,39,33,.06);
  padding:clamp(28px,5vw,46px) clamp(22px,5vw,52px);
  text-align:center;
}
.store-foot .section-label{margin-bottom:14px;}
.store-foot-title{font-family:var(--font-sketch-head); font-weight:400; font-size:clamp(1.5rem,3vw,1.9rem); letter-spacing:.01em; color:var(--sb-ink); margin:0 0 12px; text-wrap:balance;}
.store-foot-text{font-family:var(--font-sketch-body); font-size:1.02rem; line-height:1.6; color:var(--sb-ink-label); max-width:52ch; margin:0 auto 20px;}
.store-foot-links{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 16px; font-family:var(--font-sketch-body); font-size:1.08rem;}
.store-foot-links .bio-link{min-height:44px; display:inline-flex; align-items:center;}
.store-foot-sep{color:var(--sb-ink-label);}
#btn-store-home{margin-top:28px;}


/* ===== Home sketchbook (integración) ===== */
:root{--track-caps:.24em; --track-nav:.06em;}
body[data-screen="screen-home"] main, body[data-screen="screen-store"] main{max-width:none; padding:0 0 40px;}
body[data-screen="screen-home"] #topbar, body[data-screen="screen-store"] #topbar{display:none;}
body:not([data-screen="screen-home"]):not([data-screen="screen-store"]) .wash,
body:not([data-screen="screen-home"]):not([data-screen="screen-store"]) .top{display:none;}
#screen-home{position:relative; z-index:0;}

/* ===== Tienda: tilt 3D (port de TiltedCard de React Bits) ===== */
.store-card-wrap{perspective:800px; height:100%;}
.store-card{
  position:relative; height:100%;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  /* sin hover: vuelta lenta y suave al salir */
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* hover: transición corta — la tarjeta persigue al cursor con un
   retardo suave (sin saltos) en vez de clavar el ángulo en un frame */
.store-card.tilted{transition:transform .12s ease-out;}
.store-card::after{
  content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.38), transparent 62%);
}
.store-card.tilted::after{opacity:1;}
@media (prefers-reduced-motion:reduce){.store-card{transition:none;}}

/* ===== Home Connection: la hoja mensual de casa =====
   Misma piel que las demás actividades (clay pastel, tokens de :root). */
.hc-months{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0 14px;}
.hc-chip{
  background:#fff; border:var(--border); border-radius:999px; padding:10px 18px;
  font-family:var(--font-head); font-size:.98rem; color:var(--ink);
  box-shadow:var(--shadow-inner),var(--shadow); min-height:48px;
}
.hc-chip.on{background:linear-gradient(180deg,var(--amber),#ff9d2e); color:var(--ink);}
.hc-head-line{text-align:center; color:var(--ink-soft); font-size:.95rem; margin:0 0 14px;}
.hc-empty{text-align:center; color:var(--ink-soft); padding:26px 12px; font-size:1.05rem;}
.hc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.hc-card{
  display:flex; flex-direction:column; gap:6px; text-align:left; min-height:64px;
  background:#fff; border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-inner),var(--shadow); padding:16px 18px;
  transition:transform .18s var(--spring);
}
.hc-card:hover{transform:translateY(-2px);}
.hc-card .n{font-family:var(--font-head); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.hc-card .t{font-family:var(--font-head); font-size:1.18rem; color:var(--ink);}
.hc-card .p{font-size:.85rem; color:var(--ink-soft);}
.hc-card.done .p{color:var(--mint); font-weight:800;}
.hc-words{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin:8px 0;}
.hc-word{background:var(--surface-soft); border-radius:12px; padding:10px 12px; text-align:left; min-height:56px;}
.hc-word strong{display:block; font-family:var(--font-head); font-size:1.05rem; color:var(--ink);}
.hc-word span{font-size:.9rem; color:var(--ink-soft);}
.hc-phrase{display:flex; align-items:flex-start; gap:10px; background:var(--surface-soft); border-radius:12px; padding:10px 12px; margin:8px 0;}
.hc-say{min-width:48px; min-height:48px; font-size:1.15rem; border-radius:12px; background:#fff; box-shadow:var(--shadow-inner),var(--shadow); flex:0 0 auto;}
.hc-phrase p{margin:0; color:var(--ink);}
.hc-phrase em{color:var(--ink-soft);}
.hc-ctx{display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.hc-steps{margin:8px 0 0; padding:0; list-style:none;}
.hc-steps li{display:flex; gap:10px; align-items:flex-start; background:var(--surface-soft); border-radius:12px; padding:10px 12px; margin:8px 0; color:var(--ink); font-size:.98rem; line-height:1.5;}
.hc-steps .e{font-size:1.3rem; line-height:1.2;}
@media (prefers-reduced-motion:reduce){.hc-card{transition:none;} .hc-card:hover{transform:none;}}

/* ===== Portada · tres niveles: mes → meses → juegos =====
   Jerarquía por tamaño, espacio y contraste (no por color).
   Motion: por defecto SIN animación; se añade solo si el usuario no la ha
   desactivado (patrón de la guía de motion: `no-preference`). */
.home-month{width:min(820px,92vw); margin:0 auto clamp(20px,3.4svh,34px);}
/* Arriba del libro: se pega a él (el espacio muerto era este margen inferior). */
.home-month-top{margin-bottom:0;}
/* "La manzana" ya no tiene reto debajo: quita su margen inferior muerto. */
.home-month-top .hm-es{margin-bottom:0;}
.hm-card{
  /* Bloque de diario: hairline arriba (abierto hacia el libro), sin radio ni
     borde de tarjeta — el peso lo dan el tamaño y el botón de tinta. */
  background:rgba(43,39,33,.03);
  border-top:1px solid var(--sb-hairline);
  padding:clamp(20px,3.2vw,30px) clamp(12px,3vw,28px) clamp(8px,1.2vw,12px);
  text-align:center;
}
/* Abajo del libro: reto + botón CTA + done, centrados, sin tinte ni hairlines. */
.hm-cta-block{
  text-align:center;
  padding-top:clamp(10px,2svh,22px);
}
.hm-label{font-size:11.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--sb-ink-label);margin:0 0 10px;}
.hm-title{font-family:var(--font-sketch-head);font-weight:400;font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:.01em;margin:0 0 4px;color:var(--sb-ink);}
.hm-es{font-family:var(--font-sketch-head);font-style:italic;font-size:clamp(17px,2vw,22px);color:var(--sb-ink-label);margin:0 0 12px;}
.hm-reto{font-family:var(--font-sketch-body);font-size:clamp(15px,1.5vw,17px);color:var(--sb-ink-label);margin:0 0 20px;}
.hm-cta{
  font-family:var(--font-sketch-body);font-size:clamp(16px,1.6vw,18px);letter-spacing:.02em;
  background:var(--sb-ink);color:var(--sb-paper);border-radius:999px;padding:15px 28px;min-height:52px;
  transition:transform .18s var(--spring), background .2s;
}
.hm-cta:hover{background:#1c1915;}
.hm-cta:active{transform:scale(.97);}
.hm-cta:focus-visible{outline:3px solid var(--sb-earth);outline-offset:3px;}
.hm-done{margin:14px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-ink-label);}
.hm-empty{font-family:var(--font-sketch-body);font-size:1.05rem;color:var(--sb-ink-label);text-align:center;margin:0;}

.month-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 clamp(26px,4svh,44px);}
.month-card{
  display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  min-width:150px;min-height:72px;padding:12px 20px;
  background:var(--sb-card);border:1px solid var(--sb-hairline);border-radius:8px;color:inherit;
  transition:transform .18s var(--spring), border-color .2s;
}
.month-card:hover{transform:translateY(-2px);border-color:rgba(43,39,33,.3);}
.month-card[aria-current="true"]{border-color:var(--sb-ink);}
.month-card .mt-m{font-family:var(--font-sketch-head);font-size:19px;color:var(--sb-ink);}
.month-card .mt-t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-ink-label);text-align:center;}

.games-card{
  display:flex;align-items:center;gap:14px;width:100%;max-width:min(480px,100%);min-height:60px;padding:14px 18px;
  margin:0 auto;   /* nivel 3: más pequeño que las tarjetas de mes (nivel 2) y centrado */
  background:var(--sb-card);border:1px solid var(--sb-hairline);border-radius:8px;color:inherit;
  transition:transform .18s var(--spring), border-color .2s;
}
.games-card:hover{transform:translateY(-2px);border-color:rgba(43,39,33,.3);}
.games-card .g-emoji{font-size:22px;}
.games-card .g-t{font-family:var(--font-sketch-head);font-size:18px;color:var(--sb-ink);}
.games-card .g-p{margin-left:auto;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-ink-label);}
.month-card:focus-visible,.games-card:focus-visible{outline:2px solid var(--sb-earth);outline-offset:2px;}

.quiet-list{margin-top:clamp(28px,4svh,48px);}
.quiet-list .plate{padding:11px 4px;}
.quiet-list .plate .t{font-size:clamp(16px,1.7vw,20px);}

@media (prefers-reduced-motion: no-preference){
  .home-month,.home-actions > *{animation:home-in .3s cubic-bezier(.22,.61,.36,1) backwards;}
  .home-actions > *:nth-child(2){animation-delay:.05s}
  .home-actions > *:nth-child(3){animation-delay:.1s}
  .home-actions > *:nth-child(4){animation-delay:.15s}
  .home-actions > *:nth-child(5){animation-delay:.2s}
}
@keyframes home-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Splash de carga (loader.js) =====
   Paleta crema #f8edd9 (coherente con el papel del libro); cqw para que el texto
   escale con el box (460px, más pequeño) y canvas a dpr hasta 3 (ver loader.js). */
#preload{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#f8edd9;
  padding:clamp(16px,5vw,40px);transition:opacity .4s ease}
html.nopreload #preload{display:none}
#preload.gone{opacity:0;pointer-events:none}
.pl-box{position:relative;container-type:inline-size;width:min(460px,100%);aspect-ratio:3.6;
  border-radius:28px;overflow:hidden;background:#f8edd9;box-shadow:0 10px 28px rgba(43,39,33,.16)}
.pl-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 8.4cqw;pointer-events:none}
.pl-text{min-width:0}
.pl-title{font-family:var(--font-head);font-weight:800;color:var(--sb-ink);line-height:1.05;margin:0;font-size:4.2cqw}
.pl-sub{font-family:var(--font-body);font-weight:700;letter-spacing:.3cqw;margin:.77cqw 0 0;
  color:var(--sb-ink-soft);font-size:2.4cqw}
.pl-pct{font-family:var(--font-head);font-weight:700;color:var(--sb-ink);margin:0;font-size:6.5cqw;
  font-variant-numeric:tabular-nums}
.pl-track{position:absolute;left:8.4cqw;right:8.4cqw;bottom:6cqw;height:2.6cqw;margin:0;
  border-radius:999px;background:rgba(43,39,33,.14);overflow:hidden}
.pl-track i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--sb-earth),var(--amber))}
@media (prefers-reduced-motion:reduce){#preload{transition:none}}