/* ═══════════════════════════════════════════════════════════
   FABIM · "Plano de Execução BIM (BEP)" — publicação.
   Conceito: o manual de operação do projeto. Herda a linguagem
   editorial das publicações (navy + azul/ciano; âmbar para alerta;
   verde da marca reservado ao bloco comercial final). Todos os
   diagramas são nativos (HTML/CSS), sem raster.
   Herda os tokens de /assets/css/styles.css. Escopo restrito a
   [data-page="conteudo-bep"] para não afetar o site.
   ═══════════════════════════════════════════════════════════ */

/* Item ativo da navegação principal */

/* Grade de coordenadas: substrato decorativo, esmaece ao longo da página */

/* Rótulo monoespaçado (padrão editorial das páginas de conteúdo) */

/* ── COLUNA DE LEITURA ──────────────────────────────────── */

/* Revelação suave no scroll: o article.js marca .art-r e liga .is-in.
   Sem JavaScript nada é escondido: o estado inicial só existe sob html.js. */

/* ── HERO ───────────────────────────────────────────────── */

/* Ficha da publicação */

/* ── BOTÕES ─────────────────────────────────────────────── */

/* Editorial: azul e ciano */

/* Comercial: verde da marca com a tinta de contraste AA do design system */

/* ── RESUMO ─────────────────────────────────────────────── */

/* ── NOTA EDITORIAL ─────────────────────────────────────── */

/* ── ÍNDICE ─────────────────────────────────────────────── */

/* ── TÍTULOS DE SEÇÃO ───────────────────────────────────── */

/* ── CITAÇÃO DE DESTAQUE ────────────────────────────────── */

/* ── DESTAQUE DE FECHO DE SEÇÃO ─────────────────────────── */

/* ── CALLOUT COM ÍCONE ──────────────────────────────────── */

/* ── FIGURA EDITORIAL (ilustrações de seção) ────────────── */

/* ── FLUXOS (5 pilares · 4 elos de processo) ─────────────── */

/* Conector: seta entre os elos (some quando o grid quebra em coluna) */

[data-page="conteudo-bep"] .art-flow-step::before {
  content: counter(flow, decimal-leading-zero); position: absolute; top: 8px; left: 10px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700; color: rgba(150, 185, 215, .6);
}

@media (max-width: 640px) {
  [data-page="conteudo-bep"] .art-flow { grid-template-columns: 1fr 1fr; }
  
}

/* Chips de quem o BEP conecta */
[data-page="conteudo-bep"] .bp-ctx {
  list-style: none; max-width: 1040px; margin: 20px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
[data-page="conteudo-bep"] .bp-ctx li {
  padding: 9px 16px; border-radius: 999px; min-height: 38px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--edge-2); color: var(--txt-2); font-size: .95rem;
}
[data-page="conteudo-bep"] .bp-ctx li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none;
}

/* ── CARTÕES EM TRÊS COLUNAS (funções · metas · retorno) ─────────────────────────── */

/* ── PAINÉIS COMPARATIVOS (LOD · cenário prático) ──────────────────────────── */
[data-page="conteudo-bep"] .bp-chain {
  max-width: 1040px; margin: 24px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px;
}
[data-page="conteudo-bep"] .bp-chain-side {
  padding: clamp(20px, 3vw, 26px); border-radius: var(--radius-l);
  background: var(--panel); border: 1px solid var(--edge-2);
}
[data-page="conteudo-bep"] .bp-chain-side--on {
  border-color: rgba(34, 211, 238, .4);
  background: linear-gradient(135deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .02));
}
[data-page="conteudo-bep"] .bp-chain-k {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sky);
}
[data-page="conteudo-bep"] .bp-chain-side--on .bp-chain-k { color: var(--cyan); }
[data-page="conteudo-bep"] .bp-chain-t { margin-top: 8px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); }
[data-page="conteudo-bep"] .bp-chain-side .bp-chain-list { margin-top: 12px; }
[data-page="conteudo-bep"] .bp-chain-link {
  align-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .35); color: var(--cyan);
}
[data-page="conteudo-bep"] .bp-chain-link svg { width: 22px; height: 22px; }
@media (max-width: 760px) {
  [data-page="conteudo-bep"] .bp-chain { grid-template-columns: 1fr; }
  [data-page="conteudo-bep"] .bp-chain-link { justify-self: center; transform: rotate(90deg); }
}

/* ── USOS BIM (3D · 4D · 5D) ───────────────────────── */

