/* viz.css — estilos de las 5 infografías (extraído de landing3.css).
   Se carga SOLO en páginas con infografía (home + plataforma/infra/ia/proceso). */
/* ==========================================================================
   FRAGMENTACIÓN → UNIFICACIÓN  (#unifica)
   Fondo en vídeo (Magnific) + overlay nítido escalado con container queries.
   Fallback estático en móvil y en prefers-reduced-motion.
   ========================================================================== */
.frag .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;}

.frag-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--color-border);
  background:#05080f;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.frag-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.frag-veil{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;}
.frag-veil-t{top:0;height:27%;background:linear-gradient(180deg,rgba(5,8,15,.92),transparent);}
.frag-veil-b{bottom:0;height:24%;background:linear-gradient(0deg,rgba(5,8,15,.92),transparent);}

/* heading + tagline inside the stage */
.frag-head{position:absolute;top:4.5%;left:0;width:100%;text-align:center;z-index:5;}
.frag-eyebrow{font-family:var(--brand-font-display);font-weight:700;font-size:max(.62rem,.9cqw);letter-spacing:.22em;
  text-transform:uppercase;color:var(--vl-turquoise);opacity:.92;}
.frag-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.15rem,2.75cqw);line-height:1.1;
  margin-top:.8cqw;letter-spacing:-.01em;color:var(--color-text);text-shadow:0 4px 30px rgba(0,0,0,.6);padding-inline:1rem;}
.frag-tagline{position:absolute;bottom:4.6%;left:0;width:100%;text-align:center;z-index:5;
  font-family:var(--brand-font-display);font-weight:700;font-size:max(1rem,1.9cqw);text-shadow:0 4px 24px rgba(0,0,0,.7);color:var(--color-text);padding-inline:1rem;}
.frag-sub{display:block;color:var(--color-text-muted);font-size:max(.72rem,.95cqw);font-weight:400;font-family:var(--brand-font-body);margin-top:.5cqw;}

.frag-zone{position:absolute;top:22%;font-family:var(--brand-font-display);font-weight:700;font-size:.78cqw;
  letter-spacing:.16em;text-transform:uppercase;z-index:5;}
.frag-zone-a{left:5%;color:#f0506e;}
.frag-zone-b{right:5%;text-align:right;color:var(--vl-turquoise);}

/* chaos chips */
.frag-chip{position:absolute;display:flex;align-items:center;gap:.5cqw;padding:.56cqw .9cqw .56cqw .62cqw;
  border-radius:.85cqw;z-index:4;background:rgba(18,22,32,.74);backdrop-filter:blur(3px);
  border:1px solid rgba(150,160,180,.22);box-shadow:0 .6cqw 1.5cqw rgba(0,0,0,.5);
  font-size:.9cqw;font-weight:600;color:#aab3c5;white-space:nowrap;filter:grayscale(.8) brightness(.9);}
.frag-chip img{width:1.5cqw;height:1.5cqw;opacity:.72;}
.frag-chip .ph{width:1.5cqw;height:1.5cqw;border-radius:.4cqw;background:rgba(120,128,145,.5);
  display:grid;place-items:center;font-size:.62cqw;color:#dfe4ee;}
.frag-pain{position:absolute;font-family:var(--brand-font-display);font-weight:700;font-size:.78cqw;color:#f0506e;
  text-transform:uppercase;letter-spacing:.05em;z-index:4;text-shadow:0 2px 8px rgba(0,0,0,.7);}

/* order: spokes + hub + nodes */
.frag-spokes{position:absolute;inset:0;width:100%;height:100%;z-index:3;}
.frag-spokes line{stroke-dasharray:240;stroke-dashoffset:240;}
.frag-hub{position:absolute;left:71%;top:50%;transform:translate(-50%,-50%);width:8.25cqw;height:8.25cqw;
  border-radius:1.6cqw;z-index:4;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(20,26,40,.92),rgba(8,11,20,.92));
  border:1px solid rgba(1,107,252,.5);box-shadow:0 0 3cqw rgba(1,107,252,.4);}
.frag-hub::after{content:"";position:absolute;inset:-.4cqw;border-radius:1.9cqw;background:var(--vl-grad);filter:blur(1.5cqw);opacity:.45;z-index:-1;}
.frag-hub img{width:7.4cqw;height:7.4cqw;object-fit:contain;}
.frag-node{position:absolute;width:4.5cqw;height:4.5cqw;border-radius:1cqw;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12cqw;
  background:rgba(16,22,34,.86);backdrop-filter:blur(3px);border:1px solid rgba(37,246,183,.32);
  box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.5);transform:translate(-50%,-50%);}
.frag-node img{width:2cqw;height:2cqw;}
.frag-node span{font-size:.6cqw;font-weight:600;color:#c7cfde;}

/* ---- entrance animations (fire when .frag-stage gets .visible) ---- */
@keyframes fragFadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fragFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fragChipIn{from{opacity:0;transform:translate(var(--dx,-40px),var(--dy,0))}
  to{opacity:.92;transform:translate(0,0) rotate(var(--rot,0))}}
@keyframes fragNodePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fragHubIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fragGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(37,246,183,.35))}50%{filter:drop-shadow(0 0 18px rgba(37,246,183,.7))}}
@keyframes fragDraw{to{stroke-dashoffset:0}}
@keyframes fragPain{0%,100%{opacity:.9}50%{opacity:.4}}

