/*
Theme Name: CRF Contabilidade
Theme URI: https://crfcontabilidade.com.br
Author: CRF Contabilidade
Description: Tema institucional da CRF Contabilidade, construido sobre o Manual de Identidade Visual v1.0. Serviços, Diferenciais e FAQ são editáveis pelo painel, sem plugins.
Version: 2.7.1
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crf
*/
/* ==========================================================================
   CRF Contabilidade — folha de estilo principal
   Tokens extraídos do Manual de Identidade Visual v1.0 (2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores institucionais */
  --azul: #1F415D;
  --azul-escuro: #16314A;
  --azul-claro: #2C5878;
  --verde: #B8D94A;
  --verde-hover: #A6C63C;

  /* Verde escurecido só para TEXTO sobre fundo claro.
     O #B8D94A puro tem contraste 1.7:1 sobre branco e reprova em acessibilidade;
     este tom mantém a matiz da marca e atinge 4.5:1 (WCAG AA). */
  --verde-texto: #6F8C1C;

  /* Neutros de apoio */
  --branco: #FFFFFF;
  --cinza-claro: #F5F6F7;
  --cinza-medio: #D9DEE2;
  --cinza-escuro: #5F6772;

  /* Papéis semânticos */
  --texto: var(--azul);
  --texto-suave: var(--cinza-escuro);
  --fundo: var(--branco);
  --fundo-alt: var(--cinza-claro);
  --borda: var(--cinza-medio);

  /* Tipografia */
  --fonte: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --peso-legenda: 300;
  --peso-texto: 400;
  --peso-botao: 500;
  --peso-titulo: 600;
  --peso-destaque: 700;

  /* Escala tipográfica fluida */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);

  /* Espaçamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;

  /* Formas — o manual pede botões arredondados e cantos suaves */
  --raio-sm: 8px;
  --raio: 14px;
  --raio-lg: 24px;
  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(31, 65, 93, 0.06);
  --sombra: 0 4px 16px rgba(31, 65, 93, 0.08);
  --sombra-lg: 0 12px 40px rgba(31, 65, 93, 0.12);

  --container: 1180px;
  --header-h: 76px;
  --transicao: 200ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--esp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte);
  font-size: var(--fs-base);
  font-weight: var(--peso-texto);
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

address { font-style: normal; }

h1, h2, h3, h4 {
  font-weight: var(--peso-titulo);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Utilitários de layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}

.section { padding-block: var(--esp-9); }
.section-alt { background: var(--fundo-alt); }

.section-escura {
  background: var(--azul);
  color: var(--branco);
}
.section-escura h2, .section-escura h3 { color: var(--branco); }
.section-escura p { color: rgba(255, 255, 255, 0.82); }

.section-head {
  max-width: 620px;
  margin-bottom: var(--esp-7);
}
.section-head.centro {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-texto);
  margin-bottom: var(--esp-3);
}
.section-escura .eyebrow { color: var(--verde); }

.lead {
  font-size: var(--fs-lg);
  color: var(--texto-suave);
  max-width: 62ch;
}
.section-escura .lead { color: rgba(255, 255, 255, 0.82); }

.grid { display: grid; gap: var(--esp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Número de colunas fixo, para quando a quebra automática não é a desejada —
   com 4 cards, o auto-fit costuma render 3 em cima e 1 sozinho embaixo.
   minmax(0, 1fr) impede que um título longo estoure a coluna. */
.grid-fixo-2,
.grid-fixo-3,
.grid-fixo-4 { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }

.grid-fixo-2 { --colunas: 2; }
.grid-fixo-3 { --colunas: 3; }
.grid-fixo-4 { --colunas: 4; }

@media (max-width: 1024px) {
  .grid-fixo-3, .grid-fixo-4 { --colunas: 2; }
}

@media (max-width: 620px) {
  .grid-fixo-2, .grid-fixo-3, .grid-fixo-4 { --colunas: 1; }
}

/* "Outros serviços" no rodapé da página de um serviço: os seis numa linha só.
   O gap encolhe junto com a tela porque, com seis colunas, 24px de folga entre
   elas custam 120px que fariam falta ao nome do serviço. Abaixo de 1000px seis
   colunas deixariam cada nome com duas palavras por linha, então a grade passa
   a três e depois a duas — o alvo é a leitura, não o número. */
.grid-servicos-linha {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--esp-3);
}

@media (max-width: 1000px) {
  .grid-servicos-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
}

@media (max-width: 620px) {
  .grid-servicos-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card compacto: sem resumo, o que sobra é ícone e nome — e aí a caixa não
   precisa do padding de um card de conteúdo. */
.card-compacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-3);
  text-align: center;
}
.card-compacto .card-icone {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}
.card-compacto .card-icone svg { width: 22px; height: 22px; }
.card-compacto h3 {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  line-height: 1.25;
  /* Balanceia as linhas do nome; navegador que não suporta ignora e quebra
     normalmente. */
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: 200;
  background: var(--azul);
  color: var(--branco);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-pill);
  transition: top var(--transicao);
}
.skip-link:focus { top: var(--esp-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
  line-height: 1.2;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/*
 * As variantes exigem a classe .btn junto. Sem isso elas também atingiriam o
 * <div class="wp-block-button btn-primario"> dos padrões — o bloco de botão do
 * WordPress põe a classe no wrapper, não no <a>. O wrapper ficava pintado de
 * verde e quadrado (o raio mora em .btn), aparecendo como uma caixa quadrada
 * em volta do botão redondo. Por isso só o verde sofria: o de contorno tem
 * fundo transparente e o wrapper ficava invisível.
 */

/* Primário: verde-lima com texto azul (manual, pág. 05) */
.btn.btn-primario {
  background: var(--verde);
  color: var(--azul);
  font-weight: var(--peso-titulo);
}
.btn.btn-primario:hover { background: var(--verde-hover); }

/* Secundário: azul sólido */
.btn.btn-secundario {
  background: var(--azul);
  color: var(--branco);
}
.btn.btn-secundario:hover { background: var(--azul-escuro); }

/* Terciário: contorno */
.btn.btn-contorno {
  background: transparent;
  color: var(--azul);
  border-color: var(--borda);
}
.btn.btn-contorno:hover {
  border-color: var(--azul);
  background: var(--branco);
}

.section-escura .btn.btn-contorno {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.45);
}
.section-escura .btn.btn-contorno:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--branco);
}

.btn-sm { padding: 0.5rem 1.25rem; font-size: var(--fs-xs); }
.btn-bloco { width: 100%; }

