/* ══════════════════════════════════════════════════════════════
   INsights — Marketing estratégico basado en datos
   Sistema de diseño · Identidad de marca
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca (obligatorios) ── */
  --purple:      #4B21C4;
  --dark:        #0B0534;
  --light:       #E4E8EB;

  /* ── Derivados de marca ── */
  --purple-lite: #9B7BFF;   /* morado accesible sobre oscuro (5.2:1) */
  --purple-glow: #6D3BF5;
  --purple-deep: #2E1178;
  --void:        #07031F;   /* fondo más profundo para capas */
  --ink-2:       #120A46;

  /* ── Texto ── */
  --text:        var(--light);
  --text-mut:    rgba(228,232,235,.66);
  --text-dim:    rgba(228,232,235,.42);

  /* ── Glass / lente ── */
  --glass:       rgba(228,232,235,.055);
  --glass-2:     rgba(228,232,235,.09);
  --stroke:      rgba(228,232,235,.13);
  --stroke-2:    rgba(228,232,235,.22);

  /* ── Tipografía ── */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Espaciado (marketing: aireado) ── */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2.5rem; --s-5: 4rem;   --s-6: 6rem;   --s-7: 9rem;

  --wrap: 1280px;
  --r:  18px;
  --r-lg: 28px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

/* ══════ RESET ══════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  font-family:var(--f-body);
  font-size:16px; line-height:1.6;
  color:var(--text);
  background:var(--dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; height:auto }
svg{ display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
ul{ list-style:none }

::selection{ background:var(--purple); color:#fff }

:focus-visible{
  outline:2px solid var(--purple-lite);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--void) }
::-webkit-scrollbar-thumb{ background:var(--purple-deep); border-radius:10px }
::-webkit-scrollbar-thumb:hover{ background:var(--purple) }

/* ══════ TIPOGRAFÍA BASE ══════ */
.mono-label{
  font-family:var(--f-mono);
  font-size:.688rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--purple-lite);
  font-weight:500;
}
.h2{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:500;
}
.h2.xl{ font-size:clamp(2.4rem,6vw,5.2rem) }
.h3{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:500;
}
.p-lead{
  font-size:clamp(1rem,1.35vw,1.125rem);
  color:var(--text-mut);
  max-width:56ch;
}
.grad{
  background:linear-gradient(100deg,var(--purple-lite) 0%,#D6C7FF 45%,var(--purple-glow) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Con el relleno transparente, un text-shadow se pinta ENCIMA del
     degradado recortado y lo apaga. La sombra va con drop-shadow. */
  text-shadow:none;
}
.hl{ color:var(--purple-lite) }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }

.sec-head{ margin-bottom:var(--s-5) }
.sec-head .mono-label{ display:block; margin-bottom:var(--s-2) }
.sec-head.center{ text-align:center }
.sec-head.center .center-p{ margin:var(--s-3) auto 0 }
.center-label{ display:block; text-align:center }

/* ══════ BOTONES ══════ */
.btn{
  --bg:transparent;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.6rem;
  min-height:48px;
  font-family:var(--f-body); font-size:.938rem; font-weight:500;
  letter-spacing:-.01em;
  border:1px solid var(--stroke-2);
  border-radius:100px;
  background:var(--bg);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .35s var(--e-out), transform .35s var(--e-out), color .35s var(--e-out);
}
.btn span{ position:relative; z-index:2 }
.btn svg{ width:18px; height:18px; position:relative; z-index:2; transition:transform .4s var(--e-out) }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,var(--purple) 0%,var(--purple-glow) 100%);
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover::before{ transform:translateY(0) }
.btn:hover{ border-color:transparent; color:#fff }
.btn:hover svg{ transform:translateX(4px) }
.btn:active{ transform:scale(.97) }

.btn-primary{
  background:linear-gradient(100deg,var(--purple) 0%,var(--purple-glow) 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 34px -10px rgba(75,33,196,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary::before{
  background:linear-gradient(100deg,#5E2EE8 0%,#8B5BFF 100%);
}
.btn-ghost{ background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.btn-sm{ padding:.7rem 1.15rem; font-size:.875rem; min-height:42px }
.btn.full{ width:100%; justify-content:center }

/* ══════════════════════════════════════════════════════════════
   PRELOADER
   ══════════════════════════════════════════════════════════════ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--dark);
}
.preloader::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(75,33,196,.35), transparent 62%);
}
.pre-core{ position:relative; z-index:2; display:grid; justify-items:center; gap:2rem }
.pre-lens{ position:relative; width:132px; height:132px; display:grid; place-items:center }
.pre-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(228,232,235,.16);
}
.pre-ring.r2{ inset:14px; border-color:rgba(155,123,255,.3) }
.pre-ring.r3{ inset:28px; border-color:rgba(155,123,255,.5); border-top-color:transparent; border-left-color:transparent }
/* El isotipo es morado de marca; sobre fondos morados/oscuros se usa
   la versión en blanco (misma forma, contraste legible). */
.mark-w{ filter:brightness(0) invert(1) }
.pre-mark{ width:46px; opacity:0; filter:brightness(0) invert(1) }
.pre-meta{ display:flex; align-items:baseline; gap:1rem }
.pre-label{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.24em; color:var(--text-dim) }
.pre-num{ font-family:var(--f-mono); font-size:.9rem; color:var(--purple-lite); font-weight:500 }
.pre-bar{ width:180px; height:1px; background:rgba(228,232,235,.13); overflow:hidden }
.pre-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--purple),var(--purple-lite)) }

/* ══════════════════════════════════════════════════════════════
   CURSOR — lente líquida
   ══════════════════════════════════════════════════════════════ */
.cursor{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:0 }
.cursor-lens{
  position:absolute; top:0; left:0;
  width:42px; height:42px; margin:-21px 0 0 -21px;
  border-radius:50%;
  border:1px solid rgba(228,232,235,.32);
  background:rgba(155,123,255,.05);
  backdrop-filter:blur(1.5px) saturate(175%) brightness(1.22);
  -webkit-backdrop-filter:blur(1.5px) saturate(175%) brightness(1.22);
  box-shadow:
    inset 0 0 18px rgba(155,123,255,.28),
    inset 0 1px 1px rgba(255,255,255,.35),
    0 6px 26px rgba(75,33,196,.34);
  display:grid; place-items:center;
  will-change:transform;
}
.cursor-label{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em;
  color:#fff; opacity:0; white-space:nowrap; transform:scale(.7);
  transition:opacity .25s, transform .25s;
}
.cursor.is-hot .cursor-label{ opacity:1; transform:scale(1) }
.cursor-dot{
  position:absolute; top:0; left:0;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--light);
  will-change:transform;
}
.cursor.is-hot .cursor-dot{ opacity:0 }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ══════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:1.1rem clamp(1.25rem,3vw,2.5rem);
  transition:padding .5s var(--e-out), background .5s var(--e-out), border-color .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:.7rem;
  background:rgba(11,5,52,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom-color:var(--stroke);
}
.nav.is-hidden{ transform:translateY(-105%) }
.nav{ transition:transform .55s var(--e-out), padding .5s var(--e-out), background .5s var(--e-out), border-color .5s var(--e-out) }

.nav-logo{ display:flex; align-items:center }
.nav-logo-full{ height:26px; width:auto }
.nav-logo-mark{ height:26px; width:auto; display:none }

.nav-links{ display:flex; gap:.35rem; align-items:center }
.nav-link{
  position:relative; padding:.55rem .9rem; border-radius:100px;
  font-size:.9rem; color:var(--text-mut);
  transition:color .3s var(--e-out);
  overflow:hidden;
}
.nav-link span{ position:relative; z-index:2; display:block }
.nav-link::before{
  content:''; position:absolute; inset:0; border-radius:100px;
  background:var(--glass-2); opacity:0; transform:scale(.85);
  transition:opacity .35s var(--e-out), transform .35s var(--e-out);
}
.nav-link:hover{ color:var(--text) }
.nav-link:hover::before{ opacity:1; transform:scale(1) }
.nav-link.is-current{ color:var(--text) }
.nav-link.is-current::after{
  content:''; position:absolute; left:50%; bottom:.3rem;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--purple-lite);
}

.nav-right{ display:flex; align-items:center; gap:.75rem }

.burger{
  display:none; width:44px; height:44px;
  background:var(--glass); border:1px solid var(--stroke);
  border-radius:50%; cursor:pointer;
  place-items:center; gap:5px; align-content:center; justify-items:center;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.burger i{
  display:block; width:16px; height:1.5px; background:var(--light); border-radius:2px;
  transition:transform .45s var(--e-out), opacity .3s;
}
.burger.is-open i:first-child{ transform:translateY(3.25px) rotate(45deg) }
.burger.is-open i:last-child{ transform:translateY(-3.25px) rotate(-45deg) }

/* ══════ MENÚ FULLSCREEN ══════ */
.menu{
  position:fixed; inset:0; z-index:999;
  visibility:hidden; pointer-events:none;
}
.menu.is-open{ visibility:visible; pointer-events:auto }
.menu-bg{
  position:absolute; inset:0;
  background:linear-gradient(160deg,var(--void) 0%,var(--dark) 45%,var(--purple-deep) 130%);
  clip-path:circle(0% at calc(100% - 3.5rem) 3.2rem);
}
.menu-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 12%, rgba(75,33,196,.5), transparent 55%);
}
.menu-inner{
  position:relative; height:100%;
  display:grid; grid-template-columns:1.5fr .9fr; align-items:center; gap:var(--s-5);
  width:min(100% - 3rem,var(--wrap)); margin-inline:auto;
  padding-top:5rem;
}
.menu-nav{ display:grid; gap:.15rem }
.menu-item{
  position:relative; display:flex; align-items:baseline; gap:1.25rem;
  padding:.35rem 0;
  overflow:hidden;
}
.menu-item em{
  font-family:var(--f-mono); font-size:.7rem; font-style:normal;
  color:var(--purple-lite); opacity:.65; letter-spacing:.1em;
}
.menu-item span{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.2rem,7vw,5rem); line-height:1.06; letter-spacing:-.035em;
  color:var(--text);
  transition:color .4s var(--e-out), transform .5s var(--e-out);
  display:block;
}
.menu-item:hover span{ color:var(--purple-lite); transform:translateX(1.25rem) }

