:root{--bg:#08070F;--surface:#12101F;--surface-2:#1A1730;--violet:#5B3DF5;--violet-bright:#8B6CFF;
--ink:#EFECFF;--muted:#9B94B8;--line:rgba(139,108,255,.14);--wa:#25D366;--ok:#39D98A;
--paper:#F3EDE0;--paper-ink:#221F2B}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;width:100%}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;width:100%;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.kicker{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--violet-bright)}

nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(980px,calc(100% - 32px));
z-index:100;display:flex;align-items:center;justify-content:space-between;
padding:12px clamp(16px,2.6vw,26px);border-radius:20px;
background:linear-gradient(135deg,rgba(91,61,245,.24),rgba(18,16,31,.92) 55%,rgba(12,10,24,.96));
border:1px solid rgba(139,108,255,.22);
box-shadow:0 18px 50px rgba(4,3,12,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.06) inset;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:top .3s,width .3s,border-radius .3s}
@media(max-width:600px){nav{top:0;left:0;right:0;transform:none;width:100%;border-radius:0 0 22px 22px;
  border-top:none;border-left:none;border-right:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -8px rgba(4,3,12,.65),0 1px 0 rgba(255,255,255,.05) inset,0 -1px 0 rgba(139,108,255,.3) inset}}
.brand{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand svg{width:26px;height:auto}
.brand b{color:var(--violet-bright);font-weight:800}
.nav-links{display:flex;gap:30px;font-size:13.5px;font-weight:500;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s;padding-bottom:3px}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--violet-bright);transition:right .25s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
@media(max-width:960px){.nav-links{display:none}}
.nav-cta{font-size:13px;font-weight:600;padding:10px 20px;border-radius:99px;color:#fff;
background:linear-gradient(180deg,var(--violet-bright),var(--violet));
box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 22px rgba(91,61,245,.35);transition:.25s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 28px rgba(91,61,245,.45)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:99px;font-weight:600;font-size:15px;transition:transform .25s, background .25s, border-color .25s}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 8px 40px rgba(91,61,245,.35)}
.btn-primary:hover{background:var(--violet-bright);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--violet-bright);transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#04150A;font-weight:700;box-shadow:0 10px 44px rgba(37,211,102,.30)}
.btn-wa:hover{transform:translateY(-2px)}

/* ============ HERO con travesía ============ */
.hero-pin{height:100svh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 24px}
.hero-glow{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 45% at 50% 58%, rgba(91,61,245,.22), transparent 70%)}
.hero-mark{width:clamp(110px,16vw,150px);height:auto;margin-bottom:32px;filter:drop-shadow(0 0 34px rgba(91,61,245,.35));will-change:transform}
.hero-mark path{stroke-width:5;stroke-linejoin:round}
.hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:20px}
.hero-pin h1{font-size:clamp(40px,8.4vw,96px);font-weight:800;letter-spacing:-.04em;line-height:1.02;max-width:14ch}
.hero-pin h1 .w{display:inline-block}
.hero-sub{margin-top:22px;font-size:clamp(16px,2.3vw,20px);color:var(--muted);max-width:40ch;line-height:1.6}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:float 2.6s ease-in-out infinite}
@keyframes float{50%{transform:translate(-50%,8px)}}

