/* ==========================================================================
   SÁM digital · Home v1
   Marca extraída de samdigital.com.co
   Colores: azul marino #06304C · naranja #FEA027 · turquesa #25A8B3 · hielo #F1FEFF
   Tipografías: Red Hat Display (títulos) · Quicksand (texto) · Poppins (números)
   ========================================================================== */

:root{
  --navy-950:#031a2b;
  --navy-900:#06304c;
  --navy-800:#0a4467;
  --blue:#0b79b0;
  --cyan:#25a8b3;
  --aqua:#19d3e0;
  --orange:#fea027;
  --orange-2:#e67a1f;
  --ice:#f1feff;
  --white:#fff;
  --ink:#06304c;
  --muted:#4d6b7e;

  --grad-cta:linear-gradient(90deg,#fe9f27 0%,#e67a1f 100%);
  --grad-brand:linear-gradient(90deg,#25a8b3 0%,#fea027 100%);
  --grad-accent:linear-gradient(100deg,#fea027 10%,#ffcb6b 55%,#fea027 100%);
  --grad-accent-light:linear-gradient(100deg,#0b79b0 0%,#13919d 100%);
  /* Fondos: blanco que se funde a naranja suave (secciones claras) y oscuros con luz de color (secciones oscuras) */
  --grad-warm:linear-gradient(180deg,#fff 0%,#fff 36%,#fff2e0 70%,#ffe2bd 100%);
  --grad-warm-soft:linear-gradient(180deg,#fff 0%,#fff7ec 100%);
  --grad-dark-1:
    radial-gradient(70% 55% at 90% 0%,rgba(11,121,176,.5),transparent 62%),
    radial-gradient(55% 45% at 0% 100%,rgba(254,160,39,.13),transparent 62%),
    linear-gradient(180deg,#05263d 0%,#06304c 48%,#031a2b 100%);
  --grad-dark-2:
    radial-gradient(60% 60% at 14% 8%,rgba(37,168,179,.3),transparent 62%),
    radial-gradient(50% 50% at 100% 100%,rgba(254,160,39,.18),transparent 60%),
    linear-gradient(200deg,#0a4467 0%,#04233a 55%,#021521 100%);
  --grad-wa:linear-gradient(120deg,#0b79b0 0%,#25a8b3 55%,#fea027 100%);

  --f-display:'Red Hat Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'Poppins',system-ui,sans-serif;

  /* Contenedor (referencia Superside, medido a 1920px): contenido de 1608px máx. con gutter de 32px */
  --maxw:1672px;
  --gutter:clamp(16px,2.5vw,32px);
  --edge:max(var(--gutter),calc((100vw - (var(--maxw) - 2 * var(--gutter))) / 2)); /* margen izquierdo real del contenedor */
  --sec:clamp(72px,7.5vw,128px);
  --r-sheet:clamp(26px,3.4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ───────── Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--navy-950);color:var(--ink);
  font:500 clamp(1rem,1.05vw,1.15rem)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--orange);color:var(--navy-900)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:16px;top:-80px;z-index:999;background:var(--orange);color:var(--navy-900);padding:12px 18px;border-radius:12px;font-weight:700}
.skip:focus{top:16px}

/* ───────── Tipografía ───────── */
.h2{font:900 clamp(2rem,3.7vw,3.75rem)/1.04 var(--f-display);letter-spacing:-.03em}
.h2--xl{font-size:clamp(2.3rem,4.8vw,4.75rem);line-height:1}
/* Acento en cursiva con degradé. Se aplica también a cada palabra (.wi) para que funcione con el split de texto */
em{--g:var(--grad-accent);font-style:italic;font-weight:800;letter-spacing:-.02em}
.section--light em,.work em{--g:var(--grad-accent-light)}
.story em{--g:linear-gradient(100deg,#e67a1f 0%,#f59a1f 55%,#e67a1f 100%)}
em,em .wi{
  background-image:var(--g);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em;
}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,2.2vw,36px);
  font:800 .82rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
.eyebrow span{width:44px;height:2px;background:currentColor;opacity:.5}
.eyebrow--dark{color:var(--aqua)}

/* Máscaras de texto (split) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .08em .16em 0;margin:-.04em -.08em -.16em 0}
.wi{display:inline-block;will-change:transform}
.sw{display:inline-block}

/* ───────── Secciones ───────── */
.section{position:relative;padding-block:var(--sec);isolation:isolate;overflow:hidden}
/* Cada sección ocupa al menos el alto de la pantalla (nunca asoma un pedazo de la siguiente) y centra su contenido */
.about,.stats,.cta,.blog{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(44px,7svh,110px)}
/* overflow:clip recorta igual que hidden pero NO crea un contenedor de scroll, así que el lado izquierdo puede ser sticky respecto a la ventana */
.services{min-height:100svh;overflow:clip}
.section--light{background:var(--grad-warm);color:var(--ink)}
.section--dark{background:var(--grad-dark-1);color:#fff}
.stats.section--dark{background:var(--grad-dark-2)}
.sheet{z-index:2}
.aurora{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;pointer-events:none;z-index:-1}
/* Luz naranja sobre fondos claros (radial-gradient suave, sin filtros: barato de pintar) */
.aurora--o{background:radial-gradient(circle,#fea027 0%,rgba(254,160,39,0) 68%);filter:none;opacity:.4}
.aurora--o1{width:46vw;height:46vw;right:-14vw;top:-8vw}
.aurora--o2{width:40vw;height:40vw;left:-14vw;bottom:-14vw;opacity:.34}
.aurora--o3{width:36vw;height:36vw;right:-8vw;bottom:-16vw;opacity:.38}

/* ───────── Botones ───────── */
.btn{
  --h:56px;position:relative;display:inline-flex;align-items:center;gap:16px;height:var(--h);
  padding:0 7px 0 26px;border-radius:999px;font:800 1rem/1 var(--f-display);white-space:nowrap;
  isolation:isolate;overflow:hidden;transition:box-shadow .4s var(--ease),background .4s,color .4s;
}
/* Foco de luz que sigue al cursor dentro del botón (--mx/--my los escribe main.js) */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,var(--shine,.4)),rgba(255,255,255,0) 65%);
}
.btn:hover::before{opacity:1}
.btn--lg{--h:64px;padding-left:32px;font-size:1.05rem}
.btn--xl{--h:72px;padding-left:32px;font-size:1.12rem}
.btn__txt{position:relative;display:block;overflow:hidden;height:1.25em;line-height:1.25}
.btn__txt span{display:block;transition:transform .55s var(--ease)}
.btn__txt span+span{position:absolute;left:0;top:100%}
.btn:hover .btn__txt span{transform:translateY(-100%)}
.btn__ico{
  width:calc(var(--h) - 14px);height:calc(var(--h) - 14px);border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy-900);transition:transform .55s var(--ease),background .3s;
}
.btn:hover .btn__ico{transform:rotate(-45deg)}
.btn--primary{background:linear-gradient(110deg,#ffb94d 0%,#fea027 38%,#e67a1f 100%);color:var(--navy-900);box-shadow:0 14px 40px -14px rgba(254,160,39,.7)}
.btn--primary:hover{box-shadow:0 18px 50px -10px rgba(254,160,39,.9)}
.btn--brand{background:linear-gradient(90deg,#25a8b3 0%,#fea027 100%);color:#fff}
.btn--brand .btn__ico{background:rgba(255,255,255,.95)}
.btn--ghost{--shine:.2;border:1.5px solid rgba(255,255,255,.38);color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn__ico--ghost{background:rgba(255,255,255,.14);color:#fff}
.btn--dark{--shine:.22;background:linear-gradient(135deg,#0a4467 0%,#06304c 50%,#031a2b 100%);color:#fff;box-shadow:0 14px 30px -14px rgba(3,26,43,.7)}
.btn--dark:hover{box-shadow:0 18px 38px -12px rgba(3,26,43,.8)}
.btn__ico--orange{background:var(--orange);color:var(--navy-900)}

/* ───────── Barra de progreso + cursor ───────── */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:300;background:var(--grad-brand);transform:scaleX(0);transform-origin:left}

.cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
/* La posición la escribe main.js con translate3d en cada frame; solo hay transition de tamaño y color */
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform}
.cursor__dot{
  width:9px;height:9px;background:linear-gradient(135deg,#ffb94d,#e67a1f);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 10px rgba(254,160,39,.55);transition:opacity .25s;
}
.cursor__ring{
  width:38px;height:38px;border:1.5px solid var(--orange);box-shadow:0 0 0 1px rgba(255,255,255,.85);
  display:grid;place-items:center;
  transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s,box-shadow .3s;
}
.cursor__label{font:800 .78rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--navy-900);opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s var(--ease)}
.cursor.is-link .cursor__ring{width:68px;height:68px;border-color:var(--cyan);background:rgba(254,160,39,.14)}
.cursor.is-view .cursor__ring{width:112px;height:112px;background:var(--orange);border-color:var(--orange)}
.cursor.is-view .cursor__label{opacity:1;transform:scale(1)}
.cursor.is-view .cursor__dot{opacity:0}
.cursor.is-down .cursor__ring{width:28px;height:28px}
html.has-cursor,html.has-cursor *{cursor:none!important}

/* ───────── Header ───────── */
.header{position:fixed;top:14px;left:0;right:0;z-index:100}
.header__bar{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;
  padding:0 8px 0 clamp(18px,2vw,30px);border-radius:999px;
  background:rgba(4,31,51,.5);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  transition:background .4s,border-color .4s;
}
.header.is-solid .header__bar{background:rgba(4,31,51,.82)}
.header__logo img{width:92px;height:auto}
.header.is-menu .header__bar{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Botón de menú (hamburguesa) */
.burger{
  position:relative;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 6px 0 22px;border-radius:999px;color:#fff;
  font:800 .95rem/1 var(--f-display);isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .4s;
}
.burger::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(254,160,39,.5),rgba(254,160,39,0) 65%)}
.burger:hover{border-color:var(--orange);box-shadow:0 12px 34px -12px rgba(254,160,39,.65)}
.burger:hover::before{opacity:1}
.burger__txt{position:relative;display:block;overflow:hidden;height:1.2em;line-height:1.2;min-width:3.4em}
.burger__txt span{display:block;transition:transform .5s var(--ease)}
.burger__txt span+span{position:absolute;left:0;top:100%}
.burger[aria-expanded="true"] .burger__txt span{transform:translateY(-100%)}
.burger__ico{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ffb94d,#fea027 50%,#e67a1f);transition:transform .6s var(--ease)}
.burger__ico i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--navy-900);transition:transform .5s var(--ease),top .5s var(--ease),left .5s var(--ease),right .5s var(--ease)}
.burger__ico i:first-child{top:15px}.burger__ico i:last-child{top:23px;left:15px}
.burger:hover .burger__ico i:last-child{left:11px}
.burger[aria-expanded="true"] .burger__ico{transform:rotate(90deg)}
.burger[aria-expanded="true"] .burger__ico i:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__ico i:last-child{top:19px;left:11px;transform:rotate(-45deg)}

/* ───────── Mega menú ───────── */
.mm{
  position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;visibility:hidden;color:#fff;outline:0;
  overflow-y:auto;overscroll-behavior:contain;padding-top:clamp(92px,14svh,124px);
}
.mm__bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 88% 0%,rgba(11,121,176,.55),transparent 62%),
    radial-gradient(50% 55% at 6% 100%,rgba(254,160,39,.18),transparent 60%),
    radial-gradient(40% 40% at 50% 55%,rgba(37,168,179,.12),transparent 70%),
    linear-gradient(150deg,#031a2b 0%,#06304c 55%,#021521 100%);
}
.mm__bg::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.4px);background-size:34px 34px;-webkit-mask-image:radial-gradient(80% 80% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(80% 80% at 30% 40%,#000,transparent 75%)}
.mm__inner{
  flex:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.85fr) minmax(0,1.05fr);gap:clamp(20px,3vw,56px);align-items:stretch;
  padding-block:clamp(6px,1.6svh,20px);
}
.mm__label{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(12px,2.2svh,26px);font:800 .72rem/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--aqua)}
.mm__label small{letter-spacing:.02em;text-transform:none;font:600 .8rem var(--f-body);color:rgba(255,255,255,.55)}

.mm__links{display:flex;flex-direction:column}
.mm__links a{display:flex;align-items:baseline;gap:16px;padding:clamp(3px,.9svh,9px) 0;transition:opacity .35s}
.mm__links:hover a:not(:hover){opacity:.32}
.mm__n{width:1.8em;flex:none;font:700 .78rem var(--f-num);color:var(--orange);opacity:.85}
.mm__t{display:block;overflow:hidden;padding-bottom:.1em;transition:transform .6s var(--ease)}
.mm__t span{display:block;white-space:nowrap;font:900 clamp(1.5rem,2.6vw,2.9rem)/1.1 var(--f-display);letter-spacing:-.03em;transition:color .3s}
.mm__links a:hover .mm__t{transform:translateX(14px)}
.mm__links a.is-current .mm__n{opacity:1}
.mm__links a.is-current .mm__t span{color:var(--orange)}
.mm__links a:hover .mm__t span{color:var(--orange)}

.mm__sol{display:flex;flex-direction:column;min-width:0}
.mm__grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(8px,.9vw,14px)}
.mm__grid li{display:flex}
.mm__card{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:clamp(104px,17svh,168px);padding:clamp(12px,1.2vw,18px);
  border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 60%,rgba(3,26,43,.3) 100%);border:1px solid rgba(255,255,255,.12);
  transition:transform .5s var(--ease),border-color .3s,box-shadow .4s;
}
.mm__card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(254,160,39,.26),rgba(255,255,255,.05) 45%,transparent 72%)}
.mm__card:hover{transform:translateY(-6px);border-color:rgba(254,160,39,.65);box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.mm__card:hover::before{opacity:1}
.mm__ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(150deg,#fff8ea,#ffd9a0)}
.mm__ico img{width:34px;height:auto}
.mm__ctx b{display:block;font:800 clamp(.92rem,1.08vw,1.08rem)/1.15 var(--f-display)}
.mm__ctx small{display:block;margin-top:4px;font-size:.78rem;line-height:1.3;color:rgba(255,255,255,.62)}
.mm__go{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);transition:background .3s,color .3s,transform .6s var(--ease),border-color .3s}
.mm__card:hover .mm__go{background:var(--orange);color:var(--navy-900);border-color:var(--orange);transform:rotate(45deg)}

/* CTA del mega menú: tarjeta naranja a pleno color + botón grande con brillo y pulso */
.mm__cta{min-width:0;display:flex}
.mm__ctabox{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,1.8svh,18px);padding:clamp(18px,1.9vw,30px);
  border-radius:28px;overflow:hidden;isolation:isolate;color:var(--navy-900);
  background:radial-gradient(90% 60% at 100% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(155deg,#ffc561 0%,#fea027 42%,#e67a1f 100%);
  box-shadow:0 40px 90px -30px rgba(254,160,39,.75),0 0 0 1px rgba(255,255,255,.25) inset;
}
.mm__ctabox::before{content:"";position:absolute;right:-30%;bottom:-24%;width:90%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.34) 22px 24px)}
.mm__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:var(--navy-900);color:#fff;font:800 .72rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.mm__badge i{width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 0 rgba(61,220,151,.7);animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 10px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.mm__ctabox h3{font:900 clamp(1.5rem,2.35vw,2.4rem)/1.06 var(--f-display);letter-spacing:-.035em}
.mm__ctabox em,.mm__ctabox em .wi{background:none;-webkit-text-fill-color:#fff;color:#fff;padding:0}
.mm__ctabox p{font-weight:700;color:rgba(6,48,76,.85);max-width:24em}
.mm__btn{--h:72px;width:100%;justify-content:space-between;padding-left:28px;font-size:clamp(1rem,1.2vw,1.15rem);box-shadow:0 20px 40px -14px rgba(3,26,43,.7);animation:ctapulse 2.4s ease-in-out infinite}
.mm__btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
@keyframes ctapulse{0%,100%{box-shadow:0 20px 40px -14px rgba(3,26,43,.7),0 0 0 0 rgba(6,48,76,.5)}50%{box-shadow:0 20px 40px -14px rgba(3,26,43,.7),0 0 0 14px rgba(6,48,76,0)}}
@keyframes shine{0%,55%{left:-40%}100%{left:140%}}
.mm__proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mm__proof li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:rgba(6,48,76,.9);color:#fff}
.mm__proof b{font:900 1.35rem/1 var(--f-display);color:var(--orange)}
.mm__proof span{font-size:.7rem;line-height:1.2;color:rgba(255,255,255,.78)}

.mm__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:clamp(10px,1.8svh,20px);border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(8px,1.6svh,18px)}
.mm__foot .social a{width:42px;height:42px}
.mm__foot p{font-size:.86rem;color:rgba(255,255,255,.55)}

.social{display:flex;gap:10px}
.social a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.28);color:#fff;transition:background .3s,color .3s,transform .5s var(--ease)}
.social a:hover{background:var(--orange);color:var(--navy-900);border-color:var(--orange);transform:translateY(-4px)}

/* ───────── Hero ───────── */
/* El hero ocupa exactamente la pantalla y queda fijo (sticky): "Sobre nosotros" sube y lo cubre al hacer scroll */
.hero{
  position:sticky;top:0;z-index:0;display:flex;align-items:center;height:100svh;min-height:640px;color:#fff;overflow:hidden;isolation:isolate;
  background:var(--navy-900);padding:clamp(96px,8vw,128px) 0 clamp(64px,6vw,96px);
}
.hero__dim{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(180deg,#020f19,#031a2b)}
.hero__bg{
  position:absolute;inset:-4% 0;z-index:-5;will-change:transform;
  background:
    radial-gradient(55% 75% at 88% 18%,rgba(11,121,176,.6),transparent 62%),
    radial-gradient(45% 60% at 70% 105%,rgba(25,211,224,.28),transparent 60%),
    radial-gradient(40% 55% at 4% 92%,rgba(254,160,39,.16),transparent 60%),
    linear-gradient(160deg,#031a2b 0%,#06304c 55%,#083f63 100%);
}
.hero__shade{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,26,43,.78) 0%,rgba(3,26,43,.35) 34%,rgba(3,26,43,0) 56%),
    linear-gradient(180deg,rgba(3,26,43,.45) 0%,rgba(3,26,43,0) 20%,rgba(3,26,43,0) 74%,var(--navy-900) 100%);
}
.hero__grid{
  position:absolute;inset:0;z-index:-4;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.4px);background-size:34px 34px;
  mask-image:radial-gradient(70% 80% at 30% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 80% at 30% 50%,#000,transparent 75%);
}
.aurora--a{width:40vw;height:40vw;left:-12vw;top:-12vw;background:var(--orange);opacity:.2;animation:drift 18s ease-in-out infinite alternate}
.aurora--b{width:34vw;height:34vw;right:6vw;bottom:-16vw;background:var(--aqua);opacity:.22;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.15)}}

/* Muro de trabajos (portafolio real): dos columnas inclinadas que suben y bajan */
.wall{
  position:absolute;top:0;bottom:0;right:0;width:min(54vw,980px);z-index:-3;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect;
}
.wall__rot{position:absolute;inset:-22% -6% -22% 4%;display:flex;gap:clamp(14px,1.6vw,26px);transform:rotate(-8deg)}
.wall__col{flex:1;min-width:0;overflow:visible}
.wall__col:nth-child(2){margin-top:-6%}
.wall__track{display:flex;flex-direction:column;will-change:transform}
.hcard{
  position:relative;margin:0 0 clamp(14px,1.6vw,26px);border-radius:clamp(14px,1.5vw,24px);overflow:hidden;aspect-ratio:3/2;flex:none;
  background:#0a4467;box-shadow:0 30px 70px -26px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);
}
.hcard img{width:100%;height:100%;object-fit:cover;display:block}
.hcard figcaption{
  position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:14px;
  background:rgba(4,31,51,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);line-height:1.25;
}
.hcard b{font:800 .84rem var(--f-display)}
.hcard small{font-size:.72rem;color:rgba(255,255,255,.72)}

/* Luz que sigue al cursor sobre el hero (como en Asoclicper) */
.hero__glow{
  position:absolute;left:0;top:0;width:620px;height:620px;border-radius:50%;z-index:-2;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(254,160,39,.36) 0%,rgba(37,168,179,.2) 42%,transparent 70%);mix-blend-mode:screen;
}
.hero__inner{width:100%}
.hero__copy{max-width:min(40rem,46vw)}
.chip{
  display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 16px;border-radius:999px;
  background:rgba(254,160,39,.95);color:var(--navy-900);font:800 .78rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 30px -10px rgba(254,160,39,.7);
}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--navy-900);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hero__title{
  margin:clamp(20px,2.2vw,34px) 0 clamp(20px,2.2vw,32px);
  font:900 clamp(2.4rem,4.5vw,4.5rem)/1 var(--f-display);letter-spacing:-.035em;
}
.hero__lead{max-width:32em;font-size:clamp(1rem,1.2vw,1.2rem);color:rgba(255,255,255,.84)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,44px)}

.hero__scroll{position:absolute;left:var(--edge);bottom:clamp(40px,5vw,72px);display:flex;align-items:center;gap:14px;font:700 .78rem var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero__mouse{width:26px;height:42px;border:1.5px solid rgba(255,255,255,.6);border-radius:14px;position:relative}
.hero__mouse i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--orange);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(14px);opacity:0}}

