:root{--obs:#000;--car:#1d1d1f;--steel:#333336;--ash:#86868b;--por:#f5f5f7;--blue:#0071e3;--lk:#2997ff;
--bgL:#f5f5f7;--txL:#1d1d1f;--mutL:#6e6e73;
--disp:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);box-sizing:border-box;color-scheme:light dark;background:var(--obs);
padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bgL:#1d1d1f;--txL:#f5f5f7;--mutL:#86868b}}
:root[data-theme="dark"]{--bgL:#1d1d1f;--txL:#f5f5f7;--mutL:#86868b}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);-webkit-text-size-adjust:100%}
html.js:not(.ready){overflow:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--obs);color:var(--por);font:400 17px/1.47 var(--text);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--disp);font-weight:700;margin:0}
h1{font-size:clamp(48px,9vw,96px);line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(40px,6.5vw,80px);line-height:1.04;letter-spacing:-.04em}
h3{font-size:clamp(26px,3vw,32px);line-height:1.1;letter-spacing:-.025em}
p{margin:0}a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:12px;background:var(--por);color:var(--car);padding:12px 18px;border-radius:99px;z-index:120}.skip:focus{left:12px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:170px;background:var(--blue);color:#fff;font:500 15px/1 var(--text);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;transition:transform .3s var(--ease),filter .3s,translate .35s var(--ease)}
.btn:hover{filter:brightness(1.12);transform:scale(1.03)}
.lnk{color:var(--lk);text-decoration:none;font-size:17px;display:inline-flex;align-items:center;min-height:44px}.lnk:hover{text-decoration:underline}
/* carga y progreso */
#ld{position:fixed;inset:0;z-index:100;background:var(--obs);display:none;place-items:center}
.js #ld{display:grid}
#ld span{font:800 clamp(44px,9vw,84px)/1 var(--disp);letter-spacing:-.045em;color:var(--por);clip-path:inset(0 100% 0 0);animation:wp 1s var(--ease) .1s forwards}
.ready #ld{pointer-events:none;animation:cur 1s var(--ease) .15s forwards}
@keyframes wp{to{clip-path:inset(0 0 0 0)}}
@keyframes cur{to{transform:translateY(-100%);visibility:hidden}}
#bar{position:fixed;left:0;right:0;top:0;height:2px;z-index:40;background:var(--lk);transform:scaleX(0);transform-origin:0 50%}
#up{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(29,29,31,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--por);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease)}
#up.on{opacity:1;pointer-events:auto;transform:none}
#up svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#up circle:first-child{stroke:rgba(255,255,255,.2)}
#rg{stroke:var(--lk);stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%}
/* nav: liquid glass */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:2px;padding:5px;border-radius:99px;
background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -10px 20px rgba(255,255,255,.05),0 8px 28px rgba(0,0,0,.22);color:#fff;transition:color .4s,background .4s}
.js .nav{translate:0 -36px;opacity:0}
.ready .nav{translate:0 0;opacity:1;transition:translate 1s var(--ease) .9s,opacity 1s .9s,color .4s,background .4s}
.nav[data-tone="light"]{color:var(--car);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.4))}
.nav a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:99px;text-decoration:none;font:500 14px/1 var(--text);letter-spacing:-.01em;white-space:nowrap}
.nav .mk{font:800 19px/1 var(--disp);letter-spacing:-.045em;padding:0 16px 0 14px}
.nav .go{background:var(--blue);color:#fff;margin-left:4px}
#pill{position:absolute;z-index:0;left:0;top:5px;height:40px;border-radius:99px;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);opacity:0;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.nav[data-tone="light"] #pill{background:rgba(0,0,0,.08)}
/* hero */
#hero{height:230vh;position:relative}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1400px}
#htxt{position:absolute;inset:0 0 auto;padding-top:clamp(96px,17vh,150px);text-align:center;will-change:transform,opacity}
#htxt p{max-width:34ch;margin:22px auto 0;font-size:clamp(18px,2.2vw,22px);line-height:1.3;color:var(--ash)}
#htxt .acts{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln span{display:block}
.js .ln span{transform:translateY(110%)}
.ready .ln span{animation:up 1.1s var(--ease) forwards}
.ready .ln:nth-child(2) span{animation-delay:.12s}
@keyframes up{to{transform:none}}
.js .fx{opacity:0;transform:translateY(22px)}
.ready .fx{animation:fx 1s var(--ease) forwards;animation-delay:calc(.3s + var(--d,0)*.12s)}
@keyframes fx{to{opacity:1;transform:none}}
#mock{position:absolute;left:50%;bottom:0;width:min(980px,90vw);margin-left:calc(min(980px,90vw)/-2);aspect-ratio:16/10;background:var(--car);border-radius:28px 28px 0 0;box-shadow:0 0 0 1px var(--steel);transform-origin:50% 0;will-change:transform;overflow:hidden}
.bar{display:flex;gap:7px;align-items:center;padding:14px 18px}.bar i{width:9px;height:9px;border-radius:50%;background:var(--steel)}
.bar b{margin-left:14px;height:20px;flex:0 1 240px;border-radius:99px;background:#2a2a2d}
.pg{display:grid;grid-template-columns:1.2fr 1fr;gap:3%;padding:4% 6%}
.pg>div{display:flex;flex-direction:column;gap:12px}
.b{display:block;height:14px;border-radius:7px;background:var(--por);transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--p,0)*6 - var(--i)),1))}
.b.t{height:30px;border-radius:10px}.b.s{background:var(--steel);height:10px}.b.c{background:var(--blue);width:96px;height:30px;border-radius:99px;margin-top:6px}
.im{border-radius:20px;background:var(--steel);min-height:150px;opacity:clamp(0,calc(var(--p,0)*6 - 3),1)}
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;padding:0 6%}
.tl i{height:84px;border-radius:18px;background:#2a2a2d;opacity:clamp(0,calc(var(--p,0)*6 - var(--i)),1)}
/* frase */
#stm{height:230vh;background:var(--car);position:relative}
#stm .stick{display:grid;place-items:center;perspective:none}
#stm p{font:700 clamp(30px,5.4vw,64px)/1.1 var(--disp);letter-spacing:-.04em;max-width:18em}
.w{opacity:.2;transition:opacity .25s}
/* cinta */
.mqs{background:var(--obs);overflow:hidden;padding-block:clamp(36px,6vw,72px);display:grid;gap:clamp(8px,1.6vw,18px)}
.mr{display:flex;width:max-content;animation:mq 40s linear infinite}
.mr.r{animation-direction:reverse;animation-duration:50s}
.mr span{font:700 clamp(34px,5.4vw,60px)/1.15 var(--disp);letter-spacing:-.035em;color:#4a4a4f;padding-right:.7em;white-space:nowrap;transition:color .4s}
.mr span:hover{color:var(--por)}
.mqs:hover .mr{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* bandas */
.band{padding-block:clamp(80px,12vw,140px)}
.light{background:var(--bgL);color:var(--txL)}
.light .mu{color:var(--mutL)}
.js [data-sp] .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-sp] .sw>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*.06s)}
.js [data-sp].in .sw>span{transform:none}
.hl{display:block;height:1px;background:rgba(134,134,139,.45);margin-block:clamp(28px,5vw,48px) 16px;transform-origin:0 50%}
.js .hl{transform:scaleX(0);transition:transform 1.5s var(--ease)}.js .hl.in{transform:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{perspective:900px}
.ti{height:100%;background:var(--obs);color:var(--por);border-radius:28px;padding:clamp(24px,4vw,40px);min-height:clamp(260px,30vw,340px);display:flex;flex-direction:column;justify-content:flex-end;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.ti p{margin-top:12px;color:var(--ash);max-width:30ch}
.ti svg{width:52px;height:52px;margin-bottom:auto;fill:none;stroke:var(--lk);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ti svg *{stroke-dasharray:1;stroke-dashoffset:0}
.js .ti svg *{stroke-dashoffset:1;transition:stroke-dashoffset 1.7s var(--ease) .3s}
.js .tile.in .ti svg *{stroke-dashoffset:0}
.js .rv{opacity:0;transform:translateY(46px) scale(.96);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0)*.12s)}
.js .rv.in{opacity:1;transform:none}
/* proceso */
#proceso{background:var(--obs)}
.pr{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,6vw,96px)}
.pr>h2{position:sticky;top:120px;align-self:start}
.stp{position:relative;padding-left:44px}
#line{position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--steel)}
#line i{display:block;width:100%;height:0;background:var(--por)}
.st{position:relative;padding-block:clamp(36px,9vh,80px);opacity:.3;transition:opacity .5s}
.st::before{content:"";position:absolute;left:-41px;top:clamp(46px,10vh,92px);width:12px;height:12px;border-radius:50%;background:var(--steel);transition:background .4s,transform .4s var(--ease)}
.st.on{opacity:1}.st.on::before{background:var(--por);transform:scale(1.4)}
.st h3{transition:transform .7s var(--ease)}.st.on h3{transform:translateX(10px)}
.st .n{display:block;font:600 14px/1 var(--text);color:var(--lk);margin-bottom:12px}
.st p{margin-top:10px;color:var(--ash);max-width:34ch}
/* preguntas */
.faq{margin-top:8px}
.q{border-bottom:1px solid rgba(134,134,139,.4)}
.q button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:22px 0;font:600 clamp(19px,2.3vw,26px)/1.2 var(--disp);letter-spacing:-.02em}
.q button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.q i{flex:none;width:18px;height:18px;position:relative;transition:transform .5s var(--ease)}
.q i::before,.q i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;border-radius:2px;background:currentColor}
.q i::after{transform:rotate(90deg)}
.q.open i{transform:rotate(45deg)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.a>div{overflow:hidden;visibility:hidden;transition:visibility .55s}
.q.open .a{grid-template-rows:1fr}.q.open .a>div{visibility:visible}
.a p{padding-bottom:24px;max-width:56ch;color:var(--mutL)}
/* contacto */
#contacto{background:var(--obs);text-align:center}
#contacto p{margin:22px auto 0;max-width:32ch;font-size:21px;line-height:1.3;color:var(--ash)}
#contacto .btn{margin-top:30px;min-height:52px;padding:0 30px;font-size:17px}
footer{background:var(--bgL);color:var(--mutL);padding:0 0 calc(34px + env(safe-area-inset-bottom,0px));font-size:12px;letter-spacing:-.01em}
footer .wrap{border-top:1px solid rgba(134,134,139,.35);padding-top:18px}
footer ul{display:flex;flex-wrap:wrap;gap:0 18px;list-style:none;margin:6px 0 0;padding:0}
footer button{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;color:var(--mutL);text-decoration:underline;text-underline-offset:3px}
footer button:hover{color:var(--txL)}
dialog{border:0;border-radius:28px;max-width:min(640px,92vw);max-height:84vh;padding:30px;background:#f5f5f7;color:#1d1d1f;font-size:15px}
dialog[open]{animation:dl .5s var(--ease)}
dialog[open]::backdrop{animation:fd .5s}
@keyframes dl{from{opacity:0;transform:translateY(26px) scale(.96)}}
@keyframes fd{from{opacity:0}}
dialog::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog h3{margin-bottom:14px}dialog p+p{margin-top:10px}dialog .btn{margin-top:20px}
dialog a{color:#0066cc}.pend{font-style:italic;text-decoration:underline dotted}
#cm{padding:14px 16px;border-radius:16px;background:#e8e8ed;user-select:all}
@media (max-width:820px){.grid,.pr{grid-template-columns:1fr}.pr>h2{position:static}.pg{grid-template-columns:1fr}.pg .im{display:none}}
@media (max-width:560px){.nav .go{display:none}.nav a{padding:0 11px}.nav .mk{padding:0 12px 0 10px}}
@media (prefers-reduced-motion:reduce){.mr{animation:none!important}#ld{display:none!important}}
.rm .rv,.rm .fx,.rm .hl{opacity:1;transform:none;transition:none;animation:none}
.rm .ln span{transform:none;animation:none}.rm [data-sp] .sw>span{transform:none!important;transition:none}
.rm .w,.rm .st{opacity:1}.rm .ti svg *{stroke-dashoffset:0!important;transition:none}.rm .nav{translate:none;opacity:1}

.nf{min-height:100vh;display:grid;place-items:center;text-align:center}.nfp{margin:22px auto 30px;color:var(--ash)}

/*legal*/
footer a{display:inline-flex;align-items:center;min-height:32px;color:var(--mutL);text-decoration:underline;text-underline-offset:3px}footer a:hover{color:var(--txL)}
.cta{display:flex;justify-content:center;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-top:30px}#contacto .cta .btn{margin-top:0}
.lg{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 80px)}
.lg a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;background:rgba(29,29,31,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--por);font:500 12px/1 var(--text);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .3s}
.lg a:hover{background:rgba(70,70,75,.92)}
.doc{background:var(--bgL);color:var(--txL);min-height:100vh}
.dh{display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 22px) 20px 0}
.mk2{font:800 24px/1 var(--disp);letter-spacing:-.045em;text-decoration:none;color:var(--txL)}
.da{max-width:760px;margin:0 auto;padding:clamp(40px,8vw,72px) 20px 72px;animation:pg .9s var(--ease) both}
@keyframes pg{from{opacity:0;transform:translateY(20px)}}
.da h1{font-size:clamp(36px,6vw,60px);line-height:1.05;letter-spacing:-.04em}
.da .up{color:var(--mutL);font-size:14px;margin-top:14px}
.da h2{font:700 clamp(22px,3vw,28px)/1.2 var(--disp);letter-spacing:-.025em;margin:44px 0 12px}
.da p,.da li{line-height:1.6}.da p{margin:0 0 12px}.da ul{padding-left:22px;margin:0 0 12px}.da li{margin-bottom:6px}
.da a{color:#0066cc}.da .btn{color:#fff;text-decoration:none;margin:6px 12px 6px 0}
.bx{background:rgba(134,134,139,.14);border-radius:20px;padding:20px 22px;margin:20px 0}
.dn{max-width:760px;margin:0 auto;padding:0 20px 60px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px}.dn a{color:var(--mutL);display:inline-flex;align-items:center;min-height:32px}
@media (prefers-reduced-motion:reduce){.da{animation:none}}
.tb{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:15px}.tb th,.tb td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(134,134,139,.4);vertical-align:top}.tb th{font-weight:600}