/* ===== Seção 04 · O fluxo único =====
   Modos:
   - padrão (sem JS / reduced motion / .is-static): timeline vertical estática, todas as etapas acesas.
   - pré-vivo  : html.js sem reduced motion — etapas já nascem apagadas (evita o "flash" antes do JS).
   - .is-live  : JS ativo; etapas acendem conforme o "documento" passa.
   - .is-h     : desktop (>=1024px e altura >= 600px) — palco fixado, trilho horizontal com scrub. */

.sec--fluxo {
  --fx-card-w: 292px;
  --fx-line: 3px;
  --fx-node: 14px;
  --fx-dim: color-mix(in srgb, var(--white) 55%, transparent);
  --fx-rule: color-mix(in srgb, var(--mist) 70%, var(--slate-2));
  --fx-rule-2: color-mix(in srgb, var(--mist) 45%, var(--slate-2));
  overflow: clip;
}

/* ---------- Cabeçalho ---------- */
.sec--fluxo .fx-head { display: grid; gap: 28px; align-items: end; }
.sec--fluxo .fx-head .h2 { max-width: 17ch; }
.sec--fluxo .fx-head__side .lead { margin-top: 0; font-size: var(--fs-body); max-width: 46ch; }
.sec--fluxo .fx-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sec--fluxo .fx-legend li,
.sec--fluxo .fx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.2; color: var(--navy);
  padding: 6px 11px 6px 9px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--mist);
}
.sec--fluxo .fx-legend li::before,
.sec--fluxo .fx-chip::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mod); box-shadow: 0 0 0 1px rgba(10, 24, 48, .14);
}
@media (min-width: 1024px) {
  .sec--fluxo .fx-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .sec--fluxo .fx-head__side { padding-bottom: 8px; }
}

/* ---------- Palco ---------- */
.sec--fluxo .fx-stage { position: relative; margin-top: clamp(48px, 7vw, 88px); }
.sec--fluxo .fx-bar { display: none; }
.sec--fluxo .fx-hud { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.sec--fluxo .fx-jump[hidden] { display: none; }
/* região viva (anuncia a etapa após um salto pelo .fx-jump) — visualmente oculta */
.sec--fluxo .fx-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sec--fluxo .fx-count {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); display: flex; align-items: baseline; gap: .45em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sec--fluxo .fx-count b { font-weight: 500; color: var(--navy); font-size: 1.35em; letter-spacing: .04em; }
.sec--fluxo .fx-count__of { color: var(--slate); }
.sec--fluxo .fx-count__sep { color: var(--teal); padding-inline: .2em; }
.sec--fluxo .fx-count .fx-count__zero { color: var(--teal); }
.sec--fluxo .fx-meter { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--mist); overflow: hidden; }
.sec--fluxo .fx-meter__fill { position: absolute; inset: 0; background: var(--grad); transform-origin: left center; transform: scaleX(0); }

.sec--fluxo .fx-view { position: relative; }
.sec--fluxo .fx-track { position: relative; }
.sec--fluxo .fx-svg { display: none; }

/* ---------- Linha vertical (mobile / tablet / estático) ---------- */
.sec--fluxo .fx-vline {
  position: absolute; left: calc(var(--gutter) + 11px); top: 12px; bottom: 12px;
  width: var(--fx-line); margin-left: calc(var(--fx-line) / -2); border-radius: 3px;
  background: var(--mist); overflow: hidden;
}
.sec--fluxo .fx-vline__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--mint), var(--teal) 45%, var(--cyan)); transform-origin: center top; }
@media (prefers-reduced-motion: no-preference) {
  .sec--fluxo:is(.is-live, :where(.js *):not(.is-static)) .fx-vline__fill { transform: scaleY(0); }
}