.menu-aside{ display:grid; gap:var(--s-4); align-content:center }
.menu-quote{
  font-family:var(--f-display); font-size:1.35rem; line-height:1.3;
  letter-spacing:-.02em; margin-top:.65rem; color:var(--text-mut);
}
.menu-foot{ padding-top:var(--s-3); border-top:1px solid var(--stroke) }
.menu-mail{
  display:inline-block; margin-top:.5rem; font-size:1rem;
  border-bottom:1px solid var(--stroke-2); padding-bottom:2px;
  transition:color .3s, border-color .3s;
  word-break:break-word;
}
.menu-mail:hover{ color:var(--purple-lite); border-color:var(--purple-lite) }
.menu-social{ display:grid; gap:.6rem; margin-top:1rem }
.menu-social a{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.938rem; color:var(--text-mut); width:fit-content;
  transition:color .3s;
}
.menu-social a svg{ width:18px; height:18px; color:var(--purple-lite) }
.menu-social a:hover{ color:var(--text) }

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:stretch; justify-content:center;
  padding:clamp(4.25rem,7.5vh,5.75rem) 0 clamp(1.25rem,3vh,2.5rem);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 38%, rgba(75,33,196,.30), transparent 64%),
    radial-gradient(ellipse 70% 60% at 10% 92%, rgba(46,17,120,.38), transparent 66%),
    var(--dark);
}
.particles{ position:absolute; inset:0; width:100%; height:100%; z-index:1 }
.hero-aura{
  position:absolute; z-index:0;
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  left:50%; top:42%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(109,59,245,.26), transparent 66%);
  filter:blur(52px);
}

.hero-inner{
  position:relative; z-index:3; flex:1;
  width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.85rem,2.2vh,2rem);
}

/* ── Composición de fondo + título encima ──
   La imagen toma el alto que sobra tras el texto y los botones. Con una
   altura fija en vh, en pantallas bajas los botones quedaban recortados. */
.hero-visual{
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-height:220px; max-height:660px;
  perspective:1400px; perspective-origin:50% 50%;
}
/* La proporción sigue a la de la imagen (3/2). Con un escenario cuadrado
   la composición apaisada quedaba encajonada y perdía presencia; así llena
   el marco igual que antes y conserva la misma altura del hero. */
.hv-stage{
  position:absolute; top:0; bottom:0; left:50%;
  translate:-50% 0;
  aspect-ratio:3/2; max-width:100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.hero-title-wrap{
  position:absolute; inset:0; z-index:5;
  display:grid; place-items:center;
  /* sube un poco el bloque: la última línea caía sobre la pantalla
     encendida de la laptop, la zona más brillante de la composición */
  padding-bottom:7%;
  pointer-events:none;
}
/* Velo muy leve: sólo asienta el título sin apagar la composición.
   El grueso de la legibilidad lo aporta el text-shadow. */
.hero-title-wrap::before{
  content:''; position:absolute; inset:12% 4%;
  background:radial-gradient(ellipse 52% 48% at 50% 46%, rgba(11,5,52,.68), rgba(11,5,52,.28) 62%, transparent 82%);
  filter:blur(28px);
}
.hero-title{
  position:relative;
  font-family:var(--f-display);
  /* La imagen se dimensiona por alto: el título se limita también con vh
     para no salirse de ella en pantallas anchas y bajas. */
  font-size:clamp(1.7rem,min(4.5vw,9.5vh),4.15rem);
  line-height:1.02; letter-spacing:-.04em; font-weight:500;
  text-align:center;
  text-shadow:0 2px 10px rgba(11,5,52,.95), 0 6px 40px rgba(11,5,52,.8);
}
.hero-title .grad{ filter:drop-shadow(0 3px 16px rgba(11,5,52,.95)) }

/* ── Texto y botones, debajo de la imagen ── */
.hero-copy{
  flex:0 0 auto;
  display:grid; justify-items:center;
  gap:clamp(.7rem,1.6vh,1.35rem);
  text-align:center;
  width:min(100%,720px); margin-inline:auto;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.05rem;
  border:1px solid var(--stroke);
  border-radius:100px;
  background:rgba(228,232,235,.04);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text-mut);
  font-size:.625rem;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--purple-lite);
  box-shadow:0 0 0 0 rgba(155,123,255,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(155,123,255,.55) }
  70%{ box-shadow:0 0 0 12px rgba(155,123,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(155,123,255,0) }
}
.hero-sub{
  font-size:clamp(.95rem,1.25vw,1.075rem);
  color:var(--text-mut); max-width:62ch;
}
.hero-sub strong{ color:var(--text); font-weight:600 }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem }

/* ── Capas de la composición 3D ── */
.hv-glow{
  position:absolute; inset:8%;
  background:radial-gradient(circle, rgba(109,59,245,.42), transparent 62%);
  filter:blur(38px);
  transform:translateZ(-140px);
}
.hv-ring{
  position:absolute; inset:6%;
  border:1px solid rgba(155,123,255,.16); border-radius:50%;
  transform:translateZ(-70px);
}
.hv-ring::after{
  content:''; position:absolute; inset:11%;
  border:1px solid rgba(228,232,235,.07); border-radius:50%;
}
/* Composición: JPEG de color + PNG de máscara con canal alfa.
   Pesa 495 KB en vez de los 2.1 MB del PNG original, con el color a
   resolución completa (1536 px, calidad 92) para conservar la nitidez.
   La máscara DEBE llevar canal alfa: mask-mode:match-source lo usa. */
.hv-explosion{
  position:absolute; inset:0;
  background-image:url('../assets/hero-rgb.jpg');
  background-size:contain; background-position:center; background-repeat:no-repeat;
  -webkit-mask-image:url('../assets/hero-mask.png');
  mask-image:url('../assets/hero-mask.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transform:translateZ(40px);
  filter:drop-shadow(0 30px 60px rgba(75,33,196,.45));
}
.hv-chip{
  position:absolute;
  display:grid; gap:.1rem;
  padding:.6rem .85rem;
  border-radius:14px;
  background:rgba(11,5,52,.55);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.13);
  will-change:transform;
}
.hv-chip b{ font-family:var(--f-mono); font-size:.875rem; font-weight:500; letter-spacing:-.01em }
.hv-chip .mono-label{ font-size:.563rem; letter-spacing:.14em }
.chip-a{ top:9%;  left:-4%;  transform:translateZ(110px) }
.chip-b{ top:44%; right:-7%; transform:translateZ(150px) }
.chip-c{ bottom:12%; left:4%; transform:translateZ(85px) }

/* ══════════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════════ */
.marquee{
  position:relative; overflow:hidden;
  padding:.6rem 0;
  border-block:1px solid var(--stroke);
  background:linear-gradient(90deg,var(--ink-2),var(--dark),var(--ink-2));
}
.marquee-track{ display:flex; width:max-content; will-change:transform }
.marquee-track span{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(.75rem,1.05vw,.938rem);
  letter-spacing:.02em; white-space:nowrap; padding-right:1.5rem;
  color:var(--text-mut);
}
.marquee-track i{ color:var(--purple-lite); font-style:normal; padding-inline:.45rem }

/* ══════════════════════════════════════════════════════════════
   LENTE REVELADORA
   ══════════════════════════════════════════════════════════════ */
