/* Bloco "Por dentro" da página de integração de sistemas (#por-dentro): o fluxo real "a venda no CRM vira sinal para a mídia".
   Fonte única dos passos: _docs/fluxos-n8n-para-ilustracao.md (fluxo 1). Nenhuma ferramenta no texto visível.
   Marcação em _paginas/servico.html (sprite fr-i-*, marcadores fr-seta e fr-seta-off, e o script de entrada no fim da página).
   Protótipo de origem: _proto/fluxo-capi.html.
   Geometria (1000px+): cinco colunas (cartão A | vão | meio | vão | cartão B) e quatro linhas de altura igual (1fr).
     Como as linhas são iguais, o ícone do passo 4 fica a 75% + --ty da altura e o do passo 6 a --ty: os conectores
     (SVG sem viewBox, com coordenadas em %) são posicionados por CSS, sem JS.
   Até 999px: um fio só, de cima a baixo; o passo 5 mostra o ramo do histórico entrando no fio, o "não" saindo e o "sim" seguindo.
   Ramo "se algo falhar": no celular, um tracejado ao lado de todos os passos; no desktop, um colchete sob os dois cartões.
   --px/--py: respiro do cartão até o ícone; --tx/--ty: centro do ícone (x a partir da borda do passo, y a partir do topo);
   --tc: onde o texto começa; --g1/--g2: vãos à esquerda e à direita do meio (o da direita é mais largo porque leva a ficha "sim", com folga dos dois lados);
   --M: largura do meio (histórico, decisão e "não", todos com a mesma largura). */