/* ---------- Documento (token) ---------- */
.sec--fluxo .fx-token { display: none; }
.sec--fluxo.is-live .fx-token {
  display: flex; position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  align-items: center; gap: 10px; will-change: transform;
}
.sec--fluxo .fx-token__doc {
  position: relative; flex: none; width: 30px; height: 36px; border-radius: 6px;
  background: var(--white); border: 1.5px solid var(--teal);
  display: grid; align-content: center; gap: 4px; padding-inline: 6px;
  box-shadow: 0 0 0 5px rgba(42, 168, 180, .16), 0 10px 22px -8px rgba(10, 24, 48, .45);
}
.sec--fluxo .fx-token__doc::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 9px; height: 9px; border-radius: 0 5px 0 4px; background: var(--grad); }
.sec--fluxo .fx-token__doc i { display: block; height: 2px; border-radius: 2px; background: var(--mist); }
.sec--fluxo .fx-token__doc i:first-child { background: var(--teal); width: 70%; }
.sec--fluxo .fx-token__txt { display: none; }

/* ---------- Etapas (base = vertical) ---------- */
.sec--fluxo .fx-steps { position: relative; display: grid; gap: 14px; padding-inline: var(--gutter); }
.sec--fluxo .fx-step { position: relative; padding-left: 40px; }
.sec--fluxo .fx-step__node {
  position: absolute; left: 11px; top: 26px; width: var(--fx-node); height: var(--fx-node);
  margin: calc(var(--fx-node) / -2) 0 0 calc(var(--fx-node) / -2);
  border-radius: 50%; background: var(--teal); border: 2px solid var(--teal); z-index: 2;
  box-shadow: 0 0 0 4px var(--paper);
  transition: background-color .35s, border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.sec--fluxo .fx-step__card {
  position: relative; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r);
  padding: 16px 18px 18px; display: grid; gap: 6px; justify-items: start;
  transition: background-color .4s, border-color .4s, box-shadow .45s var(--ease), transform .45s var(--ease), opacity .4s;
}
.sec--fluxo .fx-step__card::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease);
}
.sec--fluxo .fx-step__num { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--teal-ink); }
.sec--fluxo .fx-step__name { font-family: var(--f-body); font-weight: 600; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.005em; color: var(--navy); text-wrap: balance; transition: color .35s; }
.sec--fluxo .fx-step__name abbr { text-decoration: none; }
.sec--fluxo .fx-step__auto { font-size: var(--fs-small); line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.sec--fluxo .fx-chip { margin-top: 6px; transition: filter .4s, opacity .4s; }

/* estados (JS vivo; e já no HTML quando html.js e sem reduced motion, para não piscar) */
@media (prefers-reduced-motion: no-preference) {
  .sec--fluxo:is(.is-live, :where(.js *):not(.is-static)) .fx-step:not(.is-past):not(.is-active) .fx-step__node { background: var(--paper); border-color: var(--fx-rule-2); }
  .sec--fluxo:is(.is-live, :where(.js *):not(.is-static)) .fx-step:not(.is-past):not(.is-active) .fx-step__card { background: var(--fx-dim); border-style: dashed; border-color: var(--fx-rule); box-shadow: none; }
  .sec--fluxo:is(.is-live, :where(.js *):not(.is-static)) .fx-step:not(.is-past):not(.is-active) .fx-step__name { color: var(--slate); }
  .sec--fluxo:is(.is-live, :where(.js *):not(.is-static)) .fx-step:not(.is-past):not(.is-active) .fx-chip { filter: grayscale(1); opacity: .75; }
}
.sec--fluxo.is-live .fx-step.is-active .fx-step__card { border-color: transparent; box-shadow: var(--shadow-lg); }
.sec--fluxo.is-live .fx-step.is-active .fx-step__card::before { transform: scaleX(1); }
.sec--fluxo.is-live .fx-step.is-active .fx-step__node { background: var(--white); transform: scale(1.25); box-shadow: 0 0 0 4px var(--paper), 0 0 0 9px rgba(42, 168, 180, .22); }

/* HUD em modo vivo vertical: pílula opaca presa ao RODAPÉ da viewport.
   Fica depois da lista (order) para o sticky-bottom funcionar dentro do palco;
   assim não cobre o título do card em leitura (linha de leitura ~58% da tela). */
.sec--fluxo.is-live .fx-bar { display: flex; align-items: center; gap: 24px; }
.sec--fluxo.is-live:not(.is-h) .fx-stage { display: flex; flex-direction: column; }
.sec--fluxo.is-live:not(.is-h) .fx-view { order: 1; }
.sec--fluxo.is-live:not(.is-h) .fx-bar {
  order: 2; position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5;
  align-self: center; width: min(340px, calc(100% - var(--gutter) * 2)); max-width: none;
  margin: 24px auto 0; padding: 9px 16px; gap: 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--mist); box-shadow: var(--shadow);
}
.sec--fluxo.is-live:not(.is-h) .fx-count { font-size: 11px; letter-spacing: .08em; }
.sec--fluxo.is-live:not(.is-h) .fx-meter { min-width: 40px; }
/* névoa de papel atrás da pílula, até a borda inferior da tela: o card que entra
   some num degradê intencional em vez de ser cortado pela pílula */
