/* Bloco "fluxo de dados" (B3 de case de integração com várias fontes; hoje só o case Ranking dos Políticos).
   Carregado só pelas páginas que usam o bloco, depois do previa.css e do previa-case.css. Tudo sob .fluxo-dados.
   Da fonte ao site, em três etapas: as fontes oficiais, uma faixa por caminho de entrada (pela API oficial, dados abertos,
   sem API) → a plataforma que a Olivas construiu (coleta, base, nota e painel) → o site.
   Estático: nenhum movimento (o desenho se lê parado; nada some sem JS nem com "reduzir movimento").
   Celular: as três etapas empilhadas, ligadas por um fio vertical com rótulo. 621+: as três faixas lado a lado.
   1080+: cinco colunas (fontes | fio | plataforma | fio | site); as faixas dividem a coluna em três partes iguais
   (linhas de 1fr, sem vão entre elas), então os fios saem do meio de cada faixa (1/6, 1/2 e 5/6) e chegam ao meio
   do cartão da plataforma, centrado na mesma altura. */

.fluxo-dados{--fd-card:rgba(42,8,40,.34);--fd-borda:rgba(255,255,255,.17);--fd-c1:clamp(72px,7vw,104px);--fd-c2:clamp(56px,5.5vw,84px);--fd-x:34px;--fd-cel:104px;margin-top:clamp(32px,4vw,52px)}
.fluxo-dados .fd-mapa{display:grid;grid-template-columns:minmax(0,1fr)}
.fluxo-dados .fd-etapa{min-width:0}
.fluxo-dados .fd-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.fluxo-dados .fd-papel{font-weight:600;letter-spacing:.04em;padding:3px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:var(--fg)}
.fluxo-dados .fd-papel.nosso{border-color:var(--oliva);background:var(--oliva);color:var(--roxo-900)}
.fluxo-dados .fd-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:2px solid #fff;background:var(--roxo-900);color:#fff}
.fluxo-dados .fd-ic .ico{width:16px;height:16px}