.btn-icone svg { width: 18px; height: 18px; }

/* Link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
  color: var(--verde-texto);
  transition: gap var(--transicao);
}
.link-seta:hover { gap: var(--esp-3); }

/* --------------------------------------------------------------------------
   5. Cabeçalho e navegação
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  min-height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: var(--esp-3); }
.logo img { width: 46px; height: 46px; object-fit: contain; }
.logo-texto {
  font-weight: var(--peso-titulo);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.logo-texto small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--peso-legenda);
  color: var(--texto-suave);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
}

.nav-list > li > a:not(.btn) {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
  padding-block: var(--esp-2);
  color: var(--texto);
  transition: color var(--transicao);
}
.nav-list > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav-list > li > a:not(.btn):hover::after,
.nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list > li > a[aria-current="page"] { font-weight: var(--peso-titulo); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--esp-2);
  border-radius: var(--raio-sm);
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--azul);
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-lg);
    padding: var(--esp-5);
    display: none;
  }
  .nav.aberto { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-2);
  }
  .nav-list > li > a:not(.btn) {
    display: block;
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--cinza-claro);
  }
  .nav-list > li > a:not(.btn)::after { display: none; }
  .nav-list .btn { width: 100%; margin-top: var(--esp-3); }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--cinza-claro) 0%, var(--branco) 100%);
  padding-block: var(--esp-9) var(--esp-8);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--esp-8);
}

.hero h1 { margin-bottom: var(--esp-5); }
.hero h1 .destaque { color: var(--verde-texto); display: block; }

.hero p { color: var(--texto-suave); max-width: 46ch; margin-bottom: var(--esp-6); }

.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

/* Moldura circular usada no layout para as fotos */
.foto-circulo {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--azul);
  box-shadow: var(--sombra-lg);
}
.foto-circulo img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder enquanto as fotos definitivas não chegam */
.foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%);
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--esp-6); }
  .hero-media { order: -1; }
  .foto-circulo { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   7. Cards e blocos de conteúdo
   -------------------------------------------------------------------------- */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--esp-6);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: transparent;
}
.card h3 { margin-bottom: var(--esp-3); }
.card p { color: var(--texto-suave); font-size: var(--fs-sm); }

.card-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--esp-5);
  border-radius: var(--raio);
  background: var(--cinza-claro);
  color: var(--verde-texto);
}
.card-icone svg { width: 26px; height: 26px; }

/* Ícones outline, traço fino — manual pág. 05 */
.icone {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Item de serviço da home: ícone acima, rótulo abaixo */
.servico-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-3);
  text-align: center;
  border-radius: var(--raio);
  transition: background var(--transicao);
}
.servico-item:hover { background: var(--cinza-claro); }
.servico-item .icone { color: var(--verde-texto); width: 40px; height: 40px; }
.servico-item span {
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
  line-height: 1.4;
}

/* Faixa azul de destaque com imagem ao lado */
.faixa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-8);
  border-radius: var(--raio-lg);
  background: var(--azul);
  color: var(--branco);
}
.faixa h2, .faixa h3 { color: var(--branco); margin-bottom: var(--esp-4); }
.faixa p { color: rgba(255, 255, 255, 0.82); margin-bottom: var(--esp-5); }
.faixa-media {
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.faixa-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .faixa { grid-template-columns: 1fr; padding: var(--esp-6); gap: var(--esp-5); }
}

/* Missão, visão e valores */
.mvv {
  display: grid;
  gap: var(--esp-6);
  padding: var(--esp-7);
  border-radius: var(--raio-lg);
  background: var(--azul);
  color: var(--branco);
}
.mvv-item { display: flex; gap: var(--esp-4); }
.mvv-item .icone { flex-shrink: 0; color: var(--verde); }
.mvv-item h3 { color: var(--branco); margin-bottom: var(--esp-2); font-size: var(--fs-lg); }
.mvv-item p { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); }

/* Números / estatísticas */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--esp-5);
  padding: var(--esp-7);
  border-radius: var(--raio-lg);
  border: 1px solid var(--borda);
  background: var(--branco);
  text-align: center;
}
.stats li { display: flex; flex-direction: column; gap: var(--esp-1); }
.stats strong {
  font-size: var(--fs-3xl);
  font-weight: var(--peso-destaque);
  color: var(--azul);
  line-height: 1.1;
}
.stats span { font-size: var(--fs-sm); color: var(--texto-suave); }

/* Cards de acesso aos portais */
.portais { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-5); }

.portal-card {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.portal-card:hover { border-color: var(--verde); box-shadow: var(--sombra); }
.portal-card .icone { flex-shrink: 0; color: var(--verde-texto); }
.portal-card h3 { font-size: var(--fs-base); margin-bottom: var(--esp-1); }
.portal-card p { font-size: var(--fs-sm); color: var(--texto-suave); margin-bottom: var(--esp-3); }

/* --------------------------------------------------------------------------
   8. Blog
   -------------------------------------------------------------------------- */
.post-destaque {
  position: relative;
  display: block;
  border-radius: var(--raio-lg);
  overflow: hidden;
  min-height: 380px;
  background: var(--azul);
}
.post-destaque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-destaque-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 380px;
  padding: var(--esp-7);
  background: linear-gradient(180deg, rgba(22, 49, 74, 0) 30%, rgba(22, 49, 74, 0.92) 100%);
  color: var(--branco);
}
.post-destaque h3 { color: var(--branco); max-width: 22ch; margin-block: var(--esp-3); }

.tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-pill);
  background: var(--verde);
  color: var(--azul);
  font-size: var(--fs-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-lista { display: grid; gap: var(--esp-5); }

.post-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--esp-5);
  align-items: center;
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--borda);
}
.post-item:last-child { border-bottom: none; padding-bottom: 0; }
.post-item-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cinza-medio);
}
.post-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-item h3 { font-size: var(--fs-base); margin-block: var(--esp-2); }
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}
.post-categoria {
  font-size: var(--fs-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

@media (max-width: 560px) {
  .post-item { grid-template-columns: 1fr; }
  .post-destaque-conteudo { padding: var(--esp-5); }
}

/* --------------------------------------------------------------------------
   8b. FAQ (acordeão)
   Construído com <details>/<summary>: acessível por teclado e funcional
   mesmo sem JavaScript.
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--esp-3);
  max-width: 840px;
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.faq-item:hover { border-color: var(--cinza-escuro); }
.faq-item[open] {
  border-color: transparent;
  box-shadow: var(--sombra);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5);
  font-size: var(--fs-base);
  font-weight: var(--peso-titulo);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
/* Remove o triângulo padrão do navegador */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: -3px;
  border-radius: var(--raio);
}

.faq-seta {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--verde-texto);
  transition: transform var(--transicao);
}
.faq-item[open] .faq-seta { transform: rotate(180deg); }

