/* =====================================================================
   site.css — DESIGN SYSTEM 2.0 · Dra. Camila Deguti
   ---------------------------------------------------------------------
   FONTE ÚNICA DE VERDADE de tokens, shell e componentes compartilhados.
   Carregado por TODAS as páginas públicas, SEMPRE ANTES do CSS da página.

   ORDEM DE CARREGAMENTO (obrigatória, não negociável):
     1. assets/css/site.css   ← este arquivo: reset, tokens, base, shell,
                                botões, componentes compartilhados
     2. CSS da página         ← blog.css / <style> do index / <style> do
                                agendamento: SÓ o que é exclusivo da página

   CONTRATO DE ESPECIFICIDADE
   - Aqui dentro, o look base de um componente nunca passa de UMA classe
     (0,1,0). As únicas exceções são contextuais e estão marcadas:
     `.surface-deep .btn-primary` e `.ag-page .btn-wa`.
   - Consequência: qualquer CSS de página que escreva `.escopo .componente`
     (0,2,0) vence sem esforço e sem !important.
   - PROIBIDO no CSS de página: redeclarar `:root`, redeclarar `.btn*`,
     redeclarar o reset, o header, o rodapé, `.container`, `.reveal`,
     `.skip-link` ou o bloco de foco. Tudo isso vive AQUI.
   - Precisa de um valor diferente numa página? Sobrescreva o TOKEN num
     escopo, nunca a regra:  `.ag-page{ --section-y: clamp(56px,7vw,96px) }`

   NÃO usa !important em lugar nenhum. Se precisou de !important, o
   problema é ordem de carregamento.
   ===================================================================== */


