/* =====================================================================
   blog-base.css - fundacao do modulo Blog . Dr. Gustavo Bordenali
   ---------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   As paginas do site (index, fertilidade, hormonal...) carregam o CSS
   EMBUTIDO no proprio .php: reset, tokens --c*, tipografia, .btn e as
   secoes. O global.css so traz header fixo, rodape, sticky e submenu.
   O blog nao pode repetir esse CSS inline em tres arquivos, nem pode
   depender do CSS de uma pagina que ele nao inclui - entao a fundacao
   mora aqui, e em um lugar so.

   O QUE ENTRA: reset, tokens, base tipografica, layout/container,
   sistema de botao, foco e alvo de toque, card, breadcrumb/chip/
   paginacao, reveal e movimento reduzido.

   O QUE NAO ENTRA: header e rodape. Os dois sao do global.css, que
   blog-includes/header.php carrega ANTES deste arquivo - redeclarar
   .site-header aqui criaria duas fontes de verdade para o mesmo menu.

   ORDEM OBRIGATORIA: global.css -> blog-base.css -> blog.css -> <style>
   da pagina (blog-post.php tem o seu, emitido depois do header).

   PALETA: os mesmos valores das paginas do site. --c1...--c5d sao os
   nomes que o index.php usa; os papeis semanticos (--fg, --bg, --border)
   apontam para eles. Mexeu na marca? Mexa no :root do site e aqui.
   ===================================================================== */

/* =====================================================================
   1 · RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Âncora sob header sticky. Sem isto, #consulta/#faq param embaixo da
     navbar. --header-h é o token, não um número solto. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--c5p); color: var(--fg); }



/* =====================================================================
   2 - TOKENS
   ===================================================================== */
