/* Bloco "a IA faz o trabalho pesado, quem decide é uma pessoa": o fluxo real das pautas e dos posts da Olivas (fluxo 2).
   Fonte única dos passos: _docs/fluxos-n8n-para-ilustracao.md. Nenhuma ferramenta no texto visível.
   Marcação em _paginas/home.html, dentro da seção .ia (depois do Bravoflow); sprite fi-* e script de entrada na própria Home.
   Protótipo de origem: _proto/fluxo-ia.html.
   Um painel roxo (data-surf="roxo") que entra dentro de uma seção clara. Nove passos numa lista ordenada só (ol > 9 li):
     01 a 05: o fluxo e a IA preparam as pautas (cartão translúcido, fio oliva pelos ícones)
     06: PESSOA aprova a pauta (cartão oliva, com a tarefa da pauta em ilustração)
     07 e 08: a IA escreve a copy e o briefing da imagem (cartão translúcido)
     09: PESSOA aprova o post antes de publicar (cartão oliva)
   Os dois passos da pessoa são os únicos cartões cheios: é a mensagem do bloco.
   Quem faz cada passo: o ícone diz (branco = automação, anel oliva = IA, cartão oliva = pessoa) e a legenda, no topo, explica.
   Nos passos de IA e de pessoa o título já diz quem faz; nos de automação, "automação:" vai em texto só para leitor de tela.
   O número fica no começo do título (sem linha própria), para o bloco caber em ~650px a 1366 e ~1.360px a 390.
   O "cartão" de 01 a 05 e o de 07 e 08 são os fundos dos próprios li, encostados (sem vão entre eles).
   --tx = x do fio a partir da borda do li (16px de respiro + metade do ícone de 36px); o centro do ícone fica a --py + 18px do topo.
   Até 759: tudo empilhado, um fio só por todos os ícones; dentro dos cartões oliva o fio fica roxo-escuro.
   Até 619 o painel ocupa a largura toda (sem o respiro da .caixa nem cantos).
   760 a 1199: 2 x 2 (01-05 | 06 em cima; 07-08 | 09 embaixo); seta para o 06, cotovelo da base do 06 até o fio do 07, seta para o 09.
   1200+: quatro colunas (01-05 | 06 | 07-08 | 09); setas no meio da altura, entre as colunas.
   Animação: uma vez, quando o bloco entra na tela, os passos aparecem em sequência. Sem JS, com movimento reduzido
   ou já visível ao carregar, tudo aparece pronto. */
.fluxo-ia{--tx:34px;--py:8px;--G:24px;--gc:36px;--fio:3px;--fi-card:rgba(42,8,40,.36);--fi-borda:rgba(255,255,255,.17);
  position:relative;border-radius:20px;padding:clamp(24px,2.2vw,30px) clamp(20px,2.6vw,36px);box-shadow:var(--sombra)}
.fluxo-ia .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* topo */
.fluxo-ia .fi-topo{display:grid;gap:14px}
.fluxo-ia .sobre{margin-bottom:10px}
.fluxo-ia .h2{font-size:clamp(1.6rem,7.2vw,2.25rem)}  /* 360: 26px, para "A IA faz o trabalho pesado." caber numa linha */
.fluxo-ia .lead{margin-top:0;font-size:16px;line-height:1.5;max-width:54ch;text-wrap:pretty}

/* mapa */
.fluxo-ia .fi{margin-top:26px}
.fluxo-ia .fi-mapa{display:grid;grid-template-columns:minmax(0,1fr)}
.fluxo-ia .fi-passo{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;
  padding:var(--pt,var(--py)) 16px var(--pb,var(--py));background:var(--fi-card)}