/* ============ SET PIECES base ============ */
.set{position:relative;overflow:hidden}
.set-pin{height:100svh;display:flex;align-items:center;justify-content:center;position:relative;padding:0 clamp(16px,4vw,48px)}
.set-inner{width:100%;max-width:1180px;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:860px){.set-inner{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}}
.set-copy .kicker{margin-bottom:16px;display:block}
.set-copy h2{font-size:clamp(30px,5vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.cap-stack{position:relative;margin-top:22px;height:4.6em}
.cap{position:absolute;inset:0;opacity:0;color:var(--muted);font-size:clamp(15px,1.9vw,18px);line-height:1.6;max-width:42ch}
.cap b{color:var(--ink)}
@media(max-width:860px){.cap{left:0;right:0;margin:auto}}
.set-stage{display:flex;align-items:center;justify-content:center;position:relative}

/* SET 0 — INTRO (cinco maneras) */
.set-intro{background:radial-gradient(46% 40% at 72% 45%, rgba(91,61,245,.12), transparent 70%)}
.ic-stack{position:relative;width:min(360px,88vw);height:clamp(230px,32vh,270px)}
.ic{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;gap:10px;padding:28px 26px;
border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,var(--surface),var(--surface-2));
box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ic svg{width:28px;height:28px;stroke:var(--violet-bright);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 14px rgba(139,108,255,.5))}
.ic b{font-family:'Sora';font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.ic h3{font-family:'Sora';font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.ic p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.intro-sub{margin-top:14px;font-size:15px;line-height:1.6;color:var(--muted);max-width:38ch}
.ic-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.ic-dots{display:flex;gap:8px}
.ic-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s ease,transform .3s ease}
.ic-dots .dot.active{background:var(--violet-bright);transform:scale(1.35)}
.ic-hint{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);animation:icBounce 2.2s ease-in-out infinite}
@keyframes icBounce{50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  .ic-stack{height:auto;display:flex;flex-direction:column;gap:14px}
  .ic{position:static;opacity:1}
  .ic-dots,.ic-hint{display:none}
  .ic-hint{animation:none}
}

/* SET 1 — WEB */
.set-web{background:
 radial-gradient(45% 38% at 74% 50%, rgba(91,61,245,.14), transparent 70%)}
.blueprint{position:absolute;inset:0;opacity:.5;pointer-events:none;
background:repeating-linear-gradient(0deg,transparent 0 42px, rgba(139,108,255,.06) 42px 43px),
repeating-linear-gradient(90deg,transparent 0 42px, rgba(139,108,255,.06) 42px 43px)}
.dev{position:relative;width:min(520px,86vw);border-radius:18px;border:1px solid var(--line);
background:linear-gradient(180deg,#161327,#0D0B18);box-shadow:0 30px 90px rgba(0,0,0,.55);padding:14px;will-change:transform;transform-style:preserve-3d}
.dev-bar{display:flex;gap:6px;padding:2px 4px 12px}
.dev-bar i{width:9px;height:9px;border-radius:50%;background:#2A2545}
.dev-screen{border-radius:12px;background:linear-gradient(180deg,#1D1936,#131024);padding:20px;display:flex;flex-direction:column;gap:12px;min-height:clamp(200px,34vw,300px)}
.dv{border-radius:8px;background:rgba(239,236,255,.08);transform-origin:left center;will-change:transform,opacity}
.dv-hero{height:64px;background:linear-gradient(120deg,rgba(139,108,255,.4),rgba(91,61,245,.12))}
.dv-t{height:16px;width:58%}.dv-l{height:9px;width:86%}.dv-l2{height:9px;width:64%}
.dv-btn{height:32px;width:128px;border-radius:99px;background:var(--violet)}
.speedo{position:absolute;right:-6px;bottom:-10px;width:132px;height:132px;background:rgba(13,11,24,.92);border:1px solid var(--line);
border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 16px 50px rgba(0,0,0,.6)}
.speedo svg{position:absolute;inset:9px}
.speedo circle{fill:none;stroke-width:6;stroke-linecap:round}
.speedo .trk{stroke:rgba(139,108,255,.15)}
.speedo .val{stroke:url(#gv);transform:rotate(-90deg);transform-origin:center}
.speedo b{font-family:'Sora';font-size:25px;font-weight:800;line-height:1}
.speedo small{font-size:8.5px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
@media(max-width:480px){.speedo{right:2px;bottom:-4px;width:100px;height:100px}.speedo b{font-size:19px}.speedo small{font-size:7.5px}}

/* SET 2 — MARKETING */
.set-mkt{background:radial-gradient(50% 40% at 28% 45%, rgba(91,61,245,.13), transparent 70%)}
/* ===== REFLECTOR DE TEATRO =====
   El cuerpo del foco tapa el nacimiento del haz. Antes el cono arrancaba
   con un borde recto en el aire ("machetazo"); ahora la luz sale de la lente. */
.spot{position:absolute;top:0;left:50%;transform:translateX(-50%);
width:min(680px,94vw);height:76%;pointer-events:none;z-index:0;
display:flex;flex-direction:column;align-items:center}
/* varilla de la que cuelga el foco: se pierde hacia arriba */
.spot-arm{width:3px;height:22px;border-radius:2px;flex:none;
background:linear-gradient(180deg,transparent,#332C57)}
/* cuerpo del foco */
.spot-can{width:56px;height:32px;flex:none;border-radius:3px;
background:linear-gradient(180deg,#3A3358,#191630);
clip-path:polygon(19% 0,81% 0,100% 100%,0 100%)}
/* lente: el punto del que emana la luz */
.spot-lens{width:60px;height:11px;flex:none;border-radius:50%;margin-top:-3px;
background:radial-gradient(closest-side,#EDE7FF,#AC90FF 52%,rgba(139,108,255,.4));
box-shadow:0 0 30px 8px rgba(139,108,255,.55)}
/* haz: nace angosto justo bajo la lente y se abre */
.spot-beam{flex:1;width:100%;margin-top:-7px;
background:linear-gradient(180deg,rgba(178,152,255,.32) 0%,rgba(139,108,255,.11) 50%,rgba(139,108,255,.03) 76%,transparent 100%);
clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
filter:blur(26px)}
@media(max-width:860px){.spot{display:none}}
.serp{width:min(440px,88vw);display:flex;flex-direction:column;gap:12px;position:relative}
.serp-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:99px;padding:12px 18px;background:#12101F;font-size:13.5px;color:var(--muted)}
.serp-bar svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2}
.serp-bar .typed{color:var(--ink)}
.sr{border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:#0F0D1C;will-change:transform;position:relative}
.sr .t{height:12px;width:60%;border-radius:6px;background:rgba(239,236,255,.14);margin-bottom:9px}
.sr .l{height:8px;width:88%;border-radius:6px;background:rgba(239,236,255,.07)}
.sr.you{border-color:rgba(139,108,255,.6);background:rgba(91,61,245,.10);box-shadow:0 14px 44px rgba(91,61,245,.25)}
.sr.you::before{content:'TU EMPRESA · ANUNCIO';font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--violet-bright);display:block;margin-bottom:8px}
.sr .pos{position:absolute;top:50%;right:-34px;transform:translateY(-50%);font-family:'Sora';font-weight:800;font-size:15px;color:var(--muted)}
.sr.you .pos{color:var(--violet-bright)}
@media(max-width:520px){.sr .pos{right:8px;top:10px;transform:none;font-size:12px}}
.mkt-metric{margin-top:10px;display:flex;align-items:center;gap:10px;justify-content:flex-start}
.mkt-metric b{font-family:'Sora';font-weight:800;font-size:clamp(34px,5vw,52px);color:var(--violet-bright)}
.mkt-metric span{color:var(--muted);font-size:13px;max-width:16ch;line-height:1.4}

/* SET 3 — INFRA */
.set-infra{background:radial-gradient(46% 40% at 70% 55%, rgba(91,61,245,.11), transparent 72%)}
.scan{position:absolute;inset:0;pointer-events:none;opacity:.35;
background:repeating-linear-gradient(0deg, rgba(139,108,255,.05) 0 1px, transparent 1px 5px)}
.net-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.net{width:min(480px,88vw);height:auto}
.net line{stroke:rgba(139,108,255,.55);stroke-width:1.8}
.net .node{fill:#161327;stroke:var(--violet-bright);stroke-width:1.8}
.net .core{fill:var(--violet);stroke:var(--violet-bright);filter:drop-shadow(0 0 16px rgba(139,108,255,.65))}
.net text{fill:var(--muted);font:600 10px 'Inter';letter-spacing:.08em}
.net .campt{fill:#FF5C7A}
.net .nico{fill:none;stroke:var(--violet-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.net .nidot{fill:var(--violet-bright);stroke:none}
.stamp{display:flex;align-items:center;gap:8px;
padding:10px 16px;border-radius:99px;border:1px solid rgba(57,217,138,.5);background:rgba(57,217,138,.08);
font-family:'Sora';font-weight:700;font-size:13px;color:var(--ok);will-change:transform}
.stamp svg{width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:2.6}

/* SET 4 — VENTA horizontal */
.set-vta .set-pin{align-items:center}
.vta-inner{width:100%;max-width:1180px;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,56px);align-items:center}
@media(max-width:860px){.vta-inner{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}}
.rail-mask{overflow:hidden;width:100%}
.rail{display:flex;gap:16px;will-change:transform}
.pcard{flex:0 0 min(230px,62vw);border:1px solid var(--line);border-radius:20px;padding:26px 20px;text-align:center;
background:linear-gradient(160deg,var(--surface),var(--surface-2));box-shadow:0 20px 60px rgba(0,0,0,.5);
display:flex;flex-direction:column;align-items:center;gap:12px}
.pcard svg{width:38px;height:38px;stroke:var(--violet-bright);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(139,108,255,.5))}
.pcard b{font-family:'Sora';font-size:15px;font-weight:700}
.pcard small{color:var(--muted);font-size:12.5px;line-height:1.5}

/* SET 5 — SOPORTE */
.set-it{background:radial-gradient(44% 38% at 30% 55%, rgba(57,217,138,.07), transparent 72%)}
.chatbox{width:min(400px,88vw);border:1px solid var(--line);border-radius:16px;background:#0D0B18;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden}
.cb-head{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#161327;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.cb-head .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(57,217,138,.7)}
.cb-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;will-change:transform,opacity}
.msg.in{background:#1D1936;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--muted)}
.msg.out{background:var(--violet);align-self:flex-end;border-bottom-right-radius:4px}
.msg.ok{display:flex;align-items:center;gap:8px;background:rgba(57,217,138,.10);border:1px solid rgba(57,217,138,.35);color:var(--ok);font-weight:600;align-self:center;border-radius:99px}
.msg.ok svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2.4}
.it-min{display:flex;align-items:center;gap:10px;margin-top:12px}
.it-min b{font-family:'Sora';font-weight:800;font-size:clamp(38px,6vw,58px);color:var(--ok)}
.it-min span{color:var(--muted);font-size:13px;max-width:16ch;line-height:1.4}

/* ============ enlaces rápidos ============ */
.quick{padding:clamp(90px,13vh,150px) clamp(20px,5vw,64px)}
.quick .wrap{max-width:1180px;margin:0 auto}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:700px){.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.quick-grid{grid-template-columns:1fr}}
.qcard{position:relative;border:1px solid var(--line);border-radius:22px;padding:24px 22px 22px;background:var(--surface);
  transition:.35s;display:flex;flex-direction:column;min-height:246px;overflow:hidden}
.qcard:hover{border-color:rgba(139,108,255,.5);transform:translateY(-4px);background:var(--surface-2)}
.qcard-num{font-family:'Sora';font-weight:700;font-size:12px;color:var(--muted);letter-spacing:.05em}
.qcard-art{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);margin:6px 0}
.qcard-art svg{width:68px;height:68px;transition:transform .4s}
.qcard:hover .qcard-art svg{transform:scale(1.08)}
.qcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.qcard-foot b{font-family:'Sora';font-size:16px;font-weight:700;line-height:1.22;max-width:11ch;color:var(--ink)}
.qcard-go{flex:none;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg,var(--violet-bright),var(--violet));
  display:flex;align-items:center;justify-content:center;transition:transform .35s}
.qcard-go svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4}
.qcard:hover .qcard-go{transform:rotate(45deg) scale(1.06)}

/* animaciones internas de los íconos al hacer hover */
.qcard-art svg{overflow:visible}
.art-code{transition:opacity .25s}
.qcard:hover .art-code{opacity:0}
.art-lines{opacity:0;transition:opacity .15s}
.qcard:hover .art-lines{opacity:1}
.art-lines .ln{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);
  transition:transform .3s ease,filter .3s}
.qcard:hover .art-lines .ln{transform:scaleX(1)}
.art-lines .ln1{transition-delay:.05s}
.art-lines .ln2{transition-delay:.28s}
.art-lines .ln3{transition-delay:.5s}
.qcard:hover .art-lines .ln1{filter:drop-shadow(0 0 6px rgba(139,108,255,.85))}
.ln-cursor{opacity:0;transform-box:fill-box;transform-origin:center}
.qcard:hover .ln-cursor{animation:cursorType 1.3s .55s steps(1) 1 forwards,cursorBlink .6s .8s ease-in-out infinite}
@keyframes cursorType{0%{opacity:0;transform:translateX(-24px)}1%{opacity:1;transform:translateX(-24px)}
  33%{transform:translateX(-24px)}34%{transform:translateX(4px)}66%{transform:translateX(4px)}
  67%{transform:translateX(20px)}100%{transform:translateX(20px)}}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:.15}}

.art-layout .lo{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s,filter .3s}
.art-layout .lo1{opacity:0;transform:translateY(-22px) scaleX(.4)}
.art-layout .lo2{opacity:0;transform:translateX(-26px)}
.art-layout .lo3{opacity:0;transform:scale(0) rotate(-25deg)}
.qcard:hover .art-layout .lo{opacity:1;transform:none}
.art-layout .lo1{transition-delay:0s}
.art-layout .lo2{transition-delay:.18s}
.art-layout .lo3{transition-delay:.4s}
.qcard:hover .art-layout .lo3{filter:drop-shadow(0 0 7px rgba(139,108,255,.9))}
.lo-cursor{opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px rgba(139,108,255,.9))}
.qcard:hover .lo-cursor{animation:cursorTravel 1.15s cubic-bezier(.5,0,.5,1) 1}
@keyframes cursorTravel{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  4%{opacity:1}
  30%{transform:translate(-21px,-26px) scale(1)}
  38%{transform:translate(-21px,-26px) scale(1.5)}
  46%{transform:translate(-21px,-26px) scale(1)}
  70%{transform:translate(-38px,-40px) scale(1)}
  78%{transform:translate(-38px,-40px) scale(1.5)}
  90%{transform:translate(-38px,-40px) scale(1)}
  100%{opacity:0;transform:translate(-38px,-40px) scale(1)}
}

.art-bars .bar{transform-box:fill-box;transform-origin:center bottom;
  transition:transform .5s cubic-bezier(.34,1.76,.64,1),filter .4s}
.qcard:hover .art-bars .bar{transform:scaleY(1.32)}
.art-bars .b1{transition-delay:0s}
.art-bars .b2{transition-delay:.08s}
.art-bars .b3{transition-delay:.16s}
.art-bars .b4{transition-delay:.26s}
.qcard:hover .art-bars .b4{filter:drop-shadow(0 0 8px rgba(139,108,255,.9))}

.art-led{transition:opacity .2s,filter .2s}
.qcard:hover .art-led{animation:ledBlink 1s ease-in-out infinite}
.qcard:hover .art-led.led1{filter:drop-shadow(0 0 5px rgba(139,108,255,.9))}
.qcard:hover .art-led.led2{animation-delay:.22s}
.qcard:hover .art-led.led3{animation-delay:.44s}
@keyframes ledBlink{0%,100%{opacity:.3}50%{opacity:1}}

.art-wave{opacity:0;transition:opacity .3s}
.qcard:hover .art-wave{opacity:1;animation:wavePulse 1.3s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(139,108,255,.7))}
.qcard:hover .art-wave .w2{animation-delay:.28s}
@keyframes wavePulse{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.qcard-art svg path[stroke="var(--violet-bright)"]{transition:filter .35s}
.qcard:hover .qcard-art svg path[stroke="var(--violet-bright)"]:not(.w1):not(.w2){filter:drop-shadow(0 0 5px rgba(139,108,255,.7))}

.art-tag{transform-box:fill-box;transform-origin:20px 20px;transition:filter .3s}
.qcard:hover .art-tag{animation:tagSwing 1.1s ease-in-out;filter:drop-shadow(0 0 7px rgba(139,108,255,.75))}
@keyframes tagSwing{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-16deg) scale(1.08)}
  50%{transform:rotate(12deg) scale(1.08)}75%{transform:rotate(-6deg) scale(1.04)}}

@media(prefers-reduced-motion:reduce){
  .art-layout .lo,.art-led,.art-wave,.art-tag,.art-bars .bar{animation:none!important;transition:none!important}
}

/* clientes / proceso / cta / footer */
.clients{padding:100px 0 110px;overflow:hidden}
.clients-head{text-align:center;margin-bottom:44px;padding:0 24px}
.clients-head p{color:var(--muted);font-size:15px;margin-top:10px}
.marquee{display:flex;width:max-content;animation:scrollX 26s linear infinite}
.marquee:hover{animation-play-state:paused}
.mq-item{font-family:'Sora';font-weight:700;font-size:clamp(18px,3vw,26px);letter-spacing:-.02em;color:#4A4462;
padding:0 clamp(28px,5vw,56px);white-space:nowrap;transition:color .3s;display:flex;align-items:center;gap:12px}
.mq-item:hover{color:var(--ink)}
.mq-item i{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none}
@keyframes scrollX{to{transform:translateX(-50%)}}
.set-testi{background:radial-gradient(50% 42% at 50% 55%, rgba(91,61,245,.16), transparent 72%)}
.set-testi .set-pin{flex-direction:column;gap:0}
.paper-scene{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:34px}
.paper-head{text-align:center}
.paper-head h2{margin-top:10px}
.paper-deck{position:relative;width:100%;min-height:min(70vh,460px);perspective:2200px}
.paper-shadow{position:absolute;inset:0;border-radius:5px;background:var(--paper)}
.paper-shadow.s1{transform:translate(7px,10px) rotate(1.4deg);opacity:.55;z-index:0}
.paper-shadow.s2{transform:translate(-6px,15px) rotate(-1.1deg);opacity:.32;z-index:-1}
.paper-shadow.s3{transform:translate(5px,20px) rotate(1.7deg);opacity:.16;z-index:-2}
.page{position:absolute;inset:0;background:var(--paper);border-radius:5px;color:var(--paper-ink);
  padding:clamp(24px,4.2vw,36px) clamp(22px,4vw,32px);display:flex;flex-direction:column;
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.08);
  transform-origin:left center;backface-visibility:hidden}
.page::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.page-top{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--paper-ink);
  padding-bottom:10px;margin-bottom:14px}
.page-brand{font-family:'Fraunces';font-style:italic;font-weight:700;font-size:14px;letter-spacing:.01em}
.page-ed{font-family:'Sora';font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(34,31,43,.55)}
.page-tag{align-self:flex-start;font-family:'Sora';font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet)}
.page-quote{font-family:'Lora';font-style:italic;font-weight:500;font-size:clamp(16px,1.9vw,19px);line-height:1.68;
  margin:12px 0 0;flex:1}
.page-quote::first-letter{font-family:'Fraunces';font-style:italic;font-weight:700;font-size:2.8em;line-height:.6;
  float:left;margin:.05em .08em -.05em 0;color:var(--violet)}
.page-who{margin-top:16px;padding-top:14px;border-top:1px solid rgba(34,31,43,.18);display:flex;flex-direction:column;gap:2px}
.page-who b{font-family:'Sora';font-size:13px;font-weight:700}
.page-who span{font-family:'Inter';font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(34,31,43,.6)}
.set-testi .ic-hint{margin-top:2px}
#pinTesti.no-pin{height:auto;padding:80px clamp(16px,4vw,48px)}
.paper-deck.no-motion{position:static;perspective:none;display:flex;flex-direction:column;gap:22px;min-height:0}
.paper-deck.no-motion .page{position:static;transform:none!important;box-shadow:0 20px 40px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.08)}
.paper-deck.no-motion .paper-shadow{display:none}
.process{padding:clamp(100px,15vh,170px) clamp(20px,5vw,64px);max-width:1200px;margin:0 auto}
.process h2{font-size:clamp(32px,5.5vw,58px);font-weight:800;letter-spacing:-.035em;margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:20px;padding:28px 24px;background:rgba(255,255,255,.015);position:relative;overflow:hidden}
.step-num{font-family:'Sora';font-weight:800;font-size:15px;color:var(--violet-bright);margin-bottom:40px}
.step h3{font-size:19px;font-weight:700;margin-bottom:10px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}
.cta{padding:clamp(110px,18vh,200px) 24px;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(50% 42% at 50% 50%, rgba(91,61,245,.20), transparent 72%)}
.cta h2{position:relative;font-size:clamp(36px,7vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1.05;max-width:14ch;margin:0 auto}
.cta p{position:relative;color:var(--muted);margin:22px auto 0;max-width:36ch;font-size:clamp(15px,2vw,19px);line-height:1.6}
.cta .btn-wa{position:relative;margin-top:40px}
.site-footer{position:relative;overflow:hidden;padding:100px clamp(20px,5vw,64px) 32px}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--fx,50%) var(--fy,50%), rgba(139,108,255,.16), transparent 68%)}