.lens-sec{ position:relative; background:var(--dark) }
.lens-pin{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
  padding:var(--s-6) 0;
}
.lens-particles{ position:absolute; inset:0; width:100%; height:100% }
.lens-content{
  position:relative; z-index:3;
  width:min(100% - 2.5rem, 1000px);
  text-align:center;
}
.lens-content .center-label{ margin-bottom:var(--s-3) }
.lens-text-wrap{ position:relative }
.lens-text{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,4.1vw,3.4rem);
  line-height:1.14; letter-spacing:-.03em;
}
.lens-text.base{ --ba:.17; color:rgba(228,232,235,var(--ba)) }
.lens-text.base span{ color:rgba(155,123,255,calc(var(--ba) * 1.5)) }
.lens-text.lit{
  position:absolute; inset:0;
  color:var(--light);
  /* revelado circular controlado por JS */
  -webkit-mask-image:radial-gradient(circle var(--lr,0px) at var(--lx,50%) var(--ly,50%), #000 62%, transparent 100%);
  mask-image:radial-gradient(circle var(--lr,0px) at var(--lx,50%) var(--ly,50%), #000 62%, transparent 100%);
}
.lens-text.lit span{
  color:var(--purple-lite);
  text-shadow:0 0 34px rgba(155,123,255,.6);
}
.lens-orb{
  position:absolute; top:0; left:0;
  width:230px; height:230px; margin:-115px 0 0 -115px;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(228,232,235,.26);
  /* interior casi transparente: el texto revelado debe leerse A TRAVÉS
     de la lente, no quedar velado por ella */
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.07), transparent 52%);
  backdrop-filter:saturate(135%) brightness(1.1) contrast(1.04);
  -webkit-backdrop-filter:saturate(135%) brightness(1.1) contrast(1.04);
  box-shadow:
    inset 0 0 42px rgba(155,123,255,.13),
    inset 0 2px 3px rgba(255,255,255,.34),
    inset 0 -8px 22px rgba(75,33,196,.22),
    0 20px 70px -22px rgba(75,33,196,.6);
  will-change:transform;
  opacity:0;
}
.lens-orb-ring{
  position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(155,123,255,.22);
}
.lens-orb-shine{
  position:absolute; top:12%; left:16%; width:34%; height:22%;
  border-radius:50%;
  background:linear-gradient(140deg, rgba(255,255,255,.38), transparent 70%);
  filter:blur(6px);
}

/* ══════════════════════════════════════════════════════════════
   ESCENARIO — sala de juntas
   ══════════════════════════════════════════════════════════════ */
.scene{ position:relative; background:var(--void) }
.scene-pin{
  position:relative; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.scene-img{ position:absolute; inset:0; will-change:transform }
.scene-img img{ width:100%; height:100%; object-fit:cover }
.scene-vig{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 62% 62% at 50% 45%, transparent 18%, rgba(7,3,31,.66) 78%),
    linear-gradient(to bottom, rgba(7,3,31,.72) 0%, transparent 26%, transparent 52%, rgba(7,3,31,.94) 100%);
}
.scene-cards{
  position:absolute; inset:0; z-index:3;
  perspective:1000px; pointer-events:none;
}
.s-card{
  position:absolute;
  display:grid; gap:.5rem;
  padding:.85rem 1rem;
  min-width:150px;
  border-radius:16px;
  background:rgba(11,5,52,.62);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(16px) saturate(165%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  will-change:transform,opacity;
}
.s-card .mono-label{ font-size:.563rem }
.sc1{ top:22%; left:9% }
.sc2{ top:56%; left:16% }
.sc3{ top:32%; right:10% }
.s-card .spark{ width:110px; height:34px }
.s-num{ font-family:var(--f-mono); font-size:1.5rem; font-weight:500; color:#7CF5C4; letter-spacing:-.02em }
.s-bars{ display:flex; align-items:flex-end; gap:4px; height:34px }
.s-bars i{
  width:9px; height:var(--v); border-radius:3px;
  background:linear-gradient(to top,var(--purple),var(--purple-lite));
}
.scene-copy{
  position:relative; z-index:4;
  width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  align-self:end; padding-bottom:var(--s-5);
  will-change:transform,opacity;
}
.scene-copy .mono-label{ display:block; margin-bottom:.75rem }
.scene-copy .p-lead{ margin-top:var(--s-2) }

/* ══════════════════════════════════════════════════════════════
   DIFERENCIADORES
   ══════════════════════════════════════════════════════════════ */
.diff{ position:relative; padding:var(--s-7) 0; background:var(--dark); overflow:hidden }
/* Halo de fondo: sin él las tarjetas flotaban sobre un plano liso */
.diff-aura{
  position:absolute; left:0; right:0; bottom:-12%; height:82%;
  background:
    radial-gradient(ellipse 58% 58% at 24% 38%, rgba(75,33,196,.32), transparent 62%),
    radial-gradient(ellipse 54% 54% at 82% 68%, rgba(109,59,245,.24), transparent 64%);
  filter:blur(64px); pointer-events:none;
}
.diff .wrap{ position:relative; z-index:2 }

.diff-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }

.dcard{
  position:relative; border-radius:var(--r-lg);
  padding:1.5px;
  background:linear-gradient(150deg, rgba(155,123,255,.36), rgba(155,123,255,.07) 46%, transparent 72%);
  transform-style:preserve-3d;
  will-change:transform;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  isolation:isolate;
}

/* Rim cónico que gira al pasar el cursor. El panel interior tapa el centro,
   así que sólo se ve el filo de 1.5 px. */
.dcard-border{
  position:absolute; inset:0; border-radius:inherit;
  overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity .45s var(--e-out);
}
.dcard-border::before{
  content:''; position:absolute; top:50%; left:50%;
  width:150%; aspect-ratio:1/1; translate:-50% -50%;
  background:conic-gradient(from 0deg,
    transparent 0 58%, rgba(155,123,255,.85) 74%, #EFEAFF 80%,
    rgba(155,123,255,.85) 86%, transparent 100%);
  animation:dspin 3.4s linear infinite;
}
@keyframes dspin{ to{ rotate:360deg } }
.dcard:hover .dcard-border,
.dcard:focus-within .dcard-border{ opacity:1 }

.dcard-glow{
  position:absolute; inset:0; z-index:2; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(139,91,255,.3), transparent 62%);
  opacity:0; transition:opacity .45s var(--e-out);
  pointer-events:none;
}
.dcard:hover .dcard-glow{ opacity:1 }

.dcard-in{
  position:relative; z-index:1; height:100%;
  display:grid; align-content:start; gap:.85rem;
  padding:2rem 2rem 2.1rem;
  border-radius:calc(var(--r-lg) - 1.5px);
  background:linear-gradient(160deg, rgba(42,24,112,.62) 0%, rgba(17,9,66,.92) 46%, rgba(11,5,52,.96) 100%);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
}
/* Destello que barre la tarjeta al entrar el cursor */
.dcard-in::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 46%, transparent 62%);
  translate:-120% 0;
}
.dcard:hover .dcard-in::after{ animation:dshine .9s var(--e-out) forwards }
@keyframes dshine{ to{ translate:120% 0 } }

.dnum-ghost{
  position:absolute; top:.5rem; right:1.15rem;
  font-family:var(--f-mono); font-weight:600;
  font-size:4.25rem; line-height:1; letter-spacing:-.05em;
  color:rgba(155,123,255,.09);
  pointer-events:none;
  transition:color .5s var(--e-out), transform .6s var(--e-out);
}
.dcard:hover .dnum-ghost{ color:rgba(155,123,255,.2); transform:translateY(-4px) }

.dicon{
  width:62px; height:62px; display:grid; place-items:center;
  border-radius:18px; color:var(--purple-lite);
  background:linear-gradient(150deg, rgba(75,33,196,.42), rgba(75,33,196,.08));
  border:1px solid rgba(155,123,255,.26);
  box-shadow:0 10px 26px -12px rgba(75,33,196,.9), inset 0 1px 0 rgba(255,255,255,.14);
  margin-bottom:.5rem;
  transition:color .4s var(--e-out), border-color .4s var(--e-out), box-shadow .4s var(--e-out);
}
.dcard:hover .dicon{
  color:#D9CCFF; border-color:rgba(155,123,255,.5);
  box-shadow:0 14px 34px -12px rgba(109,59,245,1), inset 0 1px 0 rgba(255,255,255,.2);
}
.dicon svg{ width:32px; height:32px; overflow:visible }

.dcard h3{ max-width:24ch }
.dcard p{ color:var(--text-mut); font-size:.938rem; max-width:48ch }

.dcard-line{
  display:block; position:relative; overflow:hidden;
  height:2px; width:100%; margin-top:.4rem;
  border-radius:2px; background:rgba(228,232,235,.09);
}
.dcard-line::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--purple),var(--purple-lite));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--e-out);
}
.dcard:hover .dcard-line::after{ transform:scaleX(1) }

/* Piezas animadas de los iconos: sin fill-box el origen sería el lienzo SVG */
.ic-bar,.ic-knob,.ic-pt,.ic-lens,.ic-spark,.ic-node{ transform-box:fill-box; transform-origin:center }
.ic-bar{ transform-origin:bottom }
.ic-pt{ opacity:.4 }

/* ══════════════════════════════════════════════════════════════
   SERVICIOS + MOCKUPS
   ══════════════════════════════════════════════════════════════ */
.svc{ position:relative; padding:var(--s-7) 0; background:linear-gradient(180deg,var(--dark),var(--void)) }
.svc-split{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5);
  align-items:start;
}
.svc-list{ display:grid; gap:.5rem }
/* En escritorio el escenario queda anclado: cada servicio necesita su propio
   tramo de scroll, si no los cinco pasan en una sola pantalla y los últimos
   nunca llegan a activarse. */