/* initial hidden states */
.frag-stage .frag-head,.frag-stage .frag-tagline,.frag-stage .frag-zone,
.frag-stage .frag-chip,.frag-stage .frag-node,.frag-stage .frag-hub,.frag-stage .frag-pain{opacity:0;}

/* on reveal */
.frag-stage.visible .frag-head{animation:fragFadeDown .9s .1s both;}
.frag-stage.visible .frag-tagline{animation:fragFadeUp .9s 1.6s both;}
.frag-stage.visible .frag-zone{animation:fragFadeDown .8s .5s both;}
.frag-stage.visible .frag-chip{animation:fragChipIn .9s var(--d,0s) both;}
.frag-stage.visible .frag-spokes line{animation:fragDraw 1s 1.2s both;}
.frag-stage.visible .frag-hub{animation:fragHubIn .8s 1s both;}
.frag-stage.visible .frag-hub img{animation:fragGlow 3s 1.8s infinite;}
.frag-stage.visible .frag-node{animation:fragNodePop .6s var(--d,0s) both;}
.frag-stage.visible .frag-pain{animation:fragPain 2.4s 1.4s infinite both;}

/* mobile / reduced-motion fallback: static composite */
.frag-mobile{display:none;width:100%;height:auto;border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:0 30px 80px rgba(0,0,0,.45);}
/* Móvil/tablet SÍ se anima (vídeo + overlay). Sólo cae a estático con reduced-motion. */
@media (prefers-reduced-motion:reduce){
  .frag-stage{display:none;}
  .frag-mobile{display:block;}
}
/* ---- capa específica de teléfono: vídeo + iconos en rejilla ---- */
.frag-m{display:none;}
.frag-m-sym{width:52px;height:52px;object-fit:contain;}
.frag-m-title{font-family:var(--brand-font-display);font-weight:700;line-height:1.12;
  font-size:clamp(1.15rem,5.6vw,1.6rem);text-shadow:0 4px 24px rgba(0,0,0,.7);color:var(--color-text);}
.frag-m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;width:100%;max-width:340px;}
.frag-m-ico{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .2rem;border-radius:.8rem;
  background:rgba(16,22,34,.82);backdrop-filter:blur(3px);border:1px solid rgba(37,246,183,.30);box-shadow:0 6px 16px rgba(0,0,0,.5);}
.frag-m-ico img{width:26px;height:26px;}
.frag-m-ico span{font-size:.6rem;font-weight:600;color:#c7cfde;}
.frag-m-tag{font-family:var(--brand-font-display);font-weight:700;font-size:clamp(.95rem,4.6vw,1.25rem);
  text-shadow:0 4px 20px rgba(0,0,0,.7);color:var(--color-text);}
.frag-m-sub{display:block;font-family:var(--brand-font-body);font-weight:400;font-size:.72rem;color:var(--color-text-muted);margin-top:.3rem;}
@keyframes fragPop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

/* Teléfonos: ocultar el overlay horizontal (no cabe) y mostrar la rejilla animada */
@media (max-width:760px){
  .frag-stage{aspect-ratio:auto;min-height:clamp(440px,120vw,560px);}
  .frag-head,.frag-tagline,.frag-zone,.frag-chip,.frag-pain,.frag-spokes,.frag-node,.frag-hub{display:none;}
  .frag-m{display:flex;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;
    gap:1rem;padding:1.4rem 1.1rem;text-align:center;}
  .frag-stage .frag-m-sym,.frag-stage .frag-m-title,.frag-stage .frag-m-tag{opacity:0;}
  .frag-stage.visible .frag-m-sym{animation:fragPop .7s .15s both;}
  .frag-stage.visible .frag-m-title{animation:fragFadeDown .8s .3s both;}
  .frag-stage.visible .frag-m-tag{animation:fragFadeUp .8s 1.3s both;}
  .frag-stage.visible .frag-m-ico{animation:fragPop .5s both;}
  .frag-stage.visible .frag-m-ico:nth-child(1){animation-delay:.5s;}
  .frag-stage.visible .frag-m-ico:nth-child(2){animation-delay:.58s;}
  .frag-stage.visible .frag-m-ico:nth-child(3){animation-delay:.66s;}
  .frag-stage.visible .frag-m-ico:nth-child(4){animation-delay:.74s;}
  .frag-stage.visible .frag-m-ico:nth-child(5){animation-delay:.82s;}
  .frag-stage.visible .frag-m-ico:nth-child(6){animation-delay:.90s;}
  .frag-stage.visible .frag-m-ico:nth-child(7){animation-delay:.98s;}
  .frag-stage.visible .frag-m-ico:nth-child(8){animation-delay:1.06s;}
  /* en móvil el grid de iconos arranca oculto para el pop */
  .frag-stage .frag-m-grid .frag-m-ico{opacity:0;}
}


/* === VIZ SECTIONS (infografías #2-#5) === */
/* ==========================================================================
   INFRAESTRUCTURA DEDICADA (#viz-infra) — vídeo Magnific + overlay (cqw)
   Escalado con container queries; fallback estático en móvil/reduced-motion.
   ========================================================================== */
.frag2 .viz2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.viz2-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--color-border);background:#05080f;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.viz2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.viz2-veil{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;}
.viz2-veil-t{top:0;height:26%;background:linear-gradient(180deg,rgba(5,8,15,.92),transparent);}
.viz2-veil-b{bottom:0;height:22%;background:linear-gradient(0deg,rgba(5,8,15,.94),transparent);}