.fluxo-ia .fi-passo.fi-ini{--pt:14px;border-radius:var(--raio) var(--raio) 0 0}
.fluxo-ia .fi-passo.fi-fim{--pb:14px;border-radius:0 0 var(--raio) var(--raio)}
.fluxo-ia .fi-ic{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--roxo-900)}
.fluxo-ia .fi-ia .fi-ic{background:var(--roxo-900);color:var(--oliva);box-shadow:inset 0 0 0 2px var(--oliva)}
.fluxo-ia .fi-corpo{display:grid;gap:2px;min-width:0;padding-top:8px}
.fluxo-ia .fi-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:500 12.5px/1.25 var(--fonte);letter-spacing:0;color:var(--fg2)}
.fluxo-ia .fi-n{margin-right:3px;font:700 13px/1 var(--fonte);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--oliva);vertical-align:1px}
.fluxo-ia .fi-tit{font-size:16px;font-weight:700;line-height:1.22;color:#fff;text-wrap:balance}
.fluxo-ia .fi-faz{font-size:14.5px;line-height:1.4;color:var(--fg2);text-wrap:pretty}

/* pílula "pessoa" dos dois cartões oliva (a partir de 760) */
.fluxo-ia .fi-tag{display:inline-block;padding:1px 8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font:600 12px/1.35 var(--fonte);letter-spacing:0;color:#fff;white-space:nowrap}

/* nota pequena (nova tentativa, fluxo de erro) */
.fluxo-ia .fi-nota{display:flex;align-items:flex-start;gap:7px;margin-top:4px;font-size:14px;line-height:1.35;color:var(--fg2)}
.fluxo-ia .fi-nota .ico{width:15px;height:15px;margin-top:2px;color:var(--oliva);stroke-width:2}

/* as cores da marca, no briefing da imagem (decoração) */
.fluxo-ia .fi-cores{display:flex;gap:5px;margin-top:6px}
.fluxo-ia .fi-cores i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}

/* PESSOA: o cartão cheio */
.fluxo-ia .fi-porta{--pt:16px;--pb:18px;border-radius:var(--raio);background:var(--oliva);box-shadow:0 0 0 4px rgba(220,209,84,.16),0 18px 36px -18px rgba(0,0,0,.55)}
.fluxo-ia .fi-porta .fi-ic{background:var(--roxo-900);color:var(--oliva)}
.fluxo-ia .fi-porta .fi-ic .ico{width:20px;height:20px}
.fluxo-ia .fi-porta .fi-meta{color:var(--roxo-800)}
.fluxo-ia .fi-porta .fi-n{font-size:14px;color:var(--roxo-800);vertical-align:2px}
.fluxo-ia .fi-porta .fi-meta{margin-bottom:4px}
.fluxo-ia .fi-porta .fi-tag.t-pessoa{border-color:var(--roxo-900);background:var(--roxo-900);color:var(--oliva)}
.fluxo-ia .fi-porta .fi-tit{font-size:clamp(19px,1.7vw,22px);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--roxo-900)}
.fluxo-ia .fi-porta .fi-faz{color:var(--roxo-800)}