@media (min-width:1101px){
  /* El tramo inferior amplio mantiene el escenario anclado mientras el
     último servicio está activo; con poco margen, el dashboard se soltaba
     casi al instante de aparecer. */
  .svc-list{ gap:30vh; padding-block:18vh 70vh }
}
.svc-item{
  position:relative; padding:var(--s-3) var(--s-3) var(--s-3) 3.5rem;
  border-radius:var(--r);
  cursor:default;
  transition:background .5s var(--e-out), opacity .5s var(--e-out);
  opacity:.42;
}
.svc-item::before{
  content:''; position:absolute; left:0; top:1.6rem; bottom:1.6rem;
  width:2px; border-radius:2px;
  background:var(--stroke);
  transition:background .5s var(--e-out), top .5s var(--e-out), bottom .5s var(--e-out);
}
.svc-item.is-active{
  opacity:1;
  background:linear-gradient(100deg, rgba(75,33,196,.14), transparent 72%);
}
.svc-item.is-active::before{
  background:linear-gradient(to bottom,var(--purple),var(--purple-lite));
  top:1rem; bottom:1rem;
}
.svc-idx{ position:absolute; left:1.35rem; top:1.55rem; font-size:.625rem; color:var(--text-dim) }
.svc-item.is-active .svc-idx{ color:var(--purple-lite) }
.svc-item h3{ margin-bottom:.4rem }
.svc-item p{ color:var(--text-mut); font-size:.938rem; max-width:44ch }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem }
.svc-tags li{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.08em;
  padding:.3rem .6rem; border-radius:100px;
  border:1px solid var(--stroke); color:var(--text-dim);
}
.svc-item.is-active .svc-tags li{ border-color:rgba(155,123,255,.3); color:var(--purple-lite) }

/* ── Escenario de mockups ── */
/* El anclaje lo hace ScrollTrigger.pin (position:sticky no es fiable
   dentro del contenedor transformado de ScrollSmoother). */
.svc-stage-col{ height:100svh; display:grid; place-items:center }
.svc-stage{
  position:relative; width:100%; aspect-ratio:1/1; max-height:74vh;
  perspective:1500px; perspective-origin:50% 45%;
  display:grid; place-items:center;
}
.stage-glow{
  position:absolute; inset:12%;
  background:radial-gradient(circle, rgba(109,59,245,.3), transparent 66%);
  filter:blur(46px);
}
.stage-floor{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%) rotateX(72deg);
  width:74%; height:230px;
  background:radial-gradient(ellipse at 50% 50%, rgba(155,123,255,.15), transparent 68%);
  filter:blur(14px);
}
.mock{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transform-style:preserve-3d;
  opacity:0; visibility:hidden;
  will-change:transform,opacity;
}
.mock.is-on{ opacity:1; visibility:visible }

