/*
 * Fluxo das fases ("Migrar pode começar com uma única tarefa"). Referência aprovada:
 * ~/compartilhado/mysat/efeitos/My-Sat-fluxo-fases-*.html. Fundo branco e tipografia do
 * site; azul elétrico e violeta só no efeito e nos destaques; sem ciano.
 */
.fluxo{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:56px}
.fluxo-linha{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fluxo-base{fill:none;stroke:#DCE2ED;stroke-width:3;stroke-linecap:round}
.fluxo-traco{fill:none;stroke:url(#fluxo-grad);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px #8054DB70)}
.fluxo-luz{fill:#fff;stroke:#8353DF;stroke-width:3;filter:drop-shadow(0 0 6px #7E49FF)}
.fluxo-fase{position:relative;min-width:0}
.fluxo-num{
  position:relative;z-index:1;width:48px;height:48px;border-radius:50%;border:1px solid #D6DFED;background:#fff;
  color:#60718E;font:700 14px 'IBM Plex Mono',monospace;cursor:pointer;
  transition:background .35s,color .35s,box-shadow .35s,border-color .35s;
}
.fluxo-num:hover{border-color:#8A46DC}
.fluxo-num:focus-visible{outline:2px solid #0E2749;outline-offset:4px}
.fluxo-fase.passou .fluxo-num{background:#EAE8FC;color:#593DAE;border-color:#CFC6ED}
.fluxo-fase.ativa .fluxo-num{background:linear-gradient(120deg,#365DE4,#8A46DC);color:#fff;border-color:#7554D0;box-shadow:0 0 0 6px #7754D018,0 0 22px #7955D940}
/* onda curta ao chegar na fase */
.fluxo-fase.ativa .fluxo-num::after{content:'';position:absolute;inset:-7px;border:1px solid #8261DA;border-radius:50%;animation:fluxo-chegada 1.8s ease-out infinite}
.fluxo-texto{margin:20px -10px 0;padding:14px 10px;border-radius:8px;transition:background .35s}
.fluxo-fase.ativa .fluxo-texto{background:linear-gradient(180deg,#F1EDFC,#fff)}
.fluxo-rotulo{display:block;font:12px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#596B84;margin-bottom:12px}
.fluxo-fase.ativa .fluxo-rotulo{color:#6B40C4;font-weight:600}
.fluxo h3{font-size:23px;line-height:1.3;letter-spacing:-.03em;margin:0 0 12px;color:#0E2749}
.fluxo-texto p{font-size:16px;line-height:1.6;color:#516680;margin:0}
.fluxo-anuncio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fluxo.fluxo-pausado .fluxo-num::after{animation-play-state:paused}
@keyframes fluxo-chegada{from{transform:scale(.9);opacity:.65}to{transform:scale(1.3);opacity:0}}
@media(max-width:1100px){.fluxo{gap:20px}.fluxo h3{font-size:20px}.fluxo-texto p{font-size:15px}}
/* celular: fases na vertical, números à esquerda e a linha ligando os centros */
@media(max-width:760px){
  .fluxo{grid-template-columns:1fr;gap:26px;margin-top:34px}
  .fluxo-fase{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
  .fluxo-texto{margin:0;padding:6px 10px 10px}
  .fluxo h3{font-size:19px;margin-bottom:8px}
  .fluxo-rotulo{margin-bottom:6px}
}
@media(prefers-reduced-motion:reduce){
  .fluxo-num,.fluxo-texto{transition:none}
  .fluxo-fase.ativa .fluxo-num::after{animation:none;opacity:.6;transform:scale(1.15)}
}