/* fullgtm flow diagram (#how). Adaptado del mecanismo de seldon-ai.com (inspeccionado 2026-07-28):
   SVG server-rendered + CSS puro, sin JS de runtime, sin GIF/video/canvas.
   Técnica: partículas por stroke-dasharray/dashoffset, pulso "breathe" en nodos activos,
   halo "glow" en el nodo de salida, y un panel tipo terminal con líneas que aparecen
   escalonadas (misma curva 0/6/14/88/100% que seldon, adaptada a 5 líneas / 8s).
   Adaptación propia (no es 1:1): seldon contrasta 2 caminos (barato vs caro); acá los 4
   sistemas corren en PARALELO y convergen en 1 entrega — no hay "camino malo" que mostrar. */

/* ---- Paso 1 (Onboard): queda como texto — es una sesión humana puntual, no el flujo continuo
   que muestra el diagrama. Reusa el círculo .snum existente, sin el grid de 3 columnas. ---- */
.how-onboard { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 40px; }
.how-onboard .snum { flex-shrink: 0; margin-bottom: 0; }
.how-onboard h3 { font-size: 17px; margin-bottom: 8px; }
.how-onboard p { font-size: 14px; color: var(--text-muted); line-height: 1.65; font-weight: 300; }

.how-result { max-width: 560px; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.how-result p { font-size: 15px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }

/* ---- Teaser del hero: mismo diagrama de #how, comprimido, MÁS el chip de señal (ver abajo).
   Reusa las clases .fd-* — cero CSS nuevo de mecánica para el diagrama en sí. El viewBox (340)
   queda cerca del ancho real del contenedor en los dos breakpoints (300-400px, escala 0.88-1.18x)
   — a diferencia de #how, acá un solo <text> SVG para "delivered" es seguro. ---- */
.hero-teaser { max-width: 400px; margin: 36px 0 0; position: relative; }
.hero-teaser .fd-svg { width: 100%; height: auto; display: block; overflow: visible; }
@media (max-width: 640px) {
  .hero-teaser { max-width: 300px; margin-top: 28px; }
}

/* ---- Chip de señal: rotula QUÉ dispara el flujo (v1 no tenía texto — "solo veo las rayitas
   moviéndose", feedback del operador viendo el sitio vivo). HTML, no SVG: el texto HTML no se
   achica con el viewBox del SVG, así que es seguro en cualquier ancho sin necesitar dos versiones.
   4 chips apilados en el MISMO lugar, cada uno visible una franja distinta de un ciclo de 8s
   (delays 0/2/4/6s) → rotan sin superponerse nunca, sin JS. */
.signal-chip {
  position: absolute; top: -6px; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px 4px 4px; font-family: var(--fb); font-size: 12px; font-weight: 500;
  color: var(--text); white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  opacity: 0; animation: fd-chip 8s ease-in-out infinite;
}
@keyframes fd-chip {
  0%, 100% { opacity: 0; transform: translateY(2px); }
  3% { opacity: 0; transform: translateY(2px); }
  8% { opacity: 1; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(0); }
  25% { opacity: 0; transform: translateY(-2px); }
}

/* Ícono por fuente de señal: LinkedIn es el logo REAL (mismo SVG + color de marca que
   integrations/logos/linkedin.svg — política ya establecida: identifica el producto, no
   insinúa alianza). Noticias/web/entregado son glifos propios en el mismo estilo lineal que
   .pico (stroke 1.4-1.5, currentColor) — no hay logo de marca para "una noticia" en general. */
.chip-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--text-muted);
}
.chip-icon svg { width: 12px; height: 12px; }
.chip-icon-brand { background: color-mix(in srgb, var(--bc) 14%, transparent); color: var(--bc); }
.chip-icon-brand svg { width: 13px; height: 13px; fill: currentColor; }
.chip-icon-ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }

@media (max-width: 640px) {
  .signal-chip { font-size: 11px; padding: 3px 10px 3px 3px; }
  .chip-icon { width: 18px; height: 18px; }
  .chip-icon svg { width: 11px; height: 11px; }
}

