/* =========================================================================
   Innprende — sitio web
   Sistema visual: modernista sobrio, suavizado.
   Identidad: Marino #0B1F3A · Eléctrico #2F6BFF · Hielo #DBE6FF · Blanco
   ========================================================================= */

/* ---------- Fuente Archivo, autoalojada ---------- */
@font-face{font-family:Archivo;src:url(fonts/archivo-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-semibold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-extrabold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --navy:#0B1F3A;
  --electric:#2F6BFF;
  --electric-solid:#2B63F5; /* mismo azul, un punto más oscuro: AA sobre blanco */
  --ice:#DBE6FF;
  --white:#FFFFFF;
  --navy-2:#33476A;
  --slate:#5B6B82;
  --mist:#C7CFDB;

  /* Derivados suaves (el "bajarle a las rayas") */
  --paper:#F7F9FC;
  --ice-soft:#EDF3FF;
  --line:#E6EBF3;
  --line-soft:#EFF2F7;
  --line-strong:#D6DEEA;
  --electric-deep:#1E4FD8;
  --electric-tint:rgba(47,107,255,.08);
  --navy-deep:#081729;
  --on-navy-dim:#9FB3D1;
  --line-navy:rgba(219,230,255,.13);
  --surface-navy:rgba(255,255,255,.04);

  /* Radios — la esquina recta se conserva en el símbolo, no en la interfaz */
  --r-xs:4px;
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* Sombras — ambientales, nunca marcadas */
  --sh-sm:0 1px 2px rgba(11,31,58,.04);
  --sh:0 1px 2px rgba(11,31,58,.04), 0 10px 24px -14px rgba(11,31,58,.14);
  --sh-lg:0 2px 4px rgba(11,31,58,.03), 0 28px 60px -28px rgba(11,31,58,.22);
  --sh-navy:0 30px 70px -32px rgba(0,0,0,.6);

  /* Ritmo */
  --wrap:1240px;
  --gutter:clamp(20px,5vw,48px);
  --sec-y:clamp(76px,9.5vw,134px);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.42s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:Archivo,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--electric);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--ice);color:var(--navy)}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--r-sm);font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:14px}

/* Etiqueta en mayúsculas — 600, tracking amplio */
.label{
  font-weight:600;font-size:.688rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate);margin:0;
}
.label--electric{color:var(--electric)}
.label--onNavy{color:var(--on-navy-dim)}