.foot-top{position:relative;z-index:1;max-width:1200px;margin:0 auto 90px}
.foot-headline{font-family:'Sora';font-weight:800;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(38px,6.4vw,76px);max-width:16ch;color:var(--ink);will-change:transform}
.foot-headline em{font-style:italic;color:var(--violet-bright)}
.foot-cta-row{display:flex;gap:44px;flex-wrap:wrap;margin-top:40px}
.foot-cta{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--ink);transition:color .25s}
.foot-cta .dot{width:13px;height:13px;border-radius:50%;flex:none}
.foot-cta .dot-v{background:var(--violet-bright);box-shadow:0 0 16px rgba(139,108,255,.65)}
.foot-cta .dot-w{background:var(--ink)}
.foot-cta svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;transition:.25s}
.foot-cta:hover{color:var(--violet-bright)}
.foot-cta:hover svg{stroke:var(--violet-bright);transform:translate(2px,-2px)}

.foot-spot{position:relative;z-index:1;max-width:1200px;margin:0 auto 76px}
.foot-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr auto;align-items:start;gap:48px;max-width:1200px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-mark{display:none}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}
.foot-col{display:flex;flex-direction:column;gap:13px;opacity:.32;transition:opacity .3s ease}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:4px}
.foot-col a{font-size:15px;font-weight:500;color:var(--ink);transition:color .25s}
.foot-col a:hover{color:var(--violet-bright)}
.foot-mark{width:110px;opacity:.85;filter:drop-shadow(0 0 24px rgba(139,108,255,.5));
  animation:ringPulse 6s ease-in-out infinite}