:root {

  /* -- 2.1 - COR - paleta oficial do site. Nao inventar valores. ----- */
  --c1:  #E0E2DB;
  --c2:  #D2D4C8;
  --c3:  #B8BDB5;
  --c4:  #556565;   /* 6,11:1 no branco. Era #889696 = 3,07:1, que reprova
                        AA em texto pequeno. As paginas do site ja tinham
                        sido corrigidas; o blog tem :root proprio e ficou
                        para tras. */
  --c5:  #5F7470;   /* verde sage da marca */
  --c5d: #4a5a57;   /* sage escuro - corpo de texto */
  --c5p: #eaf0ef;   /* sage papel - fundo de faixa  */
  --dark:  #0e1a18;
  --text:  #1a1a1a;
  --white: #fff;
  --line:  #e7ebe5;
  /* Bege quente das faixas alternadas do site (.sec--alt). O blog usava
     #f6f8f7, um cinza AZULADO — perto o bastante para nao parecer erro e
     longe o bastante para o artigo nao parecer do mesmo site. Medido em
     producao nas 6 paginas. */
  --bege:  #F3F3F0;

  /* Verde do WhatsApp - excecao deliberada, exclusiva dos CTAs de
     agendamento. Texto sobre ele e sempre branco, como no site. */
  --wa-green:       #25d366;
  --wa-green-hover: #1fbc58;

  /* Papeis semanticos */
  --bg:          var(--white);
  --bg-warm:     var(--c5p);
  --bg-soft:     var(--bege);
  /* O site NAO tem preto. A faixa mais escura de qualquer pagina e o
     .sec--darker = #4a5a57. O blog usava --dark #0e1a18 e o bloco de CTA
     do artigo saia quase preto no meio de um site sage. */
  --bg-deep:     var(--c5d);
  --surface:     var(--white);
  --surface-alt: var(--bege);

  --fg:         var(--text);   /* 16,10:1 no branco - titulos       */
  --fg-2:       var(--c5d);    /*  7,84:1 no branco - corpo e apoio */
  /* ATENCAO: --fg-3 da 3,10:1 no branco e REPROVA AA em texto pequeno.
     Use so em placeholder, icone decorativo e texto >= 24px. Apoio de
     12-15px usa --fg-2. A mesma regra do site. */
  --fg-3:       var(--c4);
  --fg-on-deep: var(--c1);

  --border:        var(--line);
  --border-strong: var(--c2);
  --divider:       rgba(95, 116, 112, 0.12);
  --divider-deep:  rgba(255, 255, 255, 0.12);

  --focus:         var(--c5);
  --focus-on-deep: var(--c1);

  /* -- 2.2 - ESPACAMENTO - base 4px, um valor por degrau ------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* Ritmo vertical de secao - fluido. Tres degraus, nao trinta.
     O degrau padrao fecha em 80px: e o --spy das paginas do site. */
  --section-y:    clamp(56px, 7vw, 80px);
  --section-y-lg: clamp(72px, 9vw, 112px);
  --section-y-sm: clamp(40px, 5vw, 64px);

  --stack:    clamp(24px, 3.5vw, 40px);
  --card-pad: clamp(20px, 2.2vw, 28px);

  /* -- 2.3 - LAYOUT -------------------------------------------------- */
  /* 1140px e calha de 28px sao exatamente os do .sh-inner/.sf-grid do
     global.css: o conteudo do blog alinha com o menu e com o rodape. */
  --container:        1140px;
  --container-narrow: 900px;
  --measure:          68ch;
  --gutter:           clamp(16px, 3vw, 28px);
  --header-h:         64px;

  /* -- 2.4 - TIPOGRAFIA ----------------------------------------------
     DUAS vozes, com divisao de trabalho rigida:

       --font-body    Manrope. TUDO que e interface: menu, botao, rotulo,
                      meta, chip, formulario, paginacao. Identica ao site.
       --font-display Newsreader. Manchete e titulo de artigo.
       --font-read    Newsreader. O CORPO do artigo.

     Por que uma serifada num site que so usa Manrope: o logotipo do
     Dr. Gustavo E uma serifada, e essa voz nao aparecia em mais lugar
     nenhum. O blog e a unica superficie de leitura longa do site — e o
     lugar onde a voz do logotipo finalmente encontra funcao.

     REGRA: nada de interface usa serifada. Um botao em Newsreader quebra
     o parentesco com o resto do site, que e o que sustenta a coerencia.

     Valor cru de font-size em px e proibido: use os degraus abaixo. */
  /* Manrope em tudo, como no site inteiro. A serifada foi uma aposta minha
     que nao vingou: o artigo ficou com voz propria e deixou de pertencer ao
     site. Um artigo medico nao precisa de tipografia autoral — precisa
     parecer do mesmo medico das outras paginas. */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-read:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Os degraus de display subiram ~10% em relacao a versao anterior: uma
     serifada com a mesma altura-x aparenta MENOS corpo que a Manrope, e nos
     valores antigos a manchete perdia presenca. Medido na tela, nao chutado. */
  --fs-display-xl: clamp(32px, 5vw, 52px);
  --fs-display-lg: clamp(26px, 3.6vw, 38px);
  --fs-display-md: clamp(22px, 2.5vw, 29px);
  --fs-display-sm: clamp(19px, 1.9vw, 22px);
  --fs-lead:       clamp(16px, 1.4vw, 18px);
  --fs-body:       13px;   /* o mesmo do site. Era 15px, herdado da origem. */
  /* SÓ o texto que se lê de ponta a ponta no artigo. Card e meta são
     varridos com o olho; artigo de 1.200 palavras é lido linha a linha.
     Fluido de 16px a 20px (30/09/2026). Antes era 16px fixo em toda
     largura — e 16px no desktop obrigava uma coluna de 544px para não
     passar de 73 caracteres, o que deixou a página inteira estreita.
     A coluna não se alarga sem o corpo junto: largura e tamanho de letra
     são o mesmo controle, e --read-col é literalmente derivado daqui.
     Texto de leitura acompanha a distância do olho: 16px de celular na
     mão, 18px de monitor a meio metro. A coluna é derivada DAQUI.
     (21/09/2026: era 14px, copiado da página de serviço medida a 1280px.
     Num celular de 375px, 14px é corpo de nota de rodapé.)
     A entrelinha desce de 1,8 para 1,75 junto: 28px de linha. Texto maior
     precisa de proporcionalmente MENOS entrelinha, não mais.
     ⚠️ Mexer aqui muda a largura da coluna: ver --read-col no blog.css,
     que foi derivado deste valor. Os dois andam juntos.
     NÃO usar em card, meta, chip ou rodapé: esses seguem --fs-body. */
  --fs-article:    clamp(16px, 0.55vw + 12.1px, 20px);
  /* Corpo do ARTIGO, em serifada. 18px e o degrau em que a Newsreader fica
     confortavel para 1.200 palavras; abaixo disso ela fecha demais. */
  --fs-read:       clamp(17px, 1.15vw, 18.5px);
  --fs-small-plus: 14px;
  --fs-small:      13px;
  --fs-micro:      12px;
  --fs-eyebrow:    11px;
  --fs-label:      11px;
  --fs-card-title:    17px;
  --fs-card-title-lg: 20px;

  --lh-display:  1.18;
  --lh-snug:     1.35;
  --lh-body:     1.7;
  --lh-relaxed:  1.78;
  --tracking-display: -0.02em;
  --tracking-eyebrow:  0.14em;

  /* Raios - os mesmos --rsm/--rmd/--rlg das paginas do site. */
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 100px;

  /* Sombras - as mesmas --sh1/--sh2/--sh3 das paginas do site. */
  --shadow-xs: 0 1px 4px rgba(95,116,112,.10);
  --shadow-sm: 0 1px 4px rgba(95,116,112,.10);
  --shadow-md: 0 4px 20px rgba(95,116,112,.14);
  --shadow-lg: 0 8px 40px rgba(95,116,112,.18);

  --ease:     cubic-bezier(0.32, 0.08, 0.24, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 460ms;

  --rhythm: var(--section-y);

  /* Índice do stagger do .reveal. O JS do rodapé grava o valor real em
     cada elemento; este default existe para que a regra continue VÁLIDA
     se o JS não rodar — sem ele, calc(var(--i)*…) seria inválido e a
     declaração inteira cairia. */
  --i: 0;
}

/* =====================================================================
   3 · BASE TIPOGRÁFICA
   ===================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 400 e `normal`, como o body do site (medido: 13px/400/normal).
     Estes dois valores vinham do projeto de origem e eram a causa de TODO
     o texto do blog sair em negrito e com os caracteres afastados — nao
     era uma regra do artigo, era o body, e tudo herdava dele. Medido
     antes: 44 elementos diferentes com letter-spacing de 0,6px. */
  font-weight: 400;
  letter-spacing: normal;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); color: var(--fg-2); line-height: var(--lh-body); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 500; color: var(--fg); }
