/* ═══ Growth Engine card · "tu lista entra, salen clientes agendados" ═══
   Una sola fuente para la portada, las landings por industria y consumer-finance.
   El HTML lo pinta /assets/engine-card.js dentro de [data-engine-card].
   Entrada = dato frío (azul). La bolita = agente de IA. Salida = energía (aura ámbar). */
.eg-sec{--eg-navy:#0d1b27;--eg-ivory:#f4f1ea;--eg-muted:#9fabb5;--eg-gold:#e08a2e;--eg-gold-l:#f0ad62;--eg-blue-l:#8fb3cc;--eg-line:rgba(244,241,234,.12);
  --eg-serif:'Fraunces','PTS Serif Fallback',Georgia,serif;--eg-sans:'IBM Plex Sans','PTS Sans Fallback',system-ui,sans-serif;--eg-mono:'IBM Plex Mono','PTS Mono Fallback',ui-monospace,Menlo,monospace;
  position:relative;padding:96px 0;background:var(--eg-navy);color:var(--eg-ivory);font-family:var(--eg-sans);overflow:hidden;line-height:1.5}
.eg-sec *{box-sizing:border-box}
.eg-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eg-k{display:block;font:500 12px var(--eg-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--eg-gold);margin:0 0 14px}
.eg-h{font:600 clamp(28px,4vw,46px)/1.08 var(--eg-serif);margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance;color:var(--eg-ivory)}
.eg-h em{font-style:italic;color:var(--eg-gold)}
.eg-p{margin:0;max-width:56ch;color:var(--eg-muted);font-size:clamp(16px,1.6vw,18px);line-height:1.55;text-wrap:pretty}

