/* ══ BLOG — índice e artigo ═══════════════════════════════════════════════════
   Carrega depois de styles.css + interna.css e só acrescenta o que é do blog.
   Duas decisões que valem explicação:
   · a coluna de leitura do artigo é estreita (720px) mesmo em telas largas —
     linha longa demais cansa e derruba o tempo de permanência, que é sinal de
     qualidade para busca;
   · a capa do cartão é gradiente da marca, não foto genérica de banco de imagem.
     Quando houver foto real do artigo, basta preencher `img` no js/data.js que
     ela entra no lugar sem mexer aqui.                                        */

/* ── Índice ─────────────────────────────────────────────── */
.bl-hero h1 { max-width: 14em; }

.bl-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.bl-fil {
  font-family: var(--corpo-f); font-size: 13px; font-weight: 600; color: var(--corpo);
  background: #fff; border: 1.5px solid var(--borda); border-radius: 999px;
  padding: 8px 18px; cursor: pointer; transition: all var(--transition);
}
.bl-fil:hover { border-color: var(--teal); color: var(--titulo); }
.bl-fil.atual { background: var(--grad); color: #fff; border-color: transparent; }
.bl-pagina-lbl { font-size: 13px; color: #8A93A6; margin-bottom: 22px; }

.bl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.bl-card { display: flex; }
.bl-card-a {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bl-card-a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.bl-capa {
  position: relative; height: 168px; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 14px;
}
.bl-capa-chev {
  position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M0 40 L30 20 L60 40" fill="none" stroke="%23ffffff" stroke-width="1.5"/></svg>');
  background-size: 60px 60px;
}
.bl-cat {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 999px;
}
.bl-card-in { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.bl-card-tit {
  font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--titulo); margin-bottom: 9px;
}
.bl-card-a:hover .bl-card-tit { color: var(--azul); }
.bl-card-res { font-size: 14px; line-height: 1.6; color: var(--corpo); margin-bottom: 16px; }
.bl-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8A93A6; margin-top: auto; }
.bl-ponto { width: 3px; height: 3px; border-radius: 50%; background: #C3CAD8; display: inline-block; }
.bl-card-cta { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--teal); }
.bl-vazio { text-align: center; color: #8A93A6; font-size: 14px; padding: 40px 0; }
.bl-limpar { background: none; border: 0; color: var(--azul); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ── Paginação ──────────────────────────────────────────── */
.bl-pag { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.bl-pag-b {
  font-size: 13.5px; font-weight: 600; color: var(--azul); text-decoration: none;
  border: 1.5px solid var(--borda); border-radius: 10px; padding: 9px 16px; background: #fff;
  transition: border-color var(--transition);
}
.bl-pag-b:hover { border-color: var(--teal); }
.bl-pag-b.off { color: #C3CAD8; border-color: #EDF1F7; pointer-events: none; }
.bl-pag-ns { display: flex; gap: 6px; }
.bl-pag-i {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--corpo);
  text-decoration: none; border: 1.5px solid var(--borda); background: #fff;
}
.bl-pag-i:hover { border-color: var(--teal); color: var(--titulo); }
.bl-pag-i.atual { background: var(--grad); color: #fff; border-color: transparent; }

/* ── Artigo ─────────────────────────────────────────────── */
/* ── Banner com foto + CAMADA DE LEITURA ───────────────────────────────────
   O problema de banner com foto é sempre o mesmo: o texto some quando a imagem
   é clara, ou o contraste é imprevisível de uma foto para outra. Por isso não
   se usa "escurecer um pouco" — usa-se um véu em duas camadas:
     1. um tint com o gradiente da marca (mantém a identidade e uniformiza fotos
        de temperaturas diferentes);
     2. um degradê preto que ganha força embaixo, onde ficam título e metadados.
   O resultado é contraste previsível com qualquer imagem — e a foto continua
   visível, porque a intenção é ambientar, não decorar por decorar. */
.bl-post-hero h1 { max-width: 15em; }
.bl-hero-img {
  padding-top: clamp(64px, 9vw, 104px); padding-bottom: clamp(56px, 8vw, 92px);
}
/* a foto é um <img> real (indexável, com alt) posicionado como fundo */
.bl-hero-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.bl-hero-img::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* CAMADA ÚNICA em azul escuro da marca (#1E2F66) — a versão anterior somava
     dois véus e deixava passar só ~15% da foto; esta deixa ~32% no topo, então a
     imagem realmente aparece.
     As opacidades são o mínimo medido, não estimado: simulando foto 100% branca
     (pior caso), .68 no topo dá 4,8:1 de contraste — acima do mínimo de 4,5:1 da
     WCAG AA. Abaixar mais reprova e o "← Blog" começa a sumir em foto clara. */
  background: linear-gradient(180deg,
    rgba(30,47,102,.68) 0%,
    rgba(30,47,102,.72) 55%,
    rgba(30,47,102,.80) 100%);
}
/* o conteúdo fica acima do véu; o padrão de ondas sai quando há foto —
   duas texturas concorrendo tiram a leitura e sujam a imagem */
.bl-hero-img > .wrap { position: relative; z-index: 2; }
.bl-hero-img > .chev { display: none; }

/* Foto muito clara (fundo branco, neve, céu): reforça o véu sem mudar o tom.
   Basta marcar `heroClaro: true` no post — sem isso, o padrão já resolve. */
.bl-hero-img.claro::after {
  background: linear-gradient(180deg,
    rgba(30,47,102,.78) 0%,
    rgba(30,47,102,.82) 55%,
    rgba(30,47,102,.88) 100%);
}
.bl-post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,.78);
}
.bl-post-meta strong { color: #fff; font-weight: 600; }
.bl-post-meta .bl-ponto { background: rgba(255,255,255,.4); }

/* ── Layout do artigo: largura da página, em duas colunas ──────────────────
   Ocupar a largura toda com uma coluna só de texto daria linhas de ~150
   caracteres — o olho perde a volta e a leitura cai. Então a largura cheia é
   aproveitada com apoio à direita (sumário, serviço, diagnóstico) que acompanha
   a rolagem, e o texto segue numa medida confortável. */
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; align-items: start; }
.bl-main { min-width: 0; }
.bl-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.bl-faq-wrap { max-width: 860px; }

.bl-side .bl-toc { margin-bottom: 0; }
.bl-serv-card, .bl-diag-card {
  border: 1px solid var(--borda); border-radius: 14px; padding: 20px 22px; background: #fff;
}
.bl-diag-card { background: linear-gradient(135deg, #F2FBFA, #F3F6FD); border-color: #DCE9F7; }
.bl-serv-card h3, .bl-diag-card h3 {
  font-family: var(--display); font-size: 17px; color: var(--titulo); margin-bottom: 6px; line-height: 1.3;
}
.bl-serv-card p, .bl-diag-card p { font-size: 13.5px; line-height: 1.55; color: var(--corpo); margin-bottom: 14px; }
.bl-serv-btn { display: inline-block; width: 100%; text-align: center; font-size: 13.5px; padding: 11px 16px; }

.bl-resposta {
  background: linear-gradient(135deg, #F2FBFA, #F3F6FD);
  border: 1px solid #DCE9F7; border-left: 4px solid var(--teal);
  border-radius: 14px; padding: 20px 24px; margin-bottom: 30px;
}
.bl-resposta-lbl {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #2E8F89; margin-bottom: 7px;
}
.bl-resposta p { font-size: 16.5px; line-height: 1.65; color: #33405A; margin: 0; }

.bl-toc {
  border: 1px solid var(--borda); border-radius: 14px; padding: 18px 22px;
  margin-bottom: 34px; background: #FBFCFE;
}
.bl-toc strong {
  display: block; font-family: var(--display); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--titulo); margin-bottom: 10px;
}
.bl-toc ol { margin: 0; padding-left: 20px; }
.bl-toc li { font-size: 14.5px; line-height: 1.9; }
.bl-toc a { color: var(--corpo); text-decoration: none; }
.bl-toc a:hover { color: var(--azul); text-decoration: underline; }

.bl-corpo { font-size: 17px; line-height: 1.78; color: #3E4757; }
/* em tela larga a fonte cresce: com 760px de coluna, 18px devolve ~84
   caracteres por linha (17px dava 89, no limite do desconfortável) */
@media (min-width: 1200px) { .bl-corpo { font-size: 18px; } }
.bl-p { margin-bottom: 20px; }
.bl-corpo strong { color: var(--titulo); font-weight: 600; }
.bl-corpo a { color: var(--azul); }
.bl-h2 {
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 27px); font-weight: 700;
  color: var(--titulo); line-height: 1.25; margin: 42px 0 14px; scroll-margin-top: 90px;
}
.bl-h3 {
  font-family: var(--display); font-size: 18.5px; font-weight: 600;
  color: var(--titulo); margin: 30px 0 10px;
}
.bl-ul, .bl-ol { margin: 0 0 22px; padding-left: 22px; }
.bl-ul li, .bl-ol li { margin-bottom: 10px; padding-left: 4px; }
.bl-ul li::marker { color: var(--teal); }
.bl-ol li::marker { color: var(--teal); font-weight: 700; }
.bl-quote {
  border-left: 3px solid var(--teal); padding: 6px 0 6px 22px; margin: 30px 0;
  font-family: var(--display); font-size: 19px; line-height: 1.55; color: var(--titulo); font-style: italic;
}
.bl-destaque {
  background: #FFF8EE; border: 1px solid #F2E2C6; border-radius: 14px;
  padding: 18px 22px; margin: 30px 0; font-size: 15.5px; line-height: 1.65; color: #5A4A24;
}
.bl-destaque strong { color: #3F3417; }

/* Tabela comparativa — o formato que a IA extrai com mais facilidade, porque
   cada linha é um fato completo. Rola sozinha no celular em vez de espremer. */
.bl-tabela-wrap { overflow-x: auto; margin: 30px 0 10px; -webkit-overflow-scrolling: touch; }
.bl-tabela { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.bl-tabela th, .bl-tabela td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.bl-tabela thead th {
  font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--grad); border: 0;
}
.bl-tabela thead th:first-child { border-radius: 10px 0 0 0; }
.bl-tabela thead th:last-child { border-radius: 0 10px 0 0; }
.bl-tabela tbody th { font-weight: 600; color: var(--titulo); background: #FBFCFE; width: 26%; }
.bl-tabela tbody tr:last-child th, .bl-tabela tbody tr:last-child td { border-bottom: 0; }
.bl-fonte { font-size: 12.5px; color: #8A93A6; margin: 0 0 26px; }

/* Dado com fonte: a pesquisa de GEO mostra que estatística ATRIBUÍDA é o que
   mais aumenta a chance de citação por IA — então ela ganha destaque próprio. */
.bl-dado {
  margin: 30px 0; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(135deg, #F2FBFA, #F3F6FD);
  border: 1px solid #DCE9F7; border-left: 4px solid var(--teal);
}
.bl-dado strong {
  display: block; font-family: var(--display); font-size: 19px; line-height: 1.45;
  color: var(--titulo); font-weight: 600;
}
.bl-dado figcaption { margin-top: 9px; font-size: 12.5px; color: #6A7286; }

/* Imagem no corpo: largura total da coluna, com legenda. O aspect-ratio vem das
   medidas declaradas no HTML, então o espaço já fica reservado antes de carregar
   — é o que evita o texto "pular" (Cumulative Layout Shift). */
.bl-fig { margin: 32px 0; }
.bl-fig img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--borda); background: #FBFCFE;
}
.bl-fig figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: #8A93A6;
  padding-left: 2px; border-left: 3px solid var(--teal); padding-left: 12px;
}

.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--borda); }
.bl-tag {
  font-size: 12px; font-weight: 600; color: var(--azul); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 999px; padding: 5px 13px;
}
.bl-atualizado { font-size: 12.5px; color: #8A93A6; margin-top: 14px; }

.bl-serv {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--borda); border-radius: var(--radius); padding: 24px 26px; background: #fff;
  box-shadow: var(--shadow-sm);
}
.bl-serv-lbl {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}
.bl-serv h3 { font-family: var(--display); font-size: 19px; color: var(--titulo); margin-bottom: 5px; }
.bl-serv p { font-size: 14.5px; color: var(--corpo); margin: 0; max-width: 46ch; }

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* a coluna de apoio deixa de ser lateral e vira bloco antes do texto */
  .bl-layout { grid-template-columns: 1fr; gap: 26px; }
  .bl-side { position: static; order: -1; }
  .bl-side .bl-diag-card { display: none; }   /* o CTA do fim da página já cobre */
}
@media (max-width: 980px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-corpo { font-size: 16.5px; }
  .bl-resposta { padding: 17px 18px; }
  .bl-serv { flex-direction: column; align-items: flex-start; }
  .bl-pag { gap: 10px; }
  .bl-pag-b { padding: 8px 13px; font-size: 13px; }
}

/* ── Impressão (o artigo vira PDF legível) ──────────────── */
@media print {
  .bl-filtros, .bl-pag, .bl-card-cta, .in-cta-sec { display: none !important; }
  .bl-corpo { font-size: 12pt; }
  .bl-post-hero { background: none !important; color: #000 !important; }
}