.fd { margin: 32px 0 8px; }
/* Dos SVG (desktop ancho / mobile vertical en grid 2x2) — un solo viewBox escalado a mobile
   encoge las etiquetas hasta ilegibles (mismo error de escala que ya se corrigió en el nav).
   Selector DOBLE (.fd-svg.fd-svg-mobile), no .fd-svg-mobile solo: con especificidad igual a
   la regla general .fd-svg{display:block} (más abajo en el archivo), esta perdía el cascade
   por orden de aparición — encontrado al ver las DOS versiones renderizadas a la vez. */
.fd-svg.fd-svg-mobile { display: none; }
@media (max-width: 640px) {
  .fd-svg.fd-svg-desktop { display: none; }
  .fd-svg.fd-svg-mobile { display: block; }
}

.fd-label {
  font-family: var(--fb); font-size: 13px; font-weight: 500; color: var(--text-muted);
  margin-bottom: 14px;
}
.fd-diagram {
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
}
.fd-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- Ejes / bordes estáticos ---- */
.fd-edge { fill: none; stroke: var(--border); stroke-width: 1.2; opacity: .8; }

/* ---- Partículas fluyendo (stroke-dasharray + dashoffset animado) ---- */
.fd-flow {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 2, 11; animation: fd-flow 1.6s linear infinite;
}
.fd-flow.fd-flow-out { animation: fd-flow-out 1.4s linear infinite; }
@keyframes fd-flow { 100% { stroke-dashoffset: -104; } }
@keyframes fd-flow-out { 100% { stroke-dashoffset: -104; } }

/* ---- Halo en el nodo de entrega (convergen los 4 sistemas) ---- */
.fd-glow {
  fill: none; stroke: var(--green); stroke-width: 4; opacity: 0;
  animation: fd-glow 3.6s ease-in-out infinite;
}
@keyframes fd-glow { 0%, 100% { opacity: 0; } 50% { opacity: .4; } }

/* ---- Pulso "breathe" en nodos activos (hub + 4 módulos + entrega) ----
   SOLO anima opacity — nunca agregar transform-box/transform-origin acá: el hub (rombo) ya
   trae su propio transform="rotate(...)" como atributo SVG, y combinarlo con esas propiedades
   CSS hace que Chromium reinterprete el origen de rotación en el espacio local del fill-box
   del rect (28x28) en vez del espacio global — el rombo termina renderizado ~400 unidades
   corrido de su posición real. Encontrado comparando getBoundingClientRect() del nodo contra
   su propia etiqueta, que sí quedaba en el lugar correcto. */
.fd-breathe {
  animation: fd-breathe 2.8s ease-in-out infinite;
}
@keyframes fd-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.fd-node-hub { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.fd-node-mod { fill: var(--bg); stroke: var(--text-muted); stroke-width: 1.4; }
.fd-node-out { fill: var(--green); }
.fd-dot-in { fill: var(--text-muted); }

.fd-lbl {
  font-family: var(--fb); font-size: 11px; font-weight: 500; fill: var(--text-muted);
}
.fd-lbl-out { fill: var(--green); font-weight: 600; }

/* ---- Panel tipo terminal (HTML, no SVG — el texto multi-idioma es más simple así) ---- */
.fd-panel {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--rl);
  padding: 0 0 14px; max-width: 460px;
}
.fd-panelbar {
  display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.fd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-dark, var(--border)); opacity: .6; }
