/* AutomateK · flujo de la sección "La solución": a la izquierda lo que entra,
   en el centro el sistema, a la derecha lo que sale resuelto. Las curvas que
   los unen las dibuja flujo.js con los puntos que llegan de la sección
   anterior. En móvil el flujo va en vertical y quieto.
   No toca portada.js ni portada.css: se quita borrando sus dos líneas. */
.fljHead{max-width:900px;margin:0 auto clamp(30px,3.4vw,48px);text-align:center}
.fljWrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,2.6vw,44px);padding:clamp(6px,1.6vw,22px) 0}
.fljCv{position:absolute;left:0;top:-120px;width:100%;height:calc(100% + 120px);pointer-events:none;z-index:0}
/* Lienzo del vuelo desde el reloj: por debajo de la cabecera y sin ratón. */
#flujoAireCv{position:fixed;inset:0;z-index:100;pointer-events:none;width:100%;height:100%}
.fljCol{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.fljIn{align-items:flex-end;text-align:right}
.fljOut{align-items:flex-start;text-align:left}
.fljKick{position:absolute;bottom:calc(100% + 15px);margin:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#61697A}
.fljIn .fljKick{right:0}
.fljOut .fljKick{left:0}
.fljList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(15px,2vw,26px)}
.fljIn .fljList{align-items:flex-end}
.fljOut .fljList{align-items:flex-start}
.fljItem{display:flex;align-items:center;gap:13px;font-size:clamp(16px,1.75vw,21px);line-height:1.24;letter-spacing:-0.02em;text-wrap:pretty}
.fljIn .fljItem{color:#61697A}
.fljOut .fljItem{color:#1D1D1F;font-weight:600}
.fljDot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;border:1.5px solid #C7C7CC;background:#FFFFFF}
.fljTick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(28,75,216,.1);border:1px solid rgba(28,75,216,.28);color:#1C4BD8;display:grid;place-items:center}
.fljTick svg{width:12px;height:12px}
/* La columna del centro va holgada a propósito: ese hueco es el que recorren
   las líneas de puntos a un lado y al otro. La etiqueta va fuera del flujo
   para que el grid centre el disco, no el disco más su nombre. */
.fljNode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:clamp(180px,23vw,330px)}
.fljDisc{position:relative;width:clamp(86px,9vw,118px);height:clamp(86px,9vw,118px);border-radius:50%;background:#1C4BD8;display:grid;place-items:center;box-shadow:0 20px 44px rgba(28,75,216,.3)}
.fljDisc svg{width:36%;height:36%}
.fljRing{position:absolute;inset:0;border-radius:50%;border:2px solid #1C4BD8;animation:akPulse 3.4s ease-out infinite}
.fljName{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'General Sans',Inter,sans-serif;font-weight:600;font-size:clamp(15px,1.35vw,18px);letter-spacing:-0.015em;color:#1D1D1F}
.fljRail{display:none}

/* Móvil: el mismo flujo en vertical, sin lienzo y sin movimiento. */
@media(max-width:899px){
  .fljWrap{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;padding:0}
  .fljCv{display:none}
  .fljCol{align-items:center;text-align:center;width:100%}
  .fljKick{position:static;margin:0 0 14px}
  .fljIn .fljList,.fljOut .fljList{align-items:center}
  .fljIn .fljItem{flex-direction:row-reverse}
  .fljItem{font-size:17px;gap:11px}
  .fljList{gap:13px}
  .fljRail{display:block;width:1px;height:clamp(38px,10vw,58px);margin:clamp(22px,5vw,30px) 0;background:repeating-linear-gradient(#C7C7CC 0 3px,transparent 3px 10px)}
  .fljRailOut{background:repeating-linear-gradient(#1C4BD8 0 3px,transparent 3px 10px)}
  .fljNode{min-width:0}
  .fljName{position:static;transform:none;margin-top:12px}
  .fljDisc{width:74px;height:74px}
  .fljRing{animation:none}
}
@media(prefers-reduced-motion:reduce){.fljRing{animation:none}}