.foot-mark svg{display:block;width:100%;height:auto}
@keyframes ringPulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.foot-mark{animation:none}}

.foot-base{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;max-width:1200px;margin:0 auto;padding-top:26px}

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

/* ===== MEGA FOOTER ===== */
.mega-cta{position:relative;z-index:1;display:block;font-family:'Sora';font-weight:800;letter-spacing:-.04em;line-height:1.1;
font-size:clamp(30px,6vw,72px);padding:clamp(56px,9vh,90px) 24px;text-align:center;
border-bottom:1px solid var(--line);transition:color .3s;color:var(--ink)}
.mega-cta .mc-arrow{display:inline-block;transition:transform .35s cubic-bezier(.4,0,.2,1);color:var(--violet-bright)}
.mega-cta:hover{color:var(--violet-bright)}
.mega-cta:hover .mc-arrow{transform:translateX(14px)}
.watermark{position:relative;z-index:1;font-family:'Sora';font-weight:800;letter-spacing:-.05em;line-height:.78;text-align:center;
font-size:clamp(62px,13.5vw,190px);margin-top:44px;user-select:none;pointer-events:none;
color:transparent;-webkit-text-stroke:1px rgba(139,108,255,.20)}
.watermark em{font-style:normal;-webkit-text-stroke:1px rgba(139,108,255,.45)}
.foot-col a{position:relative;width:fit-content}
.foot-col a::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--violet-bright);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.foot-col a:hover::after{transform:scaleX(1)}