.fd-lines { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 7px; }
.fd-line {
  font-family: 'DM Sans', monospace; font-size: 13px; color: var(--text-muted);
  opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fd-typein 8s ease-out infinite;
}
.fd-line-ok { color: var(--text); font-weight: 500; }
.fd-line-ok .fd-ok { color: var(--green); font-weight: 600; }
@keyframes fd-typein {
  0%, 6% { opacity: 0; }
  14% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
.fd-caret {
  display: inline-block; width: 6px; height: 13px; margin-left: 2px;
  background: var(--green); vertical-align: -2px;
  animation: fd-blink 1s steps(1) infinite;
}
@keyframes fd-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media (max-width: 640px) {
  .fd-panel { max-width: none; }
}

/* Progressive enhancement: sin motion, todo queda en su estado final LEGIBLE (nunca oculto) —
   mismo principio que fullgtm-motion.js y el resto del sitio. */
@media (prefers-reduced-motion: reduce) {
  .fd-flow, .fd-glow, .fd-breathe, .fd-line, .fd-caret, .signal-chip { animation: none !important; }
  .fd-glow { opacity: 0 !important; }
  .fd-breathe { opacity: 1 !important; }
  .fd-line { opacity: 1 !important; }
  .fd-caret { opacity: 1 !important; }
  /* los 4 chips están apilados en el mismo lugar — sin animación se solaparían los 4 a la vez.
     Se muestra solo el primero, legible y estático, en vez de 4 textos ilegibles superpuestos. */
  .signal-chip { opacity: 0 !important; transform: none !important; }
  .signal-chip:first-of-type { opacity: 1 !important; }
}

/* ═══ Stepper de pipeline (páginas de solución) ═══════════════════════════════
   Interacción sin framework: radio + `:checked ~` selecciona la etapa. Las 7 etapas viven
   TODAS en el DOM (bots-eye: un crawler las lee completas, el stepper SUMA contenido).
   El autoplay lo mueve fullgtm-motion.js; si no hay JS, sigue siendo cliqueable. */
.pl-wrap { position: relative; }
.pl-radio { position: absolute; opacity: 0; pointer-events: none; }

/* ---- TRACK del pipeline: nodos unidos por línea PUNTEADA, con un pulso que viaja ----
   Idea del operador (2026-07-28): las 7 pastillas se leían como una lista de etiquetas, no como
   un flujo. El track resuelve el hueco que la auditoría había marcado (ingrediente 2 de §8-bis:
   el movimiento tiene que llevar el argumento). Reusa el gesto del hero (punteado + partícula)
   pero en HTML/CSS, no SVG: así el texto no se achica con un viewBox y los nodos son `label`
   nativos (clic sin JS). El conector punteado usa el MISMO repeating-linear-gradient que ya
   existía en `.steps::before` de fullgtm.css — gesto del sistema, no invención nueva. */
.pl-track { display: flex; align-items: flex-start; margin-bottom: 26px; }
.pl-node {
  flex: 1 1 0; min-width: 0; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px;
}
/* conector: va del nodo anterior a éste, detrás del punto */
.pl-node + .pl-node::before {
  content: ""; position: absolute; top: 13px; right: 50%; left: -50%; height: 1px;
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0, var(--border) 4px, transparent 4px, transparent 10px);
}
/* pulso que VIAJA por el conector — sin JS, y solo hacia adelante (dirección = flujo) */
.pl-node + .pl-node::after {
  content: ""; position: absolute; top: 11px; left: -50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); opacity: 0;
  animation: pl-travel 2.4s linear infinite;
}
@keyframes pl-travel {
  0%   { transform: translateX(0);    opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .85; }
  100% { transform: translateX(100%); opacity: 0; }
}
.pl-node:nth-of-type(2)::after { animation-delay: 0s; }
.pl-node:nth-of-type(3)::after { animation-delay: .3s; }
.pl-node:nth-of-type(4)::after { animation-delay: .6s; }
.pl-node:nth-of-type(5)::after { animation-delay: .9s; }
.pl-node:nth-of-type(6)::after { animation-delay: 1.2s; }
.pl-node:nth-of-type(7)::after { animation-delay: 1.5s; }

.pl-dot {
  width: 27px; height: 27px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  transition: background .2s, border-color .2s, transform .2s;
}
.pl-dot-i {
  font-family: var(--fd); font-size: 12px; font-weight: 600; color: var(--text-muted);
  transition: color .2s;
}
.pl-node-t {
  font-family: var(--fb); font-size: 12px; font-weight: 500; color: var(--text-muted);
  text-align: center; line-height: 1.3; transition: color .2s;
}
.pl-node:hover .pl-dot { border-color: var(--text-faint); }