.viz2-head{position:absolute;top:3cqw;left:0;width:100%;text-align:center;z-index:6;}
.viz2-eyebrow{font-family:var(--brand-font-display);font-weight:700;font-size:max(.62rem,.875cqw);letter-spacing:.22em;text-transform:uppercase;color:var(--vl-turquoise);opacity:.92;}
.viz2-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.2rem,2.875cqw);line-height:1.1;margin-top:.8cqw;letter-spacing:-.01em;color:var(--color-text);text-shadow:0 4px 30px rgba(0,0,0,.6);}
.viz2-sub{color:var(--color-text-muted);font-size:max(.72rem,1cqw);margin-top:.75cqw;font-family:var(--brand-font-body);}

.viz2-bubble{position:absolute;border-radius:1.5cqw;background:linear-gradient(160deg,rgba(20,26,40,.92),rgba(8,11,20,.94));border:1px solid var(--color-border);}
.viz2-ghost{width:18.75cqw;height:21.25cqw;top:16.875cqw;z-index:1;opacity:.55;border:1px solid rgba(140,160,200,.4);}
.viz2-ghost-l{left:26.5625cqw;transform:rotate(-3deg) scale(.92);}
.viz2-ghost-r{right:26.5625cqw;transform:rotate(3deg) scale(.92);}
.viz2-ghost-label{position:absolute;top:.875cqw;left:0;width:100%;text-align:center;font-size:max(.6rem,.8125cqw);color:#97a3bb;font-weight:600;}
.viz2-row{height:2.875cqw;margin:.875cqw 1.125cqw;border-radius:.625cqw;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);}
.viz2-row:first-of-type{margin-top:3.125cqw;}
.viz2-iso{position:absolute;top:22.5cqw;font-family:var(--brand-font-display);font-weight:700;font-size:max(.58rem,.75cqw);letter-spacing:.12em;text-transform:uppercase;color:#7f8ba5;z-index:5;}
.viz2-iso-l{left:31%;}
.viz2-iso-r{right:31%;}

.viz2-hero{left:50%;top:15.375cqw;transform:translateX(-50%);width:26.875cqw;height:24.5cqw;z-index:4;
  border:1.5px solid rgba(37,246,183,.45);box-shadow:0 0 3.75cqw rgba(1,107,252,.30);padding:1.375cqw;}
.viz2-hero::after{content:"";position:absolute;inset:-.44cqw;border-radius:1.9cqw;background:var(--vl-grad);filter:blur(1.9cqw);opacity:.30;z-index:-1;}
.viz2-env-head{display:flex;align-items:center;gap:.75cqw;margin-bottom:1.125cqw;}
.viz2-shield{width:2.875cqw;height:2.875cqw;flex-shrink:0;}
.viz2-env-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(.95rem,1.25cqw);line-height:1.1;color:var(--color-text);}
.viz2-env-title small{display:block;font-family:var(--brand-font-body);font-weight:400;font-size:max(.62rem,.78cqw);color:var(--color-text-muted);margin-top:.18cqw;}
.viz2-layer{display:flex;align-items:center;gap:.875cqw;padding:.8125cqw .9375cqw;border-radius:.8125cqw;margin-bottom:.6875cqw;background:rgba(255,255,255,.035);border:1px solid rgba(37,246,183,.16);}
.viz2-layer .viz2-ico{width:2.625cqw;height:2.625cqw;border-radius:.6875cqw;display:grid;place-items:center;flex-shrink:0;background:rgba(1,107,252,.10);border:1px solid rgba(1,107,252,.22);}
.viz2-layer .viz2-ico img{width:1.625cqw;height:1.625cqw;}
.viz2-layer b{font-size:max(.8rem,.97cqw);font-weight:600;color:var(--color-text);}
.viz2-layer span{display:block;font-size:max(.62rem,.78cqw);color:var(--color-text-muted);margin-top:.12cqw;}