em { font-style: italic; }

/* ── Escala de display. Estes nomes valem em TODAS as páginas. ─────── */
.display-xl {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-xl); line-height: 1.04;
  letter-spacing: -0.022em;
}
.display-lg {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-lg); line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.display-md {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-display-md); line-height: 1.18;
  letter-spacing: -0.012em;
}
.display-sm {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display-sm); line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-lead); line-height: 1.6; font-weight: 400;
  color: var(--fg-2); max-width: 60ch; text-wrap: pretty;
}
.small { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }
.micro { font-size: var(--fs-micro); line-height: 1.55; color: var(--fg-2); letter-spacing: 0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  line-height: 1.4;
}
.eyebrow.on-dark { color: rgba(255,255,255,0.72); }

/* Aliases dos nomes legados do blog e do agendamento. Vivem aqui para que
   NENHUM dos dois arquivos precise redeclarar a escala. Marcação nova usa
   sempre os nomes sem prefixo. */
.b-display-xl { font: 300 var(--fs-display-xl)/1.04 var(--font-display); letter-spacing: -0.022em; }
.b-display-lg { font: 300 var(--fs-display-lg)/var(--lh-display) var(--font-display); letter-spacing: var(--tracking-display); }
.b-display-md { font: 500 var(--fs-display-sm)/var(--lh-snug) var(--font-display); letter-spacing: -0.01em; }
.b-lead,
.ag-lead      { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); font-weight: 400; max-width: 60ch; text-wrap: pretty; }
.b-eyebrow,
.ag-eyebrow   { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 500;
                text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
                color: var(--fg-2); margin: 0 0 var(--sp-4); line-height: 1.4; }
.ag-display-xl { font: 300 var(--fs-display-xl)/1.04 var(--font-display); letter-spacing: -0.022em; }
.ag-display-lg { font: 300 var(--fs-display-lg)/var(--lh-display) var(--font-display); letter-spacing: var(--tracking-display); }



/* =====================================================================
   4 · LAYOUT — container, seção, superfícies
   ===================================================================== */
