:root{--bg: #faf9f6;--ink: #1a1a1a;--ink-soft: #6b6760;--ocre: #b8860b;--ocre-deep: #8f6a09;--ocre-soft: #e9dbb6;--line: #e6e3dc;--locked: #c9c6bf;--gold-halo: 0 0 0 3px var(--bg), 0 0 0 5px var(--ocre), 0 0 16px rgba(184, 134, 11, .5);--serif: "Cormorant Garamond", serif;--cond: "Barlow Condensed", sans-serif;--max-w: 480px;--pad: 20px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{max-width:var(--max-w);margin:0 auto;min-height:100dvh;padding:var(--pad);padding-bottom:96px;animation:screenIn .35s ease both}@keyframes screenIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}.label{font-family:var(--cond);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--ocre)}.btn{display:block;width:100%;border:none;background:var(--ink);color:var(--bg);font-family:var(--cond);font-size:17px;letter-spacing:.08em;text-transform:uppercase;padding:14px;border-radius:8px;transition:transform .15s ease}.btn:active{transform:scale(.98)}.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.input{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:var(--cond);font-size:18px;padding:13px 14px;margin-bottom:12px}.input:focus{outline:2px solid var(--ocre);outline-offset:1px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.topbar .who{font-family:var(--cond);font-size:14px;letter-spacing:.06em;color:var(--ink-soft)}.topbar .who strong{color:var(--ink);font-weight:600}.iconbtn{background:none;border:none;font-size:22px;line-height:1;color:var(--ink);padding:6px}.menu{position:fixed;top:0;right:0;bottom:0;left:0;background:#faf9f6f7;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;animation:screenIn .25s ease both}.menu a{font-family:var(--serif);font-size:28px;color:var(--ink);text-decoration:none}.menu .close{position:absolute;top:18px;right:18px}.menu-logout{font-size:17px!important;color:var(--ink-soft)!important;margin-top:8px}.passport-title{text-align:center;margin:4px 0 10px}.passport-title h1{font-weight:500;font-size:42px;line-height:1.02;letter-spacing:.01em}.passport-title h1 em{font-style:italic;font-weight:400;font-size:.62em;display:block;margin:2px 0}.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 4px;max-width:280px}.ornament:before,.ornament:after{content:"";flex:1;height:1px;background:var(--ocre);opacity:.6}.ornament .sun{width:30px;height:30px;display:block}.ornament-year{text-align:center;font-family:var(--cond);font-size:14px;letter-spacing:.35em;color:var(--ocre);margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 10px}.seal{display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;animation:sealIn .45s ease both;animation-delay:calc(var(--i, 0) * 45ms)}@keyframes sealIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.seal .disc{display:block;width:92px;height:92px;margin-bottom:9px;position:relative;transition:transform .2s ease}.seal:active .disc{transform:scale(.95)}.seal.got .disc img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))}.seal:nth-child(odd).got .disc img{transform:rotate(-2deg)}.seal:nth-child(3n).got .disc img{transform:rotate(1.5deg)}.seal.empty .disc{border:2px dotted var(--locked);border-radius:50%;background:transparent}.seal .name{font-family:var(--cond);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.seal.empty .name{color:var(--locked)}.slot16-wrap{margin-top:30px;display:flex;justify-content:center}.seal.self .disc{width:108px;height:108px;border:2px dashed var(--ocre-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:36px;color:var(--ocre-soft)}.seal.self.got .disc{border:none}.seal.self.got .disc img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}.casita{margin:38px auto 0;text-align:center}.casita .muni-logo{width:auto;max-height:56px;margin:0 auto 8px;opacity:.9}.casita .yr{font-family:var(--cond);font-size:12.5px;letter-spacing:.3em;color:var(--ocre)}.experiencias{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}.exp-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;transition:transform .15s ease,border-color .2s ease}.exp-card:active{transform:scale(.99)}.exp-card.on{border-color:var(--ocre-soft)}.exp-card.off{opacity:.6}.exp-icon{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg)}.exp-card.on .exp-icon{background:var(--ocre-soft)}.exp-icon svg{width:24px;height:24px;stroke:var(--ink-soft);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.exp-card.on .exp-icon svg{stroke:var(--ocre-deep)}.exp-text{flex:1;display:flex;flex-direction:column}.exp-name{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.1}.exp-desc{font-family:var(--cond);font-size:14px;color:var(--ink-soft);margin-top:2px}.exp-state{flex:0 0 auto;font-family:var(--cond);font-size:18px;color:var(--locked);min-width:22px;text-align:center}.exp-card.on .exp-state{color:var(--ocre);font-size:22px}.progress{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max-w);background:#faf9f6f5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:12px var(--pad) 16px;z-index:10}.progress .count{display:block;text-align:center;font-family:var(--cond);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}.progress .count strong{color:var(--ocre-deep);font-size:17px}.progress .track{height:4px;background:var(--line);border-radius:2px;overflow:hidden}.progress .track .fill{height:100%;background:var(--ocre);border-radius:2px;transition:width .5s ease}.unlock{background:var(--bg);border-radius:16px;padding:32px 26px 26px;text-align:center;max-width:340px;animation:unlockIn .4s cubic-bezier(.2,1.4,.4,1) both}@keyframes unlockIn{0%{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:none}}.unlock-icon{width:68px;height:68px;border-radius:50%;background:var(--ocre-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.unlock-icon svg{width:34px;height:34px;stroke:var(--ocre-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.unlock h3{font-weight:500;font-size:28px;margin:6px 0 4px}.unlock-desc{color:var(--ink-soft);margin-bottom:22px}.ficha .retrato{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:10px;background:var(--ocre-soft);margin-bottom:16px}.ficha h2{font-weight:500;font-size:30px;line-height:1.1}.ficha .rol{margin:2px 0 14px}.datos{display:flex;gap:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:16px}.datos div{flex:1}.datos .k{font-family:var(--cond);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.datos .v{font-family:var(--cond);font-size:16px;font-weight:500}.bio{margin-bottom:26px;white-space:pre-line}.trivia-screen{min-height:78dvh;display:flex;flex-direction:column}.trivia-screen .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px}.trivia-screen .qnum{font-family:var(--cond);font-size:14px;color:var(--ink-soft);letter-spacing:.1em}.trivia-screen h2{font-weight:500;font-size:27px;line-height:1.15;margin-bottom:24px;animation:screenIn .3s ease both}.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:var(--cond);font-size:17px;padding:13px 15px;margin-bottom:9px;transition:border-color .15s ease,background .15s ease}.opt.right{border-color:var(--ocre);background:var(--ocre-soft)}.opt.wrong{border-color:#c0392b;color:#c0392b;animation:shake .3s ease}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.trivia-done{min-height:78dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.trivia-done .disc-final{width:175px;height:175px;margin-bottom:24px;position:relative;animation:goldIn .8s ease both}.trivia-done .disc-final img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(184,134,11,.4))}@keyframes goldIn{0%{transform:scale(.7)}55%{transform:scale(1.06)}to{transform:scale(1)}}.stampflow{min-height:82dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.stampflow .bigseal{width:200px;height:200px;position:relative;margin-bottom:24px;animation:stamp .6s cubic-bezier(.2,1.5,.4,1)}.stampflow .bigseal img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}@keyframes stamp{0%{transform:scale(2.6) rotate(-6deg);opacity:0}55%{transform:scale(.93) rotate(.5deg);opacity:1}to{transform:scale(1)}}.stampflow h2{font-weight:500;font-size:30px;margin-bottom:6px}.stampflow .sub{color:var(--ink-soft);margin-bottom:26px;max-width:300px}.stampflow form{width:100%;max-width:320px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a1a73;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px;animation:screenIn .2s ease both}.popup{background:var(--bg);border-radius:12px;padding:26px 22px;text-align:center;max-width:320px}.popup h3{font-weight:500;font-size:24px;margin-bottom:6px}.popup p{color:var(--ink-soft);margin-bottom:18px}.toast{position:fixed;bottom:96px;left:50%;background:var(--ink);color:var(--bg);font-family:var(--cond);font-size:15px;letter-spacing:.04em;padding:10px 18px;border-radius:999px;z-index:100;white-space:nowrap;transform:translate(-50%);animation:toastIn .25s ease both}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.page h1{font-weight:500;font-size:32px;margin:8px 0 14px}.page p{margin-bottom:14px}.page .muted{color:var(--ink-soft)}.back{background:none;border:none;font-family:var(--cond);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:0;margin-bottom:14px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}