@font-face{font-family:"Bagel";src:url(fonts/bagel-fat-one-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Onest";font-weight:500;src:url(fonts/onest-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Onest";font-weight:700;src:url(fonts/onest-700.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Onest";font-weight:800;src:url(fonts/onest-800.woff2) format("woff2");font-display:swap}
:root{--ink:#141B3C;--azul:#1F3BD6;--azul-d:#14279A;--tom:#FF5233;--tom-d:#C4301A;--sol:#FFC81F;--sol-d:#C99400;--men:#1FD1A8;--men-d:#0E9273;--ros:#FF9BCE;--ros-d:#CC5E98;--lil:#B79CFF;--lim:#BDE838;--cie:#7FA3FF;--lec:#F1F3FF;--pl:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--azul);color:var(--ink);font:500 16px/1.42 Onest,system-ui,sans-serif;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--ink)}
h1,h2,h3,p{margin:0}
.bg{font-family:Bagel,Onest,sans-serif;font-weight:400;letter-spacing:.002em}
#app{height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:auto;position:relative;overflow:hidden}
.scr{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
svg{display:block}
/* plastico */
.pl{position:relative;border-radius:18px;background:var(--c,#fff);color:var(--ink);font-weight:800;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(20,27,60,.14),0 5px 0 var(--d,#9aa3cc);transition:transform .07s,box-shadow .07s;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.pl:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(20,27,60,.14),0 1px 0 var(--d,#9aa3cc)}
.big{width:100%;min-height:62px;padding:12px 18px;font-size:19px}
.demo-strip{flex:none;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;text-align:center;padding:5px 10px}
/* maquina */
.mq{display:flex;flex-direction:column;min-height:100%;background:var(--azul)}
.dome{position:relative;flex:none;height:clamp(92px,21vh,178px);overflow:hidden;background:radial-gradient(circle at 18% 22%,#3556ee,transparent 55%)}
.dome svg{position:absolute;right:8px;bottom:-5px;height:calc(100% - 3px);width:auto}
.logo{position:absolute;left:14px;top:50%;margin-top:-34px;z-index:2;background:var(--sol);padding:5px 13px 7px;border-radius:14px;font-size:clamp(23px,4.4vh,33px);line-height:1;transform:rotate(-3deg);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(20,27,60,.14),0 4px 0 var(--sol-d)}
.cuerpo{position:relative;flex:1;background:var(--tom);border-radius:30px 30px 0 0;padding:12px 14px 0;box-shadow:inset 0 4px 0 rgba(255,255,255,.34);display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.lab{font-size:12.5px;font-weight:800;margin:0 0 3px 3px;display:block}
.kids{display:flex;gap:7px;overflow-x:auto;padding:1px 2px 6px;scrollbar-width:none;flex:none}
.kids::-webkit-scrollbar{display:none}
.kid{flex:none;min-height:34px;padding:3px 12px;border-radius:99px;font-size:14px;--c:#ffd9cf;--d:var(--tom-d);opacity:.72;white-space:nowrap}
.kid[aria-pressed=true]{--c:#fff;opacity:1}
.kid i{font-style:normal;font-weight:500;opacity:.7}
.track{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);background:var(--ink);border-radius:15px;padding:4px;box-shadow:inset 0 3px 7px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.3)}
.thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));transform:translateX(calc(100%*var(--i)));transition:transform .3s cubic-bezier(.3,1.6,.5,1);border-radius:11px;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(20,27,60,.2)}
.track button{position:relative;z-index:1;color:#fff;min-height:42px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;line-height:1;transition:color .15s;border-radius:11px}
.track.ic button{min-height:50px;font-size:11.5px;gap:3px}
.track.ic svg{width:23px;height:23px}
.track.row button{flex-direction:row}
.track.row svg{width:20px;height:20px}
.track button[aria-checked=true]{color:var(--ink)}
.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.key{min-height:56px;border-radius:12px;--c:#ffd9cf;--d:var(--tom-d);flex-direction:column;gap:2px;font-size:10.5px;letter-spacing:-.02em;line-height:1;padding:3px 0 5px;font-weight:700;color:#5b2118}
.key svg{width:24px;height:24px;opacity:.55}
.key[aria-pressed=true]{--c:#fff;color:var(--ink);transform:translateY(3px);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 rgba(20,27,60,.1),0 2px 0 var(--d)}
.key[aria-pressed=true] svg{opacity:1}
.pago{position:sticky;bottom:0;margin:auto -14px 0;padding:10px 16px 12px;display:grid;grid-template-columns:92px 1fr 118px;gap:10px;align-items:center;background:linear-gradient(transparent,var(--tom) 14%)}
.chute{position:relative;height:100px;background:var(--ink);border-radius:22px 22px 14px 14px;overflow:hidden;box-shadow:inset 0 6px 10px #000,0 3px 0 rgba(255,255,255,.3)}
.chute:after{content:"";position:absolute;left:0;right:0;top:0;height:20px;background:var(--tom-d);border-radius:0 0 12px 12px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);transform-origin:top;transition:transform .12s}
.chute.open:after{transform:rotateX(70deg)}
.cap{position:absolute;left:50%;top:-56px;width:58px;height:58px;margin-left:-29px}
.chute .cap.drop{animation:drop .46s cubic-bezier(.3,.1,.5,1) forwards}
@keyframes drop{0%{top:-56px}62%{top:40px}76%{top:24px}90%{top:40px}96%{top:35px}100%{top:40px}}
.odo{justify-self:center;text-align:center;color:var(--ink);font-weight:800;font-size:12px;line-height:1.15}
.odo b{display:block;background:var(--ink);color:var(--sol);font:400 28px/1 Bagel;border-radius:10px;padding:6px 10px 7px;min-width:62px;margin:0 auto 4px;box-shadow:inset 0 2px 5px #000}
.knobw{position:relative;width:118px;height:118px;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%}
.knobw .rot{position:absolute;inset:0;transform:rotate(var(--a,0deg));filter:drop-shadow(0 6px 0 var(--sol-d))}
.knobw:active .rot{filter:drop-shadow(0 3px 0 var(--sol-d))}
.knobw span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 25px/1 Bagel;pointer-events:none;color:var(--ink)}
.hint{position:absolute;right:124px;bottom:10px;display:none}
/* nav */
nav{flex:none;display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
nav button{color:#c6cdf5;font-size:11.5px;font-weight:700;padding:4px 0;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
nav svg{width:26px;height:26px}
nav button[aria-current=page]{color:var(--ink);background:var(--sol)}
/* pantallas de contenido */
.top{padding:18px 18px 22px;background:var(--c);border-radius:0 0 28px 28px;box-shadow:inset 0 -5px 0 rgba(20,27,60,.12)}
.top h2{font-size:34px;line-height:1.02}
.top p{margin-top:4px;font-size:14.5px}
.pg{background:var(--lec);min-height:100%}
.pad{padding:14px 16px 26px}
.search{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:14px;padding:0 14px;background:#fff;box-shadow:inset 0 3px 0 rgba(20,27,60,.14);font-weight:700}
.chips{display:flex;gap:7px;overflow-x:auto;padding:12px 16px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 12px;border-radius:99px;background:#fff;font-size:13.5px;font-weight:700;box-shadow:0 2px 0 #c0c7e8;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.it{display:flex;width:100%;align-items:center;gap:11px;text-align:left;padding:9px 4px;border-bottom:2px solid #dde1f7}
.it .dot{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(20,27,60,.16)}
.it .dot svg{width:25px;height:25px}
.it b{display:block;font-weight:700;font-size:15.5px;line-height:1.2}
.it small{display:block;font-size:12.5px;color:#4b5376}
.it .m{flex:1;min-width:0}
.it .fl{flex:none;font-size:12px;font-weight:800;color:#0a6b54}
.it .x{flex:none;width:36px;height:36px;border-radius:50%;background:#dfe3fa;font-weight:800}
h3.sub{font:400 22px/1.1 Bagel;margin:22px 0 6px}
.shelf{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;background:var(--ink);padding:10px;border-radius:16px;box-shadow:inset 0 3px 8px #000}
.shelf i{aspect-ratio:1;border-radius:50%;background:#2a3361;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.shelf i.on{background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(20,27,60,.2)}
.empty{padding:14px;background:#fff;border-radius:14px;font-size:14.5px}
.field{width:100%;min-height:52px;border:0;border-radius:14px;padding:0 15px;background:#fff;box-shadow:inset 0 3px 0 rgba(20,27,60,.16);font-weight:700;margin-bottom:10px}
.ages{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 16px}
.ages button{min-height:46px;border-radius:12px;--c:#fff;--d:#b9c0e4;font-size:18px}
.ages button[aria-checked=true]{--c:var(--sol);--d:var(--sol-d)}
.kidrow{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border-radius:14px;margin-bottom:8px}
.kidrow b{flex:1}
.fine{font-size:13px;color:#454d70;margin-top:8px}
.tools{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.tools button,.tools a{min-height:48px;display:flex;align-items:center;padding:0 14px;background:#fff;border-radius:13px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;justify-content:space-between}
/* boleto */
.ov{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--c);overflow-y:auto}
.ghost{position:absolute;right:-50px;bottom:110px;width:260px;height:260px;opacity:.13;pointer-events:none}
.ghost svg{width:100%;height:100%}
.ovh{flex:none;display:flex;justify-content:space-between;padding:10px 12px 0}
.rnd{width:48px;height:48px;border-radius:50%;font-size:21px;--c:#fff;--d:rgba(20,27,60,.35)}
.rnd svg{width:25px;height:25px}
.capz{position:relative;height:74px;width:120px;margin:-40px auto 0;flex:none}
.capz .tp,.capz .bt{position:absolute;left:18px;width:84px;height:42px;overflow:hidden}
.capz .tp{top:0;border-radius:42px 42px 0 0;background:var(--ink);transform-origin:bottom;animation:tp .42s cubic-bezier(.3,1.5,.5,1) forwards}
.capz .bt{top:42px;border-radius:0 0 42px 42px;background:#fff;animation:bt .42s cubic-bezier(.3,1.5,.5,1) forwards}
.capz .tp:after{content:"";position:absolute;left:14px;top:9px;width:22px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-24deg)}
@keyframes tp{0%{transform:none}100%{transform:translateY(-8px) rotate(-14deg)}}
@keyframes bt{0%{transform:none}100%{transform:translateY(5px) rotate(5deg)}}
.tick{z-index:1;position:relative;margin:-14px 16px 12px;background:#fff;border-radius:6px 6px 22px 22px;padding:20px 18px 16px;box-shadow:0 7px 0 rgba(20,27,60,.22);animation:tk .42s cubic-bezier(.25,1.5,.5,1) both;flex:none}
.tick:before{content:"";position:absolute;left:0;right:0;top:-7px;height:8px;background:radial-gradient(circle at 7px 8px,#fff 7px,transparent 7.5px) 0 0/14px 8px repeat-x}
@keyframes tk{0%{transform:translateY(-40px) scale(.72) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}
.tick.out{animation:out .2s ease-in forwards}
@keyframes out{to{transform:translateX(120%) rotate(16deg);opacity:0}}
.sec{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin-bottom:6px}
.sec svg{width:24px;height:24px}
.tick h2{font-size:clamp(29px,8.5vw,38px);line-height:1.04;overflow-wrap:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.meta span{padding:4px 10px;border-radius:99px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700}
.meta span.w{background:var(--sol);color:var(--ink)}
.nec b{display:block;font-size:12.5px;font-weight:800}
.nec{font-size:16px}
.rel{margin-top:11px;padding:9px 11px;background:#fff3c4;border-radius:11px;font-size:14px;font-weight:700}
.acts{margin-top:auto;padding:6px 16px calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none}
.acts .pl{min-height:88px;flex-direction:column;gap:3px;font-size:21px;font-family:Bagel;font-weight:400;border-radius:22px}
.acts svg{width:38px;height:38px}
.acts .rr svg.sp{animation:sp .55s cubic-bezier(.3,.9,.4,1.15)}
@keyframes sp{to{transform:rotate(360deg)}}
.lnk{display:block;width:100%;text-align:center;font-weight:700;font-size:15px;text-decoration:underline;padding:0 0 12px;flex:none}
/* seguridad */
.haz{height:22px;background:repeating-linear-gradient(-45deg,var(--ink) 0 16px,var(--sol) 16px 32px);flex:none}
.segur{background:var(--sol);--c:var(--sol)}
.segb{margin:0 16px 14px;flex:none}
.segb h2{font-size:38px;line-height:1;margin:14px 0 4px}
.nota{background:#fff;border-radius:18px;padding:16px;font-size:18.5px;line-height:1.36;font-weight:700;margin:12px 0}
.segb p.o{font-size:15px;margin-top:9px}
.segb p.o b{display:block;font-size:12.5px;font-weight:800}
/* juego */
.reloj{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--ink);color:#fff;border-radius:22px;padding:12px 14px;margin:12px 16px 4px;flex:none}
.dial{position:relative;width:104px;height:104px}
.dial svg{transform:rotate(-90deg)}
.dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 27px/1 Bagel}
.rb{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rb .pl{min-height:46px;font-size:15px;border-radius:13px;padding:0 6px}
.rb .w2{grid-column:1/3;min-height:52px;font-size:18px}
.reloj small{font-size:13px;color:#d4d9f7;grid-column:1/3;display:block;line-height:1.25}
.reloj.fin{background:var(--men);color:var(--ink);animation:wob .5s 3}
.reloj.fin small{color:var(--ink)}
@keyframes wob{25%{transform:rotate(-1.4deg)}75%{transform:rotate(1.4deg)}}
.pasos{list-style:none;margin:10px 16px;padding:0;display:flex;flex-direction:column;gap:8px;flex:none}
.pasos button{display:flex;gap:11px;text-align:left;background:#fff;border-radius:16px;padding:12px;width:100%;font-size:16px;line-height:1.34;align-items:flex-start;box-shadow:0 3px 0 rgba(20,27,60,.2)}
.pasos i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;font:400 18px/1 Bagel;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(20,27,60,.16)}
.pasos .ok{opacity:.55;text-decoration:line-through}
.pasos .ok i{background:var(--ink);color:#fff}
.tip{margin:0 16px 10px;background:rgba(255,255,255,.7);border-radius:14px;padding:10px 12px;font-size:15px;flex:none}
.tip b{display:block;font-size:12.5px;font-weight:800}
.foot{padding:6px 16px calc(16px + env(safe-area-inset-bottom));margin-top:auto;flex:none}
.h2p{font-size:30px;line-height:1.05;padding:0 16px;flex:none}
.toast{position:absolute;left:50%;bottom:92px;transform:translate(-50%,16px);z-index:40;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-weight:700;font-size:14.5px;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* login */
.login{min-height:100%;padding:0 20px 24px;display:flex;flex-direction:column;background:var(--azul);color:#fff}
.login .logo2{align-self:flex-start;margin:22px 0 12px;background:var(--sol);color:var(--ink);padding:9px 18px 12px;border-radius:18px;font-size:44px;line-height:.98;transform:rotate(-3deg);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(20,27,60,.14),0 5px 0 var(--sol-d)}
.login svg.lg{width:100%;max-width:320px;height:auto;margin:6px auto 4px}
.login h2{font-size:27px;line-height:1.05;margin:6px 0 6px}
.login .hintt{font-size:15px;margin-bottom:10px}
.login .big{--c:var(--tom);--d:var(--tom-d);margin-top:4px}
.login .alt{--c:#fff;--d:#9aa6e8;margin-top:12px}
.authmsg{background:var(--sol);color:var(--ink);padding:10px 12px;border-radius:12px;font-weight:700;font-size:14.5px;margin-top:14px}
.authlinks{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.authlinks button{text-decoration:underline;font-weight:700;text-align:left;padding:8px 2px;color:#fff}
@media (max-height:700px){.dome{height:74px}.logo{font-size:21px;margin-top:-24px}.cuerpo{gap:3px;padding-top:8px}.lab{margin-bottom:1px;font-size:12px}.kids{padding-bottom:4px}.kid{min-height:28px;font-size:13px}.track button{min-height:32px}.track.row button{min-height:32px}.track.ic button{min-height:40px;font-size:10.5px}.track.ic svg{width:19px;height:19px}.key{min-height:44px;font-size:10px}.key svg{width:20px;height:20px}.pago{grid-template-columns:62px 1fr 84px;padding:6px 16px 8px}.chute{height:66px}.cap{width:44px;height:44px;margin-left:-22px}.knobw{width:84px;height:84px}.knobw span{font-size:18px}.odo b{font-size:21px;padding:4px 8px 5px;min-width:48px}nav svg{width:21px;height:21px}nav button{font-size:10.5px;padding:2px 0}}
@media (min-width:561px){body{background:var(--ink)}#app{box-shadow:0 0 0 1px #000}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}