/* STAV · versión 2
   Paleta Verde bosque, logotipo e isotipo de siempre.
   Criterios: jerarquía clara y una acción principal (Impeccable), detalles de interfaz (Make Interfaces Feel Better),
   escala de movimiento fija (Transitions.dev) y animación ligada al desplazamiento (GSAP ScrollTrigger). */

:root{
  /* Color */
  --noche:#0F172A;--noche-2:#1E293B;--pizarra:#334155;--bosque:#14532D;--verde:#16A34A;--brote:#86EFAC;--claro:#F3F6F4;--blanco:#fff;
  --tx:#0F172A;--mu:#4B5565;--mu-d:#A3ADBD;--line:#DCE3DF;--line-d:rgba(255,255,255,.1);

  /* Espacios (escala de 4) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

  /* Radios: exterior = interior + relleno */
  --r-sm:10px;--r-md:14px;--r-lg:22px;--r-pill:999px;

  /* Sombras en capas, suaves y transparentes */
  --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --sh-2:0 1px 2px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.06);
  --sh-dev:0 2px 4px rgba(0,0,0,.2),0 24px 64px rgba(0,0,0,.35);

  /* Movimiento */
  --d-1:120ms;--d-2:200ms;--d-3:320ms;--d-4:520ms;
  --e-out:cubic-bezier(.22,1,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--e-spring:cubic-bezier(.34,1.56,.64,1);

  /* Tipografía */
  --f-disp:Sora,Inter,system-ui,sans-serif;--f-body:Inter,system-ui,sans-serif;
  --max:1360px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--blanco);color:var(--tx);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
h1,h2,h3{font-family:var(--f-disp);text-wrap:balance;letter-spacing:-.03em}
p,dd,li{text-wrap:pretty}
.acc{color:var(--brote)}
.acc-d{color:var(--bosque)}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:60;background:var(--brote);color:var(--noche);padding:var(--s2) var(--s4);border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:var(--s4)}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;border:0;border-radius:var(--r-pill);font:600 15px/1 var(--f-body);cursor:pointer;
  background:var(--brote);color:var(--noche);box-shadow:var(--sh-1);
  transition:transform var(--d-1) var(--e-out),background-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)}