/* =====================================================================
   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(--cd-beige-light); color: var(--cd-deep-blue); }


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

  /* ── 2.1 · COR — paleta oficial da marca. Não inventar valores. ──── */
  --cd-deep-blue:      #131E29;
  --cd-blue-grey:      #425563;
  --cd-blue-grey-tint: #6E7E8A;
  --cd-nude-grey:      #C4BFB6;
  --cd-nude-tint:      #D5D1CA;
  --cd-beige-light:    #EAE6DD;
  --cd-beige-50:       #F2EFE8;
  --cd-off-white:      #F5F2EC;
  --cd-white:          #FFFFFF;

  /* Verde do WhatsApp — exceção deliberada, EXCLUSIVA do CTA final de
     /agendamento. Texto sobre ele é SEMPRE --cd-deep-blue (8,50:1);
     branco daria 1,98:1 e reprova. */
  --wa-green:          #25D366;
  --wa-green-hover:    #1EBE57;

  /* Papéis semânticos */
  --bg:            var(--cd-white);
  --bg-warm:       var(--cd-beige-light);
  --bg-soft:       var(--cd-off-white);
  --bg-deep:       var(--cd-deep-blue);
  --surface:       var(--cd-white);
  --surface-alt:   var(--cd-beige-50);

  --fg:            var(--cd-deep-blue);   /* 16,86:1 no branco */
  --fg-2:          var(--cd-blue-grey);   /*  8,02:1 no branco — texto de apoio */
  /* ⚠ --fg-3 dá 4,2:1 no branco: reprova AA em corpo pequeno. Use SÓ em
     placeholder, ícone decorativo e texto ≥ 24px. Texto auxiliar de 12–15px
     usa --fg-2. */
  --fg-3:          var(--cd-blue-grey-tint);
  --fg-on-deep:    var(--cd-beige-light);

  --border:        var(--cd-nude-tint);
  --border-strong: var(--cd-nude-grey);
  --divider:       rgba(19, 30, 41, 0.08);
  --divider-deep:  rgba(255, 255, 255, 0.12);

  --focus:         var(--cd-blue-grey);
  --focus-on-deep: var(--cd-beige-light);

  /* ── 2.2 · ESPAÇAMENTO — 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 seção — fluido. Três degraus, não trinta. */
  --section-y:    clamp(64px, 8vw, 112px);   /* padrão                        */
  --section-y-lg: clamp(80px, 10vw, 152px);  /* seções âncora: sobre, consulta */
  --section-y-sm: clamp(48px, 6vw, 80px);    /* faixas, hero de blog, CTA curto*/

  /* Respiro entre blocos dentro de uma seção */
  --stack:    clamp(28px, 4vw, 48px);
  --card-pad: clamp(22px, 2.2vw, 30px);

  /* ── 2.3 · LAYOUT ────────────────────────────────────────────────── */
  --container:        1180px;
  --container-narrow: 920px;
  --measure:          68ch;                    /* medida de leitura do artigo */
  /* UMA calha para o site inteiro. Antes .container era fixo em 28px e
     .blog-container era clamp(20px,3vw,28px): entre 769px e 933px a navbar
     e o conteúdo do blog ficavam desalinhados em até 7px. */
  --gutter:           clamp(20px, 3vw, 28px);
  --header-h:         76px;

  /* ── 2.4 · TIPOGRAFIA — uma escala só, para todas as páginas ──────
     DECISÃO (acabamento 2.0.1): a escala GANHOU o degrau de 15px e
     ABSORVEU os de 12,5 / 13 / 13,5 num só. Por quê, e por que não o
     contrário:

     · 15px existe. O index.php declarava 15px cru 14 vezes e o blog.css
       mais 3. Não é enfeite: é herança do index_backup.html, onde o
       `body` era 15px. O 2.0 subiu o corpo para 16px e deixou para trás
       um degrau inteiro de "parágrafo secundário" órfão. Rebaixá-lo a
       --fs-small encolheria de 15 para 14px o texto que mais se LÊ na
       home (sobre, resposta de FAQ, CTA, endereço) — mudança de design,
       com risco de reprovar leitura, numa rodada que é de acabamento.
       Então o degrau virou token: --fs-small-plus, troca 1:1, zero pixel
       de diferença. --fs-small continua sendo o apoio CURTO de
       componente (é o que `.card p` e o /agendamento já usam) e NÃO
       muda de valor.

     · 12,5 e 13 não podiam coexistir. Meio pixel não é degrau, é ruído:
       `.pb-meta` (13px) e `.pb-date` (12,5px) viviam no MESMO bloco de
       byline. Os dois viraram --fs-micro, fixado em 13px — o valor que o
       próprio site.css já assumia como micro ("reprova em 13px", §5) e o
       mais usado na base. 13,5px (legenda do blog, link da navbar) cai
       aqui também: em serifada itálica meio pixel não se vê.

     MAPA DE MIGRAÇÃO — mecânico, sem julgar caso a caso:
       15px          → var(--fs-small-plus)
       14px          → var(--fs-small)
       13,5px / 13px → var(--fs-micro)
       12,5px        → var(--fs-micro)
       12px          → var(--fs-eyebrow) se CAIXA ALTA; senão --fs-micro
       11px          → var(--fs-label)     (é sempre caixa alta)

     REGRA PARA MARCAÇÃO NOVA: escolha entre --fs-body e --fs-small.
     --fs-small-plus é para converter o que JÁ está em 15px; se você está
     escrevendo CSS do zero e ficou na dúvida entre 15 e 16, é 16.
     Valor cru de font-size em px é proibido em qualquer arquivo. */
  --font-display: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* O piso do XL é 32px, não 34px, e isso é medido, não estético: a 320px a
     calha dá 280px de coluna e o H1 do /agendamento termina em
     "Dra.<nbsp>Camila<nbsp>Deguti." — uma sequência que NÃO pode quebrar.
     Esse trecho mede 284,9px a 34px (estourava a coluna em 4,9px) e 268,2px
     a 32px (sobra 11,8px). Quem mexer neste piso mede de novo com
     Range.getClientRects() a 320px antes de subir o valor. */
  --fs-display-xl: clamp(32px, 4.8vw, 56px);
  --fs-display-lg: clamp(27px, 3.4vw, 40px);
  --fs-display-md: clamp(22px, 2.4vw, 30px);
  --fs-display-sm: clamp(19px, 1.9vw, 23px);   /* H3 de card, passo, FAQ */

  /* ── Texto corrido — CAIXA MISTA. Cinco degraus, do menor ao maior. ──
     Só existe UM tamanho por papel. Se hesitou entre dois, o papel está
     mal definido; conserte o papel, não invente um degrau. */
  --fs-lead:       clamp(16.5px, 1.4vw, 18px); /* linha de apoio do H1        */
  --fs-body:       16px;                       /* corpo, artigo, intro seção  */
  --fs-small-plus: 15px;                       /* parágrafo secundário        */
  --fs-small:      14px;                       /* apoio curto de componente   */
  --fs-micro:      13px;                       /* meta, data, legenda, chip   */

  /* ── Rótulo — CAIXA ALTA, sempre com letter-spacing ≥ 0.12em. ────────
     Trilho separado de propósito: caixa alta com entreletra aberta lê
     ~2px maior do que o número diz, então 11px aqui não compete com os
     13px de cima. Não use estes dois em texto de caixa mista. */
  --fs-eyebrow:    12px;                       /* kicker de seção             */
  --fs-label:      11px;                       /* rótulo dentro de card/tabela*/

  /* ── Título de card — terceiro trilho, FIXO de propósito. ────────────
     O caminho óbvio era --fs-display-sm / --fs-display-md. Foi medido no
     /blog, com os 5 títulos publicados, e REPROVOU. O motivo é estrutural:
     esses tokens escalam com a JANELA (1.9vw / 2.4vw), e a coluna do card
     PARA de crescer quando o .container bate em --container (1180px).

       coluna do card irmão do destaque (.blog-grid-featured, 3 colunas):
         janela 1180px → 251,1px de coluna
         janela 1280px → 250,0px
         janela 1440px → 249,8px          ← a caixa estaciona
       título nessa coluna, com --fs-display-sm:
         1180px → 22,42px → 3 dos 5 títulos estouram o -webkit-line-clamp:3
         1280px → 23,00px → 3 dos 5 estouram
         1440px → 23,00px → 3 dos 5 estouram
       o mesmo título com --fs-card-title:
         19px em qualquer janela → 3,04 linhas → nenhum estoura de 1180px
         para cima.

     Ou seja: a fonte cresceria 21% dentro de uma caixa que não cresce, e o
     clamp de 3 linhas passaria a comer o fim de mais da metade dos títulos
     publicados, em TODA tela grande. O degrau do card é fixo porque a
     caixa dele é fixa.
     (Entre 1025 e 1100px essa coluna é a mais estreita do site inteiro —
     209,8 a 229,8px — e ali 2 ou 3 títulos já estouravam ANTES, com os
     19px crus. Isso não muda: é o vale entre a grade de 2 e a de 3
     colunas, não um efeito do token.)

     O -lg é o degrau do card em DESTAQUE quando a grade cai para 2 colunas
     (≤1024px): ali a coluna do destaque é mais larga que na grade de 3, e
     o título sobe um degrau. Com --fs-display-md no lugar dele o valor
     ficava 24,58px a 1024px contra 21,53px a 1025px — a fonte DIMINUÍA 3px
     quando a janela ALARGAVA 1px. Fixo, o salto é de 0,47px: invisível.

     Trocam 1:1 os dois últimos valores crus de font-size do projeto
     (blog.css, .blog-card-title e o override de ≤1024px). Zero pixel de
     diferença medido em 360, 390, 640, 768, 900, 1000, 1024, 1025, 1100,
     1180, 1280 e 1440px. */
  --fs-card-title:    19px;                    /* título de card na grade     */
  --fs-card-title-lg: 22px;                    /* destaque, grade de 2 colunas*/

  --lh-display:  1.08;
  --lh-snug:     1.25;
  --lh-body:     1.7;
  --lh-relaxed:  1.78;

  --tracking-display: -0.018em;
  --tracking-eyebrow:  0.2em;

  /* ── 2.5 · RAIO ──────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* ── 2.6 · SOMBRA — discreta. A marca não usa sombra dura. ───────── */
  --shadow-xs: 0 1px 2px rgba(19,30,41,0.04);
  --shadow-sm: 0 2px 8px rgba(19,30,41,0.05), 0 1px 2px rgba(19,30,41,0.04);
  --shadow-md: 0 6px 20px rgba(19,30,41,0.08), 0 2px 4px rgba(19,30,41,0.04);

  /* ── 2.7 · MOVIMENTO ─────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.32, 0.08, 0.24, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  460ms;

  /* Compat: nomes antigos que ainda aparecem em CSS de página. */
  --rhythm: var(--section-y);
}