/* el nodo ACTIVO crece y toma el color de su tipo (las reglas por kind están más abajo) */
.pl-radio:nth-of-type(1):checked ~ .pl-track .pl-node:nth-of-type(1) .pl-dot,
.pl-radio:nth-of-type(2):checked ~ .pl-track .pl-node:nth-of-type(2) .pl-dot,
.pl-radio:nth-of-type(3):checked ~ .pl-track .pl-node:nth-of-type(3) .pl-dot,
.pl-radio:nth-of-type(4):checked ~ .pl-track .pl-node:nth-of-type(4) .pl-dot,
.pl-radio:nth-of-type(5):checked ~ .pl-track .pl-node:nth-of-type(5) .pl-dot,
.pl-radio:nth-of-type(6):checked ~ .pl-track .pl-node:nth-of-type(6) .pl-dot,
.pl-radio:nth-of-type(7):checked ~ .pl-track .pl-node:nth-of-type(7) .pl-dot {
  background: var(--accent); border-color: var(--accent); transform: scale(1.16);
}
.pl-radio:nth-of-type(1):checked ~ .pl-track .pl-node:nth-of-type(1) .pl-dot-i,
.pl-radio:nth-of-type(2):checked ~ .pl-track .pl-node:nth-of-type(2) .pl-dot-i,
.pl-radio:nth-of-type(3):checked ~ .pl-track .pl-node:nth-of-type(3) .pl-dot-i,
.pl-radio:nth-of-type(4):checked ~ .pl-track .pl-node:nth-of-type(4) .pl-dot-i,
.pl-radio:nth-of-type(5):checked ~ .pl-track .pl-node:nth-of-type(5) .pl-dot-i,
.pl-radio:nth-of-type(6):checked ~ .pl-track .pl-node:nth-of-type(6) .pl-dot-i,
.pl-radio:nth-of-type(7):checked ~ .pl-track .pl-node:nth-of-type(7) .pl-dot-i { color: #fff; }
.pl-radio:nth-of-type(1):checked ~ .pl-track .pl-node:nth-of-type(1) .pl-node-t,
.pl-radio:nth-of-type(2):checked ~ .pl-track .pl-node:nth-of-type(2) .pl-node-t,
.pl-radio:nth-of-type(3):checked ~ .pl-track .pl-node:nth-of-type(3) .pl-node-t,
.pl-radio:nth-of-type(4):checked ~ .pl-track .pl-node:nth-of-type(4) .pl-node-t,
.pl-radio:nth-of-type(5):checked ~ .pl-track .pl-node:nth-of-type(5) .pl-node-t,
.pl-radio:nth-of-type(6):checked ~ .pl-track .pl-node:nth-of-type(6) .pl-node-t,
.pl-radio:nth-of-type(7):checked ~ .pl-track .pl-node:nth-of-type(7) .pl-node-t {
  color: var(--text); font-weight: 600;
}

/* MÓVIL: el track se vuelve VERTICAL — 7 nodos en fila horizontal a 375px es ilegible
   (misma lección de escala del nav y de #how). Vertical lee igual de bien como pipeline. */
@media (max-width: 720px) {
  .pl-track { flex-direction: column; align-items: stretch; gap: 0; }
  .pl-node { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 7px 0; }
  .pl-node + .pl-node::before {
    top: -8px; bottom: auto; left: 13px; right: auto; width: 1px; height: 22px;
    background-image: repeating-linear-gradient(180deg,
      var(--border) 0, var(--border) 4px, transparent 4px, transparent 10px);
  }
  .pl-node + .pl-node::after {
    top: -8px; left: 11px; animation-name: pl-travel-v;
  }
  @keyframes pl-travel-v {
    0%   { transform: translateY(0);   opacity: 0; }
    12%  { opacity: .85; }
    88%  { opacity: .85; }
    100% { transform: translateY(22px); opacity: 0; }
  }
  .pl-node-t { text-align: left; font-size: 13px; }
}

.pl-panels { position: relative; min-height: 150px; }
.pl-panel {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
  border-left: 2px solid var(--accent); padding: 2px 0 2px 20px; max-width: 620px;
}
.pl-radio:nth-of-type(1):checked ~ .pl-panels .pl-panel:nth-of-type(1),
.pl-radio:nth-of-type(2):checked ~ .pl-panels .pl-panel:nth-of-type(2),
.pl-radio:nth-of-type(3):checked ~ .pl-panels .pl-panel:nth-of-type(3),
.pl-radio:nth-of-type(4):checked ~ .pl-panels .pl-panel:nth-of-type(4),
.pl-radio:nth-of-type(5):checked ~ .pl-panels .pl-panel:nth-of-type(5),
.pl-radio:nth-of-type(6):checked ~ .pl-panels .pl-panel:nth-of-type(6),
.pl-radio:nth-of-type(7):checked ~ .pl-panels .pl-panel:nth-of-type(7) {
  opacity: 1; visibility: visible; transform: translateY(0); position: relative;
}
.pl-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pl-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent);
}
.pl-ico svg { width: 17px; height: 17px; }
.pl-panel h3 { font-size: 18px; margin: 0; }
.pl-panel p { font-size: 15px; color: var(--text-muted); line-height: 1.7; font-weight: 300; margin: 0; }
.pl-meta {
  margin-top: 12px; font-family: var(--fb); font-size: 12px; font-weight: 500;
  color: var(--text-faint); letter-spacing: .02em;
}
.pl-hint {
  margin-top: 20px; font-size: 12px; color: var(--text-faint);
  display: flex; align-items: center; gap: 7px;
}
.pl-hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: fd-breathe 2.4s ease-in-out infinite;
}
/* Cuando el usuario toma el control, el JS marca el wrap y el aviso de "reproduciendo" se va. */
.pl-wrap[data-pl-user] .pl-hint { display: none; }