/* ── la tarjeta ── */
.eg{container-type:inline-size;position:relative;width:100%;margin:48px 0 0;border-radius:28px;background:linear-gradient(180deg,rgba(22,41,58,.65),rgba(13,27,39,.4));border:1px solid var(--eg-line);padding:28px}
.eg-box{position:relative;width:100%;aspect-ratio:1000/560}
.eg-box>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eg-box>svg.eg-mob{display:none}
/* capa 1: el trazo quieto */
.eg-ln{fill:none;stroke:rgba(244,241,234,.12);stroke-width:1.5}
/* capa 1b (aura quieta): la salida ya pasó por la IA, lleva un halo */
.eg-gl{fill:none;stroke:rgba(224,138,46,.22);stroke-width:5;stroke-linecap:round;filter:url(#egb-d)}
.eg-mob .eg-gl{filter:url(#egb-m)}
/* capa 2: puntos que corren sin parar · azul entrando, ámbar saliendo */
.eg-fl{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 9;animation:egfl 1.3s linear infinite}
.eg-fl.i{stroke:rgba(143,179,204,.42)}
.eg-fl.o{stroke:rgba(224,138,46,.42)}
@keyframes egfl{to{stroke-dashoffset:-24}}
/* capa 3: el pulso dorado que viaja (entrada: punto fino · salida: punto con estela de energía) */
.eg-pl{fill:none;stroke:var(--eg-gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 520;stroke-dashoffset:534;animation:egpl 3.6s cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d,0s)}
.eg-pl.o{stroke:var(--eg-gold-l);stroke-width:3}
.eg-pl.v{stroke-dasharray:14 260;stroke-dashoffset:274}
@keyframes egpl{to{stroke-dashoffset:0}}
.eg-au{fill:none;stroke:var(--eg-gold);stroke-width:9;stroke-linecap:round;opacity:.5;stroke-dasharray:60 600;stroke-dashoffset:706;animation:egau 3.6s cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d,0s);filter:url(#egb-d)}
.eg-mob .eg-au{filter:url(#egb-m);stroke-dasharray:60 300;stroke-dashoffset:406}
@keyframes egau{to{stroke-dashoffset:172}}

/* ── nodos ── */
.eg-nd{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.eg-nd i{display:grid;place-items:center;width:clamp(38px,5.6cqw,66px);height:clamp(38px,5.6cqw,66px);border-radius:clamp(12px,1.5cqw,18px);background:#13273a;border:1px solid rgba(244,241,234,.14);font-style:normal;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.eg-nd i img,.eg-nd i svg{width:50%;height:50%;object-fit:contain;display:block}
.eg-nd i svg{stroke:#e4e0d6;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eg-nd i svg.wa{fill:#e4e0d6;stroke:none;width:52%;height:52%}
.eg-nd small{font-size:clamp(9.5px,1cqw,12.5px);color:var(--eg-muted);white-space:normal;text-align:center;max-width:clamp(96px,13.5cqw,150px);line-height:1.3;text-wrap:balance}
.eg-nd small .eg-s{display:none}
/* las salidas vienen cargadas: borde y halo ámbar */
.eg-nd.o i{border-color:rgba(224,138,46,.34);box-shadow:0 0 0 1px rgba(224,138,46,.06),0 0 30px -8px rgba(224,138,46,.55),0 14px 30px -18px rgba(0,0,0,.8)}
/* la bolita: redonda, dos anillos girando, pulso que se expande, ondas de voz, chip IA */
.eg-nd.c{z-index:2}
.eg-nd.c i{position:relative;width:clamp(60px,10cqw,118px);height:clamp(60px,10cqw,118px);border-radius:50%;background:radial-gradient(circle at 50% 40%,#16304a,#0f2233 70%);border-color:rgba(224,138,46,.55);box-shadow:0 0 0 10px rgba(224,138,46,.06),0 0 44px rgba(47,93,124,.45),0 24px 60px -24px rgba(224,138,46,.6),inset 0 0 30px rgba(143,179,204,.18)}
.eg-nd.c i img{width:46%;height:46%;margin-top:-10%;position:relative;z-index:2}
.eg-nd.c i::before{content:'';position:absolute;inset:9%;border-radius:50%;border:1px solid rgba(143,179,204,.35);animation:egspin 14s linear infinite}
.eg-nd.c i::after{content:'';position:absolute;inset:clamp(-14px,-1.2cqw,-8px);border-radius:50%;border:1px dashed rgba(224,138,46,.45);animation:egspin 22s linear infinite reverse}
.eg-pulse{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;border:1px solid rgba(224,138,46,.5);animation:egring 3.6s ease-out infinite;pointer-events:none}
@keyframes egspin{to{transform:rotate(360deg)}}
@keyframes egring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.9)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.eg-wave{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:2;display:flex;align-items:flex-end;gap:3px;height:14%}
.eg-wave b{width:3px;border-radius:2px;background:var(--eg-gold-l);height:30%;animation:egwv 1.1s ease-in-out infinite;box-shadow:0 0 8px rgba(240,173,98,.6)}
.eg-wave b:nth-child(2){animation-delay:.15s}.eg-wave b:nth-child(3){animation-delay:.3s}.eg-wave b:nth-child(4){animation-delay:.45s}.eg-wave b:nth-child(5){animation-delay:.6s}.eg-wave b:nth-child(6){animation-delay:.75s}.eg-wave b:nth-child(7){animation-delay:.9s}
@keyframes egwv{0%,100%{height:25%}50%{height:100%}}
.eg-chip{position:absolute;top:-5%;right:-5%;z-index:3;display:grid;place-items:center;width:27%;height:27%;border-radius:50%;background:var(--eg-gold);color:var(--eg-navy);font:600 10.5px var(--eg-mono);letter-spacing:.04em;border:2px solid var(--eg-navy);box-shadow:0 0 14px rgba(224,138,46,.7)}
.eg-nd.c small{max-width:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:.5cqw 1cqw;border-radius:999px;background:rgba(23,45,64,.94);border:1px solid rgba(224,138,46,.35);font:500 clamp(8px,1cqw,10.5px) var(--eg-mono);letter-spacing:.14em;text-transform:uppercase;color:#e4e0d6}
.eg-nd.c small::before{content:'';width:6px;height:6px;border-radius:50%;background:#4fd18b;box-shadow:0 0 8px #4fd18b;animation:egblink 1.6s ease-in-out infinite}
@keyframes egblink{0%,100%{opacity:1}50%{opacity:.3}}
/* etiqueta de arriba */
.eg-lab{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(23,45,64,.94);border:1px solid var(--eg-line);font:500 clamp(8px,1cqw,10.5px) var(--eg-mono);letter-spacing:.16em;text-transform:uppercase;color:#e4e0d6;white-space:nowrap;box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.eg-lab::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--eg-gold);box-shadow:0 0 10px var(--eg-gold)}
/* los verbos sobre cada línea */
.eg-tg{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);z-index:2;padding:.35cqw .8cqw;border-radius:999px;background:#0f2233;border:1px solid rgba(244,241,234,.1);font:500 clamp(8px,.95cqw,10px) var(--eg-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--eg-gold-l);white-space:nowrap}
.eg-tg.i{color:var(--eg-blue-l)}
/* la salida de abajo: ingresos */
.eg-nd.out i{width:auto;height:auto;display:inline-flex;align-items:center;gap:8px;padding:.8cqw 1.8cqw;border-radius:999px;background:rgba(224,138,46,.14);border-color:rgba(224,138,46,.45);font:500 clamp(9px,1.1cqw,12px) var(--eg-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--eg-gold-l);box-shadow:0 0 34px -8px rgba(224,138,46,.6),0 8px 24px -10px rgba(224,138,46,.4)}
.eg-nd.out i svg{width:14px;height:14px;stroke:var(--eg-gold-l);stroke-width:2.2}
.eg-cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--eg-line)}
.eg-cap p{position:relative;margin:0;padding-left:34px;font-size:clamp(12.5px,1.25cqw,14.5px);line-height:1.45;color:var(--eg-muted);text-wrap:pretty}
.eg-cap p b{display:block;font-weight:600;color:var(--eg-ivory)}
.eg-cap p i{position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(224,138,46,.16);border:1px solid rgba(224,138,46,.5);font:600 11px var(--eg-mono);font-style:normal;color:var(--eg-gold-l)}

@media (max-width:760px){.eg-sec{padding:80px 0}.eg-wrap{padding:0 16px}.eg{padding:16px;border-radius:22px}}
@media (max-width:640px){.eg-tg{display:none}}
/* celular: el mismo flujo en vertical · entradas → bolita → los 5 canales → ingresos */
@media (max-width:560px){
  .eg-box>svg.eg-desk,.eg-lab,.eg-tg{display:none}
  .eg-box>svg.eg-mob{display:block}
  .eg-box{aspect-ratio:360/640}
  .eg-pl{stroke-dasharray:14 220;stroke-dashoffset:234}
  .eg-gl,.eg-au{filter:none}
  .eg-au{opacity:.28;stroke-width:7}
  .eg-nd,.eg-tg{left:var(--mx);top:var(--my)}
  .eg-nd i{width:44px;height:44px;border-radius:13px}
  .eg-nd small{max-width:62px;font-size:9px;line-height:1.2}
  .eg-nd small .eg-l{display:none}.eg-nd small .eg-s{display:inline}
  .eg-nd.c{width:78%}
  .eg-nd.c i{width:72px;height:72px}
  .eg-nd.c i::after{inset:-10px}
  .eg-nd.c small{max-width:none;white-space:normal;line-height:1.5;font-size:9.5px;padding:6px 12px}
  .eg-nd.out i{font-size:10.5px;padding:9px 16px;white-space:normal;text-align:center;max-width:260px;line-height:1.3}
  .eg-cap{grid-template-columns:1fr;gap:14px;margin-top:18px;padding-top:16px}
  .eg-cap p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.eg-pl,.eg-au,.eg-fl,.eg-nd.c i::before,.eg-nd.c i::after,.eg-pulse,.eg-wave b,.eg-nd.c small::before{animation:none}}