/* ===== COHETE ===== */
.cta .set-pin{flex-direction:column;gap:0}
.rocket-stage{position:relative;width:150px;height:300px;margin:0 auto 4px}
.rocket-wrap{position:relative;width:100%;height:100%;z-index:2}
.rocket{width:100%;height:100%;overflow:visible;position:relative}
.r-rocket{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.r-body{fill:url(#rBodyGrad);stroke:var(--violet-bright);stroke-width:1.6}
.r-fin{fill:url(#rFinGrad);stroke:rgba(139,108,255,.5);stroke-width:1}
.r-nozzle{fill:url(#rNozzleGrad);stroke:rgba(139,108,255,.35);stroke-width:1}
.r-nozzle-ring{fill:none;stroke:rgba(139,108,255,.45);stroke-width:1.3}
.r-rivet{fill:rgba(216,207,255,.4)}
.r-panel{fill:none;stroke:rgba(139,108,255,.22);stroke-width:1.4;stroke-linecap:round}
.r-highlight{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.6;stroke-linecap:round}
.r-window-ring{fill:#12101F;stroke:var(--violet-bright);stroke-width:2}
.r-window{fill:url(#rWinGrad)}
.r-window-shine{fill:rgba(255,255,255,.7)}
.r-highlight-r{stroke:rgba(255,255,255,.08)}
.r-flame{transform-origin:60px 206px}
.r-flame-outer{filter:drop-shadow(0 0 18px rgba(139,108,255,.8))}
.r-flame-inner{transform-origin:60px 208px}
.r-engine-glow{transform-origin:60px 209px;opacity:.75}
.r-sparks circle{fill:#EDE8FF;opacity:0}
.trail{position:absolute;left:50%;bottom:38px;width:3px;height:0;transform:translateX(-50%);transform-origin:bottom;
background:linear-gradient(180deg,var(--violet-bright),rgba(139,108,255,0));border-radius:99px;opacity:.9;z-index:1}
.smoke{position:absolute;left:50%;top:262px;transform:translateX(-50%);width:0;height:0;z-index:1;mix-blend-mode:screen}
.smoke i{position:absolute;border-radius:50%;
background:radial-gradient(circle at 40% 35%, rgba(232,228,248,.95), rgba(120,114,145,.4) 55%, transparent 76%);
opacity:0;width:150px;height:150px;filter:blur(26px)}
.smoke i.warm{background:radial-gradient(circle at 42% 38%, rgba(255,240,222,.95), rgba(255,178,107,.4) 42%, rgba(139,108,255,.32) 68%, transparent 80%)}
.smoke i:nth-child(1){left:-220px;width:220px;height:220px;top:10px}
.smoke i:nth-child(2){left:60px;width:200px;height:200px;top:-10px}
.smoke i:nth-child(3){left:-90px;width:280px;height:280px;filter:blur(30px)}
.smoke i:nth-child(4){left:140px;width:170px;height:170px;top:16px}
.smoke i:nth-child(5){left:-320px;width:160px;height:160px;top:24px}
.smoke i:nth-child(6){left:10px;width:210px;height:210px}
.smoke i:nth-child(7){left:-360px;width:150px;height:150px;top:30px}
.smoke i:nth-child(8){left:250px;width:230px;height:230px}
.smoke i:nth-child(9){left:340px;width:150px;height:150px;top:20px}
.smoke i:nth-child(10){left:-140px;width:190px;height:190px;top:-24px}
.smoke i:nth-child(11){left:-20px;width:300px;height:300px;top:8px;filter:blur(32px)}
.smoke i:nth-child(12){left:120px;width:160px;height:160px;top:-30px}
.smoke i:nth-child(13){left:-420px;width:130px;height:130px;top:14px}
.smoke i:nth-child(14){left:400px;width:140px;height:140px;top:6px}
.smoke i.tex{border-radius:0;background:none;background-size:contain;background-repeat:no-repeat;background-position:center;
  mix-blend-mode:screen;filter:blur(5px) brightness(.95) contrast(.72);width:280px;height:280px}
.smoke i.t1{background-image:url(/assets/img/smoke/whitePuff00.png);left:-260px;top:-30px;width:320px;height:320px}
.smoke i.t2{background-image:url(/assets/img/smoke/whitePuff04.png);left:20px;top:-60px;width:340px;height:340px}
.smoke i.t3{background-image:url(/assets/img/smoke/whitePuff08.png);left:-60px;top:10px;width:300px;height:300px}
.smoke i.t4{background-image:url(/assets/img/smoke/whitePuff12.png);left:260px;top:-20px;width:300px;height:300px}
.smoke i.t5{background-image:url(/assets/img/smoke/whitePuff16.png);left:-380px;top:20px;width:230px;height:230px}
.smoke i.t6{background-image:url(/assets/img/smoke/whitePuff20.png);left:420px;top:0;width:240px;height:240px}
@media(max-width:640px){.smoke i{transform:scale(.55)}}
.cta-copy{position:relative;z-index:2}
.cta{overflow:visible}
/* marcas */
.brands{padding-top:72px;margin-top:64px}
.brands-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:40px}
.brand-grid-clip{position:relative;overflow:hidden;transition:max-height .6s cubic-bezier(.65,0,.35,1)}
.brand-grid-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,7,15,0), var(--bg));opacity:1;transition:opacity .4s}
.brand-grid-clip.expanded::after{opacity:0}
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:52px 84px;
  max-width:1100px;margin:0 auto;padding:0 24px}
.brands-more{display:flex;align-items:center;gap:8px;margin:36px auto 0;font-size:13px;font-weight:600;
  color:var(--muted);background:none;border:none;cursor:pointer;transition:color .25s}
.brands-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .35s}
.brands-more:hover{color:var(--ink)}
.brands-more.expanded svg{transform:rotate(180deg)}
.brand-logo{display:flex;align-items:center;gap:10px;opacity:.45;transition:opacity .3s}
.brand-logo:hover{opacity:1}
.brand-logo img{height:40px;width:auto;filter:brightness(0) invert(1)}
.brand-logo.bq em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);border:1px solid rgba(57,217,138,.4);border-radius:99px;padding:3px 9px}

/* hero móvil: aire bajo la barra y logo completo */
@media(max-width:600px){
  .hero-pin{justify-content:flex-start;padding-top:112px}
  .hero-mark{width:92px;margin-bottom:22px}
  .hero-pin h1{font-size:clamp(33px,9.6vw,42px)}
  .hero-sub{font-size:15px;margin-top:16px}
  .hero-actions{margin-top:26px;gap:10px}
  .btn{padding:13px 20px;font-size:14px}
  .scroll-hint{display:none}
}
/* circuito tecnológico del hero */
#circuit{position:absolute;inset:0;z-index:0;opacity:.9;pointer-events:none}
.hero-pin>*:not(#circuit){position:relative;z-index:1}

/* ===== MENÚ MÓVIL ===== */
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;z-index:320;position:relative;
margin-left:auto;flex:none}
.burger i{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s,opacity .25s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){.burger{display:flex}.nav-cta{display:none}}
.mmenu{position:fixed;inset:0;z-index:310;pointer-events:none;visibility:hidden;transition:visibility .65s}
.mmenu.is-open{pointer-events:auto;visibility:visible}
.mmenu-backdrop{position:absolute;inset:0;z-index:0;background:rgba(8,7,15,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);opacity:0;
  transition:backdrop-filter .55s,-webkit-backdrop-filter .55s,opacity .55s,background .55s;pointer-events:none}
.mmenu.is-open .mmenu-backdrop{opacity:1;background:rgba(8,7,15,.45);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:auto}
.mmenu-topbar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);opacity:0;pointer-events:none;transition:opacity .3s}
.mmenu.is-open .mmenu-topbar{opacity:1;transition:opacity .3s .15s}
.mmenu-mark svg{width:28px;height:auto;filter:brightness(0) invert(1);display:block}
.mmenu-close{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;pointer-events:auto}
.mmenu-close svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.3}
.mmenu-blob{position:absolute;left:0;right:0;bottom:0;width:100%;height:0;background:var(--violet);z-index:1;
  transition:height .65s cubic-bezier(.65,0,.35,1);pointer-events:none}
