/* 26 · «Gu reparte los leads entre tu equipo»: Gu en escena, los modos como texto sobre una línea,
 * y cada lead viaja por una línea curva (con la luz de los botones del hero) hasta la fila del asesor. Sin tarjetas. */
.eqx { position: relative; }
.eqx::before { content: ""; position: absolute; inset: 10% 0 0; background: radial-gradient(40% 50% at 28% 62%, var(--k7f77dd-1), transparent 70%); pointer-events: none; }
.eqx-h { margin: 0 auto; max-width: 18ch; text-align: center; font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.eqx-sub { margin: 18px auto 0; max-width: 54ch; text-align: center; color: var(--muted); font-size: 17.5px; text-wrap: balance; }

/* modos: texto sobre una sola línea; el activo lleva la línea viva debajo */
.eqx-modos { position: relative; display: flex; justify-content: center; gap: 4px 30px; flex-wrap: wrap; margin: 52px auto 0; max-width: 900px; border-bottom: 1px solid var(--line); }
.eqx-op { all: unset; position: relative; cursor: pointer; padding: 12px 2px 14px; font-size: 15px; font-weight: 600; color: var(--dim); transition: color .3s; }
.eqx-op:hover { color: var(--kc3c6cc); }
.eqx-op:focus-visible { outline: 2px solid var(--brand-l); outline-offset: 2px; border-radius: 4px; }
.eqx-op[aria-checked="true"] { color: var(--fg); }
.eqx-op .luz-l { bottom: -1px; }
.eqx-op[aria-checked="true"] .luz-l { opacity: 1; animation: barre 3.2s linear infinite; }
.eqx-modo-d { margin: 18px auto 0; max-width: 62ch; min-height: 3.2em; text-align: center; color: var(--muted); font-size: 15.5px; text-wrap: balance; }

/* escena: Gu a la izquierda, asesores a la derecha, las rutas en medio */
.eqx-escena { position: relative; display: grid; grid-template-columns: minmax(0, 330px) 230px minmax(0, 1fr); align-items: center; margin-top: 28px; }
.eqx-ases { margin-left: clamp(60px, 8vw, 120px) !important; }
.eqx-rutas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.eqx-rutas .base { fill: none; stroke: var(--kffffff-07); stroke-width: 1; }
.eqx-rutas .viva { fill: none; stroke: url(#eqxLuz); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--k7f77dd-8)); opacity: 0; }
.eqx-gu { position: relative; }
.eqx-gu img { display: block; width: 100%; height: auto; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
/* el lead que acaba de escribir, a la altura de la mano de Gu */
.eqx-entra { position: relative; margin-top: -4%; min-height: 66px; padding: 12px 0 12px 16px; border-left: 1px solid var(--line2); }
.eqx-entra b { display: block; font-size: 16px; font-weight: 700; }
.eqx-entra small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.eqx-entra .in { animation: eqxIn .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes eqxIn { from { opacity: 0; transform: translateY(8px); } }
.eqx-chip { position: absolute; left: 0; top: 0; z-index: 3; padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--cta-fg); background: var(--cta-fill); box-shadow: 0 0 0 1px var(--k7f77dd-55), 0 6px 22px -6px var(--k7f77dd-8); pointer-events: none; will-change: transform; }

/* asesores: filas sobre líneas */
.eqx-ases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.eqx-as { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.eqx-as .luz-l { bottom: -1px; }
.eqx-as.llega .luz-l { animation: barreUna 1.3s cubic-bezier(.4, 0, .2, 1) both; }
.eqx-av { width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--cta-fg);
  border: 1.5px solid transparent; animation: giraBorde 5s linear infinite;
  background:
    conic-gradient(from var(--ang), rgb(var(--t1) / .22), transparent 30%, rgb(var(--t2) / .1) 55%, transparent 80%, rgb(var(--t1) / .22)) padding-box,
    linear-gradient(var(--cta-fill), var(--cta-fill)) padding-box,
    conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.eqx-as:nth-child(2) .eqx-av { animation-delay: -1.7s; } .eqx-as:nth-child(3) .eqx-av { animation-delay: -3.4s; }
.eqx-as.llega .eqx-av { animation-duration: 1.4s; }
.eqx-sin .eqx-av { animation: none; background: none; border: 1px dashed var(--line2); color: var(--muted); }
.eqx-as b { font-size: 17px; font-weight: 700; }
.eqx-sin b { color: var(--muted); }
.eqx-ls { grid-column: 2; min-height: 1.4em; font-size: 13.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqx-ls span { color: var(--kb9bcc3); }
.eqx-ls em { font-style: normal; color: var(--muted); }
.eqx-n { grid-row: 1 / 3; grid-column: 3; font-family: var(--disp); font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--k3a3d45); font-variant-numeric: tabular-nums; transition: color .4s; }
.eqx-as.tiene .eqx-n { color: var(--fg); }
.eqx-guardia { grid-column: 3; margin-left: clamp(60px, 8vw, 120px) !important; margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .eqx-modos { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; margin-top: 36px; }
  .eqx-op { white-space: nowrap; }
  .eqx-escena { grid-template-columns: 120px minmax(0, 1fr); row-gap: 8px; column-gap: 12px; }
  .eqx-ases { grid-column: 1 / -1; margin-left: 0 !important; }
  .eqx-rutas { display: none; }
  .eqx-entra { margin-top: 0; }
  .eqx-guardia { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .eqx-entra .in, .eqx-av { animation: none; } }