/* Fuentes (solo el juego de caracteres latino, que cubre el español). Licencias en fuentes/LICENCIAS.txt */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(fuentes/schibsted-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/ibm-plex-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/ibm-plex-mono-500-latin.woff2) format('woff2')}

body{margin:0;background:#FBFBF9;color:#141416;font-family:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#141416}a:hover{color:#5E5E63}
*{box-sizing:border-box}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid #141416;background:#141416;color:#FBFBF9;font:600 16px/1 'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:transform .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);background:#2A2A2E;color:#FBFBF9}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:#141416}
.btn.ghost:hover{background:#141416;color:#FBFBF9}
.btn.full{width:100%}
.link{background:none;border:0;padding:8px 0;font:500 14px/1.2 'IBM Plex Mono',ui-monospace,monospace;color:#5E5E63;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.link:hover{color:#141416}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(251,251,249,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #E6E5E0}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{text-decoration:none;font-size:15px;font-weight:500}
.cartbtn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #141416;background:transparent;color:#141416;font:600 15px/1 'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.cartbtn:hover{background:#141416;color:#FBFBF9}
.badge{min-width:22px;height:22px;border-radius:11px;background:var(--acc);color:#141416;font:500 12px/22px 'IBM Plex Mono',monospace;text-align:center;padding:0 6px}
@media (max-width:760px){.navlinks{display:none}}

/* glitter material */
.glit{background-color:#1B1A1F;background-image:
radial-gradient(circle,rgba(255,255,255,.75) 0 .55px,transparent 1.1px),
radial-gradient(circle,rgba(196,160,255,.6) 0 .6px,transparent 1.2px),
radial-gradient(circle,rgba(140,220,255,.5) 0 .5px,transparent 1.1px),
radial-gradient(circle,rgba(255,206,160,.5) 0 .5px,transparent 1px),
radial-gradient(circle,rgba(255,255,255,.28) 0 .45px,transparent .9px),
linear-gradient(150deg,rgba(255,255,255,.08),rgba(0,0,0,.28));
background-size:7px 7px,11px 13px,13px 9px,17px 19px,4px 5px,100% 100%;
background-position:0 0,3px 5px,6px 2px,9px 11px,2px 1px,0 0}

/* the product, drawn */
.tag{position:relative;width:10em;height:10em;border-radius:1.5em;box-shadow:0 1.6em 2.4em -1.1em rgba(20,20,22,.6),0 .25em .5em rgba(20,20,22,.18),inset 0 .05em 0 rgba(255,255,255,.2),inset 0 -.06em 0 rgba(0,0,0,.5)}
.tag-rim{position:absolute;inset:.42em;border-radius:1.08em;box-shadow:inset 0 0 0 .07em #09090B,inset 0 .14em .12em rgba(0,0,0,.35),0 0 0 .05em rgba(255,255,255,.07)}
.tag-hole{position:absolute;left:.8em;top:.8em;width:.52em;height:.52em;border-radius:50%;background:var(--hole,#FBFBF9);box-shadow:inset 0 .07em .09em rgba(0,0,0,.65)}
.tag-waves{position:absolute;right:1.15em;top:1.05em;width:1.3em;height:1.3em}
.wv{position:absolute;border-radius:50%;border:.13em solid transparent;border-top-color:#09090B;transform:rotate(45deg)}
.wv1{width:.9em;height:.9em;left:-.45em;bottom:-.45em}
.wv2{width:1.64em;height:1.64em;left:-.82em;bottom:-.82em}
.wv3{width:2.38em;height:2.38em;left:-1.19em;bottom:-1.19em}
.wvd{position:absolute;width:.28em;height:.28em;left:-.14em;bottom:-.14em;border-radius:50%;background:#09090B}
.tag-lock{position:absolute;left:2.7em;top:2.05em;width:4.6em;height:6.2em}
.lk-o{position:absolute;left:.7em;top:0;width:3.2em;height:3.1em;border:.075em solid #09090B;border-bottom:0;border-radius:1.6em 1.6em 0 0;box-shadow:inset 0 .05em 0 rgba(255,255,255,.08)}
.lk-i{position:absolute;left:1.08em;top:.38em;width:2.44em;height:2.8em;border:.075em solid #09090B;border-bottom:0;border-radius:1.22em 1.22em 0 0;box-shadow:0 -.04em 0 rgba(255,255,255,.07)}
.lk-b{position:absolute;left:0;top:2.7em;width:4.6em;height:3.5em;border:.075em solid #09090B;border-radius:.3em;box-shadow:0 .12em .18em rgba(0,0,0,.5),inset 0 .05em 0 rgba(255,255,255,.12)}
.lk-kh{position:absolute;left:50%;top:1.05em;width:.56em;height:.56em;margin-left:-.28em;border-radius:50%;background:#08080A}
.lk-kt{position:absolute;left:50%;top:1.42em;width:.22em;height:.78em;margin-left:-.11em;border-radius:.08em;background:#08080A}

/* hero demo */
.scene{position:relative;height:560px;border-radius:32px;background-color:#F1F0EC;background-image:radial-gradient(rgba(20,20,22,.09) 1px,transparent 1.3px);background-size:18px 18px;overflow:hidden;--hole:#F1F0EC}
.stage{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%)}
@media (max-width:620px){.scene{height:430px}.stage{transform:translate(-50%,-50%) scale(.74)}}
.phone{position:absolute;left:62px;top:24px;width:240px;height:472px;border-radius:42px;background:#111113;padding:9px;z-index:2;box-shadow:0 40px 60px -30px rgba(20,20,22,.45),inset 0 0 0 2px #2A2A2E}
.screen{position:relative;width:100%;height:100%;border-radius:34px;background:#FDFDFC;padding:20px 18px;display:flex;flex-direction:column;gap:22px;overflow:hidden}
.island{width:76px;height:22px;border-radius:12px;background:#111113;align-self:center}
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{position:relative;aspect-ratio:1/1;border-radius:15px;display:flex;align-items:center;justify-content:center;transition:filter .5s ease,opacity .5s ease}
.g{display:block}
.g-o{width:20px;height:20px;border-radius:50%;background:rgba(20,20,22,.78)}
.g-r{width:22px;height:22px;border-radius:50%;border:4px solid rgba(20,20,22,.78)}
.g-s{width:20px;height:20px;border-radius:6px;background:rgba(20,20,22,.78)}
.g-d{width:16px;height:16px;transform:rotate(45deg);background:rgba(20,20,22,.78)}
.g-b{width:22px;height:16px;border-top:4px solid rgba(20,20,22,.78);border-bottom:4px solid rgba(20,20,22,.78)}
.veil{position:absolute;inset:0;border-radius:15px;background:rgba(20,20,22,.8);color:#FBFBF9;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.3)}
.on .lockable{filter:grayscale(1)}
.on .veil{opacity:1;transform:scale(1)}
.on .d1 .veil{transition-delay:.55s}.on .d2 .veil{transition-delay:.68s}.on .d3 .veil{transition-delay:.81s}.on .d4 .veil{transition-delay:.94s}
.toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,14px);opacity:0;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#141416;color:#FBFBF9;font:500 12px/1 'IBM Plex Mono',monospace;transition:opacity .4s ease 1.1s,transform .4s ease 1.1s}
.on .toast{opacity:1;transform:translate(-50%,0)}
.flyer{position:absolute;left:330px;top:150px;font-size:13px;z-index:1;transform:translate(0,0) rotate(12deg);transition:transform .9s cubic-bezier(.22,.9,.25,1)}
.on .flyer{transform:translate(-92px,-34px) rotate(-5deg)}
.ring{position:absolute;left:286px;top:150px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid var(--acc);opacity:0;z-index:3;pointer-events:none}
.on .ring{animation:ring 1.6s ease-out .45s 2}
.on .ring.r2{animation-delay:.7s}.on .ring.r3{animation-delay:.95s}
@keyframes ring{0%{transform:scale(.25);opacity:.95}100%{transform:scale(1.9);opacity:0}}
.demo-ctl{position:absolute;left:20px;bottom:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:4;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #141416;background:#FBFBF9;color:#141416;font:500 14px/1 'IBM Plex Mono',monospace;cursor:pointer}
.chip:hover{background:#141416;color:#FBFBF9}

/* entrance */
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.rise.b{animation-delay:.12s}.rise.c{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-12px)}}

/* steps */
.track{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px}
.stepnum{width:56px;height:56px;border-radius:50%;border:1.5px solid #141416;display:flex;align-items:center;justify-content:center;font:500 16px/1 'IBM Plex Mono',monospace;background:#FBFBF9}
.stepnum.fill{background:#141416;color:#FBFBF9}

/* anatomy */
.pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#FBFBF9;color:#141416;border:1.5px solid #141416;font:500 13px/31px 'IBM Plex Mono',monospace;text-align:center;box-shadow:0 0 0 5px rgba(251,251,249,.35)}
.parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.parts li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-top:1px solid #E6E5E0}
.parts li:last-child{border-bottom:1px solid #E6E5E0}

/* qty */
.qty{display:inline-flex;align-items:center;border:1.5px solid #141416;border-radius:999px;height:52px}
.qty button{width:48px;height:48px;border:0;background:none;font:500 20px/1 'IBM Plex Mono',monospace;color:#141416;cursor:pointer;border-radius:50%}
.qty button:hover{background:#ECEBE6}
.qty span{min-width:34px;text-align:center;font:500 17px/1 'IBM Plex Mono',monospace}
.qty.sm{height:40px}.qty.sm button{width:38px;height:38px;font-size:17px}

/* bar */
.bar{height:6px;border-radius:3px;background:#E6E5E0;overflow:hidden}
.bar i{display:block;height:100%;background:#141416;border-radius:3px;transition:width .5s ease}

/* drawer */
.ov{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.backdrop{position:absolute;inset:0;border:0;padding:0;background:rgba(20,20,22,.38);cursor:pointer;animation:fade .3s ease}
.drawer{position:relative;width:min(460px,100%);height:100%;max-height:100vh;overflow:auto;background:#FBFBF9;padding:26px 28px 34px;display:flex;flex-direction:column;gap:22px;animation:slide .4s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 60px -30px rgba(20,20,22,.4)}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.x{width:44px;height:44px;border-radius:50%;border:1.5px solid #141416;background:transparent;color:#141416;display:flex;align-items:center;justify-content:center;cursor:pointer}
.x:hover{background:#141416;color:#FBFBF9}
.steps{display:flex;gap:8px;align-items:center;font:500 12px/1 'IBM Plex Mono',monospace;color:#8A8A8F;flex-wrap:wrap}
.steps .st.on{color:#141416}
.steps .sep{width:18px;height:1px;background:#C9C8C2}
.ticket{border:1.5px dashed #BDBCB6;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;background:#FFFFFF}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 14px/1.3 'IBM Plex Mono',monospace}
.row.big{font-size:18px;font-weight:500;padding-top:12px;border-top:1.5px dashed #BDBCB6}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font:500 12px/1 'IBM Plex Mono',monospace;color:#5E5E63;letter-spacing:.02em}
.fld input,.fld select,.fld textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid #D5D4CE;background:#FFFFFF;color:#141416;font:400 16px/1.3 'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;outline:none;appearance:none;-webkit-appearance:none}
.fld textarea{min-height:84px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#141416}
.bank{display:flex;flex-direction:column;gap:0;border-radius:18px;background:#141416;color:#FBFBF9;padding:6px 20px}
.bank div{display:flex;flex-direction:column;gap:5px;padding:14px 0;border-bottom:1px solid rgba(251,251,249,.14)}
.bank div:last-child{border-bottom:0}
.bank span{font:400 12px/1 'IBM Plex Mono',monospace;color:#B9B9BE}
.bank strong{font:500 17px/1.3 'IBM Plex Mono',monospace;word-break:break-word}
.wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--acc);color:#141416;font:700 16px/1 'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;text-decoration:none;border:1.5px solid #141416}
.wa:hover{color:#141416;filter:brightness(.96)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* agregados para la versión publicada */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
body.cajon-abierto{overflow:hidden}
.aviso{margin:0;padding:12px 14px;border-radius:12px;border:1.5px solid #141416;background:#FFFFFF;font:500 13px/1.4 'IBM Plex Mono',ui-monospace,monospace}
.osep{display:flex;align-items:center;gap:12px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;color:#5E5E63}
.osep i{flex:1;height:1px;background:#C9C8C2}
a.btn.full{display:flex}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc,#FF6B2C);outline-offset:2px}
.bank strong span{font:inherit;color:inherit}