/* Efectos de la portada de winclus.com (estilo «Mixpanel» con los colores de Winclus).
   Tres piezas, todas con versión quieta:
   1. .fam   — las seis ayudas se unen en Winclus (cables con paquetes de luz).
   2. .rec   — recorrido: una ventana de Winclus fija que cambia mientras bajas.
   3. .tub   — un clic por dentro: el diagrama se arma con el scroll.
   Sin JavaScript, con «reducir movimiento», con el modo calma o el texto agrandado del widget, o en
   pantallas pequeñas, se ve la lista de pasos (la sección no lleva la clase «vivo»).
   El texto que ve todo el mundo cumple 7:1; los dibujos van con aria-hidden y la lista los explica. */

:root{
  --ef-azul:#2F4FD8; --ef-teal:#1AA89A; --ef-verde:#34C26B; --ef-morado:#6B4FC2;
  --ef-amarillo:#F2B705; --ef-menta:#8FD9C4; --ef-navy:#101F3D;
  --ef-noche:#0B1630; --ef-noche2:#122142; --ef-tenue:#B4C0DB;
}

.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- rejilla de líneas finas, como en Mixpanel ---------- */
.rejilla{position:relative;background:#FAFBFD;border-top:1px solid var(--linea)}
.rejilla::before,.rejilla::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--linea);pointer-events:none}
.rejilla::before{left:max(20px,calc(50% - 560px))}
.rejilla::after{right:max(20px,calc(50% - 560px))}
.antetitulo{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#2743B4;margin:0 0 .6em}
.intro.centrada{margin-inline:auto;text-align:center}

/* ---------- rayas de color (el sello de Mixpanel) con la paleta de Winclus ---------- */
.rayas{background:
  linear-gradient(180deg,rgba(250,251,253,1) 0%,rgba(250,251,253,0) 34%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0,rgba(255,255,255,0) 6.25%),
  linear-gradient(90deg,#8FA2F0 0%,var(--ef-azul) 18%,var(--ef-morado) 38%,#3B8FD0 56%,var(--ef-teal) 74%,var(--ef-verde) 90%,var(--ef-menta) 100%)}

/* ======================================================================
   1. Las seis ayudas se unen en Winclus
   ====================================================================== */
.fam{padding:80px 0 88px}
.fam-escena{position:relative;margin:8px auto 0;max-width:1000px;aspect-ratio:1000/540;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(16,31,61,.55),0 0 0 1px rgba(16,31,61,.06)}
.fam-fondo{position:absolute;inset:0}
.fam-fondo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(55% 60% at 50% 78%,rgba(11,22,48,.78) 0%,rgba(11,22,48,.35) 55%,rgba(11,22,48,0) 80%),
  radial-gradient(40% 50% at 8% 10%,rgba(143,217,196,.55),transparent 70%),
  radial-gradient(40% 45% at 95% 95%,rgba(242,183,5,.32),transparent 70%)}
.fam-cables{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fam-cables path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.fam-cables path:nth-of-type(2){transition-delay:.12s}.fam-cables path:nth-of-type(3){transition-delay:.24s}
.fam-cables path:nth-of-type(4){transition-delay:.36s}.fam-cables path:nth-of-type(5){transition-delay:.48s}
.fam-cables path:nth-of-type(6){transition-delay:.6s}
.fam-cables circle{fill:#fff;opacity:0;filter:drop-shadow(0 0 5px rgba(255,255,255,.95))}
/* Solo con JavaScript empieza escondido y se arma al verlo; sin él, todo se ve desde el principio. */
.fam.js:not(.visto):not(.quieta) .fam-cables path{stroke-dashoffset:1}
.fam-lista{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.fam-lista li{position:absolute;top:7.4%;width:12.5%;left:calc(var(--x) * 1%);height:25.5%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border-radius:20px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 30px -12px rgba(11,22,48,.45),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ef-navy);font-weight:600;font-size:clamp(.72rem,1.2vw,.9rem);line-height:1.2;padding:8px 6px;
  transition:opacity .6s ease var(--d),transform .6s cubic-bezier(.2,.8,.2,1) var(--d)}
.fam-lista svg{width:clamp(26px,3.4vw,38px);height:clamp(26px,3.4vw,38px);color:var(--c);flex:none}
.fam.js:not(.visto):not(.quieta) .fam-lista li{opacity:0;transform:translateY(14px)}
.fam-centro{position:absolute;left:50%;top:79%;width:15.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#3554E0 0%,var(--ef-azul) 30%,var(--ef-morado) 75%,#4A3596 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 50px 4px rgba(47,79,216,.55),inset 0 2px 0 rgba(255,255,255,.35)}
.fam-centro img{width:56%;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.fam-centro::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid rgba(255,255,255,.55);opacity:0}
.fam-centro.late::after{animation:fam-late .9s ease-out}
@keyframes fam-late{0%{opacity:.9;transform:scale(.86)}100%{opacity:0;transform:scale(1.12)}}
.fam-pie{margin:26px auto 0;max-width:40rem;text-align:center;color:var(--texto2)}
@media (max-width:760px){
  .fam-escena{aspect-ratio:auto;padding:22px 16px 26px}
  .fam-cables{display:none}
  .fam-lista{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .fam-lista li{position:static;width:auto;height:auto;min-height:104px;font-size:.85rem}
  .fam-centro{position:relative;left:auto;top:auto;transform:none;margin:22px auto 0;width:104px}
  .fam-centro::before{content:"";position:absolute;left:50%;top:-22px;height:22px;width:2px;background:rgba(255,255,255,.8)}
}
@media (max-width:400px){.fam-lista{grid-template-columns:repeat(2,1fr)}}

/* ======================================================================
   2. Recorrido: la ventana de Winclus que cambia al bajar
   ====================================================================== */
.rec{padding:80px 0 0}
.rec .intro{margin-bottom:28px}
/* Versión quieta (por defecto): tarjetas con los seis pasos */
.rec-lista{list-style:none;margin:0 auto;padding:0 0 80px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rec-lista li{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:22px 24px;border-top:4px solid var(--c)}
.rec-lista .n{font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ct)}
.rec-lista h3{margin:.35em 0 .3em;white-space:pre-line}
.rec-lista p{margin:0;color:var(--texto2)}
@media (max-width:700px){.rec-lista{grid-template-columns:1fr}}
.rec-escena{display:none}

/* Versión viva */
.rec.vivo .rec-lista{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rec.vivo .rec-escena{display:block;position:relative;height:calc(6 * 92vh + 40vh)}
.rec-fija{position:sticky;top:72px;height:calc(100vh - 72px);display:flex;align-items:center;overflow:hidden}
.rec-rayas{position:absolute;left:0;right:44%;top:10%;bottom:-6%;opacity:.95;
  -webkit-mask:radial-gradient(62% 64% at 55% 56%,#000 30%,transparent 72%);mask:radial-gradient(62% 64% at 55% 56%,#000 30%,transparent 72%)}
.rec-rejilla{position:relative;width:min(1120px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:center}

.rec-ventana{--ac:var(--ef-teal);position:relative;border-radius:20px;overflow:hidden;color:#E8EDF8;
  background:linear-gradient(160deg,var(--ef-noche2) 0%,var(--ef-noche) 60%);
  border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);
  box-shadow:0 50px 100px -50px var(--ac),0 30px 60px -30px rgba(11,22,48,.65);
  transition:border-color .7s ease,box-shadow .7s ease;font-size:.78rem}
.rec-barra{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.rec-barra img{width:18px;height:18px}
.rec-barra b{font-weight:600;color:#fff}
.rec-miga{color:var(--ef-tenue);font-family:Consolas,"Cascadia Mono",monospace;font-size:.72rem}
.rec-vivo{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--ef-tenue);font-size:.7rem}
.rec-vivo i,.rec-pt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac);transition:background .5s}
.rec-cuerpo{display:flex;height:min(440px,calc(100vh - 290px));min-height:330px}
.rec-carril{width:140px;flex:none;display:flex;flex-direction:column;gap:4px;padding:10px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.rec-carril span{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:999px;color:var(--ef-tenue);transition:background .5s,color .5s,box-shadow .5s}
.rec-carril span svg{width:15px;height:15px;flex:none}
.rec-carril span.on{background:color-mix(in srgb,var(--ac) 18%,transparent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent)}
.rec-carril span.on svg{color:var(--ac)}
.rec-contenido{position:relative;flex:1;min-width:0}
.rec-panel{position:absolute;inset:0;padding:18px;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.rec-panel.activo{opacity:1;visibility:visible;transition:opacity .45s ease}
.rec-foco{position:absolute;left:0;top:0;border-radius:14px;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ac) 70%,transparent),0 0 34px -4px var(--ac),0 0 0 9999px rgba(5,10,24,.42);
  transition:transform .26s ease-out,width .26s ease-out,height .26s ease-out,opacity .26s}
.rec-estado{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  font-family:Consolas,"Cascadia Mono",monospace;font-size:.72rem}
.rec-estado span:first-child{color:#E8EDF8;display:flex;align-items:center;gap:8px}
.rec-estado span:last-child{margin-left:auto;color:var(--ef-tenue)}

/* columna de texto */
.rec-segmentos{display:flex;gap:6px;margin-bottom:28px}
.rec-segmentos div{flex:1;height:26px;display:flex;align-items:center;cursor:pointer}
.rec-segmentos div span{display:block;width:100%;height:4px;border-radius:99px;background:#DCE3EC;overflow:hidden}
.rec-segmentos div i{display:block;height:100%;width:0;border-radius:99px;background:var(--ac2,#2743B4)}
.rec-textos{display:grid}
.rec-texto{grid-area:1/1;opacity:0;transform:translateY(16px);visibility:hidden;
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility 0s linear .5s}
.rec-texto.activo{opacity:1;transform:none;visibility:visible;transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.rec-texto .n{font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ct)}
.rec-texto .t{display:block;font-size:clamp(1.8rem,3vw,2.55rem);font-weight:700;line-height:1.12;margin:.3em 0 .45em;white-space:pre-line;color:var(--ef-navy)}
.rec-texto p{color:var(--texto2);font-size:1.05rem;max-width:28rem}
.rec-sigue{display:flex;align-items:center;gap:8px;color:var(--texto2);font-size:.9rem;margin-top:12px}
.rec-sigue svg{width:16px;height:16px;animation:rec-baja 1.6s ease-in-out infinite}
@keyframes rec-baja{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* piezas de la maqueta */
.rp-etq{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ef-tenue);margin-bottom:6px}
.rp-campo{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:10px;padding:8px 11px;color:#E8EDF8}
.rp-dos{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;height:100%}
.rp-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.rp-caja{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:14px;padding:12px}
.rp-barra{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rp-barra i{display:block;height:100%;width:0;border-radius:99px;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.rp-num{font-size:1.6rem;font-weight:700;color:#fff;line-height:1.1}
.rp-nota{display:flex;align-items:center;gap:7px;color:#D9F5EE;font-size:.74rem}
.rp-nota::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ef-verde);box-shadow:0 0 8px var(--ef-verde);flex:none}
.rp-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-weight:600;font-size:.72rem;
  background:color-mix(in srgb,var(--ac) 22%,transparent);color:#fff;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent)}
.rp-sel{display:grid;gap:8px}
.rp-sel div{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:12px;padding:9px 12px;transition:all .45s ease}
.rp-sel div b{display:block;font-weight:600;color:#E8EDF8}
.rp-sel div small{color:var(--ef-tenue);font-size:.68rem}
.rp-sel div.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);box-shadow:0 0 24px -8px var(--ac)}
.rp-sel div.on b{color:#fff}
.rp-sel.cuatro{grid-template-columns:1fr 1fr}

/* 1 · cámara */
.rp-video{position:relative;height:100%;border-radius:14px;overflow:hidden;background:radial-gradient(80% 80% at 50% 40%,#1B2C55 0%,#0A1328 100%);border:1px solid rgba(255,255,255,.1)}
.rp-video svg{position:absolute;inset:6% 10%;width:80%;height:88%}
.rp-video .silueta{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.2}
.rp-video .pto{fill:var(--ac);opacity:0;transition:opacity .3s}
.rp-video .pto.on{opacity:.95}
.rp-video .rp-chip{position:absolute;left:12px;bottom:12px}
.rp-rec{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:6px;font-size:.66rem;color:#E8EDF8}
.rp-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF6B6B}
/* 2 · puntero */
.rp-escritorio{position:relative;height:100%;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#21386E,#132552);border:1px solid rgba(255,255,255,.1)}
.rp-ventanita{position:absolute;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.rp-ventanita::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:5px;border-radius:9px;background:rgba(255,255,255,.18)}
.rp-boton{position:absolute;border-radius:999px;padding:5px 12px;font-size:.7rem;font-weight:600;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);transition:all .3s}
.rp-boton.on{background:color-mix(in srgb,var(--ac) 32%,#0B1630);border-color:var(--ac);color:#fff;box-shadow:0 0 18px var(--ac)}
.rp-cursor{position:absolute;width:22px;height:22px;margin:-2px 0 0 -2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:2}
.rp-estela{position:absolute;width:56px;height:56px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%);z-index:1}
/* 3 · clics */
.rp-ojos{display:flex;justify-content:center;gap:26px;padding:16px 0 10px}
.rp-ojo{width:64px;height:38px;border-radius:50%;background:#fff;position:relative;overflow:hidden;transform-origin:center;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.rp-ojo::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#4F6BE8,#1B2C66 70%)}
.rp-dialogo{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:14px;padding:12px 14px}
.rp-dialogo p{margin:0 0 10px;color:#E8EDF8}
.rp-dialogo .rp-boton{position:static;display:inline-block}
.rp-aviso{display:inline-flex;margin-left:10px;vertical-align:middle}
/* 4 · escribir */
.rp-texto{min-height:58px;font-size:.95rem;color:#fff;line-height:1.45}
.cursorcito::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--ac);animation:rp-guino 1s steps(2) infinite}
@keyframes rp-guino{50%{opacity:0}}
.rp-sugs{display:flex;gap:8px}
.rp-sugs span{border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#E8EDF8;transition:all .3s}
.rp-sugs span.on{background:color-mix(in srgb,var(--ac) 32%,#0B1630);border-color:var(--ac);color:#fff;box-shadow:0 0 18px -2px var(--ac)}
.rp-teclado{display:grid;gap:5px}
.rp-teclado div{display:flex;gap:5px;justify-content:center}
.rp-teclado kbd{font:inherit;flex:1;max-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#E8EDF8;font-size:.72rem;transition:background .15s,box-shadow .15s}
.rp-teclado kbd.esp{max-width:none;flex:5}
.rp-teclado kbd.on{background:color-mix(in srgb,var(--ac) 32%,#0B1630);border-color:var(--ac);color:#fff;box-shadow:0 0 14px var(--ac)}
/* 5 · tablero */
.rp-frase{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:12px;padding:6px 10px}
.rp-frase span{border-radius:8px;padding:4px 10px;font-weight:600;color:#0B1630;background:var(--c)}
.rp-onda{margin-left:auto;display:flex;align-items:center;gap:3px;color:var(--ef-tenue);font-size:.7rem}
.rp-onda i{display:block;width:3px;height:10px;border-radius:3px;background:var(--ac);animation:rp-onda .8s ease-in-out infinite}
.rp-onda i:nth-child(2){animation-delay:.12s}.rp-onda i:nth-child(3){animation-delay:.24s}.rp-onda i:nth-child(4){animation-delay:.36s}
@keyframes rp-onda{0%,100%{height:5px}50%{height:16px}}
.rp-tablero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.rp-tablero div{border-radius:14px;padding:20px 6px;text-align:center;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:2px solid var(--c);transition:all .35s}
.rp-tablero div svg{display:block;width:26px;height:26px;margin:0 auto 6px;color:var(--c)}
.rp-tablero div.on{background:var(--c);color:#0B1630;box-shadow:0 0 26px -4px var(--c);transform:translateY(-2px)}
.rp-tablero div.on svg{color:#0B1630}
/* 6 · perfil */
.rp-filas{display:grid;gap:8px}
.rp-filas div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);padding:6px 2px}
.rp-filas div span{color:var(--ef-tenue)}
.rp-filas div b{font-weight:600;color:#fff}
.rp-archivo{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--ac) 16%,transparent);border:1px solid color-mix(in srgb,var(--ac) 50%,transparent)}
.rp-archivo svg{width:26px;height:26px;color:var(--ac);flex:none}
.rp-archivo b{display:block;color:#fff;font-family:Consolas,"Cascadia Mono",monospace}
.rp-archivo small{color:var(--ef-tenue)}
.rp-equipo{display:flex;align-items:center;gap:10px;border:1px dashed rgba(255,255,255,.22);border-radius:12px;padding:12px;color:#E8EDF8}
.rp-equipo svg{width:28px;height:28px;color:var(--ef-tenue);flex:none}

/* ======================================================================
   3. Un clic de Winclus, por dentro
   ====================================================================== */
.tub{padding:80px 0}
.tub-lista{list-style:none;margin:0 auto;padding:0;max-width:44rem;display:grid;gap:12px}
.tub-lista li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:16px 18px}
.tub-lista .n{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--c)}
.tub-lista b{display:block;color:var(--ef-navy)}
.tub-lista span{color:var(--texto2)}
.tub-vista{display:none}
.tub .intro{margin-bottom:24px}
.tub-escena{position:relative}

.tub.vivo{padding:0}
.tub.vivo .tub-lista,.tub.armado .tub-lista{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tub.vivo .tub-vista,.tub.armado .tub-vista{display:block}
.tub.vivo .tub-escena{height:calc(6 * 78vh + 60vh)}
.tub-fija{display:flex;flex-direction:column;justify-content:center}
.tub.vivo .tub-fija{position:sticky;top:72px;height:calc(100vh - 72px);overflow:hidden}
.tub.vivo .intro-fija{margin:0 auto 14px}
.tub.vivo .intro-fija h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.2em}
.tub.vivo .intro-fija p:not(.antetitulo){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tub-pasos{display:flex;align-items:center;gap:6px;max-width:760px;margin:0 auto}
.tub-pasos span{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;padding:7px 6px;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A5672;border:1px solid var(--linea);background:#fff;transition:all .45s}
.tub-pasos span.hecho{color:var(--ct);border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 8%,#fff)}
.tub-pasos span.vivo{color:#fff;background:var(--ct);border-color:var(--ct);box-shadow:0 8px 22px -8px var(--c)}
.tub-pasos i{flex:none;width:10px;height:1px;background:var(--linea)}
.tub-progreso{max-width:760px;height:4px;margin:10px auto 0;border-radius:99px;background:#E4E9F1;overflow:hidden}
.tub-progreso i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ef-azul),var(--ef-morado),var(--ef-teal),var(--ef-verde))}
.tub-leyenda{text-align:center;color:var(--texto2);margin:12px 0 0;min-height:1.6em}
.tub-diagrama{position:relative;margin:10px auto 0;aspect-ratio:1000/620;width:min(900px,calc((100vh - 330px) * 1.613),100%)}
.tub.armado .tub-diagrama{width:min(900px,100%)}
.tub-diagrama>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tub-diagrama path{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.tub-diagrama circle{opacity:0}
.tub-nodo{position:absolute;border-radius:16px;background:#fff;border:1px solid var(--linea);box-shadow:0 10px 30px -18px rgba(16,31,61,.35);
  transition:border-color .5s,box-shadow .5s,background .5s;color:var(--ef-navy);font-size:clamp(.6rem,1.05vw,.78rem);overflow:hidden}
.tub-nodo.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 18px 40px -16px var(--c)}
.tn-cap{font-size:.86em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#4A5672;margin-bottom:.5em}
.tub-nodo.on .tn-cap{color:var(--ct)}
.tn-pad{padding:.9em 1em}
.tn-fila{display:flex;align-items:center;gap:.5em;padding:.32em .5em;border-radius:8px;color:#3F4B66}
.tn-fila.on{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--ef-navy);font-weight:600}
.tn-fila::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tn-puntos{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:.5em}
.tn-puntos i{display:block;aspect-ratio:1;border-radius:2px;background:var(--ef-teal);opacity:.12;transition:opacity .3s,transform .3s}
.tn-puntos i.on{opacity:.85}
.tn-chico{color:var(--ct);font-weight:600;margin-top:.5em}
.tub-motor{position:absolute;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;color:#fff;
  background:linear-gradient(160deg,#1A2C5C,var(--ef-navy));box-shadow:0 0 0 1px rgba(47,79,216,.4),0 24px 60px -18px var(--ef-azul);font-size:clamp(.62rem,1.05vw,.8rem)}
.tub-motor img{width:30%;height:auto}
.tub-motor b{font-size:1.15em}
.tub-motor small{color:#C9D3EA}
.tub-motor::before{content:"";position:absolute;inset:-18px;border-radius:30px;background:radial-gradient(circle,rgba(47,79,216,.28),transparent 68%);opacity:var(--halo,0);z-index:-1}
.tn-centro{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.25em;text-align:center}
.tn-centro svg{width:1.9em;height:1.9em;color:var(--ct)}
.tn-centro b{font-weight:600}
.tn-centro small{color:#3F4B66}
.tub-nodo.on .tn-centro small{color:var(--ct);font-weight:600}
.tn-pantalla{border-radius:10px;border:1px solid var(--linea);background:#F3F6FA;padding:.8em;margin-bottom:.7em}
.tn-pantalla p{margin:0 0 .6em;color:#3F4B66;line-height:1.35}
.tn-boton{display:inline-block;border-radius:999px;padding:.35em 1em;font-weight:600;background:#fff;border:1px solid #9AA6BD;color:var(--ef-navy);transition:all .3s}
.tn-boton.on{background:var(--ef-navy);border-color:var(--ef-navy);color:#fff;box-shadow:0 0 0 4px rgba(26,168,154,.35)}
.tn-avisos{display:flex;gap:.5em;flex-wrap:wrap}
.tn-avisos span{border-radius:8px;padding:.3em .6em;font-weight:600;color:#0A5C54;background:#F0FAF8;border:1px solid #9ADCCF}
.tn-res{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 1.1em}
.tn-res small{font-size:.86em;letter-spacing:.1em;text-transform:uppercase;color:#4A5672}
.tn-res b{font-size:1.12em;margin-top:.25em;color:var(--ct)}

@media (prefers-reduced-motion:reduce){
  .rec-sigue svg,.rp-onda i,.cursorcito::after{animation:none}
  .fam-cables circle{display:none}
}