.faq-resposta {
  padding: 0 var(--esp-5) var(--esp-5);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}
.faq-resposta p + p { margin-top: var(--esp-3); }
.faq-resposta a {
  color: var(--verde-texto);
  font-weight: var(--peso-botao);
  text-decoration: underline;
}

/* Agrupamento por tema */
.faq-grupo + .faq-grupo { margin-top: var(--esp-7); }
.faq-grupo h2 {
  max-width: 840px;
  margin-inline: auto;
  margin-bottom: var(--esp-5);
  font-size: var(--fs-xl);
}

/* --------------------------------------------------------------------------
   9. Contato e formulário
   -------------------------------------------------------------------------- */
.contato-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--esp-8);
  align-items: start;
}

.canais { display: grid; gap: var(--esp-6); margin-top: var(--esp-6); }

.canal { display: flex; gap: var(--esp-4); }
.canal .icone { flex-shrink: 0; color: var(--verde-texto); }
.canal h3 { font-size: var(--fs-base); margin-bottom: var(--esp-1); }
.canal a, .canal address, .canal p { font-size: var(--fs-sm); color: var(--texto-suave); }
.canal a:hover { color: var(--azul); text-decoration: underline; }

.form {
  padding: var(--esp-7);
  border-radius: var(--raio-lg);
  background: var(--branco);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}

.campo { margin-bottom: var(--esp-5); }
.campo label {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 0.75rem var(--esp-4);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  font-size: var(--fs-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder,
.campo textarea::placeholder { color: #9AA3AC; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(184, 217, 74, 0.25);
}
.campo textarea { resize: vertical; min-height: 120px; }

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #C0392B; }

.erro {
  display: none;
  margin-top: var(--esp-2);
  font-size: var(--fs-xs);
  color: #C0392B;
}
.erro:not(:empty) { display: block; }

.form-status {
  margin-top: var(--esp-4);
  font-size: var(--fs-sm);
  text-align: center;
}
.form-status.sucesso { color: var(--verde-texto); font-weight: var(--peso-botao); }
.form-status.falha { color: #C0392B; }

.mapa {
  margin-top: var(--esp-7);
  border: 0;
  width: 100%;
  height: 340px;
  border-radius: var(--raio-lg);
  filter: grayscale(0.2);
}

@media (max-width: 900px) {
  .contato-inner { grid-template-columns: 1fr; gap: var(--esp-6); }
  .form { padding: var(--esp-5); }
}

/* --------------------------------------------------------------------------
   10. Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--azul);
  color: rgba(255, 255, 255, 0.8);
  padding-top: var(--esp-8);
  font-size: var(--fs-sm);
}

.footer-topo {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--esp-7);
  padding-bottom: var(--esp-7);
}

.footer-marca .logo-texto { color: var(--branco); }
.footer-marca .logo-texto small { color: rgba(255, 255, 255, 0.6); }
.footer-marca .logo img { background: var(--branco); border-radius: 50%; padding: 4px; }

.footer-info { display: grid; gap: var(--esp-4); margin-top: var(--esp-5); }
.footer-info li { display: flex; gap: var(--esp-3); }
.footer-info .icone { width: 20px; height: 20px; flex-shrink: 0; color: var(--verde); }

.footer-col h4 {
  color: var(--branco);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--esp-4);
}
.footer-col li + li { margin-top: var(--esp-3); }
.footer-col a { transition: color var(--transicao); }
.footer-col a:hover { color: var(--verde); }

.redes { display: flex; gap: var(--esp-3); margin-top: var(--esp-5); }
.redes a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.redes a:hover { background: var(--verde); border-color: var(--verde); color: var(--azul); }
.redes .icone { width: 18px; height: 18px; }

.footer-portais {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-5);
  padding-block: var(--esp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-portais a {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  transition: color var(--transicao);
}
.footer-portais a:hover { color: var(--verde); }
.footer-portais .icone { color: var(--verde); flex-shrink: 0; }
.footer-portais strong { display: block; color: var(--branco); font-weight: var(--peso-botao); }
.footer-portais span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); }

/* Aviso exibido apenas para quem administra o site */
.footer-aviso-admin {
  margin-top: var(--esp-5);
  padding: var(--esp-4);
  border: 1px dashed rgba(184, 217, 74, 0.6);
  border-radius: var(--raio);
  background: rgba(184, 217, 74, 0.08);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
}
.footer-aviso-admin a { color: var(--verde); text-decoration: underline; }

.footer-base {
  padding-block: var(--esp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-xs);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 800px) {
  .footer-topo { grid-template-columns: 1fr; gap: var(--esp-6); }
  .footer-portais { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. Cabeçalho de página interna
   -------------------------------------------------------------------------- */
.pagina-hero {
  background: linear-gradient(180deg, var(--cinza-claro) 0%, var(--branco) 100%);
  padding-block: var(--esp-8) var(--esp-7);
}
.pagina-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--esp-4); }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  margin-bottom: var(--esp-4);
}
.migalhas a:hover { color: var(--azul); text-decoration: underline; }
.migalhas [aria-current="page"] { color: var(--azul); font-weight: var(--peso-botao); }

/* --------------------------------------------------------------------------
   12. Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: var(--esp-5);
  bottom: var(--esp-5);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--azul);
  box-shadow: var(--sombra-lg);
  transition: transform var(--transicao), background var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.06); background: var(--verde-hover); }
.whatsapp-flutuante .icone { width: 28px; height: 28px; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   13. Revelação suave ao rolar
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Classes exigidas pelo WordPress
   Alinhamentos, legendas e utilitários que o editor gera no conteúdo.
   -------------------------------------------------------------------------- */
.alignleft  { float: left;  margin: 0 var(--esp-5) var(--esp-4) 0; }
.alignright { float: right; margin: 0 0 var(--esp-4) var(--esp-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: var(--esp-5); }
.wp-caption img { border-radius: var(--raio); }
.wp-caption-text, .wp-element-caption {
  margin-top: var(--esp-2);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  text-align: center;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed;
  top: var(--esp-4); left: var(--esp-4);
  z-index: 200;
  width: auto; height: auto;
  clip-path: none;
  padding: var(--esp-3) var(--esp-5);
  background: var(--azul);
  color: var(--branco);
  border-radius: var(--raio-pill);
}

.sticky { position: relative; }
.bypostauthor > .comment-body { border-left: 3px solid var(--verde); }

/* --------------------------------------------------------------------------
   15. Conteúdo editorial (posts e páginas)
   -------------------------------------------------------------------------- */
/* A largura de leitura fica nos filhos, não no contêiner — assim um bloco
   marcado como largo ou tela cheia no editor consegue escapar da coluna de
   texto, que é o que os padrões de bloco esperam. */
.conteudo { margin-inline: auto; }
.conteudo > * { max-width: 720px; margin-inline: auto; }
.conteudo > .alignwide { max-width: 1100px; }
.conteudo > .alignfull { max-width: none; }
.conteudo > * + * { margin-top: var(--esp-5); }
.conteudo h2 { font-size: var(--fs-2xl); margin-top: var(--esp-7); }
.conteudo h3 { margin-top: var(--esp-6); }
.conteudo p, .conteudo li { color: var(--texto-suave); }
.conteudo ul, .conteudo ol { padding-left: var(--esp-5); }
.conteudo ul li { list-style: disc; }
.conteudo ol li { list-style: decimal; }
.conteudo li + li { margin-top: var(--esp-2); }
.conteudo a { color: var(--verde-texto); font-weight: var(--peso-botao); text-decoration: underline; }
.conteudo img { border-radius: var(--raio); }
.conteudo blockquote {
  padding-left: var(--esp-5);
  border-left: 3px solid var(--verde);
  font-size: var(--fs-lg);
  color: var(--texto);
}
.conteudo table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.conteudo th, .conteudo td { padding: var(--esp-3); border: 1px solid var(--borda); text-align: left; }
.conteudo th { background: var(--cinza-claro); font-weight: var(--peso-titulo); }
.conteudo pre {
  padding: var(--esp-5);
  border-radius: var(--raio);
  background: var(--cinza-claro);
  overflow-x: auto;
}

/* Tabelas largas nunca podem empurrar a página na horizontal */
.tabela-rolavel { overflow-x: auto; }

/* Mesma coluna de 720px do título (.post-cabecalho) e do texto (.conteudo > *):
   antes a capa ocupava o contêiner inteiro e nascia ~100px à esquerda do
   título, quebrando o alinhamento vertical da página do artigo. */
.post-capa {
  aspect-ratio: 16 / 7;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--esp-7);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--cinza-medio);
}
.post-capa img { width: 100%; height: 100%; object-fit: cover; }

.post-cabecalho { max-width: 720px; margin-inline: auto; margin-bottom: var(--esp-6); }
.post-cabecalho h1 { font-size: var(--fs-3xl); margin-block: var(--esp-3); }

/* Grade de artigos do arquivo/blog */
.post-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--esp-5); }

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--branco);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.post-card-thumb { aspect-ratio: 16 / 10; background: var(--cinza-medio); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-5); flex: 1; }
.post-card-corpo h3 { font-size: var(--fs-base); }
.post-card-corpo p { font-size: var(--fs-sm); color: var(--texto-suave); }
.post-card-corpo .post-meta { margin-top: auto; padding-top: var(--esp-4); }