/* ---------- Símbolo Pipeline ---------- */
.pipeline{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--pg,2px);width:var(--ps,26px);height:var(--ps,26px);flex:none}
.pipeline i{display:block;border-radius:0} /* el símbolo conserva la esquina recta */
.pipeline i[data-c="navy"]{background:var(--navy)}
.pipeline i[data-c="ice"]{background:var(--ice)}
.pipeline i[data-c="electric"]{background:var(--electric)}
.pipeline--onNavy i[data-c="navy"]{background:#fff}
.pipeline--onNavy i[data-c="ice"]{background:rgba(219,230,255,.34)}
/* pulso sutil del cuadrado encendido */
.pipeline i[data-c="electric"]{animation:spark 4.2s var(--ease) infinite}
@keyframes spark{0%,72%,100%{opacity:1}80%{opacity:.42}88%{opacity:1}}

/* ---------- Logotipo ---------- */
.logo{display:inline-flex;align-items:center;gap:11px}
.logo__word{font-weight:800;font-size:1.32rem;letter-spacing:-.032em;line-height:1}
.logo__word em{font-style:normal;color:var(--electric)}
.logo--onNavy .logo__word{color:#fff}
.logo--onNavy .logo__word em{color:var(--ice)}
.logo__stack{display:flex;flex-direction:column;gap:5px}
.logo__slogan{font-weight:600;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);line-height:1}
.logo--onNavy .logo__slogan{color:var(--on-navy-dim)}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--electric-solid);--fg:#fff;--bd:var(--electric-solid);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-weight:600;font-size:.938rem;letter-spacing:-.005em;
  cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  box-shadow:var(--sh-sm);
  white-space:nowrap;
}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--electric-deep);opacity:0;transition:opacity .26s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(47,107,255,.6)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .32s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn--ghost{--bg:transparent;--fg:var(--navy);--bd:var(--line-strong);box-shadow:none}
.btn--ghost::after{background:var(--navy)}
.btn--ghost:hover{color:#fff;border-color:var(--navy);box-shadow:0 10px 26px -14px rgba(11,31,58,.5)}

.btn--onNavy{--bg:transparent;--fg:#fff;--bd:rgba(219,230,255,.3);box-shadow:none}
.btn--onNavy::after{background:#fff}
.btn--onNavy:hover{color:var(--navy);border-color:#fff}

.btn--sm{padding:11px 19px;font-size:.875rem}
.btn--block{width:100%}
.btn--lg{padding:17px 30px;font-size:1rem}

/* enlace con subrayado animado */
.ulink{position:relative;font-weight:600;color:var(--electric);display:inline-flex;align-items:center;gap:7px}
.ulink::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .34s var(--ease)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}
.ulink .arw{transition:transform .3s var(--ease)}
.ulink:hover .arw{transform:translateX(3px)}

/* ---------- Navegación ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:transform .4s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent;background:rgba(255,255,255,0)}
.nav--solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:var(--line-soft);box-shadow:0 1px 20px -10px rgba(11,31,58,.2)}
.nav--hidden{transform:translateY(-102%)}
.nav__in{display:flex;align-items:center;gap:clamp(14px,2vw,30px);height:74px;transition:height .3s var(--ease)}
.nav--solid .nav__in{height:66px}
.nav__links{display:flex;align-items:center;gap:clamp(13px,1.5vw,24px);margin-left:auto;flex-wrap:nowrap}
.nav__link{font-size:.875rem;font-weight:600;color:var(--navy-2);position:relative;padding:6px 0;white-space:nowrap;transition:color .22s var(--ease)}
.nav__link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--electric);transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease)}
.nav__link:hover{color:var(--navy)}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="true"]{color:var(--navy)}
.nav__right{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.nav__links+.nav__right{margin-left:0}

/* selector de idioma */
.lang{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;background:var(--white)}
.lang a{font-size:.75rem;font-weight:600;letter-spacing:.09em;padding:5px 11px;border-radius:var(--r-pill);color:var(--slate);transition:color .2s var(--ease),background-color .2s var(--ease)}
.lang a[aria-current="page"]{background:var(--navy);color:#fff}
.lang a:not([aria-current]):hover{color:var(--navy);background:var(--ice-soft)}

/* botón hamburguesa */
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.burger:hover{border-color:var(--navy-2)}
.burger span{display:block;width:17px;height:1.6px;background:var(--navy);position:relative;transition:background-color .2s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:1.6px;background:var(--navy);transition:transform .34s var(--ease),top .22s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* panel móvil */
.mnav{position:fixed;inset:0;z-index:99;background:var(--white);padding:96px var(--gutter) 40px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .3s}
.mnav[data-open="true"]{opacity:1;visibility:visible;transform:none}
.mnav a.mnav__link{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mnav[data-open="true"] a.mnav__link{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0)*45ms)}
.mnav__foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.mnav__foot .lang{align-self:flex-start}

/* ---------- Secciones ---------- */
.section{padding:var(--sec-y) 0;position:relative}
.section--paper{background:var(--paper)}
.section--ice{background:var(--ice-soft)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}

.sec-head{max-width:840px;margin-bottom:clamp(44px,5vw,72px)}
.sec-head__top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-head__rule{height:1px;flex:1;max-width:72px;background:var(--line-strong);border-radius:1px}
.section--navy .sec-head__rule{background:var(--line-navy)}
h2.sec-title{font-size:clamp(1.85rem,4.1vw,3.05rem);margin-bottom:22px}
.sec-intro{font-size:clamp(1rem,1.5vw,1.125rem);color:var(--slate);max-width:66ch;line-height:1.66}
.section--navy .sec-intro{color:var(--ice)}

/* píldora de estado */
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:var(--r-pill);font-size:.719rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:var(--electric-tint);color:var(--electric-deep);border:1px solid rgba(47,107,255,.16)}
.tag--onNavy{background:rgba(219,230,255,.1);color:var(--ice);border-color:rgba(219,230,255,.2)}
.tag__dot{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;flex:none}
.tag__dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.9);opacity:0}}