/* Teléfono */
.phone{
  position:relative; width:min(64%,268px); aspect-ratio:9/19;
  border-radius:38px; padding:9px;
  background:linear-gradient(155deg,#2A2450,#0D0730 45%,#191046);
  box-shadow:
    0 44px 80px -28px rgba(0,0,0,.9),
    0 0 0 1px rgba(228,232,235,.11),
    inset 0 1px 0 rgba(255,255,255,.16);
  transform-style:preserve-3d;
}
.phone-island{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:62px; height:16px; border-radius:100px; background:#05021A; z-index:5;
}
.phone-screen{
  position:relative; height:100%; border-radius:30px; overflow:hidden;
  background:#0A0428;
  display:flex; flex-direction:column;
}
.ig-bar{ display:flex; align-items:center; gap:.5rem; padding:2.1rem .6rem .5rem }
/* Isotipo morado sobre disco claro: contraste correcto de marca */
.ig-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:contain; padding:4px;
  background:var(--light);
  flex:0 0 auto;
}
.ig-user{ display:grid; line-height:1.15; flex:1 }
.ig-user b{ font-size:.625rem; font-weight:600 }
.ig-user span{ font-size:.5rem; color:var(--text-dim) }
.ig-dots{ color:var(--text-dim); font-size:.7rem }
.ig-media{ position:relative; flex:1; min-height:0 }
.ig-art{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#3A17A0 0%,#0B0534 55%,#5C2BE0 130%);
  overflow:hidden;
}
.ig-art-glow{
  position:absolute; width:150%; height:150%;
  background:radial-gradient(circle at 32% 28%, rgba(155,123,255,.5), transparent 52%);
}
.ig-art-mark{
  position:absolute; top:11%; left:50%; transform:translateX(-50%); width:20%;
  filter:brightness(0) invert(1);
}
.ig-art-txt{
  position:relative; font-family:var(--f-display); font-weight:600;
  font-size:clamp(.95rem,3.6vw,1.35rem); line-height:1.02; letter-spacing:-.03em;
  text-align:center; margin-top:14%;
}
.ig-dotsnav{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:4px }
.ig-dotsnav i{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35) }
.ig-dotsnav i.on{ background:#fff }
.ig-actions{ display:flex; gap:.65rem; padding:.55rem .6rem .3rem; color:var(--light) }
.ig-actions svg{ width:17px; height:17px }
.ig-heart{ transition:color .3s, transform .3s }
.ig-heart.liked{ color:#FF4D6D; fill:#FF4D6D; transform:scale(1.14) }
.ig-likes{ padding:0 .6rem; font-size:.563rem; color:var(--text) }
.ig-likes b{ font-family:var(--f-mono); font-weight:500 }
.ig-caption{ padding:.25rem .6rem .8rem; font-size:.531rem; color:var(--text-mut); line-height:1.4 }
.ig-caption b{ color:var(--text); font-weight:600 }

/* Chat / automatización */
.chat-screen{ background:#0A0428 }
.ch-bar{
  display:flex; align-items:center; gap:.5rem; padding:2.1rem .6rem .55rem;
  background:linear-gradient(180deg, rgba(75,33,196,.32), transparent);
  border-bottom:1px solid var(--stroke);
}
.ch-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:contain; padding:4px;
  background:var(--light);
}
.ch-user{ display:grid; line-height:1.15 }
.ch-user b{ font-size:.625rem; font-weight:600 }
.ch-user span{ font-size:.5rem; color:#7CF5C4 }
.ch-body{ flex:1; display:flex; flex-direction:column; gap:.4rem; padding:.7rem .6rem; overflow:hidden }
.bub{
  max-width:82%; padding:.42rem .6rem; border-radius:13px;
  font-size:.563rem; line-height:1.42;
  opacity:0;
}
.bub.in{ align-self:flex-start; background:rgba(228,232,235,.09); border-bottom-left-radius:4px }
.bub.out{
  align-self:flex-end; border-bottom-right-radius:4px; color:#fff;
  background:linear-gradient(120deg,var(--purple),var(--purple-glow));
}
.bub.ok{ background:rgba(124,245,196,.13); color:#7CF5C4; border:1px solid rgba(124,245,196,.25) }
.ch-input{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem .9rem;
}
.ch-input span{ flex:1; height:22px; border-radius:100px; background:rgba(228,232,235,.07) }
.ch-input i{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(140deg,var(--purple),var(--purple-glow));
}

/* Laptop */
.laptop{ position:relative; width:min(96%,430px); transform-style:preserve-3d }
.lt-lid{
  border-radius:14px 14px 4px 4px; padding:9px 9px 12px;
  background:linear-gradient(160deg,#2C2656,#0E0834 55%,#1B1249);
  box-shadow:0 34px 66px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(228,232,235,.1);
}
.lt-screen{
  aspect-ratio:16/10.2; border-radius:7px; overflow:hidden;
  background:#0A0428; display:flex; flex-direction:column;
}
.lt-chrome{
  display:flex; align-items:center; gap:5px; padding:6px 9px;
  background:rgba(228,232,235,.05); border-bottom:1px solid var(--stroke);
  flex:0 0 auto;
}
.lt-chrome i{ width:6px; height:6px; border-radius:50%; background:rgba(228,232,235,.22) }
.lt-url{
  margin-left:6px; flex:1;
  font-family:var(--f-mono); font-size:.5rem; color:var(--text-dim);
  background:rgba(228,232,235,.05); border-radius:100px; padding:2px 8px;
}
.lt-viewport{ flex:1; overflow:hidden; position:relative }
.lt-page{ position:absolute; top:0; left:0; width:100%; padding:10px; display:grid; gap:8px; will-change:transform }
.lp-hero{
  display:grid; gap:5px; padding:16px 12px 20px; border-radius:8px;
  background:linear-gradient(140deg, rgba(75,33,196,.42), rgba(11,5,52,.5));
  border:1px solid var(--stroke);
}
.lp-eyebrow{ width:44px; height:5px; border-radius:3px; background:var(--purple-lite); opacity:.75 }
.lp-h1{ width:78%; height:11px; border-radius:4px; background:rgba(228,232,235,.42) }
.lp-h1.short{ width:52% }
.lp-btn{ width:70px; height:15px; border-radius:100px; background:linear-gradient(100deg,var(--purple),var(--purple-glow)); margin-top:5px }
.lp-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.lp-row:has(i:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr) }
.lp-row i{ height:52px; border-radius:8px; background:rgba(228,232,235,.07); border:1px solid var(--stroke) }
.lp-wide{ height:74px; border-radius:8px; background:linear-gradient(120deg, rgba(109,59,245,.3), rgba(228,232,235,.05)); border:1px solid var(--stroke) }
.lp-wide.alt{ background:linear-gradient(120deg, rgba(228,232,235,.06), rgba(75,33,196,.26)) }
.lt-base{
  height:11px; border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#221B49,#0C0730);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.85);
  display:grid; place-items:center;
  margin-inline:-3%;
  width:106%;
}
.lt-notch{ width:64px; height:3px; border-radius:0 0 5px 5px; background:rgba(228,232,235,.16) }

/* Cuadrícula de publicaciones */
.grid-posts{
  width:min(94%,400px);
  border-radius:20px; padding:1rem;
  display:grid; gap:.85rem;
  transform-style:preserve-3d;
  background:linear-gradient(160deg, rgba(24,14,84,.94), rgba(9,4,40,.97));
  border:1px solid var(--stroke-2);
  box-shadow:0 40px 76px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.gp-head{ display:flex; align-items:center; gap:.55rem; padding-bottom:.7rem; border-bottom:1px solid var(--stroke) }
.gp-mark{
  width:28px; height:28px; border-radius:50%; object-fit:contain; padding:5px;
  background:var(--light); flex:0 0 auto;
}
.gp-user{ display:grid; line-height:1.2; flex:1 }
.gp-user b{ font-size:.75rem; font-weight:600 }
.gp-user span{ font-size:.625rem; color:var(--text-dim) }
.gp-count{ font-size:.5rem; color:var(--purple-lite) }
.gp-cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.gp-cell{
  position:relative; aspect-ratio:1/1; border-radius:9px; overflow:hidden;
  border:1px solid var(--stroke);
  display:grid; align-items:end;
  transform-style:preserve-3d;
}
.gp-cell::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.18), transparent 58%);
}
.gp-cell.a{ background:linear-gradient(145deg,#4B21C4,#0B0534) }
.gp-cell.b{ background:linear-gradient(145deg,#0B0534,#6D3BF5) }
.gp-cell.c{ background:linear-gradient(145deg,#2E1178,#9B7BFF) }
.gp-cell.d{ background:linear-gradient(145deg,#6D3BF5,#120A46) }
.gp-cell.e{ background:linear-gradient(145deg,#120A46,#4B21C4) }
.gp-cell.f{ background:linear-gradient(145deg,#9B7BFF,#2E1178) }
.gp-cell.g{ background:linear-gradient(145deg,#4B21C4,#6D3BF5) }
.gp-cell.h{ background:linear-gradient(145deg,#0B0534,#2E1178) }
.gp-cell.i{ background:linear-gradient(145deg,#6D3BF5,#4B21C4) }
.gp-tag{
  position:relative; z-index:2;
  font-size:.438rem; letter-spacing:.1em; color:#fff;
  margin:0 0 .3rem .35rem; opacity:.86;
}
.gp-foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.gp-foot .mono-label{ font-size:.5rem; color:var(--text-dim) }
.gp-days{ display:flex; gap:5px }
.gp-days i{ width:16px; height:4px; border-radius:3px; background:rgba(228,232,235,.13) }
.gp-days i.on{ background:linear-gradient(90deg,var(--purple),var(--purple-lite)) }

/* Dashboard */
.dash{
  width:min(97%,440px);
  border-radius:18px; padding:1rem;
  display:grid; gap:.85rem;
  background:linear-gradient(160deg, rgba(24,14,84,.94), rgba(9,4,40,.97));
  border:1px solid var(--stroke-2);
  box-shadow:0 40px 76px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.dash-top{ display:flex; align-items:center; gap:.55rem; padding-bottom:.7rem; border-bottom:1px solid var(--stroke) }
.dash-mark{ width:19px; height:19px; object-fit:contain; filter:brightness(0) invert(1) }
.dash-title{ font-family:var(--f-display); font-size:.813rem; font-weight:500; flex:1 }
.dash-live{ display:inline-flex; align-items:center; gap:.35rem; font-size:.5rem; color:#7CF5C4 }
.dash-live i{ width:5px; height:5px; border-radius:50%; background:#7CF5C4; animation:pulse 2s infinite }
.dash-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem }
.kpi{
  display:grid; gap:.15rem; padding:.55rem .6rem; border-radius:11px;
  background:rgba(228,232,235,.045); border:1px solid var(--stroke);
}
.kpi .mono-label{ font-size:.5rem; color:var(--text-dim) }
.kpi b{ font-family:var(--f-mono); font-size:1.05rem; font-weight:500; letter-spacing:-.02em; display:inline }
.kpi em{ font-family:var(--f-mono); font-size:.7rem; font-style:normal; color:var(--purple-lite) }
.dash-main{ display:grid; grid-template-columns:1fr auto; gap:.7rem; align-items:center }
.dash-chart{
  position:relative; height:96px; border-radius:11px; overflow:hidden;
  background:rgba(228,232,235,.035); border:1px solid var(--stroke);
}
.dash-chart svg{ position:absolute; inset:0; width:100%; height:100% }
.dash-grid{ position:absolute; inset:0; display:grid; grid-template-rows:repeat(3,1fr) }
.dash-grid i{ border-bottom:1px solid rgba(228,232,235,.05) }
.dash-donut{ position:relative; width:96px; height:96px; display:grid; place-items:center }
.dash-donut svg{ position:absolute; inset:0; width:100%; height:100% }
.donut-val{ font-family:var(--f-mono); font-size:1rem; font-weight:500 }
.donut-val::after{ content:'%'; font-size:.65rem; color:var(--purple-lite) }
.dash-bars{ display:flex; align-items:flex-end; gap:5px; height:48px }
.dash-bars i{
  flex:1; height:var(--v); border-radius:3px 3px 1px 1px;
  background:linear-gradient(to top,var(--purple),var(--purple-lite));
  transform-origin:bottom; transform:scaleY(0);
}

/* ══════════════════════════════════════════════════════════════
   NICHOS
   ══════════════════════════════════════════════════════════════ */
.niche{ padding:var(--s-7) 0; background:var(--void) }
.niche-list{ border-top:1px solid var(--stroke) }
.nrow{
  position:relative; display:grid;
  grid-template-columns:auto minmax(200px,1fr) minmax(0,1.4fr) auto;
  align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-2);
  border-bottom:1px solid var(--stroke);
  overflow:hidden;
  transition:padding-left .5s var(--e-out);
}
.nrow::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(75,33,196,.24), transparent 62%);
  transform:translateY(101%);
  transition:transform .55s var(--e-out);
}
.nrow:hover::before{ transform:translateY(0) }
.nrow:hover{ padding-left:calc(var(--s-2) + 1rem) }
.nrow > *{ position:relative; z-index:1 }
.nrow-letter{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--stroke); border-radius:50%;
  color:var(--text-dim); font-size:.688rem;
  transition:color .4s, border-color .4s;
}
.nrow:hover .nrow-letter{ color:var(--purple-lite); border-color:var(--purple-lite) }
.nrow-title{
  font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.65rem);
  font-weight:500; letter-spacing:-.025em; line-height:1.15;
}
.nrow-desc{ color:var(--text-mut); font-size:.938rem }
.nrow-arrow{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--stroke);
  transition:background .4s, border-color .4s, transform .4s var(--e-out);
}
.nrow-arrow svg{ width:18px; height:18px }
.nrow:hover .nrow-arrow{ background:var(--purple); border-color:var(--purple); transform:rotate(-45deg) }

/* ══════════════════════════════════════════════════════════════
   PAQUETES
   ══════════════════════════════════════════════════════════════ */
.pack{ position:relative; padding:var(--s-7) 0; background:var(--dark); overflow:hidden }
.pack-aura{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  width:120%; height:70%;
  background:radial-gradient(ellipse at 50% 40%, rgba(75,33,196,.24), transparent 62%);
  filter:blur(50px);
}
.pack .wrap{ position:relative; z-index:2 }
.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; align-items:stretch }
.pcard{
  position:relative; border-radius:var(--r-lg); padding:1px;
  background:linear-gradient(165deg,var(--stroke-2),transparent 46%);
  transform-style:preserve-3d; will-change:transform;
}
/* Columna flexible para que el botón quede al pie: los niveles tienen
   distinta cantidad de entregables y los botones no alineaban. */
.pcard-in{
  height:100%; display:flex; flex-direction:column; gap:.85rem;
  padding:var(--s-4) var(--s-3);
  border-radius:calc(var(--r-lg) - 1px);
  background:linear-gradient(168deg, rgba(18,10,70,.86), rgba(11,5,52,.95));
}
.pcard.featured{
  background:linear-gradient(165deg,var(--purple-lite),rgba(75,33,196,.35) 45%,transparent 75%);
  box-shadow:0 34px 80px -34px rgba(75,33,196,.95);
}
.pcard.featured .pcard-in{
  background:linear-gradient(168deg, rgba(38,18,120,.92), rgba(13,6,60,.97));
}
.pcard-flag{
  position:absolute; top:-1px; left:50%; transform:translate(-50%,-50%);
  z-index:3; padding:.4rem .9rem; border-radius:100px;
  background:linear-gradient(100deg,var(--purple),var(--purple-glow));
  color:#fff; font-size:.563rem; white-space:nowrap;
  box-shadow:0 10px 26px -8px rgba(75,33,196,.9);
}
.pcard-num{ color:var(--text-dim); font-size:.625rem }
.pcard-name{
  font-family:var(--f-display); font-size:1.75rem; font-weight:500;
  letter-spacing:-.03em; line-height:1.05;
}
.pcard-desc{ color:var(--text-mut); font-size:.875rem; min-height:3.6em }
.pcard-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.2rem;
  padding-top:.6rem; border-top:1px solid var(--stroke);
}
/* "DESDE" / "COTIZACIÓN": ocupa su propia línea sobre la cifra */
.pcard-price .pre{
  flex:0 0 100%; font-size:.563rem; color:var(--text-dim);
  margin-bottom:.15rem;
}
.pcard-price.custom b{ font-size:1.6rem; letter-spacing:-.03em; color:var(--purple-lite) }
.pcard-price .cur{ font-family:var(--f-mono); font-size:1.05rem; color:var(--purple-lite) }
.pcard-price b{
  font-family:var(--f-mono); font-size:2.4rem; font-weight:500;
  letter-spacing:-.045em; line-height:1;
}
.pcard-price em{
  font-family:var(--f-mono); font-style:normal; font-size:.688rem;
  color:var(--text-dim); margin-left:.35rem; letter-spacing:.1em;
}
.pcard-note{ color:var(--text-dim); font-size:.563rem }
/* margin-bottom:auto empuja el botón al pie de la tarjeta */
.pcard-list{ display:grid; gap:.55rem; margin:.5rem 0 auto }
.pcard-list li{
  position:relative; padding-left:1.5rem;
  font-size:.875rem; color:var(--text-mut); line-height:1.45;
}
.pcard-list li::before{
  content:''; position:absolute; left:0; top:.45em;
  width:9px; height:9px; border-radius:50%;
  background:var(--purple); box-shadow:0 0 0 3px rgba(75,33,196,.2);
}
.pcard-list li.up{
  margin-top:.3rem; padding-top:.65rem; border-top:1px dashed var(--stroke);
  color:var(--purple-lite); font-size:.813rem;
}
.pcard-list li.up::before{ top:1.1em; background:var(--purple-lite) }
.pcard-list li.up em{ color:var(--text-dim); font-style:normal; font-size:.75rem }

/* ── Paquete a la medida ── */
.pcard-custom{
  background:linear-gradient(150deg, rgba(155,123,255,.3), rgba(155,123,255,.05) 48%, transparent 74%);
}
.pcard-custom .pcard-in{
  background:linear-gradient(150deg, rgba(30,17,92,.72) 0%, rgba(14,7,58,.94) 55%, rgba(11,5,52,.96) 100%);
}
.pcard-custom .pcard-name{ color:var(--text) }

/* En escritorio ocupa una banda completa bajo los tres niveles: con una
   cuarta tarjeta, la rejilla de 3 columnas la dejaba suelta en otra fila. */
@media (min-width:1101px){
  .pcard-custom{ grid-column:1/-1 }
  .pcard-custom .pcard-in{
    display:grid; align-content:start;
    grid-template-columns:1.05fr 1fr;
    grid-template-areas:
      "num   price"
      "name  note"
      "desc  list"
      "btn   list";
    column-gap:3rem; row-gap:.55rem;
    padding:var(--s-4) var(--s-4);
  }
  .pcard-custom .pcard-num{ grid-area:num }
  .pcard-custom .pcard-name{ grid-area:name }
  .pcard-custom .pcard-desc{ grid-area:desc; min-height:0; max-width:44ch }
  .pcard-custom .pcard-price{ grid-area:price; border-top:0; padding-top:0 }
  .pcard-custom .pcard-note{ grid-area:note }
  .pcard-custom .pcard-list{ grid-area:list; margin:0; align-self:start }
  .pcard-custom .btn{ grid-area:btn; width:fit-content; align-self:end; margin-top:.6rem }
}

/* ══════════════════════════════════════════════════════════════
   NOSOTROS
   ══════════════════════════════════════════════════════════════ */
.about{ position:relative; padding:var(--s-7) 0; overflow:hidden; background:var(--void) }
.about-bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform }
.about-bg img{ width:100%; height:100%; object-fit:cover }
.about-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(7,3,31,.97) 24%, rgba(11,5,52,.82) 56%, rgba(7,3,31,.72) 100%),
    linear-gradient(to bottom, var(--void) 0%, transparent 22%, transparent 74%, var(--void) 100%);
}
.about-inner{ position:relative; z-index:2 }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; margin-bottom:var(--s-5) }
.mv{
  display:grid; gap:.75rem; align-content:start;
  padding:var(--s-4) var(--s-3);
  border-radius:var(--r-lg);
  background:rgba(11,5,52,.5);
  border:1px solid var(--stroke);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.mv-text{ font-size:1rem; color:var(--text-mut); line-height:1.65 }

.founders{ padding-top:var(--s-4); border-top:1px solid var(--stroke) }
.founders-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; margin-top:var(--s-3);
}
.founder{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.15rem 1.35rem;
  border-radius:var(--r);
  background:rgba(11,5,52,.55); border:1px solid var(--stroke);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.f-mark{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(140deg,var(--purple),var(--purple-glow));
}
.f-mark img{ width:20px; filter:brightness(0) invert(1) }
.founder div{ display:grid; gap:.22rem; line-height:1.3 }
.founder b{ font-family:var(--f-display); font-size:1.05rem; font-weight:500; letter-spacing:-.02em }
.founder span{ font-size:.813rem; color:var(--text-mut) }
.founder em{ font-style:normal; font-size:.563rem; color:var(--purple-lite) }

/* ══════════════════════════════════════════════════════════════
   CTA / CONTACTO
   ══════════════════════════════════════════════════════════════ */
.cta{
  position:relative; padding:var(--s-7) 0; overflow:hidden;
  background:linear-gradient(180deg,var(--void),var(--dark) 55%,var(--ink-2));
}
.cta-particles{ z-index:1 }
.cta-aura{
  position:absolute; bottom:-25%; left:50%; transform:translateX(-50%);
  width:100%; height:80%;
  background:radial-gradient(ellipse at 50% 60%, rgba(75,33,196,.34), transparent 62%);
  filter:blur(48px);
}
.cta-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-5); align-items:center;
}
.cta-copy .mono-label{ display:block; margin-bottom:var(--s-2) }
.cta-copy .p-lead{ margin-top:var(--s-3) }
.cta-points{ display:grid; gap:.75rem; margin-top:var(--s-4) }
.cta-points li{ display:flex; align-items:center; gap:.75rem; font-size:.938rem; color:var(--text-mut) }
.cta-points i{
  width:22px; height:22px; flex:0 0 auto; border-radius:50%;
  background:rgba(75,33,196,.28); border:1px solid rgba(155,123,255,.35);
  position:relative;
}
.cta-points i::after{
  content:''; position:absolute; left:7px; top:6.5px;
  width:5px; height:9px; border:solid var(--purple-lite);
  border-width:0 1.6px 1.6px 0; transform:rotate(45deg);
}

.cta-form{
  display:grid; grid-template-columns:1fr 1fr; gap:.85rem;
  padding:var(--s-4) var(--s-3);
  border-radius:var(--r-lg);
  background:rgba(11,5,52,.62);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
.field{ display:grid; gap:.35rem }
.field.full{ grid-column:1/-1 }
.field label{ font-size:.75rem; color:var(--text-mut); font-weight:500 }
.field label .opt{ color:var(--text-dim); font-weight:400 }
.field input,.field textarea,.field select{
  width:100%; padding:.8rem .9rem;
  min-height:46px;
  background:rgba(228,232,235,.05);
  border:1px solid var(--stroke);
  border-radius:12px;
  font-size:.938rem;
  transition:border-color .3s, background .3s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:84px }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-dim) }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--purple-lite); background:rgba(228,232,235,.08);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:none }
.field.has-err input{ border-color:#FF6B8A }
.err{ font-size:.688rem; color:#FF6B8A; min-height:1em }
.select-wrap{ position:relative }
/* deja sitio al chevron para que la opción no quede cortada */
.select-wrap select{ padding-right:2.7rem; text-overflow:ellipsis }
.select-wrap svg{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text-dim); pointer-events:none;
}
.select-wrap select option{ background:var(--dark); color:var(--text) }
.cta-form .btn{ grid-column:1/-1; margin-top:.35rem }
.form-note{ grid-column:1/-1; text-align:center; color:var(--text-dim); font-size:.563rem }
.form-status{ grid-column:1/-1; text-align:center; font-size:.813rem; color:#7CF5C4; min-height:1.2em }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.foot{ padding:var(--s-6) 0 var(--s-3); background:var(--ink-2); border-top:1px solid var(--stroke) }
.foot-top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap; padding-bottom:var(--s-4); border-bottom:1px solid var(--stroke);
}
.foot-logo img{ height:34px; width:auto }
.foot-tag{ font-family:var(--f-display); font-size:1.1rem; color:var(--text-mut); letter-spacing:-.02em }
.foot-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3);
  padding:var(--s-4) 0;
}
.foot-col{ display:grid; gap:.55rem; align-content:start }
.foot-col .mono-label{ margin-bottom:.35rem; color:var(--text-dim) }
.foot-col a{ font-size:.875rem; color:var(--text-mut); width:fit-content; transition:color .3s }
.foot-col a:hover{ color:var(--purple-lite) }
.foot-bottom{
  display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap;
  padding-top:var(--s-3); border-top:1px solid var(--stroke);
}
.foot-bottom .mono-label{ color:var(--text-dim); font-size:.563rem }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  :root{ --s-6:4.5rem; --s-7:6rem }
  .svc-split{ grid-template-columns:1fr; gap:var(--s-4) }
  .svc-stage-col{ position:relative; height:auto; order:-1 }
  /* Sin aspect-ratio: el teléfono se dimensiona por ancho (9/19) y con una
     caja proporcional desbordaría el escenario y taparía la lista. */
  .svc-stage{ aspect-ratio:auto; min-height:620px; max-height:none; max-width:520px; margin-inline:auto }
  .cta-inner{ grid-template-columns:1fr; gap:var(--s-4) }
  .menu-inner{ grid-template-columns:1fr; align-content:center; gap:var(--s-4) }
  .menu-aside{ display:none }
}
@media (max-width:900px){
  .nav-links{ display:none }
  .burger{ display:grid }
  .nav-right .btn-sm{ display:none }
  .diff-grid{ grid-template-columns:1fr }
  .pack-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto }
  .pcard.featured{ order:-1 }
  .mv-grid{ grid-template-columns:1fr }
  .founders-row{ grid-template-columns:1fr }
  .foot-cols{ grid-template-columns:1fr 1fr }
  .nrow{ grid-template-columns:auto 1fr auto; row-gap:.5rem }
  .nrow-desc{ grid-column:2/-1 }
}
@media (max-width:640px){
  :root{ --s-5:3rem; --s-6:3.5rem; --s-7:4.5rem; --r-lg:22px }
  .wrap{ width:calc(100% - 2rem) }
  .hero-title-wrap{ padding-bottom:4% }
  .hero-title-wrap::before{
    inset:6% -12%;
    background:radial-gradient(ellipse 54% 50% at 50% 48%, rgba(11,5,52,.82), rgba(11,5,52,.4) 62%, transparent 84%);
  }
  .nav-logo-full{ display:none }
  .nav-logo-mark{ display:block; height:30px }
  .cta-form{ grid-template-columns:1fr }
  .foot-cols{ grid-template-columns:1fr }
  .foot-top{ flex-direction:column; align-items:flex-start }
  .pcard-desc{ min-height:0 }
}

/* ══════════════════════════════════════════════════════════════
   PÁGINA LEGAL (aviso de privacidad)
   ══════════════════════════════════════════════════════════════ */
.legal-page{ background:var(--dark) }
.legal{ padding:8rem 0 var(--s-6); position:relative }
.legal::before{
  content:''; position:absolute; inset:0 0 auto; height:60vh; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(75,33,196,.28), transparent 65%);
}
.legal-wrap{ position:relative; z-index:1; max-width:820px }
.legal-title{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1.05; letter-spacing:-.035em;
  margin:.6rem 0 var(--s-4);
}
.legal-body{ color:var(--text-mut); font-size:1rem; line-height:1.75 }
.legal-body h2{
  font-family:var(--f-display); font-weight:500; color:var(--text);
  font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.2; letter-spacing:-.02em;
  margin:var(--s-4) 0 .75rem; padding-top:var(--s-3);
  border-top:1px solid var(--stroke);
}
.legal-body h3{
  font-family:var(--f-display); font-weight:500; color:var(--text);
  font-size:1.0625rem; margin:var(--s-3) 0 .5rem;
}
.legal-body p{ margin-bottom:1rem }
.legal-body strong{ color:var(--text); font-weight:600 }
.legal-body a{ color:var(--purple-lite); text-decoration:underline; text-underline-offset:3px }
.legal-body a:hover{ color:var(--text) }
.legal-body ul,.legal-body ol{ margin:0 0 1.15rem; padding-left:0; display:grid; gap:.5rem }
.legal-body ol{ counter-reset:legal }
.legal-body li{ position:relative; padding-left:1.6rem }
.legal-body ul li::before{
  content:''; position:absolute; left:.15rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--purple);
}
.legal-body ol li{ counter-increment:legal }
.legal-body ol li::before{
  content:counter(legal) "."; position:absolute; left:0; top:0;
  font-family:var(--f-mono); font-size:.75rem; color:var(--purple-lite);
}
.legal-back{ margin-top:var(--s-5) }
.foot-bottom a{ color:inherit; text-decoration:underline; text-underline-offset:3px }

/* ══════════════════════════════════════════════════════════════
   BANNER DE COOKIES
   ══════════════════════════════════════════════════════════════ */
.cookie{
  position:fixed; left:50%; bottom:1.25rem; translate:-50% 0;
  z-index:9500; width:min(100% - 2rem, 660px);
  display:none;
  padding:1.25rem 1.35rem;
  border-radius:var(--r);
  background:rgba(11,5,52,.92);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
}
.cookie.is-shown{ display:block }
.cookie-title{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-size:1rem; font-weight:500;
  color:var(--text); margin-bottom:.45rem;
}
.cookie-title svg{ width:19px; height:19px; color:var(--purple-lite); flex:0 0 auto }
.cookie-text{ font-size:.875rem; color:var(--text-mut); line-height:1.6 }
.cookie-text a{ color:var(--purple-lite); text-decoration:underline; text-underline-offset:3px }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem }
.cookie-actions .btn{ flex:1 1 auto; min-width:150px; justify-content:center; padding:.75rem 1.2rem; font-size:.875rem }