/* Paginação */
.paginacao { display: flex; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-7); flex-wrap: wrap; }
.paginacao .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding-inline: var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.paginacao .page-numbers:hover { border-color: var(--azul); }
.paginacao .page-numbers.current { background: var(--azul); border-color: var(--azul); color: var(--branco); }

/* Busca */
.form-busca { display: flex; gap: var(--esp-2); max-width: 480px; }
.form-busca input[type="search"] {
  flex: 1;
  padding: 0.75rem var(--esp-4);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
}
.form-busca input[type="search"]:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(184, 217, 74, 0.25);
}

/* Comentários */
.comentarios { max-width: 720px; margin-inline: auto; margin-top: var(--esp-8); }
.comentarios h2 { font-size: var(--fs-xl); margin-bottom: var(--esp-5); }
.comentarios .comment-body { padding: var(--esp-5); border: 1px solid var(--borda); border-radius: var(--raio); }
.comentarios .children { margin-left: var(--esp-5); }
.comentarios li + li { margin-top: var(--esp-4); }
/* O :not() precisa excluir também caixa de seleção e rádio: sem isso o
   checkbox do "salvar meus dados" herdava width: 100% e padding de campo de
   texto, virava uma barra da largura do formulário e empurrava o rótulo para
   a linha de baixo. */
.comentarios .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.comentarios .comment-form textarea {
  width: 100%;
  padding: 0.75rem var(--esp-4);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
}
.comentarios .comment-form p { margin-bottom: var(--esp-4); }
.comentarios .comment-form label { display: block; margin-bottom: var(--esp-2); font-size: var(--fs-sm); font-weight: var(--peso-botao); }

/* Consentimento do cookie: caixa e texto na mesma linha, alinhados pelo topo
   para o texto que quebra em duas linhas continuar rente à caixa. */
.comentarios .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}
.comentarios .comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--verde-texto);
}
.comentarios .comment-form-cookies-consent label {
  margin-bottom: 0;
  font-weight: var(--peso-texto);
  line-height: 1.3;
}

/* Comentário em duas etapas ------------------------------------------------
   A classe .js-etapas é posta pelo JavaScript. Sem script ela nunca aparece e
   o formulário abre inteiro — ninguém fica impedido de comentar por causa de
   um bloqueador. */
.comment-form.js-etapas .comment-form-comment,
.comment-form.js-etapas .form-submit { display: none; }
.comment-form.js-etapas.liberado .comment-form-comment,
.comment-form.js-etapas.liberado .form-submit { display: block; }
.comment-form.js-etapas .comentario-aviso { display: block; }
.comment-form.js-etapas.liberado .comentario-aviso { display: none; }
.comentario-aviso {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}
.comentarios .comment-form input[type="submit"] {
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: var(--raio-pill);
  background: var(--verde);
  color: var(--azul);
  font-weight: var(--peso-titulo);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   15b. Página montada por blocos
   Home e Quem somos não têm seção nenhuma no PHP: o editor manda em tudo.
   -------------------------------------------------------------------------- */
.pagina-blocos { padding-block: var(--esp-8); }
.pagina-blocos > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--esp-5);
}
.pagina-blocos > * + * { margin-top: var(--esp-8); }

/* Texto corrido continua na largura de leitura, mesmo com a página larga. */
.pagina-blocos > p,
.pagina-blocos > ul,
.pagina-blocos > ol,
.pagina-blocos > blockquote { max-width: 720px; }

.pagina-blocos > .alignfull { max-width: none; padding-inline: 0; }