.mmenu.is-open .mmenu-blob{height:var(--mh,84%)}
.mmenu-blob-edge{position:absolute;left:0;right:0;top:0;width:100%;height:46px;transform:translateY(-98%);
  display:block;pointer-events:none}
.mmenu-blob-edge path{fill:var(--violet)}
.mmenu-panel{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px clamp(28px,8vw,56px) 40px;display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s;pointer-events:none;
  max-height:92vh;overflow-y:auto}
.mmenu.is-open .mmenu-panel{opacity:1;transform:translateY(0);
  transition:opacity .45s .3s,transform .45s .3s;pointer-events:auto}
.mmenu a.ml{font-family:'Sora';font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,7.4vw,38px);
line-height:1.14;padding:7px 0;color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:12px}
.mmenu a.ml sup{font-family:'Inter';font-weight:600;font-size:12px;color:#fff;opacity:.45}
.mmenu .ml:active{opacity:.68}
.mmenu-cta{position:relative;z-index:1;margin-top:28px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
background:#0C0A18;color:var(--violet-bright);font-weight:800;font-size:16px;
padding:16px 28px;border-radius:99px;box-shadow:0 14px 30px rgba(0,0,0,.35);
transition:transform .25s}
.mmenu-cta:active{transform:scale(.97)}
.mmenu-cta svg{width:14px;height:14px;stroke:var(--violet-bright);fill:none;stroke-width:2.4}
.mmenu-email{position:relative;z-index:1;margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.03em;color:#fff;opacity:.6}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-bright);outline-offset:3px;border-radius:4px}

/* ===== PROYECTOS (teléfonos) ===== */
.ph-card{flex:0 0 min(198px,50vw);min-width:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.ph-card img{display:block;width:100%;height:auto;border-radius:26px;filter:drop-shadow(0 26px 44px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(91,61,245,.18))}
.ph-card:nth-child(odd) img{transform:rotate(-1.2deg)}
.ph-card:nth-child(even) img{transform:rotate(1.2deg)}
.ph-card b{font-family:'Sora';font-size:14px;font-weight:700}
.ph-card small{color:var(--muted);font-size:12px;margin-top:-8px}
/* ===== ANTES / DESPUÉS ===== */
.ba{padding:clamp(90px,14vh,160px) clamp(20px,5vw,64px);text-align:center}
.ba h2{font-size:clamp(30px,5vw,54px);font-weight:800;letter-spacing:-.035em;margin-top:14px}
.ba p.sub{color:var(--muted);margin:14px auto 40px;max-width:44ch;line-height:1.6}
.ba-wrap{position:relative;width:min(520px,90vw);margin:0 auto;border-radius:22px;overflow:hidden;
border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);touch-action:none}
.ba-wrap img{display:block;width:100%;user-select:none;pointer-events:none}
.ba-top{position:absolute;inset:0;overflow:hidden;width:var(--x,50%)}
.ba-top img{width:min(520px,90vw);max-width:none;height:100%;object-fit:cover}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:var(--violet-bright);
box-shadow:0 0 18px rgba(139,108,255,.8)}
.ba-line::after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:var(--violet);display:flex;align-items:center;
justify-content:center;font-size:18px;color:#fff;box-shadow:0 8px 30px rgba(91,61,245,.6)}
.ba-tag{position:absolute;top:14px;font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.14em;
padding:7px 13px;border-radius:99px;background:rgba(8,7,15,.75);backdrop-filter:blur(6px)}
.ba-tag.l{left:14px;color:#FF8DA1}.ba-tag.r{right:14px;color:var(--ok)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* ===== BENTO ===== */
.bento{padding:clamp(90px,13vh,150px) clamp(20px,5vw,64px)}
.bento .wrap{max-width:1180px;margin:0 auto}
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:900px){.bento-grid{grid-template-columns:repeat(2,1fr)}}
.tile{border:1px solid var(--line);border-radius:22px;padding:26px 24px;background:rgba(255,255,255,.015);
position:relative;overflow:hidden;transition:border-color .3s,transform .3s;min-height:150px;
display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.tile:hover{border-color:rgba(139,108,255,.5);transform:translateY(-5px);box-shadow:0 18px 50px -18px rgba(91,61,245,.5)}
.tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(139,108,255,.22),transparent 62%)}
.tile:hover::before{opacity:1}
.tile b,.tile span,.tile em{position:relative;z-index:1}
.tile b{font-family:'Sora';font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--violet-bright)}
.tile span{font-size:14px;color:var(--muted);line-height:1.5}
.tile.big{grid-column:span 2;grid-row:span 2;justify-content:center;
background:radial-gradient(90% 100% at 20% 0%, rgba(91,61,245,.16), transparent 60%),rgba(255,255,255,.015)}
.tile.big b{font-size:clamp(48px,7vw,84px)}
.tile.wide{grid-column:span 2}
.tile em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
/* ===== CAPA DE ACABADO ===== */
#grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}}
#progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:210;transform-origin:left;transform:scaleX(0);
background:linear-gradient(90deg,var(--violet),var(--violet-bright))}
#veil{position:fixed;inset:0;z-index:300;background:var(--bg,#08070F);display:flex;align-items:center;justify-content:center;will-change:transform;animation:veilSafetyFade .5s ease 1.8s forwards}
@keyframes veilSafetyFade{to{opacity:0;visibility:hidden;pointer-events:none;display:none}}
#veil svg{width:84px;height:auto;filter:drop-shadow(0 0 30px rgba(91,61,245,.4))}
nav{transition:transform .45s cubic-bezier(.4,0,.2,1),top .3s,width .3s,border-radius .3s}
nav.hide{transform:translateX(-50%) translateY(-140%)}
@media(max-width:600px){nav.hide{transform:translateY(-102%)}}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){#veil{display:none}#grain{animation:none}}

#stack3d{--v:#5B3DF5;--vb:#8B6CFF;--mut:#9B94B8;--ln:rgba(139,108,255,.14);--ok:#39D98A;position:relative;padding:clamp(60px,10vh,120px) 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,3vh,30px)}
#stack3d::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(56% 50% at 50% 60%,rgba(91,61,245,.12),transparent 72%)}
#stack3d>*{position:relative;z-index:1}
#stack3d .kb3d-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--vb)}
#stack3d .kb3d-title{font-family:'Sora',system-ui,sans-serif;font-size:clamp(30px,5.6vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:.3em 0 0;color:var(--ink,#EFECFF)}
#stack3d .kb3d-title span{background:linear-gradient(120deg,var(--vb),#c9bcff);-webkit-background-clip:text;background-clip:text;color:transparent}
#stack3d .kb3d-terminal{width:min(560px,92vw);text-align:left;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,rgba(20,16,36,.92),rgba(11,9,22,.92));border:1px solid var(--ln);box-shadow:0 24px 70px rgba(0,0,0,.5)}
#stack3d .kb3d-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--ln)}
#stack3d .kb3d-bar i{width:10px;height:10px;border-radius:50%;background:#2A2545}
#stack3d .kb3d-bar i:nth-child(1){background:#ff5f57}#stack3d .kb3d-bar i:nth-child(2){background:#febc2e}#stack3d .kb3d-bar i:nth-child(3){background:#28c840}
#stack3d .kb3d-bar span{margin-left:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--mut)}
#stack3d .kb3d-body{padding:16px 18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(14px,2.4vw,17px);min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:9px}
#stack3d .kb3d-prompt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#stack3d .kb3d-pfx{color:var(--vb);font-weight:600;white-space:nowrap}
#stack3d #kb3d-typed{color:var(--ink,#EFECFF)}
#stack3d .kb3d-caret{display:inline-block;width:9px;height:1.15em;transform:translateY(2px);background:var(--vb);border-radius:1px;animation:kb3dblink 1s steps(1) infinite}
@keyframes kb3dblink{50%{opacity:0}}
#stack3d .kb3d-result{display:flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--mut);opacity:0;transform:translateY(4px);transition:.3s}
#stack3d .kb3d-result.show{opacity:1;transform:none}
#stack3d .kb3d-ck{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(57,217,138,.15)}
#stack3d .kb3d-ck svg{width:11px;height:11px;stroke:var(--ok);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#stack3d .kb3d-result b{color:var(--ink,#EFECFF);font-weight:600}
#stack3d .kb3d-stage{width:min(880px,97vw);height:clamp(300px,44vh,470px);position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--ln);box-shadow:0 40px 90px rgba(0,0,0,.55)}
#stack3d .kb3d-stage canvas{display:block;width:100%;height:100%}
#stack3d .kb3d-hint{position:absolute;right:14px;bottom:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);opacity:.65;pointer-events:none;transition:opacity .5s}
#stack3d .kb3d-hint.hide{opacity:0}
#stack3d .kb3d-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--mut);font-size:14px}
@media (prefers-reduced-motion:reduce){#stack3d .kb3d-caret{animation:none}}

#heroSet{display:none!important}
#mhero{display:flex;position:relative;height:100svh;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 26px;overflow:hidden}
#mhero-shader{position:absolute;inset:0;z-index:0}
#mhero-shader canvas{display:block;width:100%!important;height:100%!important}
#mhero .mh-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 75% at 50% 40%,rgba(8,7,15,.55) 0%,rgba(8,7,15,.12) 42%,rgba(8,7,15,.05) 65%,rgba(8,7,15,.55) 100%)}
#mhero .mh-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px}
#mhero .mh-eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-bright,#8B6CFF)}
#mhero h1{font-family:'Sora',system-ui,sans-serif;font-size:clamp(36px,9.4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.02;max-width:14ch;margin:0;color:#EFECFF}
#mhero .mword{display:inline-block;will-change:transform,opacity,filter}
#mhero h1 .g{background:linear-gradient(120deg,#b9a6ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
#mhero .mh-kin{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
#mhero .mh-klabel{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C9C3E6}
#mhero .mh-kwrap{height:1.7em;font-size:clamp(26px,7.6vw,40px);overflow:hidden;display:flex;align-items:center;justify-content:center}
#mhero .mh-kword{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:clamp(26px,7.6vw,40px);line-height:1.7;letter-spacing:-.02em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .5s}
#mhero .mh-kword.leave{transform:translateY(-90%);opacity:0}
#mhero .mh-kword.enter{transform:translateY(90%);opacity:0;transition:none}
#mhero .mh-sub{font-size:clamp(13px,3.7vw,15px);line-height:1.55;color:#C9C3E6;max-width:32ch;margin-top:6px}
#mhero .mh-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
#mhero .mh-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border-radius:99px;font-weight:600;font-size:15px;text-decoration:none;color:inherit;border:1px solid transparent}
#mhero .mh-primary{background:var(--violet,#5B3DF5);color:#fff;box-shadow:0 10px 44px rgba(91,61,245,.5)}
#mhero .mh-ghost{border:1px solid rgba(139,108,255,.18);background:rgba(255,255,255,.06)}
#mhero .mh-cue{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:2;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C9C3E6;opacity:.7}
@media(min-width:861px){
  #mhero h1{max-width:18ch}
  #mhero .mh-sub{max-width:44ch}
}