@media (max-width:640px){
  .cookie{ bottom:.75rem; padding:1.1rem 1.1rem 1.2rem }
  .cookie-actions .btn{ flex:1 1 100% }
}

/* ══════════════════════════════════════════════════════════════
   MÓVIL Y TABLET — ≤1100px
   Todo lo de este bloque está acotado a pantallas pequeñas.
   El escritorio (≥1101px) no recibe ninguna de estas reglas.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1100px){

  a,button,input,select,textarea,.dcard,.pcard{ touch-action:manipulation }

  /* ─── HERO ─── */
  .hero-visual{ max-height:clamp(280px,40vh,400px) }
  /* En pantallas estrechas manda el ancho, no la altura: dimensionada por
     altura, la composición apaisada quedaba diminuta. */
  .hv-stage{
    top:50%; bottom:auto; translate:-50% -50%;
    width:100%; height:auto; aspect-ratio:3/2; max-width:100%;
  }
  /* 20 % más grande que antes (7.4vw → 8.88vw). La composición, los chips
     y el resto del hero conservan su tamaño. */
  .hero-title{ font-size:clamp(2.4rem,8.88vw,4.08rem) }
  /* El texto llegaba al borde de la pantalla; se estrecha para acompañar
     el bloque del título. El margen va sobre el párrafo y no sobre
     .hero-copy: aplicado al contenedor quitaba ancho a los botones y
     éstos se apilaban en dos líneas. */
  .hero-copy{ width:min(100%,34rem) }
  .hero-sub{ padding-inline:1.25rem }

  /* Sin perspectiva en pantallas estrechas: la proyección empujaba los chips
     fuera del borde. Conservan su translateZ, que es lo que los mantiene
     por delante de la composición, pero ya no se desplazan. */
  .hero-visual{ perspective:none }
  .hv-chip{ padding:.42rem .62rem; border-radius:12px }
  .hv-chip b{ font-size:.75rem }
  .hv-chip .mono-label{ font-size:.5rem }
  .chip-a{ top:1%;    left:1%;   right:auto; bottom:auto }
  .chip-b{ top:40%;   right:1%;  left:auto;  bottom:auto }
  .chip-c{ bottom:1%; left:4%;   right:auto; top:auto }

  /* Botones secundarios al título: más pequeños, en línea y discretos,
     pero conservando 44 px de área táctil. */
  .hero-cta{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.55rem; width:auto }
  .hero-cta .btn{ flex:0 1 auto; padding:.62rem 1.05rem; font-size:.813rem; min-height:44px; gap:.4rem }
  .hero-cta .btn svg{ width:15px; height:15px }
  .hero-cta .btn-primary{ box-shadow:0 6px 20px -10px rgba(75,33,196,.75), inset 0 1px 0 rgba(255,255,255,.18) }
  /* La ubicación es un apunte, no un titular: ocupa lo mínimo */
  .hero-kicker{ font-size:.5rem; padding:.3rem .7rem; gap:.45rem; letter-spacing:.12em }
  .hero-kicker .pulse-dot{ width:5px; height:5px }
  .hero-sub{ font-size:.938rem }

  /* ─── EL MÉTODO: la sección se detiene con el texto centrado ─── */
  .lens-pin{ min-height:100svh; padding:var(--s-5) 0 }
  .lens-orb{ width:150px; height:150px; margin:-75px 0 0 -75px; opacity:0 }
  .lens-text{ font-size:clamp(1.35rem,4.6vw,2.1rem) }

  /* ─── DEL DATO A LA DECISIÓN ─── */
  .scene-pin{ height:100svh }
  .scene-cards{ display:block; perspective:800px }
  .s-card{ min-width:0; padding:.6rem .7rem; border-radius:13px }
  .s-card .mono-label{ font-size:.5rem }
  .s-card .spark{ width:74px; height:24px }
  .s-num{ font-size:1.1rem }
  .s-bars{ height:24px }
  .s-bars i{ width:6px }
  .sc1{ top:13%; left:5%;  right:auto }
  .sc2{ top:30%; right:5%; left:auto }
  .sc3{ top:47%; left:9%;  right:auto }
  .scene-copy{ padding-bottom:var(--s-4) }
  .scene-copy .h2{ font-size:clamp(1.7rem,6.4vw,2.6rem) }

  /* ─── DIFERENCIADORES: carrusel ─── */
  .diff-grid{
    display:flex; gap:.85rem;
    grid-template-columns:none;
    overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:.5rem 1.25rem 1.5rem; margin-inline:-1.25rem;
    scroll-padding-inline:1.25rem;
  }
  .diff-grid::-webkit-scrollbar{ display:none }
  .dcard{
    flex:0 0 min(80%,330px); scroll-snap-align:center;
    transform:scale(calc(.93 + var(--near,1) * .07));
    opacity:calc(.5 + var(--near,1) * .5);
    transition:transform .35s var(--e-out), opacity .35s var(--e-out);
  }
  .dcard-in{ padding:1.45rem 1.4rem 1.55rem; gap:.7rem }
  .dnum-ghost{ font-size:3rem; top:.4rem; right:.9rem }
  .dicon{ width:52px; height:52px; border-radius:15px; margin-bottom:.3rem }
  .dicon svg{ width:27px; height:27px }
  .dcard h3{ font-size:1.1rem }
  .dcard p{ font-size:.875rem }

  /* ─── SERVICIOS: mockup fijo + texto que cambia ───
     Se ancla la sección completa, no sólo el split: así el título queda
     junto al texto del servicio en vez de quedarse arriba y lejos. */
  .svc{
    display:flex; flex-direction:column; justify-content:center;
    min-height:100svh; padding:4.5rem 0 1.25rem;
  }
  .svc .sec-head{ margin-bottom:1rem }
  .svc .sec-head .h2{ font-size:clamp(1.5rem,5.6vw,2.05rem) }
  .svc-split{
    display:flex; flex-direction:column; justify-content:center;
    /* align-items:stretch es obligatorio: la regla base usa `start`, y
       heredado al flex dejaba las columnas con 0 px de ancho. */
    align-items:stretch;
    gap:.85rem; min-height:0; padding:0;
    position:relative;
  }
  .svc-list{ order:1 }
  /* display:block — en `grid` con pista auto el ancho porcentual del
     escenario resolvía a 0 y el mockup salía diminuto y descentrado. */
  .svc-stage-col{ order:2; display:block; height:auto; margin:0 }
  .cara-dots.svc-dots{ order:3; margin-top:0 }
  .svc-stage{
    aspect-ratio:auto; min-height:0; height:clamp(300px,44vh,420px);
    max-height:none; width:min(100%,440px); max-width:none; margin-inline:auto;
  }
  .phone{ width:auto; height:96%; aspect-ratio:9/19 }
  .laptop,.dash,.grid-posts{ width:min(94%,360px) }
  /* Las tarjetas se apilan en la misma celda: sólo se ve la activa */
  .svc-list{ display:grid; gap:0; min-height:170px }
  .svc-item{
    grid-area:1/1; opacity:0; visibility:hidden;
    transform:translateY(16px);
    background:none; padding:0 0 0 2.9rem;
    transition:opacity .45s var(--e-out), transform .45s var(--e-out), visibility .45s;
  }
  .svc-item.is-active{ opacity:1; visibility:visible; transform:none; background:none }
  .svc-item::before{ top:.2rem; bottom:auto; height:2.1rem; background:linear-gradient(to bottom,var(--purple),var(--purple-lite)) }
  .svc-idx{ top:.35rem; left:0; color:var(--purple-lite) }
  .svc-item p{ max-width:none }

  /* ─── PARA QUIÉN: lista legible ─── */
  .nrow{
    grid-template-columns:auto 1fr auto;
    align-items:center; gap:.35rem .9rem;
    padding:1.15rem .5rem;
  }
  .nrow:hover{ padding-left:.5rem }
  .nrow-letter{ grid-row:1; grid-column:1; width:30px; height:30px; font-size:.625rem }
  .nrow-title{ grid-row:1; grid-column:2; font-size:1.0625rem }
  .nrow-arrow{ grid-row:1; grid-column:3; width:34px; height:34px }
  .nrow-arrow svg{ width:15px; height:15px }
  .nrow-desc{ grid-row:2; grid-column:2/4; font-size:.875rem; color:var(--text-mut) }

  /* ─── PAQUETES: carrusel ─── */
  .pack-grid{
    display:flex; gap:.85rem;
    grid-template-columns:none; max-width:none; align-items:stretch;
    overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:1.4rem 1.25rem 1.5rem; margin-inline:-1.25rem;
    scroll-padding-inline:1.25rem;
  }
  .pack-grid::-webkit-scrollbar{ display:none }
  .pcard{
    flex:0 0 min(84%,340px); scroll-snap-align:center;
    transform:scale(calc(.95 + var(--near,1) * .05));
    opacity:calc(.62 + var(--near,1) * .38);
    transition:transform .35s var(--e-out), opacity .35s var(--e-out);
  }
  .pcard.featured{ order:0 }
  .pcard-in{ padding:var(--s-4) 1.4rem }

  /* ─── NOSOTROS ─── */
  .mv{ padding:1.5rem 1.4rem }
  .mv-text{ font-size:.938rem }

  /* ─── Indicadores de carrusel ─── */
  .cara-dots{ display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top:-.35rem }
  .cara-dots button{
    width:26px; height:44px; padding:0; border:0; background:none;
    display:grid; place-items:center; cursor:pointer; touch-action:manipulation;
  }
  .cara-dots button::after{
    content:''; width:7px; height:7px; border-radius:99px;
    background:rgba(228,232,235,.24);
    transition:background .3s var(--e-out), width .3s var(--e-out);
  }
  .cara-dots button[aria-current="true"]::after{ width:20px; background:var(--purple-lite) }
}