/* Card que virou link inteiro: mantém a seta no rodapé do card */
a.card { display: flex; flex-direction: column; }
a.card .link-seta { margin-top: auto; padding-top: var(--esp-4); }

/* Topo da página de um serviço */
/* Mesma coluna de 720px do corpo do texto (.conteudo > *): o topo ficava na
   largura inteira do contêiner e nascia ~200px à esquerda do primeiro
   parágrafo. Mesma correção já aplicada à capa e ao cabeçalho do artigo.

   O 720px vem somado ao recuo porque a classe está no próprio .container, que
   já tem padding-inline: limitar a 720px encolheria a caixa inteira e o texto
   começaria 24px adiante do parágrafo. O que precisa medir 720px é a área
   interna, não a caixa. */
.servico-topo {
  max-width: calc(720px + var(--esp-5) * 2);
  margin-inline: auto;
}

.servico-topo-icone {
  width: 48px;
  height: 48px;
  color: var(--verde-texto);
  margin-bottom: var(--esp-4);
}

/* Variante da faixa com foto ao lado: texto à esquerda, sem centralizar */
/* A variante em banner é a única faixa que não é largura total: cantos
   arredondados para não brigar com o banner do topo. */
.faixa-banner { border-radius: var(--raio-lg); overflow: hidden; }

.faixa-lado { text-align: left; }
.faixa-lado .wp-block-buttons { justify-content: flex-start; }
.faixa-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}

/* Respiro entre um texto curto e o botão logo abaixo. Sem isso o botão
   encosta no parágrafo e a seção parece apertada. */
.wp-block-buttons { margin-top: var(--esp-5); }

/* Título de seção centralizado, com o subtítulo curto logo abaixo.
   Vale para toda seção que não é a primeira da página. */
.titulo-secao { text-align: center; }
.subtitulo-secao {
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
}

/* Cards de depoimento com a mesma altura, independentemente do texto */
.wp-block-column > .wp-block-quote.depoimento { height: 100%; }

/* O conteúdo do banner passa a usar o mesmo contêiner do cabeçalho: mesma
   largura máxima e mesmo recuo lateral. Sem isso o bloco Capa herda o
   contentSize de 720px do theme.json e o título nasce bem mais para dentro
   que a logo, que vive num contêiner de 1180px.
   O padding do próprio Capa é zerado porque o core somaria o dele por cima. */
.hero-banner.wp-block-cover { padding-inline: 0; }
.hero-banner .wp-block-cover__inner-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}

/* Texto encostado à esquerda do contêiner, na mesma vertical da logo.
   Os !important abaixo não são preguiça: para o layout "constrained" o
   WordPress gera
     .wp-container-...-is-layout-N > :where(...) {
       max-width: 720px; margin-left: auto !important; margin-right: auto !important }
   que centraliza os filhos do Capa e os prende ao contentSize. Sem vencer
   esse !important, o título fica ~200px à direita da logo. Os padrões novos
   já saem com layout "default" e não dependem disto — a regra existe para as
   páginas salvas antes desta correção. */
/* 700px, e não 640px: o h1 do banner tem quebras manuais em três linhas e a
   maior delas — "crescer com segurança" — mede 655px no tamanho gigante
   (56px). Com 640px ela estourava e virava uma quarta linha nas telas de
   1280px para cima. A folga cobre a diferença de métrica enquanto a Poppins
   ainda não carregou. */
.hero-texto,
.hero-banner .wp-block-cover__inner-container > .hero-texto {
  max-width: 700px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left;
}
@media (max-width: 900px) {
  .hero-texto,
  .hero-banner .wp-block-cover__inner-container > .hero-texto { max-width: none !important; }
}

/* Banner de destaque: bloco Capa em largura total, com véu azul sobre a foto.
   O texto vira branco porque o fundo é escuro em qualquer foto escolhida. */
.hero-banner { color: var(--branco); }
.hero-banner h1,
.hero-banner h2,
.hero-banner .wp-block-heading { color: var(--branco); }
.hero-banner p,
.conteudo .hero-banner p,
.pagina-blocos .hero-banner p { color: rgba(255, 255, 255, 0.92); }

/* Na faixa escura o contorno precisa de borda e texto claros */
.hero-banner .wp-block-button.btn-contorno .wp-block-button__link {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero-banner .wp-block-button.btn-contorno .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--branco);
}

/* Um banner de largura total no topo encosta no cabeçalho, sem respiro antes */
.pagina-blocos > .alignfull:first-child { margin-top: calc(var(--esp-8) * -1); }

@media (max-width: 620px) {
  .hero-banner { min-height: 420px !important; }
}

/* Foto circular como bloco de imagem, escolhida no próprio canvas */
.wp-block-image.foto-circulo { max-width: 460px; margin-inline: auto; }
.wp-block-image.foto-circulo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--sombra-lg);
}

.aviso-vazio {
  padding: var(--esp-8) var(--esp-6);
  border: 2px dashed var(--borda);
  border-radius: var(--raio-lg);
  text-align: center;
  color: var(--texto-suave);
}
.aviso-vazio p + p { margin-top: var(--esp-3); }
.aviso-vazio strong { color: var(--texto); }

/* --------------------------------------------------------------------------
   16. Componentes dos padrões de bloco
   Mesmas classes declaradas em assets/css/editor.css, para o que aparece no
   editor ser o que sai no site. Mexeu aqui, replique lá.
   -------------------------------------------------------------------------- */

/* Faixa azul de uma coluna — a .faixa original é grid de duas e não serve
   para blocos empilhados livremente pelo editor. */
.faixa-simples {
  padding: var(--esp-8) var(--esp-6);
  border-radius: var(--raio-lg);
  background: var(--azul);
  color: var(--branco);
  text-align: center;
}
.faixa-simples h2,
.faixa-simples h3,
.faixa-simples .wp-block-heading { color: var(--branco); }
.faixa-simples p { color: rgba(255, 255, 255, 0.82); }
.faixa-simples .wp-block-buttons { justify-content: center; }
.faixa-simples .eyebrow,
.pagina-blocos .faixa-simples .eyebrow { color: var(--verde); }

/* Item de serviço montado com blocos: ícone acima, texto centralizado */
.servico-bloco {
  padding: var(--esp-5) var(--esp-3);
  border-radius: var(--raio);
  text-align: center;
  transition: background var(--transicao);
}
.servico-bloco:hover { background: var(--cinza-claro); }
.servico-bloco p,
.conteudo .servico-bloco p,
.pagina-blocos .servico-bloco p {
  font-size: var(--fs-sm);
  font-weight: var(--peso-botao);
  color: var(--texto);
  line-height: 1.4;
}