@media (max-width: 640px) {
  .pl-rail { gap: 6px; }
  .pl-tab { padding: 6px 11px 6px 6px; }
  .pl-tab-t { font-size: 12px; }
  .pl-panels { min-height: 210px; }
  .pl-panel { padding-left: 14px; }
}

/* STAGGERING del contenido del panel — el detalle que más "caro" se ve por menos esfuerzo
   (design-direction §8-bis, ingrediente 4): al cambiar de etapa, el encabezado, el cuerpo y el
   meta NO entran a la vez, sino escalonados ~90 ms. Es un `animation-delay` por hijo y es el
   grueso de la sensación premium. Solo corre sobre el panel ACTIVO (el selector de abajo). */
/* El retardo viaja en una CUSTOM PROPERTY, no en una regla `animation-delay` aparte.
   Motivo (bug real, cazado por test): el shorthand `animation:` de la regla `:checked` tiene
   especificidad altísima y RESETEA animation-delay a 0 — unas reglas `.pl-panel > *:nth-child(N)
   { animation-delay: … }` quedaban pisadas y los 3 delays salían 0s (cero stagger, en silencio).
   Una var se resuelve desde el propio elemento y sobrevive al shorthand.
   `both` y no `backwards`: con backwards el elemento VUELVE a su estilo base al terminar — y el
   base es opacity:0, así que el panel quedaba invisible para siempre. */
.pl-panel > *:nth-child(1) { --pl-d: .02s; }
.pl-panel > *:nth-child(2) { --pl-d: .11s; }
.pl-panel > *:nth-child(3) { --pl-d: .20s; }
.pl-radio:nth-of-type(1):checked ~ .pl-panels .pl-panel:nth-of-type(1) > *,
.pl-radio:nth-of-type(2):checked ~ .pl-panels .pl-panel:nth-of-type(2) > *,
.pl-radio:nth-of-type(3):checked ~ .pl-panels .pl-panel:nth-of-type(3) > *,
.pl-radio:nth-of-type(4):checked ~ .pl-panels .pl-panel:nth-of-type(4) > *,
.pl-radio:nth-of-type(5):checked ~ .pl-panels .pl-panel:nth-of-type(5) > *,
.pl-radio:nth-of-type(6):checked ~ .pl-panels .pl-panel:nth-of-type(6) > *,
.pl-radio:nth-of-type(7):checked ~ .pl-panels .pl-panel:nth-of-type(7) > * {
  animation: pl-stagger .42s ease-out var(--pl-d, 0s) both;
}
@keyframes pl-stagger {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-panel { transition: none !important; }
  .pl-hint::before { animation: none !important; }
  /* sin stagger: se apaga la animación. El contenido NO arranca en opacity:0 (esa era la
     causa del panel invisible), así que queda legible sin necesitar un !important. */
  .pl-panel > * { animation: none !important; }
}

