/* ============================================================
   IntegraTec — Landing "espectacular"
   Recreación fiel del diseño de Claude Design (handoff).
   Marca: dark azulado + acento verde WhatsApp · Oswald + Montserrat.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Fondos — negro azulado */
  --bg:#0e0e11;  --bg0:#08080c;  --bg2:#16161a;  --bg3:#1f1f27;
  /* Bordes / separadores */
  --line:#2a2a32; --line2:#3a3a44;
  /* Texto: títulos / cuerpo destacado / cuerpo y subtítulos / apagado */
  --ink:#f0f0f4;  --ink1:#b8b8c6; --ink2:#8888a0; --ink3:#76768c;
  /* Acento — verde WhatsApp como único acento (antes magenta/rojo).
     --mag/--red conservan el nombre pero llevan el verde de marca. */
  --wa:#25d366;  --mag:#25d366;  --red:#34e07a;
  --grad:linear-gradient(125deg,#34e07a,#1ba85a);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink1);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  min-height:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--mag);color:#04130a}
:focus-visible{outline:2px solid var(--mag);outline-offset:2px;border-radius:3px}
main{position:relative;z-index:1}

/* ---------- Keyframes ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes glowpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.12)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}30%{opacity:1}60%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@keyframes hexspin{to{transform:rotate(360deg)}}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
.wrap--narrow{max-width:1100px}
.section{position:relative;padding:clamp(56px,9vw,100px) 0}

/* ---------- Fondo ambiente ---------- */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none}
.amb--glow{
  background:
    radial-gradient(900px 640px at 82% -6%, rgba(37,211,102,.26), rgba(37,211,102,.06) 42%, transparent 64%),
    radial-gradient(820px 560px at -6% 30%, rgba(37,211,102,.12), transparent 56%),
    radial-gradient(700px 700px at 50% 122%, rgba(37,211,102,.12), transparent 60%);
}
.amb--grid{
  opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
}
.ghost-hex{position:absolute;top:280px;left:-120px;width:420px;opacity:.05;z-index:0;pointer-events:none;animation:hexspin 90s linear infinite}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  border-radius:10px;cursor:pointer;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.btn .ic{flex:none}
.btn--grad{background:var(--grad);color:#04130a;font-size:13.5px;padding:11px 18px;border-radius:9px;box-shadow:0 8px 26px -10px rgba(37,211,102,.7)}
.btn--grad:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(37,211,102,.85)}
.btn--wa{background:var(--wa);color:#04130a;font-size:15px;padding:15px 24px;box-shadow:0 12px 34px -12px rgba(37,211,102,.7)}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(37,211,102,.85)}
.btn--ghost{color:var(--ink);font-size:15px;padding:15px 22px;border:1px solid var(--line2);background:transparent}
.btn--ghost:hover{border-color:var(--mag);transform:translateY(-3px)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,backdrop-filter .3s,border-color .3s}
.nav.is-scrolled{background:rgba(10,10,14,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav__inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.wordmark{font-family:'Oswald',sans-serif;font-weight:500;font-size:22px;letter-spacing:1px;text-transform:uppercase}
.wordmark b{font-weight:700}
.nav__links{display:none;gap:30px;margin-left:18px}
.nav__links a{font-family:'Oswald',sans-serif;font-size:13px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{margin-left:auto}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero__grid{position:relative;padding:108px 20px 56px;min-height:100svh;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero__copy{position:relative}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.5px;color:var(--ink1);background:var(--bg2);border:1px solid var(--line);padding:7px 14px 7px 10px;border-radius:999px}
.badge__dot{width:8px;height:8px;border-radius:50%;background:var(--wa);animation:pulse 2.4s infinite}
.hero__title{font-family:'Oswald',sans-serif;font-weight:700;line-height:.97;letter-spacing:-.5px;margin:22px 0 0;font-size:clamp(2.9rem,6.6vw,5.6rem);text-transform:uppercase;color:var(--ink)}
.hero__title span{display:block}
.hl{position:relative;color:var(--mag);white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:9px;background:rgba(37,211,102,.2);z-index:-1;border-radius:3px}
.hero__lead{color:var(--ink1);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.6;max-width:520px;margin:24px 0 0}
.hero__lead b{color:var(--ink)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__guarantees{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;color:var(--ink3);font-size:13px}
.hero__guarantees span{display:inline-flex;align-items:center;gap:8px}
.gdot{width:6px;height:6px;border-radius:50%;background:var(--mag)}

/* Mock de chat */
.hero__visual{position:relative;perspective:1200px;min-width:0;width:100%;max-width:430px;margin:0 auto}
.chat__glow{position:absolute;inset:-20px;background:radial-gradient(closest-side,rgba(37,211,102,.32),transparent 70%);filter:blur(34px);animation:glowpulse 5s ease-in-out infinite}
.chat{position:relative;width:100%;max-width:430px;margin:0 auto;border-radius:22px;background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;transform-style:preserve-3d}
.chat__head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line)}
.chat__avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--bg3);border:1px solid color-mix(in oklab,var(--mag) 40%,var(--line))}
.chat__who{display:flex;flex-direction:column;line-height:1.25}
.chat__who b{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.4px;color:var(--ink)}
.chat__who small{color:var(--wa);font-size:12px;display:inline-flex;align-items:center;gap:6px}
.chat__online{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 8px var(--wa)}
.chat__actions{margin-left:auto;display:flex;gap:16px;color:var(--ink3)}
.chat__body{padding:18px 16px;display:flex;flex-direction:column;gap:10px;min-height:300px;background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:18px 18px}
.chat__input{padding:11px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:13px;background:rgba(0,0,0,.2)}
.chat__field{flex:1;height:38px;border-radius:999px;background:var(--bg3);display:flex;align-items:center;padding:0 16px}
.chat__send{width:38px;height:38px;flex:none;border-radius:50%;background:var(--wa);display:grid;place-items:center;color:#04130a}

/* Burbujas (inyectadas por JS) */
.bub{max-width:80%;padding:11px 14px;font-size:14px;line-height:1.5;animation:rise .4s cubic-bezier(.22,1,.36,1) both}
.bub--in{align-self:flex-start;background:var(--bg3);color:var(--ink1);border-radius:16px 16px 16px 5px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bub--out{align-self:flex-end;background:var(--grad);color:#04130a;border-radius:16px 16px 5px 16px;box-shadow:0 6px 18px -4px rgba(37,211,102,.5)}
.bub--sys{align-self:center;max-width:none;color:var(--ink2);font-size:11.5px;font-weight:500;letter-spacing:.3px;background:rgba(255,255,255,.04);padding:6px 13px;border-radius:999px;margin-top:4px;box-shadow:none}
.typing{align-self:flex-start;background:var(--bg3);padding:12px 15px;border-radius:16px 16px 16px 5px;display:flex;gap:5px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}

/* Chips flotantes (mobile-first: dentro del viewport) */
.chip{position:absolute;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.chip--a{top:-16px;right:6px;animation:floaty 6s ease-in-out infinite}
.chip--b{bottom:24px;left:6px;animation:floaty2 7s ease-in-out infinite}
.chip__num{color:var(--mag);font-family:'Oswald',sans-serif;font-size:22px;line-height:1;font-weight:600}
.chip__label{color:var(--ink3);font-size:12px}

/* Indicador de scroll */
.scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink3)}
.scrollcue__label{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase}
.scrollcue__mouse{width:22px;height:34px;border:1.5px solid var(--line2);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.scrollcue__dot{width:4px;height:4px;border-radius:50%;background:var(--mag);animation:scrolldot 1.8s infinite}

/* ---------- Marquee ---------- */
.marquee{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--bg0);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__set{display:flex;align-items:center;gap:52px;padding-right:52px;font-family:'Oswald',sans-serif;font-size:18px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3)}
.marquee__item{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.marquee__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mag);box-shadow:0 0 8px rgba(37,211,102,.8)}

/* ---------- Encabezados de sección ---------- */
.sechead{max-width:760px}
.sechead--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-family:'Oswald',sans-serif;font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:10px}
.eyebrow__line{width:26px;height:2px;background:var(--grad)}
.sectitle{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;margin:16px 0 0;text-transform:uppercase;letter-spacing:-.3px;color:var(--ink)}
.sectitle--sm{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.06}
.seclead{color:var(--ink2);font-size:1.08rem;line-height:1.65;margin:18px 0 0;max-width:62ch}
.sechead--center .seclead{margin-left:auto;margin-right:auto}
.seclead b{color:var(--ink)}

/* ---------- Problema → Solución ---------- */
.split{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch;margin-top:52px}
.split__card{border-radius:14px;padding:30px}
.split__card--bad{background:var(--bg0);border:1px solid var(--line)}
.split__card--good{background:var(--bg2);border:1px solid color-mix(in oklab,var(--mag) 35%,var(--line));box-shadow:0 30px 70px -55px rgba(37,211,102,.9)}
.split__title{font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2);margin:0 0 18px}
.split__title--good{color:var(--mag)}
.split__arrow{display:grid;place-items:center;color:var(--mag)}
.split__arrow svg{filter:drop-shadow(0 0 14px rgba(37,211,102,.6));transform:rotate(90deg)}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.checklist li{display:flex;gap:12px;line-height:1.5;font-size:15px}
.split__card--bad .checklist li{color:var(--ink1)}
.split__card--good .checklist li{color:var(--ink)}
.checklist__ic{flex:none;margin-top:2px}
.checklist__ic--x{stroke:var(--ink3)}
.checklist__ic--check{stroke:var(--wa)}