/* Card de portal montado com blocos */
.portal-bloco {
  height: 100%;
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.portal-bloco:hover { border-color: var(--verde); box-shadow: var(--sombra); }
.portal-bloco h3 { margin-bottom: var(--esp-2); }
.portal-bloco p { font-size: var(--fs-sm); }

/* Acordeão com o bloco Detalhes do WordPress */
.wp-block-details.faq-bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  padding: 0;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.wp-block-details.faq-bloco[open] { border-color: transparent; box-shadow: var(--sombra); }
.wp-block-details.faq-bloco summary {
  padding: var(--esp-5);
  font-weight: var(--peso-titulo);
  line-height: 1.4;
  cursor: pointer;
  list-style: revert;
}
.wp-block-details.faq-bloco summary::marker { color: var(--verde-texto); }
.wp-block-details.faq-bloco > *:not(summary) {
  padding: 0 var(--esp-5) var(--esp-5);
  margin: 0;
}
.wp-block-details.faq-bloco p { font-size: var(--fs-sm); }
/* Cada pergunta é um bloco de primeiro nível, então herdava os 64px de
   `.pagina-blocos > * + *` — espaçamento pensado para separar seções, não
   itens de um mesmo acordeão. Aqui elas voltam a ler como uma lista só. */
.wp-block-details.faq-bloco + .wp-block-details.faq-bloco { margin-top: var(--esp-3); }

/* Missão, visão e valores montados com blocos */
.mvv-blocos {
  padding: var(--esp-7) var(--esp-6);
  border-radius: var(--raio-lg);
  background: var(--azul);
  color: var(--branco);
}
.mvv-blocos h2,
.mvv-blocos h3,
.mvv-blocos .wp-block-heading { color: var(--branco); }
.mvv-blocos p,
.conteudo .mvv-blocos p,
.pagina-blocos .mvv-blocos p { color: rgba(255, 255, 255, 0.82); }

/* Números soltos num bloco de colunas */
.stats-bloco {
  padding: var(--esp-7) var(--esp-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--branco);
  text-align: center;
}
/* Os padrões vivem dentro de .conteudo, onde `.conteudo p` já pinta todo
   parágrafo de cinza com especificidade (0,1,1). Sem repetir o escopo aqui,
   o número sairia cinza no site e colorido no editor — justamente a
   divergência que os estilos de editor existem para evitar. */
.stat-valor,
.conteudo .stat-valor {
  font-size: var(--fs-3xl);
  font-weight: var(--peso-destaque);
  color: var(--azul);
  line-height: 1.1;
}
.stat-rotulo,
.conteudo .stat-rotulo { font-size: var(--fs-sm); color: var(--texto-suave); }

/* Passo a passo */
.passo { padding-top: var(--esp-5); border-top: 2px solid var(--verde); }
.passo-numero,
.conteudo .passo-numero {
  font-size: var(--fs-2xl);
  font-weight: var(--peso-destaque);
  color: var(--verde-texto);
  line-height: 1;
  margin-bottom: var(--esp-2);
}

/* Depoimento */
/* Coluna flex para que o nome desça até o rodapé do card: o texto segue
   ancorado no topo e a sobra de altura fica entre os dois, e não depois do
   nome. Os cards já tinham altura igual (`height: 100%` mais abaixo); o que
   faltava era distribuir o espaço interno. */
.depoimento {
  display: flex;
  flex-direction: column;
  padding: var(--esp-7);
  border-radius: var(--raio-lg);
  background: var(--cinza-claro);
}
.depoimento p,
.conteudo .depoimento p { font-size: var(--fs-lg); color: var(--texto); }
.depoimento cite {
  display: block;
  /* `auto` empurra o nome para baixo; o padding garante o respiro mínimo
     quando o depoimento é longo e não sobra folga nenhuma. */
  margin-top: auto;
  padding-top: var(--esp-4);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--texto-suave);
}

/* Lista de checagem */
/* A classe entra tanto num grupo em volta da lista (padrão "Lista de
   checagem") quanto na própria <ul> (listas das páginas de serviço). Dentro
   de .conteudo é preciso vencer `.conteudo ul li { list-style: disc }`, que
   tem especificidade maior — senão o item sai com o ponto E o check. */
.checklist ul,
ul.checklist,
.conteudo ul.checklist { list-style: none; padding-left: 0; }
.conteudo ul.checklist li { list-style: none; }
.checklist li {
  position: relative;
  padding-left: var(--esp-6);
  margin-bottom: var(--esp-3);
  color: var(--texto-suave);
}
.checklist li::marker { content: ""; }
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde-texto);
  font-weight: var(--peso-destaque);
}

/* Card dentro de coluna precisa encher a altura, senão fica desalinhado.
   Vale também para a faixa de números: com rótulo de duas linhas o bloco
   ficava 25px mais alto que os vizinhos e a fileira terminava em degrau. */
.wp-block-column > .card,
.wp-block-column > .stats-bloco { height: 100%; }

/* Formato pill para QUALQUER botão do editor, inclusive os inseridos direto
   pelo inseridor, sem classe do tema. Antes, um botão novo pintado de
   verde-lima pela paleta saía quadrado, porque só os botões dos padrões
   tinham a regra. */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button {
  border-radius: var(--raio-pill);
}

/* Botão nativo do editor com a aparência da marca.
   O bloco de botão do core aplica a classe personalizada no <div> externo,
   não no <a> — daí o seletor descendente. Pôr a classe direto no <a> pelo
   padrão quebraria a validação do bloco no editor. */
.wp-block-button.btn-primario .wp-block-button__link,
.wp-block-button.btn-secundario .wp-block-button__link,
.wp-block-button.btn-contorno .wp-block-button__link {
  padding: 0.75rem 1.75rem;
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
  font-weight: var(--peso-titulo);
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.wp-block-button.btn-primario .wp-block-button__link { background-color: var(--verde); color: var(--azul); }
.wp-block-button.btn-primario .wp-block-button__link:hover { background-color: var(--verde-hover); }
.wp-block-button.btn-secundario .wp-block-button__link { background-color: var(--azul); color: var(--branco); }
.wp-block-button.btn-secundario .wp-block-button__link:hover { background-color: var(--azul-escuro); }
.wp-block-button.btn-contorno .wp-block-button__link {
  background-color: transparent;
  color: var(--azul);
  border-color: var(--borda);
}
.faixa-simples .wp-block-button.btn-contorno .wp-block-button__link {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.45);
}