/* ---------- Portada ---------- */
.hero{position:relative;padding:clamp(120px,15vw,172px) 0 clamp(64px,7vw,96px);background:linear-gradient(176deg,#FFFFFF 0%,#F6F9FE 46%,#E9F0FF 100%)}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,30px,0)}}
.hero__visual{--stage-w:420px}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(40px,5vw,76px);align-items:center}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero__eyebrow .dash{width:26px;height:1.5px;background:var(--electric);border-radius:1px;transform-origin:left;animation:dashIn .8s var(--ease-out) .1s both}
@keyframes dashIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
h1.hero__title{font-size:clamp(2.3rem,5.6vw,4.05rem);letter-spacing:-.033em;line-height:1.03;margin-bottom:26px}
.hero__title .hl{position:relative;display:inline;color:var(--electric)}
.hero__sub{font-size:clamp(1.03rem,1.55vw,1.19rem);color:var(--slate);max-width:56ch;line-height:1.63;margin-bottom:38px}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px}
.hero__trust{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:.844rem;color:var(--slate)}
.hero__trust .tag__dot{background:#12B76A;color:#12B76A}

/* ---------- Mockup de WhatsApp ---------- */
.chat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;position:relative;max-width:420px;margin-inline:auto;width:100%;
}
.chat__bar{display:flex;align-items:center;gap:11px;padding:14px 17px;background:var(--navy);color:#fff}
.chat__avatar{width:34px;height:34px;border-radius:50%;background:rgba(219,230,255,.14);display:grid;place-items:center;flex:none}
.chat__who{font-weight:600;font-size:.875rem;line-height:1.25}
.chat__status{font-size:.688rem;color:var(--on-navy-dim);display:flex;align-items:center;gap:6px;line-height:1.3}
.chat__status i{width:5px;height:5px;border-radius:50%;background:#34D399;display:block;animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.chat__body{padding:20px 17px;background:var(--paper);display:flex;flex-direction:column;gap:11px;min-height:330px}
.msg{max-width:84%;padding:11px 14px;font-size:.875rem;line-height:1.5;position:relative;border-radius:var(--r);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.js [data-chat] .msg{opacity:0;transform:translateY(9px) scale(.985)}
.js [data-chat] .msg[data-shown="1"]{opacity:1;transform:none}
.msg--in{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-bottom-left-radius:var(--r-xs);color:var(--navy)}
.msg--out{align-self:flex-end;background:var(--electric-solid);color:#fff;border-bottom-right-radius:var(--r-xs);box-shadow:0 6px 16px -10px rgba(47,107,255,.7)}
.msg__time{display:block;font-size:.625rem;margin-top:5px;opacity:.55;text-align:right}
.typing{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);border-bottom-left-radius:var(--r-xs);padding:13px 15px;display:none;gap:4px;align-items:center}
.typing[data-on="1"]{display:flex}
.typing i{width:5.5px;height:5.5px;border-radius:50%;background:var(--mist);animation:bob 1.25s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4.5px);opacity:1}}

/* ---------- Franja de credenciales ---------- */
.creds{border-block:1px solid var(--line);background:var(--white);position:relative;z-index:1}
.creds__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.creds__item{padding:clamp(26px,3.2vw,40px) clamp(16px,2.4vw,32px);position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:118px}
.creds__item+.creds__item::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.creds__v{font-weight:800;font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.03em;color:var(--electric);line-height:1;font-variant-numeric:tabular-nums}
.creds__t{font-size:.906rem;color:var(--slate);line-height:1.45}

/* ---------- Bloque agente: texto + visual ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5.5vw,84px);align-items:center}
.split--rev .split__visual{order:-1}

/* lista de capacidades con nodo cuadrado */
.caps{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.caps li{display:flex;gap:15px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:1rem;line-height:1.55;transition:padding-left .3s var(--ease),border-color .3s var(--ease)}
.caps li:last-child{border-bottom:0}
.caps li:hover{padding-left:6px;border-color:var(--line-strong)}
.caps__node{width:9px;height:9px;background:var(--electric);flex:none;margin-top:8px;border-radius:2px;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.caps li:hover .caps__node{transform:scale(1.35) rotate(45deg)}
.caps li:last-child .caps__node{background:var(--mist)}
.section--navy .caps li{border-color:var(--line-navy)}

.footnote{margin-top:30px;padding:16px 20px;background:var(--ice-soft);border-left:2.5px solid var(--electric);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.906rem;color:var(--navy-2);line-height:1.55}
.section--navy .footnote{background:var(--surface-navy);border-left-color:var(--ice);color:var(--ice)}

/* ---------- Mockup de llamada ---------- */
.call{background:var(--navy-deep);border:1px solid var(--line-navy);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--sh-navy);max-width:460px;margin-inline:auto;width:100%;position:relative;overflow:hidden}
.call::before{content:'';position:absolute;top:-45%;left:-22%;width:420px;height:420px;background:radial-gradient(circle,rgba(47,107,255,.24),transparent 66%);pointer-events:none}
.call__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;position:relative}
.call__label{display:flex;align-items:center;gap:8px;font-size:.688rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ice)}
.call__label i{width:6px;height:6px;border-radius:50%;background:#34D399;animation:blink 2s ease-in-out infinite}
.call__timer{font-weight:800;font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.call__who{display:flex;align-items:center;gap:13px;margin-bottom:24px;position:relative}
.call__ring{width:46px;height:46px;border-radius:50%;background:rgba(47,107,255,.16);border:1px solid rgba(47,107,255,.34);display:grid;place-items:center;flex:none;position:relative}
.call__ring::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--electric);animation:ping 2.8s var(--ease-out) infinite}
.call__name{font-weight:600;font-size:.969rem;color:#fff;line-height:1.3}
.call__meta{font-size:.75rem;color:var(--on-navy-dim)}

.wave{display:flex;align-items:center;justify-content:center;gap:3.5px;height:66px;margin-bottom:24px;position:relative}
.wave i{width:3.5px;border-radius:var(--r-pill);background:linear-gradient(to bottom,var(--electric),#7AA3FF);height:12%;animation:wv 1.15s ease-in-out infinite}
.wave i:nth-child(6n+1){animation-duration:.95s}
.wave i:nth-child(6n+2){animation-duration:1.35s}
.wave i:nth-child(6n+3){animation-duration:1.05s}
.wave i:nth-child(6n+4){animation-duration:1.5s}
.wave i:nth-child(6n+5){animation-duration:.85s}
@keyframes wv{0%,100%{height:12%;opacity:.45}50%{height:92%;opacity:1}}

.call__tr{background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--r);padding:17px 19px;position:relative}
.call__trLabel{font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-dim);margin-bottom:10px}
.call__trText{font-size:.938rem;line-height:1.6;color:#fff;min-height:3.2em}
.call__trText::after{content:'';display:inline-block;width:2px;height:1em;background:var(--electric);margin-left:2px;vertical-align:-.13em;animation:caret 1.05s step-end infinite}
.call__trText[data-done="1"]::after{display:none}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- Tarjetas ---------- */
.cards{display:grid;gap:clamp(16px,2vw,24px)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.7vw,34px);position:relative;overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--electric);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:rgba(47,107,255,.24)}
.card:hover::before{transform:scaleX(1)}
.card__t{font-size:1.09rem;font-weight:800;letter-spacing:-.015em;margin-bottom:11px;line-height:1.28}
.card__x{font-size:.938rem;color:var(--slate);line-height:1.6}
.card--onNavy{background:var(--surface-navy);border-color:var(--line-navy)}
.card--onNavy .card__x{color:var(--ice)}
.card--onNavy:hover{background:rgba(255,255,255,.07);border-color:rgba(219,230,255,.26);box-shadow:none}
.card--onNavy::before{background:var(--ice)}