.container,
.blog-container {                       /* alias legado do blog */
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container-measure { width: 100%; max-width: var(--measure); margin-inline: auto; }

/* Ritmo de seção — OPT-IN por classe, nunca pelo seletor de elemento.
   Se fosse `section{}`, a home ganharia padding duplo dentro do blog e do
   /agendamento, que aninham seções em <main>. */
.section    { padding-block: var(--section-y); }
.section-lg { padding-block: var(--section-y-lg); }
.section-sm { padding-block: var(--section-y-sm); }

/* Fio entre seções irmãs claras. Superfície escura dispensa o fio. */
.section + .section,
.section + .section-lg,
.section-lg + .section,
.section-sm + .section,
.section + .section-sm { border-top: 1px solid var(--divider); }
.surface-deep + .section,
.surface-deep + .section-lg,
.section + .surface-deep,
.section-lg + .surface-deep { border-top: none; }

.surface-warm { background: var(--bg-warm); }
.surface-soft { background: var(--bg-soft); }
.surface-deep { background: var(--bg-deep); color: #FFF; }
.surface-deep h1, .surface-deep h2, .surface-deep h3, .surface-deep h4 { color: #FFF; }
.surface-deep p { color: var(--fg-on-deep); }
.surface-deep .eyebrow,
.surface-deep .b-eyebrow,
.surface-deep .ag-eyebrow { color: rgba(255,255,255,0.72); }

/* Cabeçalho de seção */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > :last-child { margin-bottom: 0; }
.section-head h2 { margin: 0 0 var(--sp-5); }
.section-head p  { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Variante em duas colunas (título à esquerda, parágrafo à direita).
   minmax(0,1fr) sempre: `1fr` é minmax(auto,1fr) e uma palavra longa
   empurraria a coluna para fora da pista. */
.section-head-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.section-head-split > * { min-width: 0; }
.section-head-split p { max-width: 460px; margin: 0; }
@media (max-width: 900px) {
  .section-head-split { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); align-items: start; }
}



/* =====================================================================
   5 · SISTEMA DE BOTÃO — o coração do 2.0
   ---------------------------------------------------------------------
   DEFEITO QUE ISTO CORRIGE (medido em 390px, antes):
     · 9 larguras (249…339px) — cada CTA se dimensionava pelo próprio texto
     · 3 alturas (47/49/51px) — porque o ícone (17px) era MAIOR que a caixa
       de linha do rótulo (14,5px com line-height:1). Botão com ícone ficava
       2,5px mais alto que o mesmo botão sem ícone.
     · 2 corpos de fonte (14,5 e 15px) no mesmo componente.

   COMO FICA RESOLVIDO:
     · a altura vem de `min-height` (token), não do conteúdo → ícone nunca
       muda a altura;
     · `line-height:1.25` garante caixa de linha ≥ ícone em toda variante
       (14×1.25=17,5 ≥ 16 · 15×1.25=18,75 ≥ 18 · 16×1.25=20 ≥ 20);
     · em ≤640px o .btn-lg e o .btn-block ocupam 100% → sobra UMA largura.

   ALTURAS: sm/padrão 48px desktop · 52px mobile — lg 52px · 56px mobile.
   `sm` NÃO é mais baixo que o padrão: ele é mais DENSO (menos padding
   lateral, rótulo menor). Altura é alvo de toque, não decoração.
   ===================================================================== */
.btn {
  --btn-h:    48px;
  --btn-px:   26px;
  --btn-fs:   15px;
  --btn-icon: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 10px var(--btn-px);
  max-width: 100%;

  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--btn-fs);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  text-align: center;
  /* Rótulos vêm do painel (blog_cta_button) e de runtime ("Ver tudo em
     {categoria}"): são de largura imprevisível. nowrap + sem teto estourava
     o documento em 375px. Aqui o rótulo quebra e o botão cresce em altura. */
  white-space: normal;
  text-wrap: balance;

  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* Ícone: tamanho fixo, nunca encolhe, alinhado opticamente ao rótulo
   (o -1px compensa a diferença entre o eixo óptico do glifo e o do traço). */
.btn .icon,
.btn svg { width: var(--btn-icon); height: var(--btn-icon); flex: 0 0 auto; margin-block: -1px; }

/* ── Tamanhos (declarados DEPOIS de .btn: mesma especificidade, vence
      a ordem — é assim que .btn-lg sobrescreve .btn) ────────────────── */
.btn-sm { --btn-px: 18px; --btn-fs: 14px; --btn-icon: 16px; }
.btn-lg { --btn-h: 52px; --btn-px: 32px; --btn-fs: 16px; --btn-icon: 20px; }

/* ── Variantes ───────────────────────────────────────────────────────
   PRIMÁRIO — deep blue. É o CTA padrão do site inteiro. */
/* Primario - verde sage da marca, o mesmo .btn--p das paginas do site. */
.btn-primary { background: var(--c5); color: #FFF; }
.btn-primary:hover { background: var(--c5d); box-shadow: 0 4px 18px rgba(95,116,112,.35); }

/* Contorno - o mesmo .btn--ol do site: borda clara, texto sage. */
.btn-outline { background: transparent; color: var(--c5); border-color: var(--border); }
.btn-outline:hover { background: rgba(95,116,112,.06); border-color: var(--c5); }

/* Fantasma - sem caixa, para acao terciaria. */
.btn-ghost { background: transparent; color: var(--c5); }
.btn-ghost:hover { background: var(--surface-alt); }

/* Sobre fundo escuro (CTA do blog). Claro sobre escuro, nunca sage sobre
   escuro: #5F7470 em #0e1a18 da 2,6:1 e reprova em qualquer tamanho. */
.btn-on-dark,
.surface-deep .btn-primary { background: var(--c1); color: var(--dark); }
.btn-on-dark:hover,
.surface-deep .btn-primary:hover { background: #FFF; color: var(--dark); }

/* ── Estados ─────────────────────────────────────────────────────────
   O movimento é de 1px e some sob prefers-reduced-motion (seção 12). */
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.surface-deep .btn:focus-visible,
.site-footer .btn:focus-visible { outline-color: var(--focus-on-deep); }

.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ── Largura ─────────────────────────────────────────────────────────
   .btn-block = "este é o CTA primário desta seção". No DESKTOP ele é um
   botão normal, de largura por conteúdo; em ≤640px ele e todo .btn-lg
   viram largura total. É o que mata as 9 larguras do mobile.
   .btn-full = largura total SEMPRE (barra fixa de CTA, formulário). */
.btn-full { width: 100%; }

/* Linha de botões. Em ≤640px empilha e cada botão preenche a linha. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.btn-row > .btn { min-width: 0; }

@media (max-width: 640px) {
  .btn    { --btn-h: 52px; }
  .btn-sm { --btn-h: 52px; }
  .btn-lg { --btn-h: 56px; }

  .btn-lg,
  .btn-block { width: 100%; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
}

/* Microcopy sob o CTA. --fg-2, nunca --fg-3 (4,2:1 reprova em 13px). */
.cta-microcopy {
  font-size: var(--fs-micro);
  color: var(--fg-2);
  margin-top: var(--sp-3);
  letter-spacing: 0.01em;
  line-height: 1.55;
}
@media (max-width: 640px) {
  /* Acompanha o botão full-width: microcopy centralizada sob ele. */
  .btn-block + .cta-microcopy,
  .btn-lg + .cta-microcopy { text-align: center; }
}



/* =====================================================================
   6 · ACESSIBILIDADE — foco e alvo de toque
   ===================================================================== */

/* ── 6.1 · Anel de foco visível. Obrigatório, em tudo. ──────────────
   `:where()` zera a especificidade de propósito: um `outline:none` de
   componente (0,1,1) venceria isto sem esforço, então as exceções
   conhecidas são reafirmadas logo abaixo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.surface-deep :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible { outline-color: var(--focus-on-deep); }

/* Campos que declaram outline:none no CSS de página. Empate de
   especificidade resolvido pela ordem (site.css vem antes) — por isso
   estas regras estão duplicadas com classe, e não com :where(). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── 6.2 · Alvo mínimo 44×44 (WCAG 2.5.5) ───────────────────────────
   Lista EXPLÍCITA de controles de chrome. Nada de `a{}` genérico: um link
   dentro de parágrafo (.post-body a, .footer-col a, .blog-crumbs a) NÃO
   entra aqui e continua sendo texto sublinhado, não um bloco de 44px.
   Regra de bolso: se o controle tem fundo, borda ou é um ícone isolado,
   ele entra na lista; se é palavra dentro de frase, não entra. */
:where(
  button,
  [role="button"],
  summary,
  input[type="submit"],
  input[type="button"],
  a.btn,
  .chip,
  .pagination a,
  .pagination button,
  .nav-toggle,
  .icon-btn,
  .share-btn
) {
  min-height: 44px;
  min-width: 44px;
}

/* Escape para controles que PRECISAM ser minúsculos (dots de carrossel).
   `.hit-44` devolve o alvo por pseudo-elemento sem alterar o desenho.
   Uso: class="testi-dot hit-44" / class="ag-steps-dot hit-44"
   Como é 0,1,0 e a regra acima é 0,0,0, o min-* é anulado sem !important. */
.hit-44 { position: relative; min-width: 0; min-height: 0; }
.hit-44::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* ── 6.3 · Utilitários de leitor de tela ────────────────────────────── */
.sr-only,
.blog-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  padding: 12px 20px; background: var(--bg-deep); color: #FFF;
  font-size: var(--fs-small); border-radius: var(--r-sm); z-index: 9999;
}



/* =====================================================================
   9 · CARD — primitivo único
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  box-shadow: var(--shadow-xs);
  min-width: 0;                       /* item de grid/flex nunca estoura */
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card-hover:hover { border-color: var(--fg-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card-flat { box-shadow: none; }
.card-soft { background: var(--surface-alt); border-color: transparent; }
.card > :last-child { margin-bottom: 0; }
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-sm);
           line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
.card p { font-size: var(--fs-small); line-height: 1.65; margin: 0; }

/* Alias do primitivo do blog. */
.b-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
          padding: var(--card-pad); box-shadow: var(--shadow-xs); min-width: 0;
          transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.b-card:hover { border-color: var(--fg-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* Grade de cards padrão. Sempre minmax(0,1fr). */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 22px); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .card-grid, .card-grid-2 { grid-template-columns: minmax(0,1fr); } }



/* =====================================================================
   10 · NAVEGAÇÃO DE CONTEÚDO — breadcrumbs, chips, paginação
   ===================================================================== */

/* ── Breadcrumbs. `.blog-crumbs` é o nome já presente na marcação. ──── */
.crumbs,
.blog-crumbs {
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin-bottom: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  line-height: 1.5;
}
.crumbs a, .blog-crumbs a { border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.crumbs a:hover, .blog-crumbs a:hover { border-bottom-color: var(--fg-2); }
.crumbs span[aria-hidden], .blog-crumbs span[aria-hidden] { color: var(--fg-3); }
.crumbs .current, .blog-crumbs .current { color: var(--fg-2); }

/* ── Chips de categoria. 44px de alvo, não 33px. ────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  font-size: var(--fs-micro); line-height: 1.2;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--fg-2); color: var(--fg); }
.chip.is-current { background: var(--bg-deep); border-color: var(--fg); color: #FFF; }

/* ── Paginação. `.blog-pag` é o nome já presente na marcação. ───────── */
.pagination,
.blog-pag {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--divider);
}
.pagination a, .pagination span,
.blog-pag a, .blog-pag span {
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--fg-2);
  background: var(--surface);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination a:hover, .blog-pag a:hover { border-color: var(--fg-2); color: var(--fg); }
.pagination .ativo, .blog-pag .ativo { background: var(--bg-deep); border-color: var(--fg); color: #FFF; }
.pagination .gap, .blog-pag .gap { border: none; background: none; color: var(--fg-3); min-width: 24px; padding: 0; }



/* =====================================================================
   11 · REVEAL — entrada suave sem flash
   ---------------------------------------------------------------------
   O gate `.js-reveal` é aplicado no <head>, ANTES da primeira pintura:
   sem JS, nada fica invisível. O stagger vem de --i (0..5 → até 350ms).
   ===================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }



/* =====================================================================
   12 · MOVIMENTO REDUZIDO — cobre TODAS as animações do site
   ---------------------------------------------------------------------
   Vem no fim do arquivo de propósito: as regras que liberam o .reveal e
   zeram os hovers precisam vencer por ordem, sem !important extra.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .card-hover:hover,
  .b-card:hover { transform: none; }
}


/* =====================================================================
   13 - BOTAO DE WHATSAPP - herdado do site, NAO do sistema acima
   ---------------------------------------------------------------------
   includes/footer.php emite a barra fixa do mobile com
   `class="btn btn--wa"`. Essas classes sao definidas no CSS EMBUTIDO de
   cada pagina do site - que o blog nao carrega. Sem as regras abaixo, o
   visitante no celular veria um link de texto solto no rodape de todo
   artigo, exatamente onde esta o CTA principal.

   O pulso do site ficou de fora de proposito: no blog o botao aparece
   desde o topo (nao ha hero para esperar) e uma animacao infinita ao
   lado do texto do artigo compete com a leitura.
   ===================================================================== */
.btn--wa {
  background: var(--wa-green);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(37,211,102,.28);
}
.btn--wa:hover {
  background: var(--wa-green-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37,211,102,.5);
}
.btn--wa svg { width: 18px; height: 18px; flex-shrink: 0; }

/* =====================================================================
   14 - DISCLAIMER EDITORIAL - fica entre o conteudo e o rodape
   ===================================================================== */
.blog-disclaimer-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-9);
}
.blog-disclaimer {
  max-width: var(--measure);
  margin: 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--fg-2);
}