@font-face{font-family:'Geist';src:url('/assets/fonts/geist-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('/assets/fonts/martian-mono-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#0C0C0D;--bg2:#141416;--fg:#EDEDED;--gris:#8A8A8F;--linea:#26262b;--senal:#FF3B1F;--sans:'Geist',system-ui,sans-serif;--mono:'Martian Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
em{font-style:normal;color:var(--senal)}
[hidden]{display:none!important}
.link{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,48px);background:rgba(12,12,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 13px var(--mono);letter-spacing:.2em}
.nav nav{display:flex;gap:22px;font-size:14px}.nav nav a{text-decoration:none;color:var(--gris)}.nav nav a:hover{color:var(--fg)}
main{width:min(1180px,100% - 32px);margin:0 auto}
.ceja{display:flex;align-items:center;gap:12px;font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.punto{width:9px;height:9px;border-radius:50%;background:var(--senal);box-shadow:0 0 14px var(--senal);animation:late 1.6s infinite}
@keyframes late{50%{opacity:.35}}
h1,h2{font-weight:620;letter-spacing:-.04em;line-height:1}
h1{font-size:clamp(48px,9vw,112px);margin:22px 0 22px}
h2{font-size:clamp(34px,5.5vw,64px);margin:16px 0 18px}
.entrada{color:#a5a5aa;max-width:52ch;font-size:clamp(17px,2vw,20px)}
.hero{padding:clamp(56px,10vw,120px) 0 64px;position:relative}
.hero:after{content:'';position:absolute;right:-10%;top:10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,59,31,.16),transparent 65%);pointer-events:none;z-index:-1}
.pegar{margin-top:38px;max-width:640px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.campo{display:flex;align-items:center;gap:8px;height:68px;padding:0 20px;border-radius:18px;background:var(--bg2);border:1px solid #2c2c31;transition:border-color .2s,box-shadow .2s;font-size:19px}
.campo:focus-within{border-color:var(--senal);box-shadow:0 0 0 4px rgba(255,59,31,.18)}
.campo .pre{color:#6b6b70}
.campo input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 28px;border:0;border-radius:18px;background:var(--senal);color:#fff;font:600 18px var(--sans);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s}
.boton:hover{transform:translateY(-2px)}.boton:disabled{opacity:.6;cursor:wait;transform:none}
.boton i{font-style:normal;transition:transform .25s}.boton:hover i{transform:translateX(4px)}
.boton:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-100%);animation:brillo 3.2s 1s infinite}
@keyframes brillo{40%,100%{transform:translateX(100%)}}
.ts{max-width:100%;overflow:hidden}.ts:empty{display:none}
.caja form{grid-template-columns:minmax(0,1fr)}
.error{color:#ff8a76;font-size:15px}
.nota{color:#6b6b70;font-size:13px}
/* escena */
.escena{display:grid;gap:40px;align-items:start;padding:40px 0 80px}
@media(min-width:960px){.escena{grid-template-columns:1fr 430px}}
.pasos ol{list-style:none;display:grid;gap:10px;margin-top:26px}
.pasos li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--bg2);border:1px solid var(--linea);opacity:.35;transform:translateX(-8px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1),border-color .4s}
.pasos li.activo{opacity:1;transform:none;border-color:rgba(255,59,31,.5)}
.pasos li.hecho{opacity:1;transform:none}
.pasos li .n{font:500 13px var(--mono);color:var(--gris)}
.pasos li.activo .n{color:var(--senal)}
.pasos li.hecho .n{color:#2BD576}
.pasos li b{display:block;font-weight:600}.pasos li small{color:var(--gris);font-size:13.5px}
#antes{grid-column:1/-1;width:100%;max-height:220px;object-fit:cover;object-position:top;border-radius:10px;border:1px solid #2c2c31;animation:entra .7s cubic-bezier(.16,1,.3,1)}
.pieza-logo img{max-height:44px;max-width:150px;display:block;background:#fff;border-radius:8px;padding:5px 8px;animation:entra .7s cubic-bezier(.16,1,.3,1)}
.muestras{display:flex;gap:6px}.muestras i{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.14);animation:entra .6s cubic-bezier(.16,1,.3,1) both}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;padding:6px 10px;border-radius:9px;background:#EDEDED;color:#0C0C0D;font-weight:600;animation:entra .6s cubic-bezier(.16,1,.3,1) both}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.92);filter:blur(6px)}}
.cta-final{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.cta-final .link{color:var(--gris)}
/* móvil */
.movil{position:sticky;top:90px;justify-self:center;width:min(390px,100%)}
.marco{position:relative;border-radius:56px;padding:12px;background:linear-gradient(135deg,#3b3c40,#16171a 40%,#2a2b2f 70%,#121315);box-shadow:inset 0 0 0 2px #4a4b50,0 60px 120px -40px rgba(0,0,0,.9),0 0 80px -20px rgba(255,59,31,.25)}
.isla{position:absolute;left:50%;top:24px;width:110px;height:32px;margin-left:-55px;border-radius:20px;background:#000;z-index:3}
.pantalla{position:relative;border-radius:44px;overflow:hidden;aspect-ratio:9/19.3;background:#0f0f11}
.pantalla iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0f0f11}
@keyframes aparece{from{opacity:0;transform:scale(1.04)}}
.cargando{position:absolute;inset:0;z-index:2;background:#0f0f11;display:grid;place-items:center;align-content:center;gap:16px;color:var(--gris);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:30px}
.cargando .barrido{width:70%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--senal),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:barre 1.4s infinite}
@keyframes barre{from{background-position:-50% 0}to{background-position:150% 0}}
/* datos */
.quiero{padding:40px 0 90px}
.caja{max-width:760px;padding:clamp(24px,5vw,48px);border-radius:28px;background:var(--bg2);border:1px solid var(--linea)}
.caja form{display:grid;gap:16px;margin-top:28px}
.fila{display:grid;gap:16px}@media(min-width:640px){.fila{grid-template-columns:1fr 1fr}}
.caja label{display:grid;gap:6px;font-size:14px;color:#c9c9ce}.caja label small{color:var(--gris)}
.caja input,.caja select{height:54px;padding:0 14px;border-radius:12px;background:var(--bg);border:1px solid #2c2c31;color:var(--fg);font:16px var(--sans);outline:0}
.caja input:focus,.caja select:focus{border-color:var(--senal)}
.check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px!important;font-size:13.5px!important;line-height:1.45}
.check input{height:20px!important;width:20px;flex:none;accent-color:var(--senal);margin-top:1px}
.trampa{position:absolute;left:-9999px;opacity:0}
.hecho{margin-top:26px;display:grid;gap:12px;justify-items:start}
.hecho h3{font-size:24px;font-weight:600}
/* cómo funciona */
.como{padding:60px 0 100px;border-top:1px solid var(--linea)}
.tres{display:grid;gap:14px;margin:34px 0 40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tres article{padding:26px;border-radius:20px;background:var(--bg2);border:1px solid var(--linea)}
.tres span{font:500 13px var(--mono);color:var(--senal)}.tres h3{font-size:22px;font-weight:600;margin:12px 0 8px}.tres p{color:var(--gris);font-size:15.5px}
details{border-top:1px solid var(--linea);padding:18px 0;max-width:760px}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between}
summary:after{content:'+';color:var(--senal)}details[open] summary:after{content:'–'}
details p{color:var(--gris);margin-top:10px}
.pie{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:26px clamp(16px,4vw,48px);border-top:1px solid var(--linea);color:var(--gris);font-size:14px}
dialog{margin:auto;max-width:620px;width:calc(100% - 32px);border:1px solid var(--linea);border-radius:20px;background:var(--bg2);color:var(--fg);padding:28px}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.legal-txt{display:grid;gap:10px;font-size:15px;color:#c9c9ce}.legal-txt h3{font-size:22px;color:var(--fg)}.legal-txt .boton{height:48px;margin-top:8px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}