/* ---------- Beneficios (bento) ---------- */
.beneficios .sechead{max-width:680px}
.benefits{display:grid;grid-template-columns:1fr;gap:16px;margin-top:46px}
.card{border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.benefit{padding:26px;transform-style:preserve-3d;transition:transform .15s ease-out,border-color .3s}
.benefit:hover{border-color:var(--line2)}
.benefit__ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;color:var(--mag);background:linear-gradient(125deg,rgba(37,211,102,.16),rgba(37,211,102,.16));border:1px solid color-mix(in oklab,var(--mag) 22%,transparent);margin-bottom:16px}
.benefit__ic--solid{color:#04130a;background:var(--grad);border:0;box-shadow:0 8px 22px -8px rgba(37,211,102,.8)}
.benefit__title{font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;margin:0 0 8px;letter-spacing:.4px;color:var(--ink);text-transform:uppercase}
.benefit__text{color:var(--ink2);font-size:14.5px;line-height:1.55;margin:0}
.benefit__text--bright{color:var(--ink1)}
.benefit--feature{background:linear-gradient(150deg,rgba(37,211,102,.16),var(--bg2));border:1px solid color-mix(in oklab,var(--mag) 32%,var(--line))}
.benefit--wide{display:flex;align-items:center;gap:22px}
.benefit--wide .benefit__ic{flex:none;margin-bottom:0}

/* ---------- Cómo funciona (timeline) ---------- */
.steps{position:relative;margin-top:54px;padding-left:14px;display:flex;flex-direction:column;gap:26px}
.steps__line{position:absolute;left:32px;top:10px;bottom:10px;width:2px;background:var(--line)}
.steps__prog{position:absolute;left:0;top:0;width:100%;height:0;background:var(--grad);box-shadow:0 0 14px rgba(37,211,102,.7);transition:height .15s linear}
.step{display:flex;gap:26px;align-items:flex-start}
.step__num{position:relative;z-index:1;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:'Oswald',sans-serif;font-weight:700;background:var(--bg2);border:2px solid var(--line2);color:var(--ink3);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.step.is-active .step__num{background:var(--grad);border-color:var(--mag);color:#04130a;box-shadow:0 0 18px rgba(37,211,102,.6)}
.step__body{padding-top:3px}
.step__title{font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;margin:0 0 6px;letter-spacing:.4px;color:var(--ink);text-transform:uppercase}
.step__text{color:var(--ink2);font-size:15px;line-height:1.6;margin:0;max-width:620px}

/* ---------- Industrias ---------- */
.industrias .sechead{max-width:720px}
.industries{display:grid;grid-template-columns:1fr;gap:16px;margin-top:46px}
.industry{padding:24px;transform-style:preserve-3d;transition:transform .15s ease-out,border-color .3s}
.industry:hover{border-color:color-mix(in oklab,var(--mag) 40%,var(--line))}
.industry__ic{color:var(--mag);margin-bottom:14px}
.industry__title{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;margin:0 0 7px;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}
.industry__title--mag{color:var(--mag)}
.industry__text{color:var(--ink2);font-size:14px;line-height:1.5;margin:0}
.industry__text--bright{color:var(--ink1)}
.industry--cta{background:var(--bg0);border:1px dashed color-mix(in oklab,var(--mag) 45%,var(--line));display:flex;flex-direction:column;justify-content:center}
.industry__ic--solid{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#04130a;background:var(--grad);margin-bottom:14px;box-shadow:0 8px 22px -8px rgba(37,211,102,.8)}

/* Preview del panel */
.panelhead{max-width:720px;margin-top:84px}
.dash{margin:36px auto 0;max-width:920px;perspective:1500px}
.dash__card{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--bg2),var(--bg0));border:1px solid var(--line);box-shadow:0 50px 110px -50px rgba(0,0,0,.9)}
.dash__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)}
.dash__dot{width:11px;height:11px;border-radius:50%;display:block}
.dash__url{margin-left:14px;color:var(--ink3);font-size:12.5px;letter-spacing:.5px}
.dash__body{padding:24px}
.kpis{display:grid;grid-template-columns:1fr;gap:14px}
.kpi{border-radius:12px;padding:18px;background:var(--bg);border:1px solid var(--line)}
.kpi--feature{background:linear-gradient(150deg,rgba(37,211,102,.12),var(--bg));border:1px solid color-mix(in oklab,var(--mag) 24%,var(--line))}
.kpi__num{font-family:'Oswald',sans-serif;font-weight:600;font-size:38px;line-height:1;display:block;color:var(--ink)}
.kpi--feature .kpi__num{color:var(--mag)}
.kpi__num em{font-size:20px;font-style:normal;color:var(--mag)}
.kpi__label{color:var(--ink3);font-size:11.5px;text-transform:uppercase;letter-spacing:1px}
.leads{margin-top:16px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.leads__head,.leads__row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center}
.leads__head{padding:12px 18px;background:var(--bg2);color:var(--ink3);font-size:11.5px;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px}
.leads__row{padding:14px 18px;border-top:1px solid var(--line);font-size:14px}
.leads__row b{color:var(--ink)}
.leads__row span:not(.tag){color:var(--ink2)}
.tag{justify-self:start;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.tag--cerrado{background:rgba(136,136,160,.14);color:var(--ink1)}
.tag--nuevo{background:rgba(37,211,102,.14);color:var(--wa)}

/* ---------- CTA final ---------- */
.section.cta{padding:40px 0 110px}
.ctabox{position:relative;border-radius:24px;overflow:hidden;padding:64px 32px;text-align:center;background:var(--bg0);border:1px solid color-mix(in oklab,var(--mag) 30%,var(--line))}
.ctabox__glow{position:absolute;inset:-40% 30% auto -20%;width:70%;height:80%;background:radial-gradient(circle,rgba(37,211,102,.28),transparent 62%);filter:blur(10px);pointer-events:none;animation:glowpulse 6s ease-in-out infinite}
.ctabox__inner{position:relative}
.ctabox__title{margin:16px auto 0;max-width:680px}
.ctabox__lead{color:var(--ink1);font-size:1.1rem;line-height:1.6;margin:18px auto 0;max-width:560px}
.ctabox__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.ctabox__contact{color:var(--ink3);font-size:13.5px;margin-top:24px}
.ctabox__contact b{color:var(--ink1)}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg0)}
.footer__grid{padding-top:54px;padding-bottom:28px;display:grid;grid-template-columns:1fr;gap:32px}
.footer .wordmark{font-size:20px}
.footer__about{color:var(--ink2);font-size:14px;line-height:1.6;margin:16px 0 0;max-width:320px}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__h{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--ink3);margin:0 0 4px}
.footer__col a{color:var(--ink1);font-size:14px;transition:color .2s}
.footer__col a:hover{color:var(--mag)}
.footer__bottom{padding-top:18px;padding-bottom:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--ink3);font-size:12.5px}

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#04130a;box-shadow:0 14px 34px -10px rgba(37,211,102,.6);transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float__halo{position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:glowpulse 2.4s ease-in-out infinite}