.viz2-badge{position:absolute;display:flex;align-items:center;gap:.5625cqw;padding:.625cqw .9375cqw;border-radius:.8125cqw;z-index:5;
  background:rgba(16,22,34,.9);backdrop-filter:blur(3px);border:1px solid rgba(37,246,183,.3);box-shadow:0 10px 24px rgba(0,0,0,.5);
  font-size:max(.72rem,.875cqw);font-weight:600;color:#dbe2ef;white-space:nowrap;}
.viz2-badge img{width:1.5cqw;height:1.5cqw;}
.viz2-badge-1{left:6%;top:18.4cqw;}
.viz2-badge-2{right:6%;top:18.4cqw;}
.viz2-badge-3{left:7%;top:33.1cqw;}
.viz2-badge-4{right:7%;top:33.1cqw;}

.viz2-foundation{position:absolute;bottom:2.875cqw;left:0;right:0;z-index:5;text-align:center;}
.viz2-cap{font-size:max(.6rem,.75cqw);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:.875cqw;}
.viz2-tech{display:flex;justify-content:center;flex-wrap:wrap;gap:.625cqw;}
.viz2-chip{display:flex;align-items:center;gap:.5cqw;padding:.5625cqw .9375cqw;border-radius:999px;background:rgba(16,22,34,.8);border:1px solid var(--color-border);font-size:max(.66rem,.84cqw);font-weight:500;color:#cdd5e3;}
.viz2-chip img{width:1.25cqw;height:1.25cqw;}

/* ---- animaciones de entrada (gateadas en .viz2-stage.visible) ---- */
@keyframes viz2FadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz2FadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz2Pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes viz2HeroIn{0%{opacity:0;transform:translateX(-50%) scale(.86)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes viz2GhostL{0%{opacity:0;transform:rotate(-3deg) scale(.7)}100%{opacity:.55;transform:rotate(-3deg) scale(.92)}}
@keyframes viz2GhostR{0%{opacity:0;transform:rotate(3deg) scale(.7)}100%{opacity:.55;transform:rotate(3deg) scale(.92)}}

.viz2-stage .viz2-head,.viz2-stage .viz2-hero,.viz2-stage .viz2-ghost,.viz2-stage .viz2-badge,.viz2-stage .viz2-foundation,.viz2-stage .viz2-iso{opacity:0;}
.viz2-stage.visible .viz2-head{animation:viz2FadeDown .9s .1s both;}
.viz2-stage.visible .viz2-hero{animation:viz2HeroIn .8s .5s both;}
.viz2-stage.visible .viz2-ghost-l{animation:viz2GhostL .8s .9s both;}
.viz2-stage.visible .viz2-ghost-r{animation:viz2GhostR .8s 1s both;}
.viz2-stage.visible .viz2-iso{animation:viz2FadeUp .7s 1.3s both;}
.viz2-stage.visible .viz2-badge{animation:viz2Pop .6s var(--d,0s) both;}
.viz2-stage.visible .viz2-foundation{animation:viz2FadeUp .8s 1.2s both;}

/* ---- móvil / reduced-motion: composición estática ---- */
.viz2-mobile{display:none;width:100%;height:auto;border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:0 30px 80px rgba(0,0,0,.45);}
@media (max-width:980px){.viz2-stage{display:none;}.viz2-mobile{display:block;}}
@media (prefers-reduced-motion:reduce){.viz2-stage{display:none;}.viz2-mobile{display:block;}}


/* ==========================================================================
   VANGUARD AI  (#viz-ai)
   Fondo en vídeo (Magnific) + overlay nítido escalado con container queries.
   Mismo patrón que #unifica: anima en móvil (rejilla) y cae a estático
   sólo en prefers-reduced-motion.
   ========================================================================== */
.frag3 .viz3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.viz3-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--color-border);
  background:#05080f;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.viz3-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.viz3-veil{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;}
.viz3-veil-t{top:0;height:27%;background:linear-gradient(180deg,rgba(5,8,15,.92),transparent);}
.viz3-veil-b{bottom:0;height:24%;background:linear-gradient(0deg,rgba(5,8,15,.92),transparent);}

/* heading */
.viz3-head{position:absolute;top:5%;left:0;width:100%;text-align:center;z-index:6;}
.viz3-eyebrow{font-family:var(--brand-font-display);font-weight:700;font-size:max(.62rem,.9cqw);letter-spacing:.22em;
  text-transform:uppercase;color:var(--vl-turquoise);opacity:.92;}
.viz3-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.15rem,2.85cqw);line-height:1.1;
  margin-top:.8cqw;letter-spacing:-.01em;color:var(--color-text);text-shadow:0 4px 30px rgba(0,0,0,.6);}
.viz3-badge{display:inline-flex;align-items:center;gap:.5cqw;margin-top:1cqw;padding:.4cqw 1cqw;border-radius:999px;
  font-family:var(--brand-font-display);font-weight:700;font-size:max(.6rem,.78cqw);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(37,246,183,.08);border:1px solid rgba(37,246,183,.32);color:var(--vl-turquoise);}
.viz3-badge .dot{width:.45cqw;height:.45cqw;min-width:5px;min-height:5px;border-radius:50%;background:var(--vl-turquoise);box-shadow:0 0 0 .25cqw rgba(37,246,183,.18);}

/* synapses */
.viz3-net{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.viz3-net line{stroke-dasharray:300;stroke-dashoffset:300;}

/* AI core */
.viz3-core{position:absolute;left:50%;top:52.2%;transform:translate(-50%,-50%);width:10.75cqw;height:10.75cqw;border-radius:50%;z-index:4;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(37,246,183,.20),rgba(1,107,252,.12) 58%,rgba(8,11,20,.92) 76%);
  border:1px solid rgba(37,246,183,.5);}
.viz3-core::after{content:"";position:absolute;width:13.1cqw;height:13.1cqw;border-radius:50%;background:var(--vl-grad);filter:blur(2.5cqw);opacity:.42;z-index:-1;}
.viz3-core img{width:6.5cqw;height:6.5cqw;object-fit:contain;filter:drop-shadow(0 0 .75cqw rgba(37,246,183,.6));}
.viz3-core-label{position:absolute;left:0;top:63.8%;width:100%;text-align:center;z-index:5;
  font-family:var(--brand-font-display);font-weight:700;font-size:max(.85rem,1.1cqw);letter-spacing:.02em;color:var(--color-text);}

/* module nodes around core */
.viz3-node{position:absolute;width:5.5cqw;height:5.5cqw;border-radius:1.25cqw;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;
  background:rgba(16,22,34,.9);backdrop-filter:blur(3px);border:1px solid rgba(1,107,252,.28);
  box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.5);transform:translate(-50%,-50%);}
