@font-face{font-family:Cuaderno;src:url('./kalam-regular.ttf') format('truetype');font-display:swap;font-weight:400}
:root{--paper:#fbf7ee;--ink:#29372f;--teal:#006e5c;--yellow:#ffe987;--muted:#56655d;--height:100dvh;font-family:Cuaderno,'Segoe Print','Comic Sans MS',cursive;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select,summary{font:inherit;color:inherit}button,select,summary{touch-action:manipulation}button{border:1.5px solid var(--ink);border-radius:7px 4px 9px 5px;background:#fffdf7;box-shadow:2px 3px 0 var(--ink);padding:10px 15px;min-height:44px;font-size:17px;cursor:pointer}button:disabled{opacity:.5;box-shadow:none;cursor:default}button:active:not(:disabled){transform:translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #00a58b;outline-offset:3px}button.primary{background:var(--teal);color:#fffdf7}button.quiet{box-shadow:none;background:transparent}button.link{border:0;box-shadow:none;color:var(--teal);background:none;padding:5px 3px;min-height:40px;text-decoration:underline;text-underline-offset:4px}button[aria-pressed=true]{background:var(--yellow)}svg{width:23px;height:23px;flex-shrink:0;vertical-align:middle}
#app{height:var(--app-height,100dvh);display:flex;flex-direction:column;max-width:1000px;margin:auto;border-inline:1px solid #c5cabd;background:var(--paper);overflow:hidden}
.top{flex-shrink:0;padding:calc(9px + env(safe-area-inset-top,0px)) 17px 12px;border-bottom:2px solid #3b4a3840;background:#fbf7ee;z-index:5}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.brand{font-size:27px;border:0;box-shadow:none;background:none;padding:0;line-height:1.1;display:flex;align-items:center;gap:15px;color:#515e7e;min-height:40px}.brand span{font-size:12px;background:var(--yellow);padding:6px 10px;border:1px solid var(--ink);box-shadow:1px 2px 0 var(--ink);transform:rotate(3deg);color:var(--ink)}.local-label{font:11px Arial,sans-serif;color:var(--muted)}.resources{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.resources button{display:flex;align-items:center;gap:6px;font-size:15px;min-height:36px;padding:5px 11px;border-radius:6px 3px 8px 4px;transform:rotate(-1deg);box-shadow:1px 2px 0 #29372f50;background:#fffbe7}.resources button:nth-child(2){transform:rotate(2deg);background:#fff3ec}.resources button:nth-child(3){background:#eaf3e7}.resources svg{width:18px;height:18px}.resources select{font-size:15px;background:#fffdf7;min-height:36px;max-width:138px;border:1px solid var(--ink);border-radius:4px;padding:5px 7px;margin-left:auto}
main{flex:1;min-height:0;overflow:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:29px 32px 42px 48px;scrollbar-width:thin;background-image:linear-gradient(to right,transparent 22px,#d4808159 22px,#d4808159 23px,transparent 23px,transparent 26px,#d4808133 26px,#d4808133 27px,transparent 27px),repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#a3bdcd45 31px,#a3bdcd45 32px)}
.bottom{flex-shrink:0;display:flex;align-items:center;justify-content:space-around;border-top:2px solid #4c574d;padding:8px 10px calc(9px + env(safe-area-inset-bottom,0px));background:#fbf7ee;gap:8px;z-index:5}.bottom button{display:grid;place-items:center;box-shadow:none;border:0;background:transparent;width:50px;height:46px;min-height:46px;padding:9px;color:#58635b;position:relative}.bottom button[aria-pressed=true]{background:#ffe987;box-shadow:1px 2px 0 var(--ink);transform:rotate(-3deg);color:#006e5c}.bottom button[aria-pressed=true]:after{content:'';position:absolute;bottom:4px;width:11px;height:3px;background:var(--teal);border-radius:50%;transform:rotate(-7deg)}.bottom span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bottom svg{width:25px;height:25px}
h1,h2,h3,p{margin:0 0 15px;font-weight:400}h1{font-size:34px;line-height:1.35;letter-spacing:-.6px;margin-top:9px;max-width:720px}h2{font-size:26px;line-height:1.4}h3{font-size:20px;line-height:1.4}p{font-size:18px;line-height:1.65}.intro{color:#515e7e;max-width:650px}.eyebrow{font-size:13px;display:inline-block;padding:4px 11px;background:#dfe5f4;border:1px solid var(--ink);transform:rotate(-1deg);border-radius:2px}.tag{font-size:14px;display:inline-block;padding:4px 9px;background:#fff0a7;border:1px solid #59624f;border-radius:2px;transform:rotate(1deg);margin:2px 0 14px}.caption{font-size:14px;letter-spacing:.6px;color:#515e7e}.paper{position:relative;padding:26px;background:#fffdf7;border:1.5px solid var(--ink);box-shadow:4px 5px 0 #303b31;border-radius:12px 5px 16px 7px;margin:27px 3px 28px 0}.paper:before{content:'';position:absolute;width:64px;height:17px;top:-9px;left:calc(50% - 32px);background:#f8dc6180;border:1px solid #d5c55e48;transform:rotate(-3deg)}.paper h2{display:table;background:linear-gradient(transparent 63%,#ffe97d 63%,#ffe97d 90%,transparent 90%)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:20px}.hero aside{align-self:center}.hand-note{font-size:14px;color:var(--teal);display:block;text-align:center;margin-top:15px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}.columns .paper{margin-top:8px}.big{font-size:35px;line-height:1.4;margin-top:12px}.big small{font-size:17px}.meter{height:9px;background:#e5e1d5;border-radius:9px;overflow:hidden;margin:14px 0}.meter span{display:block;height:100%;background:#00735d;border-radius:9px}.streak{background:#fff08d;border:1.5px solid var(--ink);border-radius:3px 7px 4px 5px;box-shadow:2px 3px 0 #303b31;padding:12px 17px;display:flex;gap:15px;align-items:center;margin:22px 3px 25px 0}.streak small{display:block;font-size:14px}.streak p{margin:0}.streak svg{color:#af4c43}.footnote{font-size:14px;line-height:1.65;border-top:1px dashed #91a18f66;padding-top:15px;color:var(--muted);margin-top:23px}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:17px 0}.actions button{max-width:100%}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:20px 0 25px}.path{position:relative;max-width:620px;margin:auto}.chapter{position:relative;margin-bottom:30px}.chapter-title{background:#fbf7ee;padding:6px 0 13px;position:relative;z-index:1}.chapter-title h2{font-size:23px;display:inline-block;vertical-align:middle;margin:0 12px 0 0}.chapter-title .tag{display:block;width:max-content;margin-bottom:10px}.chapter-title button{font-size:14px}.path-row{position:relative;height:118px;isolation:isolate}.path-row:before{content:'';position:absolute;left:calc(50% - 21%);width:42%;top:-50px;height:150px;border:2px dashed #8b9e91;border-top:0;border-right:0;border-radius:50%;transform:rotate(-25deg);z-index:-1;opacity:.8}.path-row:nth-child(even):before{transform:rotate(25deg) scaleX(-1)}.node{position:absolute;left:clamp(35px,var(--x),calc(100% - 35px));top:10px;transform:translateX(-50%) rotate(-3deg);width:65px;height:65px;border:2px solid var(--ink);border-radius:46% 50% 47% 45%;box-shadow:3px 4px 0 #303b31;background:#fffdf7;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;font-size:24px;padding:4px}.node small{font-size:13px}.node.gold{background:#f3cc5e}.node.assisted{background:#cde1d5}.node.pending{background:#e5e3db;border-style:dashed;box-shadow:none}.node.current{background:#006e5c;color:#fffdf7}.node:active{transform:translateX(-50%) rotate(-3deg)!important}.chest-row{display:flex;justify-content:center;margin:5px 0 25px;position:relative}.chest{background:#fff08d;transform:rotate(3deg);display:flex;align-items:center;gap:12px;padding:12px 18px}.chest svg{height:38px;width:38px}.chest span{font-size:14px}.chest.claimed{background:#e5e3db;box-shadow:none}
.clue{font-size:27px;line-height:1.8;margin:14px 0 22px;overflow-wrap:break-word}.puzzle-paper .tag{margin-bottom:4px}label{display:block;font-size:17px;margin:13px 0}input:not([type=checkbox]){display:block;max-width:100%;width:100%;font-size:21px;border:1.5px solid var(--ink);border-radius:5px 9px 4px 7px;background:#fffdf7;padding:13px 12px;min-height:55px;margin-top:9px}#answer{text-transform:uppercase;letter-spacing:3px;text-align:center;font-size:28px;color:var(--teal);box-shadow:2px 3px 0 #29372f80}#answer::placeholder{color:#9daca1;letter-spacing:2px}.check{width:100%;margin-top:13px}.feedback{font-size:16px;line-height:1.65;margin:19px 0 12px;background:#e9f1e6;border-left:3px solid var(--teal);padding:12px 14px}.feedback.error{background:#f8e5df;border-color:#af4c43}.play-actions{justify-content:space-between}.hint-list{border-top:1px dashed #a8b19d;margin-top:25px;padding-top:20px}.hint-list p{background:#fff4bc;padding:12px;border-radius:4px;font-size:17px}.answer-reveal{font-size:32px;letter-spacing:4px;text-align:center;color:var(--teal);background:#fff4bc;border:1px dashed #a58b3f;padding:16px;margin:18px 0}.explanation{line-height:1.9}.select-label{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.select-label select{max-width:100%;min-width:0;padding:8px;background:#fffdf7;border:1px solid var(--ink);border-radius:5px;font-size:16px}.letter-demo{font-size:26px;letter-spacing:2px;text-align:center;background:#fff4bc;border:1px dashed #a58b3f;padding:25px 13px;margin:17px 0;overflow-wrap:anywhere}.practice summary{padding:15px;background:#e7efe3;border-radius:5px;cursor:pointer}.pending-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 0;border-bottom:1px dashed #c5cabd}.pending-row span{font-size:16px}.pending-row button{font-size:14px;flex-shrink:0}
.person{width:90px;height:115px;border:2px solid var(--ink);border-radius:6px 11px 5px 8px;transform:rotate(5deg);background:var(--person,#ffe987);box-shadow:3px 4px 0 #303b31;position:relative;margin:18px auto 20px}.eyes:before,.eyes:after{content:'';position:absolute;top:36px;width:6px;height:8px;border-radius:50%;background:var(--ink)}.eyes:before{left:25px}.eyes:after{right:25px}.mouth{position:absolute;top:59px;left:32px;width:23px;height:14px;border-bottom:2px solid var(--ink);border-radius:50%}.person.glasses .eyes:before,.person.glasses .eyes:after{width:22px;height:22px;top:29px;border:2px solid var(--ink);background:radial-gradient(ellipse,var(--ink) 0 3px,transparent 3px)}.person.glasses .eyes:before{left:14px}.person.glasses .eyes:after{right:14px}.person.glasses .eyes{position:absolute;left:0;right:0;height:2px;top:40px;background:var(--ink)}.person.glasses .eyes:before,.person.glasses .eyes:after{top:-11px}.person.hat:before{content:'♛';position:absolute;color:#8b6a0d;font-size:47px;left:22px;top:-43px}.character-paper .person{width:105px;height:132px;margin:47px auto 38px}.character-paper .eyes:before{left:31px}.character-paper .eyes:after{right:31px}.character-paper .mouth{left:39px}.character-paper .person.glasses .eyes:before{left:21px}.character-paper .person.glasses .eyes:after{right:21px}.colors{justify-content:center}.character-paper .actions{justify-content:center}
dialog{font-family:Cuaderno,'Segoe Print',cursive;max-width:min(92vw,460px);max-height:82dvh;overflow:auto;border:2px solid var(--ink);border-radius:10px 5px 13px 7px;box-shadow:5px 6px 0 #303b31;background:#fffdf7;color:var(--ink);padding:25px}dialog::backdrop{background:#243b3155}dialog p{font-size:17px}dialog h2{font-size:27px}dialog .quiet{margin:18px 0 0;display:block}dialog label{font-size:16px}dialog input[type=checkbox]{width:20px;height:20px;vertical-align:middle;margin-right:8px}.shop-list{display:flex;flex-direction:column;gap:13px;margin:22px 0}.shop-list button{text-align:left}#toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;background:#293c33;color:#fffdf7;font:16px/1.5 Arial,sans-serif;border-radius:8px;padding:12px 16px;z-index:50;opacity:0;pointer-events:none;transition:opacity .15s}#toast.visible{opacity:1}#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}#confetti span{position:absolute;left:var(--x);top:-20px;width:9px;height:14px;animation:fall 1.7s ease-out both;color:#aa860a}@keyframes fall{to{transform:translate(var(--drift),85vh) rotate(var(--turn));opacity:0}}
@media(min-width:720px){main{padding-inline:64px 48px}.top{padding-inline:35px}.bottom{justify-content:center;gap:70px}.bottom button{width:55px}.hero p{max-width:530px}}
@media(max-width:600px){main{padding:24px 19px 35px 32px}.top{padding-inline:13px}.brand{font-size:26px;gap:12px}.brand span{font-size:11px}.resources{gap:8px;flex-wrap:nowrap}.resources button{font-size:14px;min-height:38px;padding:5px 8px}.resources svg{width:16px;height:16px}.resources select{max-width:118px;font-size:13px;padding:5px}.local-label{font-size:10px}h1{font-size:29px}h2{font-size:24px}.paper{padding:23px 17px}.hero{grid-template-columns:1fr}.hero aside{display:none}.columns{grid-template-columns:1fr;gap:3px}.columns .paper{margin-bottom:22px}p{font-size:18px}.clue{font-size:25px}.pending-row{align-items:flex-start;flex-direction:column;gap:9px}.streak{padding:11px 12px;gap:10px}.letter-demo{font-size:23px}.path-row{height:105px}.node{width:59px;height:59px}.character-paper .person{display:block}.bottom{gap:7px}}
@media(max-width:350px){.brand span{display:none}.resources{gap:6px}.resources button{font-size:13px;padding:5px 6px}.resources select{max-width:105px}.resources svg{width:14px;height:14px}main{padding-left:29px;padding-right:15px}.paper{padding:21px 14px}.clue{font-size:23px}.play-actions{align-items:stretch;flex-direction:column}.play-actions button{width:100%}}
.chest-drawing{display:inline-block;position:relative;flex-shrink:0;width:46px;height:31px;background:#e7ba66;border:2px solid var(--ink);border-radius:3px 5px 4px 5px;box-shadow:2px 2px 0 #4d4933;transform:rotate(-4deg);margin:9px 0 0}.chest-drawing:before{content:'';position:absolute;left:-2px;right:-2px;top:-15px;height:17px;border:2px solid var(--ink);border-radius:15px 15px 0 0;background:#f8d884}.chest-drawing:after{content:'';position:absolute;left:8px;right:8px;top:0;bottom:0;border-inline:2px solid #826224}.chest-drawing span{position:absolute;left:17px;top:-3px;width:9px;height:12px;border:1.5px solid var(--ink);background:#fff4b0;border-radius:2px;z-index:1}.claimed .chest-drawing{background:#c9c6b7}
.path-row:before{display:none}.map-trail{position:absolute;top:0;left:0;width:100%;pointer-events:none;overflow:visible;z-index:0}.map-trail path{fill:none;stroke:#8b9e91;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}.chapter{z-index:1}.path-row{isolation:auto}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.guide-banner{margin:20px 3px 25px 0;padding:20px;background:#e9efe5;border:1px dashed #7d9c8b;border-radius:5px}.guide-banner h2{font-size:23px}.guide-notice{font-size:16px;padding:12px 14px;background:#e9efe5;border-left:3px solid var(--teal);border-radius:3px}.practice{margin-top:20px}.practice input{margin-bottom:18px}#feedback-form select,dialog select{display:block;min-width:0;max-width:100%;width:100%;min-height:44px;padding:8px;border:1px solid var(--ink);background:#fffdf7;border-radius:5px;font-size:16px}textarea{display:block;max-width:100%;width:100%;font:18px/1.6 Cuaderno,'Segoe Print',cursive;color:var(--ink);background:#fffdf7;border:1.5px solid var(--ink);border-radius:6px;padding:12px;resize:vertical}.checkbox-label{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6}.checkbox-label input{width:22px;height:22px;flex-shrink:0;margin-top:3px}dialog input[type=file]{font-size:14px;letter-spacing:0}dialog .actions button{width:100%}
/* Selectores del cuaderno: idioma y lecciones */
select[hidden]{display:none!important}
.notebook-select{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:100%;min-width:0;min-height:44px;padding:9px 12px;border:2px solid #353b37;border-radius:8px 12px 9px 11px;background:#fff8d9;color:#283c35;font:inherit;text-align:left;white-space:normal;box-shadow:2px 2px 0 #353b3720}
.resources .notebook-select{font-size:13px;max-width:140px;padding:5px 7px;flex-shrink:1;margin-left:auto}
.select-label .notebook-select{width:100%;margin-top:6px}
.notebook-picker{width:min(430px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;padding:22px;background:repeating-linear-gradient(#fbf7ee 0px,#fbf7ee 31px,#cad9db 32px);border:2px solid #353b37;border-radius:14px 9px 15px 10px;box-shadow:5px 6px 0 #0002}
.notebook-picker h2{margin:0 0 14px}.picker-options{display:grid;gap:8px;max-height:52dvh;overflow-y:auto;padding:3px 4px 12px}
.picker-option{width:100%;min-height:48px;text-align:left;white-space:normal;padding:10px 12px;background:#fffdf6;border:1px solid #8d9b91;border-radius:7px 10px;color:#283c35;font:inherit}
.picker-option[aria-pressed=true]{background:#ffe987;border:2px solid #426e60}.notebook-select:focus-visible,.picker-option:focus-visible{outline:3px solid #237c74;outline-offset:3px}