.card__ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--ice-soft);display:grid;place-items:center;margin-bottom:20px;transition:background-color .35s var(--ease),transform .35s var(--ease)}
.card:hover .card__ico{background:var(--electric);transform:scale(1.05)}
.card__ico svg{width:19px;height:19px;stroke:var(--electric);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
.card:hover .card__ico svg{stroke:#fff}

/* ---------- Diagrama de integración ---------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);position:relative}
.flow__col{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);position:relative;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.flow__col:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(47,107,255,.28)}
.flow__col[data-key="2"]{border-color:rgba(47,107,255,.3);box-shadow:0 0 0 3px rgba(47,107,255,.05)}
.flow__head{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.flow__n{width:24px;height:24px;border-radius:var(--r-xs);background:var(--ice-soft);color:var(--electric);display:grid;place-items:center;font-weight:800;font-size:.719rem;flex:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.flow__col:hover .flow__n{background:var(--electric);color:#fff}
.flow__col[data-key="2"] .flow__n{background:var(--electric);color:#fff}
.flow__t{font-weight:800;font-size:.969rem;letter-spacing:-.012em}
.flow__list li{font-size:.875rem;color:var(--slate);line-height:1.5;padding:8px 0 8px 15px;position:relative}
.flow__list li::before{content:'';position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:1px;background:var(--mist);transition:background-color .3s var(--ease)}
.flow__col:hover .flow__list li::before{background:var(--electric)}
/* conectores */
.flow__link{position:absolute;top:50%;right:calc(-1*clamp(12px,1.6vw,22px));width:clamp(12px,1.6vw,22px);height:1.5px;background:var(--line-strong);z-index:2;overflow:visible}
.flow__link::after{content:'';position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:var(--electric);transform:translate(0,-50%);opacity:0}
.flow.is-live .flow__link::after{animation:travel 2.6s var(--ease-out) infinite}
.flow.is-live .flow__col:nth-child(2) .flow__link::after{animation-delay:.32s}
.flow.is-live .flow__col:nth-child(3) .flow__link::after{animation-delay:.64s}
@keyframes travel{0%{opacity:0;transform:translate(0,-50%) scale(.5)}18%{opacity:1;transform:translate(0,-50%) scale(1)}72%{opacity:1;transform:translate(calc(clamp(12px,1.6vw,22px) - 5px),-50%) scale(1)}90%,100%{opacity:0;transform:translate(calc(clamp(12px,1.6vw,22px) - 5px),-50%) scale(.5)}}
.flow__close{margin-top:clamp(28px,3.4vw,44px);padding:22px 26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);font-size:.969rem;color:var(--navy-2);line-height:1.62;display:flex;gap:16px;align-items:flex-start}
.flow__close .pipeline{margin-top:3px}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);position:relative}
.steps::before{content:'';position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line);z-index:0}
.step{position:relative;z-index:1;padding-right:12px}
.step__n{width:38px;height:38px;border-radius:50%;background:var(--white);border:1.5px solid var(--line-strong);display:grid;place-items:center;font-weight:800;font-size:.875rem;color:var(--navy-2);margin-bottom:20px;transition:border-color .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.step:hover .step__n{border-color:var(--electric);background:var(--electric);color:#fff;transform:scale(1.08)}
.step__t{font-weight:800;font-size:1.06rem;margin-bottom:9px;letter-spacing:-.015em}
.step__x{font-size:.938rem;color:var(--slate);line-height:1.58}

.about{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5.5vw,84px);align-items:start}
.about__body p{color:var(--slate);font-size:1.03rem;line-height:1.7;margin-bottom:19px}
.about__body p:last-child{margin-bottom:0}
.about__body strong{color:var(--navy);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:var(--sh)}
.stat{padding:clamp(24px,2.8vw,34px);position:relative;transition:background-color .35s var(--ease)}
.stat:hover{background:var(--ice-soft)}
.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
.stat:nth-child(odd){border-right:1px solid var(--line)}
.stat__v{font-weight:800;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.04em;color:var(--electric);line-height:1;margin-bottom:11px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.stat__t{font-size:.906rem;color:var(--slate);line-height:1.48}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{width:100%;background:transparent;border:0;text-align:left;cursor:pointer;padding:24px 48px 24px 0;position:relative;font-weight:800;font-size:clamp(1rem,1.6vw,1.16rem);letter-spacing:-.015em;line-height:1.38;color:var(--navy);transition:color .24s var(--ease)}
.faq__q:hover{color:var(--electric)}
.faq__q::after,.faq__q::before{content:'';position:absolute;right:8px;top:50%;background:currentColor;border-radius:1px;transition:transform .34s var(--ease),opacity .24s var(--ease)}
.faq__q::before{width:13px;height:1.6px;transform:translateY(-50%)}
.faq__q::after{width:1.6px;height:13px;right:13.7px;transform:translateY(-50%)}
.faq__item[data-open="true"] .faq__q::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__item[data-open="true"] .faq__q{color:var(--electric)}
.faq__a{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq__a p{padding:0 56px 26px 0;color:var(--slate);font-size:1rem;line-height:1.66;max-width:70ch}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5.5vw,80px);align-items:start}
.contact__aside{display:flex;flex-direction:column;gap:14px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line-navy)}
.contact__aside li{display:flex;gap:13px;align-items:flex-start;font-size:.969rem;color:var(--ice);line-height:1.55}
.contact__aside .ck{width:17px;height:17px;flex:none;margin-top:4px;border-radius:50%;background:rgba(47,107,255,.25);display:grid;place-items:center}
.contact__aside .ck svg{width:9px;height:9px;stroke:var(--ice);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.contact__direct{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}

.form{background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--r);padding:clamp(24px,3.2vw,38px);position:relative}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.719rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-dim);display:flex;gap:7px;align-items:baseline}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:.75rem;opacity:.6}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--line-navy);border-radius:var(--r-sm);
  padding:13px 15px;color:#fff;font-size:.969rem;width:100%;
  transition:border-color .24s var(--ease),background-color .24s var(--ease),box-shadow .24s var(--ease);
}
.field textarea{resize:vertical;min-height:112px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:rgba(159,179,209,.55)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--electric);background:rgba(47,107,255,.09);box-shadow:0 0 0 3px rgba(47,107,255,.16)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239FB3D1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer}
.field select option{background:var(--navy);color:#fff}
.field[data-err="1"] input,.field[data-err="1"] select,.field[data-err="1"] textarea{border-color:#FF8A8A;background:rgba(255,138,138,.07)}
.field__err{font-size:.75rem;color:#FFB4B4;display:none}
.field[data-err="1"] .field__err{display:block}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  opacity:0;pointer-events:none}
.form__foot{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.form__note{font-size:.781rem;color:var(--on-navy-dim);line-height:1.5}
.form__note a{color:var(--ice);text-decoration:underline;text-underline-offset:2px}
.form__msg{display:none;border-radius:var(--r-sm);padding:15px 18px;font-size:.906rem;line-height:1.5;gap:12px;align-items:flex-start}
.form__msg[data-on="1"]{display:flex;animation:pop .4s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.form__msg--ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.32);color:#A7F3D0}
.form__msg--err{background:rgba(255,138,138,.1);border:1px solid rgba(255,138,138,.3);color:#FFC9C9}
.form__msg b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.btn[data-busy="1"]{pointer-events:none;opacity:.72}
.btn .spin{width:14px;height:14px;border:1.8px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite;display:none}
.btn[data-busy="1"] .spin{display:block}
.btn[data-busy="1"] .arw{display:none}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Pie ---------- */
.foot{background:var(--navy-deep);color:#fff;padding:clamp(52px,6vw,80px) 0 0}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.5vw,48px);padding-bottom:clamp(40px,4.6vw,60px)}
.foot__tag{color:var(--on-navy-dim);font-size:.938rem;line-height:1.62;max-width:42ch;margin-top:20px}
.foot__ct{font-weight:600;font-size:.719rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);margin-bottom:18px}
.foot__list li{margin-bottom:11px}
.foot__list a{font-size:.938rem;color:var(--on-navy-dim);transition:color .22s var(--ease),padding-left .26s var(--ease);display:inline-block}
.foot__list a:hover{color:#fff;padding-left:4px}
.foot__bar{border-top:1px solid var(--line-navy);padding:24px 0;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;font-size:.844rem;color:var(--on-navy-dim)}
.foot__bar a:hover{color:#fff}

/* ---------- Volver arriba ---------- */
.top{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background-color .22s var(--ease);box-shadow:0 12px 30px -12px rgba(11,31,58,.6)}
.top[data-on="1"]{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--electric);transform:translateY(-3px)}
.top svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Páginas legales ---------- */
.legal{padding:clamp(120px,14vw,168px) 0 clamp(70px,8vw,110px)}
.legal__wrap{max-width:760px}
.legal h1{font-size:clamp(1.95rem,4.4vw,3rem);margin-bottom:16px}
.legal__meta{font-size:.844rem;color:var(--slate);margin-bottom:46px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.15rem,2.1vw,1.42rem);margin:44px 0 15px}
.legal p,.legal li{color:var(--slate);font-size:1rem;line-height:1.72;margin-bottom:14px}
.legal ul{list-style:none;margin-bottom:18px}
.legal ul li{position:relative;padding-left:19px}
.legal ul li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:2px;background:var(--electric)}
.legal a{color:var(--electric);text-decoration:underline;text-underline-offset:2px}
.legal__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:34px;font-weight:600;font-size:.906rem;color:var(--slate);transition:color .22s var(--ease),gap .26s var(--ease)}
.legal__back:hover{color:var(--electric);gap:12px}

/* ---------- Animaciones de entrada ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .68s var(--ease-out),transform .68s var(--ease-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
.js [data-reveal="left"]{transform:translateX(-22px)}
.js [data-reveal="right"]{transform:translateX(22px)}
.js [data-reveal="scale"]{transform:translateY(14px) scale(.975)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(40px,7vw,60px)}
  .hero__visual{max-width:440px;margin-inline:auto;width:100%}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__link{display:none}
  .about{grid-template-columns:1fr;gap:44px}
  .contact{grid-template-columns:1fr;gap:44px}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1200px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__right .btn{display:none}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(36px,6vw,52px)}
  .split--rev .split__visual{order:0}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .steps::before{display:none}
  .creds__grid{grid-template-columns:repeat(2,1fr)}
  .creds__item:nth-child(3)::before{display:none}
  .creds__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  html{scroll-padding-top:84px}
  body{font-size:16px}
  .flow{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .form__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat:nth-child(odd){border-right:0}
  .stat:not(:last-child){border-bottom:1px solid var(--line)}
  .creds__grid{grid-template-columns:1fr}
  .creds__item::before{display:none!important}
  .creds__item+.creds__item{border-top:1px solid var(--line)}
  .creds__item{min-height:0;padding:20px 0;flex-direction:row;align-items:baseline;gap:12px}
  .foot__grid{grid-template-columns:1fr;gap:34px}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:12px}
  .hero__cta .btn{flex:1 1 100%}
  .flow__close{flex-direction:column;gap:14px}
  .contact__direct .btn{flex:1 1 100%}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::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}
  .msg{opacity:1!important;transform:none!important}
}

/* ---------- Impresión ---------- */
@media print{
  .nav,.top,.mnav,.form,.hero::before,.hero::after{display:none!important}
  body{color:#000;font-size:11pt}
  .section{padding:18pt 0;break-inside:avoid}
  .section--navy{background:#fff;color:#000}
  .section--navy h2,.section--navy h3,.section--navy .sec-intro{color:#000}
}

/* ---------- Panel de conversaciones ---------- */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;max-width:520px;margin-inline:auto;width:100%}
.panel__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--navy);color:#fff}
.panel__t{font-weight:600;font-size:.875rem}
.panel__live{display:flex;align-items:center;gap:7px;font-size:.688rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--on-navy-dim)}
.panel__live i{width:5px;height:5px;border-radius:50%;background:#34D399;animation:blink 2.6s ease-in-out infinite}
.panel__body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.panel__list{border-right:1px solid var(--line);background:var(--paper)}
.panel__th{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line-soft);position:relative;transition:background-color .26s var(--ease)}
.panel__th:hover{background:var(--white)}
.panel__th.is-on{background:var(--white)}
.panel__th.is-on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--electric)}
.panel__av{width:30px;height:30px;border-radius:50%;background:var(--ice);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:.75rem;flex:none}
.panel__th.is-on .panel__av{background:var(--electric);color:#fff}
.panel__meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.panel__n{font-weight:600;font-size:.813rem;line-height:1.3}
.panel__p{font-size:.719rem;color:var(--slate);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.panel__ago{font-size:.625rem;color:var(--slate);flex:none;white-space:nowrap}
.panel__thread{padding:16px 15px;display:flex;flex-direction:column;gap:9px;background:var(--white);min-height:250px}
.panel__thread .msg{opacity:1;transform:none;max-width:92%;font-size:.813rem;padding:9px 12px}
.panel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper)}
.panel__state{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--slate)}
.panel__state i{width:6px;height:6px;border-radius:50%;background:var(--electric);position:relative}
.panel__state i::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--electric);animation:ping 2.6s var(--ease-out) infinite}
.panel__take{font-size:.75rem;font-weight:600;color:var(--navy);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 14px;background:var(--white);transition:border-color .26s var(--ease),color .26s var(--ease),background-color .26s var(--ease)}
.panel:hover .panel__take{border-color:var(--electric);color:var(--electric);background:var(--electric-tint)}
@media (max-width:520px){
  .panel__body{grid-template-columns:1fr}
  .panel__list{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto}
  .panel__th{border-bottom:0;border-right:1px solid var(--line-soft);min-width:190px}
  .panel__ago{display:none}
}

