/* =====================================================================
   Webs 997 · landing de venta directa (v2).
   Mismo sistema que la página activa de webs (theaibusiness.com/en/webs): negro #0b0b0f / #060609, blanco #fafafa,
   degradado #fa4d4d → #5a70fa, Inter 500/600 con tracking negativo, pastilla blanca y tarjetas claras para formularios.
   Sin contadores 01/02 ni etiquetas entre paréntesis: las etiquetas van en Inter, en frase normal.
   ===================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/media/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/media/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#0b0b0f; --bg2:#060609; --fg:#fafafa;
  --red:#fa4d4d; --blue:#5a70fa;
  --grad:linear-gradient(90deg,#fa4d4d,#5a70fa);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav:clamp(3.5rem,6vh,4.75rem);
  --pad:clamp(1rem,4vw,4rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg2);color:var(--fg);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.orb-cont{width:100%;max-width:90rem;margin:0 auto;padding:0 var(--pad)}
.grad{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}

/* ---------- etiqueta de sección: texto en Inter con el filete del degradado ---------- */
.eti{display:flex;align-items:center;gap:1.1rem;margin:0 0 1.6rem;font-size:.95rem;font-weight:500;letter-spacing:-.005em;color:#fafafabd}
.eti i{flex:0 1 4.5rem;height:1px;background:var(--grad);transform-origin:0}

/* ---------- pastilla blanca ---------- */
.orb-pastilla{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.85rem;padding:.42rem .42rem .42rem 1.35rem;border:0;border-radius:999px;background:#fff;color:#0b0b0f;font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .45s}
.orb-pastilla::before{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:0;transition:transform .55s var(--ease)}
.orb-pastilla>*{position:relative;z-index:1}
.orb-pastilla-i{display:grid;place-items:center;width:2.05rem;height:2.05rem;border-radius:50%;background:#0b0b0f;color:#fff;font-style:normal;transition:transform .5s var(--ease)}
.orb-pastilla-i svg{width:.8rem;height:.8rem}
@media (hover:hover){
  .orb-pastilla:hover{color:#fff}
  .orb-pastilla:hover::before{transform:scaleX(1)}
  .orb-pastilla:hover .orb-pastilla-i{transform:rotate(45deg)}
}

/* ================= NAV ================= */
.nav{position:fixed;inset:0 0 auto;height:var(--nav);z-index:90;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(1rem,2.6vw,2.6rem);transition:background .4s}
.nav.scrolled{background:linear-gradient(#060609f2,#06060900)}
.nav-marca{justify-self:start;display:block;width:3.35rem}
.nav-marca img{width:100%;height:auto}
.nav-cta{justify-self:center;font-size:.675rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;position:relative}
.nav-cta::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:100%;transition:transform .45s var(--ease)}
@media (hover:hover){.nav-cta:hover::after{transform:scaleX(1);transform-origin:0}}
.nav-menu{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.55rem;background:none;border:0;padding:.5rem 0;cursor:pointer;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase}
.nav-dots{display:grid;grid-template-columns:repeat(2,3px);gap:3px}
.nav-dots i{width:3px;height:3px;border-radius:50%;background:#fff}

.menu{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav) + 2rem) var(--pad) 2rem;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.menu.on{opacity:1;visibility:visible}
.menu::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.menu-close{position:absolute;top:0;right:clamp(1rem,2.6vw,2.6rem);height:var(--nav);background:none;border:0;cursor:pointer;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase}
.menu ol{list-style:none;margin:0;padding:0}
.menu li{border-bottom:1px solid #fafafa1f}
.menu li a{display:block;padding:clamp(.8rem,2.2vh,1.4rem) 0 clamp(.9rem,2.4vh,1.5rem);font-size:clamp(2rem,6vw,4.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-decoration:none;transition:transform .5s var(--ease)}
@media (hover:hover){.menu li a:hover{transform:translateX(.6rem)}}
.menu-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.75rem;letter-spacing:.06em;opacity:.65}
.menu-pie a{text-decoration:none}

/* ================= HERO =================
   El personaje (vídeo: encendido y fotogramas que siguen el ratón) en el centro,
   el mensaje a la izquierda y los datos de la compra a la derecha. Nada pisa el texto. */
.h5{position:relative;z-index:0;isolation:isolate;min-height:100vh;min-height:min(100svh,max(44rem,75vw));background:var(--bg2);overflow:hidden}
.h5-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.h5-glow{position:absolute;inset:0;background:
  radial-gradient(36% 52% at 37% 46%,#fa4d4d38,#0000 70%),radial-gradient(36% 52% at 63% 46%,#5a70fa40,#0000 70%),
  radial-gradient(70% 60% at 50% 110%,#000 30%,#0000 70%)}
.h5-fig{position:absolute;left:50%;bottom:0;height:min(90svh,64rem,82vw);aspect-ratio:1;translate:-50% 0;
  -webkit-mask:linear-gradient(90deg,#0000,#000 24%,#000 76%,#0000),linear-gradient(#0000,#000 20%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,#0000,#000 24%,#000 76%,#0000) intersect,linear-gradient(#0000,#000 20%)}
.h5-fig img,.h5-fig video,.h5-fig canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h5-intro{opacity:0;transition:opacity .4s linear}
.h5.rodando .h5-intro{opacity:1}
.h5-mira{opacity:0}
.h5.mira .h5-mira{opacity:1}
.h5.mira .h5-intro{opacity:0;transition:none}
.h5-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;background: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");animation:grano 1.2s steps(6) infinite}
@keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.h5-floor{position:absolute;left:0;right:0;bottom:0;height:22svh;background:linear-gradient(#06060900,#060609 85%)}

.h5-grid{position:relative;z-index:2;min-height:100vh;min-height:min(100svh,max(44rem,75vw));display:grid;grid-template-columns:minmax(0,1fr) minmax(19.5rem,24rem);gap:2rem;padding:calc(var(--nav) + clamp(1rem,3vh,2.25rem)) var(--pad) clamp(3.5rem,8vh,4.75rem)}
.h5-copy{display:flex;flex-direction:column;min-width:0;max-width:min(36rem,40vw)}
.h5-main{margin-top:auto}
.h5-eti{display:flex;align-items:center;gap:1rem;margin:0;font-size:.95rem;font-weight:500;color:#fafafabd}
.h5-eti i{width:4.5rem;height:1px;background:var(--grad)}
.h5-donde{margin:.6rem 0 0;font-size:.85rem;color:#fafafa80}
.h5-h1{margin:0;font-size:clamp(3rem,min(6.3vw,11vh),7rem);font-weight:600;line-height:.95;letter-spacing:-.052em}
.h5-h1 .w{display:block;overflow:hidden;padding:.1em .12em .26em .1em;margin:-.1em -.12em -.26em -.1em}
.h5-h1 .w>span{display:inline-block}
.h5-h1 em{font-style:normal;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.h5-sub{max-width:31ch;margin:clamp(1rem,2.4vh,1.5rem) 0 0;font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.5;letter-spacing:-.01em;color:#fafafad1}
.h5-datos{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:clamp(1.2rem,3vh,1.9rem) 0 0;padding:0;list-style:none}
.h5-datos li{display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:0 1.35rem;border-left:1px solid #fafafa21}
.h5-datos li:first-child{padding-left:0;border-left:0}
.h5-datos b{font-size:clamp(1.5rem,2.2vw,2.15rem);font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.h5-datos li>span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fafafa8c}
.h5-prueba{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.2rem,3vh,2rem);text-decoration:none;width:max-content;max-width:100%}
.h5-thumbs{display:flex;flex:none}
.h5-thumbs img{width:3.4rem;height:2.25rem;object-fit:cover;object-position:top;border-radius:.35rem;border:1.5px solid #060609;margin-left:-.65rem;box-shadow:0 .4rem 1rem #0008;transition:transform .45s var(--ease)}
.h5-thumbs img:first-child{margin-left:0}
.h5-prueba span{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fafafac7;border-bottom:1px solid #fafafa40;padding-bottom:.2rem;transition:border-color .3s}
@media (hover:hover){.h5-prueba:hover img{transform:translateY(-3px)}.h5-prueba:hover img:nth-child(2){transform:translateY(-5px)}.h5-prueba:hover span{border-color:#fafafa}}
.h5-form{align-self:center;position:relative}
.h5-form .fm-wrap{box-shadow:0 2rem 5rem -1.5rem #000,0 0 0 1px #ffffff14}
.h5-pasos{position:absolute;z-index:2;left:50%;bottom:clamp(1.1rem,3vh,2rem);translate:-50% 0;display:flex;align-items:center;gap:.8rem;margin:0;padding:0;list-style:none;white-space:nowrap;font-size:.8rem;color:#fafafab3}
.h5-pasos li{display:flex;align-items:center;gap:.8rem}
.h5-pasos li+li::before{content:"";width:1.4rem;height:1px;background:var(--grad)}

@media (min-width:901px) and (max-width:1180px){
  .h5-fig{left:calc(50% - (1180px - 100vw) * .4)}
  .h5-copy{max-width:46vw}
  .h5-datos{flex-wrap:nowrap}
  .h5-datos li{padding:0 .9rem}
  .h5-datos b{font-size:1.45rem}
  .h5-datos li>span{font-size:.56rem;letter-spacing:.1em}
}
@media (max-width:900px){
  .h5{min-height:0}
  .h5-stage{position:relative;height:min(56svh,30rem);inset:auto;-webkit-mask:linear-gradient(#000 70%,#0000);mask:linear-gradient(#000 70%,#0000)}
  .h5-fig{height:118%;bottom:-6%}
  .h5-grid{min-height:0;display:flex;flex-direction:column;margin-top:-4.25rem;padding:0 var(--pad) 2.5rem;gap:0}
  .h5-copy{display:contents}
  .h5-top{display:none}
  .h5-main{order:1;margin:0}
  .h5-form{order:2;margin-top:1.5rem}
  .h5-extra{order:3;margin-top:1.75rem}
  .h5-h1{font-size:clamp(2.6rem,12vw,4.6rem)}
  .h5-sub{max-width:none;margin-top:.9rem}
  .h5-datos{margin-top:0;flex-wrap:nowrap}
  .h5-datos li{padding:0 .8rem;min-width:0}
  .h5-datos b{font-size:1.45rem}
  .h5-datos li>span{font-size:.56rem;letter-spacing:.1em}
  .h5-pasos{display:none}
}

/* ================= FORMULARIO (tarjeta clara) ================= */
.fm-wrap{position:relative}
.fm-luz{background:#fafafa;color:#0b0b0f;border-radius:.875rem;padding:clamp(1.25rem,1.8vw,1.75rem);box-shadow:0 1.75rem 4rem -1.25rem #000000c2}
.fm-luz::before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.fm-k{display:flex;align-items:center;gap:.9rem;margin:0;font-size:.85rem;font-weight:500;color:#0b0b0fa8}
.fm-k i{flex:1;max-width:4rem;height:1px;background:var(--grad)}
.fm-t{margin:.55rem 0 1.1rem;font-size:clamp(1.4rem,1.75vw,1.8rem);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.fm{display:flex;flex-direction:column;gap:.75rem;margin:0}
.fm-row{display:grid;grid-template-columns:1fr;gap:.75rem}
.fld{display:block}
.fld>span{display:block;margin:0 0 .35rem;font-size:.8rem;font-weight:500;color:#0b0b0fbd}
.fld>span small{font-size:inherit;font-weight:400;color:#0b0b0f75}
.fld input,.fld select{width:100%;height:2.9rem;padding:0 .95rem;background:#eef0f5;border:1px solid #0b0b0f0d;border-radius:.55rem;outline:0;color:#0b0b0f;font:inherit;font-size:1rem;transition:border-color .25s,background-color .25s,box-shadow .25s}
.fld select{padding-right:2.4rem;background:#eef0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b0b0f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .95rem center/.7rem;-webkit-appearance:none;appearance:none;cursor:pointer}
.fld select:invalid{color:#0b0b0f5c}
.fld select option{color:#0b0b0f}
.fld input::placeholder{color:#0b0b0f5c}
@media (hover:hover){.fld input:hover,.fld select:hover{border-color:#0b0b0f2e}}
.fld input:focus,.fld select:focus{background-color:#fff;border-color:#5a70fa;box-shadow:0 0 0 3px #5a70fa2e}
.fld input:-webkit-autofill{-webkit-text-fill-color:#0b0b0f;-webkit-box-shadow:0 0 0 40px #eef0f5 inset}
.fld input[aria-invalid=true],.fld select[aria-invalid=true]{border-color:#fa4d4d;box-shadow:0 0 0 3px #fa4d4d24}
.fm-aviso{margin:0;padding:.75rem .9rem;border-radius:.55rem;background:#5a70fa14;color:#27306e;font-size:.8rem;line-height:1.45}
.fm-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.74rem;line-height:1.4;color:#0b0b0fa8;cursor:pointer}
.fm-check input{flex:none;width:1rem;height:1rem;margin:.08rem 0 0;accent-color:#5a70fa;cursor:pointer}
.fm-check a{color:inherit}
.fm-check.bad{color:#d93636}
.fm-go{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;margin-top:.3rem;padding:.42rem .42rem .42rem 1.4rem;border:0;border-radius:999px;background:#0b0b0f;color:#fafafa;font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),opacity .3s}
.fm-go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateX(-101%);transition:transform .55s var(--ease)}
.fm-go-i{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--grad);color:#fff;font-style:normal;transition:transform .5s var(--ease),background .4s}
.fm-go-i svg{width:.85rem;height:.85rem}
@media (hover:hover){.fm-go:not(:disabled):hover{transform:translateY(-1px)}.fm-go:not(:disabled):hover::before{transform:none}.fm-go:not(:disabled):hover .fm-go-i{background:#0b0b0f;transform:rotate(-45deg)}}
.fm-go:focus-visible{outline:2px solid #5a70fa;outline-offset:3px}
.fm-go:disabled{cursor:default;opacity:.45}
.fm-note{margin:0;font-size:.8rem;line-height:1.45;color:#0b0b0f9e;text-align:center}
.fm-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fm-err{margin:.2rem 0 0;font-size:.8rem;line-height:1.4;color:#d93636;text-align:center}
.fm-err:empty{display:none}
.fm-ok{display:none}
.fm-wrap.sent .fm,.fm-wrap.sent .fm-t{display:none}
.fm-wrap.sent .fm-ok{display:block}
.fm-ok p{margin:.7rem 0 1.25rem;font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:500;line-height:1.1;letter-spacing:-.03em}
.fm-ok small{display:block;margin:-.6rem 0 1.1rem;font-size:.85rem;line-height:1.45;color:#0b0b0fa0}

/* ================= SECCIONES ================= */
.s5{position:relative;z-index:1;background:var(--bg2);padding:clamp(5rem,13vh,9rem) 0}
.s5::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,#fafafa00,#fafafa1f 20%,#fafafa1f 80%,#fafafa00)}
.s5-h2{max-width:16ch;margin:0;font-size:clamp(2.3rem,5.4vw,5.4rem);font-weight:600;line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.s5-grad{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;padding-bottom:.08em}
.s5-p{max-width:38ch;margin:clamp(1.25rem,3vh,2rem) 0 0;font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;color:#fafafab8}

/* la idea */
.s5-mani-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.s5-cine{position:relative;margin:0;aspect-ratio:4/3;border-radius:1.25rem;overflow:hidden;background:#0b0b0f;box-shadow:0 3rem 7rem -2rem #000,0 0 0 1px #ffffff12}
.s5-cine img,.s5-cine video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s5-cine video{opacity:0;transition:opacity .6s}
.s5-cine video.on{opacity:1}
.s5-cine::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,#0000 55%,#060609a8)}

/* frase que se enciende al bajar */
.frase{padding:clamp(6rem,18vh,12rem) 0}
.frase-t{max-width:24ch;margin:0;font-size:clamp(2rem,4.6vw,4.4rem);font-weight:600;line-height:1.04;letter-spacing:-.045em}
.frase-t .fw{opacity:.16;transition:opacity .25s linear}
.frase-t .fw.on{opacity:1}
.frase-t em{font-style:normal}
.frase-t em .fw.on{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}

/* ================= CÓMO FUNCIONA: siete días contados al bajar =================
   La sección se queda fija mientras se recorre: a la izquierda el día y lo que pasa; a la derecha una ventana
   donde se ve el pedido, la llamada y la web construyéndose hasta publicarse. Todo dentro de la sección. */
.proc{padding-bottom:0;overflow-x:clip}
.proc-cab{padding-bottom:clamp(1rem,4vh,2rem)}
.proc-pista{position:relative;height:calc(var(--n,5) * 90svh + 100svh)}
.proc-fijo{position:sticky;top:0;height:100svh;max-width:90rem;margin:0 auto;padding:calc(var(--nav) + 1rem) var(--pad) clamp(1.5rem,4vh,2.5rem);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.proc-texto{min-width:0}
.proc-dias{position:relative;display:flex;margin:0 0 clamp(1.75rem,5vh,3rem);padding:0 0 .9rem;list-style:none}
.proc-dias::before,.proc-dias::after{content:"";position:absolute;left:0;bottom:0;height:2px;border-radius:2px}
.proc-dias::before{right:0;background:#fafafa1f}
.proc-dias::after{width:calc(var(--p,0) * 100%);background:var(--grad)}
.proc-dias li{flex:1 1 0;min-width:0}
.proc-dias button{display:block;width:100%;padding:0 .4rem 0 0;border:0;background:none;text-align:left;cursor:pointer;font-size:.82rem;font-weight:500;white-space:nowrap;color:#fafafa66;transition:color .35s}
.proc-dias li.ok button{color:#fafafab3}
.proc-dias li.on button{color:#fafafa}
.proc-pasos{display:grid}
.proc-paso{grid-area:1/1;opacity:0;transform:translateY(1.25rem);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}
.proc-paso.on{opacity:1;transform:none;pointer-events:auto}
.proc-paso .proc-cuando{max-width:none;margin:0;font-size:clamp(3rem,6vw,5.6rem);color:transparent;font-weight:600;line-height:1;letter-spacing:-.055em;padding-bottom:.08em}
.proc-paso h3{margin:clamp(.6rem,1.6vh,1rem) 0 0;font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:600;line-height:1.08;letter-spacing:-.035em}
.proc-paso p{max-width:36ch;margin:clamp(.7rem,1.8vh,1.1rem) 0 0;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.55;color:#fafafab8}
.proc-paso .proc-tu{margin-top:clamp(1rem,2.6vh,1.6rem);padding-top:clamp(.8rem,2vh,1.1rem);border-top:1px solid #fafafa1f;color:#fafafa99}
.proc-tu b{font-weight:600;color:#fafafa}

/* la escena en 3D: un escenario oscuro con perspectiva. Cada pieza es hija directa del escenario y gira con la misma
   cámara (la pone el JS): nada de 3D anidado, que Safari aplasta. Las piezas se colocan en un «mundo» de 80x50 cqw
   centrado y todas giran alrededor de su centro (transform-origin calculado desde --x/--y). */
.proc-escena{position:relative;min-width:0}
.e3{position:relative;aspect-ratio:6/5;max-height:calc(100svh - var(--nav) - 3rem);margin:0 auto;container-type:inline-size;perspective:var(--persp,1400px);perspective-origin:50% 42%}
.e3-luz{position:absolute;inset:-8% -10%;background:radial-gradient(42% 38% at 34% 46%,#fa4d4d2b,#0000 70%),radial-gradient(42% 38% at 66% 46%,#5a70fa33,#0000 70%);pointer-events:none}
.e3-suelo{position:absolute;left:8%;right:8%;bottom:6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,#000000d9,#0000);filter:blur(10px);opacity:.8;pointer-events:none}
.e3-p{--x:0cqw;--y:0cqw;position:absolute;left:calc(10cqw + var(--x));top:calc(47% - 25cqw + var(--y));width:var(--w,80cqw);height:var(--h,50cqw);
  transform-origin:calc(40cqw - var(--x)) calc(25cqw - var(--y));border-radius:1.2cqw;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.e3-p::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,#fff0 35%,#ffffff1f 50%,#fff0 65%) no-repeat;background-size:260% 100%;background-position:var(--brillo,50%) 0}

/* hoy: el pedido */
.e3-recibo{--x:22cqw;--y:3cqw;--w:36cqw;--h:42cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw;background:#fafafa;color:#16161c;text-align:center;border-radius:1.6cqw;box-shadow:0 3cqw 6cqw -1cqw #000c}
.e3-check{width:8.5cqw;height:8.5cqw;margin-bottom:.8cqw}
.e3-check circle{fill:none;stroke:#1f9d63;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:calc(151 * (1 - var(--c1,0)))}
.e3-check path{fill:none;stroke:#1f9d63;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:calc(36 * (1 - var(--c2,0)))}
.e3-recibo b{font-size:2.6cqw;font-weight:600;letter-spacing:-.02em}
.e3-recibo span{font-size:1.55cqw;color:#0b0b0f8c}
.e3-recibo strong{margin-top:.6cqw;font-size:5.8cqw;font-weight:600;letter-spacing:-.045em;line-height:1}
.e3-recibo em{margin-top:.5cqw;padding:.7cqw 1.6cqw;border-radius:99px;background:#1f9d6314;color:#16774b;font-size:1.45cqw;font-style:normal;font-weight:500}

/* día 1: la llamada y las notas */
.e3-llamada{--x:2cqw;--y:2cqw;--w:66cqw;--h:46cqw;background:#121218;box-shadow:0 3cqw 7cqw -1cqw #000d,inset 0 0 0 1px #ffffff14}
.e3-barra{display:flex;align-items:center;gap:.5cqw;height:3.2cqw;padding:0 1.4cqw;background:#1a1a21;border-bottom:1px solid #ffffff0f}
.e3-barra>i{width:.8cqw;height:.8cqw;border-radius:50%;background:#ffffff2e}
.e3-url{display:flex;align-items:center;gap:.5cqw;min-width:20cqw;margin:0 auto;padding:.35cqw 1.6cqw;border-radius:.6cqw;background:#ffffff0f;font-size:1.15cqw;color:#fafafa99;white-space:nowrap}
.e3-url svg{width:1cqw;height:1cqw;flex:none;color:#4ade80;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s var(--ease)}
.e3-url.seguro svg{opacity:1;transform:none}
.e3-url.seguro{color:#fafafa}
.e3-url b{font-weight:500}
.e3-url b::after{content:"";display:inline-block;width:1px;height:.9em;margin-left:1px;vertical-align:-.12em;background:currentColor;opacity:0}
.e3-url.escribe b::after{opacity:1;animation:cursor .9s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}
.e3-cams{position:absolute;left:1.8cqw;top:5cqw;bottom:1.8cqw;width:38cqw;display:grid;grid-template-rows:1fr 1fr;gap:1.2cqw}
.e3-cam{position:relative;margin:0;border-radius:1cqw;overflow:hidden;background:#1d1d25}
.e3-cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.e3-cam-tu{display:grid;place-items:center;box-shadow:inset 0 0 0 2px #4ade8099}
.e3-cam-tu b{display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;background:linear-gradient(140deg,#fa4d4d80,#5a70fa80);font-size:2cqw;font-weight:600}
.e3-cam figcaption,.e3-cam i{position:absolute;left:.9cqw;bottom:.9cqw;padding:.3cqw .8cqw;border-radius:.5cqw;background:#000a;font-size:1cqw;font-style:normal}
.e3-notas{--x:46cqw;--y:7cqw;--w:32cqw;--h:34cqw;display:flex;flex-direction:column;gap:1.8cqw;padding:2.6cqw 2.2cqw;background:#fafafa;color:#16161c;box-shadow:0 3cqw 6cqw -1cqw #000c}
.e3-notas-t{margin:0;font-size:1.25cqw;font-weight:600;color:#0b0b0f8c}
.e3-notas p:not(.e3-notas-t){position:relative;margin:0;padding-left:1.8cqw;min-height:2.6em;font-size:1.45cqw;line-height:1.35}
.e3-notas p:not(.e3-notas-t)::before{content:"";position:absolute;left:0;top:.45em;width:.8cqw;height:.8cqw;border-radius:50%;background:var(--grad)}

/* días 2 a 7: la web real por capas */
.e3-capa img,.e3-capa video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.e3-estructura{background:#f3f4f7;box-shadow:0 0 0 1.5px #ffffff59,0 2cqw 5cqw -1cqw #0009}
.e3-textos{background:linear-gradient(160deg,#ffffff4d,#ffffff1f);box-shadow:0 0 0 1.5px #ffffffcc,inset 0 0 3cqw #ffffff26,0 2cqw 5cqw -1.5cqw #0006}
.e3-diseno{background:#e9e4dc;box-shadow:0 3cqw 8cqw -1cqw #000d,0 0 0 1px #ffffff1a}
.e3-pantalla{position:absolute;left:0;right:0;top:3.2cqw;bottom:0}
.e3-diseno video,.e3-movil video{opacity:0;transition:opacity .6s}
.e3-diseno video.on,.e3-movil video.on{opacity:1}
.e3-movil{--x:63cqw;--y:3cqw;--w:21cqw;--h:43cqw;padding:.9cqw;border-radius:3.4cqw;background:#0b0b0f;box-shadow:0 0 0 .55cqw #2c2c33,0 0 0 .65cqw #ffffff26,0 3cqw 7cqw -1cqw #000e}
.e3-movil::before{content:"";position:absolute;z-index:2;left:50%;top:1.6cqw;width:5.5cqw;height:1.5cqw;margin-left:-2.75cqw;border-radius:99px;background:#000}
.e3-movil-pantalla{position:relative;width:100%;height:100%;border-radius:2.6cqw;overflow:hidden;background:#dfe7ea}
.e3-movil-pantalla img,.e3-movil-pantalla video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.e3-aviso{--x:44cqw;--y:-4cqw;--w:30cqw;--h:auto;display:flex;flex-direction:column;gap:.4cqw;padding:1.5cqw 1.8cqw 1.5cqw 5cqw;border-radius:1.4cqw;background:#ffffffef;color:#16161cb3;font-size:1.25cqw;line-height:1.35;box-shadow:0 2cqw 5cqw -1cqw #000c}
.e3-aviso::before{content:"";position:absolute;left:1.6cqw;top:1.6cqw;width:2.3cqw;height:2.3cqw;border-radius:.6cqw;background:var(--grad)}
.e3-aviso b{font-size:1.35cqw;color:#16161c}

@media (max-width:900px){
  .proc-pista{height:calc(var(--n,5) * 80svh + 100svh)}
  .proc-fijo{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:calc(var(--nav) + .25rem) var(--pad) 1rem}
  .proc-escena{order:-1;width:100%;flex:none}
  .e3{aspect-ratio:16/12;max-height:46svh}
  .proc-dias{margin-bottom:1rem;padding-bottom:.65rem}
  .proc-dias button{font-size:.66rem;padding-right:.2rem}
  .proc-paso .proc-cuando{font-size:clamp(2.2rem,10vw,3rem)}
  .proc-paso h3{font-size:1.3rem}
  .proc-paso p{font-size:.95rem;line-height:1.45;margin-top:.5rem}
  .proc-paso .proc-tu{margin-top:.75rem;padding-top:.6rem}
}
@media (max-width:900px) and (max-height:700px){
  .proc-paso p:not(.proc-tu){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ================= TRABAJOS: tarjetas que se apilan ================= */
.s5-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.s5-cab .s5-p{max-width:30ch;margin:0 0 .4rem;text-align:right}
.s5-casos{display:flex;flex-direction:column;gap:0}
.s5-caso{position:sticky;top:calc(var(--nav) + 1rem + var(--i) * .9rem);margin-bottom:clamp(2rem,7vh,5rem);border-radius:1.1rem;overflow:hidden;background:#0d0d12;box-shadow:0 -1.5rem 4rem -1rem #000,0 0 0 1px #ffffff14}
.s5-caso-n{position:absolute;z-index:2;left:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);display:flex;flex-direction:column;gap:.2rem;padding:.65rem 1rem .7rem;border-radius:.6rem;background:#060609c9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.s5-caso-n b{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.s5-caso-n span{font-size:.82rem;color:#fafafab3}
.s5-nav{display:flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 1rem;background:#15151b;border-bottom:1px solid #ffffff0f}
.s5-nav i{width:.6rem;height:.6rem;border-radius:50%;background:#ffffff26}
.s5-nav span{margin:0 auto;padding:.2rem 1.4rem;border-radius:.4rem;background:#ffffff0d;font-size:.7rem;letter-spacing:.02em;color:#fafafa80}
.s5-caso-v{position:relative;aspect-ratio:16/10;max-height:calc(100svh - var(--nav) - 9rem);width:100%}
.s5-caso-v img,.s5-caso-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.s5-caso-v video{opacity:0;transition:opacity .6s}
.s5-caso-v video.on{opacity:1}

/* ================= QUÉ INCLUYE + PRECIO ================= */
.s5-inc-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(19rem,.75fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.s5-lista{margin:clamp(2rem,5vh,3rem) 0 0;padding:0;list-style:none}
.s5-lista li{display:grid;grid-template-columns:2.75rem 1fr;gap:.9rem;padding:1.4rem 0;border-top:1px solid #ffffff17}
.s5-lista li:last-child{border-bottom:1px solid #ffffff17}
.s5-lista svg{width:1.5rem;height:1.5rem;margin-top:.2rem}
.s5-lista h3{margin:0;font-size:clamp(1.3rem,2vw,1.75rem);font-weight:600;letter-spacing:-.03em}
.s5-lista p{margin:.4rem 0 0;font-size:.98rem;line-height:1.55;color:#fafafa9e}
.s5-precio{position:sticky;top:calc(var(--nav) + 2rem);padding:clamp(1.5rem,2.4vw,2.25rem);border-radius:1.1rem;background:linear-gradient(160deg,#16161d,#0c0c11);box-shadow:0 2.5rem 6rem -2rem #000,0 0 0 1px #ffffff14;overflow:hidden}
.s5-precio::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.s5-precio::after{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;background:radial-gradient(closest-side,#5a70fa33,#0000);pointer-events:none}
.s5-precio-k{font-size:.9rem;font-weight:500;color:#fafafa99}
.s5-precio-n{margin:.6rem 0 0;font-size:clamp(3.5rem,6vw,5.5rem);font-weight:600;line-height:.9;letter-spacing:-.045em}
.s5-precio-t{margin:1rem 0 0;font-size:1rem;line-height:1.5;color:#fafafab8}
.s5-precio-x{position:relative;z-index:1;margin:1.25rem 0 1.5rem;padding:.9rem 1rem;border-radius:.65rem;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff14;font-size:.88rem;line-height:1.5;color:#fafafab8}
.s5-precio-x b{display:block;margin-bottom:.2rem;color:#fafafa;font-weight:600}
.s5-precio .fm-go{background:#fafafa;color:#0b0b0f}
.s5-precio-nota{margin:.85rem 0 0;font-size:.8rem;color:#fafafa80;text-align:center}

/* ================= PREGUNTAS ================= */
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-g>div:first-child{position:sticky;top:calc(var(--nav) + 2rem)}
.faq-l{margin:0;border-top:1px solid #ffffff17}
.faq-l details{border-bottom:1px solid #ffffff17}
.faq-l summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.45rem 0;cursor:pointer;list-style:none;font-size:clamp(1.12rem,1.6vw,1.45rem);font-weight:600;line-height:1.2;letter-spacing:-.025em}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary i{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;box-shadow:inset 0 0 0 1px #fafafa33;transition:transform .45s var(--ease),background .3s}
.faq-l summary i::before,.faq-l summary i::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;background:#fafafa;translate:-50% -50%}
.faq-l summary i::after{rotate:90deg;transition:rotate .45s var(--ease)}
.faq-l details[open] summary i{background:#fafafa14}
.faq-l details[open] summary i::after{rotate:0deg}
.faq-l details p{max-width:60ch;margin:0;padding:0 2.5rem 1.6rem 0;font-size:1rem;line-height:1.6;color:#fafafa9e}
.faq-mail{display:inline-block;margin-top:1.5rem;color:#fafafab3}

/* ================= CIERRE: empieza hoy (pasarela de pago) ================= */
.s5-fin{padding:clamp(5rem,12vh,8rem) 0 2rem;overflow:hidden}
.orb-cinta-w{display:block;overflow:hidden;white-space:nowrap;text-decoration:none}
.orb-cinta{display:inline-flex;will-change:transform;animation:cinta 34s linear infinite}
.orb-cinta span{padding-right:.28em;font-size:clamp(3rem,11vw,9rem);font-weight:500;line-height:1.05;letter-spacing:-.03em;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
@keyframes cinta{to{transform:translateX(-50%)}}
@media (hover:hover){.orb-cinta-w:hover .orb-cinta{animation-play-state:paused}}
.fin-cab{padding-top:clamp(2.5rem,6vh,4rem)}
.fin-cab .s5-p{max-width:44ch;margin-top:1rem}
.s5-fin-g{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(1rem,2.5vw,2.5rem);align-items:center;padding-top:clamp(1.5rem,4vh,2.5rem)}
.s5-fin-fig{position:relative;z-index:0;width:165%;margin:0 0 0 -62%;aspect-ratio:1;pointer-events:none;overflow:hidden;-webkit-mask:radial-gradient(closest-side,#000 62%,#0000 100%);mask:radial-gradient(closest-side,#000 62%,#0000 100%)}
.s5-fin-fig img,.s5-fin-fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fin-gar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:clamp(1.5rem,4vh,2.25rem) 0 0;padding:0;list-style:none}
.fin-gar li{display:grid;grid-template-columns:1.6rem 1fr;gap:.8rem;align-items:start}
.fin-gar svg{width:1.4rem;height:1.4rem;margin-top:.1rem}
.fin-gar b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.fin-gar span{display:block;margin-top:.15rem;font-size:.88rem;line-height:1.45;color:#fafafa8c}

/* la tarjeta de compra: oscura, como la del precio; pedido arriba, datos y pago lado a lado */
.co{position:relative;scroll-margin-top:calc(var(--nav) + 1rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:1.1rem;background:linear-gradient(160deg,#17171e,#0c0c11);color:var(--fg);overflow:hidden;box-shadow:0 3rem 7rem -2rem #000,0 0 0 1px #ffffff17}
.co::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:1}
.co::after{content:"";position:absolute;right:-20%;top:-60%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,#5a70fa24,#0000);pointer-events:none}
.co-ped{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 2rem;padding:clamp(1.25rem,2vw,1.75rem) clamp(1.25rem,2.2vw,2rem);border-bottom:1px solid #ffffff12}
.co-ped-k{font-size:.85rem;font-weight:500;color:#fafafa8c}
.co-ped-t{font-size:1.25rem;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.co-ped-d{font-size:.88rem;line-height:1.45;color:#fafafa99}
.co-ped-n{grid-column:2;grid-row:1/4;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:600;line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.co-pasos{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.9rem 0 0;padding:0;list-style:none;font-size:.82rem;font-weight:500;color:#fafafa59}
.co-pasos li{display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.co-pasos li+li::before{content:"";width:1.1rem;height:1px;background:#fafafa33;margin-right:.2rem}
.co-pasos li.on{color:#fafafa}
.co-pasos li.ok{color:#4ade80}
.co-pasos li.ok::after{content:"";width:.55rem;height:.3rem;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:-45deg;translate:0 -.12rem}
.co-col{position:relative;z-index:1;min-width:0;padding:clamp(1.25rem,2vw,1.75rem) clamp(1.25rem,2.2vw,2rem) clamp(1.5rem,2.2vw,2rem)}
.co-datos{border-right:1px solid #ffffff12}
.co-col-t{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem;font-size:1.15rem;font-weight:600;letter-spacing:-.025em}
.co-col-t small{font-size:.78rem;font-weight:500;color:#fafafa80;letter-spacing:0}
/* campos en oscuro */
.co .fm{gap:.7rem}
.co .fld>span{color:#fafafab3}
.co .fld>span small{color:#fafafa66}
.co .fld input,.co .fld select{height:2.75rem;background-color:#ffffff0b;border-color:#ffffff1c;color:#fafafa}
.co .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fafafa' stroke-width='1.6'/%3E%3C/svg%3E")}
.co .fld select:invalid{color:#fafafa59}
.co .fld select option{color:#0b0b0f}
.co .fld input::placeholder{color:#fafafa59}
@media (hover:hover){.co .fld input:hover,.co .fld select:hover{border-color:#ffffff38}}
.co .fld input:focus,.co .fld select:focus{background-color:#ffffff12;border-color:#5a70fa;box-shadow:0 0 0 3px #5a70fa38}
.co .fld input:-webkit-autofill{-webkit-text-fill-color:#fafafa;-webkit-box-shadow:0 0 0 40px #1a1a22 inset}
.co .fld input:disabled,.co .fld select:disabled{opacity:1;-webkit-text-fill-color:#fafafac7;color:#fafafac7;background-color:#ffffff06;border-color:#ffffff10;cursor:default}
.co .fm-check{color:#fafafa8c}
.co .fm-check input{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:1.05rem;height:1.05rem;border:1.5px solid #ffffff4d;border-radius:.3rem;background:#ffffff08;transition:background .2s,border-color .2s}
.co .fm-check input:checked{border-color:transparent;background:var(--grad)}
.co .fm-check input:checked::after{content:"";width:.5rem;height:.27rem;border-left:2px solid #fff;border-bottom:2px solid #fff;rotate:-45deg;translate:0 -.06rem}
.co .fm-check input:focus-visible{outline:2px solid #5a70fa;outline-offset:2px}
.co .fm-check.bad input{border-color:#ff8a8a}
.co .fm-check.bad{color:#ff8a8a}
.co .fm-aviso{background:#5a70fa1f;color:#cdd3ff}
.co .fm-err{color:#ff8a8a}
.co .fm-go{margin-top:.6rem;background:#fafafa;color:#0b0b0f}
.co-datos.guardado .fm-check,.co-datos.guardado button[type=submit],.co-datos.guardado .fm-aviso{display:none}
.co-hechos{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;padding:.75rem .9rem;border-radius:.6rem;background:#4ade801a;font-size:.88rem;line-height:1.4;color:#86efac}
.co-hechos::before{content:"";flex:none;width:1.35rem;height:1.35rem;border-radius:50%;background:#22a565 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/.85rem}
/* pago: siempre a la vista; antes de tener los datos, el botón lleva al formulario */
.co-demo{display:flex;gap:.65rem;align-items:flex-start;margin:0 0 .9rem;padding:.7rem .85rem;border-radius:.6rem;background:#5a70fa1c;color:#cdd3ff;font-size:.8rem;line-height:1.45}
.co-demo::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.35rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .2rem #5a70fa40}
.co-metodos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0 0 .75rem}
.co-met{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.6rem .75rem;border:1px solid #ffffff1c;border-radius:.6rem;background:#ffffff08;color:#fafafa;font-size:.8rem;font-weight:500;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .25s,background .25s}
.co-met svg{width:1.25rem;height:1rem}
@media (hover:hover){.co-met:hover{border-color:#ffffff38}}
.co-met[aria-pressed=true]{border-color:#5a70fa;background:#5a70fa14;box-shadow:0 0 0 1px #5a70fa}
.co-tarjeta{border:1px solid #ffffff1c;border-radius:.6rem;background:#ffffff08;overflow:hidden}
.co-tarjeta label{display:block;position:relative}
.co-tarjeta label+label,.co-tarjeta .co-fila{border-top:1px solid #ffffff14}
.co-fila{display:grid;grid-template-columns:1fr 1fr}
.co-fila label+label{border-top:0;border-left:1px solid #ffffff14}
.co-tarjeta input{width:100%;height:2.75rem;padding:0 .9rem;border:0;background:none;font:inherit;font-size:.95rem;color:#fafafa;outline:0}
.co-tarjeta input::placeholder{color:#fafafa59}
.co-tarjeta input:disabled{-webkit-text-fill-color:#fafafa59;opacity:1;cursor:default}
.co-tarjeta .co-marcas{position:absolute;right:.75rem;top:50%;translate:0 -50%;display:flex;gap:.25rem}
.co-marcas i{width:1.6rem;height:1.05rem;border-radius:.2rem;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff14}
.co-cartera{margin:0;padding:.85rem .95rem;border:1px solid #ffffff1c;border-radius:.6rem;background:#ffffff08;font-size:.85rem;line-height:1.45;color:#fafafab3}
.co-segura{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.75rem 0 0;font-size:.78rem;color:#fafafa80;text-align:center}
.co-segura svg{width:.8rem;height:.8rem;flex:none}
.co-alt{display:block;margin:.8rem auto 0;padding:.2rem;border:0;background:none;font-size:.88rem;font-weight:500;color:#fafafa;text-decoration:underline;text-decoration-color:#fafafa59;text-underline-offset:.25em;cursor:pointer}
@media (hover:hover){.co-alt:hover{text-decoration-color:#fafafa}}
.co-proc{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:1rem;background:#0c0c11f2;font-size:.95rem;font-weight:500;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.co-proc.on{opacity:1;visibility:visible}
.co-proc .spin{width:24px;height:24px}
#stripe-checkout{min-height:22rem;border-radius:.6rem;overflow:hidden}
/* llamada */
.co-llamada h3{margin:0;font-size:1.4rem;font-weight:600;letter-spacing:-.03em}
.co-llamada p{margin:.6rem 0 0;font-size:.95rem;line-height:1.55;color:#fafafab3}
@media (max-width:900px){
  .s5{padding:4rem 0}
  .s5-mani-g,.s5-inc-g,.s5-fin-g,.faq-g{grid-template-columns:1fr}
  .faq-g>div:first-child{position:static}
  .s5-cab{display:block}.s5-cab .s5-p{text-align:left;margin-top:1rem}
  .s5-caso{position:relative;top:auto;margin-bottom:1.25rem}
  .s5-caso-v{aspect-ratio:4/3}
  .s5-precio{position:relative;top:auto}
  .frase{padding:5rem 0}
}
@media (max-width:1180px){
  .s5-fin-g{grid-template-columns:1fr;gap:0}
  .s5-fin-g .s5-fin-fig{width:min(55%,19rem);margin:0 auto -1.5rem}
}
@media (max-width:900px){
  .s5-fin-g{grid-template-columns:1fr}
  .s5-fin-g .s5-fin-fig{width:min(70%,17rem);margin:0 auto -1rem}
  .fin-gar{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:760px){
  .co{grid-template-columns:1fr}
  .co-ped{padding:1.2rem 1.1rem;gap:.2rem 1rem}
  .co-ped-n{font-size:2.2rem}
  .co-col{padding:1.2rem 1.1rem 1.4rem}
  .co-datos{border-right:0;border-bottom:1px solid #ffffff12}
  .co-metodos{gap:.4rem}
  .co-met{padding:.55rem .6rem;font-size:.74rem}
  .co-pasos{gap:.45rem;font-size:.76rem}
  .co-pasos li+li::before{width:.7rem}
}

/* ================= PIE ================= */
.orb-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(2rem,6vh,4rem);font-size:.75rem;letter-spacing:.06em;opacity:.6}
.orb-legal{display:flex;flex-wrap:wrap;gap:1.1rem}
.orb-legal a,.orb-legal button{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;cursor:pointer}
@media (hover:hover){.orb-legal a:hover,.orb-legal button:hover{text-decoration:underline}}
.orb-mail{display:inline-block;margin-top:1.25rem;font-size:.9375rem;opacity:.7;text-decoration:none}
.orb-mail:hover{opacity:1}

/* ================= COOKIES ================= */
.cookie{position:fixed;z-index:120;left:50%;bottom:1rem;translate:-50% 0;display:flex;align-items:center;gap:1.25rem;width:min(46rem,calc(100% - 2rem));padding:.8rem .8rem .8rem 1.25rem;border-radius:999px;background:#fafafa;color:#0b0b0f;box-shadow:0 1.5rem 4rem #000a}
.cookie p{flex:1;margin:0;font-size:.76rem;line-height:1.45}
.cookie a{color:inherit}
.cookie-btns{display:flex;gap:.5rem;flex:none}
.cookie-b{padding:.7rem 1rem;border:1px solid #0b0b0f33;border-radius:999px;background:none;color:#0b0b0f;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.cookie-si{border-color:#0b0b0f;background:#0b0b0f;color:#fafafa}
@media (max-width:900px){.cookie{left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));translate:none;width:auto;display:block;padding:.9rem 1rem;border-radius:1rem}.cookie p{font-size:.74rem}.cookie-btns{margin-top:.7rem}.cookie-b{flex:1;padding:.6rem}}

/* ================= CALENDLY ================= */
.cal-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(.6rem,3vw,2.5rem);background:#0a0a0ae0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.cal-modal.on{opacity:1;visibility:visible}
.cal-box{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);height:min(760px,100%);background:var(--bg);border:1px solid #fafafa1f;border-radius:.5rem;overflow:hidden;transform:translateY(18px);transition:transform .5s var(--ease)}
.cal-modal.on .cal-box{transform:none}
.cal-box::before{content:"";height:2px;flex:none;background:var(--grad)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,2vw,1.5rem);border-bottom:1px solid #fafafa14}
.cal-head .eti{margin:0;font-size:.85rem}
.cal-head b{display:block;margin-top:.35rem;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;letter-spacing:-.03em}
.cal-x{flex:none;background:none;border:0;cursor:pointer;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.cal-x:hover{opacity:1}
.cal-body{position:relative;flex:1;min-height:0}
.cal-mount{position:absolute;inset:0;z-index:2}
.cal-mount iframe{width:100%;height:100%;border:0}
.cal-state{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:1.5rem;text-align:center;font-size:.85rem}
.cal-state p{margin:0;opacity:.6}
.spin{width:16px;height:16px;border-radius:50%;border:1.5px solid #fafafa24;border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* CTA fija en móvil */
.sticky{display:none}

/* ================= APARICIONES ================= */
.js .in-hero{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js body.loaded .in-hero{opacity:var(--o,1);transform:none}
.js .h5-h1 .w>span{transform:translateY(140%);transition:transform 1.15s var(--ease);transition-delay:var(--d,0s)}
.js body.loaded .h5-h1 .w>span{transform:none}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:var(--o,1);transform:none}
.js .eti i{transform:scaleX(0);transition:transform 1.3s var(--ease) .15s}
.js .eti.in i{transform:scaleX(1)}
.js [data-words] .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .1em .26em;margin:-.1em -.1em -.26em}
.js [data-words] .wd>span{display:inline-block;transform:translateY(140%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 32ms)}
.js [data-words].in .wd>span{transform:none}

@media (min-width:901px) and (max-height:780px){
  .h5-form .fm-t{display:none}
  .h5-form .fm-k{margin-bottom:.9rem}
  .h5-form .fm{gap:.55rem}
  .h5-form .fld>span{margin-bottom:.2rem}
  .h5-form .fld input,.h5-form .fld select{height:2.55rem}
}
@media (max-width:900px){
  .nav-cta{display:none}
  .orb-pie{padding-bottom:4.5rem}
  .sticky{display:flex;position:fixed;z-index:80;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:.75rem;padding:.42rem .42rem .42rem 1.2rem;border-radius:999px;background:#fff;color:#0b0b0f;font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;box-shadow:0 .75rem 2rem #000000a6;transform:translateY(170%);transition:transform .5s var(--ease)}
  .sticky.on{transform:none}
  .sticky small{font-size:.6rem;opacity:.55;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .orb-cinta,.spin,.h5-grain{animation:none}
  .js .in-hero,.js .rv,.js [data-words] .wd>span,.js .h5-h1 .w>span{opacity:1;transform:none;transition:none}
  .proc-paso{transition:none}
}

/* ================= GRACIAS ================= */
.gr{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center;max-width:90rem;margin:0 auto;padding:calc(var(--nav) + 2rem) var(--pad) 3rem}
.gr-fig{position:relative;margin:0;aspect-ratio:1;-webkit-mask:radial-gradient(closest-side,#000 62%,#0000 100%);mask:radial-gradient(closest-side,#000 62%,#0000 100%)}
.gr-fig img{width:100%;height:100%;object-fit:cover}
.gr .s5-h2{max-width:15ch}
.gr-lista{margin:clamp(1.75rem,4vh,2.5rem) 0 0;padding:0;list-style:none;border-top:1px solid #ffffff17}
.gr-lista li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1.05rem 0;border-bottom:1px solid #ffffff17;font-size:1rem;line-height:1.5;color:#fafafab8}
.gr-lista b{font-weight:600;color:#fafafa}
.gr-acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.gr-acciones .fm-go{width:auto;min-width:16rem;background:#fafafa;color:#0b0b0f}
.gr-ref{margin:1.5rem 0 0;font-size:.9rem;color:#fafafa80}
@media (max-width:900px){
  .gr{grid-template-columns:1fr;gap:1rem;padding-top:calc(var(--nav) + .5rem)}
  .gr-fig{width:min(70%,17rem);margin:0 auto}
  .gr-lista li{grid-template-columns:1fr;gap:.2rem}
}