.fluxo-real{--ic:36px;--px:16px;--py:10px;--gp:12px;--tx:calc(var(--px) + var(--ic) / 2);--ty:calc(var(--py) + var(--ic) / 2);--tc:calc(var(--px) + var(--ic) + var(--gp));--fio:3px;--g1:36px;--g2:64px;--M:200px;--fr-card:rgba(42,8,40,.34);--fr-borda:rgba(255,255,255,.17);--fr-txt:rgba(255,255,255,.86);--fr-off:rgba(255,255,255,.66);--brilho:drop-shadow(0 0 5px rgba(220,209,84,.5))}
.fluxo-real .lead{max-width:none}
.fluxo-real .fr{margin-top:clamp(18px,1.6vw,22px)}
.fluxo-real .fr-painel{position:relative;color:#fff;background:radial-gradient(120% 140% at 85% 0%,#9B2C95 0%,var(--roxo) 35%,var(--roxo-900) 100%);border-radius:18px;padding:16px 14px 18px 12px;box-shadow:var(--sombra)}
.fluxo-real .fr-corpo{position:relative}
.fluxo-real svg{overflow:visible}
.fluxo-real .fr-l{stroke:var(--oliva);stroke-width:var(--fio);stroke-linecap:square;fill:none}
.fluxo-real .fr-l-tr{stroke-dasharray:5 6;stroke-width:2;stroke-linecap:butt}
.fluxo-real .fr-l-off{stroke:var(--fr-off)}

/* passos: celular primeiro (um fio só) */
.fluxo-real .fr-passos{position:relative;margin:0;padding:0 0 0 18px;list-style:none}
.fluxo-real .fr-p{position:relative;z-index:1;padding:var(--py) 6px 10px var(--tc);min-height:calc(var(--py) + var(--ic) + 10px)}
.fluxo-real .fr-bola{position:absolute;z-index:2;left:var(--px);top:var(--py);width:var(--ic);height:var(--ic);border-radius:50%;background:#fff;color:var(--roxo-900);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(42,8,40,.4)}
.fluxo-real .fr-bola svg,.fluxo-real .fr-caixa > svg,.fluxo-real .fr-cab svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fluxo-real .fr-bola svg{width:20px;height:20px}
.fluxo-real .fr-fio{position:absolute;z-index:0;left:var(--tx);top:var(--ty);width:1px;height:100%;filter:var(--brilho)}
.fluxo-real .fr-t{padding-top:7px;font-weight:700;font-size:16px;line-height:1.3;color:#fff}
.fluxo-real .fr-n{font:700 13px/1 var(--fonte);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--oliva);margin-right:7px}
.fluxo-real .fr-d{margin-top:3px;font-size:14.5px;line-height:1.42;color:var(--fr-txt);text-wrap:pretty}
.fluxo-real .fr-tag{display:inline-block;vertical-align:2px;margin-left:8px;padding:4px 8px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font:700 11.5px/1 var(--fonte);letter-spacing:.04em}
/* proteger os dados (LGPD): o passo em destaque */
.fluxo-real .fr-lgpd::before{content:"";position:absolute;z-index:-1;inset:3px 0 5px calc(var(--px) - 9px);border-radius:12px;background:rgba(220,209,84,.14);box-shadow:inset 0 0 0 1.5px var(--oliva)}
.fluxo-real .fr-lgpd .fr-bola{background:var(--oliva)}
.fluxo-real .fr-lgpd .fr-d{color:#fff}
.fluxo-real .fr-entra{display:none}
/* tablet em pé: as caixas do passo 5 e a do "se algo falhar" não esticam até a borda */
@media (min-width:600px) and (max-width:999px){.fluxo-real .fr-decisao > div,.fluxo-real .fr-nao .fr-caixa,.fluxo-real .fr-falha .fr-caixa{max-width:460px}}

/* passo 5: a decisão (cartão claro, como as telas da Home) */
.fluxo-real .fr-decisao{display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.fluxo-real .fr-hist{order:-1}
.fluxo-real .fr-no{position:relative;background:#fff;color:var(--roxo-900);border-radius:12px;box-shadow:0 14px 30px -16px rgba(0,0,0,.6),0 0 0 4px rgba(42,8,40,.3)}
.fluxo-real .fr-cab{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px 12px 0 0;background:var(--roxo-900);color:#fff;font:600 13px/1.2 var(--fonte);letter-spacing:0}
.fluxo-real .fr-cab .fr-n{margin:0}
.fluxo-real .fr-q{padding:9px 12px 11px;font-weight:700;font-size:16px;line-height:1.3}
.fluxo-real .fr-losango{position:absolute;z-index:2;left:calc(var(--tx) - 20px - var(--tc));top:-6px;width:40px;height:40px}
.fluxo-real .fr-losango .fr-los{fill:#fff;stroke:var(--oliva);stroke-width:3}
.fluxo-real .fr-losango .fr-gar{fill:none;stroke:var(--roxo-900);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fluxo-real .fr-saidas{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.fluxo-real .fr-nao{position:relative;order:-1}
.fluxo-real .fr-sim{align-self:flex-start;position:relative;z-index:2;margin-left:calc(var(--tx) - var(--tc));transform:translateX(-50%)}
.fluxo-real .fr-ficha{display:inline-block;padding:4px 9px;border:1.5px solid var(--oliva);border-radius:999px;background:var(--roxo-900);color:#fff;font:600 12.5px/1.2 var(--fonte);white-space:nowrap;box-shadow:0 0 0 4px rgba(42,8,40,.35)}

/* ramos: caixas tracejadas */
.fluxo-real .fr-caixa{position:relative;z-index:1;display:flex;align-items:flex-start;gap:9px;margin:0;padding:9px 12px 10px;border:1.5px dashed var(--fr-off);border-radius:10px;background:rgba(42,8,40,.62);font-size:14px;line-height:1.4;color:var(--fr-txt)}
.fluxo-real .fr-caixa > svg{flex:none;width:20px;height:20px;color:var(--fr-off)}
.fluxo-real .fr-caixa b{color:#fff}
.fluxo-real .fr-hist{position:relative}
.fluxo-real .fr-hist .fr-caixa{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:9px;border-color:var(--oliva)}
.fluxo-real .fr-hist .fr-caixa > svg{color:var(--oliva)}
.fluxo-real .fr-hist .fr-caixa > span{display:contents}
.fluxo-real .fr-hist .fr-caixa b{align-self:center}
.fluxo-real .fr-hist .fr-caixa i{grid-column:1 / -1;margin-top:3px;font-style:normal}
.fluxo-real .fr-tr-h{position:absolute;top:50%;left:calc(var(--tx) - var(--tc));width:calc(var(--tc) - var(--tx));height:1px}
.fluxo-real .fr-tr-v{display:none}

/* se algo falhar: no celular, tracejado ao lado de todos os passos até a caixa */
.fluxo-real .fr-falha{position:relative;margin-top:6px;padding-left:20px}
.fluxo-real .fr-falha .fr-caixa{align-items:center;min-height:42px;padding-block:0;white-space:nowrap;background:var(--roxo-900)}
.fluxo-real .fr-bus{position:absolute;left:3px;top:var(--ty);width:17px;height:calc(100% - var(--ty) - 21px)}
.fluxo-real .fr-bus-d{display:none}

/* legenda e marca de ilustração (uma vez só) */
.fluxo-real figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.fluxo-real .fr-ilustra{display:inline-block;margin-right:8px;padding:3px 8px;border:1px solid var(--roxo);border-radius:999px;color:var(--roxo);font:600 11px/1.3 var(--fonte);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* ---------- 1000px+: cartão A | vão | meio | vão | cartão B ---------- */
@media (min-width:1000px){
  .fluxo-real{--g1:36px;--g2:64px;--M:200px}
  .fluxo-real .fr-painel{padding:18px 22px 16px}
  .fluxo-real .fr-passos{padding:0;display:grid;grid-template-columns:minmax(0,1fr) var(--g1) var(--M) var(--g2) minmax(0,1fr);grid-template-rows:repeat(4,1fr)}
  .fluxo-real .fr-passos::before,.fluxo-real .fr-passos::after{content:"";grid-row:1 / 5;background:var(--fr-card);border:1px solid var(--fr-borda);border-radius:14px}
  .fluxo-real .fr-passos::before{grid-column:1}
  .fluxo-real .fr-passos::after{grid-column:5}
  .fluxo-real .fr-p{padding-right:14px;padding-bottom:8px}
  .fluxo-real .fr-p:nth-child(-n+4){grid-column:1}
  .fluxo-real .fr-p:nth-child(n+6){grid-column:5}
  .fluxo-real .fr-p:nth-child(1),.fluxo-real .fr-p:nth-child(6){grid-row:1}
  .fluxo-real .fr-p:nth-child(2),.fluxo-real .fr-p:nth-child(7){grid-row:2}
  .fluxo-real .fr-p:nth-child(3),.fluxo-real .fr-p:nth-child(8){grid-row:3}
  .fluxo-real .fr-p:nth-child(4),.fluxo-real .fr-p:nth-child(9){grid-row:4}
  .fluxo-real .fr-so-movel{display:none}
  .fluxo-real .fr-lgpd::before{inset:3px 7px 4px 7px}
  .fluxo-real .fr-entra{display:block;position:absolute;left:0;top:var(--ty);width:var(--px);height:1px}
  /* o meio: histórico em cima, decisão no centro exato, o "não" embaixo */
  .fluxo-real .fr-decisao{grid-column:2 / 5;grid-row:1 / 5;display:grid;grid-template-columns:var(--g1) var(--M) var(--g2);grid-template-rows:1fr auto 1fr;gap:0;padding:0}
  .fluxo-real .fr-hist{grid-area:1 / 2;display:flex;flex-direction:column;padding-top:var(--py)}
  .fluxo-real .fr-no{grid-area:2 / 2}
  .fluxo-real .fr-saidas{grid-area:3 / 2;gap:0;padding-bottom:var(--py)}
  .fluxo-real .fr-nao{flex:1;display:flex;flex-direction:column}
  .fluxo-real .fr-tr-h{display:none}
  .fluxo-real .fr-tr-v{display:block;flex:1 0 16px;width:100%;min-height:16px}
  .fluxo-real .fr-losango{position:static;flex:none;width:22px;height:22px;margin:-2px 0 -2px -3px}
  .fluxo-real .fr-losango .fr-los{stroke-width:3.5}
  .fluxo-real .fr-sim{position:absolute;margin:0;left:calc(var(--g1) + var(--M) + var(--g2) / 2);top:calc(25% + var(--ty) / 2);transform:translate(-50%,-50%)}
  .fluxo-real .fr-con{display:block;position:absolute;z-index:0;filter:var(--brilho)}
  .fluxo-real .fr-con-a{left:0;width:var(--g1);top:50%;height:calc(25% + var(--ty))}
  .fluxo-real .fr-con-b{left:calc(var(--g1) + var(--M));width:var(--g2);top:var(--ty);height:calc(50% - var(--ty))}
  /* se algo falhar: colchete sob os dois cartões */
  /* a caixa fica no eixo da decisão (mesmas colunas), maior que o meio e centrada nele */
  .fluxo-real .fr-falha{margin-top:12px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) var(--g1) var(--M) var(--g2) minmax(0,1fr)}
  .fluxo-real .fr-falha .fr-caixa{grid-column:3;justify-self:center;width:max-content}
  .fluxo-real .fr-bus-m{display:none}
  .fluxo-real .fr-bus-d{display:block;position:absolute;left:26px;width:calc(100% - 52px);top:auto;bottom:21px;height:33px}
}
@media (max-width:999px){.fluxo-real .fr-con{display:none}}
/* telas de 360px: a etiqueta LGPD fica com folga da borda do destaque */
@media (max-width:374px){.fluxo-real .fr-tag{margin-left:4px;padding-inline:6px;letter-spacing:.03em}}
@media (min-width:1200px){.fluxo-real{--g1:40px;--g2:72px;--M:240px}.fluxo-real .fr-painel{padding:16px 24px 14px}}

/* entrada: uma vez só, em sequência; sem JS ou com movimento reduzido, tudo já aparece */
@media (prefers-reduced-motion:no-preference){
  .fluxo-real .fr.armado .fr-p,.fluxo-real .fr.armado .fr-falha{opacity:.12;transform:translateY(8px)}
  .fluxo-real .fr.armado.vivo .fr-p,.fluxo-real .fr.armado.vivo .fr-falha{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
  .fluxo-real .fr.vivo .fr-p:nth-child(2){transition-delay:60ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(3){transition-delay:120ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(4){transition-delay:180ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(5){transition-delay:240ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(6){transition-delay:300ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(7){transition-delay:360ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(8){transition-delay:420ms}
  .fluxo-real .fr.vivo .fr-p:nth-child(9){transition-delay:480ms}
  .fluxo-real .fr.vivo .fr-falha{transition-delay:540ms}
}

@media print{
  .fluxo-real .fr.armado .fr-p,.fluxo-real .fr.armado .fr-falha{opacity:1!important;transform:none!important}
}

/* depois do fluxo: "o que olhar num fluxo como este" (a lista .leitura vem do previa-servico.css); duas colunas de 640 a 1199, quatro a partir de 1200
   (a 1024, quatro colunas davam ~170px de texto e linhas de duas palavras) */
.fluxo-real .leitura-box{margin-top:clamp(30px,3.6vw,48px)}
@media (min-width:640px){
  .fluxo-real .leitura{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,36px)}
}
@media (min-width:1200px){
  .fluxo-real .leitura{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .fluxo-real .leitura li{padding:16px 0 0 40px;border-bottom:0;border-top:1px solid var(--linha)}
  .fluxo-real .leitura li::before{top:15px}
}