@media (max-width:640px){
  .hero-visual{ max-height:clamp(240px,32vh,330px) }
  .hero-title{ font-size:clamp(1.92rem,8.88vw,2.88rem) }
  .hero-sub{ padding-inline:1.75rem }
  .hv-chip{ padding:.36rem .5rem }
  .hv-chip b{ font-size:.688rem }
  .chip-a{ top:0;    left:0 }
  .chip-b{ top:40%;  right:0 }
  .chip-c{ bottom:0; left:3% }
  .svc-stage{ height:clamp(220px,32vh,300px) }
  .svc-item{ padding-left:2.6rem }
  .kicker-rest{ display:none }
  .sc1{ top:11%; left:3% }
  .sc2{ top:29%; right:3% }
  .sc3{ top:47%; left:7% }
}

/* ══════════════════════════════════════════════════════════════
   RESPALDO — GSAP no disponible (CDN caído o bloqueado)
   Todo lo que normalmente revela la animación debe verse igual.
   ══════════════════════════════════════════════════════════════ */
.no-gsap .cursor,
.no-gsap .particles,
.no-gsap .lens-particles,
.no-gsap .lens-orb,
.no-gsap .preloader{ display:none }

.no-gsap .lens-text.base{ opacity:0 }
.no-gsap .lens-text.lit{ -webkit-mask-image:none; mask-image:none; position:relative }
.no-gsap .lens-pin{ min-height:auto }