/* =========================================================================
   PROFUNDIDAD — capas de fondo, resplandores y etiquetas flotantes.
   Rompe el "todo blanco y plano" sin romper la identidad modernista.
   ========================================================================= */

/* ---------- Texturas de fondo ---------- */
/* Rejilla de puntos finísima, desvanecida hacia los bordes */
.tex{position:relative;isolation:isolate}
.tex::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(11,31,58,.085) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 20%,transparent 78%);
}
/* Malla de color suave — la profundidad sin caer en degradado marcado */
.mesh{position:relative;isolation:isolate}
.mesh::after{
  content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(820px 560px at 84% 2%, rgba(47,107,255,.19), transparent 58%),
    radial-gradient(700px 520px at 2% 86%, rgba(122,163,255,.26), transparent 60%),
    radial-gradient(560px 400px at 46% 54%, rgba(47,107,255,.08), transparent 64%);
  animation:drift 26s ease-in-out infinite alternate;
}
.mesh--soft::after{
  background:
    radial-gradient(700px 480px at 92% 14%, rgba(47,107,255,.10), transparent 62%),
    radial-gradient(600px 460px at 2% 82%, rgba(219,230,255,.6), transparent 64%);
}

/* ---------- Resplandor detrás de los mockups ---------- */
.halo{position:relative}
.halo::before{
  content:'';position:absolute;inset:-9% -11%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%, rgba(47,107,255,.26), rgba(47,107,255,.08) 44%, transparent 68%);
  filter:blur(38px);
  animation:halo 9s ease-in-out infinite alternate;
}
.halo--navy::before{
  background:radial-gradient(ellipse at 50% 46%, rgba(47,107,255,.5), rgba(122,163,255,.16) 46%, transparent 70%);
  filter:blur(46px);
}
@keyframes halo{from{opacity:.72;transform:scale(.97)}to{opacity:1;transform:scale(1.04)}}