/* etapa 1: fontes, uma faixa por caminho de entrada */
.fluxo-dados .fd-caminhos{display:grid;border:1px solid var(--fd-borda);border-radius:var(--raio);background:var(--fd-card)}
.fluxo-dados .fd-caminho{position:relative;display:grid;align-content:center;gap:8px;padding:16px 18px 18px;min-width:0}
.fluxo-dados .fd-caminho + .fd-caminho{border-top:1px solid var(--fd-borda)}
.fluxo-dados .fd-via{display:flex;align-items:center;gap:12px;margin-bottom:2px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.fluxo-dados .fd-fonte{font-size:14.5px;line-height:1.4;color:var(--fg2);text-wrap:pretty}
.fluxo-dados .fd-fonte b{display:block;font-size:16px;font-weight:700;line-height:1.25;color:var(--titulo)}
.fluxo-dados .fd-traz{padding-left:10px;border-left:3px solid rgba(255,255,255,.3);font-size:14.5px;line-height:1.45;color:var(--fg);text-wrap:pretty}

/* etapas 2 e 3: cartões do que a Olivas construiu (borda oliva, como o "construímos" do percurso) */
.fluxo-dados .fd-caixa{position:relative;display:grid;gap:14px;align-content:start;padding:18px 18px 20px;border:2px solid var(--oliva);border-radius:var(--raio);background:var(--fd-card);box-shadow:0 0 0 5px rgba(220,209,84,.12)}
.fluxo-dados .fd-caixa h3{display:flex;align-items:center;gap:12px;font-size:clamp(1.2rem,1.7vw,1.4rem);font-weight:800;line-height:1.15;color:var(--titulo)}
.fluxo-dados .fd-caixa h3 .fd-ic{border-color:var(--oliva);background:var(--oliva);color:var(--roxo-900)}
.fluxo-dados .fd-passos{display:grid;gap:12px;counter-reset:fd}
.fluxo-dados .fd-passos li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;font-size:14.5px;line-height:1.45;color:var(--fg2);counter-increment:fd;text-wrap:pretty}
.fluxo-dados .fd-passos li::before{content:counter(fd);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(220,209,84,.18);color:var(--oliva);font:700 13px/1 var(--fonte);font-variant-numeric:tabular-nums}
.fluxo-dados .fd-passos b{display:block;font-size:15.5px;line-height:1.3;color:var(--titulo)}
.fluxo-dados .fd-painel{padding-top:12px;border-top:1px solid var(--fd-borda);font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.fluxo-dados .fd-painel b{display:block;font-size:15.5px;line-height:1.3;color:var(--titulo)}

/* site: o celular com a página real (recorte do mockup do topo) e o texto ao lado */
.fluxo-dados .fd-site .fd-caixa{grid-template-columns:var(--fd-cel) minmax(0,1fr);column-gap:18px;align-items:center}
.fluxo-dados .fd-site-txt{display:grid;gap:8px;align-content:center;min-width:0}
.fluxo-dados .fd-site-txt p{font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.fluxo-dados .fd-tela{position:relative;width:100%;aspect-ratio:330/686;overflow:hidden;border-radius:14% / 6.7%;background:#1C181C;box-shadow:0 18px 36px -20px rgba(0,0,0,.6)}
/* recorte do celular no mockup de 1600×1000 (ranking-dos-politicos-site-2026): o aparelho ocupa 330×686 px a partir de (1230, 294) */
.fluxo-dados .fd-tela img{position:absolute;left:-372.73%;top:-42.86%;width:484.85%;max-width:none;height:auto}

/* fios entre as etapas: no celular, um fio vertical com a ponta embaixo e o rótulo ao lado */
.fluxo-dados .fd-seta{position:relative;display:flex;align-items:center;min-height:56px;padding-left:calc(var(--fd-x) + 22px)}
.fluxo-dados .fd-seta::before{content:"";position:absolute;left:calc(var(--fd-x) - 1.5px);top:0;bottom:10px;width:3px;background:var(--oliva)}
/* ponta da seta: pseudo-elemento (não é um item da grade; a checagem de alinhamento não a confunde com um cartão) */
.fluxo-dados .fd-seta::after{content:"";position:absolute;left:calc(var(--fd-x) - 7px);bottom:0;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top:10px solid var(--oliva)}
.fluxo-dados .fd-seta-rot{font:700 11.5px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.fluxo-dados .fd-curva{display:none}
.fluxo-dados .fd-seta + .fd-kick{margin-top:6px}
/* linha de volta (manutenção): texto simples, sem o traço tracejado do .fluxo-volta da Home (nenhum fio deste desenho é tracejado) */
.fluxo-dados + .fd-volta{margin-top:22px;font-size:14px;line-height:1.45;color:var(--fg2)}

/* "Regras que viraram código": fora do desenho, depois da linha de volta. Regras da metodologia que a plataforma aplica, em texto
   de diretor (sem nome de tecnologia). Celular: uma coluna; 621+: duas; 1080+: as quatro lado a lado, com o título em cima.
   Cada regra tem um traço oliva em cima (a cor do "construímos"); as regras de uma fileira têm a mesma altura (esticadas na grade). */
.fd-regras{display:grid;gap:18px;margin-top:clamp(28px,3.5vw,40px);padding:20px 18px 22px;border:1px solid rgba(255,255,255,.17);border-radius:var(--raio);background:rgba(42,8,40,.34)}
.fd-regras-cab{display:grid;gap:6px}
.fd-regras-cab h3{font-size:clamp(1.2rem,1.7vw,1.4rem);font-weight:800;line-height:1.15;color:var(--titulo)}
.fd-regras-cab p{font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.fd-regras-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 24px}
.fd-regras-lista li{padding-top:12px;border-top:2px solid rgba(220,209,84,.6);font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.fd-regras-lista b{display:block;margin-bottom:4px;font-size:15.5px;line-height:1.3;color:var(--titulo)}
.fd-mais{margin-top:18px}
@media (min-width:621px){
  .fd-regras{padding:22px 22px 24px}
  .fd-regras-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1080px){
  .fd-regras-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:621px){
  .fluxo-dados{--fd-cel:128px}
  .fluxo-dados .fd-caminhos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fluxo-dados .fd-caminho{align-content:start}
  .fluxo-dados .fd-caminho + .fd-caminho{border-top:0;border-left:1px solid var(--fd-borda)}
  .fluxo-dados .fd-passos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  .fluxo-dados .fd-site .fd-caixa{column-gap:24px}
  .fluxo-dados .fd-site-txt{max-width:52ch}
}
/* 621 a 1079 (empilhado com as fontes em três colunas): os fios saem do meio da fileira, e não da primeira coluna; o cartão
   "No ar" junta o celular e o texto no centro, sem deixar 60% do cartão vazio */
@media (min-width:621px) and (max-width:1079px){
  .fluxo-dados .fd-seta{padding-left:calc(50% + 18px)}
  .fluxo-dados .fd-seta::before{left:calc(50% - 1.5px)}
  .fluxo-dados .fd-seta::after{left:calc(50% - 7px)}
  .fluxo-dados .fd-site .fd-caixa{grid-template-columns:var(--fd-cel) minmax(0,44ch);justify-content:center}
}

/* 1080+: cinco colunas em subgrid; os fios viram curvas (SVG com traço que não estica) e apontam para a direita */
@media (min-width:1080px){
  .fluxo-dados .fd-mapa{grid-template-columns:minmax(0,1.18fr) var(--fd-c1) minmax(0,1fr) var(--fd-c2) minmax(0,.74fr);grid-template-rows:auto repeat(3,minmax(0,1fr));row-gap:0}
  .fluxo-dados .fd-fontes{grid-column:1;grid-row:1 / 5;display:grid;grid-template-rows:subgrid}
  .fluxo-dados .fd-fontes .fd-kick{grid-row:1;align-self:end}
  .fluxo-dados .fd-caminhos{grid-row:2 / 5;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
  .fluxo-dados .fd-caminho{align-content:center;padding:16px 20px 18px}
  .fluxo-dados .fd-caminho + .fd-caminho{border-left:0;border-top:1px solid var(--fd-borda)}
  /* ponto de saída no meio de cada faixa, na borda voltada para a plataforma */
  .fluxo-dados .fd-caminho::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--oliva);box-shadow:0 0 0 4px rgba(220,209,84,.25)}

  .fluxo-dados .fd-plataforma{grid-column:2 / 4}
  .fluxo-dados .fd-site{grid-column:4 / 6}
  .fluxo-dados .fd-plataforma,.fluxo-dados .fd-site{grid-row:1 / 5;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
  .fluxo-dados .fd-plataforma .fd-kick,.fluxo-dados .fd-site .fd-kick{grid-column:2;grid-row:1;align-self:end;margin-top:0}
  /* os três cartões com a mesma altura (topo e base alinhados); o conteúdo fica no meio, onde os fios chegam */
  .fluxo-dados .fd-plataforma .fd-caixa,.fluxo-dados .fd-site .fd-caixa{grid-column:2;grid-row:2 / 5;align-self:stretch;align-content:center}
  .fluxo-dados .fd-seta{grid-column:1;grid-row:2 / 5;display:block;min-height:0;padding:0}
  .fluxo-dados .fd-seta::before{content:none}
  .fluxo-dados .fd-curva{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .fluxo-dados .fd-curva path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .fluxo-dados .fd-curva .halo{stroke:rgba(220,209,84,.16);stroke-width:14}
  .fluxo-dados .fd-curva .fio{stroke:var(--oliva);stroke-width:3}
  .fluxo-dados .fd-seta::after{left:auto;right:0;bottom:auto;top:calc(50% - 7px);border:7px solid transparent;border-right:0;border-left:11px solid var(--oliva)}
  /* rótulo em cima do fio do meio, sem encostar na curva de cima (que passa a 1/3 da altura no meio da coluna) */
  .fluxo-dados .fd-seta-rot{position:absolute;left:4px;right:12px;bottom:calc(50% + 12px);text-align:center}
  /* de 1080 a 1179 a coluna do fio é estreita: com .08em "PERFIS E NOTA" ficava a 5px do cartão */
  @media (max-width:1179px){.fluxo-dados .fd-seta-rot{left:6px;right:10px;letter-spacing:.06em}}
  /* no fio das fontes, as três curvas ocupam o meio da coluna e o rótulo cruzava a de cima: a partir de 1080 ele sai
     (é decorativo, aria-hidden; as etiquetas "1 · Fontes oficiais" e "2 · A plataforma" já dizem o que passa) */
  .fluxo-dados .fd-seta.fd-tres .fd-seta-rot{display:none}

  /* plataforma: os passos um embaixo do outro (a coluna é estreita) */
  .fluxo-dados .fd-passos{grid-template-columns:minmax(0,1fr)}
  /* site: o celular em cima, centrado, e o texto embaixo */
  .fluxo-dados .fd-site .fd-caixa{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:16px;padding:20px 16px 20px}
  .fluxo-dados .fd-site .fd-tela{width:var(--fd-cel)}
  .fluxo-dados .fd-site-txt{justify-self:stretch}
}
@media (min-width:1080px) and (max-width:1279px){
  .fluxo-dados{--fd-cel:112px}
  .fluxo-dados .fd-caminho{padding:14px 16px 16px}
  .fluxo-dados .fd-caixa{padding:16px 16px 18px}
  .fluxo-dados .fd-fonte,.fluxo-dados .fd-traz,.fluxo-dados .fd-passos li,.fluxo-dados .fd-painel,.fluxo-dados .fd-site-txt p{font-size:14px}
}

/* B5 com um número só (Ranking, 01/10/2026): o mesmo espaço de 10 px entre o período e o fio do número que o .placar-trio da Koin */
.pg-case .placar-um{display:grid;row-gap:10px}