.sec--fluxo.is-live:not(.is-h) .fx-bar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 100vw; transform: translateX(-50%);
  bottom: calc(-1 * max(12px, env(safe-area-inset-bottom)));
  height: calc(100% + max(12px, env(safe-area-inset-bottom)) + 28px);
  background: linear-gradient(0deg, var(--paper) 45%, color-mix(in srgb, var(--paper) 0%, transparent));
}
@media (max-width: 419.98px) {
  .sec--fluxo.is-live:not(.is-h) .fx-bar { padding: 7px 14px; gap: 12px; width: min(300px, calc(100% - var(--gutter) * 2)); }
  .sec--fluxo.is-live:not(.is-h) .fx-count { font-size: 10px; }
}

/* ---------- Tablet / reduced desktop: timeline central em ziguezague ---------- */
@media (min-width: 768px) {
  .sec--fluxo:not(.is-h) .fx-steps { max-width: 1040px; margin-inline: auto; gap: 0; }
  .sec--fluxo:not(.is-h) .fx-vline { left: 50%; }
  .sec--fluxo:not(.is-h) .fx-step { width: 50%; padding: 0 44px 0 0; margin-bottom: -28px; }
  .sec--fluxo:not(.is-h) .fx-step:nth-child(even) { margin-left: 50%; padding: 0 0 0 44px; }
  .sec--fluxo:not(.is-h) .fx-step:last-child { margin-bottom: 0; }
  .sec--fluxo:not(.is-h) .fx-step__node { left: 100%; }
  .sec--fluxo:not(.is-h) .fx-step:nth-child(even) .fx-step__node { left: 0; }
  .sec--fluxo:not(.is-h) .fx-step__card { padding: 20px 22px 22px; }
  .sec--fluxo:not(.is-h) .fx-step__card::after {
    content: ""; position: absolute; top: 25px; right: -44px; width: 44px; height: 1px; background: var(--mist);
  }
  .sec--fluxo:not(.is-h) .fx-step:nth-child(even) .fx-step__card::after { right: auto; left: -44px; }
  .sec--fluxo:not(.is-h) .fx-vline { top: 26px; bottom: 26px; margin-inline: 0; transform: translateX(-50%); }
  .sec--fluxo.is-live:not(.is-h) .fx-bar { width: 380px; margin-top: 40px; }
}

/* ---------- Desktop: palco fixado + trilho horizontal ---------- */
/* O nav do core se esconde ao rolar para baixo: nada de reservar nav-h.
   HUD + trilho formam um bloco centralizado na altura (o JS limita a altura do trilho ao conteúdo). */