/* a tarefa da pauta (ilustração, no espírito dos cartões .ui da Home) */
.fluxo-ia .fi-ui{width:100%;max-width:280px;margin-top:10px;overflow:hidden;border-radius:10px;background:#fff;color:var(--tinta);box-shadow:0 12px 24px -14px rgba(42,8,40,.55)}
.fluxo-ia .fi-ui-cab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 9px;background:var(--roxo-900);color:#fff;font-size:13px;line-height:1.2}
.fluxo-ia .fi-ui-cab small{margin-left:auto;padding:1px 6px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font:600 10.5px/1.4 var(--fonte);letter-spacing:.02em}
.fluxo-ia .fi-ui-corpo{display:grid;gap:6px;padding:10px 10px 11px}
.fluxo-ia .fi-ui-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:3px}
.fluxo-ia .fi-barra{display:block;height:7px;width:var(--w);border-radius:4px;background:#E6E3D8}
.fluxo-ia .fi-ui-linha{flex:1 1 140px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--tinta-2)}
.fluxo-ia .fi-medidor{flex:1;height:8px;border-radius:4px;background:#ECEAE0;overflow:hidden}
.fluxo-ia .fi-medidor i{display:block;width:78%;height:100%;border-radius:4px;background:var(--roxo)}
.fluxo-ia .fi-ui-botao{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;background:var(--roxo);color:#fff;font-size:13px;font-weight:700;line-height:1.2}
.fluxo-ia .fi-ui-botao .ico{width:14px;height:14px;stroke-width:2.6}

/* setas e cotovelo (SVG): só a partir de 760 */
.fluxo-ia .fi-seta,.fluxo-ia .fi-cotovelo{display:none;position:absolute;overflow:visible;pointer-events:none}
.fluxo-ia .fi-seta circle,.fluxo-ia .fi-seta .ponta{fill:var(--oliva)}
.fluxo-ia .fi-seta .linha,.fluxo-ia .fi-cotovelo path{fill:none;stroke:var(--oliva);stroke-width:3}
.fluxo-ia .fi-seta{filter:drop-shadow(0 0 4px rgba(220,209,84,.45))}

/* fio empilhado (até 759): de ícone a ícone, atravessando os vãos; dentro do cartão oliva o fio fica roxo-escuro */
.fluxo-ia .fi-passo::after{content:"";position:absolute;left:calc(var(--tx) - var(--fio) / 2);width:var(--fio);top:calc(var(--pt,var(--py)) + 18px);bottom:calc(-1 * (var(--py) + 18px));background:var(--oliva)}
.fluxo-ia .fi-passo.fi-fim::after{bottom:calc(-1 * var(--G))}
.fluxo-ia .fi-porta{margin-block:var(--G)}
.fluxo-ia .fi-porta::before,.fluxo-ia .fi-passo.fi-p7::before{content:"";position:absolute;left:calc(var(--tx) - var(--fio) / 2);width:var(--fio);top:0;height:calc(var(--pt,var(--py)) + 18px);background:var(--roxo-900)}
.fluxo-ia .fi-passo.fi-p7::before{background:var(--oliva)}
.fluxo-ia .fi-porta::after{bottom:calc(-1 * var(--G));background:linear-gradient(180deg,var(--roxo-900) calc(100% - var(--G)),var(--oliva) 0)}
.fluxo-ia .fi-porta.fi-p9{margin-bottom:0}
.fluxo-ia .fi-porta.fi-p9::after{content:none}

/* legenda (no topo, antes do mapa) e fecho (embaixo: o uso de todo dia e o fluxo de erro) */
.fluxo-ia .fi-topo-dir{display:grid;gap:12px}
.fluxo-ia .fi-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;line-height:1.4;color:var(--fg2)}
.fluxo-ia .fi-legenda li{display:inline-flex;align-items:center;gap:8px}
.fluxo-ia .fi-legenda b{font-weight:600;color:#fff}
/* chaves da legenda: o mesmo desenho dos ícones dos passos (branco, anel oliva, cartão oliva) */
.fluxo-ia .fi-chave{flex:none;width:16px;height:16px;border-radius:50%;background:#fff}
.fluxo-ia .fi-chave.k-ia{background:var(--roxo-900);box-shadow:inset 0 0 0 2px var(--oliva)}
.fluxo-ia .fi-chave.k-pessoa{width:22px;border-radius:5px;background:var(--oliva);box-shadow:0 0 0 3px rgba(220,209,84,.2)}
.fluxo-ia .fi-leg{display:grid;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--fi-borda)}
.fluxo-ia .fi-uso{font-size:17px;font-weight:800;line-height:1.3;color:#fff}
.fluxo-ia .fi-leg .fi-nota{margin-top:0}

/* celular: o painel ocupa a largura toda (o respiro lateral vira o do próprio painel) */
@media (max-width:619px){
  .fluxo-ia{margin-inline:calc(-1 * var(--gutter));border-radius:0;padding-inline:20px}
}
/* até 759, o cartão oliva já diz "pessoa" (está na legenda): sem a pílula, e a ilustração com uma barra só */
@media (max-width:759px){
  .fluxo-ia .fi-porta{--pt:14px;--pb:16px}
  .fluxo-ia .fi-porta .fi-meta{display:none}
  .fluxo-ia .fi-barra + .fi-barra{display:none}
  .fluxo-ia .fi{margin-top:22px}
  .fluxo-ia{--G:20px}
}
@media (max-width:359px){
  .fluxo-ia{padding-inline:16px}
  .fluxo-ia .fi-passo{padding-inline:12px}
  .fluxo-ia{--tx:30px}
}

/* 760 a 1199: 2 x 2. Em cima, 01-05 | 06; embaixo, 07-08 | 09. Sem fio entre os grupos: setas e um cotovelo */
@media (min-width:760px){
  .fluxo-ia{--G:52px}
  .fluxo-ia .fi-mapa{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:var(--gc)}
  .fluxo-ia .fi-p1{grid-column:1;grid-row:1}
  .fluxo-ia .fi-p2{grid-column:1;grid-row:2}
  /* o passo do filtro (antigo 03) saiu a pedido do Felipe (01/10/2026): o grupo de cima tem quatro linhas; as classes fi-p4…fi-p9 são só posições */
  .fluxo-ia .fi-p4{grid-column:1;grid-row:3}
  .fluxo-ia .fi-p5{grid-column:1;grid-row:4}
  .fluxo-ia .fi-p6{grid-column:2;grid-row:1 / 5}
  .fluxo-ia .fi-p7{grid-column:1;grid-row:5;margin-top:var(--G)}
  .fluxo-ia .fi-p8{grid-column:1;grid-row:6}
  .fluxo-ia .fi-p9{grid-column:2;grid-row:5 / 7;margin-top:var(--G)}
  .fluxo-ia .fi-porta{margin:0;grid-template-columns:minmax(0,1fr);align-content:center;row-gap:12px;padding:22px 22px 24px}
  .fluxo-ia .fi-porta.fi-p9{margin-top:var(--G);align-self:center}
  /* o 06 encosta na base do grupo 01-05 (o cotovelo sai da base dele) e não estica: um cartão oliva da altura do grupo pesava demais */
  .fluxo-ia .fi-porta.fi-p6{align-self:end}
  .fluxo-ia .fi-porta .fi-ic{width:44px;height:44px}
  .fluxo-ia .fi-porta .fi-ic .ico{width:22px;height:22px}
  .fluxo-ia .fi-porta::before,.fluxo-ia .fi-porta::after,.fluxo-ia .fi-passo.fi-fim::after{content:none}
  .fluxo-ia .fi-seta{display:block;top:50%;width:var(--gc);height:16px;margin-top:-8px}
  .fluxo-ia .fi-seta.s-entra{right:100%}
  .fluxo-ia .fi-seta.s-sai{display:none;left:100%}
  /* cotovelo: do meio da base do 06 até o fio do 07 (a coluna da esquerda tem 1,3 vez a largura do 06).
     O SVG é elemento substituído: left + right não o esticam, então a largura vai explícita (até o meio do 06) */
  .fluxo-ia .fi-cotovelo{display:block;top:100%;height:var(--G);left:calc(-1 * var(--gc) - 130% + var(--tx) - var(--fio) / 2);width:calc(180% + var(--gc) - var(--tx) + var(--fio) / 2)}
  .fluxo-ia .fi-cotovelo path{stroke-width:var(--fio)}
  .fluxo-ia .fi-leg{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px}
  .fluxo-ia .fi-leg .fi-nota{justify-self:end}
}

/* 1200+: quatro colunas. O 06 e o 09 ocupam a altura toda; as setas ficam no meio da altura */
@media (min-width:1200px){
  .fluxo-ia .fi-topo{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:48px;align-items:end}
  .fluxo-ia .fi-topo-dir{padding-bottom:4px}
  .fluxo-ia .fi-legenda{flex-wrap:nowrap;column-gap:16px;white-space:nowrap}  /* a legenda numa linha só */
  .fluxo-ia .fi{margin-top:24px}
  /* a coluna do 07 e 08 era a mais apertada (~125px de texto a 1366, seis linhas curtas a 1200): ganha largura dos cartões oliva
     e do respiro lateral dos passos (12px em vez de 16px, com o fio em --tx:30px); a coluna 01-05 mantém a largura de texto */
  .fluxo-ia{--tx:30px}
  .fluxo-ia .fi-passo:not(.fi-porta){padding-inline:12px;column-gap:12px}
  .fluxo-ia .fi-mapa{grid-template-columns:minmax(0,2fr) minmax(0,.87fr) minmax(0,1.16fr) minmax(0,.87fr)}
  .fluxo-ia .fi-p6{grid-column:2;grid-row:1 / 5}
  .fluxo-ia .fi-p7{grid-column:3;grid-row:1 / 3;margin-top:0}
  .fluxo-ia .fi-p8{grid-column:3;grid-row:3 / 5}
  .fluxo-ia .fi-p9{grid-column:4;grid-row:1 / 5}
  .fluxo-ia .fi-porta.fi-p9{margin-top:0}
  .fluxo-ia .fi-porta.fi-p6,.fluxo-ia .fi-porta.fi-p9{align-self:stretch}
  .fluxo-ia .fi-porta{padding:20px 12px 22px}
  .fluxo-ia .fi-porta .fi-tit{font-size:20px}
  .fluxo-ia .fi-p7 .fi-faz{text-wrap:balance}  /* coluna estreita: sem "estratégica" sozinha na última linha */  /* "06 Uma pessoa" numa linha nos 150px do cartão */
  .fluxo-ia .fi-passo.fi-p7::before{content:none}
  .fluxo-ia .fi-seta.s-sai{display:block}
  .fluxo-ia .fi-cotovelo{display:none}
}

/* animação: uma vez, os passos aparecem em sequência, do 01 ao 09 */
@media (prefers-reduced-motion:no-preference){
  .fluxo-ia .fi-armado .fi-passo{opacity:0;transform:translateY(10px)}
  .fluxo-ia .fi-armado .fi-medidor i{width:0}
  .fluxo-ia .fi-vivo .fi-passo{opacity:1;transform:none;transition:opacity .35s ease calc(var(--i,0) * .1s),transform .35s ease calc(var(--i,0) * .1s)}
  .fluxo-ia .fi-vivo .fi-medidor i{width:78%;transition:width .6s cubic-bezier(.3,.9,.4,1) .85s}
}
@media print{
  .fluxo-ia .fi-armado .fi-passo{opacity:1!important;transform:none!important}
  .fluxo-ia .fi-armado .fi-medidor i{width:78%!important}
}

/* na Home: o painel é o terceiro filho da grade do bloco de IA (.ia .caixa, duas colunas) e ocupa a largura toda, abaixo do Bravoflow */
.ia .caixa > .fluxo-ia{grid-column:1 / -1;margin-top:clamp(8px,1.4vw,16px)}