/* ---------- Etiquetas flotantes sobre los mockups ---------- */
.stage{position:relative;max-width:var(--stage-w,440px);margin-inline:auto;width:100%;padding-block:24px}
.floats{position:absolute;inset:0;pointer-events:none;z-index:3}
.float{
  position:absolute;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.7) blur(12px);backdrop-filter:saturate(1.7) blur(12px);
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(11,31,58,.05), 0 18px 38px -20px rgba(11,31,58,.28);
  font-size:.781rem;font-weight:600;letter-spacing:-.004em;color:var(--navy);
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:var(--fd,0ms);
}
.is-in .float,.stage.is-lit .float{opacity:1;transform:none}
.float i{
  width:7px;height:7px;border-radius:50%;background:var(--electric);flex:none;position:relative;
}
.float i::after{
  content:'';position:absolute;inset:-3.5px;border-radius:50%;
  border:1.5px solid var(--electric);opacity:0;animation:ping 2.8s var(--ease-out) infinite;
}
.float{max-width:min(250px,70%)}
/* esquina superior izquierda, por encima del marco */
.float--a{top:-22px;left:-26px;--fd:340ms}
/* esquina inferior derecha, por debajo del marco */
.float--b{bottom:-20px;right:-26px;--fd:520ms}
/* la tercera se retira: tres etiquetas sobre un mockup es ruido */
.float--c{display:none}
/* flotan muy despacio, apenas perceptible */
.is-in .float--a,.stage.is-lit .float--a{animation:bobA 7.5s ease-in-out 1.2s infinite alternate}
.is-in .float--b,.stage.is-lit .float--b{animation:bobB 8.5s ease-in-out 1.4s infinite alternate}
@keyframes bobA{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes bobB{from{transform:translateY(0)}to{transform:translateY(8px)}}

/* Variante sobre fondo marino */
.float--onNavy{
  background:rgba(15,34,63,.82);border-color:rgba(219,230,255,.22);color:#fff;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.8);
}
.float--onNavy i{background:#7AA3FF}
.float--onNavy i::after{border-color:#7AA3FF}

/* ---------- Franja de credenciales en marino ---------- */
.creds{border-block:0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.creds::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 300px at 12% 130%, rgba(47,107,255,.34), transparent 62%),
    radial-gradient(520px 280px at 88% -30%, rgba(47,107,255,.2), transparent 64%);
}
.creds .wrap{position:relative;z-index:1}
.creds__item+.creds__item::before{background:var(--line-navy)}
.creds__v{color:#fff}
.creds__t{color:var(--ice)}
.creds__item{gap:9px}
/* una línea eléctrica finísima arriba, para amarrar con el hero */
.creds__edge{position:absolute;inset:0 0 auto;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--electric) 22%,#7AA3FF 50%,var(--electric) 78%,transparent);
  opacity:.85}

/* ---------- Fotos opcionales ---------- */
.shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-lg);background:var(--ice-soft)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.shot__badge{position:absolute;top:16px;left:16px;z-index:2;
  padding:7px 15px;border-radius:var(--r-pill);background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.75rem;font-weight:600;color:var(--navy);box-shadow:0 8px 20px -12px rgba(11,31,58,.5)}
/* velo eléctrico muy tenue, para que la foto se integre con la paleta */
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(47,107,255,.14),transparent 46%,rgba(11,31,58,.16));
  mix-blend-mode:multiply;opacity:.5}