@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── Sobre nosotros ───────── */
/* Cubre el hero (sin solaparse con él en el primer pantallazo) y proyecta sombra hacia arriba */
.about.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -40px 90px -30px rgba(2,15,25,.55)}
.about .eyebrow{margin-bottom:clamp(14px,1.4vw,22px)}
.about__big{
  max-width:18em;margin-bottom:clamp(24px,2.6vw,44px);
  font:900 clamp(1.9rem,3.9vw,3.9rem)/1.1 var(--f-display);letter-spacing:-.032em;
}
.about__big em,.about__big em .wi{background:none;-webkit-text-fill-color:currentColor;color:var(--blue);padding:0}
.about__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.about__copy{max-width:30rem;display:flex;flex-direction:column;gap:24px;align-items:flex-start;font-size:clamp(1rem,1.1vw,1.15rem);color:var(--muted)}
.ticks{display:flex;flex-direction:column;gap:12px;color:var(--ink);font-weight:700}
.ticks li{display:flex;align-items:center;gap:12px}
.ticks svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--orange);color:var(--navy-900)}

/* Mosaico: rectángulo + cuadrados / cuadrados + rectángulo (4 columnas) */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,min(15.5vw,25svh),248px);gap:clamp(10px,1.1vw,16px)}
.tile{position:relative;margin:0;border-radius:clamp(16px,1.7vw,28px);overflow:hidden;background:#dfeef1;isolation:isolate;box-shadow:0 24px 50px -28px rgba(6,48,76,.45)}
.tile--wide{grid-column:span 2}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile__chip{
  position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:14px;line-height:1.25;
  background:rgba(4,31,51,.68);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
}
.tile__chip b{font:800 .84rem var(--f-display)}
.tile__chip small{font-size:.72rem;color:rgba(255,255,255,.75)}

/* Tile de experiencia: cifra grande sobre degradado naranja */
.tile--stat{
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.6vw,26px);color:var(--navy-900);
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),
    linear-gradient(150deg,#ffc15e 0%,#fea027 46%,#e67a1f 100%);
  box-shadow:0 30px 60px -26px rgba(254,160,39,.75);
}
.tile__rings{
  position:absolute;right:-34%;bottom:-34%;width:100%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 20px,rgba(255,255,255,.34) 20px 22px);
}
.tile__kicker{align-self:flex-start;padding:6px 12px;border-radius:999px;background:rgba(6,48,76,.9);color:#fff;font:800 .68rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.tile__num{display:flex;align-items:baseline;font:900 clamp(3.4rem,7.4vw,7.4rem)/.9 var(--f-display);letter-spacing:-.05em}
.tile__num .suffix{font-size:.55em;letter-spacing:0;margin-left:.04em}
.tile__label{font:800 clamp(.8rem,1vw,1rem)/1.2 var(--f-display);max-width:9em}

/* Dígitos que ruedan (Superside) */
.digit{display:inline-block;height:1em;overflow:hidden;line-height:1}
.digit__col{display:block;will-change:transform}
.digit__col i{display:block;height:1em;line-height:1;font-style:normal}
.suffix{display:inline-block;line-height:1;white-space:pre}

/* ───────── Soluciones ───────── */
.services{padding-bottom:calc(var(--sec) + 40px)}
.aurora--c{width:50vw;height:50vw;right:-18vw;top:6vw;background:var(--blue);opacity:.45}
.services__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(32px,6vw,120px);align-items:start}
.services__side{position:sticky;top:clamp(90px,17svh,170px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2vw,30px)}
.services__side .eyebrow{margin-bottom:0}
.services__side .h2{font-size:clamp(1.9rem,3vw,3.2rem)}
.services__lead{color:rgba(255,255,255,.72);max-width:26em}
.svc-list{border-top:1px solid rgba(255,255,255,.18)}
.svc a{
  position:relative;display:grid;grid-template-columns:clamp(44px,5vw,84px) 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);
  padding:clamp(22px,2.6vw,42px) 0;border-bottom:1px solid rgba(255,255,255,.18);
  transition:opacity .4s,padding .6s var(--ease);
}
.svc a::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:radial-gradient(520px circle at var(--mx,20%) var(--my,50%),rgba(254,160,39,.2),transparent 70%);opacity:0;transition:opacity .4s;z-index:-1}
.svc-list:hover .svc:not(:hover) a{opacity:.35}
.svc a:hover::before{opacity:1}
.svc__n{font:700 1rem var(--f-num);color:var(--aqua)}
.svc__name{display:block;font:800 clamp(1.4rem,2.5vw,2.75rem)/1.08 var(--f-display);letter-spacing:-.025em;transition:transform .6s var(--ease),color .3s}
.svc a:hover .svc__name{transform:translateX(18px);color:var(--orange)}
.svc__desc{display:block;margin-top:10px;max-width:46ch;color:rgba(255,255,255,.62);font-size:.98rem;line-height:1.55}
.svc__go{width:clamp(46px,4vw,64px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.3);transition:background .3s,color .3s,transform .6s var(--ease),border-color .3s}
.svc a:hover .svc__go{background:var(--orange);border-color:var(--orange);color:var(--navy-900);transform:rotate(45deg)}
.svc-preview{
  position:fixed;left:0;top:0;z-index:60;width:clamp(160px,15vw,230px);aspect-ratio:1;border-radius:32px;pointer-events:none;opacity:0;
  background:linear-gradient(150deg,#fff8ea,#ffd9a0);display:grid;place-items:center;box-shadow:0 40px 90px -24px rgba(0,0,0,.65);
}
.svc-preview img{width:72%;height:auto}

/* ───────── Cómo lo hacemos · scrollytelling ───────── */
/* Anillos naranja decorativos (mismo recurso del tile de experiencia); crecen con el scroll para dar profundidad */
.story__rings{position:absolute;right:-9vw;bottom:-16vw;width:50vw;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;will-change:transform;
  background:repeating-radial-gradient(circle,rgba(254,160,39,0) 0 28px,rgba(254,160,39,.3) 28px 30px);
  -webkit-mask-image:radial-gradient(circle,#000 25%,transparent 68%);mask-image:radial-gradient(circle,#000 25%,transparent 68%)}
.story__intro{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
.story__intro .container{will-change:transform,opacity,filter}
.story__intro a,.story__intro button{pointer-events:auto}
.story-intro__inner .h2{max-width:13em}
.story-intro__lead{max-width:34em;margin-top:clamp(18px,2vw,28px);font-size:clamp(1.05rem,1.35vw,1.3rem);color:var(--muted)}
.steps-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(36px,5vw,72px);max-width:62rem}
.steps-preview li{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(18px,1.8vw,28px);border-radius:clamp(16px,1.6vw,24px);background:linear-gradient(160deg,#fff 0%,#fff3e1 100%);border:1px solid rgba(254,160,39,.28);box-shadow:0 24px 50px -30px rgba(230,122,31,.55)}
.steps-preview b{font:900 clamp(2rem,3.2vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.steps-preview span{font:800 clamp(1rem,1.25vw,1.2rem)/1.2 var(--f-display);color:var(--ink)}
.story{position:relative;overflow-x:clip;background:var(--grad-warm);color:var(--ink)}
.story__pin{position:relative;overflow:clip;height:100vh;min-height:640px;display:flex;align-items:center;padding-top:40px}
.story__grid{position:relative;z-index:1;will-change:transform,opacity,filter}
.story__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,110px);align-items:center}
.story__copy{display:grid;align-content:center}
.story__count{grid-area:1/1;align-self:start;font:700 1rem var(--f-num);color:var(--muted);margin-bottom:22px;display:flex;align-items:baseline;gap:8px}
.story__count b{font-size:clamp(2.2rem,3vw,3.2rem);line-height:1;color:var(--blue);font-weight:700}
.panel{grid-area:2/1;opacity:0;visibility:hidden}
.panel.is-active{opacity:1;visibility:visible}
.panel__title{font:900 clamp(1.9rem,3.2vw,3.5rem)/1.02 var(--f-display);letter-spacing:-.035em;margin-bottom:clamp(16px,1.8vw,26px)}
.panel__text{max-width:30em;color:var(--muted);font-size:clamp(1rem,1.1vw,1.15rem)}
.panel__list{display:flex;flex-direction:column;gap:10px;margin-top:clamp(18px,2vw,28px);font-weight:700;color:var(--ink)}
.panel__list li{display:flex;align-items:center;gap:12px}
.panel__list svg{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--orange);color:var(--navy-900)}
.story__progress{grid-area:3/1;display:flex;gap:10px;margin-top:clamp(24px,3vw,44px)}
.story__progress span{flex:1;height:4px;border-radius:4px;background:rgba(6,48,76,.12);overflow:hidden}
.story__progress i{display:block;height:100%;background:var(--grad-cta);transform:scaleX(0);transform-origin:left}

.story__stage{perspective:1600px;position:relative}
.story__stage::before{content:"";position:absolute;inset:-12% -4% -12% -6%;z-index:-1;pointer-events:none;background:radial-gradient(60% 60% at 60% 55%,rgba(254,160,39,.55),rgba(254,160,39,0) 72%)}
.dash{
  position:relative;aspect-ratio:16/11.5;border-radius:clamp(20px,2vw,32px);overflow:hidden;color:#fff;transform-style:preserve-3d;will-change:transform;
  background:radial-gradient(120% 90% at 85% 0%,#0f5f88 0%,transparent 55%),linear-gradient(160deg,#0a4467,#041f33 72%);
  box-shadow:0 50px 120px -30px rgba(6,48,76,.6),inset 0 0 0 1px rgba(255,255,255,.1);
}
.dash::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(80% 80% at 50% 55%,#000,transparent);-webkit-mask-image:radial-gradient(80% 80% at 50% 55%,#000,transparent)}
.dash__bar{position:relative;display:flex;align-items:center;gap:14px;padding:14px clamp(14px,1.6vw,22px);border-bottom:1px solid rgba(255,255,255,.1);height:56px}
.dash__dots{display:flex;gap:7px}
.dash__dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.dash__dots i:first-child{background:var(--orange)}
.dash__tabs{margin-left:auto;display:flex;gap:6px}
.dash__tab{padding:7px 14px;border-radius:999px;font:800 .74rem/1 var(--f-display);color:rgba(255,255,255,.55);transition:background .4s,color .4s}
.dash__tab.is-on{background:var(--orange);color:var(--navy-900)}
.viz{position:absolute;inset:56px 0 0 0}
.viz__layer{position:absolute;inset:0;opacity:0;visibility:hidden}

/* Capa 1 · Datos */
.hub{position:absolute;left:50%;top:50%;width:clamp(64px,7vw,96px);aspect-ratio:1;z-index:2}
.hub__core{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--grad-cta);color:var(--navy-900);font:900 clamp(1.6rem,2.6vw,2.6rem) var(--f-display);box-shadow:0 0 60px rgba(254,160,39,.55)}
.hub__core img{display:block;width:74%;height:auto}
.hub__ring{position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(254,160,39,.5);animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(.8);opacity:1}to{transform:scale(1.7);opacity:0}}
.node{
  position:absolute;left:var(--x);top:var(--y);z-index:2;padding:9px 15px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);
  font:800 clamp(.68rem,.9vw,.84rem)/1 var(--f-display);
}
.link{position:absolute;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(254,160,39,.9),rgba(25,211,224,.6));border-radius:2px;z-index:1}

/* Capa 2 · Análisis */
.chart{position:absolute;inset:18% 7% 14% 7%}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3.5%}
.bar{flex:1;height:var(--h);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#25a8b3,rgba(37,168,179,.2));transform-origin:50% 100%}
.bar--hot{background:var(--grad-cta);box-shadow:0 0 40px rgba(254,160,39,.5)}
.chart__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart__line path{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}
.insight{
  position:absolute;left:var(--x);top:var(--y);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);font:800 clamp(.66rem,.86vw,.8rem)/1 var(--f-display);white-space:nowrap;
}
.insight svg{color:var(--orange)}

/* Capa 3 · Estrategia */
.funnel{position:absolute;inset:16% 6% 15%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2%}
.band-f{
  width:var(--w);flex:1;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);
  font:900 clamp(.8rem,1.3vw,1.2rem) var(--f-display);letter-spacing:.02em;color:#fff;transform-origin:50% 50%;
}
.band-f:nth-child(1){background:linear-gradient(90deg,#0b79b0,#1394b5)}
.band-f:nth-child(2){background:linear-gradient(90deg,#1394b5,#25a8b3)}
.band-f:nth-child(3){background:linear-gradient(90deg,#25a8b3,#3cc3c4)}
.band-f:nth-child(4){background:var(--grad-cta);color:var(--navy-900)}
.sale{position:absolute;right:5%;bottom:6%;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:#3ddc97;color:var(--navy-900);font:900 clamp(.74rem,1vw,.9rem)/1 var(--f-display);box-shadow:0 0 40px rgba(61,220,151,.5)}
.plan{position:absolute;left:var(--x);top:var(--y);z-index:2;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);font:800 clamp(.66rem,.86vw,.8rem)/1 var(--f-display)}

/* ───────── Números ───────── */
.aurora--d{width:46vw;height:46vw;left:-12vw;bottom:-18vw;background:var(--cyan);opacity:.35}
.stats .h2{max-width:13em}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,7svh,104px)}
.stat{padding:clamp(20px,2vw,32px) clamp(16px,2vw,36px) 0;border-left:1px solid rgba(255,255,255,.2)}
.stat:first-child{padding-left:0;border-left:0}
.stat__num{display:flex;align-items:baseline;font:900 clamp(3rem,6vw,6.5rem)/1 var(--f-display);letter-spacing:-.05em;margin-bottom:18px;color:#fff}
.stat__num .digit__col i,.stat__num .suffix{background:linear-gradient(180deg,#fff 5%,#ffd49b 45%,#fea027 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stat__num .suffix{font-size:.4em;letter-spacing:0;font-weight:800;margin-left:.1em}
.stat p{max-width:15em;color:rgba(255,255,255,.74)}

/* ───────── Portafolio ───────── */
.work{position:relative;background:var(--grad-warm);color:var(--ink);z-index:2;overflow:hidden}
.work__pin{height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.work__track{display:flex;align-items:center;gap:clamp(24px,3.2vw,56px);padding-inline:var(--edge);width:max-content;will-change:transform}
.work__intro{flex:none;width:clamp(320px,36vw,680px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,30px)}
.work__intro .eyebrow{margin-bottom:0}
.work__intro .h2{font-size:clamp(1.9rem,3.2vw,3.4rem)}
.work__lead{color:var(--muted);max-width:28em}
.pcard{flex:none;width:clamp(320px,72vh,600px);display:block;border-radius:clamp(20px,2vw,30px);overflow:hidden;background:var(--c);color:var(--t);box-shadow:0 40px 90px -40px rgba(6,48,76,.5);transition:transform .8s var(--ease),box-shadow .5s}
.pcard:hover{transform:translateY(-10px);box-shadow:0 50px 100px -36px rgba(6,48,76,.62)}
.pcard__media{display:block;overflow:hidden;aspect-ratio:4/3.25;background:#e8eef2}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__cap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,28px)}
.pcard__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard__txt small{font:800 .72rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.pcard__txt b{font:800 clamp(1.3rem,1.9vw,1.9rem)/1.1 var(--f-display);letter-spacing:-.02em}
.pcard em,.pcard em .wi{background:none;-webkit-text-fill-color:currentColor;color:inherit;padding:0}
.pcard__cap i{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;transition:background .3s,color .3s,transform .6s var(--ease)}
.pcard:hover .pcard__cap i{background:var(--t);color:var(--c);transform:rotate(45deg)}
.work__end{flex:none;width:clamp(300px,32vw,560px);display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-right:var(--gutter)}
.work__endtitle{font:900 clamp(1.8rem,3vw,3rem)/1.05 var(--f-display);letter-spacing:-.03em}

/* ───────── CTA ───────── */
.cta{color:#fff;padding-bottom:calc(var(--sec) + 20px);background:var(--navy-950)}
.cta__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 90% at 88% 105%,rgba(25,211,224,.6),transparent 62%),
    radial-gradient(50% 70% at 5% 0%,rgba(254,160,39,.22),transparent 60%),
    linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 45%,#0a5f8a 100%);
}
.cta__bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:34px 34px;mask-image:radial-gradient(80% 80% at 70% 60%,#000,transparent);-webkit-mask-image:radial-gradient(80% 80% at 70% 60%,#000,transparent);opacity:.5}
.aurora--e{width:36vw;height:36vw;right:4vw;top:-10vw;background:var(--orange);opacity:.18}
.cta .container{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,80px);align-items:center}
.cta .eyebrow{grid-column:1/-1}
.cta__title{font:900 clamp(2.2rem,4.8vw,4.9rem)/1.02 var(--f-display);letter-spacing:-.035em;max-width:12em}
.cta__bubble{
  position:relative;width:clamp(130px,13vw,210px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--grad-cta);color:var(--navy-900);font:900 clamp(1rem,1.4vw,1.4rem) var(--f-display);box-shadow:0 30px 80px -20px rgba(254,160,39,.75);
  transition:box-shadow .4s;
}
.cta__bubble::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.35);animation:spin 20s linear infinite}
.cta__bubble svg{transition:transform .6s var(--ease)}
.cta__bubble:hover svg{transform:rotate(45deg) scale(1.15)}
.cta__cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);margin-top:clamp(24px,5svh,80px)}
.ccard{
  position:relative;overflow:hidden;padding:clamp(24px,2.4vw,40px);border-radius:clamp(22px,2vw,32px);
  background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 55%,rgba(3,26,43,.25) 100%);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);transition:transform .7s var(--ease),border-color .4s;
}
.ccard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(254,160,39,.2),rgba(255,255,255,.06) 40%,transparent 70%)}
.ccard:hover::before{opacity:1}
.ccard:hover{transform:translateY(-10px);border-color:rgba(254,160,39,.6)}
.ccard>*{position:relative}
.ccard img{width:78px;margin-bottom:22px}
.ccard h3{font:900 clamp(1.2rem,1.5vw,1.55rem)/1.15 var(--f-display);letter-spacing:-.02em;margin-bottom:10px}
.ccard p{color:rgba(255,255,255,.76)}

/* ───────── Blog ───────── */
.blog{z-index:3}
.blog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,4svh,56px)}
.blog__head .eyebrow{margin-bottom:18px}
.blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,40px)}
.post{display:flex;flex-direction:column;gap:12px}
.post__img{display:block;overflow:hidden;border-radius:clamp(20px,2vw,30px);aspect-ratio:37/25;background:#d6e9ec}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post:hover .post__img img{transform:scale(1.08)}
.post__tag{margin-top:10px;font:800 .76rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.post__title{font:800 clamp(1.1rem,1.35vw,1.4rem)/1.25 var(--f-display);letter-spacing:-.015em;transition:color .3s;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 2px;background-position:0 100%;padding-bottom:4px;align-self:flex-start}
.post:hover .post__title{background-size:100% 2px;color:var(--blue)}
.post__date{font-size:.9rem;color:var(--muted)}

/* ───────── Footer ───────── */
/* ───────── Footer (referencia Superside): foto a pantalla completa, titular + CTA y columnas de enlaces ───────── */
.footer{position:relative;overflow:hidden;z-index:4;isolation:isolate;color:#fff;background:#021521;padding-bottom:clamp(24px,3svh,40px)}
.footer__photo{position:absolute;left:0;right:0;top:0;height:min(112svh,1000px);z-index:-2;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 98%);mask-image:linear-gradient(180deg,#000 48%,transparent 98%)}
.footer__photo img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:50% 40%;will-change:transform}
.footer__shade{
  position:absolute;left:0;right:0;top:0;height:min(112svh,1000px);z-index:-1;pointer-events:none;
  /* La capa lineal va ARRIBA y termina en el color exacto del fondo (#021521): así no queda un borde donde acaba la foto */
  background:
    linear-gradient(180deg,rgba(6,48,76,.55) 0%,rgba(3,26,43,.38) 24%,rgba(2,21,33,.68) 52%,rgba(2,21,33,.93) 80%,#021521 100%),
    radial-gradient(70% 55% at 50% 38%,rgba(3,26,43,.05),rgba(3,26,43,.5) 100%);
}
.footer__hero{min-height:clamp(440px,76svh,760px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,4svh,44px);text-align:center;padding-top:clamp(96px,14svh,150px)}
.footer__title{max-width:14em;font:900 clamp(2.2rem,4.8vw,4.9rem)/1.02 var(--f-display);letter-spacing:-.04em;text-shadow:0 6px 40px rgba(2,21,33,.45)}
.footer__links{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-top:clamp(8px,2svh,24px)}
.footer__h{padding-top:20px;border-top:1px solid rgba(255,255,255,.32);font:800 1.15rem/1 var(--f-display);margin-bottom:clamp(28px,5svh,56px)}
.footer__cols{display:grid;gap:clamp(16px,2vw,32px)}
.footer__cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.footer__cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer__col ul{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.footer__cat{display:inline-flex;align-items:center;gap:8px;font:800 1.05rem/1.2 var(--f-display);color:#fff;transition:color .3s}
a.footer__cat:hover{color:var(--orange)}
.footer__col li a{color:rgba(255,255,255,.62);font-size:.98rem;transition:color .3s,transform .4s var(--ease);display:inline-block}
.footer__col li a:hover{color:var(--orange);transform:translateX(5px)}
.footer__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;margin-top:clamp(48px,9svh,110px);padding-block:20px 0;padding-right:clamp(104px,8vw,124px)}
.footer__brand img{width:clamp(120px,10vw,168px);margin-bottom:14px}
.footer__brand p{font-size:.9rem;color:rgba(255,255,255,.7)}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:.82rem}
.footer__legal a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35);transition:color .3s}
.footer__legal a:hover{color:var(--orange)}
.footer__bar .social{justify-self:end}

/* ───────── WhatsApp: círculo en reposo, se expande al pasar el mouse y abre una tarjeta de contacto ───────── */
.fab{
  position:fixed;right:2rem;bottom:2rem;z-index:80;display:inline-flex;align-items:center;justify-content:center;
  gap:0;width:3.75rem;height:3.75rem;padding:0;border-radius:999px;overflow:hidden;
  background:var(--grad-wa);color:#fff;border:none;cursor:pointer;
  box-shadow:0 14px 30px -8px rgba(254,160,39,.5);
  opacity:0;transform:translateY(16px) scale(.92);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease,box-shadow .3s ease,width .4s ease,padding .4s ease;
}
.fab.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab:hover{width:17rem;padding:0 1.15rem;gap:.6rem;justify-content:flex-start;box-shadow:0 18px 36px -10px rgba(254,160,39,.6)}
.fab.is-hidden{opacity:0;transform:translateY(0) scale(.85);pointer-events:none}
.fab-icon{width:1.7rem;height:1.7rem;flex:none}
.fab-icon svg{width:100%;height:100%}
.fab-label{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;font:800 .9rem var(--f-display);opacity:0;transition:max-width .4s ease,opacity .3s ease .05s}
.fab:hover .fab-label{max-width:15rem;opacity:1}

.fab-popup{
  position:fixed;right:2rem;bottom:2rem;z-index:81;width:min(87vw,21rem);
  padding:1.75rem 1.5rem 1.5rem;border-radius:1.5rem;background:linear-gradient(180deg,#fff 0%,#fff6ea 100%);color:var(--ink);
  box-shadow:0 24px 60px -12px rgba(3,26,43,.45);
  opacity:0;visibility:hidden;pointer-events:none;
}
.fab-popup.is-open{visibility:visible;pointer-events:auto}
.fab-popup-close{position:absolute;top:.85rem;right:.85rem;width:1.75rem;height:1.75rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#eef3f6;border:none;cursor:pointer;color:var(--ink)}
.fab-popup-close svg{width:14px;height:14px}
.fab-popup-avatar{display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;margin-bottom:14px;background:var(--navy-900);padding:9px}
.fab-popup-avatar img{width:100%;height:100%;object-fit:contain}
.fab-popup-title{font:900 1rem var(--f-display);margin:0 0 6px;color:var(--ink)}
.fab-popup-message{font-size:.9rem;line-height:1.55;color:var(--muted);margin:0 0 18px}
.fab-popup-cta{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.85rem 1rem;border-radius:999px;background:var(--navy-900);color:#fff;font:800 .9rem var(--f-display);transition:background-color .3s,color .3s,transform .3s}
.fab-popup-cta:hover{background:var(--orange);color:var(--navy-900);transform:translateY(-2px)}
.fab-popup-cta svg{width:18px;height:18px;flex:none}
@media (max-width:560px){
  .footer__cols--3,.footer__cols--2{grid-template-columns:1fr 1fr}
  .burger{padding:0 5px}
  .burger__txt{display:none}
  .mm__proof{grid-template-columns:1fr 1fr 1fr}
  .mm__card{min-height:110px}
  .fab{right:1.1rem;bottom:1.1rem}
  .fab:hover{width:15rem}
  .fab-popup{right:1.1rem;bottom:1.1rem}
}

/* ───────── Responsive ───────── */
@media (max-width:1180px){
  .mm__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .mm__sol{grid-column:1/-1;order:3}
  .mm__grid{grid-auto-rows:auto}
  .hero__copy{max-width:min(34rem,52vw)}
  .wall{width:54vw}
}
@media (max-width:900px){
  .footer__links{grid-template-columns:1fr}
  .footer__cols--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__bar{grid-template-columns:1fr;justify-items:start}
  .footer__legal{justify-content:flex-start}
  .footer__bar .social{justify-self:start}
  /* Con el menú abierto, el contenido pasa por debajo de la cabecera: degradado oscuro para que el logo y el botón se lean */
  .header.is-menu::before{content:"";position:fixed;left:0;right:0;top:0;height:104px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(3,26,43,.98) 55%,rgba(3,26,43,0))}
  .mm__inner{grid-template-columns:1fr}
  .mm__cta{order:2}
  .mm__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm__t span{font-size:clamp(1.9rem,9vw,3rem)}
  .mm__ctabox h3{font-size:clamp(1.5rem,7vw,2rem)}
  .hero{position:relative;height:auto;min-height:100svh;flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:120px;padding-bottom:120px}
  .hero__dim{display:none}
  .about.sheet{margin-top:calc(var(--r-sheet) * -1)}
  .hero__copy{max-width:100%}
  .hero__shade{background:linear-gradient(180deg,rgba(3,26,43,.25) 0%,rgba(3,26,43,0) 30%,rgba(3,26,43,0) 72%,var(--navy-900) 100%)}
  .wall{position:relative;order:2;inset:auto;width:100%;height:clamp(300px,82vw,440px);margin-top:36px;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
  .wall__rot{inset:-14% -10%;transform:rotate(-6deg)}
  .hero__scroll{display:none}
  .about__grid,.services__grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,38vw,230px)}
  .services__side{position:static}
  .svc a{grid-template-columns:36px 1fr auto}
  .story__pin{align-items:center;padding-top:76px;min-height:0}
  .plan{display:none}
  .sale{right:4%;bottom:4%;padding:9px 14px}
  .funnel{inset:10% 6% 16%}
  .story__grid{grid-template-columns:1fr;gap:20px}
  .story__stage{order:-1}
  .dash{aspect-ratio:16/10}
  .story__count{display:none}
  .panel{grid-area:1/1}
  .panel__title{font-size:clamp(1.9rem,8vw,2.8rem)}
  .panel__list{display:none}
  .story__progress{grid-area:2/1;margin-top:18px}
  .stats__grid{grid-template-columns:1fr 1fr;gap:36px 0}
  .steps-preview{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .steps-preview li{padding:12px}
  .steps-preview span{font-size:.78rem}
  .steps-preview b{font-size:1.5rem}
  .about,.stats,.cta,.blog,.services{min-height:0}
  .stat:nth-child(odd){padding-left:0;border-left:0}
  .cta .container{grid-template-columns:1fr}
  .cta__bubble{margin-top:36px}
  .cta__cards,.blog__grid{grid-template-columns:1fr}
  .pcard{width:min(80vw,440px)}
}
@media (max-width:560px){
  .btn--lg{--h:58px;padding-left:24px}
  .hero__cta .btn{width:100%;justify-content:space-between}
  .stats__grid{grid-template-columns:1fr}
  .stat{padding-left:0!important;border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:22px}
  .stat:first-child{border-top:0}
}

/* ───────── Movimiento reducido ───────── */
.reduce *,.reduce *::before,.reduce *::after{animation:none!important;transition-duration:.01ms!important}
.reduce .panel{opacity:1;visibility:visible;grid-area:auto;margin-bottom:48px}
.reduce .story__pin{height:auto;padding-block:48px;flex-direction:column;align-items:stretch}
.reduce .story__intro{position:relative;inset:auto;padding-block:48px;pointer-events:auto}
.reduce .viz__layer{opacity:1;visibility:visible;position:relative;inset:auto;height:320px}
.reduce .dash{aspect-ratio:auto}
.reduce .viz{position:relative;inset:auto}
.reduce .work__pin{height:auto;padding-block:var(--sec)}
.reduce .work__track{width:auto;flex-wrap:wrap}