/* Como funciona: faixa escura de largura total, canais → Talkvia → resultados. */
.flow-section{background:#0a1a2c;color:#eaf1fa;padding:96px 0 0;overflow:hidden}
main > section#como-funciona{border-top:1px solid #16304d}
.flow-shell{max-width:1344px;margin-inline:auto;padding-inline:32px}
.flow-section .commercial-eyebrow{color:#8fb4e8}
.flow-section .commercial-heading h2{color:#f1f6fd}
.flow-section .commercial-intro{color:#a7bdd8}
.flow-stage{margin:0}
.flow-canvas{position:relative;padding:52px 0 56px;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:48px 48px}
.flow-canvas::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 62% at 50% 50%,#15406f80,transparent 72%)}
.flow-canvas > .flow-shell{position:relative}
.flow-grid{position:relative;display:grid;grid-template-columns:27% minmax(0,1fr) 27%;min-height:512px}

/* Conectores: o viewBox acompanha o retângulo do grid, então cada nó fica ancorado em qualquer largura. */
.flow-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.flow-links path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.flow-link-base{stroke:#1d3652}
.flow-link-pulse{stroke-dasharray:16 188;stroke-dashoffset:204;animation:flow-dash 3.4s linear infinite}
.flow-link-pulse.is-in{stroke:url(#flowGradIn)}
.flow-link-pulse.is-out{stroke:url(#flowGradOut)}
@keyframes flow-dash{from{stroke-dashoffset:204}to{stroke-dashoffset:0}}

/* Colunas: 5 canais e 3 resultados distribuídos em linhas iguais, alinhados aos pontos do SVG. */
.flow-channels,.flow-results{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid}
.flow-channels{grid-template-rows:repeat(5,1fr)}
.flow-results{grid-template-rows:repeat(3,1fr)}
.flow-node{align-self:center;transition:border-color .2s,transform .2s;display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid #27405c;border-radius:12px;background:#102336;box-shadow:0 10px 24px -18px #000}
.flow-node strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#eaf1fa}
.flow-node small{display:block;font-size:11px;line-height:1.6;color:#93a9c5;margin-top:2px}
.flow-node-text{min-width:0}
.flow-node:hover{border-color:#3d6392;transform:translateY(-2px)}
.flow-icon{flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff}
.flow-icon--whatsapp{background:#25d366}
.flow-icon--instagram{background:linear-gradient(135deg,#f58529,#dd2a7b 52%,#8134af)}
.flow-icon--messenger{background:#1877f2}
.flow-icon--webchat{background:#2563eb}
.flow-icon--email{background:linear-gradient(135deg,#ea4335,#d93025)}
.flow-results .flow-icon{background:#123a2e;color:#5fdcaa;border:1px solid #1f5a45}

/* Núcleo: a plataforma no centro do fluxo. */
.flow-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.flow-core-ring{position:relative;width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,#2f6ff0,#123a79);border:1px solid #4f83e4;box-shadow:0 0 0 12px #2563eb14,0 0 0 30px #2563eb0b,0 20px 54px -14px #2563eb99}
.flow-core-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #5b8cf0;opacity:.7;animation:flow-pulse 3.4s ease-out infinite}
@keyframes flow-pulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.34);opacity:0}100%{transform:scale(1.34);opacity:0}}
.flow-core-ring img{width:58px;height:auto;display:block}
.flow-core-name{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:0}
.flow-core-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0}
.flow-core-tags li{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#b6cbe6;border:1px solid #2f4b6b;border-radius:999px;padding:4px 9px;background:#0f2338}

/* Trilha de etapas e rodapé da faixa, ambos de ponta a ponta. */
.flow-steps-band{border-top:1px solid #1b3550;background:#081726}
.flow-steps{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.flow-step{padding:26px 28px;border-left:1px solid #17293d}
.flow-step:first-child{border-left:0;padding-left:0}
.flow-step:last-child{padding-right:0}
.flow-step span{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7d9bbe}
.flow-step h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:10px 0 0;color:#dbe5f2}
.flow-step p{font-size:12.5px;line-height:1.8;color:#93a8c2;margin:6px 0 0}
.flow-bleed{padding-inline:calc(max(0px, 100% - 1344px) / 2 + 32px)}
.flow-stage figcaption{padding-block:16px;background:#061320;border-top:1px solid #16293c;color:#8ea3bd;font-size:10.5px;line-height:1.7}

@media(max-width:1023px){
  .flow-section{padding-top:72px}
  .flow-shell{padding-inline:24px}
  .flow-bleed{padding-inline:24px}
  .flow-canvas{padding:36px 0 40px}
  .flow-grid{grid-template-columns:32% minmax(0,1fr) 32%;min-height:440px}
  .flow-core-ring{width:104px;height:104px}
  .flow-core-ring img{width:48px}
  .flow-node{gap:10px;padding:11px 12px}
  .flow-icon{flex-basis:32px;width:32px;height:32px}
  .flow-steps{grid-template-columns:repeat(2,1fr)}
  .flow-step{border-left:1px solid #17293d;border-top:1px solid #17293d;padding:22px 24px}
  .flow-step:nth-child(-n+2){border-top:0}
  .flow-step:nth-child(odd){border-left:0;padding-left:0}
  .flow-step:nth-child(even){padding-right:0}
}
@media(max-width:767px){
  .flow-links{display:none}
  .flow-section{padding-top:56px}
  .flow-shell{padding-inline:20px}
  .flow-bleed{padding-inline:20px}
  .flow-canvas{padding:28px 0 32px}
  .flow-grid{grid-template-columns:1fr;min-height:0;gap:18px}
  .flow-channels{grid-template-rows:none;gap:10px}
  .flow-results{grid-template-rows:none;gap:10px}
  .flow-core{gap:12px}
  .flow-core::before,.flow-core::after{content:"";width:2px;height:22px;border-radius:2px;background:linear-gradient(180deg,#24405e,#5b8cf0)}
  .flow-core-ring{width:92px;height:92px}
  .flow-core-ring img{width:42px}
  .flow-steps{grid-template-columns:1fr}
  .flow-step{padding:20px 0;border-left:0;border-top:1px solid #17293d}
  .flow-step:first-child{border-top:0;padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .flow-link-pulse{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.85}
  .flow-core-ring::after{animation:none;opacity:.35}
  .flow-node{transition:none}
  .flow-node:hover{transform:none}
}