/* EL HILO del flujo «Del anuncio a la venta» (hilo.js) — bolita + línea que se dibuja, como la señal del
   CRM. Capas SVG de 1×1 con overflow visible: pintan sin ensanchar nada. */
.demo-caja{ position:relative; }
.fl2{ position:relative; }
.fl2 > .fn > button{ z-index:2; }   /* el rastro pasa por DEBAJO de las tarjetas: sólo se ve en los conectores */
.hilo-capa{ position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.hilo-rastro{ z-index:1; }
.hilo-fila{ z-index:3; }
.hilo-baja{ z-index:6; }
.hilo-capa path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 5px currentColor); }
.hilo-rastro path{ stroke-width:3; }
.hilo-bola{ opacity:0; }
.hilo-halo{ fill:currentColor; opacity:.22; filter:blur(3px); }
.hilo-nucleo{ fill:#fff; stroke:currentColor; stroke-width:3; filter:drop-shadow(0 0 6px currentColor); }
.hilo-anillo{ fill:none; stroke:currentColor; stroke-width:2; rx:18px; ry:18px; opacity:0; transform-box:fill-box; transform-origin:center; }
/* la pantalla recibe la bolita: un brillo breve con el color del paso */
.demo-pant.hilo-llega{ animation:hilo-llega .9s cubic-bezier(.22,1,.36,1); }
@keyframes hilo-llega{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--hc) 55%, transparent), 0 0 0 0 transparent; }
  30%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--hc) 45%, transparent), 0 0 46px 6px color-mix(in srgb, var(--hc) 35%, transparent); }
  100%{ box-shadow:0 0 0 10px transparent, 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .hilo-capa{ display:none; } .demo-pant.hilo-llega{ animation:none; } }