/* =====================================================================
   3 · BASE TIPOGRÁFICA
   ===================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  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. */
.btn-primary { background: var(--cd-deep-blue); color: #FFF; }
.btn-primary:hover { background: var(--cd-blue-grey); }

/* CONTORNO — ação secundária ao lado do primário. */
.btn-outline { background: transparent; color: var(--cd-deep-blue); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--cd-beige-light); border-color: var(--cd-blue-grey); }

/* FANTASMA — terciário: voltar, cancelar, "ver mais" com peso de botão. */
.btn-ghost { background: transparent; color: var(--cd-deep-blue); }
.btn-ghost:hover { background: var(--surface-alt); }

/* SOBRE SUPERFÍCIE ESCURA — o primário inverte sozinho. `.btn-on-dark`
   permanece porque o blog já usa esse nome na marcação. */
.btn-on-dark,
.surface-deep .btn-primary { background: var(--cd-beige-light); color: var(--cd-deep-blue); }
.btn-on-dark:hover,
.surface-deep .btn-primary:hover { background: #FFF; }

/* WHATSAPP — EXCLUSIVO do CTA final de /agendamento.
   Fora de .ag-page o botão cai no visual do primário de propósito: se
   alguém colar `.btn-wa` no blog ou no hero, ele NÃO vira um CTA verde de
   WhatsApp — é a regra dura do projeto virando guarda de CSS.
   Texto SEMPRE deep blue sobre o verde: branco dá 1,98:1 e reprova. */
.btn-wa { background: var(--cd-deep-blue); color: #FFF; }
.btn-wa:hover { background: var(--cd-blue-grey); }
.ag-page .btn-wa { background: var(--wa-green); color: var(--cd-deep-blue); }
.ag-page .btn-wa:hover { background: var(--wa-green-hover); }
.ag-page .btn-wa .icon { color: var(--cd-deep-blue); }

/* LEGADO — `.btn-wa-green` é o nome antigo dos 9 CTAs da home, que nunca
   abriram WhatsApp: todos levam para /agendamento. Mapeado ao primário
   para a migração ser incremental. REMOVER da marcação; trocar por
   `.btn-primary`. */
.btn-wa-green { background: var(--cd-deep-blue); color: #FFF; }
.btn-wa-green:hover { background: var(--cd-blue-grey); }
.surface-deep .btn-wa-green { background: var(--cd-beige-light); color: var(--cd-deep-blue); }
.surface-deep .btn-wa-green:hover { background: #FFF; }

/* ── 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(--cd-deep-blue); color: #FFF;
  font-size: var(--fs-small); border-radius: var(--r-sm); z-index: 9999;
}


/* =====================================================================
   7 · HEADER / NAVBAR — uma única definição para o site inteiro
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  /* z-index 60, não 50: a .mobile-cta-bar do index.php é z-index 55. Com 50,
     a barra pintava por cima do menu mobile aberto e capturava o toque do
     item "Agendar" do menu (hit-test a 320×568 devolvia o botão da barra,
     um .btn-lg, e não o link .btn-sm do menu). */
  z-index: 60;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  /* 14px + botão de 48px + 14px = 76px = --header-h. Se mudar um, mude o
     token: o scroll-padding-top das âncoras depende dele. */
  padding-block: 14px;
}
.site-header .logo img { height: 38px; display: block; width: auto; }
/* Stopgap R12: o asset servido em logo_header é a versão BEGE (#EAE6DD) e
   sobre branco dá 1,25:1. Escurecido por filtro até existir o logo azul.
   O escurecimento vale nos DOIS estados do header — no topo (branco) e
   rolado (branco a 86% + blur). O `:not(.is-scrolled)` que estava no
   seletor abaixo desligava o filtro justamente quando o header vira barra
   flutuante, ou seja, 100% do tempo de leitura: 1,81:1 medido, contra os
   11,38:1 do estado com filtro. A transição continua aqui só para o caso
   de o filtro voltar a variar por estado. */
.site-header .logo img { transition: filter var(--dur) var(--ease); }
.site-header .logo img { filter: brightness(.34) contrast(1.12); }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) {
  font-size: var(--fs-micro);   /* era 13,5px cru */
  color: var(--cd-deep-blue);
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--cd-blue-grey); }
.site-nav a:not(.btn).is-current { border-bottom-color: var(--cd-deep-blue); font-weight: 500; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;          /* era 40px: abaixo do alvo mínimo */
  border-radius: var(--r-pill);
  background: var(--cd-beige-light);
}
.nav-toggle .icon { width: 20px; height: 20px; color: var(--cd-deep-blue); stroke-width: 1.5; }

/* COLAPSO EM 900px, não 768px. Com 7 âncoras + Blog + Agendar o menu mede
   ~800px e deixa de caber ao lado da logo por volta de 880px: entre 769 e
   880 ele transbordava e a página inteira ganhava rolagem horizontal.
   UMA cópia deste bloco no projeto todo — antes eram quatro.

   900px É A FRONTEIRA DE CHROME MOBILE DO SITE — uma só, para tudo que
   troca de forma entre "site de desktop" e "site de celular":
     · menu vira hambúrguer ......................... §7 (aqui)
     · link de rodapé vira alvo de 44px ............. §8
     · CTA persistente troca de flutuante para barra fixa
                                       .............. <style> do index.php
   Quem mover uma destas move as três: o defeito clássico é o menu já estar
   em hambúrguer enquanto o resto ainda se acha desktop. NÃO existe token
   para este valor de propósito — media query não lê custom property, e um
   `--bp-nav` no :root seria um número que ninguém consegue usar. A
   constante é este comentário. */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #FFF;
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    border-bottom: 1px solid var(--divider);
    box-shadow: 0 8px 24px rgba(19,30,41,0.08);
    /* O painel é absolute dentro de um header sticky: o que passa da borda
       inferior do viewport NÃO é alcançável por rolagem. Medido a 812×375
       (paisagem de celular): 4 itens fora da tela, o CTA 182px abaixo, e
       scrollTop=800 não movia nada. 100dvh porque a barra do iOS Safari
       come altura; o vh é só a rede de segurança para quem não tem dvh. */
    max-height: calc(100vh - var(--header-h) - 96px);
    max-height: calc(100dvh - var(--header-h) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open a:not(.btn) {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
  }
  .site-nav.is-open a:not(.btn).is-current { border-bottom-color: var(--divider); color: var(--cd-blue-grey); }
  /* O botão do menu aberto é um .btn normal: herda altura, foco e estados
     do sistema. Antes era um clone manual com font-size 14.5 e
     `border-bottom:none!important`. */
  .site-nav.is-open .btn { margin-top: var(--sp-5); align-self: flex-start; }
}
@media (max-width: 640px) {
  .site-header .logo img { height: 32px; }
  /* O CTA do menu aberto acompanha a regra de largura total do mobile. */
  .site-nav.is-open .btn { align-self: stretch; width: 100%; }
}


/* =====================================================================
   8 · RODAPÉ — uma única definição
   ===================================================================== */
.site-footer {
  background: var(--cd-deep-blue);
  color: var(--fg-on-deep);
  padding: var(--section-y-sm) 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: var(--sp-9);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.footer-col { min-width: 0; }
.footer-col img { height: 36px; margin-bottom: var(--sp-5); width: auto; }
.footer-col h3,
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 500;
  color: var(--fg-on-deep);
  margin: 0 0 var(--sp-5);
  line-height: 1.4;
}
.footer-col p,
.footer-col li { font-size: var(--fs-small); color: var(--fg-on-deep); line-height: var(--lh-body); margin-bottom: var(--sp-1); }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a {
  color: var(--fg-on-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-col a:hover { color: #FFF; border-bottom-color: var(--cd-nude-grey); }
.footer-col .footer-crm { margin-top: var(--sp-3); color: var(--cd-nude-grey); font-size: var(--fs-micro); letter-spacing: 0.04em; }

.footer-bottom {
  border-top: 1px solid var(--divider-deep);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-eyebrow);
  color: var(--fg-on-deep);
  letter-spacing: 0.04em;
}
.footer-bottom a { color: var(--fg-on-deep); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.footer-bottom a:hover { border-bottom-color: var(--cd-nude-grey); }

/* Disclaimer global. `.disclaimer` (home) e `.blog-disclaimer` (shell) são
   o MESMO objeto — dois nomes e dois tamanhos era divergência, não design. */
.disclaimer,
.blog-disclaimer {
  font-size: var(--fs-eyebrow);
  line-height: 1.6;
  color: var(--cd-nude-grey);
  max-width: 820px;
  margin-top: var(--sp-5);
}
.footer-bottom .disclaimer,
.footer-bottom .blog-disclaimer { flex: 0 0 100%; order: 3; letter-spacing: 0; margin-top: 0; }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-7); } }

/* ── Alvo de toque dos links do rodapé (WCAG 2.5.5) ───────────────────
   Abaixo da fronteira de chrome mobile (900px, a mesma do menu — §7) a
   coluna do rodapé deixa de ser um bloco de texto e passa a ser um MENU:
   cada <li> é uma linha de navegação empilhada, não uma palavra dentro de
   frase. Por isso ela entra na exceção de §6.2 e ganha 44px de altura
   clicável — o único lugar do sistema em que um link de rodapé recebe alvo.

   POR QUE AQUI, E NÃO NO <style> DA HOME: a regra nasceu no index.php, mas
   a marcação `<li><a>` é a MESMA em blog-includes/footer.php, que serve
   /agendamento, /blog, /blog/categoria/… e o artigo. Vivendo só na home,
   ela cobria 1 página das 5; as outras 4 ficavam com 9 links de 21px.
   §8 já é o dono de .footer-col — a regra é dele.

   `:only-child` conta ELEMENTOS irmãos: no <li> misto da home
   ("WhatsApp · <a>(67)…</a>") o nó de texto não é elemento, então o link
   continua sendo filho único e casa com o seletor — os dois formatos de
   marcação recebem o alvo. O que NÃO casa é link dentro de parágrafo
   (.footer-col p a, o crédito da .footer-bottom): esse segue sendo texto
   sublinhado, como manda §6.2.

   inline-flex, não flex: no <li> misto o link precisa continuar em linha
   depois do texto "WhatsApp · ". */
@media (max-width: 900px) {
  .footer-col li > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0,1fr); gap: var(--sp-7); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   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(--cd-blue-grey); 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(--cd-blue-grey); 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(--cd-blue-grey); }
.crumbs span[aria-hidden], .blog-crumbs span[aria-hidden] { color: var(--cd-nude-grey); }
.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(--cd-blue-grey); color: var(--fg); }
.chip.is-current { background: var(--cd-deep-blue); border-color: var(--cd-deep-blue); 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(--cd-blue-grey); color: var(--fg); }
.pagination .ativo, .blog-pag .ativo { background: var(--cd-deep-blue); border-color: var(--cd-deep-blue); color: #FFF; }
.pagination .gap, .blog-pag .gap { border: none; background: none; color: var(--cd-nude-grey); 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; }
}