/* ===== EL FLUJO DEL EMBUDO · diagrama de flujo DINÁMICO A→B→C→D =====
   Complemento del plano de la ruta (2026-11-03): el flujo se VE pasar de
   estación en estación, en el mismo lenguaje visual dinámico de En5cronia.
   CSS/SVG puros, sin librerías. Respeta prefers-reduced-motion. */
.flujo-sec{padding:6px 16px 10px}
.flujo{--a:#4D7C0F;--b:#EA580C;--c:#2563EB;--d:#5B21B6;--gold:#D4AF37;
  max-width:1060px;margin:0 auto;position:relative;overflow:hidden;
  background:radial-gradient(700px 320px at 88% -10%,rgba(234,88,12,.24),transparent 60%),
             radial-gradient(760px 340px at 12% -12%,rgba(77,124,15,.26),transparent 60%),
             radial-gradient(600px 300px at 50% 115%,rgba(37,99,235,.16),transparent 60%),
             linear-gradient(200deg,#151238,#1E1150 55%,#0B0E2A);
  color:#F4F1FF;border:1px solid rgba(212,175,55,.38);border-radius:28px;
  padding:38px 30px 30px;box-shadow:0 30px 60px -25px rgba(5,3,25,.75),inset 0 1px 0 rgba(255,255,255,.09)}
.flujo-kicker{text-align:center;font-size:.78rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.flujo-title{text-align:center;font-size:clamp(1.55rem,4.6vw,2.3rem);font-weight:900;line-height:1.15;margin:0 0 10px;color:#fff}
.flujo-sub{text-align:center;color:#CFC9EE;max-width:640px;margin:0 auto;font-size:1rem;line-height:1.5}
.flujo-aqui{display:table;margin:14px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:.95rem;padding:8px 18px;border-radius:999px}

/* --- La escena: el camino con el flujo viajando --- */
.flujo-escena{margin:26px auto 4px;max-width:980px}
.flujo-svg{display:block;width:100%;height:auto}
.flujo-svg-v{display:none}
.flujo-pulso{filter:drop-shadow(0 0 7px rgba(212,175,55,.95)) drop-shadow(0 0 20px rgba(212,175,55,.5))}
.flujo-linea{stroke-linecap:round;stroke-dasharray:.1 30;animation:flujoDash .95s linear infinite}
@keyframes flujoDash{to{stroke-dashoffset:-30.1}}
.flujo-halo{fill:none;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:flujoHalo 6s ease-out infinite}
@keyframes flujoHalo{
  0%{opacity:0;transform:scale(.72)}
  8%{opacity:1;transform:scale(1.14)}
  24%{opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}
}
.flujo-halo.n0{stroke:#8FBF3F;animation-delay:-5.45s}
.flujo-halo.n1{stroke:#F58A4C;animation-delay:-3.82s}
.flujo-halo.n2{stroke:#5B8DEF;animation-delay:-2.19s}
.flujo-halo.n3{stroke:#8B5CF6;animation-delay:-.55s}
.flujo-letra-svg{font:900 21px system-ui,sans-serif;fill:#fff;text-anchor:middle}

/* --- Estaciones tocables --- */
.flujo-sts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 0;padding:0;position:relative;z-index:2}
.flujo-st{--sc:var(--gold)}
.flujo-st.s0{--sc:var(--a)}.flujo-st.s1{--sc:var(--b)}.flujo-st.s2{--sc:var(--c)}.flujo-st.s3{--sc:var(--d)}
.flujo-st button{width:100%;height:100%;cursor:pointer;text-align:center;font:inherit;color:#EDEAFF;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-top:5px solid var(--sc);
  border-radius:20px;padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;position:relative}
.flujo-st button:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
.flujo-st.activa button{background:rgba(255,255,255,.11);box-shadow:0 0 0 2px var(--sc),0 18px 34px -14px rgba(0,0,0,.65)}
.flujo-letra{width:44px;height:44px;border-radius:50%;background:var(--sc);color:#fff;font-weight:900;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.flujo-punto{font-size:.7rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#B9B2E0}
.flujo-plat{font-size:1.12rem;font-weight:900;color:#fff;line-height:1.15}
.flujo-verbo{font-size:.82rem;font-weight:900;letter-spacing:.4px;color:var(--sc);filter:brightness(1.55);line-height:1.25}
.flujo-linea-txt{font-size:.86rem;color:#CFC9EE;line-height:1.4}
.flujo-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),#9A7B1C);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(154,123,28,.4);z-index:4}

/* --- Ficha de la estación --- */
.flujo-panel{margin-top:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:24px 24px 20px;animation:flujoIn .45s ease}
@keyframes flujoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flujo-panel h3{margin:0 0 14px;font-size:1.3rem;font-weight:900;color:#fff}
.flujo-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.flujo-cols h4{margin:0 0 6px;font-size:.74rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.flujo-cols p{margin:0;color:#DCD7F5;line-height:1.55;font-size:.98rem}
.flujo-cta{display:inline-block;margin-top:18px;background:linear-gradient(135deg,var(--gold),#9A7B1C);color:#fff;font-weight:900;text-decoration:none;padding:12px 24px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(154,123,28,.6)}
.flujo-cta:hover{filter:brightness(1.08)}
.flujo-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.flujo-nav button{cursor:pointer;font:inherit;font-weight:800;font-size:.95rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:11px 22px;border-radius:999px;transition:background .2s ease}
.flujo-nav button:hover:not(:disabled){background:rgba(255,255,255,.16)}
.flujo-nav button:disabled{opacity:.35;cursor:default}
.flujo-nav [data-prev]::before{content:"←";margin-right:9px}
.flujo-nav [data-next]::after{content:"→";margin-left:9px}

@media(max-width:760px){
  .flujo{padding:30px 18px 24px}
  .flujo-svg-h{display:none}
  .flujo-svg-v{display:block;max-width:190px;margin:0 auto}
  .flujo-sts{grid-template-columns:1fr;gap:16px}
  .flujo-st button{flex-direction:row;text-align:left;padding:14px 16px;gap:12px;flex-wrap:wrap}
  .flujo-st .flujo-punto{display:none}
  .flujo-linea-txt{flex-basis:100%}
  .flujo-badge{left:auto;right:12px;transform:none;top:-11px}
  .flujo-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .flujo-linea,.flujo-halo{animation:none}
  .flujo-halo{opacity:0}
  .flujo-panel{animation:none}
}