/* O depoimento usa o bloco de citação, que já ganha barra à esquerda em
   .conteudo blockquote — aqui o visual é outro. */
.conteudo blockquote.depoimento {
  border-left: none;
  padding-left: var(--esp-7);
}

/* Barra de administração logada não pode cobrir o cabeçalho fixo */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   17. Ícones como classe de bloco
   Gerado a partir de assets/icons.svg. Dentro do Gutenberg não é possível
   inserir <svg><use> sem invalidar o bloco, então o ícone vira máscara de
   CSS: o bloco segue sendo um grupo comum e o ícone herda a cor da marca.
   -------------------------------------------------------------------------- */
.crf-icone::before {
  content: "";
  display: block;
  width: var(--icone-tam, 40px);
  height: var(--icone-tam, 40px);
  margin-bottom: var(--esp-4);
  background-color: var(--icone-cor, var(--verde-texto));
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

/* O ::before é bloco com largura fixa: text-align no pai não o move.
   Precisa de margem automática onde a seção é centralizada. */
.crf-icone.has-text-align-center::before,
.servico-bloco.crf-icone::before,
.faixa-simples .crf-icone::before { margin-inline: auto; }

/* Sobre fundo azul o ícone precisa do verde-lima, não do verde de texto */
.faixa-simples .crf-icone::before,
.mvv-blocos .crf-icone::before { --icone-cor: var(--verde); }

.icone-empresa { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-5h6v5'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E"); }
.icone-pessoas { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E %3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icone-relatorio { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E %3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.icone-alvo { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
.icone-bens { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E %3Cpath d='M12 12v4M10 14h4'/%3E%3C/svg%3E"); }
.icone-reestruturar { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E %3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); }
.icone-escudo { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.icone-imposto { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E %3Cpath d='M15 13l-6 6'/%3E%3Ccircle cx='9.5' cy='13.5' r='1'/%3E%3Ccircle cx='14.5' cy='18.5' r='1'/%3E%3C/svg%3E"); }
.icone-premio { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.2 14.3L7 22l5-3 5 3-1.2-7.7'/%3E%3C/svg%3E"); }
.icone-tecnologia { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E %3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }
.icone-coracao { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E"); }
.icone-parceria { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l2 2a1.4 1.4 0 0 0 2-2'/%3E%3Cpath d='M15 17l2.5 2.5a1.4 1.4 0 0 0 2-2L14 12'/%3E %3Cpath d='M2 12l3.5-6h5L14 8l-3 3a1.4 1.4 0 0 1-2 0L7 9'/%3E%3Cpath d='M13.5 6h5L22 12'/%3E%3C/svg%3E"); }
.icone-olho { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icone-usuario { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.icone-duvida { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E %3Cpath d='M9.2 9.2a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4'/%3E %3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
.icone-monitor { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.icone-whatsapp { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.5-4.5A8.5 8.5 0 1 1 7.5 19.5z'/%3E %3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5.6 0 1-.5 1-1l-1.5-1-1 .8a5 5 0 0 1-2.3-2.3l.8-1-1-1.5c-.5 0-1.5.4-1.5 1z' stroke-width='1.2'/%3E%3C/svg%3E"); }
.icone-email { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M2 7l10 6 10-6'/%3E%3C/svg%3E"); }
.icone-local { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.icone-relogio { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Padrões de bloco do blog: resumo executivo, citação, gráficos e anúncio.
   Tudo em CSS puro — nenhum destes blocos depende de plugin ou script.
   ========================================================================== */

/* Resumo executivo — caixa de abertura do artigo */
.resumo-executivo {
  padding: var(--esp-5) var(--esp-6);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  background: var(--cinza-claro);
}
.resumo-rotulo {
  margin-bottom: var(--esp-3);
  font-size: var(--fs-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-texto);
}
.resumo-executivo ul { margin: 0; padding-left: var(--esp-5); }
.resumo-executivo li { margin-bottom: var(--esp-2); font-size: var(--fs-sm); }
.resumo-executivo li:last-child { margin-bottom: 0; }

/* Citação em destaque */
.citacao-destaque {
  position: relative;
  padding: var(--esp-6) var(--esp-6) var(--esp-5) var(--esp-8);
  border-radius: var(--raio);
  background: var(--cinza-claro);
}
/* Aspas decorativas: aria-hidden não existe em ::before, e por ser conteúdo
   gerado o leitor de tela já o ignora na prática. */
.citacao-destaque::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: var(--esp-4);
  font-size: 4rem;
  line-height: 1;
  color: var(--verde);
}
.citacao-texto {
  margin-bottom: var(--esp-3);
  font-weight: var(--peso-titulo);
  line-height: 1.45;
  color: var(--azul);
}
.citacao-autor {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

/* Gráficos ------------------------------------------------------------------
   O comprimento das barras e a altura das colunas vêm da escala .valor-XX,
   logo abaixo. É uma classe, e não style="width:X%", para o time conseguir
   mudar pelo campo "Classes CSS adicionais" do painel do bloco. */
.grafico {
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
}
.grafico-titulo {
  margin-bottom: var(--esp-5);
  font-weight: var(--peso-titulo);
  color: var(--azul);
}
.grafico-fonte {
  margin-top: var(--esp-5);
  margin-bottom: 0;
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.grafico-linha { margin-bottom: var(--esp-4); }
.grafico-rotulo {
  margin-bottom: var(--esp-2);
  font-size: var(--fs-sm);
  color: var(--texto);
}
.grafico-trilho {
  height: 14px;
  border-radius: var(--raio-pill);
  background: var(--cinza-medio);
  overflow: hidden;
}
.grafico-preenchimento {
  height: 100%;
  border-radius: var(--raio-pill);
  background: var(--verde);
}

.grafico-grade { align-items: flex-end; gap: var(--esp-4); }
/* A legenda sai do fluxo e a pista ganha padding no lugar dela: sem isso a
   legenda consome altura, o flex comprime a barra mais alta e a escala deixa
   de ser proporcional — valor-90 saía desenhado como 87%. O flex-shrink: 0
   garante que nenhuma outra barra encolha pelo mesmo motivo. */
.grafico-coluna {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 220px;
  padding-bottom: 1.75rem;
}
.grafico-haste {
  flex-shrink: 0;
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  background: var(--verde);
}
.grafico-legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

/* Indicadores numéricos */
.indicador {
  height: 100%;
  padding: var(--esp-5);
  border-radius: var(--raio);
  background: var(--cinza-claro);
}
.indicador-numero {
  margin-bottom: var(--esp-2);
  font-size: var(--fs-3xl);
  font-weight: var(--peso-destaque);
  line-height: 1.1;
  color: var(--azul);
}
.indicador-rotulo {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

/* Banner fino de anúncio */
.banner-anuncio {
  border-radius: var(--raio);
  overflow: hidden;
  color: var(--branco);
}
.banner-anuncio .wp-block-cover__inner-container { padding-inline: var(--esp-6); }
.anuncio-texto { max-width: 640px; margin-left: 0; margin-right: auto; text-align: left; }
.anuncio-selo {
  display: inline-block;
  margin-bottom: var(--esp-2);
  padding: 0.15rem 0.6rem;
  border-radius: var(--raio-pill);
  background: var(--verde);
  color: var(--azul);
  font-size: var(--fs-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.banner-anuncio .anuncio-titulo {
  margin-block: 0 var(--esp-4);
  font-size: var(--fs-xl);
  color: var(--branco);
}

/* Escala usada pelos gráficos: nas barras horizontais vira largura, nas
   colunas verticais vira altura. De 5 em 5 para o time não precisar
   calcular nada — basta trocar valor-45 por valor-60 no painel do bloco. */
.grafico-preenchimento.valor-5 { width: 5%; }
.grafico-haste.valor-5 { height: 5%; }
.grafico-preenchimento.valor-10 { width: 10%; }
.grafico-haste.valor-10 { height: 10%; }
.grafico-preenchimento.valor-15 { width: 15%; }
.grafico-haste.valor-15 { height: 15%; }
.grafico-preenchimento.valor-20 { width: 20%; }
.grafico-haste.valor-20 { height: 20%; }
.grafico-preenchimento.valor-25 { width: 25%; }
.grafico-haste.valor-25 { height: 25%; }
.grafico-preenchimento.valor-30 { width: 30%; }
.grafico-haste.valor-30 { height: 30%; }
.grafico-preenchimento.valor-35 { width: 35%; }
.grafico-haste.valor-35 { height: 35%; }
.grafico-preenchimento.valor-40 { width: 40%; }
.grafico-haste.valor-40 { height: 40%; }
.grafico-preenchimento.valor-45 { width: 45%; }
.grafico-haste.valor-45 { height: 45%; }
.grafico-preenchimento.valor-50 { width: 50%; }
.grafico-haste.valor-50 { height: 50%; }
.grafico-preenchimento.valor-55 { width: 55%; }
.grafico-haste.valor-55 { height: 55%; }
.grafico-preenchimento.valor-60 { width: 60%; }
.grafico-haste.valor-60 { height: 60%; }
.grafico-preenchimento.valor-65 { width: 65%; }
.grafico-haste.valor-65 { height: 65%; }
.grafico-preenchimento.valor-70 { width: 70%; }
.grafico-haste.valor-70 { height: 70%; }
.grafico-preenchimento.valor-75 { width: 75%; }
.grafico-haste.valor-75 { height: 75%; }
.grafico-preenchimento.valor-80 { width: 80%; }
.grafico-haste.valor-80 { height: 80%; }
.grafico-preenchimento.valor-85 { width: 85%; }
.grafico-haste.valor-85 { height: 85%; }
.grafico-preenchimento.valor-90 { width: 90%; }
.grafico-haste.valor-90 { height: 90%; }
.grafico-preenchimento.valor-95 { width: 95%; }
.grafico-haste.valor-95 { height: 95%; }
.grafico-preenchimento.valor-100 { width: 100%; }
.grafico-haste.valor-100 { height: 100%; }

/* Contêineres dos três modelos de dado. O espaçamento interno muda conforme o
   tipo: barras empilham, colunas ficam lado a lado, indicadores são cards. */
.grafico-barras .grafico-linha:last-of-type { margin-bottom: 0; }
.grafico-colunas .grafico-grade { margin-bottom: 0; }
.indicadores { margin-block: var(--esp-6); }

/* Filtro de categorias e busca do blog ---------------------------------------
   Fica entre o artigo em destaque e a grade. Só CSS e links: cada categoria
   leva para o arquivo dela, sem JavaScript e sem plugin de facetas. */
.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--borda);
}
.filtro-tags { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.filtro-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.filtro-tag:hover { border-color: var(--azul); }
.filtro-tag.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.filtro-tag:focus-visible {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(184, 217, 74, 0.25);
}
.filtro-contagem { font-size: var(--fs-xs); color: var(--texto-suave); }
.filtro-tag.ativo .filtro-contagem { color: rgba(255, 255, 255, 0.75); }

.form-busca-blog { max-width: 320px; }

/* A grade respira menos aqui do que na versão sem filtro: a linha divisória
   já separa as duas partes. */
.blog-filtros + .post-grade { margin-top: var(--esp-6); }

/* Item de flex nasce com min-width: auto e se recusa a encolher abaixo do
   próprio conteúdo mínimo — no celular a busca (campo + botão = 341px) e a
   fila de categorias estouravam o contêiner de 312px em 29px. */
.blog-filtros > * { min-width: 0; }
.form-busca-blog input[type="search"] { min-width: 0; }

@media (max-width: 720px) {
  /* O flex-wrap: wrap da regra base precisa sair junto com a virada para
     coluna: em contêiner de coluna que envolve, a linha do flex é medida pelo
     item mais largo (341px) e não pelo contêiner (312px) — era daí que vinham
     os 29px de estouro no celular, e o min-width: 0 sozinho não resolvia. */
  .blog-filtros { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .form-busca-blog { max-width: none; }
}

/* Diferenciais em lista: ícone à esquerda, texto ocupando o resto da linha.
   O ::before do .crf-icone nasce em bloco com margem embaixo — aqui ele vira
   item de flex e perde a margem, senão empurraria o texto para baixo. */
.diferencial-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-5);
  padding: var(--esp-5) var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
}
.diferencial-linha + .diferencial-linha { margin-top: var(--esp-4); }
.diferencial-linha.crf-icone::before {
  flex: 0 0 auto;
  margin-bottom: 0;
  --icone-tam: 32px;
}
.diferencial-texto { flex: 1 1 auto; min-width: 0; }
.diferencial-texto h3 { margin-top: 0; margin-bottom: var(--esp-2); font-size: var(--fs-lg); }
.diferencial-texto p { margin-bottom: 0; font-size: var(--fs-sm); }

@media (max-width: 560px) {
  /* No celular o ícone volta para cima do texto: 32px na horizontal comem
     um terço da linha e o parágrafo fica com 3 palavras por linha. */
  .diferencial-linha { flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); }
}