@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,-apple-system,sans-serif;color:#273252;background:#f5f6ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.app{max-width:1080px;margin:auto;padding:22px 18px 60px}.topbar,.between{display:flex;align-items:center;justify-content:space-between;gap:12px}.logo{font-weight:900;font-size:22px;color:#5b52ce}.muted{color:#64718d}.tiny{font-size:13px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#6358d9}.hero{border-radius:28px;background:linear-gradient(110deg,#7865ec,#ae83eb);color:white;padding:30px;margin:20px 0;box-shadow:0 14px 30px #887ac327}.hero.mario{background:linear-gradient(110deg,#f58a66,#ffba71)}.hero h1{font-size:clamp(26px,5vw,42px);margin:8px 0}.hero p{max-width:680px;line-height:1.6;margin-bottom:0}.profile-grid,.game-grid,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.profile,.game,.panel,.stat{background:#fff;border:1px solid #e8e9f5;border-radius:22px;padding:22px;box-shadow:0 8px 24px #23296909}.profile{min-height:230px;text-align:left;transition:transform .2s}.profile:hover,.game:hover{transform:translateY(-3px)}.profile h2{margin:8px 0}.avatar{font-size:60px}.profile.leo{background:#eeeaff}.profile.mario{background:#fff0e6}.btn{border:0;border-radius:15px;background:#6558e8;color:#fff;font-weight:900;padding:13px 18px;min-height:48px}.btn.ghost{background:#f0efff;color:#584bc3}.btn.orange{background:#ed8857}.btn.positive{background:#24a77b}.btn:focus-visible,.game:focus-visible,.profile:focus-visible{outline:4px solid #ffba42;outline-offset:2px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0}.tag{display:inline-flex;background:#f0efff;color:#6358c8;padding:6px 12px;border-radius:99px;font-weight:800;font-size:12px}.game{border:1px solid #e8e9f5;text-align:left;min-height:188px;transition:transform .2s}.game-icon{font-size:40px}.game h3{margin:9px 0 5px}.game p{font-size:14px;margin:0;color:#64718d;line-height:1.45}.panel{margin:16px 0}.play{max-width:760px;margin:22px auto}.play h2{font-size:clamp(24px,4vw,34px)}.question{font-size:clamp(24px,6vw,46px);font-weight:900;text-align:center;line-height:1.35;margin:22px 0}.choices,.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.choice,.tile{background:#f3f2ff;color:#3b3c76;border:2px solid transparent;border-radius:20px;font-weight:900;padding:18px;min-height:82px;font-size:clamp(20px,5vw,29px)}.choice:hover,.tile:hover{border-color:#8e80ed}.choice.correct,.tile.correct{background:#ccf4dd;border-color:#36be7f}.choice.wrong{background:#ffe4e2;border-color:#f07e78}.letter-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0}.letter{width:58px;height:64px;border-radius:15px;border:2px dashed #9a93eb;background:#fff;font-size:31px;font-weight:900;color:#5c50cc}.letter.filled{border-style:solid;background:#e8e3ff}.message{background:#f1efff;color:#5448b5;padding:15px 18px;border-radius:14px;font-weight:800;margin-top:16px}.message.ok{background:#d9f7e6;color:#18794d}.message.error{background:#ffe6e4;color:#ad3937}.section-title{font-size:22px;margin:26px 0 14px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}label{display:flex;flex-direction:column;gap:8px;font-weight:800}input,select{width:100%;padding:12px;border-radius:12px;border:1px solid #c8c9df;background:white;color:#293252}input:focus,select:focus{outline:2px solid #8b81e8}.progress{height:12px;background:#e7e7fa;border-radius:100px;overflow:hidden}.bar{height:100%;background:#6456e1}.stat b{font-size:28px}.footer{padding:28px 0;text-align:center;color:#7b8398;font-size:12px}.shape{font-size:70px;display:block}.sound-btn{font-size:18px}.high{color:#fff69b;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:5px}.mini-note{font-size:13px;color:#7c8496}.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:550px){.app{padding:12px 12px 42px}.hero{padding:22px}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile{padding:14px;min-height:175px}.avatar{font-size:42px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game{padding:14px;min-height:190px}.game-icon{font-size:32px}.choices,.tiles{gap:8px}.choice,.tile{padding:12px;min-height:80px}.cards4 .tile{font-size:26px}.topbar{flex-wrap:wrap}.logo{font-size:18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* v0.2 */
.mission-banner{text-align:center;background:#f3edff;padding:13px;border-radius:18px;color:#574abb;font-size:19px;margin:22px 0}.word-clue{display:flex;gap:20px;align-items:center;justify-content:center;background:linear-gradient(120deg,#f9f0ff,#f0f8ff);border:2px solid #e8ddff;border-radius:24px;padding:20px;margin:16px 0}.word-clue h2{margin:5px 0 14px;font-size:clamp(19px,3vw,25px)}.clue-icon{font-size:clamp(55px,8vw,90px)}.instruction{text-align:center;color:#65718d;font-size:17px;font-weight:700}.market-heading{background:linear-gradient(120deg,#4bbd91,#2b9aaf);color:#fff;padding:16px;border-radius:22px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}.market-sign{font-size:21px;font-weight:900}.wallet{background:#ffffff33;padding:10px;border-radius:12px}.story-text{font-size:clamp(21px,4vw,30px);font-weight:900;line-height:1.5;background:#fff9e8;border:2px solid #ffe8a8;padding:20px;border-radius:20px;margin:16px 0;color:#4c3b22}.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.products.one-product{grid-template-columns:1fr;max-width:260px;margin:18px auto}.product-card{background:#f2f8ff;border:2px solid #dbe9fc;border-radius:22px;padding:15px;display:flex;align-items:center;flex-direction:column;gap:10px}.product-emoji{font-size:58px}.price{background:#ffdf84;border-radius:12px;padding:5px 15px;font-size:25px;font-weight:900;color:#503d13}.product-card .btn{width:100%}.science-scene{min-height:125px;display:flex;align-items:center;justify-content:center;font-size:85px;margin:22px 0 0}.body-figure{font-size:95px}.science-icon{font-size:55px}.flag-stage{display:flex;justify-content:center;align-items:center;background:#f0f6ff;border-radius:22px;padding:24px;margin-top:20px;min-height:190px}.big-flag{width:min(100%,270px);height:160px;object-fit:contain;filter:drop-shadow(0 7px 10px #3333)}.next-btn{display:block;margin:12px auto;width:min(100%,340px)}.message p{margin:8px 0 0;font-weight:600;line-height:1.5}@media(max-width:550px){.word-clue{padding:12px;gap:12px}.clue-icon{font-size:58px}.word-clue h2{font-size:18px}.story-text{padding:14px}.product-emoji{font-size:45px}.market-heading{font-size:14px}.letter{width:43px;height:53px;font-size:25px}.products{gap:8px}.product-card{padding:10px}.price{font-size:20px}}
/* v0.3: insignias y retos ampliados */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin:18px 0}.badge-card{border:2px solid #e9e4fb;border-radius:20px;padding:18px;background:#fbfaff;text-align:center;min-height:210px}.badge-card.earned{border-color:#e7cd75;background:#fff9e8}.badge-card.locked{filter:saturate(.65)}.badge-illustration{font-size:52px}.badge-card h3{font-size:17px;margin:9px 0}.badge-card p{font-size:13px;color:#56617a;min-height:44px}.redeem-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #eee;padding:12px 0}.redeem-row .btn{font-size:12px;padding:8px 11px}.badge-card .tag{font-size:11px}

/* v0.4: medallas con relieve, cintas y colecciones infantiles */
.badge-card{position:relative;overflow:hidden;border-width:2px;border-radius:25px;box-shadow:0 8px 18px #44357012;min-height:264px;background:linear-gradient(145deg,#fff8e7,#f0f0ff)}
.badge-card.game-badge.earned{background:linear-gradient(160deg,#fffbe4,#fff1cd);border-color:#ffc75f}
.badge-card.reward-badge{background:linear-gradient(160deg,#f2ebff,#fff0fb);border-color:#d3b9f8}
.badge-card.reward-badge.earned{background:linear-gradient(160deg,#f8ecff,#ffe2f1);border-color:#c991f3}
.badge-card.locked{opacity:.68;filter:grayscale(.55)}
.medal-wrap{width:102px;height:116px;position:relative;margin:0 auto 5px;display:flex;align-items:flex-end;justify-content:center}
.medal-ribbon{position:absolute;top:2px;left:32px;width:39px;height:68px;background:repeating-linear-gradient(90deg,#ee6f7b 0 13px,#fff1ab 13px 19px,#ee6f7b 19px 33px);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 2px 4px #0002}
.reward-badge .medal-ribbon{background:repeating-linear-gradient(90deg,#9f6fe0 0 13px,#fff1ad 13px 19px,#9f6fe0 19px 33px)}
.medal-disc{position:relative;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 24%,#fff7b7,#ffce54 50%,#e7a62e 85%);border:7px ridge #edba43;box-shadow:0 5px 0 #d99e35,0 8px 12px #a75b2a45,inset 0 0 0 3px #fff3b6}
.reward-badge .medal-disc{background:radial-gradient(circle at 30% 24%,#fff0ff,#d8a4fc 58%,#a06cd4);border-color:#c28fe0;box-shadow:0 5px 0 #8e63c0,0 8px 12px #704d963b,inset 0 0 0 3px #f8e8ff}
.medal-disc span{font-size:37px;filter:drop-shadow(0 2px 1px #0001)}.badge-card h3{font-size:18px}.badge-card .tag{margin-top:8px}

/* v0.5: iPhone, zonas seguras y actividades de lectura */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:contain}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.app{padding-top:max(14px,env(safe-area-inset-top));padding-right:max(14px,env(safe-area-inset-right));padding-left:max(14px,env(safe-area-inset-left));padding-bottom:calc(44px + env(safe-area-inset-bottom))}
.reading-scene{font-size:86px;text-align:center;padding-top:12px}
.syllables-hero{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px auto}
.syllables-hero span{background:#fff4cb;border:3px solid #ffc65e;border-radius:20px;min-width:90px;text-align:center;padding:14px 20px;font-size:38px;font-weight:900;color:#674c23}
.reading-story{background:#eefaff;border:2px solid #a4e2f4;border-radius:22px;font-size:clamp(21px,4.5vw,29px);font-weight:800;line-height:1.6;padding:23px;margin:22px auto;max-width:650px}
.sound-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.sound-item{border:1px solid #dedff3;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sound-item .btn{min-height:40px}
.sound-upload{font-size:13px;color:#4330b1;background:#f1eeff;padding:8px;border-radius:10px}
.sound-upload input{font-size:12px;padding:3px;border:0;width:100%;max-width:100%}
@media(max-width:430px){.topbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.logo{grid-column:1/-1;grid-row:1;text-align:center;font-size:17px}.topbar .btn{grid-row:2;font-size:14px;padding:10px 6px}.profile-grid,.game-grid{gap:9px}.profile{min-height:170px}.game{min-height:176px}.game p{font-size:13px}.panel{padding:15px}.question{font-size:clamp(22px,6vw,32px)}.letter{width:39px;height:49px;font-size:24px}.syllables-hero span{font-size:30px;min-width:66px}.story-text{font-size:20px}}