.viz3-node img{width:2.25cqw;height:2.25cqw;}
.viz3-node span{font-size:.69cqw;font-weight:600;color:#c7cfde;}

/* capability chips */
.viz3-cap{position:absolute;display:flex;align-items:center;gap:.7cqw;padding:.8cqw 1.05cqw;border-radius:.95cqw;z-index:5;
  background:rgba(16,22,34,.92);backdrop-filter:blur(3px);border:1px solid rgba(37,246,183,.28);
  box-shadow:0 .75cqw 1.75cqw rgba(0,0,0,.5);width:15.5cqw;}
.viz3-cap .ico{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;display:grid;place-items:center;flex-shrink:0;
  background:rgba(37,246,183,.10);border:1px solid rgba(37,246,183,.22);}
.viz3-cap .ico img{width:1.6cqw;height:1.6cqw;}
.viz3-cap b{font-size:max(.78rem,.9cqw);font-weight:600;display:block;color:var(--color-text);}
.viz3-cap small{font-size:max(.66rem,.75cqw);color:var(--color-text-muted);}

/* claim */
.viz3-claim{position:absolute;bottom:4.6%;left:0;width:100%;text-align:center;z-index:6;}
.viz3-claim .t{font-family:var(--brand-font-display);font-weight:700;font-size:max(1rem,1.55cqw);text-shadow:0 4px 24px rgba(0,0,0,.7);color:var(--color-text);}
.viz3-claim .s{display:block;color:var(--color-text-muted);font-size:max(.72rem,.95cqw);font-weight:400;font-family:var(--brand-font-body);margin-top:.5cqw;}

/* ---- entrance animations (fire when .viz3-stage gets .visible) ---- */
@keyframes viz3Fade{from{opacity:0}to{opacity:1}}
@keyframes viz3FadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz3FadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz3CoreIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes viz3NodePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes viz3Glow{0%,100%{filter:drop-shadow(0 0 8px rgba(37,246,183,.4))}50%{filter:drop-shadow(0 0 18px rgba(37,246,183,.75))}}
@keyframes viz3Draw{to{stroke-dashoffset:0}}
@keyframes viz3Pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

/* initial hidden states */
.viz3-stage .viz3-head,.viz3-stage .viz3-core,.viz3-stage .viz3-core-label,
.viz3-stage .viz3-node,.viz3-stage .viz3-cap,.viz3-stage .viz3-claim{opacity:0;}

/* on reveal */
.viz3-stage.visible .viz3-head{animation:viz3FadeDown .9s .1s both;}
.viz3-stage.visible .viz3-core{animation:viz3CoreIn .8s .5s both;}
.viz3-stage.visible .viz3-core img{animation:viz3Glow 3s 1.6s infinite;}
.viz3-stage.visible .viz3-core-label{animation:viz3Fade .7s 1.1s both;}
.viz3-stage.visible .viz3-net line{animation:viz3Draw 1s 1s both;}
.viz3-stage.visible .viz3-node{animation:viz3NodePop .6s var(--d,0s) both;}
.viz3-stage.visible .viz3-cap{animation:viz3FadeUp .8s var(--d,0s) both;}
.viz3-stage.visible .viz3-claim{animation:viz3FadeUp .9s 1.7s both;}

/* mobile / reduced-motion fallback: static composite */
.viz3-mobile{display:none;width:100%;height:auto;border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:0 30px 80px rgba(0,0,0,.45);}
@media (prefers-reduced-motion:reduce){
  .viz3-stage{display:none;}
  .viz3-mobile{display:block;}
}

/* ---- capa específica de teléfono: vídeo + iconos en rejilla ---- */
.viz3-m{display:none;}
.viz3-m-sym{width:54px;height:54px;object-fit:contain;}
.viz3-m-title{font-family:var(--brand-font-display);font-weight:700;line-height:1.12;
  font-size:clamp(1.15rem,5.6vw,1.6rem);text-shadow:0 4px 24px rgba(0,0,0,.7);color:var(--color-text);}
.viz3-m-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .8rem;border-radius:999px;
  font-family:var(--brand-font-display);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(37,246,183,.08);border:1px solid rgba(37,246,183,.32);color:var(--vl-turquoise);}
.viz3-m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;width:100%;max-width:340px;}
.viz3-m-ico{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .2rem;border-radius:.8rem;
  background:rgba(16,22,34,.82);backdrop-filter:blur(3px);border:1px solid rgba(1,107,252,.30);box-shadow:0 6px 16px rgba(0,0,0,.5);}
