@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
:root{--bg:#0E1116;--surface:#161B22;--ice:#F5F6F8;--orange:#FF5A1F;--text2:#C9CED6;--label:#9AA3AF;--border:#2A313B;--amber:#F5B83D;--blue:#4C9BFF;--green:#2DD4A4;--glow:#3556c4;--glow2:#6a43c9}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--ice);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{letter-spacing:-.045em;line-height:.98;font-weight:700}
h2{font-size:clamp(36px,5vw,66px)}
em{font-style:normal;color:var(--orange)}
.kicker{color:var(--orange);font-weight:700;letter-spacing:.24em;font-size:12.5px;text-transform:uppercase;margin-bottom:12px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--text2);max-width:32em}
/* márgenes verticales contenidos */
section{position:relative;overflow-x:clip;padding:clamp(40px,5vw,68px) 0}
.glow{position:absolute;border-radius:50%;filter:blur(120px);background:var(--glow);opacity:.3;pointer-events:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* raíl de progreso: el tren avanza al hacer scroll */
.prog{position:fixed;inset:0 0 auto 0;height:4px;z-index:70;background:rgba(245,246,248,.08)}
.prog i{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,rgba(255,90,31,0),var(--orange))}
.prog b{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--orange);box-shadow:0 0 16px 4px rgba(255,90,31,.8)}
/* botones */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:99px;border:0;cursor:pointer;font-weight:700;font-size:17px;color:var(--ice);transition:transform .2s,box-shadow .2s}
.btn-o{background:var(--orange);color:#0E1116;box-shadow:0 10px 40px rgba(255,90,31,.35)}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(255,90,31,.55)}
.btn-o::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px}
.nav-in{display:flex;align-items:center;gap:26px;padding:8px 8px 8px 18px;border-radius:99px;background:rgba(22,27,34,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border);width:100%;max-width:980px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-.045em;margin-right:auto;color:var(--label)}
.logo b{color:var(--ice)}
.logo svg{width:30px;height:30px}
.nav-links{display:flex;gap:24px;font-size:15px;color:var(--text2)}
.nav-links a:hover{color:var(--ice)}
.nav .btn{padding:10px 20px;font-size:15px}
/* 3D */
.scene{perspective:2200px}
.scene,.scene *{transform-style:preserve-3d}
.slab{position:absolute;inset:0;border-radius:inherit}
.phone{position:absolute;width:var(--w);height:calc(var(--w)*2.174);border-radius:calc(var(--w)*.15)}
.phone .face{position:absolute;inset:0;border-radius:inherit;background:#04060a;border:2px solid rgba(255,255,255,.22)}
.phone img{position:absolute;left:calc(var(--w)*.026);top:calc(var(--w)*.026);width:calc(var(--w)*.948);height:calc(var(--w)*2.122);max-width:none;object-fit:cover;border-radius:calc(var(--w)*.126);transform:translateZ(3px)}
.acard{position:absolute;width:25em;padding:1.05em 1.3em;border-radius:1.25em;border:.11em solid;display:flex;gap:1.2em;align-items:center;font-size:15px;background:#1b1f26;box-shadow:0 30px 50px rgba(0,0,0,.5);text-align:left}
.acard.warn{background:#2a261c;border-color:var(--amber)}
.acard.cross{background:#151c28;border-color:#3b6aa8}
.acard.late{background:#2a1a13;border-color:var(--orange)}
.acard .t{font-size:.86em;font-weight:700}
.acard.warn .t{color:var(--amber)}.acard.cross .t{color:var(--text2);font-weight:400}.acard.late .t{color:var(--orange)}
.acard .n{font-size:1.5em;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.acard .d{font-size:.86em;color:var(--text2);white-space:nowrap}
.acard .pill{margin-left:auto;background:rgba(255,255,255,.1);border-radius:99px;padding:.45em .9em;font-weight:700;font-size:.9em;white-space:nowrap}
.dots{position:relative;width:3.6em;height:1.3em;flex:none}
.dots::before{content:"";position:absolute;left:.4em;right:.4em;top:50%;height:.32em;margin-top:-.16em;border-radius:9px;background:rgba(255,255,255,.16)}
.dots b,.dots u{position:absolute;top:0;width:1.3em;height:1.3em;border-radius:50%}
.dots b{left:0}.dots u{right:0}
.chip{position:absolute;display:flex;align-items:center;gap:.6em;padding:.7em 1.15em;border-radius:99px;background:rgba(22,27,34,.94);border:2px solid var(--border);font-size:16px;font-weight:700;white-space:nowrap;box-shadow:0 30px 50px rgba(0,0,0,.55)}
.chip::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--orange);box-shadow:0 0 18px 4px rgba(255,90,31,.8)}
/* inicio */
.hero{padding:118px 0 30px;overflow:hidden;overflow:clip} /* clip: recorta sin crear un contenedor desplazable (con hidden, un salto a #formulario desplazaba el hero por dentro y no se podía volver a subir) */
.still *,.still *::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
.rails{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(40px,4.7vw,66px);margin-bottom:12px}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 span>i{display:block;font-style:normal;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 span:nth-child(2)>i{animation-delay:.12s}
@keyframes up{to{transform:none}}
.live{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:99px;border:1px solid var(--border);background:rgba(22,27,34,.7);font-size:13.5px;color:var(--text2);margin-bottom:16px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.7)}70%{box-shadow:0 0 0 12px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.stage{position:relative;width:560px;height:700px;margin:0 auto;transition:transform .3s ease-out}
.stage .shadow{position:absolute;left:60px;top:540px;width:520px;height:190px;border-radius:50%;background:#000;filter:blur(60px);opacity:.75}
.enter{animation:enter 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(120px) rotateY(-50deg) rotateX(20deg) scale(.8)}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 -14px}}
.pop{animation:pop .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{opacity:0;scale:.5}}
/* tarjeta de captación */
.leadcard{position:relative;margin-top:18px;max-width:560px;padding:18px 20px 16px;border-radius:26px;background:linear-gradient(160deg,rgba(28,35,52,.92),rgba(20,25,33,.92));border:1px solid rgba(140,165,230,.28);box-shadow:0 30px 80px -30px rgba(53,86,196,.55)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:#0b0e12;border:1px solid var(--border);margin-bottom:14px}
.seg label{position:relative;z-index:1;text-align:center;padding:9px 0;font-weight:700;font-size:15px;cursor:pointer;color:var(--label);transition:color .25s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){color:#0E1116}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--orange);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.leadcard[data-p="iphone"] .seg::before{transform:translateX(100%)}
.leadcard h3{font-size:25px;margin-bottom:6px}
.leadcard .sub{color:var(--text2);font-size:15px;margin-bottom:12px}
.leadcard.ok .proof{display:none!important}
.leadcard [data-only]{display:none}
.leadcard[data-p="iphone"] [data-only="iphone"],.leadcard[data-p="android"] [data-only="android"]{display:revert}
/* Las dos variantes (Android/iPhone) ocupan la misma celda: el alto es siempre el de la más alta y nada se mueve al cambiar */
.leadcard .swap{display:grid}
.leadcard .swap>[data-only]{grid-area:1/1;display:block;visibility:hidden;opacity:0;transition:opacity .25s}
.leadcard[data-p="iphone"] .swap>[data-only="iphone"],.leadcard[data-p="android"] .swap>[data-only="android"]{visibility:visible;opacity:1}
.leadcard .btn .swap{justify-items:center}
.leadcard .below{margin-top:10px;align-items:center}
.leadcard .below .tiny{margin:0}
.leadcard .swap>.storerow[data-only]{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--label)}
.storerow img{height:44px;width:auto;max-width:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields input{width:100%;padding:14px 18px;border-radius:16px;border:1px solid var(--border);background:#0b0e12;color:var(--ice);outline:0;transition:border-color .2s,box-shadow .2s}
.fields input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.18)}
.fields input.bad{border-color:#E5383B}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:13px;color:var(--label);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--border);background:#0b0e12;cursor:pointer;transition:.2s}
.chk input:checked{background:var(--orange) url("data:image/svg+xml;utf8,") center/14px no-repeat;border-color:var(--orange)}
.chk input.bad{border-color:#E5383B}
.chk a{color:var(--text2);text-decoration:underline}
.leadcard .btn{width:100%}
.hp{position:absolute;left:-9999px}
.msg{font-size:13.5px;color:#ff8f8f}
.msg:not(:empty){margin-top:8px}
.tiny{margin-top:8px;font-size:13px;color:var(--label)}
.tiny a{color:var(--text2);text-decoration:underline}
.done{display:none;text-align:center;padding:10px 0 4px}
.leadcard.ok form,.leadcard.ok .seg,.leadcard.ok>h3,.leadcard.ok>.sub{display:none}
.leadcard.ok .done{display:block}
.done .tick{width:66px;height:66px;margin:0 auto 12px;border-radius:50%;background:var(--orange);display:grid;place-items:center;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
.leadcard[data-p="android"] .getapp[data-only="android"],.leadcard[data-p="iphone"] .getapp[data-only="iphone"]{display:flex}
.getapp{flex-direction:column;align-items:center;gap:14px;margin-top:18px}
.getapp .store-ic{width:58px;height:58px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.getapp .store-badge{height:50px;width:auto}
.getapp small{color:var(--label);font-size:13px;max-width:30em}
/* botón 3D: azul oscuro de marca, borde naranja y canto que se hunde al pulsar */
.btn3d{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:18px;font-weight:700;font-size:19px;color:var(--ice);background:linear-gradient(180deg,#232c3a,#161B22 55%,#0E1116);border:2px solid var(--orange);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 7px 0 #b8330a,0 8px 0 2px rgba(0,0,0,.35),0 22px 34px rgba(255,90,31,.32);transform:translateY(0);transition:transform .12s,box-shadow .12s}
.btn3d svg{color:var(--orange)}
.btn3d:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 9px 0 #b8330a,0 10px 0 2px rgba(0,0,0,.35),0 28px 40px rgba(255,90,31,.4)}
.btn3d:active{transform:translateY(6px);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 1px 0 #b8330a,0 2px 0 2px rgba(0,0,0,.35),0 8px 16px rgba(255,90,31,.3)}
.spark{position:absolute;left:50%;top:40%;width:8px;height:8px;border-radius:50%;background:var(--orange);pointer-events:none;animation:spark .9s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;color:var(--label);font-size:14px}
.proof b{color:var(--ice)}
.faces{display:flex}
.faces i{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px}
.faces i:first-child{margin-left:0}
/* cinta */
.strip{padding:16px 0;border-block:1px solid var(--border);background:rgba(22,27,34,.5);overflow:hidden}
.marq{display:flex;gap:46px;width:max-content;padding-right:46px;animation:marq 34s linear infinite;align-items:center;color:var(--label);font-size:15px;white-space:nowrap}
.marq b{font-family:Georgia,serif;font-size:22px;color:var(--ice)}
.marq u{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.marq u::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
@keyframes marq{to{transform:translateX(-50%)}}
/* cifras */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:22px 24px;border-radius:24px;border:1px solid var(--border);background:var(--surface)}
.stat b{display:block;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(34px,4.2vw,56px);letter-spacing:-.05em;line-height:1}
.stat b [data-n]{display:inline-block;text-align:left}
.stat>span{color:var(--text2);font-size:15px}
/* mosaico */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:30px}
.tile{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(160deg,#1a2029,#12161c);border:1px solid var(--border);padding:28px;min-height:310px}
.tile.rv.in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,opacity .7s}
.tile:hover{border-color:#4a5565}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(110,150,255,.16),transparent 60%);pointer-events:none}
.tile h3{font-size:28px;margin-bottom:8px}
.tile p{color:var(--text2);font-size:16px;max-width:22em}
.s4{grid-column:span 4}.s3{grid-column:span 3}.s2{grid-column:span 2}
.tall{min-height:470px}
.tile .shot{position:absolute;border-radius:36px;border:3px solid #2f3742;box-shadow:0 40px 80px rgba(0,0,0,.6);object-fit:cover;object-position:top;transform:rotate(var(--r));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover .shot{transform:rotate(var(--r)) translateY(-14px)}
.orbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.orb{width:54px;height:54px;border-radius:50%;box-shadow:0 14px 30px -6px var(--c);background:radial-gradient(circle at 34% 28%,#fff 0%,var(--c) 40%,color-mix(in srgb,var(--c),#000 55%) 100%);animation:bob 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
@keyframes bob{50%{translate:0 -9px}}
.search{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 20px;border-radius:20px;background:#0f1319;border:2px solid var(--orange);font-size:21px;font-weight:700;box-shadow:0 0 50px rgba(255,90,31,.25)}
.search span{overflow:hidden;white-space:nowrap;width:9.4ch;animation:type 6s steps(9) infinite}
@keyframes type{0%{width:0}35%,100%{width:9.4ch}}
.search i{width:3px;height:24px;background:var(--orange);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.res{display:flex;gap:14px;align-items:center;margin-top:10px;padding:13px 16px;border-radius:18px;background:#0f1319;border:1px solid var(--border);font-size:14px;color:var(--text2)}
.res b{display:block;color:var(--ice);font-size:17px}
.res u{width:34px;height:34px;border-radius:50%;flex:none}
.stops{list-style:none;margin:24px 0 0 10px;border-left:3px solid var(--border)}
.stops li{position:relative;padding:0 0 15px 26px;font-size:15.5px;display:flex;justify-content:space-between;gap:10px;color:var(--text2)}
.stops li::before{content:"";position:absolute;left:-10px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--ice)}
.stops li.past::before{background:var(--ice)}
.stops li.now{color:var(--orange);font-weight:700}
.stops li.now::before{border-color:var(--orange);background:var(--orange);animation:pulse 2s infinite}
.ticket{margin-top:24px;display:grid;grid-template-columns:1fr 74px;border-radius:20px;background:linear-gradient(135deg,#fff,#dfe3e9);color:#0E1116;padding:18px 20px;transform:rotate(-4deg);box-shadow:0 30px 50px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.tile:hover .ticket{transform:rotate(2deg) scale(1.04)}
.ticket small{font-weight:700;letter-spacing:.18em;font-size:11px;color:#4B5563}
.ticket b{display:block;font-size:29px;letter-spacing:-.04em;line-height:1.1}
.ticket span{font-size:13px;font-weight:700}
.ticket i{border-left:3px dashed #9AA3AF;background:repeating-linear-gradient(0deg,#0E1116 0 4px,transparent 4px 7px,#0E1116 7px 9px,transparent 9px 15px);background-clip:content-box;padding-left:16px}
.island{margin:26px auto 0;width:min(100%,360px);padding:13px 20px;border-radius:99px;background:#000;border:1px solid #2a2a2a;display:flex;align-items:center;gap:14px;font-size:15px;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.island u{width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}
.island s{position:relative;flex:1;height:5px;border-radius:9px;background:#333;overflow:hidden}
.island s::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(.6);animation:fill 6s ease-in-out infinite}
@keyframes fill{0%{transform:scaleX(.1)}70%,100%{transform:scaleX(.6)}}
/* capas */
.layers{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}
.steps{list-style:none;margin-top:26px;display:grid;gap:20px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.steps .n{grid-row:span 2;font-weight:700;color:var(--orange);letter-spacing:.18em;font-size:15px;padding-top:7px}
.steps h3{font-size:27px}
.steps p{color:var(--text2);font-size:16.5px}
.stackbox{position:relative;width:600px;height:620px;margin:0 auto}
.stack{position:absolute;left:150px;top:250px;width:340px;height:430px;transform:rotateX(58deg) rotateZ(-34deg)}
.layer{position:absolute;inset:0;border-radius:44px;transform:translateZ(calc(var(--z)*var(--open,1)*1px));will-change:transform}
.layer img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;border:2px solid rgba(255,255,255,.2)}
.layer .ls{position:absolute;inset:16px;border-radius:inherit;background:#000;filter:blur(34px);opacity:.7;transform:translateZ(-90px)}
/* avisos */
.alerts{text-align:center}
.rigbox{position:relative;width:640px;height:500px;margin:64px auto 0}
.rig{position:absolute;left:40px;top:30px;width:560px;height:420px;transform:rotateX(20deg) rotateY(-28deg) rotateZ(6deg)}
.rig .acard{font-size:21px;opacity:0;transition:opacity .6s,translate .9s cubic-bezier(.2,.9,.3,1.2);translate:260px -120px}
.rig.in .acard{opacity:1;translate:0 0}
.rig .acard:nth-last-child(2){transition-delay:.18s}.rig .acard:nth-last-child(3){transition-delay:.36s}
.note{color:var(--label);font-size:14px;max-width:42em;margin:34px auto 0}
/* plus */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.plan{border-radius:28px;border:1px solid var(--border);background:var(--surface);padding:32px}
.plan.plus{background:linear-gradient(160deg,#1c2640,#161B22 60%);border-color:rgba(255,90,31,.5);box-shadow:0 30px 90px -30px rgba(53,86,196,.5)}
.plan h3{font-size:34px;display:flex;align-items:center;gap:12px}
.plan .price{color:var(--text2);margin:6px 0 20px;font-size:16.5px}
.plan ul{list-style:none;display:grid;gap:11px;font-size:16.5px}
.plan li{display:flex;gap:12px}
.plan li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--orange) url("data:image/svg+xml;utf8,") center/14px no-repeat}
/* prensa */
.papers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.paper{display:block;padding:30px 34px 34px;border-radius:12px;background:linear-gradient(135deg,#fbf8f1,#e6e0d3);color:#14171c;font-family:Georgia,"Times New Roman",serif;box-shadow:0 14px 0 -6px #cfc8b8,0 40px 70px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .7s}
.paper.rv{transform:translateY(60px) rotate(-8deg)}
.paper.rv.in:nth-child(1){transform:rotate(-1.4deg)}.paper.rv.in:nth-child(2){transform:rotate(1.2deg) translateY(10px)}
.paper.rv.in:hover{transform:rotate(0) translateY(-8px)}
.paper .m{font-size:31px;font-weight:700;text-align:center;padding-bottom:10px;border-bottom:4px double #14171c}
.paper .d{font-family:"Space Grotesk";font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6b665c;margin:10px 0;display:flex;justify-content:space-between}
.paper .hl{font-size:26px;font-weight:700;line-height:1.16}
.paper .hl u{text-decoration:none;background:linear-gradient(transparent 58%,rgba(255,90,31,.55) 58%)}
.paper .go{font-family:"Space Grotesk";font-weight:700;font-size:15px;margin-top:16px;display:block}
/* preguntas */
.faq{max-width:820px;margin:26px auto 0;display:grid;gap:10px}
.faq details{border-radius:20px;border:1px solid var(--border);background:var(--surface);padding:18px 24px}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:26px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--text2);margin-top:10px}
/* cierre */
.end .wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.end h2{font-size:clamp(40px,6vw,84px)}
.end .leadcard{margin:0 auto}
.iconbox{position:relative;width:340px;height:230px;margin:0 0 6px -40px}
.block{position:absolute;left:60px;top:-10px;width:220px;height:220px;border-radius:50px;transform:rotateX(57deg) rotateZ(38deg)}
.block .top{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#232b36,#12161c);border:2px solid rgba(255,255,255,.14)}
.block svg{position:absolute;inset:0;width:100%;height:100%}
.block .ball{position:absolute;left:50%;top:52%;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffd0b8 0%,#ff7a45 22%,#FF5A1F 48%,#b8330a 100%);transform:translateZ(48px) rotateZ(-38deg) rotateX(-57deg);box-shadow:0 0 16px rgba(255,90,31,.6)}
.block .halo{position:absolute;left:50%;top:52%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.75),transparent 65%);transform:translateZ(15px);animation:halo 2.6s ease-in-out infinite}
@keyframes halo{50%{opacity:.7;scale:1.12}}
footer{border-top:1px solid var(--border);padding:26px 0 90px;color:var(--label);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.sticky{display:none}
@media (max-width:980px){
.nav-links{display:none}
.hero{padding-top:112px}
.rigbox{margin-top:30px}
.hero-grid,.layers,.plans,.papers,.end .wrap{grid-template-columns:1fr}
.hero-grid>*,.layers>*,.end .wrap>*{min-width:0}
.stage{zoom:.56}.stackbox{zoom:.56}.rigbox{zoom:.52}.iconbox{zoom:.8;margin-left:-30px}
/* Safari iPhone pintaba el marco negro sobre la captura: aquí la captura es la propia cara */
.stage .phone .face{display:none}
.stage .phone img{transform:none;background:#04060a;box-shadow:0 0 0 calc(var(--w)*.026) #04060a,0 0 0 calc(var(--w)*.026 + 2px) rgba(255,255,255,.22)}
.fields{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento{grid-template-columns:1fr}
.s4,.s3,.s2{grid-column:auto}
.tall{min-height:0}
.tile.s4.tall{min-height:600px}
.tile.s4 .shot{top:210px!important}
.tile.s3:has(.shot){min-height:500px!important}.tile.s3 .shot{top:190px!important}
.tile.s3:not(:has(.shot)){min-height:0!important}
.note{margin-top:44px}
.sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sticky.on{transform:none}
.sticky .btn{flex:1;box-shadow:0 10px 40px rgba(0,0,0,.6),0 10px 40px rgba(255,90,31,.4)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.rig .acard{opacity:1;transform:none;translate:0 0}.hero h1 span>i{transform:none}}
/* accesibilidad, apoyo y aviso de gracias */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--orange);color:#0E1116;padding:10px 16px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}
.btn-g{border:2px solid var(--border);background:rgba(22,27,34,.6)}
.btn-g:hover{border-color:var(--label)}
.support{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;padding:30px 34px;border-radius:28px;border:1px solid var(--border);background:var(--surface)}
.support h3{font-size:30px;margin-bottom:8px}
.support p{color:var(--text2);max-width:38em}
.support small{display:block;color:var(--label);margin-top:6px}
.toast{position:fixed;left:50%;top:84px;z-index:80;translate:-50% 0;max-width:calc(100% - 32px);padding:16px 24px;border-radius:20px;background:var(--orange);color:#0E1116;font-weight:700;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:pop .6s cubic-bezier(.3,1.5,.5,1)}
/* foco visible con teclado, áreas táctiles del pie */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,.seg input:focus-visible+*{outline:2px solid var(--orange);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline:0}
.chk input:focus-visible,.check input:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.seg label:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px;border-radius:99px}
footer nav a{display:inline-block;padding:10px 0}
.chk a,.check a{padding:4px 0}
/* ---------- pulido de detalles: transiciones y estados (hover, pulsado, desactivado) ---------- */
::selection{background:rgba(255,90,31,.4);color:#fff}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.btn{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background-color .28s,border-color .28s,color .28s,filter .28s}
.btn-o:hover,.btn-primary:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none;filter:none}
.btn-g:hover{border-color:var(--label);background:rgba(36,43,54,.8);transform:translateY(-2px)}
.btn-g:active{transform:scale(.97)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover::after,.nav[data-p="sobre"] a[href="/sobre"]::after,.nav[data-p="prensa"] a[href="/prensa"]::after,.nav[data-p="contacto"] a[href="/contacto"]::after{transform:scaleX(1)}
.nav[data-p="sobre"] a[href="/sobre"],.nav[data-p="prensa"] a[href="/prensa"],.nav[data-p="contacto"] a[href="/contacto"]{color:var(--ice)}
.logo{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.logo:hover{transform:scale(1.04)}
.logo span{transition:color .25s}
.logo:hover span{color:var(--text2)}
footer a{transition:color .25s}
footer nav a{position:relative}
footer nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
footer nav a:hover{color:var(--ice)}
footer nav a:hover::after{transform:scaleX(1)}
.faq details{transition:border-color .3s,background-color .3s}
.faq details:hover{border-color:#3a4350}
.faq details[open]{background:#1a2029}
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--orange)}
.faq summary:hover::after{transform:scale(1.2)}
.faq details[open] summary:hover::after{transform:rotate(45deg) scale(1.2)}
.seg label:hover{color:var(--ice)}
.fields input:hover{border-color:#3a4350}
.chk input:hover{border-color:var(--label)}
.chk a{transition:color .25s,text-decoration-color .25s}
.chk a:hover{color:var(--orange)}
.storerow a,.badge{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.storerow a:hover,.badge:hover{transform:translateY(-3px);filter:brightness(1.1)}
.storerow a:active,.badge:active{transform:scale(.97)}
.support{transition:border-color .3s}
.support:hover{border-color:#3a4350}
/* fundido suave al navegar entre páginas (navegadores que lo soportan) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
.fields input:focus,.fields input:focus:hover{border-color:var(--orange)}
/* cifras: el tamaño sigue al ancho de la tarjeta, así "+200.000" siempre cabe con margen */
.stat{container-type:inline-size}
.stat b{font-size:clamp(20px,18cqw,56px)}
@media (max-width:980px){.stat{padding:20px 20px}}
/* título del plan Plus: wordmark de marca + "Plus" naranja con brillo */
.plan h3 .wm{color:var(--label)}
.plan h3 .wm b{color:var(--ice)}
.plan h3{gap:.28em}
.plus-shine{color:var(--orange);background:linear-gradient(100deg,#FF5A1F 0%,#FF5A1F 38%,#FFD2B8 50%,#FF5A1F 62%,#FF5A1F 100%);background-size:250% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:plusshine 3.2s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,90,31,.45))}
@keyframes plusshine{0%,30%{background-position:120% 0}70%,100%{background-position:-20% 0}}
/* escena de avisos bajo el formulario */
.rvl{--c:#34D399;position:relative;margin-top:16px;max-width:560px;padding:16px 18px 14px;border-radius:26px;background:linear-gradient(160deg,rgba(28,35,52,.62),rgba(20,25,33,.62));border:1px solid rgba(140,165,230,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rvl-head{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--label)}
.rvl-head b{color:var(--ice)}
.live-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(45,212,164,.7);animation:livedot 2s infinite}
@keyframes livedot{70%{box-shadow:0 0 0 10px rgba(45,212,164,0)}100%{box-shadow:0 0 0 0 rgba(45,212,164,0)}}
.rvl svg{width:100%;height:auto;display:block;margin:4px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.rvl .rail-adj{fill:none;stroke:#2a313b;stroke-width:4;stroke-linecap:round}
.rvl .ties{fill:none;stroke:#222a35;stroke-width:34;stroke-dasharray:3 25}
.rvl .rail-out{fill:none;stroke:var(--ice);stroke-width:21;stroke-linecap:round}
.rvl .rail-in{fill:none;stroke:var(--bg);stroke-width:7.5;stroke-linecap:round}
.rvl .rail-glow{fill:none;stroke:transparent;stroke-width:7.5;stroke-linecap:round}
.rvl .stn rect{fill:var(--blue);stroke:var(--bg);stroke-width:3}
.rvl .ring{fill:none;stroke:var(--blue);stroke-width:2.5}
.rvl .tr{stroke:var(--bg);stroke-width:2.5}
.rvl .tr-me{fill:var(--orange);filter:drop-shadow(0 0 6px rgba(255,90,31,.9))}
.rvl .tr-b{fill:#9AA3AF}.rvl .tr-x{fill:#B07CFF}
.rvl-chip{display:flex;align-items:center;gap:12px;height:68px;padding:10px 16px;border-radius:18px;background:rgba(11,14,18,.72);border:1.5px solid var(--c);box-shadow:0 0 34px -12px var(--c);transition:border-color .35s,box-shadow .35s}
.rvl[data-s=y]{--c:#FFC247}.rvl[data-s=o]{--c:#FF8F3C}.rvl[data-s=r]{--c:#FF4D4D}.rvl[data-s=v]{--c:#B07CFF}.rvl[data-s=b]{--c:#4DA3FF}.rvl[data-s=n]{--c:#34D399}
.rvl-dot{width:14px;height:14px;flex:none;border-radius:50%;background:var(--c);color:var(--c);box-shadow:0 0 0 0 currentColor;animation:rvlping 2s infinite;transition:background .35s}
@keyframes rvlping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rvl-txt{display:grid;line-height:1.25;min-width:0}
.rvl-txt b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ice);transition:opacity .25s}
.rvl-txt small{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label);transition:opacity .25s}
.rvl-tag{margin-left:auto;flex:none;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:99px;color:#0E1116;background:var(--c);transition:background .35s}
.rvl-note{margin-top:12px;font-size:14px;color:var(--text2)}
.rvl-note a{transition:color .25s}
.rvl-note a:hover{color:var(--orange)}
.rvl-note b{color:var(--ice);transition:color .25s}
.rvl-note a:hover b{color:var(--orange)}
@media (max-width:640px){.rvl{padding:14px 14px 12px}.rvl-txt b{white-space:normal;font-size:15px}.rvl-txt small{white-space:normal;font-size:13px}.rvl-chip{height:96px}}
/* insignia de la App Store como botón: marco naranja y etiqueta "Descargar" pegada debajo */
.storebtn{display:inline-flex;flex-direction:column;align-items:stretch;flex:none;overflow:hidden;border:2px solid var(--orange);border-radius:15px;background:rgba(255,90,31,.08);box-shadow:0 10px 30px -12px rgba(255,90,31,.5);text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s}
.storebtn img{display:block;width:auto;max-width:none;height:46px;margin:6px 6px 5px}
.storebtn span{display:block;text-align:center;background:var(--orange);color:#0E1116!important;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;padding:7px 0 6px}
.storebtn:hover{transform:translateY(-3px);box-shadow:0 16px 36px -10px rgba(255,90,31,.7);filter:brightness(1.06)}
.storebtn:active{transform:scale(.97)}
.storerow .storebtn img{height:46px}
.storerow>span{color:var(--label)}
.storerow .storebtn{display:inline-flex}
/* etiqueta y gancho del formulario */
.live-eyebrow{margin-bottom:6px;color:var(--orange);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.live-eyebrow i{display:inline-block;width:8px;height:8px;margin-right:9px;vertical-align:1px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(45,212,164,.7);animation:livedot 2s infinite}
.leadcard .sub b{color:var(--ice)}
.leadcard .sub .join{display:block;margin-top:6px;font-weight:700;font-size:15px}
/* prueba social en píldora con borde sólido */
.proof{display:inline-flex;max-width:100%;padding:7px 16px 7px 9px;margin-bottom:14px;border-radius:99px;border:1px solid var(--border);background:rgba(11,14,18,.72);gap:10px}
.proof .faces i{width:24px;height:24px;margin-left:-7px}
.proof .faces i:first-child{margin-left:0}
.proof{flex-wrap:nowrap}
.proof .faces{flex:none}
.proof>span:last-child{min-width:0;line-height:1.3}
@media (max-width:480px){.proof{font-size:13px;padding-right:14px}.proof .faces i{width:22px;height:22px}}
/* destello de la tarjeta del formulario al llegar desde un botón «Apuntarme» */
.leadcard.nudge{animation:nudge 1.3s cubic-bezier(.2,.8,.2,1)}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(255,90,31,.75),0 30px 80px -30px rgba(53,86,196,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,31,0),0 30px 80px -30px rgba(53,86,196,.55)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0),0 30px 80px -30px rgba(53,86,196,.55)}}
#formulario{scroll-margin-top:96px}
/* Portada en escritorio: el teléfono se queda arriba, junto al formulario, y acompaña al hacer scroll (antes iba centrado en una columna muy alta y quedaba cortado, con huecos arriba y abajo) */
@media (min-width:981px){
.hero-grid{align-items:start}
.hero-grid>.scene{position:sticky;top:92px}
}
/* Textos de la tarjeta del formulario: siempre alineados al borde izquierdo del contenido y nunca por fuera de la tarjeta */
.leadcard .live-eyebrow,.leadcard h3,.leadcard .sub{text-align:left;margin-inline:0}
.leadcard .swap>[data-only]{min-width:0;max-width:100%;overflow-wrap:anywhere}
.leadcard .sub .join{display:block;margin:8px 0 0;padding:0;text-align:left;text-wrap:balance}
/* píldora de prueba social: el texto visible siempre centrado con los círculos, aunque la otra variante (Android/iPhone) ocupe más líneas */
.proof>.swap{align-items:center}
.proof>.swap>[data-only]{align-self:center}
.proof{align-items:center}
/* Cierre: sin parpadeo del fondo. El resplandor grande ya no usa filter:blur (se repintaba al animarse el bloque 3D de al lado),
usa un degradado suave de muchos tramos, lleva un grano casi invisible que rompe las bandas concéntricas (lo que "titilaba") y las capas se fijan en la GPU */
.end .glow{filter:none;background:radial-gradient(closest-side,rgba(53,86,196,1) 0%,rgba(53,86,196,.78) 14%,rgba(53,86,196,.55) 30%,rgba(53,86,196,.34) 46%,rgba(53,86,196,.18) 62%,rgba(53,86,196,.08) 78%,rgba(53,86,196,.025) 90%,rgba(53,86,196,0) 100%);transform:translateZ(0);will-change:transform}
.end::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.end .wrap{position:relative;z-index:1}
.end .scene{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.end .float{will-change:translate}
@media (prefers-reduced-motion:reduce){.end .float,.end .halo{animation:none}}