.sec--fluxo.is-h .fx-stage {
  height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 24px; margin-top: clamp(40px, 5vw, 72px);
}
.sec--fluxo.is-h .fx-bar { flex: none; }
.sec--fluxo.is-h .fx-hud { gap: 28px; }
.sec--fluxo.is-h .fx-jump { display: block; flex: none; }
.sec--fluxo.is-h .fx-jump ol { display: flex; flex-wrap: wrap; gap: 6px; }
.sec--fluxo.is-h .fx-jump button {
  min-width: 40px; height: 30px; padding-inline: 8px; border-radius: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--slate);
  border: 1px solid var(--mist); background: var(--white);
  transition: color .25s, background-color .25s, border-color .25s;
}
.sec--fluxo.is-h .fx-jump button:hover { color: var(--navy); border-color: var(--teal); }
.sec--fluxo.is-h .fx-jump button.is-past { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.sec--fluxo.is-h .fx-jump button[aria-current="step"] { color: var(--white); background: var(--navy); border-color: var(--navy); }

.sec--fluxo.is-h .fx-view {
  flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--gutter), black calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black var(--gutter), black calc(100% - var(--gutter)), transparent 100%);
}
.sec--fluxo.is-h .fx-track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.sec--fluxo.is-h .fx-vline { display: none; }
.sec--fluxo.is-h .fx-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sec--fluxo .fx-svg path { fill: none; stroke-linecap: round; }
.sec--fluxo .fx-svg__base { stroke: var(--fx-rule); stroke-width: 2; stroke-dasharray: 2 8; }
.sec--fluxo .fx-svg__line { stroke-width: 4; }
.sec--fluxo .fx-s1 { stop-color: var(--mint); }
.sec--fluxo .fx-s2 { stop-color: var(--teal); }
.sec--fluxo .fx-s3 { stop-color: var(--cyan); }

.sec--fluxo.is-h .fx-steps { position: static; display: block; padding: 0; }
.sec--fluxo.is-h .fx-step { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; padding: 0; }
.sec--fluxo.is-h .fx-step__node { left: 0; top: 0; }
.sec--fluxo.is-h .fx-step::before {
  content: ""; position: absolute; left: -.5px; width: 1px; height: 34px; background: var(--mist);
  transition: background-color .35s;
}
.sec--fluxo.is-h .fx-step.is-up::before { bottom: 8px; }
.sec--fluxo.is-h .fx-step.is-down::before { top: 8px; }
.sec--fluxo.is-h .fx-step.is-past::before,
.sec--fluxo.is-h .fx-step.is-active::before { background: var(--teal); }
.sec--fluxo.is-h .fx-step__card { position: absolute; left: -24px; width: var(--fx-card-w); padding: 18px 20px 20px; }
.sec--fluxo.is-h .fx-step.is-up .fx-step__card { bottom: 42px; }
.sec--fluxo.is-h .fx-step.is-down .fx-step__card { top: 42px; }
.sec--fluxo.is-h.is-live .fx-step.is-active .fx-step__card { box-shadow: 0 22px 44px -24px rgba(10, 24, 48, .42); }
.sec--fluxo.is-h.is-live .fx-step.is-up.is-active .fx-step__card { transform: translateY(-6px); }
.sec--fluxo.is-h.is-live .fx-step.is-down.is-active .fx-step__card { transform: translateY(6px); }

.sec--fluxo.is-h .fx-token { gap: 0; }
.sec--fluxo.is-h .fx-token__txt {
  display: grid; gap: 1px; margin-left: -4px; padding: 7px 14px 7px 16px;
  background: var(--navy); color: var(--white); border-radius: 0 10px 10px 0;
  box-shadow: 0 12px 26px -12px rgba(10, 24, 48, .6); white-space: nowrap;
}
.sec--fluxo .fx-token__id { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--white) 76%, transparent); }
.sec--fluxo .fx-token__state { font-size: .88rem; font-weight: 600; line-height: 1.2; }

/* ---------- Financeiro 360 (bloco escuro dentro da seção clara) ---------- */
.sec--fluxo .fx-fin {
  --fin: #FF9F43; /* cor de módulo S360: Financeiro */
  position: relative; display: grid; gap: 32px; margin-top: clamp(64px, 9vw, 120px);
  padding: clamp(24px, 4vw, 52px); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 60%), var(--ink);
  color: var(--white); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sec--fluxo .fx-fin::before { content: ""; position: absolute; left: clamp(24px, 4vw, 52px); right: clamp(24px, 4vw, 52px); top: 0; height: 2px; border-radius: 2px; background: var(--grad); }