/* ═══ Jerarquía por TIPO de etapa (design-direction §8-bis, ingrediente 2) ═══════════════
   Auditoría 2026-07-28: al mirar los 7 estados JUNTOS quedó claro que se veían todos iguales,
   y no lo son. Las etapas 2 y 4 son COMPUERTAS que DETIENEN la corrida — es el argumento de
   venta más fuerte del pipeline ("el sistema se niega a avanzar si no está seguro") y era
   completamente invisible. La 7 es el resultado, y tampoco se leía como cierre.

   Sin inventar colores de marca: se usan los 3 tokens que ya existen, con semántica clara.
     · --accent (azul)  = el sistema procesando
     · --text  (negro)  = una compuerta, un límite duro y definitivo
     · --green          = el resultado entregado (mismo verde que "delivered" en el hero)
   La leyenda de abajo ENSEÑA el código — sin ella el color sería decoración, no información. */

/* Compuertas: negro (límite duro). El nodo inactivo TIENE que distinguirse SIN hacer clic —
   ése es todo el punto: que se vea de un vistazo que hay dos puntos donde el sistema se planta.
   Un borde apenas más oscuro no alcanzaba (auditoría: la leyenda prometía un punto negro y los
   nodos en reposo se veían iguales). Anillo grueso y oscuro = "checkpoint", legible al instante. */
.pl-node[data-kind="gate"] .pl-dot {
  border-color: var(--text); border-width: 2px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
}
.pl-node[data-kind="gate"] .pl-dot-i { color: var(--text); }
/* el resultado también se anticipa en reposo (anillo verde) */
.pl-node[data-kind="payoff"] .pl-dot { border-width: 2px; }
.pl-radio:nth-of-type(2):checked ~ .pl-track .pl-node:nth-of-type(2) .pl-dot,
.pl-radio:nth-of-type(4):checked ~ .pl-track .pl-node:nth-of-type(4) .pl-dot {
  background: var(--text); border-color: var(--text);
}
.pl-panel[data-kind="gate"] { border-left-color: var(--text); }
.pl-panel[data-kind="gate"] .pl-ico {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text);
}
/* el meta de una compuerta es la frase que más vende ("Sin datos = no se envía") */
.pl-panel[data-kind="gate"] .pl-meta { color: var(--text); font-weight: 600; }

/* Resultado: verde — el cierre narrativo (ingrediente 3) */
.pl-node[data-kind="payoff"] .pl-dot { border-color: var(--green); }
.pl-radio:nth-of-type(7):checked ~ .pl-track .pl-node:nth-of-type(7) .pl-dot {
  background: var(--green); border-color: var(--green);
}
/* el último tramo del track llega en verde: el flujo "termina bien" */
.pl-node[data-kind="payoff"]::after { background: var(--green); }
.pl-panel[data-kind="payoff"] { border-left-color: var(--green); }
.pl-panel[data-kind="payoff"] .pl-ico {
  background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green);
}
.pl-panel[data-kind="payoff"] .pl-meta { color: var(--green); font-weight: 600; }

/* ---- Pie: leyenda + estado del autoplay ---- */
.pl-foot {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between;
}
.pl-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.pl-lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-faint);
}
.pl-lg::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pl-lg[data-kind="process"]::before { background: var(--accent); }
.pl-lg[data-kind="gate"]::before    { background: var(--text); }
.pl-lg[data-kind="payoff"]::before  { background: var(--green); }
.pl-hint { margin-top: 0; }

@media (max-width: 640px) {
  .pl-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pl-legend { gap: 10px 14px; }
}