/* =====================================================================
   Nodum: prediseño de home (servicios informáticos y software)
   Noche azul tinta con degradado índigo a cian y secciones claras
   para respirar. Geist para todo, Geist Mono para código y cifras.
   ===================================================================== */
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg}
@property --pc{syntax:'<integer>'; inherits:true; initial-value:0}

:root{
  --night:#070A13; --ink:#0B1020; --panel:#111833; --panel-2:#151D3D;
  --line:rgba(148,163,255,.14); --line-2:rgba(148,163,255,.24);
  --indigo:#5B6CFF; --indigo-2:#7A88FF; --indigo-soft:#AEB8FF; --cyan:#22D3EE; --violet:#8B7CF6;
  --ok:#34D399; --ok-t:#5EE3B1; --warn:#F5B544; --warn-t:#F7C76A;
  --text:#E8ECFF; --text-2:#B4BBD8; --gray:#8B93B5;
  --light:#F6F7FB; --l-ink:#0B1020; --l-gray:#4A5274; --l-line:rgba(11,16,32,.09);
  --grad:linear-gradient(100deg,#5B6CFF 0%,#22D3EE 100%);
  --sans:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --max:1200px; --pad:clamp(16px,4vw,48px); --hd:68px;
  --sec:clamp(76px,9vw,132px);
  --ease:cubic-bezier(.22,.8,.2,1); --ease-o:cubic-bezier(.16,1,.3,1);
  --r-lg:20px; --r-md:14px;
  --sr-accent:#22D3EE; --sr-font:'Geist', system-ui, sans-serif; --sr-bg:rgba(11,16,32,.99); --sr-radius:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hd) + 12px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--night); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}
.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad)}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}
::selection{background:rgba(91,108,255,.45); color:#fff}

/* Iconos de trazo (uso con <use>) */
.btn svg,.link svg,.mlk-ico svg,.mega-foot svg,.mega-all svg,.mega-card-cta svg,.chev,.hd-login svg,.pill svg,
.macc-btn svg,.macc-list svg,.kpi-l svg,.svc-more svg,.g-tab svg,.gp-range svg,.app-url svg,.as-nav svg,.as-search svg,
.rule-ico svg,.perk-ico svg,.checks svg,.plan-feats svg,.form-note svg,.select svg,.ft-contact svg,.cl-node svg,.bk-dest svg,.rule-ok{
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round
}

/* Puntos de estado */
.dot,.dot-ok,.dot-warn,.dot-info{display:inline-block; width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.dot-ok{background:var(--ok); box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.dot-warn{background:var(--warn); box-shadow:0 0 0 3px rgba(245,181,68,.18)}
.dot-info{background:var(--indigo-2); box-shadow:0 0 0 3px rgba(91,108,255,.2)}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:12px; border:0; cursor:pointer; position:relative; font:600 15.5px/1 var(--sans); letter-spacing:-.005em; white-space:nowrap; transition:transform .25s var(--ease), background .25s, box-shadow .3s, color .25s}
.btn svg{width:18px; height:18px; stroke-width:2; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{color:#fff; background:linear-gradient(180deg,#6A7AFF,#4D5DF2); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(91,108,255,.7), 0 10px 30px -10px rgba(91,108,255,.8)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(122,136,255,.9), 0 16px 40px -12px rgba(91,108,255,.95), 0 0 46px -12px rgba(34,211,238,.55)}
.btn-ghost{color:var(--text); background:rgba(148,163,255,.06); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:rgba(148,163,255,.12); box-shadow:inset 0 0 0 1px rgba(148,163,255,.4)}
.btn-outline{color:var(--l-ink); background:#fff; box-shadow:inset 0 0 0 1px rgba(11,16,32,.16), 0 1px 2px rgba(11,16,32,.06)}
.btn-outline:hover{box-shadow:inset 0 0 0 1px rgba(11,16,32,.4), 0 6px 16px -10px rgba(11,16,32,.35)}
.btn-dark{color:#fff; background:var(--ink); box-shadow:0 8px 20px -12px rgba(11,16,32,.7)}
.btn-dark:hover{background:#18214A}
.btn-full{width:100%}
.link{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15.5px; color:var(--indigo)}
.link svg{width:17px; height:17px; stroke-width:2; transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.stars{color:#FBBF24; letter-spacing:1px}

/* =====================================================================
   Cabecera
   ===================================================================== */
.hd{position:fixed; inset:0 0 auto; z-index:100; height:var(--hd); background:rgba(7,10,19,.55); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border-bottom:1px solid rgba(148,163,255,.07); transition:background .35s, border-color .35s}
.hd.is-scrolled{background:rgba(7,10,19,.9); border-bottom-color:var(--line)}
.hd-in{display:flex; align-items:center; height:100%}
.logo{display:inline-flex; align-items:center; gap:10px; flex:0 0 auto}
.logo-ico{width:30px; height:30px; flex:0 0 auto}
.logo-txt{font-size:24px; font-weight:650; letter-spacing:-.05em; color:#fff; line-height:1}

.nav{position:relative; margin-left:44px}
.nav-list{display:flex; align-items:center; gap:2px}
.nav-item{position:relative}
.nav-item.has-mega{position:static}
.nav-link{display:flex; align-items:center; gap:5px; height:40px; padding:0 13px; border-radius:10px; font-size:14.5px; font-weight:500; color:rgba(232,236,255,.78); white-space:nowrap; transition:color .2s, background .2s}
.nav-link:hover,.nav-item:hover > .nav-link,.nav-item:focus-within > .nav-link{color:#fff; background:rgba(148,163,255,.08)}
.chev{width:14px; height:14px; stroke-width:2; opacity:.7; transition:transform .3s var(--ease)}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}

/* Megamenú y desplegable */
.mega,.drop{position:absolute; top:100%; padding-top:26px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .22s ease, transform .3s var(--ease), visibility 0s linear .3s}
.nav-item:hover > .mega,.nav-item:focus-within > .mega,.nav-item:hover > .drop,.nav-item:focus-within > .drop{opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .22s ease, transform .3s var(--ease), visibility 0s}
.mega{left:-8px; width:min(940px, calc(100vw - 2 * var(--pad)))}
.drop{left:-8px; width:344px}
.mega-box,.drop-box{background:#0D1328; border:1px solid var(--line-2); border-radius:18px; box-shadow:0 40px 80px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.25)}
.mega-box{display:grid; grid-template-columns:minmax(0,1fr) 262px; gap:10px; padding:10px}
.drop-box{display:grid; gap:2px; padding:8px}
.mega-main{display:flex; flex-direction:column; min-width:0}
.mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:4px}
.mlk{display:flex; align-items:flex-start; gap:13px; padding:12px; border-radius:12px; transition:background .2s}
.mega-grid .mlk{padding:15px 14px}
.mlk:hover,.mlk:focus-visible{background:rgba(148,163,255,.08)}
.mlk-ico{flex:0 0 38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--indigo-soft); background:linear-gradient(180deg,rgba(91,108,255,.2),rgba(91,108,255,.06)); box-shadow:inset 0 0 0 1px rgba(122,136,255,.28); transition:color .2s, box-shadow .2s}
.mlk-ico svg{width:19px; height:19px; stroke-width:1.7}
.mlk-ico.is-grad svg{width:24px; height:24px}
.mlk:hover .mlk-ico{color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
.mlk-txt{min-width:0}
.mlk-txt b{display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.3}
.mlk-txt small{display:block; font-size:13px; color:var(--gray); line-height:1.4; margin-top:3px}
.mlk-txt .ok-line{display:flex; align-items:center; gap:8px; color:var(--ok-t)}
.mega-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 14px 6px; margin-left:4px; margin-right:4px; border-top:1px solid var(--line); font-size:13.5px; color:var(--gray)}
.mega-foot > span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.mega-foot svg{width:15px; height:15px; color:var(--cyan)}
.mega-foot a{color:#fff; font-weight:600}
.mega-all{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.mega-all svg{color:#fff; transition:transform .3s var(--ease)}
.mega-all:hover svg{transform:translateX(3px)}
.mega-card{position:relative; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:var(--panel); border:1px solid var(--line)}
.mega-card-img{position:relative; height:122px; overflow:hidden; background:#16204A}
.mega-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.mega-card-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,24,51,0) 35%, rgba(17,24,51,.96))}
.mega-card:hover img{transform:scale(1.06)}
.mega-card-body{display:flex; flex-direction:column; gap:6px; flex:1; padding:14px 18px 18px}
.mega-card-body b{font-size:16px; font-weight:620; color:#fff; letter-spacing:-.01em}
.mega-card-body small{font-size:13.5px; color:var(--text-2); line-height:1.5}
.mega-card-cta{margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--cyan)}
.mega-card-cta svg{width:15px; height:15px; stroke-width:2; transition:transform .3s var(--ease)}
.mega-card:hover .mega-card-cta svg{transform:translateX(3px)}

/* Showroom (cerca del centro, justo después de la navegación) */
.hd-sr{margin-left:14px; flex:0 0 auto; display:flex; align-items:center}
.hd-sr .sr-trigger{font-size:13.5px; font-weight:550; color:var(--text); --sr-dot-ring:#070A13; padding:.62em 1em .62em .85em; border-color:rgba(148,163,255,.26); background:rgba(148,163,255,.06)}
.hd-sr .sr-trigger:hover,.hd-sr .sr-trigger.is-active{background:rgba(148,163,255,.13); border-color:rgba(148,163,255,.45)}

.hd-actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto}
.hd-login{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:10px; font-size:14.5px; font-weight:500; color:rgba(232,236,255,.78); white-space:nowrap; transition:color .2s, background .2s}
.hd-login svg{width:17px; height:17px}
.hd-login:hover{color:#fff; background:rgba(148,163,255,.08)}

/* Botón con borde degradado animado */
.btn-glow{position:relative; display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:11px; font-size:14.5px; font-weight:600; color:#fff; white-space:nowrap; isolation:isolate; background:linear-gradient(180deg,#151D3D,#0D1328); box-shadow:0 8px 26px -12px rgba(91,108,255,.85); transition:transform .25s var(--ease)}
.btn-glow::before,.btn-glow::after{content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(from var(--ang), #5B6CFF, #22D3EE 25%, #8B7CF6 50%, #22D3EE 75%, #5B6CFF); animation:spinAng 4s linear infinite; pointer-events:none}
.btn-glow::before{padding:1.2px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.btn-glow::after{z-index:-1; inset:-2px; filter:blur(10px); opacity:.35}
.btn-glow:hover{transform:translateY(-1px)}
.btn-glow:hover::after{opacity:.6}
@keyframes spinAng{to{--ang:360deg}}

/* Hamburguesa */
.burger{display:none; width:44px; height:44px; padding:0; border-radius:11px; border:1px solid var(--line-2); background:rgba(148,163,255,.06); cursor:pointer; align-items:center; justify-content:center}
.burger span{position:relative; width:18px; height:1.6px; background:#fff; border-radius:2px; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.6px; background:#fff; border-radius:2px; transition:transform .35s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1380px){
  .nav{margin-left:30px}
  .nav-link{padding:0 10px; font-size:14px}
  .hd-sr{margin-left:8px}
  .hd-login{padding:0 10px}
}
@media (max-width:1259px){
  .hd-login span{display:none}
  .hd-login svg{width:18px; height:18px}
}
@media (max-width:1240px){
  .nav{margin-left:22px}
  .nav-link{padding:0 9px}
  .hd-sr .sr-trigger{padding:.6em .85em .6em .75em}
  .btn-glow{padding:0 15px}
}
@media (max-width:1179px){
  .nav,.hd-sr,.hd-login{display:none}
  .burger{display:inline-flex}
}
@media (max-width:520px){
  .hd-actions .btn-glow{display:none}
  .logo-txt{font-size:23px}
}

/* ---------- Menú móvil ---------- */
.mmenu{position:fixed; inset:0; z-index:95; background:var(--night); padding-top:var(--hd); overflow-y:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s ease, transform .45s var(--ease), visibility 0s linear .45s}
.mmenu::before{content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(70% 45% at 85% 0%, rgba(91,108,255,.22), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(34,211,238,.1), transparent 70%)}
.menu-open .mmenu{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .45s var(--ease), visibility 0s}
.menu-open body{overflow:hidden}
.mmenu-in{position:relative; max-width:640px; margin:0 auto; padding:12px var(--pad) 56px}
.macc{border-bottom:1px solid var(--line)}
.macc-btn{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-size:22px; font-weight:600; letter-spacing:-.025em; cursor:pointer}
.macc-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.macc-btn svg{width:20px; height:20px; stroke-width:2; color:var(--gray); transition:transform .35s var(--ease), color .3s}
.macc.is-open .macc-btn svg{transform:rotate(180deg); color:var(--cyan)}
.macc-panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.macc-list{display:grid; gap:2px; padding:0 0 16px}
.macc-list a{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; font-size:16px; color:var(--text-2); transition:background .2s, color .2s}
.macc-list a:hover{background:rgba(148,163,255,.07); color:#fff}
.macc-list svg{width:19px; height:19px; color:var(--indigo-soft); flex:0 0 auto}
.mlink{display:block; padding:18px 0; font-size:22px; font-weight:600; letter-spacing:-.025em; border-bottom:1px solid var(--line)}
.mbtn{width:100%; margin-top:28px}
.mphone{text-align:center; margin-top:14px; color:var(--gray); font-size:15px}
.mphone a{color:#fff; font-weight:600}
.mmenu .srm{--srm-line:var(--line)}
.mmenu .srm-item small{opacity:.75}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative; overflow:hidden; isolation:isolate; background:var(--night); padding-top:calc(var(--hd) + clamp(40px,5vw,84px))}
.hero-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.mesh i{position:absolute; border-radius:50%; will-change:transform}
.mesh .m1{width:1000px; height:1000px; left:34%; top:-460px; background:radial-gradient(closest-side, rgba(91,108,255,.42), rgba(91,108,255,0)); animation:drift1 24s ease-in-out infinite alternate}
.mesh .m2{width:780px; height:780px; left:64%; top:80px; background:radial-gradient(closest-side, rgba(34,211,238,.22), rgba(34,211,238,0)); animation:drift2 28s ease-in-out infinite alternate}
.mesh .m3{width:860px; height:860px; left:-14%; top:220px; background:radial-gradient(closest-side, rgba(139,124,246,.2), rgba(139,124,246,0)); animation:drift3 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(-140px,90px,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-160px,-70px,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(170px,-50px,0) scale(1.1)}}
.grid{position:absolute; inset:0; overflow:hidden; background-image:linear-gradient(to right, rgba(148,163,255,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,255,.075) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 75% 70% at 62% 34%, #000 18%, transparent 74%); mask-image:radial-gradient(ellipse 75% 70% at 62% 34%, #000 18%, transparent 74%)}
.beam{position:absolute; display:block}
.bh{left:0; top:calc(var(--r) * 64px); width:220px; height:1px; background:linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.95), rgba(34,211,238,0)); box-shadow:0 0 10px rgba(34,211,238,.55); transform:translateX(-240px); animation:beamX var(--t) linear var(--d) infinite}
.bv{top:0; left:calc(var(--c) * 64px); width:1px; height:190px; background:linear-gradient(180deg, rgba(122,136,255,0), rgba(122,136,255,.95), rgba(122,136,255,0)); box-shadow:0 0 10px rgba(91,108,255,.55); transform:translateY(-220px); animation:beamY var(--t) linear var(--d) infinite}
@keyframes beamX{0%{transform:translateX(-240px)} 42%,100%{transform:translateX(calc(100vw + 40px))}}
@keyframes beamY{0%{transform:translateY(-220px)} 42%,100%{transform:translateY(1150px)}}
.noise{position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:220px; z-index:-1; background:linear-gradient(180deg, rgba(7,10,19,0), var(--night)); pointer-events:none}

.hero-in{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(40px,5vw,72px); align-items:center}
.hero-copy{max-width:600px}
.hx{animation:hxIn 1s var(--ease-o) both; animation-delay:calc(.08s + var(--hx) * .08s)}
@keyframes hxIn{from{opacity:0; transform:translateY(18px)}}
.pill{display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 12px 0 4px; border-radius:999px; background:rgba(148,163,255,.07); box-shadow:inset 0 0 0 1px var(--line-2); font-size:13.5px; font-weight:500; color:var(--text-2); max-width:100%; transition:background .2s, color .2s}
.pill-tag{flex:0 0 auto; height:26px; padding:0 10px; display:inline-flex; align-items:center; border-radius:999px; background:var(--grad); color:#070A13; font-weight:650; font-size:12.5px}
.pill-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pill svg{flex:0 0 auto; width:14px; height:14px; stroke-width:2.2; transition:transform .3s var(--ease)}
.pill:hover{background:rgba(148,163,255,.12); color:#fff}
.pill:hover svg{transform:translateX(2px)}
.hero h1{margin-top:24px; font-size:clamp(40px,4.6vw,68px); line-height:1.02; font-weight:640; letter-spacing:-.045em; color:#fff}
.hero h1 > span{display:block; text-wrap:balance}
.hero h1 .sw{padding-bottom:.14em; margin-bottom:-.14em}
.hero-sub{margin-top:22px; font-size:clamp(17px,1.25vw,18.5px); line-height:1.62; color:var(--text-2); max-width:34em}
.hero-cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px}
.hero-proof{margin-top:36px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.proof{display:flex; align-items:center; gap:12px}
.avs{display:flex}
.avs i{width:34px; height:34px; margin-left:-6px; border-radius:50%; display:grid; place-items:center; font:600 11px/1 var(--sans); font-style:normal; letter-spacing:-.02em; color:#fff; box-shadow:0 0 0 2px var(--night)}
.avs i:first-child{margin-left:0}
.avs .a1{background:linear-gradient(135deg,#6A7AFF,#3B47C9)}
.avs .a2{background:linear-gradient(135deg,#22D3EE,#0E7F96)}
.avs .a3{background:linear-gradient(135deg,#9C8CFA,#5B44C9)}
.avs .a4{background:linear-gradient(135deg,#3A4775,#1C2546)}
.proof-txt b{display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.3}
.proof-txt small{display:block; font-size:13.5px; color:var(--gray); line-height:1.4}
.proof-sep{width:1px; height:34px; background:var(--line-2)}
.g-logo{width:34px; height:34px; padding:7px; border-radius:50%; background:#fff; flex:0 0 auto}

/* Composición de interfaz */
.hv{position:relative; padding-bottom:128px}
.hv-stage{position:relative; will-change:transform}
.hv-layer{will-change:transform}
.l-main{position:relative; margin-left:36px}
.l-term{position:absolute; left:0; bottom:-128px; width:min(392px, 74%); z-index:2}
.l-toast{position:absolute; right:-14px; bottom:-34px; z-index:3; width:236px}
.hv-toast{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(148,163,255,.28); background:linear-gradient(180deg, rgba(28,38,78,.94), rgba(15,21,44,.96)); box-shadow:0 26px 56px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; transform:translateY(16px) scale(.94); transform-origin:80% 100%; transition:opacity .45s ease, transform .7s var(--ease-o)}
.hv-toast.is-in{opacity:1; transform:none}
.hv-toast.is-out{opacity:0; transform:translateY(-10px) scale(.97); transition:opacity .35s ease, transform .45s ease}
.toast-ico{position:relative; flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, rgba(91,108,255,.55), rgba(34,211,238,.35)); box-shadow:inset 0 0 0 1px rgba(122,136,255,.5), 0 0 22px -6px rgba(34,211,238,.7)}
.toast-ico svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.toast-txt{flex:1; min-width:0}
.toast-txt b{display:block; font-size:13.5px; font-weight:600; line-height:1.3; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toast-txt small{display:block; margin-top:1px; font-size:12px; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hv-card{border-radius:18px; border:1px solid rgba(148,163,255,.2); background:linear-gradient(180deg, rgba(22,30,62,.84), rgba(12,17,36,.88)); box-shadow:0 40px 100px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3)}
.hv-status{padding:18px; animation:hvA 1.2s var(--ease-o) .3s both}
.hv-term{overflow:hidden; background:linear-gradient(180deg, rgba(11,15,30,.95), rgba(7,10,19,.97)); animation:hvB 1.2s var(--ease-o) .75s both}
@keyframes hvA{from{opacity:0; transform:translateY(46px) scale(.96)}}
@keyframes hvB{from{opacity:0; transform:translate(-36px,36px) scale(.96)}}
.hvs-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 16px}
.hvs-title{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:#fff; letter-spacing:-.01em; min-width:0}
.hvs-title svg{width:22px; height:22px; flex:0 0 auto}
.live{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ok-t); background:rgba(52,211,153,.1); box-shadow:inset 0 0 0 1px rgba(52,211,153,.25)}
.live i,.beat,.c-dot,.status i{position:relative; display:inline-block; border-radius:50%}
.live i{width:7px; height:7px; background:var(--ok)}
.live i::after,.beat::after,.c-dot::after,.status i::after,.cl-hub::after{content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(1); opacity:.65} 80%,100%{transform:scale(2.8); opacity:0}}
.hvs-grid{display:grid; grid-template-columns:1fr 1fr; column-gap:10px}
.kpi{grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:6px; align-content:start; padding:14px; border-radius:13px; background:rgba(148,163,255,.045); box-shadow:inset 0 0 0 1px rgba(148,163,255,.12); animation:kIn .8s var(--ease-o) both; animation-delay:calc(.62s + var(--k) * .09s)}
.kpi:nth-child(n+3){margin-top:10px}
@keyframes kIn{from{opacity:0; transform:translateY(12px)}}
.kpi-l{display:flex; align-items:center; gap:7px; font-size:12.5px; line-height:1.3; color:var(--gray)}
.kpi-l svg{width:14px; height:14px; flex:0 0 auto; color:var(--indigo-soft)}
.kpi-v{display:flex; align-items:center; gap:9px; font-size:22px; font-weight:600; letter-spacing:-.025em; line-height:1.15; color:#fff}
.kpi-v.mono{font-weight:500; letter-spacing:-.04em}
.kpi-v.is-tick{animation:tick .7s ease}
@keyframes tick{0%{color:var(--cyan)} 100%{color:#fff}}
.beat{width:8px; height:8px; flex:0 0 auto; background:var(--ok)}
.kpi-s{font-size:12.5px; color:var(--gray); line-height:1.3}
.hvs-chart{margin-top:10px; padding:14px 14px 12px; border-radius:13px; background:rgba(148,163,255,.045); box-shadow:inset 0 0 0 1px rgba(148,163,255,.12)}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; color:var(--gray); animation:fade .8s ease 1s both}
.chart-head b{font-size:15px; font-weight:500; color:#fff}
.chart-box{position:relative; height:92px; margin-top:10px}
.chart{width:100%; height:100%; overflow:visible}
.c-grid{fill:none; stroke:rgba(148,163,255,.1); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke}
.c-area{fill:url(#ndArea); animation:fade 1.2s ease 2.1s both}
.c-line{fill:none; stroke:url(#ndLine); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1 1; stroke-dashoffset:0; animation:draw 1.9s var(--ease) 1.15s both}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
.c-dot{position:absolute; right:-4px; top:calc(23.3% - 4px); width:8px; height:8px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:fade .5s ease 2.9s both}
.term-bar{display:flex; align-items:center; gap:12px; height:36px; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(148,163,255,.04)}
.term-dots{display:flex; gap:6px}
.term-dots i,.app-dots i{width:9px; height:9px; border-radius:50%; background:rgba(148,163,255,.24)}
.term-title{font-family:var(--mono); font-size:12px; color:var(--gray)}
.term-body{padding:13px 16px 15px; font-size:13px; line-height:1.75; height:calc(13px * 1.75 * 4 + 28px); color:var(--text)}
.tl{white-space:pre; overflow:hidden; text-overflow:ellipsis}
.t-p{color:var(--cyan)}
.t-m{color:var(--gray)}
.t-ok{color:var(--ok-t)}
.t-cur{display:inline-block; width:8px; height:15px; margin-left:2px; vertical-align:-3px; background:var(--cyan); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tl.is-new{animation:fade .35s ease}

/* Marquesina de clientes */
.logos{position:relative; margin-top:clamp(56px,7vw,104px); padding-bottom:clamp(52px,6vw,76px)}
.logos-t{text-align:center; font-size:14.5px; color:var(--gray); margin-bottom:26px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.marquee-track{display:flex; width:max-content; animation:marq 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-list{display:flex; align-items:center; gap:clamp(48px,5vw,76px); padding-right:clamp(48px,5vw,76px)}
@keyframes marq{to{transform:translateX(-50%)}}
.lg{display:flex; align-items:center; gap:9px; height:42px; white-space:nowrap; color:rgba(180,187,216,.6); font-size:20px; line-height:1; transition:color .3s}
.lg:hover{color:#fff}
.lg svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.lg-lumen{font-family:Georgia,'Times New Roman',serif; font-size:21px; letter-spacing:.01em}
.lg-ferran{font-weight:500; font-size:21px; letter-spacing:-.035em}
.lg-ferran b{font-weight:800; margin-right:2px}
.lg-ferran .sq{width:13px; height:13px; margin-right:6px; border-radius:3px; background:currentColor; transform:rotate(45deg)}
.lg-agora{font-weight:300; font-size:20px; letter-spacing:.005em}
.lg-vidal{font-style:italic; font-weight:500; font-size:19px; letter-spacing:-.015em; gap:6px}
.lg-vidal b{font-weight:800}
.lg-vidal .stripes{display:flex; flex-direction:column; gap:3px; margin-right:4px}
.lg-vidal .stripes i{display:block; height:2.5px; background:currentColor; transform:skewX(-24deg)}
.lg-vidal .stripes i:nth-child(1){width:20px} .lg-vidal .stripes i:nth-child(2){width:15px} .lg-vidal .stripes i:nth-child(3){width:10px}
.lg-sabater{flex-direction:column; align-items:flex-start; justify-content:center; gap:5px}
.lg-sabater span{font-weight:400; font-size:15px; letter-spacing:.2em; text-transform:uppercase}
.lg-sabater small{font-size:11px; letter-spacing:.42em; opacity:.85}
.lg-ebano{align-items:baseline; gap:5px; font-weight:800; font-size:26px; letter-spacing:-.06em; padding-top:4px}
.lg-ebano small{font-weight:500; font-size:12px; letter-spacing:.06em}
.lg-garbi span{display:flex; flex-direction:column; gap:2px; font-weight:700; font-size:19px; letter-spacing:-.02em}
.lg-garbi small{font-weight:500; font-size:10.5px; letter-spacing:.14em}
.lg-montane{font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.24em; text-transform:uppercase}

/* =====================================================================
   Comunes de sección
   ===================================================================== */
.sec{position:relative; padding:var(--sec) 0}
.sec-light{background:var(--light); color:var(--l-ink)}
.sec-dark{background:var(--night); color:var(--text)}
.sec-head{max-width:760px; margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{max-width:880px; margin-left:auto; margin-right:auto; text-align:center}
.sec-head h2,.stats-head h2,.dev-copy h2,.eco-head h2,.faq-side h2,.final-copy h2{font-size:clamp(31px,3.7vw,52px); line-height:1.06; font-weight:640; letter-spacing:-.04em; text-wrap:balance}
.sec-dark h2,.dev h2,.final h2{color:#fff}
.sec-head p{margin-top:18px; font-size:clamp(17px,1.3vw,18.5px); line-height:1.62; color:var(--text-2); max-width:62ch; text-wrap:pretty}
.sec-head.center p{margin-left:auto; margin-right:auto; text-wrap:balance}
.sec-light .sec-head p{color:var(--l-gray)}

/* =====================================================================
   ¿Te suena?
   ===================================================================== */
.pains-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px}
.pain{transition:box-shadow .35s ease; grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:0; padding:26px 26px 0; border-radius:var(--r-lg); background:#fff; overflow:hidden; box-shadow:0 0 0 1px var(--l-line), 0 1px 2px rgba(11,16,32,.04), 0 18px 40px -26px rgba(11,16,32,.22)}
.plog{justify-self:start; align-self:start; display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border-radius:9px; font-size:12.5px; color:#7A5000; background:#FFF6E3; box-shadow:inset 0 0 0 1px rgba(245,181,68,.4)}
.plog-t{font-weight:600}
.pain h3{margin-top:22px; font-size:21px; line-height:1.25; font-weight:620; letter-spacing:-.022em; text-wrap:balance}
.pain > p{margin-top:12px; font-size:16px; line-height:1.62; color:var(--l-gray)}
.pfix{margin:26px -26px 0; padding:20px 26px 26px; background:linear-gradient(180deg,#F0F2FF,#EBEEFF); border-top:1px solid rgba(91,108,255,.16)}
.pfix-top{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap}
.pfix-badge{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:650; color:var(--l-ink)}
.pfix-badge svg{width:20px; height:20px}
.pfix-log{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#0B7350}
.pfix p{margin-top:10px; font-size:16px; line-height:1.62; color:#2C3456}

/* =====================================================================
   Servicios (bento)
   ===================================================================== */
.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px}
.svc{position:relative; isolation:isolate; overflow:hidden; grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:0; padding:10px 10px 26px; margin-bottom:16px; border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(18,25,53,.92), rgba(11,16,32,.92)); box-shadow:inset 0 0 0 1px var(--line); transition:transform .5s var(--ease); will-change:transform}
.svc::before{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background:radial-gradient(460px circle at var(--gx,50%) var(--gy,-30%), rgba(122,136,255,.13), rgba(34,211,238,.04) 30%, transparent 50%); opacity:0; transition:opacity .45s}
.svc::after{content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(360px circle at var(--gx,50%) var(--gy,-30%), rgba(34,211,238,.95), rgba(91,108,255,.5) 30%, transparent 62%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:0; transition:opacity .45s}
.bento:hover .svc::before,.bento:hover .svc::after{opacity:1}
.svc-vis{position:relative; height:192px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 0%, rgba(91,108,255,.13), rgba(91,108,255,0) 62%), rgba(7,10,19,.42); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)}
.svc h3{margin:24px 16px 0; font-size:20px; line-height:1.25; font-weight:620; letter-spacing:-.022em; color:#fff}
.svc > p{margin:10px 16px 0; font-size:16px; line-height:1.62; color:var(--text-2)}
.svc-more{justify-self:start; align-self:end; margin:22px 16px 0; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#C7CEFF; transition:color .2s}
.svc-more svg{width:16px; height:16px; stroke-width:2; transition:transform .3s var(--ease)}
.svc:hover .svc-more{color:#fff}
.svc:hover .svc-more svg{transform:translateX(3px)}
.bento:not(.is-live) .svc-vis *,.bento:not(.is-live) .svc-vis *::before,.bento:not(.is-live) .svc-vis *::after{animation-play-state:paused}

/* 1. Soporte: ticket */
.tk{width:min(300px,86%); padding:14px; border-radius:12px; background:rgba(17,24,51,.96); box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 40px -20px rgba(0,0,0,.6)}
.tk-head{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--gray)}
.tk-status{display:grid; justify-items:end}
.tk-status b{grid-area:1/1; padding:3px 8px; border-radius:6px; font-size:11.5px; font-weight:500; white-space:nowrap; opacity:0}
.tk-status .s1{color:var(--warn-t); background:rgba(245,181,68,.14); animation:st1 8s infinite}
.tk-status .s2{color:var(--indigo-soft); background:rgba(91,108,255,.2); animation:st2 8s infinite}
.tk-status .s3{color:var(--ok-t); background:rgba(52,211,153,.14); animation:st3 8s infinite}
@keyframes st1{0%,24%{opacity:1} 27%,100%{opacity:0}}
@keyframes st2{0%,24%{opacity:0} 27%,58%{opacity:1} 61%,100%{opacity:0}}
@keyframes st3{0%,58%{opacity:0} 61%,96%{opacity:1} 100%{opacity:0}}
.tk-q{margin-top:9px; font-size:14px; font-weight:600; color:#fff; line-height:1.35}
.tk-msg{display:flex; gap:10px; align-items:flex-end; margin-top:12px}
.tk-av{flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#070A13; font-size:10.5px; font-weight:700}
.tk-bubble{display:grid; align-items:center; min-height:40px; padding:9px 12px; border-radius:12px 12px 12px 4px; background:rgba(148,163,255,.1); font-size:12.5px; line-height:1.45; color:var(--text)}
.tk-typing,.tk-text{grid-area:1/1}
.tk-typing{display:flex; gap:4px; align-items:center; animation:typ 8s infinite}
.tk-typing i{width:5px; height:5px; border-radius:50%; background:var(--gray); animation:dots 1s ease-in-out infinite}
.tk-typing i:nth-child(2){animation-delay:.15s} .tk-typing i:nth-child(3){animation-delay:.3s}
.tk-text{animation:txt 8s infinite}
@keyframes typ{0%,6%{opacity:0} 9%,30%{opacity:1} 33%,100%{opacity:0}}
@keyframes txt{0%,31%{opacity:0; transform:translateY(4px)} 35%,96%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes dots{0%,100%{transform:translateY(0); opacity:.45} 50%{transform:translateY(-3px); opacity:1}}

/* 2. Copias: barra que avanza */
.bk{width:min(300px,86%); --pc:0; animation:bkp 6.5s var(--ease) infinite}
@keyframes bkp{0%{--pc:0} 72%,100%{--pc:100}}
.bk-head{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:500; color:var(--text-2)}
.bk-pct{font-size:13px; color:#fff; counter-reset:pc var(--pc)}
.bk-pct::after{content:counter(pc) " %"}
.bk-bar{margin-top:10px; height:8px; border-radius:99px; overflow:hidden; background:rgba(148,163,255,.12)}
.bk-bar i{display:block; height:100%; border-radius:inherit; background:var(--grad); transform-origin:left; animation:bkbar 6.5s var(--ease) infinite; box-shadow:0 0 14px rgba(34,211,238,.55)}
@keyframes bkbar{0%{transform:scaleX(0)} 72%,100%{transform:scaleX(1)}}
.bk-dest{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px}
.bk-dest span{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:10px; font-size:12px; color:var(--gray); background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)}
.bk-dest svg{width:18px; height:18px}
.bk-dest .d1{animation:dest1 6.5s infinite} .bk-dest .d2{animation:dest2 6.5s infinite} .bk-dest .d3{animation:dest3 6.5s infinite}
@keyframes dest1{0%,20%{color:var(--gray); background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)} 24%,95%{color:var(--ok-t); background:rgba(52,211,153,.08); box-shadow:inset 0 0 0 1px rgba(52,211,153,.4)} 100%{color:var(--gray)}}
@keyframes dest2{0%,44%{color:var(--gray); background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)} 48%,95%{color:var(--ok-t); background:rgba(52,211,153,.08); box-shadow:inset 0 0 0 1px rgba(52,211,153,.4)} 100%{color:var(--gray)}}
@keyframes dest3{0%,68%{color:var(--gray); background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)} 72%,95%{color:var(--ok-t); background:rgba(52,211,153,.08); box-shadow:inset 0 0 0 1px rgba(52,211,153,.4)} 100%{color:var(--gray)}}

/* 3. Ciberseguridad: escudo que escanea */
.sh{display:flex; align-items:center; gap:18px; width:min(324px,90%)}
.sh-shield{position:relative; flex:0 0 72px; height:82px}
.sh-shield svg{width:72px; height:82px; fill:rgba(91,108,255,.12); stroke:#8F9CFF; stroke-width:1.1}
.sh-shield::after{content:""; position:absolute; left:50%; top:50%; width:110px; height:110px; margin:-55px 0 0 -55px; border-radius:50%; border:1px solid rgba(34,211,238,.45); animation:ring 3s ease-out infinite}
.sh-scan{position:absolute; left:8px; right:8px; top:10px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow:0 0 12px var(--cyan); animation:scan 2.4s ease-in-out infinite alternate}
@keyframes scan{to{transform:translateY(58px)}}
.sh-list{flex:1; min-width:0; display:grid; gap:7px; font-size:11.5px}
.sh-list li{display:flex; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:8px; white-space:nowrap; color:var(--text-2); background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1); animation:row 3.6s infinite}
.sh-list li span{overflow:hidden; text-overflow:ellipsis}
.sh-list li:nth-child(2){animation-delay:1.2s} .sh-list li:nth-child(3){animation-delay:2.4s}
.sh-list b{font-weight:500; color:var(--ok-t)}
.sh-list b.bad{color:var(--cyan)}
@keyframes row{0%,100%{background:rgba(148,163,255,.05)} 12%,26%{background:rgba(34,211,238,.12)}}

/* 4. Cloud: nodos que sincronizan */
.vis-cloud{gap:18px; align-content:center}
.cl{display:flex; align-items:center; width:min(296px,84%)}
.cl-node{position:relative; flex:0 0 46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--indigo-soft); background:rgba(17,24,51,.96); box-shadow:inset 0 0 0 1px var(--line-2)}
.cl-node svg{width:22px; height:22px; stroke-width:1.6}
.cl-hub{flex-basis:60px; height:60px; border-radius:17px; color:#fff; background:linear-gradient(180deg, #2A3580, #16204A); box-shadow:inset 0 0 0 1px rgba(122,136,255,.55), 0 0 40px -6px rgba(91,108,255,.7)}
.cl-hub svg{width:26px; height:26px}
.cl-hub::after{background:rgba(91,108,255,.35); z-index:-1}
.cl-link{position:relative; flex:1; height:2px; overflow:hidden; background:repeating-linear-gradient(90deg, rgba(148,163,255,.32) 0 4px, transparent 4px 8px)}
.cl-link i{position:absolute; left:0; top:-2px; width:100%; height:6px; background:radial-gradient(closest-side, var(--cyan), rgba(34,211,238,0)) no-repeat 0 50% / 26px 6px; animation:pkt 1.9s linear infinite}
.cl-rev i{animation-direction:reverse; animation-delay:.6s}
@keyframes pkt{from{transform:translateX(-26px)} to{transform:translateX(100%)}}
.cl-chip,.nw-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; font-size:12px; color:var(--text-2); background:rgba(52,211,153,.07); box-shadow:inset 0 0 0 1px rgba(52,211,153,.24); white-space:nowrap}

/* 5. Software: código */
.cd{position:relative; margin:0; width:min(320px,90%); padding:14px 0; border-radius:12px; overflow:hidden; white-space:normal; font-size:12px; line-height:1.9; color:var(--text-2); background:rgba(7,10,19,.88); box-shadow:inset 0 0 0 1px var(--line-2)}
.cd::before{content:""; position:absolute; left:0; right:0; top:14px; height:calc(12px * 1.9); background:linear-gradient(90deg, rgba(91,108,255,.24), rgba(91,108,255,.04)); border-left:2px solid var(--indigo); animation:hl 6s steps(1) infinite}
@keyframes hl{0%{transform:translateY(0)} 25%{transform:translateY(100%)} 50%{transform:translateY(200%)} 75%{transform:translateY(300%)}}
.cd-l{position:relative; display:block; padding:0 12px 0 38px; white-space:pre; overflow:hidden; text-overflow:clip}
.cd-l i{position:absolute; left:14px; font-style:normal; color:rgba(139,147,181,.5)}
.cd-cur{display:inline-block; width:7px; height:14px; margin-left:2px; vertical-align:-2px; background:var(--cyan); animation:blink 1s steps(1) infinite}
.k{color:#B9A6FF} .f{color:#67E8F9} .s{color:#F9C88B} .cm{color:#6E77A0; font-style:italic} .v{color:#9AA8FF}

/* 6. Redes: cobertura wifi */
.nw{position:relative; width:86%; height:150px; border-radius:12px; overflow:hidden; background-image:linear-gradient(rgba(148,163,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,255,.07) 1px, transparent 1px); background-size:22px 22px; box-shadow:inset 0 0 0 1px rgba(148,163,255,.14)}
.nw-ap{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px}
.nw-ap.a1{left:30%; top:48%}
.nw-ap.a2{left:70%; top:44%}
.nw-ap b{position:absolute; inset:0; border-radius:50%; background:var(--grad); box-shadow:0 0 14px rgba(34,211,238,.8)}
.nw-ap i{position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; border:1px solid rgba(34,211,238,.5); opacity:0; animation:ring 3s ease-out infinite}
.nw-ap i:nth-child(2){animation-delay:1s} .nw-ap i:nth-child(3){animation-delay:2s}
.nw-ap.a2 i{animation-delay:.5s} .nw-ap.a2 i:nth-child(2){animation-delay:1.5s} .nw-ap.a2 i:nth-child(3){animation-delay:2.5s}
@keyframes ring{0%{transform:scale(.08); opacity:.9} 100%{transform:scale(1); opacity:0}}
.nw-dev{position:absolute; left:var(--x); top:var(--y); width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:2px; background:rgba(148,163,255,.35); animation:dev 3s ease-in-out var(--dl) infinite}
@keyframes dev{0%,100%{background:rgba(148,163,255,.35); box-shadow:none} 40%,60%{background:var(--ok-t); box-shadow:0 0 8px rgba(52,211,153,.7)}}
.nw-chip{position:absolute; right:10px; bottom:10px; background:rgba(11,16,32,.85)}

/* =====================================================================
   Nodum Guard
   ===================================================================== */
.guard{overflow:hidden}
.guard::before{content:""; position:absolute; left:50%; top:46%; width:1400px; height:900px; margin-left:-700px; pointer-events:none; background:radial-gradient(closest-side, rgba(91,108,255,.16), rgba(91,108,255,0))}
.guard .wrap{position:relative}
.g-tabs{display:flex; gap:4px; width:max-content; max-width:100%; margin:0 auto 28px; padding:5px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 10px 26px -16px rgba(11,16,32,.3)}
.g-tab{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border:0; border-radius:10px; background:transparent; font-size:15px; font-weight:550; color:var(--l-gray); cursor:pointer; white-space:nowrap; transition:background .3s, color .3s}
.g-tab svg{width:17px; height:17px}
.g-tab:hover{color:var(--l-ink)}
.g-tab.is-active{background:var(--ink); color:#fff}
.g-tab:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.g-prog{position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; opacity:0}
.guard.is-auto .g-tab.is-active .g-prog{opacity:1; animation:prog 7s linear forwards}
.guard.is-auto:not(.is-live) .g-prog{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}

.app{position:relative; border-radius:18px; overflow:hidden; background:var(--ink); color:var(--text); box-shadow:0 0 0 1px rgba(11,16,32,.85), 0 50px 100px -34px rgba(11,16,32,.6), 0 30px 70px -44px rgba(91,108,255,.7)}
.app-bar{display:flex; align-items:center; gap:14px; height:44px; padding:0 16px; border-bottom:1px solid var(--line); background:#0E1428}
.app-dots{display:flex; gap:7px; flex:0 0 52px}
.app-dots i{width:10px; height:10px}
.app-url{margin:0 auto; display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 14px; border-radius:8px; font-size:12.5px; color:var(--gray); background:rgba(148,163,255,.07)}
.app-url svg{width:12px; height:12px; color:var(--ok)}
.app-bar-sp{flex:0 0 52px}
.app-body{display:grid; grid-template-columns:218px minmax(0,1fr)}
.app-side{display:flex; flex-direction:column; gap:14px; padding:18px 14px; border-right:1px solid var(--line); background:#0A0F1E}
.as-brand{display:flex; align-items:center; gap:9px; padding:0 6px; font-size:16px; font-weight:650; letter-spacing:-.035em; color:#fff}
.as-brand svg{width:22px; height:22px}
.as-brand em{font-style:normal; font-weight:500; color:var(--gray)}
.as-search{display:flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 10px; border-radius:9px; font-size:12.5px; color:var(--gray); background:rgba(148,163,255,.06); box-shadow:inset 0 0 0 1px rgba(148,163,255,.1)}
.as-search svg{width:14px; height:14px}
.as-search kbd{margin-left:auto; padding:2px 5px; border-radius:5px; font-size:10.5px; background:rgba(148,163,255,.1)}
.as-nav{display:grid; gap:2px}
.as-nav li{display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:9px; font-size:13.5px; color:var(--text-2); transition:background .35s, color .35s, box-shadow .35s}
.as-nav li svg{width:17px; height:17px; flex:0 0 auto}
.as-nav li span{margin-left:auto; font-size:11.5px; color:var(--gray)}
.as-nav .as-badge{padding:1px 7px; border-radius:99px; color:var(--warn-t); background:rgba(245,181,68,.16)}
.as-nav li.is-active{color:#fff; background:rgba(91,108,255,.17); box-shadow:inset 0 0 0 1px rgba(122,136,255,.32)}
.as-org{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:11px; background:rgba(148,163,255,.05)}
.as-av{flex:0 0 32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--grad); color:#070A13; font-size:12px; font-weight:700}
.as-org b{display:block; font-size:13px; font-weight:600; color:#fff}
.as-org small{display:block; font-size:11.5px; color:var(--gray)}
.app-main{display:grid; min-width:0; padding:22px}
.gp{grid-area:1/1; min-width:0; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s var(--ease), transform .55s var(--ease), visibility 0s linear .55s}
.gp.is-active{opacity:1; visibility:visible; transform:none; transition:opacity .45s var(--ease) .06s, transform .6s var(--ease) .06s, visibility 0s}
.gp-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.gp-head h3{font-size:19px; font-weight:620; letter-spacing:-.02em; color:#fff}
.gp-head p{margin-top:2px; font-size:13px; color:var(--gray)}
.gp-range{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; font-size:12px; color:var(--text-2); background:rgba(148,163,255,.06); box-shadow:inset 0 0 0 1px rgba(148,163,255,.12); white-space:nowrap}
.gp-range svg{width:13px; height:13px}
.gp-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px}
.gk{display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px; border-radius:12px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
.gk > span{font-size:12.5px; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gk b{font-size:24px; font-weight:500; letter-spacing:-.035em; line-height:1.2; color:#fff; white-space:nowrap}
.gk b small{margin-left:1px; font-size:14px; color:var(--gray)}
.gk em{display:flex; align-items:center; gap:7px; font-style:normal; font-size:12px; color:var(--gray); white-space:nowrap; overflow:hidden}
.gk em.up{color:var(--ok-t)}
.gp-grid{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:12px; margin-top:12px}
.gc{min-width:0; padding:16px; border-radius:12px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
.gc-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; font-size:13.5px}
.gc-head b{font-weight:600; color:#fff}
.gc-meta{font-size:12px; color:var(--gray)}
.gc-meta.ok{color:var(--ok-t)}
.legend{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gray); white-space:nowrap}
.legend i{width:10px; height:3px; margin-left:8px; border-radius:2px}
.legend .lg-a{background:var(--cyan)} .legend .lg-b{background:var(--violet)} .legend .lg-w{background:var(--warn)}
.gchart{width:100%; height:170px}
.g-gridl{fill:none; stroke:rgba(148,163,255,.1); stroke-dasharray:3 4; vector-effect:non-scaling-stroke}
.g-area{fill:url(#ndArea)}
.g-cpu{fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1 1; stroke-dashoffset:0}
.g-mem{fill:none; stroke:var(--violet); stroke-width:1.6; stroke-dasharray:4 4; vector-effect:non-scaling-stroke}
.guard.is-live .gp.is-active .g-cpu{animation:draw 1.6s var(--ease) .45s both}
.guard.is-live .gp.is-active .g-area,.guard.is-live .gp.is-active .g-mem{animation:fade 1s ease .8s both}
.guard.is-live .gp.is-active .st{animation:stIn .65s var(--ease-o) both; animation-delay:calc(.06s + var(--st) * .045s)}
@keyframes stIn{from{opacity:0; transform:translateY(12px)}}
.gx{display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--gray)}
.alerts{display:grid; gap:2px}
.alerts li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; padding:9px 6px; border-radius:9px}
.alerts .dot{margin-top:6px}
.alerts b{display:block; font-size:13px; font-weight:550; line-height:1.35; color:#fff}
.alerts small{display:block; margin-top:1px; font-size:12px; color:var(--gray)}
.alerts time{font-size:11.5px; color:var(--gray); white-space:nowrap}
.gc-table{margin-top:12px; padding:4px 16px}
.gtr{display:grid; grid-template-columns:1.3fr 1.15fr 1fr .65fr 1fr; gap:12px; align-items:center; padding:11px 0; font-size:13px; color:var(--text-2); border-bottom:1px solid var(--line)}
.gtr:last-child{border-bottom:0}
.gtr > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gtr > span:first-child{color:#fff}
.gth{padding:10px 0; font-size:12px}
.gth > span,.gth > span:first-child{color:var(--gray)}
.tag{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:6px; font-style:normal; font-size:12px; font-weight:500}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.tag-ok{color:var(--ok-t); background:rgba(52,211,153,.1)}
.tag-warn{color:var(--warn-t); background:rgba(245,181,68,.12)}
.bars{display:flex; align-items:flex-end; gap:4px; height:170px; border-bottom:1px solid var(--line)}
.bars i{flex:1; height:var(--h); border-radius:3px 3px 0 0; transform-origin:bottom; background:linear-gradient(180deg, var(--cyan), rgba(91,108,255,.55))}
.bars i.warn{background:linear-gradient(180deg, var(--warn), rgba(245,181,68,.35))}
.guard.is-live .gp.is-active .bars i{animation:grow .9s var(--ease) both; animation-delay:calc(.35s + var(--bi,0) * 14ms)}
@keyframes grow{from{transform:scaleY(0)}}
.rule{display:grid; gap:8px}
.rule li{display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; background:rgba(148,163,255,.05)}
.rule-ico{flex:0 0 34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--indigo-soft); background:rgba(91,108,255,.15)}
.rule-ico svg{width:17px; height:17px}
.rule li > span:nth-child(2){min-width:0}
.rule b{display:block; font-size:13px; font-weight:550; color:#fff}
.rule small{display:block; font-size:12px; color:var(--gray)}
.rule-ok{margin-left:auto; flex:0 0 18px; width:18px; height:18px; color:var(--ok); stroke-width:2.4}
.hbars{display:grid; gap:18px; padding-top:8px}
.hbars li{display:grid; grid-template-columns:150px minmax(0,1fr) 44px; align-items:center; gap:14px; font-size:13px; color:var(--text-2)}
.hbars i{position:relative; height:10px; border-radius:99px; overflow:hidden; background:rgba(148,163,255,.08)}
.hbars i::after{content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:inherit; background:var(--grad); transform-origin:left}
.guard.is-live .gp.is-active .hbars i::after{animation:growX 1s var(--ease) both; animation-delay:calc(.4s + var(--hi,0) * .08s)}
@keyframes growX{from{transform:scaleX(0)}}
.hbars b{font-weight:500; color:#fff; text-align:right}
.gc-score{display:flex; flex-direction:column}
.ring{position:relative; width:128px; height:128px; margin:2px auto 0}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:10}
.ring-bg{stroke:rgba(148,163,255,.12)}
.ring-fg{stroke:url(#ndLine); stroke-linecap:round; stroke-dasharray:92 100}
.guard.is-live .gp.is-active .ring-fg{animation:ringIn 1.4s var(--ease) .45s both}
@keyframes ringIn{from{stroke-dasharray:0 100}}
.ring-v{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:500; letter-spacing:-.04em; color:#fff}
.ring-v small{margin:8px 0 0 2px; font-size:13px; color:var(--gray); letter-spacing:0}
.ring-note{margin-top:12px; text-align:center; font-size:12.5px; line-height:1.4; color:var(--gray)}

.perks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-top:clamp(48px,5vw,72px)}
.perks li{display:flex; flex-direction:column}
.perk-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--indigo); background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 6px 14px -8px rgba(11,16,32,.3)}
.perk-ico svg{width:20px; height:20px}
.perks h3{margin-top:16px; font-size:17.5px; font-weight:620; letter-spacing:-.018em}
.perks p{margin-top:6px; font-size:16px; line-height:1.6; color:var(--l-gray)}

/* =====================================================================
   Cómo trabajamos
   ===================================================================== */
.process{overflow:hidden}
.process::before{content:""; position:absolute; left:50%; bottom:-380px; width:1200px; height:700px; margin-left:-600px; pointer-events:none; background:radial-gradient(closest-side, rgba(91,108,255,.16), rgba(91,108,255,0))}
.steps{position:relative; --p:0}
.steps-track{position:absolute; left:0; right:0; top:28px; height:1px; background:linear-gradient(90deg, var(--line-2) 0 88%, rgba(148,163,255,0))}
.steps-fill{position:absolute; inset:0; background:var(--grad); transform:scaleX(var(--p)); transform-origin:left; box-shadow:0 0 12px rgba(34,211,238,.6)}
.steps-head{position:absolute; left:0; right:0; top:-1px; height:3px; transform:translateX(calc(var(--p) * 100%)); opacity:min(calc(var(--p) * 30), calc((1 - var(--p)) * 30), 1)}
.steps-head i{position:absolute; right:100%; top:0; width:80px; height:3px; border-radius:99px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); box-shadow:0 0 18px 2px rgba(34,211,238,.9)}
.steps-list{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.step{display:flex; flex-direction:column; align-items:flex-start}
.step-n{position:relative; z-index:1; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:15px; font-weight:500; color:var(--gray); background:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); transition:color .5s, background .5s, box-shadow .5s}
.step.is-on .step-n{color:#fff; background:linear-gradient(180deg,#1C2656,#111833); box-shadow:inset 0 0 0 1px rgba(122,136,255,.7), 0 0 0 6px rgba(91,108,255,.12), 0 0 30px -4px rgba(34,211,238,.55)}
.step-time{margin-top:24px; display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:7px; font-size:12px; color:var(--indigo-soft); background:rgba(91,108,255,.12); white-space:nowrap}
.step h3{margin-top:14px; font-size:20px; font-weight:620; letter-spacing:-.022em; color:#fff}
.step p{margin-top:8px; font-size:16px; line-height:1.62; color:var(--text-2)}

/* =====================================================================
   Cifras
   ===================================================================== */
.stats-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,96px); align-items:center}
.stats-head p{margin-top:18px; font-size:18px; line-height:1.62; color:var(--l-gray); max-width:44ch}
.stats-head .link{margin-top:26px}
.stats-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 24px 60px -36px rgba(11,16,32,.3)}
.stat{position:relative; display:flex; flex-direction:column; gap:12px; padding:36px 32px 32px}
.stat:nth-child(odd):not(.stat-up){border-right:1px solid var(--l-line)}
.stat:not(.stat-up){border-bottom:1px solid var(--l-line)}
.stat::before{content:""; position:absolute; left:32px; top:0; width:44px; height:2px; background:var(--grad)}
.stat-v{display:flex; align-items:baseline; gap:8px; font-size:clamp(44px,4.4vw,62px); font-weight:500; letter-spacing:-.06em; line-height:1; color:var(--l-ink)}
.stat-v small{font-size:.4em; font-weight:500; letter-spacing:-.02em; color:var(--l-gray)}
.stat-l{font-size:16px; line-height:1.5; color:var(--l-gray); max-width:26ch; text-wrap:pretty}
.stats-grid .stat-up{grid-column:1 / -1; gap:14px; padding:24px 32px 22px; background:linear-gradient(180deg,#FBFCFF,#F7F8FD)}
.stat-up::before{display:none}
.up-head{display:flex; justify-content:space-between; align-items:center; gap:8px 20px; flex-wrap:wrap; font-size:14px; color:var(--l-gray)}
.up-t{display:inline-flex; align-items:flex-start; gap:10px; font-weight:550; color:var(--l-ink)}
.up-t .dot{margin-top:.5em}
.up-legend{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.up-legend i{width:8px; height:8px; margin-left:12px; border-radius:2px}
.up-legend i:first-child{margin-left:0}
.up-legend .lg-ok{background:var(--ok)}
.up-legend .lg-wr{background:var(--warn)}
.up-bars{display:flex; gap:2px; height:34px}
.up-bars i{flex:1; min-width:0; border-radius:2px; background:linear-gradient(180deg,#3EDBA3,#1FB283); transition:transform .25s var(--ease), filter .25s}
.up-bars i.wr{background:linear-gradient(180deg,#F7BE55,#E39A1C)}
.up-bars i:hover{transform:scaleY(1.18); filter:brightness(1.1)}
.up-foot{display:flex; justify-content:space-between; font-size:11.5px; color:#737A99}

/* =====================================================================
   Software a medida (vídeo)
   ===================================================================== */
.dev{position:relative; overflow:hidden; isolation:isolate; padding:var(--sec) 0; background:var(--night)}
.dev-video{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.dev-shade{position:absolute; inset:0; z-index:-1; background:radial-gradient(55% 75% at 78% 50%, rgba(91,108,255,.22), rgba(91,108,255,0) 70%), linear-gradient(90deg, rgba(7,10,19,.96) 0%, rgba(7,10,19,.9) 46%, rgba(7,10,19,.82) 100%), linear-gradient(180deg, rgba(7,10,19,.6), rgba(7,10,19,0) 25%, rgba(7,10,19,0) 75%, rgba(7,10,19,.7))}
.dev-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,88px); align-items:center}
.dev-copy p{margin-top:20px; font-size:18px; line-height:1.62; color:var(--text-2); max-width:34em}
.checks{display:grid; gap:12px; margin-top:28px}
.checks li{display:flex; align-items:flex-start; gap:12px; font-size:16.5px; line-height:1.5; color:var(--text)}
.checks svg{flex:0 0 22px; width:22px; height:22px; padding:4px; margin-top:1px; border-radius:50%; color:var(--indigo-soft); background:rgba(91,108,255,.2); stroke-width:2.6}
.dev-copy .btn{margin-top:34px}
.editor{min-width:0; border-radius:16px; overflow:hidden; background:rgba(10,14,28,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0,0,0,.85), 0 0 90px -30px rgba(91,108,255,.55)}
.ed-bar{display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(148,163,255,.04)}
.ed-bar .app-dots{flex:0 0 auto; margin-right:6px}
.ed-tab{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:7px; font-size:12.5px; color:var(--gray); white-space:nowrap}
.ed-tab.is-on{color:#fff; background:rgba(148,163,255,.1)}
.ed-code{position:relative; margin:0; padding:18px 0; overflow-x:auto; white-space:normal; font-size:13.5px; line-height:1.75; color:#C9D0EE; tab-size:2}
.ed-code code{display:block; min-width:max-content}
.ed-code::before{content:""; position:absolute; left:0; right:0; top:18px; height:calc(13.5px * 1.75); background:linear-gradient(90deg, rgba(91,108,255,.2), rgba(91,108,255,0)); border-left:2px solid var(--indigo); animation:edhl 9.6s steps(16) infinite; pointer-events:none}
.editor:not(.is-live) .ed-code::before{animation-play-state:paused}
@keyframes edhl{from{transform:translateY(0)} to{transform:translateY(calc(16 * 13.5px * 1.75))}}
.ln{position:relative; display:block; padding:0 22px 0 56px; white-space:pre}
.ln::after{content:"\200b"}
.ln i{position:absolute; left:0; width:38px; text-align:right; font-style:normal; color:rgba(139,147,181,.45); user-select:none}
.ed-foot{display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--gray)}
.ed-foot span{display:inline-flex; align-items:center; gap:8px}

/* =====================================================================
   Planes
   ===================================================================== */
.bill{position:relative; display:flex; width:max-content; margin:0 auto 40px; padding:4px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 10px 26px -16px rgba(11,16,32,.3)}
.bill-btn{position:relative; z-index:1; flex:1 1 0; min-width:144px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border:0; border-radius:9px; background:transparent; font-size:15px; font-weight:550; color:var(--l-gray); cursor:pointer; transition:color .35s}
.bill-btn.is-active{color:#fff}
.bill-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.bill-save{padding:2px 7px; border-radius:6px; font-size:12px; font-weight:600; color:#0B7C93; background:rgba(34,211,238,.16); transition:color .35s, background .35s}
.bill-btn.is-active .bill-save{color:#7EEBFB; background:rgba(34,211,238,.2)}
.bill-thumb{position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:9px; background:var(--ink); transition:transform .45s var(--ease)}
.plans[data-bill="y"] .bill-thumb{transform:translateX(100%)}
.plans-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px; align-items:start}
.plan{position:relative; grid-row:span 5; display:grid; grid-template-rows:subgrid; row-gap:0; padding:30px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 22px 56px -38px rgba(11,16,32,.35)}
.plan-name{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px}
.plan-name h3{font-size:20px; font-weight:640; letter-spacing:-.022em}
.plan-badge{padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; color:#070A13; background:var(--grad)}
.plan-desc{margin-top:10px; font-size:16px; line-height:1.55; color:var(--l-gray)}
.plan-price{margin-top:24px; padding-top:24px; border-top:1px solid var(--l-line)}
.pp-row{display:flex; align-items:flex-end; gap:10px; min-height:58px}
.pp-v{display:inline-block; font-size:56px; font-weight:500; letter-spacing:-.06em; line-height:1}
.pp-v.is-swap{animation:swap .34s var(--ease)}
@keyframes swap{0%{opacity:1; transform:none} 45%{opacity:0; transform:translateY(-8px)} 55%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:none}}
.pp-text{font-family:var(--sans); font-size:44px; font-weight:640; letter-spacing:-.045em}
.pp-u{padding-bottom:4px; font-size:13.5px; line-height:1.3; color:var(--l-gray)}
.pp-note{display:block; margin-top:10px; font-size:14px; color:var(--l-gray)}
.pp-note.is-swap{animation:fadeSwap .34s ease}
@keyframes fadeSwap{45%,55%{opacity:0}}
.plan .btn{margin-top:24px; width:100%}
.plan-feats{display:grid; gap:12px; align-content:start; margin-top:26px; padding-top:24px; border-top:1px solid var(--l-line)}
.plan-feats li{display:flex; gap:11px; font-size:16px; line-height:1.45; color:#2C3456}
.plan-feats svg{flex:0 0 20px; width:20px; height:20px; padding:3px; margin-top:1px; border-radius:50%; color:var(--indigo); background:rgba(91,108,255,.12); stroke-width:2.8}
.plan-pro{color:var(--text); background:linear-gradient(180deg,#141C40,#0B1020); box-shadow:0 34px 70px -34px rgba(91,108,255,.65)}
.plan-pro::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(160deg, #7A88FF, rgba(34,211,238,.8) 40%, rgba(91,108,255,.25)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.plan-pro h3{color:#fff}
.plan-pro .plan-desc,.plan-pro .pp-u,.plan-pro .pp-note{color:var(--text-2)}
.plan-pro .plan-price,.plan-pro .plan-feats{border-color:var(--line)}
.plan-pro .plan-feats li{color:var(--text)}
.plan-pro .plan-feats svg{color:var(--cyan); background:rgba(34,211,238,.15)}
.plan-pro .pp-v{color:#fff}
.plans-note{max-width:62ch; margin:34px auto 0; text-align:center; font-size:15.5px; line-height:1.6; color:var(--l-gray)}

/* =====================================================================
   Casos de éxito
   ===================================================================== */
.cases{padding-bottom:clamp(64px,7vw,100px)}
.case{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#10173A,#0B1020); box-shadow:inset 0 0 0 1px var(--line-2)}
.case-media{position:relative; display:block; overflow:hidden; min-height:420px; background:#151E44}
html.js .case .case-media.is-in:hover img,.case .case-media:hover img{transform:scale(1.045); transition:transform 1s var(--ease)}
.case-media:focus-visible{outline-offset:-3px}
.case-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.case-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,10,19,0) 55%, rgba(7,10,19,.6))}
.case-chip{position:absolute; left:20px; bottom:20px; z-index:1; display:inline-flex; align-items:center; gap:9px; max-width:calc(100% - 40px); padding:8px 12px; border-radius:10px; font-size:12.5px; color:#fff; background:rgba(7,10,19,.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px var(--line-2)}
.case-body{display:flex; flex-direction:column; padding:clamp(28px,4vw,52px)}
.case-client{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; font-size:14.5px; color:var(--gray)}
.case-logo{padding-right:14px; border-right:1px solid var(--line-2); font-family:Georgia,'Times New Roman',serif; font-size:20px; color:#fff; line-height:1.2}
.case-body h3{margin-top:22px; font-size:clamp(24px,2.4vw,32px); line-height:1.15; font-weight:620; letter-spacing:-.032em; color:#fff; text-wrap:balance}
.case-body > p{margin-top:16px; font-size:16.5px; line-height:1.65; color:var(--text-2)}
.case-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
.case-metrics div{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:12px; background:rgba(148,163,255,.05); box-shadow:inset 0 0 0 1px var(--line)}
.case-metrics b{font-size:30px; font-weight:500; letter-spacing:-.05em; line-height:1; color:#fff}
.case-metrics span{font-size:14px; line-height:1.4; color:var(--gray)}
.case-quote{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.case-quote p{font-size:17px; line-height:1.6; color:var(--text)}
.case-quote footer,.testi figcaption{display:flex; align-items:center; gap:12px}
.case-quote footer{margin-top:16px}
.case-quote footer b,.testi figcaption b{display:block; font-size:15px; font-weight:600; color:#fff}
.case-quote footer small,.testi figcaption small{display:block; font-size:13.5px; color:var(--gray)}
.ini{flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#070A13; background:var(--grad)}
.ini.i2{color:#fff; background:linear-gradient(135deg,#9C8CFA,#5B6CFF)}
.ini.i3{color:#fff; background:linear-gradient(135deg,#22D3EE,#0E7F96)}
.ini.i4{color:#fff; background:linear-gradient(135deg,#3A4775,#1C2546); box-shadow:inset 0 0 0 1px var(--line-2)}
.testis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:20px}
.testi{display:flex; flex-direction:column; padding:28px; border-radius:var(--r-lg); background:rgba(17,24,51,.6); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .35s ease, background .35s ease}
.testi:hover{background:rgba(20,28,60,.75); box-shadow:inset 0 0 0 1px rgba(122,136,255,.4)}
.pain:hover{box-shadow:0 0 0 1px rgba(91,108,255,.3), 0 1px 2px rgba(11,16,32,.04), 0 26px 50px -30px rgba(11,16,32,.32)}
.testi .stars{font-size:14px}
.testi blockquote{margin-top:14px; font-size:16.5px; line-height:1.62; color:var(--text)}
.testi figcaption{margin-top:auto; padding-top:24px}

/* =====================================================================
   Tecnologías y prensa
   ===================================================================== */
.eco{padding-top:0}
.eco .wrap > .eco-row{padding-top:clamp(64px,7vw,100px); border-top:1px solid var(--line)}
.eco-row{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,88px); align-items:center}
.eco-head h2{font-size:clamp(28px,2.8vw,40px)}
.eco-head p{margin-top:14px; font-size:17px; line-height:1.6; color:var(--text-2)}
.eco-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; border-radius:18px; overflow:hidden; background:rgba(148,163,255,.14); border:1px solid rgba(148,163,255,.14)}
.eco-grid li{grid-column:span 2; display:flex; align-items:center; justify-content:center; gap:10px; min-height:92px; padding:16px; text-align:center; background:#0A0F1F; color:rgba(200,206,235,.78)}
.eco-grid .seal{grid-column:span 3; justify-content:flex-start; gap:14px; padding:18px 24px; text-align:left}
.wm{font-size:18px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; transition:color .3s}
.wm:hover{color:#fff}
.wm-sq{display:grid; grid-template-columns:repeat(2,7px); gap:2px}
.wm-sq i{width:7px; height:7px; background:currentColor}
.wm-gw{font-weight:500; letter-spacing:-.015em}
.wm-aws{font-size:25px; font-weight:800; letter-spacing:-.05em}
.wm-az{font-size:20px; font-weight:500}
.wm-veeam{font-size:21px; font-weight:800; letter-spacing:-.035em}
.wm-forti{font-size:15.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.seal svg{flex:0 0 42px; width:42px; height:42px; fill:none; stroke:var(--cyan); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.seal span{display:flex; flex-direction:column; gap:2px}
.seal b{font-size:15px; font-weight:600; color:#fff}
.seal small{font-size:13px; line-height:1.35; color:var(--gray)}
.press{display:flex; align-items:center; gap:40px; margin-top:clamp(56px,6vw,80px)}
.press-t{flex:0 0 auto; font-size:14.5px; color:var(--gray)}
.press-list{flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap}
.pm{white-space:nowrap; color:rgba(200,206,235,.6); transition:color .3s}
.pm:hover{color:#fff}
.pm-exp{font-family:Georgia,'Times New Roman',serif; font-size:22px; font-weight:700; letter-spacing:-.02em}
.pm-lv{font-family:Georgia,'Times New Roman',serif; font-size:21px}
.pm-cd{font-size:20px; font-weight:800; letter-spacing:-.035em}
.pm-ee{font-size:20px; font-weight:700; letter-spacing:-.035em}
.pm-ee span{font-weight:400}
.pm-xa{font-size:23px; font-weight:800; letter-spacing:-.05em}
.pm-co{font-size:16px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}

/* =====================================================================
   Preguntas frecuentes
   ===================================================================== */
.faq-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,96px); align-items:start}
.faq-side{position:sticky; top:calc(var(--hd) + 32px)}
.faq-side > p{margin-top:16px; font-size:18px; line-height:1.6; color:var(--l-gray)}
.faq-card{margin-top:32px; padding:26px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px var(--l-line), 0 16px 40px -28px rgba(11,16,32,.35)}
.faq-card-t{font-size:18px; font-weight:620; letter-spacing:-.018em}
.faq-card p:not(.faq-card-t){margin-top:6px; font-size:16px; line-height:1.6; color:var(--l-gray)}
.faq-card-a{display:flex; align-items:center; gap:14px 22px; margin-top:20px; flex-wrap:wrap}
.faq-list{border-top:1px solid var(--l-line)}
.qa{border-bottom:1px solid var(--l-line)}
.qa-q{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; cursor:pointer; font-size:18px; font-weight:580; line-height:1.4; letter-spacing:-.016em; color:var(--l-ink)}
.qa-q:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:6px}
.qa-q i{position:relative; flex:0 0 32px; height:32px; border-radius:9px; background:#fff; box-shadow:0 0 0 1px var(--l-line); transition:background .3s}
.qa-q i::before,.qa-q i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.7px; margin:-.85px 0 0 -6px; border-radius:2px; background:var(--l-ink); transition:transform .4s var(--ease), background .3s}
.qa-q i::after{transform:rotate(90deg)}
.qa-q:hover i{box-shadow:0 0 0 1px rgba(11,16,32,.25)}
.qa.is-open .qa-q i{background:var(--ink)}
.qa.is-open .qa-q i::before,.qa.is-open .qa-q i::after{background:#fff}
.qa.is-open .qa-q i::after{transform:rotate(0)}
.qa-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.qa-a p{padding:0 56px 26px 0; font-size:16.5px; line-height:1.65; color:var(--l-gray)}

/* =====================================================================
   CTA final
   ===================================================================== */
.final{position:relative; overflow:hidden; isolation:isolate; padding:var(--sec) 0; background:var(--night)}
.final-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.final-bg i{position:absolute; border-radius:50%}
.final-bg .fg1{width:960px; height:960px; left:-260px; top:-360px; background:radial-gradient(closest-side, rgba(91,108,255,.3), rgba(91,108,255,0))}
.final-bg .fg2{width:860px; height:860px; right:-260px; bottom:-440px; background:radial-gradient(closest-side, rgba(34,211,238,.18), rgba(34,211,238,0))}
.final-grid{position:absolute; inset:0; background-image:linear-gradient(to right, rgba(148,163,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,255,.06) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%)}
.final-net{position:absolute; inset:0; width:100%; height:100%; -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%, #000 35%, transparent 85%); mask-image:radial-gradient(ellipse 85% 85% at 50% 50%, #000 35%, transparent 85%)}
.final-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:stretch}
.final-copy{display:flex; flex-direction:column}
.final-copy h2{font-size:clamp(34px,4vw,56px)}
.final-copy > p{margin-top:20px; font-size:18px; line-height:1.62; color:var(--text-2); max-width:36em}
.final-copy .checks{margin-bottom:36px}
.final-person{margin:0; margin-top:auto; flex:1 1 auto; display:flex; flex-direction:column; min-height:260px; border-radius:18px; overflow:hidden; background:rgba(17,24,51,.75); box-shadow:inset 0 0 0 1px var(--line)}
.fp-media{position:relative; flex:1 1 auto; min-height:170px; background:#16204A}
.fp-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.fp-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,16,32,0) 55%, rgba(11,16,32,.55))}
.fp-txt{display:flex; align-items:center; gap:14px; padding:16px 18px; border-top:1px solid var(--line)}
.fp-txt b{display:block; font-size:15.5px; font-weight:600; color:#fff}
.fp-txt > span:last-child > span{display:block; margin-top:3px; font-size:16px; line-height:1.5; color:var(--text-2)}
.form{position:relative; padding:clamp(24px,3vw,36px); border-radius:22px; background:linear-gradient(180deg, rgba(20,28,60,.92), rgba(12,17,36,.94)); box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(0,0,0,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.form::before{content:""; position:absolute; left:28px; right:28px; top:0; height:1px; background:linear-gradient(90deg, rgba(91,108,255,0), #7A88FF, #22D3EE, rgba(34,211,238,0))}
.form-head h3{font-size:22px; font-weight:620; letter-spacing:-.022em; color:#fff}
.form-head p{margin-top:4px; font-size:15px; color:var(--gray)}
.f-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:16px}
.form-head + .f-row{margin-top:24px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label,.chips legend{font-size:14px; font-weight:550; color:var(--text-2)}
.field input,.select select{width:100%; height:50px; padding:0 14px; border-radius:11px; border:1px solid var(--line-2); outline:none; font-size:16px; color:#fff; background:rgba(7,10,19,.6); transition:border-color .2s, box-shadow .2s, background .2s}
.field input::placeholder{color:#717A9F}
.field input:hover,.select select:hover{border-color:rgba(148,163,255,.4)}
.field input:focus,.select select:focus{border-color:var(--indigo-2); box-shadow:0 0 0 4px rgba(91,108,255,.22); background:rgba(7,10,19,.8)}
.select{position:relative}
.select select{-webkit-appearance:none; appearance:none; padding-right:40px; cursor:pointer}
.select select option{color:#fff; background:#0B1020}
.select svg{position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px; pointer-events:none; color:var(--gray); stroke-width:2}
.chips{display:block; margin:18px 0 0; padding:0; border:0; min-width:0}
.chips legend{padding:0; margin-bottom:10px}
.chip-list{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 12px; border-radius:999px; font-size:14.5px; color:var(--text-2); background:rgba(148,163,255,.06); box-shadow:inset 0 0 0 1px var(--line-2); transition:color .2s, background .2s, box-shadow .2s}
.chip span::before{content:""; width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1.5px rgba(148,163,255,.5); background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070A13' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size:0; transition:background-color .2s, box-shadow .2s}
.chip:hover span{color:#fff; box-shadow:inset 0 0 0 1px rgba(148,163,255,.45)}
.chip input:checked + span{color:#fff; background:rgba(91,108,255,.2); box-shadow:inset 0 0 0 1px rgba(122,136,255,.85)}
.chip input:checked + span::before{background-color:var(--cyan); background-size:10px; box-shadow:none}
.chip input:focus-visible + span{outline:2px solid var(--cyan); outline-offset:2px}
.consent{display:flex; align-items:flex-start; gap:10px; margin-top:20px; font-size:14px; line-height:1.5; color:var(--gray); cursor:pointer}
.consent input{flex:0 0 18px; width:18px; height:18px; margin:1px 0 0; accent-color:var(--indigo)}
.consent a{color:#fff; text-decoration:underline; text-underline-offset:2px}
.form .btn-full{margin-top:20px; min-height:54px; font-size:16px}
.form-note{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:13.5px; color:var(--gray); text-align:center}
.form-note svg{flex:0 0 14px; width:14px; height:14px; color:var(--ok)}

/* =====================================================================
   Pie de página
   ===================================================================== */
.ft{padding:clamp(64px,7vw,96px) 0 28px; background:#05070E; border-top:1px solid var(--line); color:var(--text-2)}
.ft-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)) minmax(0,1.3fr); gap:28px}
.ft-brand p{margin-top:18px; max-width:32ch; font-size:15px; line-height:1.6; color:var(--gray)}
.status{display:inline-flex; align-items:center; gap:10px; height:34px; margin-top:22px; padding:0 14px; border-radius:999px; font-size:13.5px; color:var(--text); background:rgba(52,211,153,.07); box-shadow:inset 0 0 0 1px rgba(52,211,153,.24); transition:background .2s}
.status:hover{background:rgba(52,211,153,.12)}
.status i{width:8px; height:8px; background:var(--ok)}
.social{display:flex; gap:8px; margin-top:22px}
.social a{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--gray); background:rgba(148,163,255,.06); box-shadow:inset 0 0 0 1px var(--line); transition:color .2s, background .2s}
.social svg{width:17px; height:17px; fill:currentColor}
.social a:hover{color:#fff; background:rgba(148,163,255,.12)}
.ft-col h4{margin-bottom:16px; font-size:14px; font-weight:600; color:#fff}
.ft-col ul{display:grid; gap:11px}
.ft-col a{font-size:15px; color:var(--gray); transition:color .2s}
.ft-col a:hover{color:#fff}
.ft-contact li{display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; color:var(--gray)}
.ft-contact svg{flex:0 0 16px; width:16px; height:16px; margin-top:3px; color:var(--indigo-soft)}
.ft-bot{display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--gray)}
.ft-legal{display:flex; gap:22px; flex-wrap:wrap}
.ft-legal a{transition:color .2s}
.ft-legal a:hover{color:#fff}
.ft .sr-credit a{color:#fff}

/* =====================================================================
   Cursor "nodo": punto cian con halo índigo, estela corta y corchetes < > en enlaces
   ===================================================================== */
html.cursor-informatica{
  --cur-dot:6px; --cur-dot-bg:#22D3EE;
  --cur-ring:38px; --cur-ring-border:1px solid rgba(122,136,255,.5);
  --cur-ring-bg:radial-gradient(circle, rgba(91,108,255,.28) 0%, rgba(91,108,255,.1) 42%, rgba(91,108,255,0) 70%);
  --cur-link-scale:.45; --cur-link-bg:transparent; --cur-link-dot:.85;
  --cur-label-size:98px; --cur-label-bg:linear-gradient(135deg,#7A88FF 0%,#22D3EE 100%); --cur-label-fg:#070A13; --cur-label-font:'Geist', system-ui, sans-serif;
  --cur-lerp:.22;
  --cur-dark-dot:#4F5FF7; --cur-dark-ring:1px solid rgba(79,95,247,.45);
  --cur-light-dot:#22D3EE; --cur-light-ring:1px solid rgba(122,136,255,.5);
}
html.cursor-informatica .cur-dot::before{box-shadow:0 0 0 2px rgba(34,211,238,.16), 0 0 14px 2px rgba(34,211,238,.6)}
html.has-cur.cursor-informatica.cur-dark{--cur-ring-bg:radial-gradient(circle, rgba(79,95,247,.16) 0%, rgba(79,95,247,.05) 45%, rgba(79,95,247,0) 70%)}
html.has-cur.cursor-informatica.cur-dark .cur-dot::before{box-shadow:0 0 0 2px rgba(79,95,247,.14), 0 0 10px rgba(79,95,247,.4)}
html.has-cur.cursor-informatica.cur-link .cur-ring::before{opacity:0}
html.cursor-informatica .cur-label{box-shadow:0 14px 40px -12px rgba(34,211,238,.55)}
.nd-br{position:absolute; left:0; top:0}
.nd-br i{position:absolute; left:0; top:0; font:500 21px/1 var(--mono); font-style:normal; color:var(--cyan); text-shadow:0 0 12px rgba(34,211,238,.65); opacity:0; transform:translate(-50%,-56%); transition:transform .38s var(--ease-o), opacity .22s ease}
html.cur-link .nd-br i:first-child{opacity:1; transform:translate(-50%,-56%) translateX(-22px)}
html.cur-link .nd-br i:last-child{opacity:1; transform:translate(-50%,-56%) translateX(22px)}
html.cur-down .nd-br i:first-child{transform:translate(-50%,-56%) translateX(-12px)}
html.cur-down .nd-br i:last-child{transform:translate(-50%,-56%) translateX(12px)}
html.cur-dark .nd-br i{color:#4F5FF7; text-shadow:none}
.nd-trail{position:fixed; inset:0; pointer-events:none; z-index:10049; opacity:1; transition:opacity .25s}
.nd-trail i{position:fixed; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; background:var(--cyan); opacity:var(--o); will-change:transform}
html:not(.cur-on) .nd-trail,html.cur-link .nd-trail,html.cur-text .nd-trail,html.cur-hide .nd-trail{opacity:0}
html.cur-dark .nd-trail i{background:#4F5FF7}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1180px){
  .ft-top{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.35fr); row-gap:44px}
  .ft-brand{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; align-items:start}
  .ft-brand .logo{grid-column:1}
  .ft-brand p{grid-column:1}
  .ft-brand .status{grid-column:2; grid-row:1; margin-top:0; justify-self:end}
  .ft-brand .social{grid-column:2; grid-row:2; align-self:start; justify-self:end; margin-top:18px}
}
@media (max-width:1200px){
  .ed-code{font-size:12.5px}
  .ed-code::before{height:calc(12.5px * 1.75)}
  @keyframes edhl{from{transform:translateY(0)} to{transform:translateY(calc(16 * 12.5px * 1.75))}}
}
@media (max-width:1100px){
  .plog{font-size:12px}
  .press{flex-direction:column; align-items:flex-start; gap:24px}
  .press-list{width:100%}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 40px}
  .app-body{grid-template-columns:190px minmax(0,1fr)}
}
@media (max-width:1100px) and (min-width:961px){
  .proof-sep{display:none}
  .hero-proof{gap:16px 24px}
}
@media (max-width:1100px) and (min-width:961px){
  .l-toast{width:222px; bottom:-22px}
  .hv-toast{gap:10px; padding:11px 12px}
  .toast-txt small{font-size:11.5px}
}
@media (max-width:1060px){
  .hero-in{gap:44px}
  .l-main{margin-left:24px}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr); gap:56px}
  .hero-copy{max-width:680px}
  .hv{width:100%; max-width:600px; justify-self:center}
  .stats-in,.dev-in,.faq-in,.final-in,.eco-row{grid-template-columns:minmax(0,1fr)}
  .stats-in{gap:44px}
  .faq-side{position:static}
  .faq-in{gap:40px}
  .plans-grid{grid-template-columns:minmax(0,1fr); max-width:560px; margin:0 auto; row-gap:20px}
  .plan{grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column}
  .case{grid-template-columns:minmax(0,1fr)}
  .case-media{min-height:0; aspect-ratio:16 / 9}
  .testis{grid-template-columns:minmax(0,1fr)}
  .press-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 24px}
  .pains-grid{grid-template-columns:minmax(0,1fr); row-gap:16px}
  .pain{grid-row:auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:32px; padding:28px}
  .pain .plog{grid-column:1; grid-row:1}
  .pain h3{grid-column:1; grid-row:2}
  .pain > p{grid-column:1; grid-row:3}
  .pfix{grid-column:2; grid-row:1 / span 3; margin:-28px -28px -28px 0; padding:28px; border-top:0; border-left:1px solid rgba(91,108,255,.16)}
  .final-person{margin-top:0; min-height:0}
  .fp-media{flex:none; aspect-ratio:16 / 9; min-height:0}
}
@media (max-width:900px){
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-side{display:none}
  .steps-track{left:27px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg, var(--line-2) 0 90%, rgba(148,163,255,0))}
  .steps-fill{transform:scaleY(var(--p)); transform-origin:top}
  .steps-head{left:-1px; right:auto; top:0; bottom:0; width:3px; height:auto; transform:translateY(calc(var(--p) * 100%))}
  .steps-head i{right:auto; left:0; top:auto; bottom:100%; width:3px; height:80px; background:linear-gradient(180deg, rgba(255,255,255,0), #fff)}
  .steps-list{grid-template-columns:minmax(0,1fr); gap:40px}
  .step{display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:22px; align-items:start}
  .step-n{grid-row:1 / span 3}
  .step-time{margin-top:2px; justify-self:start}
  .step h3{margin-top:12px}
  .step p{grid-column:2}
}
@media (max-width:760px){
  body{font-size:16px}
  .pain{grid-template-columns:none; grid-template-rows:none; display:flex; flex-direction:column; padding:26px 26px 0}
  .pfix{margin:26px -26px 0; padding:20px 26px 26px; border-left:0; border-top:1px solid rgba(91,108,255,.16)}
  .bento{grid-template-columns:minmax(0,1fr)}
  .svc{grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column}
  .svc-more{align-self:flex-start}
  .gp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-grid{grid-template-columns:minmax(0,1fr)}
  .gtr{grid-template-columns:1.2fr 1fr 1fr}
  .c-opt,.c-opt2{display:none}
}
@media (max-width:480px){
  .gtr{grid-template-columns:minmax(0,1.3fr) auto}
  .gtr > span:nth-child(2){display:none}
}
@media (max-width:760px){
  .app-main{padding:16px}
  .stats-grid{grid-template-columns:minmax(0,1fr)}
  .stat:nth-child(odd):not(.stat-up){border-right:0}
  .stats-grid .stat-up{padding:22px 24px 20px}
  .up-bars{gap:1px; height:30px}
  .stat{padding:30px 24px 28px}
  .stat::before{left:24px}
  .case-metrics{grid-template-columns:minmax(0,1fr)}
  .case-metrics div{flex-direction:row; align-items:baseline; gap:14px}
  .case-metrics b{flex:0 0 84px}
  .eco-grid li{grid-column:span 3}
  .eco-grid .seal{grid-column:span 6}
  .f-row{grid-template-columns:minmax(0,1fr)}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px}
  .ft-brand{display:block}
  .ft-brand .social,.ft-brand .status{justify-self:start}
  .form-note{justify-content:flex-start; align-items:flex-start; text-align:left}
  .form-note svg{margin-top:3px}
  .ft-brand .status{margin-top:22px}
  .ft-brand .social{margin-top:22px}
  .ft-contact{grid-column:1 / -1}
  .ft-bot{flex-direction:column; align-items:flex-start}
  .qa-a p{padding-right:0}
  .qa-q{font-size:17px; padding:22px 0}
  .faq-card-a .btn{width:100%}
}
@media (max-width:600px){
  .hero{padding-top:calc(var(--hd) + 36px)}
  .hero-proof{gap:16px 20px}
  .proof-sep{display:none}
  .hero-cta .btn{flex:1 1 100%}
  .hv{padding-bottom:116px}
  .l-main{margin-left:0}
  .l-term{left:14px; width:calc(100% - 28px); bottom:-116px}
  .l-toast{display:none}
  .hv-status{padding:14px}
  .kpi{padding:12px}
  .kpi-v{font-size:19px}
  .hvs-chart{padding:12px 12px 10px}
  .chart-box{height:78px}
  .term-body{font-size:12px; height:calc(12px * 1.75 * 4 + 26px); padding:12px 14px 14px}
  .live{padding:4px 9px; font-size:12px}
  .hvs-title{font-size:14px}
  .g-tabs{width:100%}
  .g-tab{flex:1; padding:0 8px; font-size:14px; gap:6px}
  .g-tab svg{display:none}
  .app-url{transform:none; font-size:12px}
  .app-dots{flex-basis:auto}
  .app-bar-sp{display:none}
  .gp-head p{display:none}
  .gk{padding:12px}
  .gk b{font-size:21px}
  .hbars li{grid-template-columns:minmax(0,1fr) 40px; row-gap:6px}
  .hbars li span{grid-column:1 / -1}
  .hbars li i{grid-column:1}
  .gc-chart .legend{display:none}
  .perks{grid-template-columns:minmax(0,1fr); gap:28px}
  .bill{width:100%}
  .bill-btn{min-width:0}
  .plan{padding:26px 22px}
  .case-chip{left:14px; bottom:14px; max-width:calc(100% - 28px)}
  .testi{padding:24px}
  .fp-txt{align-items:flex-start; padding:14px 16px}
  .press-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px}
  .gk > span{white-space:normal; min-height:2.6em; line-height:1.3}
  .eco-grid li{min-height:80px; padding:12px 10px}
  .wm{font-size:15px}
  .wm-aws{font-size:21px}
  .wm-az,.wm-veeam{font-size:17px}
  .wm-forti{font-size:13px; letter-spacing:.12em}
  .eco-grid .seal{padding:16px 18px}
  .ed-code{font-size:11.5px}
  .ed-code::before{display:none}
  .ln{white-space:pre-wrap; overflow-wrap:anywhere; padding-right:12px; padding-left:calc(42px + 4ch); text-indent:-4ch}
  .ln i{text-indent:0}
  .ed-code code{min-width:0}
  .ed-code{font-size:12.5px}
  .ln i{width:28px}
}
@media (max-width:430px){
  .hvs-head{gap:8px}
  .hvs-title{font-size:13.5px; gap:8px}
  .hvs-title svg{width:20px; height:20px}
  .live{padding:4px 8px; gap:6px; font-size:11.5px}
}
@media (max-width:400px){
  .ed-code{font-size:11px}
  .ln{padding-left:calc(34px + 4ch); padding-right:10px}
  .ln i{width:24px}
  .ed-tab:not(.is-on){display:none}
  .cd{font-size:11px; width:92%}
  .cd::before{height:calc(11px * 1.9)}
  .cd-l{padding-left:34px}
  .cd-l i{left:12px}
  .kpi-l{font-size:12px}
  .kpi-v{font-size:18px}
  .tk,.bk{width:90%}
  .sh{gap:12px}
  .sh-shield{flex-basis:56px; height:64px}
  .sh-shield svg{width:56px; height:64px}
  @keyframes scan{to{transform:translateY(44px)}}
  .pfix-top{flex-direction:column; align-items:flex-start}
  .plog{font-size:12px}
}

@media (max-width:374px){
  .live span{display:none}
  .live{padding:6px}
}

/* =====================================================================
   Movimiento reducido
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .beam,.marquee-track > ul[aria-hidden="true"]{display:none}
  .marquee-track{animation:none !important; width:auto; justify-content:center}
  .marquee-list{flex-wrap:wrap; justify-content:center; row-gap:16px; padding-right:0}
  .marquee{-webkit-mask-image:none; mask-image:none}
  .svc-vis *,.svc-vis *::before,.svc-vis *::after,.mesh i,.live i::after,.beat::after,.c-dot::after,.status i::after,.cl-hub::after,.btn-glow::before,.btn-glow::after{animation:none !important}
  .tk-status b,.tk-typing{opacity:0}
  .tk-status .s3,.tk-text{opacity:1}
  .bk{--pc:100}
  .bk-bar i{transform:none}
  .bk-dest span{color:var(--ok-t); background:rgba(52,211,153,.08); box-shadow:inset 0 0 0 1px rgba(52,211,153,.4)}
  .nw-ap i:first-child{opacity:.5; transform:scale(.55)}
  .ed-code::before,.cd::before{display:none}
}