.no-gsap .mock{ position:relative; inset:auto; opacity:1; visibility:visible }
.no-gsap .mock:not(.is-on){ display:none }
.no-gsap .svc-stage-col{ height:auto }
.no-gsap .svc-stage{ aspect-ratio:auto; min-height:620px; max-height:none }
.no-gsap .svc-item{ opacity:1 }

.no-gsap .scene-pin{ height:auto; min-height:70svh }
.no-gsap .s-card{ opacity:1 }
.no-gsap .bub{ opacity:1 }
.no-gsap .dash-bars i{ transform:scaleY(1) }

.no-gsap .menu.is-open .menu-bg{ clip-path:circle(155% at 50% 50%) }

/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD — reduced motion
   ══════════════════════════════════════════════════════════════ */
/* Sin anclaje no hay nada que cambie las tarjetas de servicio: se
   desapilan para que los cinco queden visibles de corrido. */
@media (prefers-reduced-motion:reduce) and (max-width:1100px){
  .svc-split{ min-height:0; padding-top:0; display:block }
  .svc-list{ display:grid; gap:1.75rem }
  .svc-item{ grid-area:auto; opacity:1; visibility:visible; transform:none }
  .scene-pin{ height:auto; min-height:70svh }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .cursor{ display:none }
  .particles,.lens-particles{ display:none }
  .lens-text.lit{
    -webkit-mask-image:none; mask-image:none;
  }
  .lens-text.base{ opacity:0 }
  .lens-orb{ display:none }
  .mock{ opacity:1; visibility:visible; position:relative; inset:auto }
  .mock:not(.is-on){ display:none }
  .dash-bars i{ transform:scaleY(1) }
  .bub{ opacity:1 }
}