/* ── COLUNAS EM CONTRASTE (expectativa × realidade · gaveta × vivo) ──────────────────────────── */
[data-page="conteudo-bep"] .bp-balance {
  max-width: 1140px; margin: 24px auto 0;
  /* min(Npx, 100%): em 320 CSS px sobram 265 px no pg-wrap, entao um piso fixo
     de 290/300 px estourava a viewport. Acima do piso o min() e um no-op. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px;
}
[data-page="conteudo-bep"] .bp-bal-col { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-l); }
[data-page="conteudo-bep"] .bp-bal-col--risk {
  background: linear-gradient(150deg, rgba(245, 166, 35, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(245, 166, 35, .3); border-left: 4px solid var(--amber);
}
[data-page="conteudo-bep"] .bp-bal-col--gov {
  background: linear-gradient(150deg, rgba(56, 189, 248, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(56, 189, 248, .32); border-left: 4px solid var(--sky);
}
[data-page="conteudo-bep"] .bp-bal-t {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1);
}
[data-page="conteudo-bep"] .bp-bal-t svg { width: 21px; height: 21px; flex: none; }
[data-page="conteudo-bep"] .bp-bal-col--risk .bp-bal-t svg { color: var(--amber); }
[data-page="conteudo-bep"] .bp-bal-col--gov .bp-bal-t svg { color: var(--sky); }
[data-page="conteudo-bep"] .bp-bal-col ul { list-style: none; margin-top: 14px; display: grid; gap: 12px; }
[data-page="conteudo-bep"] .bp-bal-col li { font-size: .98rem; line-height: 1.58; color: var(--txt-2); }
[data-page="conteudo-bep"] .bp-bal-col li strong { display: block; color: var(--txt-1); }

/* ── SÍNTESE DOS PILARES ───────────────────────────────────────── */

/* Fecho editorial */

/* ── SOBRE O AUTOR ──────────────────────────────────────── */

/* ── CONTEÚDOS RELACIONADOS ─────────────────────────────── */

/* ── CTA COMERCIAL ──────────────────────────────────────── */

/* ── FOCO VISÍVEL ───────────────────────────────────────── */
[data-page="conteudo-bep"] .art-btn:focus-visible,
[data-page="conteudo-bep"] .art-toc-list a:focus-visible,
[data-page="conteudo-bep"] .art-toc-box > summary:focus-visible,
[data-page="conteudo-bep"] .art-rel-card h3 a:focus-visible,
[data-page="conteudo-bep"] .art-author-link:focus-visible,
[data-page="conteudo-bep"] .art-crumb a:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px;
}

/* ── RESPONSIVO ─────────────────────────────────────────── */

/* ── IMPRESSÃO DOS DIAGRAMAS DESTE TEXTO ────────────────── */
/* Só o que é `bp-`. O cromo global (cabeçalho, rodapé, WhatsApp, @page, papel
   branco, URL de link externo) está em assets/css/styles.css e os componentes
   `art-` em assets/css/editorial.css: as duas bases estavam copiadas aqui e
   em mais quatro folhas, e era por isso que elas divergiam em silêncio. */
@media print {
  [data-page="conteudo-bep"] .bp-chain-k { color: #555 !important; }

  [data-page="conteudo-bep"] .bp-chain,
  [data-page="conteudo-bep"] .bp-balance { max-width: 100% !important; }

  [data-page="conteudo-bep"] .bp-chain-side,
  [data-page="conteudo-bep"] .bp-bal-col { break-inside: avoid; page-break-inside: avoid; }

  /* Riscos e contrapesos continuam distintos no preto e branco: a base de
     impressão derruba o fundo colorido das duas colunas, então quem separa
     uma da outra passa a ser a borda contínua contra a tracejada. */
  [data-page="conteudo-bep"] .bp-bal-col--risk { border-left: 4px solid #333 !important; }
  [data-page="conteudo-bep"] .bp-bal-col--gov { border-left: 4px dashed #333 !important; }
}

/* ── VARIANTES DO FLUXO (5 pilares · 4 elos) ─────────────── */
[data-page="conteudo-bep"] .bp-flow--5 { grid-template-columns: repeat(5, 1fr); }
[data-page="conteudo-bep"] .bp-flow--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  [data-page="conteudo-bep"] .bp-flow--5,
  [data-page="conteudo-bep"] .bp-flow--4 { grid-template-columns: 1fr 1fr; }
  [data-page="conteudo-bep"] .bp-flow--5 .art-flow-step::after,
  [data-page="conteudo-bep"] .bp-flow--4 .art-flow-step::after { display: none; }
}

/* ── LISTAS DOS PAINÉIS COMPARATIVOS (LOD · cenário prático) ── */
[data-page="conteudo-bep"] .bp-chain-list { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
[data-page="conteudo-bep"] .bp-chain-list li { position: relative; padding-left: 22px; font-size: .98rem; line-height: 1.58; color: var(--txt-2); }
[data-page="conteudo-bep"] .bp-chain-list li::before { content: ''; position: absolute; left: 0; top: .52em; width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--sky); }
[data-page="conteudo-bep"] .bp-chain-list li strong { color: var(--txt-1); }

/* O BEP nao tinha corte nenhum abaixo de 1100 px: .art-flow e as variantes
   --4/--5 ficavam em duas colunas ate 0 px, entao o iPhone de 375 lia os elos
   espremidos lado a lado. Precisa vir DEPOIS do bloco de 1100 px
   das variantes: mesma especificidade, quem decide e a ordem. A ficha entra
   junto porque .art-meta e repeat(2, ...) fixo, sem override responsivo. */
@media (max-width: 400px) {
  [data-page="conteudo-bep"] .art-flow,
  [data-page="conteudo-bep"] .bp-flow--5,
  [data-page="conteudo-bep"] .bp-flow--4,
  [data-page="conteudo-bep"] .art-meta { grid-template-columns: minmax(0, 1fr); }
}