.viz3-m-ico img{width:26px;height:26px;}
.viz3-m-ico span{font-size:.6rem;font-weight:600;color:#c7cfde;}
.viz3-m-claim{font-family:var(--brand-font-body);font-weight:400;font-size:.8rem;color:var(--color-text-muted);}
.viz3-m-claim b{color:var(--color-text);font-weight:700;font-family:var(--brand-font-display);}

@media (max-width:760px){
  .viz3-stage{aspect-ratio:auto;min-height:clamp(440px,120vw,560px);}
  .viz3-head,.viz3-claim,.viz3-net,.viz3-core,.viz3-core-label,.viz3-node,.viz3-cap{display:none;}
  .viz3-m{display:flex;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;
    gap:1rem;padding:1.4rem 1.1rem;text-align:center;}
  .viz3-stage .viz3-m-sym,.viz3-stage .viz3-m-title,.viz3-stage .viz3-m-badge,.viz3-stage .viz3-m-claim{opacity:0;}
  .viz3-stage.visible .viz3-m-sym{animation:viz3Pop .7s .15s both;}
  .viz3-stage.visible .viz3-m-title{animation:viz3FadeDown .8s .3s both;}
  .viz3-stage.visible .viz3-m-badge{animation:viz3Fade .7s .5s both;}
  .viz3-stage.visible .viz3-m-claim{animation:viz3FadeUp .8s 1.3s both;}
  .viz3-stage.visible .viz3-m-ico{animation:viz3Pop .5s both;}
  .viz3-stage.visible .viz3-m-ico:nth-child(1){animation-delay:.5s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(2){animation-delay:.58s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(3){animation-delay:.66s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(4){animation-delay:.74s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(5){animation-delay:.82s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(6){animation-delay:.90s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(7){animation-delay:.98s;}
  .viz3-stage.visible .viz3-m-ico:nth-child(8){animation-delay:1.06s;}
  .viz3-stage .viz3-m-grid .viz3-m-ico{opacity:0;}
}


/* ==========================================================================
   EL VIAJE HACIA LA EFICIENCIA  (#viz-proceso)
   Fondo en vídeo (Magnific) + timeline escalado con container queries.
   Fallback estático en móvil y en prefers-reduced-motion.
   ========================================================================== */
.frag4 .viz4-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.viz4-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--color-border);
  background:#05080f;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.viz4-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.viz4-veil{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;}
.viz4-veil-t{top:0;height:30%;background:linear-gradient(180deg,rgba(5,8,15,.92),transparent);}
.viz4-veil-b{bottom:0;height:18%;background:linear-gradient(0deg,rgba(5,8,15,.9),transparent);}

/* heading */
.viz4-head{position:absolute;top:4.5%;left:0;width:100%;text-align:center;z-index:5;}
.viz4-eyebrow{font-family:var(--brand-font-display);font-weight:700;font-size:max(.62rem,.9cqw);letter-spacing:.22em;
  text-transform:uppercase;color:var(--vl-turquoise);opacity:.92;}
.viz4-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.15rem,2.75cqw);line-height:1.1;
  margin-top:.8cqw;letter-spacing:-.01em;color:var(--color-text);text-shadow:0 4px 30px rgba(0,0,0,.6);padding-inline:1rem;}
.viz4-sub{color:var(--color-text-muted);font-size:max(.72rem,.95cqw);font-family:var(--brand-font-body);margin-top:.55cqw;}

/* track (road + stubs) as scalable SVG */
.viz4-track{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.viz4-road{stroke-dasharray:1480;stroke-dashoffset:1480;}
.viz4-stub{opacity:0;}

/* dots */
.viz4-dot{position:absolute;top:55%;width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--vl-grad);
  transform:translate(-50%,-50%);box-shadow:0 0 0 .3cqw rgba(1,107,252,.14),0 0 1cqw rgba(37,246,183,.5);z-index:3;}

/* step cards */
.viz4-step{position:absolute;width:13.4cqw;padding:.95cqw 1.1cqw 1.05cqw;border-radius:1cqw;z-index:4;
  background:linear-gradient(160deg,rgba(20,26,40,.94),rgba(8,11,20,.95));
  border:1px solid rgba(37,246,183,.18);box-shadow:0 1cqw 2.1cqw rgba(0,0,0,.5);transform:translateX(-50%);}
.viz4-step .num{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.4rem,2.25cqw);line-height:1;
  background:var(--vl-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.viz4-step .ico{position:absolute;top:.9cqw;right:.9cqw;width:2.5cqw;height:2.5cqw;border-radius:.7cqw;display:grid;place-items:center;
  background:rgba(1,107,252,.10);border:1px solid rgba(1,107,252,.22);}
.viz4-step .ico img{width:1.5cqw;height:1.5cqw;}
.viz4-step h3{font-family:var(--brand-font-display);font-weight:700;font-size:max(.82rem,1.03cqw);margin-top:.45cqw;color:var(--color-text);}
.viz4-step p{color:var(--color-text-muted);font-size:max(.62rem,.78cqw);line-height:1.5;margin-top:.35cqw;}

/* dot captions (paso nº + nombre corto, sobre el punto) */
.viz4-cap{position:absolute;bottom:45%;transform:translateX(-50%);margin-bottom:1.9cqw;z-index:4;
  width:13cqw;text-align:center;pointer-events:none;}
.viz4-cap::after{content:"";position:absolute;left:50%;bottom:-1.6cqw;width:1px;height:1.2cqw;
  transform:translateX(-50%);background:linear-gradient(180deg,rgba(37,246,183,.5),transparent);}
.viz4-cap .n{display:block;font-family:var(--brand-font-display);font-weight:700;line-height:1;
  font-size:max(.82rem,1.6cqw);background:var(--vl-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.viz4-cap .t{display:block;margin-top:.45cqw;font-family:var(--brand-font-body);line-height:1.15;
  font-size:max(.6rem,.82cqw);letter-spacing:.02em;color:var(--color-text);white-space:nowrap;}

/* endpoint labels */
.viz4-end{position:absolute;top:55%;transform:translateY(-50%);padding:.5cqw .9cqw;border-radius:999px;z-index:4;
  font-family:var(--brand-font-display);font-weight:700;font-size:max(.58rem,.75cqw);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;background:rgba(16,22,34,.92);border:1px solid var(--color-border);color:#cdd5e3;}
.viz4-end.start{left:1.4%;}
.viz4-end.end{right:1.4%;border-color:rgba(37,246,183,.4);color:var(--vl-turquoise);}

/* ---- animations (fire when .viz4-stage gets .visible) ---- */
@keyframes viz4FadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz4Appear{from{opacity:0}to{opacity:1}}
@keyframes viz4Draw{to{stroke-dashoffset:0}}
@keyframes viz4Stub{to{opacity:.4}}
@keyframes viz4DotPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes viz4StepIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* initial hidden states */
.viz4-stage .viz4-head,.viz4-stage .viz4-dot,.viz4-stage .viz4-step,.viz4-stage .viz4-cap,.viz4-stage .viz4-end{opacity:0;}

/* on reveal */
.viz4-stage.visible .viz4-head{animation:viz4FadeDown .9s .1s both;}
.viz4-stage.visible .viz4-road{animation:viz4Draw 1.1s .3s both;}
.viz4-stage.visible .viz4-stub{animation:viz4Stub .6s 1.1s both;}
.viz4-stage.visible .viz4-end{animation:viz4Appear .8s .45s both;}
.viz4-stage.visible .viz4-dot{animation:viz4DotPop .5s var(--d,0s) both;}
.viz4-stage.visible .viz4-step{animation:viz4StepIn .6s var(--d,0s) both;}
.viz4-stage.visible .viz4-cap{animation:viz4StepIn .6s var(--d,0s) both;}

/* mobile / reduced-motion fallback: static composite */
.viz4-mobile{display:none;width:100%;height:auto;border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:0 30px 80px rgba(0,0,0,.45);}
@media (max-width:980px){
  .viz4-stage{display:none;}
  .viz4-mobile{display:block;}
}
@media (prefers-reduced-motion:reduce){
  .viz4-stage{display:none;}
  .viz4-mobile{display:block;}
}


/* ==========================================================================
   DATO ÚNICO  (#viz-dato)
   Fondo en vídeo (Magnific) + overlay nítido escalado con container queries.
   Fallback estático en móvil y en prefers-reduced-motion.
   ========================================================================== */
.frag5 .viz5-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.viz5-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--color-border);background:#05080f;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.viz5-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.viz5-veil{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;}
.viz5-veil-t{top:0;height:26%;background:linear-gradient(180deg,rgba(5,8,15,.92),transparent);}
.viz5-veil-b{bottom:0;height:22%;background:linear-gradient(0deg,rgba(5,8,15,.92),transparent);}

.viz5-head{position:absolute;top:4.5%;left:0;width:100%;text-align:center;z-index:6;}
.viz5-eyebrow{font-family:var(--brand-font-display);font-weight:700;font-size:max(.62rem,.9cqw);letter-spacing:.22em;text-transform:uppercase;color:var(--vl-turquoise);opacity:.92;}
.viz5-title{font-family:var(--brand-font-display);font-weight:700;font-size:max(1.15rem,2.85cqw);line-height:1.1;margin-top:.7cqw;letter-spacing:-.01em;color:var(--color-text);text-shadow:0 4px 30px rgba(0,0,0,.6);padding-inline:1rem;}

.viz5-pipe{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.viz5-line{stroke-dasharray:1340;stroke-dashoffset:1340;}

.viz5-nodup{position:absolute;left:50%;top:29%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.9cqw;white-space:nowrap;}
.viz5-strike{font-size:max(.6rem,.81cqw);color:#8893a8;text-decoration:line-through;text-decoration-color:#f0506e;text-decoration-thickness:2px;}
.viz5-ok{font-family:var(--brand-font-display);font-weight:700;font-size:max(.55rem,.75cqw);letter-spacing:.05em;text-transform:uppercase;color:var(--vl-turquoise);background:rgba(37,246,183,.10);border:1px solid rgba(37,246,183,.28);padding:.38cqw .8cqw;border-radius:999px;}

.viz5-source{position:absolute;left:8.5%;top:52%;transform:translate(-50%,-50%);width:15cqw;z-index:4;border-radius:1.25cqw;padding:1.375cqw 1.125cqw;text-align:center;
  background:linear-gradient(160deg,rgba(20,28,46,.96),rgba(8,11,20,.96));border:1.5px solid rgba(37,246,183,.5);box-shadow:0 0 3.4cqw rgba(1,107,252,.34);}
.viz5-source::after{content:"";position:absolute;inset:-.44cqw;border-radius:1.6cqw;background:var(--vl-grad);filter:blur(1.75cqw);opacity:.34;z-index:-1;}
.viz5-disc{width:4.6cqw;height:4.6cqw;margin:0 auto .9cqw;border-radius:50%;display:grid;place-items:center;background:rgba(1,107,252,.12);border:1px solid rgba(37,246,183,.4);}
.viz5-disc img{width:2.6cqw;height:2.6cqw;}
.viz5-source b{font-family:var(--brand-font-display);font-weight:700;font-size:max(.7rem,1.125cqw);display:block;color:var(--color-text);}
.viz5-source span{display:block;font-size:max(.58rem,.78cqw);color:var(--color-text-muted);margin-top:.3cqw;}
.viz5-source .viz5-tag{display:inline-block;margin-top:.75cqw;font-size:max(.5rem,.66cqw);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#02122e;background:linear-gradient(135deg,#19c9cd 0%,#25F6B7 100%);padding:.34cqw .7cqw;border-radius:999px;white-space:nowrap;}

.viz5-station{position:absolute;top:52%;transform:translate(-50%,-50%);width:11.5cqw;z-index:4;text-align:center;border-radius:1cqw;padding:1.125cqw .875cqw;
  background:rgba(16,22,34,.92);backdrop-filter:blur(3px);border:1px solid rgba(37,246,183,.26);box-shadow:0 .75cqw 1.75cqw rgba(0,0,0,.5);}
.viz5-station .viz5-ico{width:3.25cqw;height:3.25cqw;margin:0 auto .7cqw;border-radius:.8cqw;display:grid;place-items:center;background:rgba(1,107,252,.10);border:1px solid rgba(1,107,252,.24);}
.viz5-station .viz5-ico img{width:1.875cqw;height:1.875cqw;}
.viz5-station b{font-family:var(--brand-font-display);font-weight:700;font-size:max(.65rem,1cqw);display:block;color:var(--color-text);}
.viz5-station span{display:block;font-size:max(.55rem,.75cqw);color:var(--color-text-muted);margin-top:.25cqw;line-height:1.35;}
.viz5-station .viz5-same{display:inline-block;margin-top:.6cqw;font-size:max(.5rem,.66cqw);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-turquoise);background:rgba(37,246,183,.10);border:1px solid rgba(37,246,183,.28);padding:.2cqw .55cqw;border-radius:999px;}

.viz5-packet{position:absolute;top:52%;left:12%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:.44cqw;padding:.44cqw .75cqw;border-radius:999px;
  background:var(--vl-grad);color:#02122e;font-family:var(--brand-font-display);font-weight:700;font-size:max(.6rem,.78cqw);box-shadow:0 0 1.6cqw rgba(37,246,183,.6);}
.viz5-dot{width:.56cqw;height:.56cqw;border-radius:50%;background:#02122e;opacity:.7;}

.viz5-claim{position:absolute;bottom:6%;left:0;width:100%;text-align:center;z-index:5;font-family:var(--brand-font-display);font-weight:700;font-size:max(.85rem,1.375cqw);color:var(--color-text);text-shadow:0 4px 20px rgba(0,0,0,.7);padding-inline:1rem;}
.viz5-claim b{color:var(--vl-turquoise);}

/* ---- animations (fire when .viz5-stage gets .visible) ---- */
@keyframes viz5FadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes viz5Pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes viz5Draw{to{stroke-dashoffset:0}}
@keyframes viz5Travel{0%{left:12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:90%;opacity:0}}

/* initial hidden states */
.viz5-stage .viz5-head,.viz5-stage .viz5-nodup,.viz5-stage .viz5-claim,
.viz5-stage .viz5-source,.viz5-stage .viz5-station,.viz5-stage .viz5-packet{opacity:0;}

/* on reveal */
.viz5-stage.visible .viz5-head{animation:viz5FadeDown .9s .1s both;}
.viz5-stage.visible .viz5-nodup{animation:viz5FadeDown .8s .5s both;}
.viz5-stage.visible .viz5-source{animation:viz5Pop .7s .5s both;}
.viz5-stage.visible .viz5-line{animation:viz5Draw 1.1s .8s both;}
.viz5-stage.visible .viz5-station{animation:viz5Pop .6s var(--d,0s) both;}
.viz5-stage.visible .viz5-packet{animation:viz5Travel 3.6s 1.6s infinite;}

/* mobile / reduced-motion fallback: static composite */
.viz5-mobile{display:none;width:100%;height:auto;border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:0 30px 80px rgba(0,0,0,.45);}
@media (max-width:980px){
  .viz5-stage{display:none;}
  .viz5-mobile{display:block;}
}
@media (prefers-reduced-motion:reduce){
  .viz5-stage{display:none;}
  .viz5-mobile{display:block;}
}