/* ---------- Reveal on-scroll (progresivo: solo con JS) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.js [data-reveal="left"]{transform:translateX(-40px)}
.js [data-reveal="right"]{transform:translateX(40px)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   Responsive (mobile-first: las reglas de arriba son la base mobile)
   ============================================================ */

/* --- Refinamientos en pantallas muy chicas (≤380px) --- */
@media (max-width:380px){
  .wrap,.nav__inner,.hero__grid{padding-left:16px;padding-right:16px}
  .wordmark{font-size:20px}
  .btn--grad{padding:10px 13px;font-size:12.5px;letter-spacing:.5px}
  /* Tabla de leads: ocultamos la columna "Consulta" para que no se apriete */
  .leads__head,.leads__row{grid-template-columns:1fr auto}
  .leads__head span:nth-child(2),.leads__row span:nth-child(2){display:none}
}

@media (min-width:480px){
  .chip--a{top:-22px;right:-4px}
  .chip--b{bottom:28px;left:-4px}
}
@media (min-width:560px){
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:640px){
  .industries{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:700px){
  .benefits{grid-template-columns:repeat(2,1fr)}
  .benefit--wide{grid-column:span 2}
}
@media (min-width:760px){
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
  .wrap,.nav__inner,.hero__grid{padding-left:24px;padding-right:24px}
}
@media (min-width:820px){
  .split{grid-template-columns:1fr auto 1fr}
  .split__arrow svg{transform:none}
}
@media (min-width:900px){
  .nav__links{display:flex}
}
@media (min-width:980px){
  .hero__grid{grid-template-columns:1.05fr .95fr;padding-top:150px;padding-bottom:80px;gap:56px}
  .industries{grid-template-columns:repeat(3,1fr)}
  /* En desktop el mock se alinea a la derecha y los chips vuelven a flotar afuera */
  .hero__visual{margin-right:0;margin-left:auto}
  .chat__glow{inset:-40px}
  .chip--a{top:-22px;right:-10px}
  .chip--b{bottom:30px;left:-26px}
}
@media (min-width:1040px){
  .benefits{grid-template-columns:repeat(6,1fr)}
  .benefit{grid-column:span 2}
  .benefit--wide{grid-column:span 3}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .marquee__track{animation:none}
}