.sec--fluxo .fx-fin__title {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(1.45rem, 1rem + 1.8vw, 2.3rem); margin-top: 14px; text-wrap: balance;
}
.sec--fluxo .fx-fin__lead { margin-top: 16px; color: var(--slate-2); max-width: 46ch; font-size: 1.02rem; }
.sec--fluxo .fx-fin__cta { margin-top: 22px; }
.sec--fluxo .fx-fin__list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent); }
.sec--fluxo .fx-fin__list li { display: grid; gap: 4px; padding: 16px 0 16px 20px; position: relative; border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent); }
.sec--fluxo .fx-fin__list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--fin); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fin) 20%, transparent); }
.sec--fluxo .fx-fin__k { color: var(--white); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.sec--fluxo .fx-fin__list p { color: var(--slate-2); font-size: .95rem; line-height: 1.5; }
.sec--fluxo .fx-fin__list b { color: var(--white); font-weight: 600; }
@media (min-width: 640px) {
  .sec--fluxo .fx-fin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 1024px) {
  .sec--fluxo .fx-fin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
}

/* ---------- Fechamento ---------- */
.sec--fluxo .fx-close {
  display: grid; gap: 28px; align-items: center; margin-top: clamp(64px, 9vw, 120px);
}
.sec--fluxo .fx-close__pic { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--mist); }
.sec--fluxo .fx-close__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.sec--fluxo .fx-close__kicker { color: var(--teal-ink); text-transform: uppercase; letter-spacing: .14em; }
.sec--fluxo .fx-close__line {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(1.55rem, 1rem + 2.1vw, 2.6rem); color: var(--navy); margin: 14px 0 28px; text-wrap: balance;
}
@media (min-width: 900px) {
  .sec--fluxo .fx-close { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
}
@media (max-width: 420px) {
  .sec--fluxo .fx-close .btn { white-space: normal; height: auto; min-height: 52px; padding-block: 12px; text-align: center; }
}

/* Desktop baixo (notebooks 600–820px de altura, ex.: 1366x768 com barra do navegador): cards mais compactos */
@media (min-width: 1024px) and (max-height: 820px) {
  .sec--fluxo { --fx-card-w: 268px; }
  .sec--fluxo.is-h .fx-stage { padding-block: 14px; }
  .sec--fluxo.is-h .fx-step__card { padding: 13px 16px 15px; gap: 4px; }
  .sec--fluxo.is-h .fx-step__name { font-size: 1rem; }
  .sec--fluxo.is-h .fx-step__auto { font-size: .82rem; line-height: 1.45; }
  .sec--fluxo.is-h .fx-chip { margin-top: 4px; padding-block: 4px; }
  .sec--fluxo.is-h .fx-step.is-up .fx-step__card { bottom: 34px; }
  .sec--fluxo.is-h .fx-step.is-down .fx-step__card { top: 34px; }
  .sec--fluxo.is-h .fx-step::before { height: 26px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .sec--fluxo { --fx-card-w: 260px; }
  .sec--fluxo.is-h .fx-stage { padding-block: 10px; }
  .sec--fluxo.is-h .fx-jump button { height: 26px; min-width: 34px; }
  .sec--fluxo.is-h .fx-step__card { padding: 11px 15px 13px; gap: 3px; }
  .sec--fluxo.is-h .fx-step__num { font-size: 11px; }
  .sec--fluxo.is-h .fx-step__name { font-size: .95rem; line-height: 1.25; }
  .sec--fluxo.is-h .fx-step__auto { font-size: .8rem; line-height: 1.4; }
  .sec--fluxo.is-h .fx-chip { margin-top: 2px; padding-block: 3px; font-size: 10px; }
  .sec--fluxo.is-h .fx-step.is-up .fx-step__card { bottom: 28px; }
  .sec--fluxo.is-h .fx-step.is-down .fx-step__card { top: 28px; }
  .sec--fluxo.is-h .fx-step::before { height: 20px; }
}
/* Trilho fixo do core (>=1280px) fica à direita: o trilho horizontal esmaece antes dele */
@media (min-width: 1280px) {
  .sec--fluxo.is-h .fx-view {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--gutter), black calc(100% - 170px), transparent calc(100% - 40px));
    mask-image: linear-gradient(90deg, transparent 0, black var(--gutter), black calc(100% - 170px), transparent calc(100% - 40px));
  }
}