/* One persistent scene: HTML labels keep their size while SVG routes adapt. */
[data-product-flow] { --flow-green:#5fa382; --flow-sage:#aabdad; --flow-deep:#27634e; }
[data-product-flow] .flow-canvas { position:relative; z-index:1; width:100%; max-width:590px; height:450px; flex:none; overflow:hidden; border:1px solid #f8f7f4cc; border-radius:18px; background:#f8f7f4f5; color:#0d100f; }
.flow-heading { position:absolute; top:23px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.flow-kicker { font-size:15px; letter-spacing:-.02em; line-height:1.3; }
.flow-replay { flex:none; appearance:none; border:0; padding:4px 0 4px 8px; background:none; color:#27634e; font:inherit; font-size:12px; cursor:pointer; }
.flow-replay[hidden] { display:none; }
.flow-replay span { display:inline-block; margin-left:4px; font-size:16px; }
.flow-replay:focus-visible { outline:2px solid #5fa382; outline-offset:5px; border-radius:3px; }
.flow-stage { position:absolute; inset:58px 22px 85px; }
.flow-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; pointer-events:none; }
.flow-link { stroke:#aabdad; stroke-width:1.25; vector-effect:non-scaling-stroke; opacity:.62; }
.flow-link.flow-followup { stroke-dasharray:3 5; opacity:.55; }
.flow-trace { stroke:#5fa382; stroke-width:1.7; fill:none; }
.flow-packet { fill:#27634e; }
.flow-packet-halo { fill:#5fa382; opacity:.16; }
.flow-node { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-20px); display:flex; flex-direction:column; align-items:center; width:140px; text-align:center; color:#27634e; z-index:2; }
.flow-orb { position:relative; display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid #aabdad; border-radius:50%; background:#f8f7f4; }
.flow-orb svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.flow-label { display:block; margin-top:8px; color:#0d100f; font-size:13px; line-height:1.2; letter-spacing:-.01em; }
.flow-agent { width:100px; transform:translate(-50%,-31px); }
.flow-agent .flow-orb { width:62px; height:62px; border-color:#5fa382; background:#e8efea; }
.flow-agent .flow-orb:before { content:''; position:absolute; inset:-6px; border:1px solid #5fa38233; border-radius:50%; }
.flow-agent .flow-orb svg { width:29px; height:29px; }
.flow-agent .flow-label { font-size:17px; color:#27634e; letter-spacing:-.03em; }
.flow-human .flow-orb { background:#f0eee7; border-color:#c6c6b9; color:#676c60; }
.flow-human.is-active .flow-orb, .flow-human.is-complete .flow-orb { color:#27634e; background:#e2ede5; border-color:#5fa382; }
.flow-node.is-active .flow-orb { border-color:#5fa382; }
.flow-agent.is-active .flow-orb { background:#dbeadd; }
.flow-result { width:190px; }
.flow-result .flow-orb { border-color:#5fa382; color:#27634e; background:#e9efe9; }
.flow-result .flow-label { font-size:16px; color:#27634e; letter-spacing:-.025em; }
.flow-citations { display:flex; align-items:center; gap:4px; margin-top:9px; }
.flow-citations>span { display:grid; place-items:center; border:1px solid #aabdad; width:17px; height:17px; border-radius:50%; font-size:10px; color:#27634e; }
.flow-citations small { margin-left:3px; font-size:11px; color:#70776c; }
.flow-clues { position:absolute; left:2%; top:53%; display:flex; flex-direction:column; gap:7px; font-size:12px; line-height:1.25; color:#27634e; }
.flow-clues span:before { content:''; display:inline-block; width:4px; height:4px; margin:0 6px 2px 0; border-radius:50%; background:#5fa382; }
.flow-footer { position:absolute; bottom:19px; left:24px; right:24px; display:flex; align-items:center; gap:8px; min-height:16px; border-top:1px solid #aabdad40; padding-top:13px; }
.flow-status-dot { width:5px; height:5px; background:#5fa382; border-radius:50%; flex:none; }
.flow-status { color:#27634e; font-size:12px; line-height:1.3; }
.flow-caption { position:relative; z-index:1; font-size:11px; line-height:1.4; color:#f8f7f4; padding:0; }
[data-product-flow="aprender"] .flow-node { width:130px; }
.flow-signal { display:flex; align-items:end; height:8px; gap:3px; margin-top:7px; }
.flow-signal i { width:9px; height:4px; background:#5fa382; border-radius:1px; }
.flow-signal i:nth-child(2) { height:7px; }
.flow-signal i:nth-child(3) { height:5px; background:#aabdad; }
.flow-signal.is-distinct i:nth-child(1) { height:7px; background:#aabdad; }
.flow-signal.is-distinct i:nth-child(2) { height:4px; background:#aabdad; }
.flow-need { position:absolute; left:38%; top:31%; font-size:12px; color:#27634e; border-bottom:1px solid #aabdad; padding-bottom:3px; }
.flow-followup-label { position:absolute; left:-1%; top:64%; writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; color:#7c897e; }
[data-product-flow="gerir"] .flow-result { width:180px; }
[data-product-flow="gerir"] .flow-result .flow-label { font-size:15px; }
.flow-request .flow-label { font-size:14px; }
@media (max-width:1100px) and (min-width:761px) { [data-product-flow] .flow-canvas { height:380px; } .flow-stage { inset:51px 15px 75px; } .flow-heading { left:19px; right:19px; top:18px; } .flow-footer { left:19px; right:19px; bottom:16px; } .flow-clues { left:0; font-size:12px; } }
@media (max-width:760px) {
 [data-product-flow] .flow-canvas { height:386px; border-radius:13px; }
 .flow-heading { top:17px; left:15px; right:15px; gap:3px; }
 .flow-kicker { font-size:13px; max-width:215px; }
 .flow-replay { font-size:12px; padding-left:4px; }
 .flow-replay span { margin-left:0; }
 .flow-stage { inset:53px 14px 76px; }
 .flow-node { width:97px; transform:translate(-50%,-18px); }
 .flow-orb { width:36px; height:36px; }
 .flow-orb svg { width:21px; height:21px; }
 .flow-label { margin-top:6px; font-size:12px; line-height:1.2; }
 .flow-agent { width:80px; transform:translate(-50%,-27px); }
 .flow-agent .flow-orb { width:54px; height:54px; }
 .flow-agent .flow-orb svg { width:26px; height:26px; }
 .flow-agent .flow-label { font-size:16px; }
 .flow-result { width:148px; }
 .flow-result .flow-label { font-size:14px; }
 .flow-clues { left:0; top:54%; gap:5px; width:100px; font-size:12px; }
 .flow-clues span:before { display:none; }
 .flow-citations { margin-top:7px; }
 .flow-citations small { font-size:12px; }
 .flow-footer { left:15px; right:15px; bottom:16px; padding-top:11px; }
 [data-product-flow="ampliar"] [data-node="agent"] { --x:48% !important; --y:43% !important; }
 [data-product-flow="ampliar"] [data-node="human"] { --x:79% !important; --y:61% !important; }
 [data-product-flow="ampliar"] [data-node="result"] { --x:50% !important; --y:83% !important; }
 [data-product-flow="aprender"] .flow-node { width:94px; }
 [data-product-flow="aprender"] .flow-result { width:150px; }
 [data-product-flow="aprender"] [data-node="agent"] { --x:29% !important; --y:46% !important; }
 .flow-need { left:36%; top:29%; font-size:12px; white-space:nowrap; }
 .flow-followup-label { left:-1%; top:59%; font-size:12px; }
 [data-product-flow="gerir"] .flow-result { width:117px; }
 [data-product-flow="gerir"] .flow-result .flow-label { font-size:12px; }
 [data-product-flow="gerir"] [data-node="qualification"] { --x:82% !important; --y:22% !important; }
 [data-product-flow="gerir"] [data-node="hours"] { --x:84% !important; --y:45% !important; }
 .flow-request .flow-label { font-size:13px; width:150px; }
}
@media (prefers-reduced-motion:reduce) { .flow-status-dot { opacity:1; } }