.btn:hover{background:#A7F3C0;box-shadow:var(--sh-2)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn-sm{padding:0 var(--s5)}
.btn-lg{padding:0 var(--s6);min-height:52px;font-size:16px}
.btn.full{width:100%}
.contact .btn{background:var(--bosque);color:#fff}
.contact .btn:hover{background:var(--verde)}
.link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:600;color:var(--brote)}
.link span{transition:transform var(--d-2) var(--e-out)}
.link:hover span{transform:translateX(4px)}

/* ---------- Navegación ---------- */
nav{position:sticky;top:0;z-index:40;height:68px;background:rgba(15,23,42,.92);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line-d)}
nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
nav .logo{display:flex;min-height:44px;align-items:center}
nav ul{display:flex;gap:var(--s6);list-style:none;font-size:14.5px;color:#C9D0DE}
nav ul a{display:inline-flex;min-height:44px;align-items:center;transition:color var(--d-2) var(--e-out)}
nav ul a:hover{color:#fff}

/* ---------- Portada ---------- */
.hero{background:var(--noche);color:#F5F7FA;padding:var(--s9) 0 var(--s9);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-20%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(22,163,74,.18),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.hero-h{font-size:clamp(42px,5.2vw,74px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
.hero-h .ln{display:block}
.sub{font-size:clamp(17px,1.7vw,20px);color:var(--mu-d);margin-top:var(--s5);max-width:34em}
.swap-line{display:block;margin-top:var(--s2);color:#E2E8F0}
.swap{display:inline-grid;vertical-align:bottom;color:var(--brote);font-weight:600}
.swap-w{grid-area:1/1;display:inline-block;transition:opacity var(--d-3) var(--e-out),filter var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.swap-w.out{opacity:0;filter:blur(6px);transform:translateY(-6px)}
.swap-w.pre{opacity:0;filter:blur(6px);transform:translateY(6px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s7);font-size:14px;color:#CBD5E1}
.proof li{display:flex;align-items:center;gap:var(--s2)}
.proof svg{width:18px;height:18px;fill:none;stroke:var(--brote);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Entrada de la portada: corre desde el primer pintado, sin esperar ningún script.
   El título no parte invisible (es lo primero que debe verse); solo se desliza. */
@keyframes sube{from{transform:translateY(14px)}}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}}
.hero-h .ln{animation:sube .6s var(--e-out) both}
.hero-h .ln.acc{animation-delay:.06s}
.hero .sub{animation:aparece .5s var(--e-out) .1s both}
.hero .ctas{animation:aparece .5s var(--e-out) .16s both}
.hero .proof{animation:aparece .5s var(--e-out) .22s both}
.hero .device{animation:aparece .7s var(--e-out) .12s both}

/* Pantalla de la plataforma (carrusel) */
.device{background:var(--noche-2);border:1px solid var(--line-d);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh-dev)}
.dev-top{display:flex;align-items:center;gap:7px;padding:var(--s1) var(--s1) var(--s4)}
.dev-top i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.dev-top span{margin-left:var(--s2);font-size:12px;color:#94A3B8;font-weight:500}
.dev-top .demo{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748B;border:1px solid var(--line-d);border-radius:var(--r-pill);padding:2px 8px;margin-left:var(--s2)}
.dots{margin-left:auto;display:flex;gap:2px}
.dots button{position:relative;width:24px;height:24px;border:0;background:none;cursor:pointer}
.dots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:var(--r-pill);transform:translate(-50%,-50%);background:rgba(255,255,255,.22);transition:width var(--d-3) var(--e-out),background-color var(--d-3) var(--e-out)}
.dots button.on::after{width:20px;background:var(--brote)}
.slides{display:grid;min-height:340px}
.slide{grid-area:1/1;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity var(--d-4) var(--e-out),transform var(--d-4) var(--e-out),filter var(--d-4) var(--e-out);pointer-events:none}
.slide.on{opacity:1;transform:none;filter:none;pointer-events:auto}
/* radio interior (12) + relleno del contenedor (~10) ≈ radio exterior (22) */
.inbox,.convo,.dash,.ivr{display:grid;gap:var(--s2)}
.row{display:grid;grid-template-columns:38px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:rgba(255,255,255,.04);font-size:14px}
.row b,.ivr-in b,.opt b{display:block;font-size:14px;font-weight:600}
.row span,.ivr-in span,.opt span{font-size:12.5px;color:#94A3B8}
.ch{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--bosque);color:#fff}
.ch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .a{stroke:var(--brote)}svg .af{fill:var(--brote);stroke:none}
.st{font-style:normal;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:rgba(134,239,172,.14);color:var(--brote);white-space:nowrap}
.st.w{background:rgba(251,191,36,.14);color:#FBBF24}
.msg{max-width:76%;padding:var(--s2) var(--s4);border-radius:var(--r-md);font-size:14px;line-height:1.45;background:rgba(255,255,255,.07);justify-self:start}
.msg.out{justify-self:end;background:var(--bosque);color:#F0FDF4}
.msg.out.bot{background:#1E3A2B}
.msg em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brote);margin-bottom:2px}
.msg small{display:block;font-size:11px;color:#94A3B8;margin-top:2px;text-align:right;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.kpi{background:rgba(255,255,255,.05);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.kpi b{display:block;font:700 24px/1.1 var(--f-disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:#94A3B8}
.chart{background:rgba(255,255,255,.05);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.chart p{font-size:12.5px;font-weight:600;color:#CBD5E1;margin-bottom:var(--s3)}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);height:150px;align-items:end}
.bar{display:grid;grid-template-rows:1fr auto;height:100%;gap:6px;text-align:center}
.bar i{align-self:end;display:block;border-radius:6px 6px 3px 3px;background:rgba(134,239,172,.28);transform-origin:bottom}
.bar.hi i{background:var(--brote)}
.bar span{font-size:11px;color:#94A3B8}
.ivr-in{display:grid;grid-template-columns:38px 1fr;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:rgba(255,255,255,.04)}
.ivr-opts{display:grid;gap:var(--s2);margin-left:var(--s5);padding-left:var(--s4);border-left:2px dashed rgba(134,239,172,.35)}
.opt{display:grid;grid-template-columns:32px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:rgba(255,255,255,.04)}
.opt kbd{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--bosque);color:#fff;font:700 14px var(--f-body)}

/* Cada pantalla de la portada se arma al aparecer */
@keyframes entra{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
@keyframes crece{from{transform:scaleY(0)}}
.slide.on .row,.slide.on .msg,.slide.on .kpi,.slide.on .chart,.slide.on .ivr-in,.slide.on .opt{animation:entra var(--d-4) var(--e-out) backwards}
.slide.on .row:nth-child(2){animation-delay:.1s}.slide.on .row:nth-child(3){animation-delay:.2s}.slide.on .row:nth-child(4){animation-delay:.3s}
.slide.on .msg:nth-child(2){animation-delay:.7s}.slide.on .msg:nth-child(3){animation-delay:1.4s}.slide.on .msg:nth-child(4){animation-delay:2.1s}
.slide.on .kpi:nth-child(2){animation-delay:.1s}.slide.on .kpi:nth-child(3){animation-delay:.2s}.slide.on .chart{animation-delay:.25s}
.slide.on .bar i{animation:crece .8s var(--e-out) backwards}
.slide.on .bar:nth-child(2) i{animation-delay:.36s}.slide.on .bar:nth-child(3) i{animation-delay:.42s}.slide.on .bar:nth-child(4) i{animation-delay:.48s}
.slide.on .bar:nth-child(5) i{animation-delay:.54s}.slide.on .bar:nth-child(6) i{animation-delay:.6s}.slide.on .bar:nth-child(7) i{animation-delay:.66s}
.slide.on .bar:nth-child(1) i{animation-delay:.3s}
.slide.on .opt:nth-child(1){animation-delay:.35s}.slide.on .opt:nth-child(2){animation-delay:.5s}
/* La opción 3 se marca: la llamada pasa a un asesor */
@keyframes marca{to{background:rgba(134,239,172,.12);box-shadow:inset 0 0 0 1px rgba(134,239,172,.4)}}
@keyframes marcaK{to{background:var(--brote);color:var(--noche)}}
.slide.on .opt:nth-child(3){animation:entra var(--d-4) var(--e-out) .65s backwards,marca var(--d-3) var(--e-out) 2.2s forwards}
.slide.on .opt:nth-child(3) kbd{animation:marcaK var(--d-3) var(--e-out) 2.2s forwards}
/* El caso pendiente se responde mientras se mira */
.swapst{display:inline-grid}
.swapst span{grid-area:1/1}
.swapst .e2{opacity:0}
@keyframes sale{to{opacity:0;transform:translateY(-4px)}}
@keyframes llegaE{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes verde{to{background:rgba(134,239,172,.14);color:var(--brote)}}
.slide.on .swapst{animation:verde var(--d-3) var(--e-out) 2.4s forwards}
.slide.on .swapst .e1{animation:sale var(--d-2) var(--e-out) 2.4s forwards}
.slide.on .swapst .e2{animation:llegaE var(--d-3) var(--e-out) 2.5s forwards}

/* ---------- Secciones ---------- */
section{padding:var(--s10) 0}
h2{font-size:clamp(34px,4.4vw,58px);font-weight:700;line-height:1.06}
h2 .acc,h2 .acc-d{display:block}

/* Cómo se conecta */
.conn{background:var(--noche);color:#F5F7FA;padding:0}
.conn-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:center;padding-top:var(--s9);padding-bottom:var(--s9)}
.conn-steps{list-style:none;margin-top:var(--s7);display:grid;gap:var(--s2)}
.cs{padding:var(--s4) var(--s5);border-radius:var(--r-md);border:1px solid transparent;transition:background-color var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out),opacity var(--d-3) var(--e-out);opacity:.45}
.cs.on{opacity:1;background:rgba(255,255,255,.04);border-color:var(--line-d)}
.cs b{display:block;font-family:var(--f-disp);font-size:19px;font-weight:600;letter-spacing:-.01em}
.cs span{display:block;font-size:15px;color:var(--mu-d);margin-top:var(--s1)}
.diagram{width:100%;height:auto;overflow:visible}
.diagram .ln{fill:none;stroke:var(--brote);stroke-width:2;stroke-linecap:round;opacity:.9}
.diagram .nd rect{fill:var(--noche-2);stroke:rgba(255,255,255,.14);stroke-width:1}
.diagram .nd text{fill:#E2E8F0;font:600 15px var(--f-body);text-anchor:middle}
.diagram .nd text.sm{fill:#94A3B8;font-size:12.5px;font-weight:500}
.diagram .hub rect{fill:var(--bosque);stroke:rgba(134,239,172,.5)}
.diagram .hub-t{fill:#fff!important;font:700 16px var(--f-disp)!important;text-anchor:start!important}
.diagram .hub-s{fill:#BBF7D0!important;font-size:12px!important;font-weight:500!important;text-anchor:start!important}
.diagram .panel rect{stroke:rgba(134,239,172,.45)}
.diagram .flow{opacity:0;transition:opacity var(--d-4) var(--e-out)}
.diagram .flow circle{fill:#fff;filter:drop-shadow(0 0 4px rgba(134,239,172,.9))}
.conn-fig.fluye .flow{opacity:1}
.conn-fig.fluye .hub rect{stroke:var(--brote);transition:stroke var(--d-4) var(--e-out)}

/* Servicios */
.svc-h{max-width:14em}
.svc-list{margin-top:var(--s8);border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"v t" "v p" "v g";grid-template-rows:auto auto 1fr;column-gap:var(--s8);row-gap:var(--s4);padding:var(--s7) 0;border-bottom:1px solid var(--line);position:relative;align-items:start}
.svc-row h3{align-self:end}

/* Gráfico de cada servicio: una escena pequeña de cómo funciona */
.svc-vis{grid-area:v;background:var(--noche);border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-2);
  transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out)}
.svc-row:hover .svc-vis{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,23,42,.08),0 12px 32px rgba(15,23,42,.14)}
.svc-vis svg{display:block;width:100%;height:auto}
.svc-vis text{font:500 12px var(--f-body);fill:#CBD5E1}
.svc-vis .ttl{font:600 12.5px var(--f-body);fill:#E2E8F0}
.svc-vis .ttl.w{fill:#fff}
.svc-vis .sm{font-size:10.5px;fill:#94A3B8}
.svc-vis .ln{fill:none;stroke:var(--brote);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.svc-vis .box rect{fill:var(--noche-2);stroke:rgba(255,255,255,.1)}
.svc-vis .hub rect:first-child{fill:var(--bosque);stroke:rgba(134,239,172,.45)}
.svc-vis .chn rect{fill:var(--noche-2);stroke:rgba(255,255,255,.1)}
.svc-vis .chn circle{fill:var(--brote)}
.svc-vis .hl{fill:var(--bosque)}
.svc-vis .hl-t{font-weight:600;fill:#F0FDF4}
.svc-vis .ok{fill:var(--brote);font-weight:700;text-anchor:end}
.svc-vis .ph{fill:rgba(255,255,255,.05)}
.svc-vis .ph2{fill:rgba(255,255,255,.14)}
.svc-vis .key{fill:rgba(255,255,255,.14)}
.svc-vis .kt{font:700 10.5px var(--f-body);fill:#fff}
.svc-vis .agt circle{fill:var(--noche-2);stroke:rgba(255,255,255,.22)}
.svc-vis .agt.on circle{fill:var(--brote);stroke:none}
.svc-vis .agt.on text{fill:var(--brote);font-weight:600}
.svc-vis .wave rect{fill:var(--brote);opacity:.8}
.svc-vis .wave text{font-size:11px;fill:#94A3B8}
.svc-vis .dt{fill:rgba(255,255,255,.18)}
.svc-vis .kp rect{fill:rgba(255,255,255,.05)}
.svc-vis .big{font:700 20px var(--f-disp);fill:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.svc-vis .big.g{fill:var(--brote)}
.svc-vis .bars-s rect{fill:rgba(134,239,172,.3);transform-box:fill-box;transform-origin:bottom}
.svc-vis .bars-s rect.hi{fill:var(--brote)}

/* Movimiento continuo de los gráficos (solo corre con .run, es decir, en pantalla) */
.svc-vis .pk{fill:#fff}
.svc-vis .rot{opacity:0;transform-box:fill-box;animation:rot 9s var(--e-out) infinite}
.svc-vis .r2{animation-delay:3s}.svc-vis .r3{animation-delay:6s}
@keyframes rot{0%,1%{opacity:0;transform:translateY(5px)}5%,29%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-5px)}}
.svc-vis .hl{animation:llega 3s var(--e-out) infinite}
@keyframes llega{0%{fill:var(--verde)}25%,100%{fill:var(--bosque)}}
.svc-vis .key.f1,.svc-vis .key.f2,.svc-vis .key.f3{animation:tecla 6s infinite}
.svc-vis .kt.f1,.svc-vis .kt.f2,.svc-vis .kt.f3{animation:teclaT 6s infinite}
.svc-vis .agt.f1 circle,.svc-vis .agt.f2 circle,.svc-vis .agt.f3 circle{animation:destino 6s infinite}
.svc-vis .agt.f1 text,.svc-vis .agt.f2 text,.svc-vis .agt.f3 text{animation:destinoT 6s infinite}
.svc-vis .f2,.svc-vis .f2 circle,.svc-vis .f2 text{animation-delay:2s!important}
.svc-vis .f3,.svc-vis .f3 circle,.svc-vis .f3 text{animation-delay:4s!important}
@keyframes tecla{0%,4%{fill:rgba(255,255,255,.14)}6%,28%{fill:var(--brote)}32%,100%{fill:rgba(255,255,255,.14)}}
@keyframes teclaT{0%,4%{fill:#fff}6%,28%{fill:var(--noche)}32%,100%{fill:#fff}}
@keyframes destino{0%,26%{fill:var(--noche-2);stroke:rgba(255,255,255,.22)}29%,31%{fill:var(--brote);stroke:var(--brote);transform:scale(1.15)}33%,40%{fill:var(--brote);stroke:var(--brote);transform:none}46%,100%{fill:var(--noche-2);stroke:rgba(255,255,255,.22)}}
@keyframes destinoT{0%,26%{fill:#CBD5E1}29%,40%{fill:var(--brote)}46%,100%{fill:#CBD5E1}}
.svc-vis .agt circle{transform-box:fill-box;transform-origin:center}
.svc-vis .wave rect{transform-box:fill-box;transform-origin:center;animation:onda 1s ease-in-out infinite alternate}
.svc-vis .wave rect:nth-child(2){animation-delay:-.3s}.svc-vis .wave rect:nth-child(3){animation-delay:-.7s}
.svc-vis .wave rect:nth-child(4){animation-delay:-.15s}.svc-vis .wave rect:nth-child(5){animation-delay:-.5s}.svc-vis .wave rect:nth-child(6){animation-delay:-.85s}
@keyframes onda{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.svc-vis .bars-s rect{animation:barra 3.2s ease-in-out infinite alternate}
.svc-vis .bars-s rect:nth-child(2){animation-delay:-.6s}.svc-vis .bars-s rect:nth-child(3){animation-delay:-1.4s}.svc-vis .bars-s rect:nth-child(4){animation-delay:-.3s}
.svc-vis .bars-s rect:nth-child(5){animation-delay:-2s}.svc-vis .bars-s rect:nth-child(6){animation-delay:-1s}.svc-vis .bars-s rect:nth-child(7){animation-delay:-2.6s}
@keyframes barra{from{transform:scaleY(1)}to{transform:scaleY(.72)}}
.svc-vis .spark{fill:none;stroke:var(--brote);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:tendencia 4s var(--e-io) infinite}
@keyframes tendencia{0%{stroke-dashoffset:100}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.svc-vis .cnt{transform-box:fill-box;transform-origin:left center}
.svc-vis .cnt.pop{animation:cuenta var(--d-4) var(--e-spring)}
@keyframes cuenta{from{opacity:.2;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.svc-vis:not(.run) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .svc-vis *{animation:none!important}
  .svc-vis .pk,.svc-vis .rot{display:none}
  .svc-vis .rot.r1{display:inline;opacity:1}
}
.svc-row::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform var(--d-4) var(--e-out)}
.svc-row:hover::before{transform:scaleX(1)}
.svc-row h3{grid-area:t;font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.15}
.svc-row p{grid-area:p;font-size:17px;color:var(--mu);max-width:36em}
.tags{grid-area:g;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tags li{font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--pizarra)}

/* Control en tiempo real */
.live{background:var(--claro)}
.live-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:end}
.live-head h2 .acc{color:var(--bosque)}
.live-head p{font-size:17px;color:var(--mu)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s8)}
.num{background:var(--blanco);border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s4);box-shadow:var(--sh-1);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.num:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.num-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:24px}
.num-top span{font-size:14px;color:var(--mu)}
.num b{display:block;margin-top:var(--s3);font:700 clamp(40px,4.4vw,58px)/1 var(--f-disp);letter-spacing:-.04em;color:var(--noche);font-variant-numeric:tabular-nums}
.num b.cambia{animation:cifra var(--d-4) var(--e-out)}
@keyframes cifra{from{opacity:.15;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* Cambio respecto al dato anterior: verde si mejora, ámbar si empeora */
.delta{font-style:normal;font-size:12px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(4px);
  transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.delta.ver{opacity:1;transform:none}
.delta.bien{background:rgba(22,163,74,.12);color:var(--bosque)}
.delta.mal{background:rgba(217,119,6,.12);color:#B45309}
/* Línea de tendencia de cada dato */
.spk{display:block;width:calc(100% + var(--s5) * 2);height:44px;margin:var(--s4) calc(var(--s5) * -1) calc(var(--s4) * -1)}
.spk-l{fill:none;stroke:var(--verde);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:d var(--d-4) var(--e-out)}
.spk-a{fill:rgba(22,163,74,.1);stroke:none;transition:d var(--d-4) var(--e-out)}
/* Barra "En vivo" */
.live-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s8);font-size:13.5px;color:var(--mu)}
.live-bar b{color:var(--bosque);font-weight:600}
.live-bar em{font-style:normal;margin-left:auto;font-size:12.5px}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--verde)}
/* Un aro sale del punto solo cuando llega un dato nuevo (no late todo el tiempo) */
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--verde);opacity:0}
.live-dot.tic::after{animation:aro .9s var(--e-out)}
@keyframes aro{from{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}
.live-bar+.nums{margin-top:var(--s4)}
.note{margin-top:var(--s4);font-size:12.5px;color:var(--mu)}

/* Método */
.m-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:end}
.m-head p{font-size:17px;color:var(--mu)}
.timeline{position:relative;margin-top:var(--s8)}
.track{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line);border-radius:2px}
.fill{position:absolute;inset:0;display:block;background:var(--verde);border-radius:2px;transform-origin:left}
/* Punto que recorre la línea al bajar */
.runner{position:absolute;left:var(--run,100%);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 5px rgba(22,163,74,.18);opacity:var(--run-o,0);transition:opacity var(--d-2) var(--e-out)}
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.tl-i{display:flex;flex-direction:column}
.tl-card{flex:1}
.tl-i .dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--blanco);border:2px solid var(--line);position:relative;
  transition:background-color var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out),transform var(--d-4) var(--e-spring)}
.tl-card{margin-top:var(--s5);padding:var(--s5);border-radius:var(--r-lg);background:var(--claro);border:1px solid transparent;
  transition:background-color var(--d-4) var(--e-out),transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out),color var(--d-3) var(--e-out)}
.tl-card h3{font-size:20px;font-weight:600;margin-top:var(--s4)}
.tl-card p{font-size:14.5px;color:var(--mu);margin-top:var(--s2);transition:color var(--d-3) var(--e-out)}
.gl{display:block;width:44px;height:44px;fill:none;stroke:#94A3B8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--d-3) var(--e-out)}
.gl *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--e-io)}
.gl :nth-child(2){transition-delay:.12s}.gl :nth-child(3){transition-delay:.24s}.gl :nth-child(4){transition-delay:.36s}
/* Estados: alcanzado (ícono dibujado, punto verde) y actual (tarjeta oscura) */
.timeline.anim .tl-i:not(.reached) .gl *{stroke-dashoffset:1;transition-duration:.3s;transition-delay:0s}
.tl-i.reached .dot{background:var(--verde);border-color:var(--verde);transform:scale(1.15)}
.tl-i.reached .gl{stroke:var(--bosque)}
.tl-i.now .tl-card{background:var(--noche);color:#F5F7FA;transform:translateY(-6px);box-shadow:var(--sh-2)}
.tl-i.now .tl-card p{color:var(--mu-d)}
.tl-i.now .gl{stroke:var(--brote)}
.tl-card:hover{transform:translateY(-3px)}

/* Por qué STAV */
.why{background:var(--claro)}
.why-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:start}
.statement{font:700 clamp(28px,3.4vw,44px)/1.15 var(--f-disp);letter-spacing:-.03em;text-wrap:balance}
.why-list{display:grid;gap:0;border-top:1px solid var(--line)}
.why-list div{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.why-list dt{font-weight:600;font-size:17px}
.why-list dd{font-size:15.5px;color:var(--mu);margin-top:var(--s1)}

/* Contacto */
.c-head p{font-size:17px;color:var(--mu);margin-top:var(--s4)}
/* Un solo panel de lado a lado: dos columnas iguales y de la misma altura */
.contact{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:stretch;
  background:var(--claro);border-radius:calc(var(--r-lg) + var(--s3));padding:var(--s3)}
.left{display:flex;flex-direction:column;gap:var(--s6);padding:var(--s6) var(--s5) var(--s5) var(--s6)}
.pains{border:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.pains legend{grid-column:1/-1}
.pains label span{width:100%}
.next-t{font:600 17px var(--f-disp);letter-spacing:-.01em;margin-bottom:var(--s3)}
.next ul{list-style:none;display:grid;gap:var(--s3)}
.next li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);font-size:15px;color:var(--mu)}
.next b{color:var(--tx);font-weight:600}
.next svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--bosque);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.left .wa-card{margin-top:auto}
.pains legend,.form-title{font:600 17px var(--f-disp);margin-bottom:var(--s4);padding:0;letter-spacing:-.01em}
.pains label{cursor:pointer}
.pains input{position:absolute;opacity:0;width:1px;height:1px}
.pains label span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--blanco);font-size:15px;font-weight:500;user-select:none;
  transition:background-color var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.pains label:hover span{border-color:var(--verde)}
.pains label:active span{transform:scale(.96)}
.pains label input:checked+span{background:var(--noche);border-color:var(--noche);color:var(--brote)}
.pains label input:focus-visible+span{outline:2px solid var(--verde);outline-offset:2px}
.wa-card{display:grid;grid-template-columns:40px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--blanco);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:box-shadow var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.wa-card:hover{border-color:var(--verde);box-shadow:var(--sh-2)}
.wa-card:active{transform:scale(.98)}
.wa-card svg{width:40px;height:40px;padding:9px;border-radius:var(--r-md);background:var(--noche);color:#fff;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.wa-card b{display:block;font-size:15px}
.wa-card span{font-size:13.5px;color:var(--bosque);font-weight:500}
.wa-card i{font-style:normal;font-size:18px;color:var(--mu);transition:transform var(--d-2) var(--e-out)}
.wa-card:hover i{transform:translateX(4px)}
.safe{font-size:13px;color:var(--mu)}
form{display:grid;gap:var(--s4);align-content:start;background:var(--blanco);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.fld{display:grid;gap:6px}
.fld>span{font-size:13.5px;font-weight:600;color:var(--pizarra)}
.fld em{font-style:normal;font-weight:400;color:var(--mu)}
input,textarea{width:100%;min-height:44px;padding:var(--s3) 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--blanco);color:var(--tx);font:inherit;font-size:15px;
  transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.consent{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);align-items:start;font-size:13px;line-height:1.5;color:var(--mu);cursor:pointer}
.consent input{width:18px;height:18px;min-height:0;margin-top:2px;padding:0;accent-color:var(--bosque);cursor:pointer}
.consent a{color:var(--bosque);text-decoration:underline;text-underline-offset:2px}
.consent em{display:inline-block;width:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);margin-left:4px;white-space:nowrap}
.consent em.req{background:rgba(20,83,45,.1);color:var(--bosque)}
.consent em.opt{background:rgba(15,23,42,.06);color:var(--mu)}
.aviso{font-size:12px;line-height:1.5;color:var(--mu)}
.aviso a{text-decoration:underline;text-underline-offset:2px}
.form-msg{color:#B42318;font-size:13.5px;font-weight:500}
.form-msg:empty{display:none}
.form-msg.shake{animation:shake var(--d-4) var(--e-out)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sent{text-align:center;padding:var(--s7) var(--s3);display:grid;justify-items:center;gap:var(--s3)}
.sent svg{width:64px;height:64px}
.sent circle{fill:var(--bosque);transform-origin:center;animation:pop var(--d-4) var(--e-spring) both}
.sent path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw var(--d-4) var(--e-out) .18s forwards}
.sent h3{font-size:26px}
.sent p{color:var(--mu);max-width:360px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* Pie */
footer{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s6);font-size:12.5px;color:var(--mu)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
footer a{text-decoration:underline;text-underline-offset:2px}
.todo-foot{opacity:.7}

/* ---------- Adaptación ---------- */
@media (max-width:980px){
  nav ul{display:none}
  .hero{padding:var(--s8) 0}
  .hero-grid,.conn-grid,.live-head,.m-head,.why-grid,.contact{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .left{padding:var(--s5) var(--s3) 0}
  .conn-grid{min-height:0;padding-top:var(--s9);padding-bottom:var(--s9)}
  .svc-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"v" "t" "p" "g";grid-template-rows:auto;padding:var(--s6) 0}
  .svc-row h3{margin-top:var(--s2)}
  .nums{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .track{left:7px;right:auto;top:32px;bottom:var(--track-b,48px);width:2px;height:auto}
  .fill{transform-origin:top}
  .tl-i{display:grid;grid-template-columns:16px 1fr;column-gap:var(--s4)}
  .tl-i .dot{margin-top:var(--s5)}
  .tl-card{margin-top:0}
  .runner{left:50%;top:var(--run,100%);margin:-7px 0 0 -7px}
  section{padding:var(--s9) 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .row2{grid-template-columns:1fr}
  .row{grid-template-columns:34px 1fr;padding:var(--s3)}
  .row .st{grid-column:2;justify-self:start}
  .ch{width:34px;height:34px}
  .slides{min-height:430px}
  .kpis{grid-template-columns:1fr}
  .bars{height:110px}
  .msg{max-width:88%}
  .opt{grid-template-columns:32px 1fr}.opt .st{grid-column:2;justify-self:start}
  .ivr-opts{margin-left:var(--s2);padding-left:var(--s3)}
  .dev-top .demo{display:none}
  .nums{gap:var(--s3)}
  .num{padding:var(--s5) var(--s4)}
  form{padding:var(--s5) var(--s4)}
  .pains{grid-template-columns:1fr}
  .contact{padding:var(--s2)}
  .diagram .nd text{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}
  .sent path{stroke-dashoffset:0}
}