/* ---------- Ajustes de sección ---------- */
/* La 01 deja de ser blanco plano */
#agente-texto{background:var(--white)}
#agente-texto .wrap{position:relative;z-index:1}
/* La 06 gana la foto al lado */
.about--foto{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.about__visual{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}

@media (max-width:1080px){
  .float--a{left:0}.float--b{right:0}.float--c{left:2%}
  .about--foto{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* en móvil las etiquetas estorban más de lo que aportan */
  .floats{display:none}
  .tex::before{background-size:22px 22px}
}
@media (prefers-reduced-motion:reduce){
  .halo::before{animation:none}
  .float{opacity:1!important;transform:none!important;animation:none!important}
}

/* el panel de conversaciones es más ancho que el chat */
#agente-texto .stage{--stage-w:520px}
#agente-voz .stage{--stage-w:460px}
/* en pantallas medianas las etiquetas se recogen para no salirse del contenedor */
@media (max-width:1240px){
  .float--a{left:-8px}.float--b{right:-10px}
}
@media (max-width:1080px){
  .float--a{left:-14px}.float--b{right:-16px}
}

/* Las secciones claras ya no son blanco liso */
#servicios{background:#FFFFFF}
#nosotros{background:linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 62%)}
#agente-texto{background:linear-gradient(180deg,#F7F9FD 0%,#EDF3FD 100%)}

/* Foto ancha entre los pasos y la franja marino */
.band-foto{margin-top:clamp(40px,4.8vw,66px)}
.band-foto .shot img{aspect-ratio:21/9}
@media (max-width:640px){ .band-foto .shot img{aspect-ratio:4/3} }

/* =========================================================================
   Portada — mockup de software a la medida (panel web + app móvil)
   ========================================================================= */
.build{position:relative;width:100%;max-width:100%;padding-bottom:62px}

/* ---- ventana del navegador ---- */
.build__win{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-lg)}
.build__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.build__dots{display:flex;gap:5px;flex:none}
.build__dots i{width:8px;height:8px;border-radius:50%;background:var(--mist)}
.build__dots i:first-child{background:#FF9A8B}
.build__dots i:nth-child(2){background:#FFD07A}
.build__dots i:nth-child(3){background:#8BE0A8}
.build__url{flex:1;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 13px;font-size:.688rem;color:var(--slate);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.build__body{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:264px}
.build__nav{background:var(--navy);padding:16px 12px;display:flex;flex-direction:column;gap:16px}
.build__nav ul{display:flex;flex-direction:column;gap:3px}
.build__nav li{font-size:.688rem;color:var(--on-navy-dim);padding:7px 9px;border-radius:var(--r-xs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease),background-color .3s var(--ease)}
.build__nav li.is-on{background:rgba(47,107,255,.26);color:#fff;font-weight:600}
.build__main{padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}

/* fichas de datos */
.build__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.build__stat{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;
  display:flex;flex-direction:column;gap:3px;background:var(--white);
  opacity:0;transform:translateY(7px)}
.is-in .build__stat{animation:buildIn .55s var(--ease-out) forwards;animation-delay:calc(360ms + var(--si)*90ms)}
.build__k{font-size:.563rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--slate);
  line-height:1.3;min-height:2.6em;display:flex;align-items:flex-start}
.build__v{font-size:1.05rem;font-weight:800;letter-spacing:-.025em;color:var(--navy);font-variant-numeric:tabular-nums}
@keyframes buildIn{to{opacity:1;transform:none}}

/* gráfica */
.build__chart{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px 12px;
  display:flex;flex-direction:column;gap:10px;background:var(--white)}
.build__bars{display:flex;align-items:flex-end;gap:5px;height:62px}
.build__bars i{flex:1;border-radius:2px 2px 0 0;height:0;
  background:linear-gradient(180deg,#7AA3FF,var(--electric-solid))}
.is-in .build__bars i{animation:barUp .7s var(--ease-out) forwards;animation-delay:calc(640ms + var(--bi)*70ms)}
.build__bars i:last-child{background:linear-gradient(180deg,#A8C2FF,var(--electric))}
@keyframes barUp{to{height:var(--h)}}

/* filas */
.build__rows{display:flex;flex-direction:column;gap:6px}
.build__rows li{display:flex;align-items:center;gap:8px;font-size:.688rem;color:var(--slate);
  padding:7px 10px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-8px)}
.is-in .build__rows li{animation:rowIn .5s var(--ease-out) forwards;animation-delay:calc(1.05s + var(--ri)*120ms)}
.build__dot{width:5px;height:5px;border-radius:50%;background:#12B76A;flex:none}
@keyframes rowIn{to{opacity:1;transform:none}}

/* ---- app móvil, encimada en la esquina ---- */
.build__phone{position:absolute;right:-16px;bottom:16px;width:132px;
  background:var(--navy);border:1px solid rgba(219,230,255,.2);border-radius:18px;
  padding:16px 12px 14px;box-shadow:0 26px 54px -22px rgba(11,31,58,.65);
  display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(16px) scale(.94)}
.is-in .build__phone{animation:phoneIn .72s var(--ease-out) forwards;animation-delay:.9s}
@keyframes phoneIn{to{opacity:1;transform:none}}
.build__notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:var(--r-pill);background:rgba(219,230,255,.3)}
.build__appT{font-size:.625rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ice);margin-top:4px}
.build__appBars{display:flex;flex-direction:column;gap:5px}
.build__appBars i{height:6px;border-radius:var(--r-pill);width:0;background:rgba(122,163,255,.55)}
.is-in .build__appBars i{animation:appBar .6s var(--ease-out) forwards;animation-delay:calc(1.3s + var(--pi)*110ms)}
@keyframes appBar{to{width:var(--w)}}
.build__appRows li{font-size:.625rem;color:var(--on-navy-dim);padding:6px 8px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);opacity:0}
.is-in .build__appRows li{animation:buildIn .5s var(--ease-out) forwards;animation-delay:calc(1.3s + var(--pi)*110ms)}


/* ---- tira de productos propios en el hero ---- */
.hero__prod{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.hero__prodList{display:grid;grid-template-columns:1fr;gap:10px;max-width:520px}
.prod{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.prod:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:rgba(47,107,255,.3)}
.prod__txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.prod__n{font-size:.875rem;font-weight:600;letter-spacing:-.008em;color:var(--navy);line-height:1.25}
.prod__t{display:flex;align-items:center;gap:6px;font-size:.688rem;font-weight:600;color:var(--slate)}
.prod__t i{width:5px;height:5px;border-radius:50%;background:var(--electric);flex:none}
.prod .arw{color:var(--electric);margin-left:auto;flex:none;transition:transform .3s var(--ease)}
.prod:hover .arw{transform:translateX(4px)}

@media (max-width:1080px){ .hero__visual{--stage-w:480px} }
@media (max-width:520px){
  .build__body{grid-template-columns:76px minmax(0,1fr)}
  .build__stats{grid-template-columns:1fr 1fr}
  .build__stat:last-child{display:none}
  .build__phone{width:108px;right:-8px;bottom:20px}
  .prod{width:100%}
  .prod__txt{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .build__stat,.build__rows li,.build__phone,.build__appRows li{opacity:1!important;transform:none!important}
  .build__bars i{height:var(--h)!important}
  .build__appBars i{width:var(--w)!important}
}

/* Nosotros sin cifras: título a un lado, texto al otro */
.about--texto{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(34px,5vw,80px);align-items:start}
.about--texto .sec-title{margin-bottom:0}
@media (max-width:900px){ .about--texto{grid-template-columns:1fr;gap:26px} }