.pagina-flujo{--navy-fuerte:#23223f;--gris:#6f7390;--tenue:color-mix(in srgb,var(--ink-3) 26%,transparent);min-height:100vh;display:flex;flex-direction:column;gap:16px;padding:22px clamp(16px,3vw,34px) 26px;background:var(--ground)}:root:not([data-theme=light]) .pagina-flujo{--navy-fuerte:#c7c4e4}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .pagina-flujo{--navy-fuerte:#23223f}}:root[data-theme=dark] .pagina-flujo{--navy-fuerte:#c7c4e4}.pagina-flujo .cabecera{display:grid;gap:14px;align-items:end;grid-template-columns:1fr}@media (min-width:1040px){.pagina-flujo .cabecera{grid-template-columns:auto minmax(0,1fr) auto;gap:28px}}.pagina-flujo .marca{display:flex;flex-direction:column;gap:8px;color:var(--ink)}.pagina-flujo .marca span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}.pagina-flujo .titulo h1{font-size:clamp(20px,2.4vw,27px);font-weight:800;letter-spacing:-.02em}.pagina-flujo .titulo p{margin-top:6px;font-size:13.5px;color:var(--ink-2);max-width:68ch;line-height:1.55}.pagina-flujo .leyenda{display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:10px 14px;list-style:none;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-sm)}.pagina-flujo .leyenda li{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}.pagina-flujo .leyenda i{display:block;width:30px;height:0;border-top-style:solid}.pagina-flujo .leyenda .dinero i{border-top-width:3px;border-top-color:var(--coral)}.pagina-flujo .leyenda .mercancia i{border-top:2px dashed var(--navy-fuerte)}.pagina-flujo .leyenda .info i{border-top:1.5px dotted var(--gris)}.recorrido{display:grid;gap:14px;grid-template-columns:1fr}@media (min-width:1180px){.recorrido{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"fases lienzo" "narr narr"}.recorrido .fases{grid-area:fases}.recorrido .lienzo{grid-area:lienzo}.recorrido .narracion{grid-area:narr}}.recorrido .fases{display:flex;gap:8px;margin:0;padding:0;list-style:none;overflow-x:auto}@media (min-width:1180px){.recorrido .fases{flex-direction:column;overflow:visible}}.recorrido .fases li{flex:1 0 auto}.recorrido .fases button{width:100%;text-align:left;background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;transition:.18s;color:inherit}.recorrido .fases button:hover{border-color:var(--line-2)}.recorrido .fases b{display:block;font-size:13px;font-weight:700;color:var(--ink-3)}.recorrido .fases span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.35}.recorrido .fases .pasada button{border-left-color:var(--coral-2)}.recorrido .fases .pasada b{color:var(--ink-2)}.recorrido .fases .dentro button{border-left-color:var(--coral);background:color-mix(in srgb,var(--coral) 6%,var(--surf))}.recorrido .fases .dentro b{color:var(--ink)}.recorrido .lienzo{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:6px;overflow-x:auto}.recorrido .lienzo svg{display:block;width:100%;min-width:900px;height:auto}.recorrido .actor rect{fill:var(--surf-3);stroke:var(--line-2);stroke-width:1;transition:fill .35s,stroke .35s}.recorrido .actor .nombre{fill:var(--ink-3);font:700 13px var(--font-sans),sans-serif;letter-spacing:.04em;transition:fill .35s}.recorrido .actor .papel{fill:var(--ink-3);font:500 10.5px var(--font-sans),sans-serif;transition:fill .35s}.recorrido .actor.on rect{fill:var(--navy);stroke:var(--navy)}:root[data-theme=dark] .recorrido .actor.on rect{fill:#322f5e;stroke:#4a4680}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .recorrido .actor.on rect{fill:#322f5e;stroke:#4a4680}}.recorrido .actor.on .nombre{fill:#fff}.recorrido .actor.on .papel{fill:#a9a6c4}.recorrido .flecha .rotulo text{fill:var(--ink);font:600 11.5px var(--font-sans),sans-serif;animation:aparece .5s .35s both}.recorrido .flecha .rotulo .pie{fill:var(--ink-3);font:500 10.5px var(--font-sans),sans-serif}@keyframes aparece{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.recorrido .etiqueta text{fill:var(--ink-3);font:600 10.5px var(--font-sans),sans-serif;letter-spacing:.05em;opacity:.45;transition:opacity .35s,fill .35s}.recorrido .etiqueta.on text{opacity:1;fill:var(--ink-2)}.recorrido .narracion{display:grid;gap:14px;align-items:center;grid-template-columns:auto minmax(0,1fr);background:var(--surf);border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:var(--r);padding:16px 18px}@media (min-width:900px){.recorrido .narracion{grid-template-columns:auto minmax(0,1fr) auto}}.recorrido .narracion.fase-mayor{border-left-color:var(--navy)}:root[data-theme=dark] .recorrido .narracion.fase-mayor{border-left-color:#6e6aa8}.recorrido .narracion.fase-menor{border-left-color:var(--coral-2)}.recorrido .narracion.fase-enganche{border-left-color:var(--coral)}.recorrido .narracion.fase-factoraje{border-left-color:var(--ok)}.recorrido .cuenta{text-align:center;min-width:54px}.recorrido .cuenta b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}.recorrido .cuenta span{font-size:10.5px;color:var(--ink-3)}.recorrido .texto h2{font-size:16px;font-weight:700}.recorrido .texto p{margin-top:5px;font-size:13.2px;color:var(--ink-2);line-height:1.55;max-width:82ch}.recorrido .texto .cifra{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--coral);background:color-mix(in srgb,var(--coral) 11%,transparent);padding:4px 9px;border-radius:6px}.recorrido .mandos{display:flex;gap:7px;align-items:center}.recorrido .progreso{grid-column:1/-1;display:flex;gap:5px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}.recorrido .progreso button{flex:1;min-width:14px;height:5px;border:0;border-radius:3px;background:var(--line-2);cursor:pointer;padding:0;transition:background .25s}.recorrido .progreso button:hover{background:var(--ink-3)}.recorrido .progreso button.ya{background:var(--coral-2)}.recorrido .progreso button.aqui{background:var(--coral)}.pie-flujo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}@media (prefers-reduced-motion:reduce){.recorrido .flecha path{transition:none!important}.recorrido .flecha .rotulo text{animation:none}}