/* =====================================================================
   blog.css — CSS DE PÁGINA do módulo Blog + /agendamento
   ---------------------------------------------------------------------
   Dra. Camila Deguti · Design System 2.0 ("editorial clínico")

   ESTE ARQUIVO NÃO É MAIS AUTOCONTIDO — E ISSO É O PONTO.
   Reset, tokens (--cd-*, --sp-*, --fs-*, --section-y…), base tipográfica,
   .container, escala .display- e .b- , sistema de botão, foco, alvo de
   44px, .skip-link, header, rodapé, .b-card, .blog-crumbs, .chip,
   .blog-pag, .reveal e prefers-reduced-motion vivem em
   /assets/css/site.css, que blog-includes/header.php carrega ANTES daqui.

   ORDEM OBRIGATÓRIA:  site.css  →  blog.css  →  <style> da página
   (blog-post.php e agendamento.php têm <style> próprio, emitido depois do
   header.php; por isso eles vencem no empate de especificidade.)

   CONTRATO (herdado do site.css):
   - PROIBIDO aqui: redeclarar :root, o reset, .btn*, o header, o rodapé,
     .container, .reveal, .skip-link ou o bloco de foco.
   - Precisa de outro valor? Sobrescreva o TOKEN num escopo — nunca a regra.
   - Zero !important.

   O QUE SOBROU: o que só existe no blog — hero, grade e card de artigo,
   corpo do artigo, FAQ, compartilhar, relacionados, CTA escuro, busca,
   intro de categoria. Servido com ?v=filemtime() (cache longo).
   ===================================================================== */

/* ── 1 · HERO DO BLOG ────────────────────────────────────────────── */
/* Ritmo do hero = --section-y-sm (o degrau "faixa/hero curto" do 2.0).
   Antes era um clamp próprio, terceiro sistema de espaçamento do projeto. */
.blog-hero{background:var(--bg-warm);
  padding-block:var(--section-y-sm) clamp(36px,4.5vw,56px);
  border-bottom:1px solid var(--divider)}
.blog-hero h1{margin:0 0 var(--sp-5)}

.blog-search{display:flex;gap:10px;max-width:520px;margin-top:var(--sp-7)}
/* min-width:0 — um <input> tem largura intrínseca própria (atributo `size`);
   sem isto o min-width:auto do item flex impede que ele encolha e a linha
   de busca estoura o container em telas estreitas. */
.blog-search input{flex:1;min-width:0;padding:12px 16px;font-size:var(--fs-small-plus);background:#fff;
  border:1px solid var(--cd-nude-grey);border-radius:var(--r-sm);outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* --fg-2, nunca --fg-3: o placeholder é texto pequeno (15px) e --fg-3 dá
   4,19:1 no branco — reprova nos 4,5:1 exigidos abaixo de 18,66px. --fg-2
   (#425563) mede 7,75:1 sobre o #fff deste campo. É a regra que o próprio
   site.css escreve ao lado do token: --fg-3 só em texto grande.
   (--cd-nude-grey, que já esteve aqui, dava 1,83:1.) */
.blog-search input::placeholder{color:var(--fg-2)}
.blog-search input:focus{border-color:var(--cd-blue-grey);box-shadow:0 0 0 3px rgba(66,85,99,.10)}

/* CHIPS DE CATEGORIA: a ponte `.blog-cats` saiu daqui. A marcação de
   blog.php e blog-categoria.php migrou para `.chips` > `.chip` (site.css
   §10), que já nasce com o alvo de 44px — nenhuma página do blog emite
   `.blog-cats`. */

/* ── 2 · GRID + CARD DE ARTIGO ───────────────────────────────────── */
.blog-main{padding-block:var(--section-y)}
.blog-section+.blog-section{margin-top:var(--section-y)}
.blog-section-title{font-size:var(--fs-eyebrow);font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  font-family:var(--font-body);color:var(--fg-2);margin:0 0 24px;
  padding-bottom:12px;border-bottom:1px solid var(--divider)}
/* minmax(0,1fr), nunca 1fr: em grid, `1fr` é minmax(auto,1fr) e o item nasce
   com min-width:auto — um título longo, uma URL colada ou uma palavra sem
   hífen empurra a coluna além da pista e cria rolagem horizontal no
   documento inteiro. Vale para TODOS os grids desta folha. */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
.blog-grid-featured{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.blog-result{font-size:var(--fs-small);color:var(--fg-2);margin-bottom:24px}
.blog-empty{font-size:var(--fs-body);color:var(--fg-2);padding:48px 0;text-align:center}

.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-xs);display:flex;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.blog-card:hover{border-color:var(--cd-blue-grey);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.blog-card-link{display:flex;flex-direction:column;width:100%}
.blog-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--cd-beige-50)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
/* min-width:0 — no layout .blog-grid-solo o card vira flex EM LINHA e este
   item recebe flex:1; sem isto o min-width:auto do conteúdo o impediria de
   encolher e o card estouraria a coluna. Em coluna não tem efeito. */
.blog-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;min-width:0}
.blog-card-cat{display:inline-block;align-self:flex-start;font-size:var(--fs-label);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2);
  background:var(--cd-beige-50);border-radius:var(--r-pill);padding:5px 12px;margin-bottom:14px}
/* --fs-card-title (site.css §2.4), não --fs-display-sm: a coluna do card para
   de crescer no teto do .container e um título em vw passaria a estourar o
   line-clamp de 3 linhas. Mesmos 19px de sempre, agora sob o token. */
.blog-card-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-card-title);line-height:1.28;
  letter-spacing:-.01em;margin:0 0 10px;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-ex{font-size:var(--fs-small);line-height:1.65;color:var(--fg-2);margin:0 0 20px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* flex-wrap:wrap — a data por extenso mais "12 min de leitura" (2 dígitos)
   não cabem lado a lado em 375px; sem a quebra, o texto era cortado. */
.blog-card-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding-top:16px;border-top:1px solid var(--divider)}
/* Data e "ler mais" são meta de card e dividem a mesma linha: um degrau só
   (--fs-micro). A data vinha 1px menor que o link ao lado dela. */
.blog-card-date{font-size:var(--fs-micro);color:var(--fg-2);letter-spacing:.02em}
.blog-card-more{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-micro);color:var(--fg);
  font-weight:500}
.blog-card-more svg{width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.blog-card:hover .blog-card-more svg{transform:translateX(3px)}
/* Card em destaque (1º da home do blog) */
.blog-card.featured .blog-card-title{font-size:clamp(21px,2.1vw,26px);-webkit-line-clamp:3}
.blog-card.featured .blog-card-img{aspect-ratio:16/10}
.blog-card.featured .blog-card-ex{-webkit-line-clamp:4}

/* PAGINAÇÃO: agora em site.css §10 (.blog-pag/.pagination), com 44×44 de
   alvo em vez dos 40px daqui — e sem o encolhimento para 36px em ≤420px,
   que puxava o alvo justamente na tela mais estreita. */

/* ── 3 · ARTIGO ──────────────────────────────────────────────────────
   UMA coluna de leitura para o artigo inteiro.
   `--measure` é 68ch e `ch` é relativo à fonte DO PRÓPRIO elemento: com o
   mesmo token, .post-body (17px sans), .post-faq (16px herdado) e
   .post-disclaimer (13px serif) saíam com TRÊS larguras diferentes, todas
   centralizadas — a borda do artigo ficava serrilhada de cima a baixo.
   --read-col é em rem: independe da fonte de cada bloco. 41.3rem = 661px,
   a mesma medida que o corpo já tinha, e ~68 caracteres em 18px.
   O fallback embutido mantém o valor mesmo fora de .post-wrap. */
.post-wrap{
  --read-col:41.3rem;
  /* Corpo do artigo: 17px em 390px → 18px a partir de ~660px. Declarado
     AQUI, no <article>, para que corpo, FAQ e tabela leiam o mesmo par de
     valores — ver §4. */
  --post-fs:clamp(17px,0.35vw + 15.7px,18px);
  --post-lh:1.75;
  /* PAPEL 1 — H2 DE TEXTO EDITORIAL. Um valor só para os dois H2 que vivem
     DENTRO da coluna de leitura: o divisor de assunto do corpo (§4) e
     "Perguntas frequentes" (§5). Eram dois clamps para a mesma função —
     25px e 24px a 390px —, e a FAQ lia menor que o assunto que ela fecha.
     Por que não a escala de display do site.css: aquela é medida contra a
     largura da PÁGINA (--fs-display-lg chega a 40px), e aqui o título é
     medido contra uma coluna de 41,3rem e contra --post-fs. O outro papel
     de H2 — faixa institucional de largura total — é --fs-display-lg,
     aplicado em §7 e §8. */
  --post-h2:clamp(25px,2.6vw,31px);
  padding-bottom:clamp(48px,6vw,80px);
}
.post-hero{background:var(--bg-warm);
  padding-block:clamp(40px,5vw,72px) clamp(32px,4vw,52px);
  border-bottom:1px solid var(--divider)}
.post-hero-inner{max-width:var(--read-col,41.3rem);margin:0 auto}
.post-cat{display:inline-block;font-size:var(--fs-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fg-2);background:#fff;border:1px solid var(--cd-nude-tint);
  border-radius:var(--r-pill);padding:6px 14px;margin-bottom:20px}
/* O título vem do painel, não é copy fixa que dê para medir uma vez: com o
   H1 no degrau de display-xl (32px a 390px), uma palavra sem hífen de ~20
   letras — "eletroconvulsoterapia", "neurodesenvolvimento" — passa dos 280px
   da coluna a 320px e empurra a largura do DOCUMENTO. Mesmo motivo do
   overflow-wrap de .post-body (§4); aqui ele quebra a palavra em vez de
   deixar a página rolar de lado. Em título normal não tem efeito. */
.post-hero h1{margin:0 0 20px;overflow-wrap:break-word}

.post-byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--divider)}
.post-byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--cd-nude-tint)}
/* min-width:0 + quebra: nome do revisor e credencial vêm do painel e a data
   por extenso é longa; ao lado do avatar (flex-shrink:0) o min-width:auto
   deste item empurraria a linha para fora da tela. */
.pb-meta{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-micro);color:var(--fg-2);
  min-width:0;overflow-wrap:break-word}
.pb-by{color:var(--fg);font-weight:500}
.pb-rev{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2)}
.pb-rev svg{width:14px;height:14px;stroke:var(--cd-blue-grey)}
/* Meio pixel não é degrau: a data lia 12,5px dentro de um bloco de 13px.
   As duas linhas do byline são o mesmo papel — meta — e o mesmo token. */
.pb-date{font-size:var(--fs-micro);color:var(--fg-2)}

.post-featured{max-width:var(--container-narrow);margin:clamp(32px,4vw,48px) auto 0}
.post-featured img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 0 0 8px #fff,0 0 0 9px var(--cd-nude-tint),0 18px 44px rgba(19,30,41,.10)}
.post-caption{margin-top:22px;font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:var(--fs-micro);color:var(--fg-2);text-align:center}

/* Resposta rápida (GEO/AEO) — primeiro elemento do corpo */
.post-tldr{background:var(--cd-beige-50);border-left:3px solid var(--cd-blue-grey);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:22px 26px;margin:0 0 var(--stack)}
.post-tldr .lbl{display:block;font-size:var(--fs-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--fg-2);margin-bottom:10px}
/* Escopado em .post-body de propósito: `.post-tldr p` sozinho empata em
   especificidade com `.post-body p` e PERDE por vir antes — os 16,5px
   escritos aqui nunca chegaram a pintar. A resposta rápida lê no tamanho
   do corpo e se destaca pelo que já a destaca: caixa bege, filete azul,
   texto em --fg e entrelinha mais fechada. */
.post-body .post-tldr p{margin:0;color:var(--fg);
  font-size:var(--post-fs,17px);line-height:1.6}

/* Perguntas que o artigo responde (geo_questions) */
.post-answers{margin:0 0 var(--stack);padding:22px 26px;border:1px solid var(--border);
  border-radius:var(--r-md);background:#fff}
.post-answers .lbl{display:block;font-size:var(--fs-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--fg-2);margin-bottom:12px}
.post-answers li{position:relative;padding-left:20px;font-size:var(--fs-small-plus);color:var(--fg-2);margin-bottom:8px}
.post-answers li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--cd-nude-grey)}
.post-answers li:last-child{margin-bottom:0}

/* =====================================================================
   4 · CORPO DO ARTIGO — a superfície mais lida do site
   ---------------------------------------------------------------------
   É onde a pessoa fica 4 a 8 minutos, quase sempre no celular, e quase
   sempre não está bem. Três decisões, nesta ordem de importância:

   1 · O TEXTO NÃO ENCOLHE NO CELULAR. Antes o corpo era 17px no desktop e
       a media query de 768px o baixava para 16,5px — o inverso do que a
       leitura pede, porque no telefone a tela é menor E a distância de
       leitura é maior. Agora --post-fs SOBE de 17px (390px) até 18px
       (≥ ~660px): o celular é o piso, nunca o teto.

   2 · UM PAR DE VALORES, NÃO CINCO. --post-fs / --post-lh governam tudo o
       que é texto corrido (p, li, td). Antes o tamanho estava escrito em
       cinco lugares e o bloco responsivo corrigia três — o <td> ficava
       para trás e a tabela lia menor que o parágrafo ao lado dela.

   3 · O RITMO VERTICAL É SINTAXE, NÃO DECORAÇÃO. As margens são em `em`
       do PRÓPRIO elemento, então escalam junto com o clamp. E o espaço
       ACIMA de um título é sempre ~3,5x o espaço abaixo dele: é isso que
       amarra o título ao parágrafo que ele abre, em vez de deixá-lo
       flutuando no meio do vão (lei da proximidade).
   ===================================================================== */
.post-body{
  max-width:var(--read-col,41.3rem);
  margin:clamp(40px,5vw,64px) auto 0;
  font-size:var(--post-fs,17px);
  line-height:var(--post-lh,1.75);
  color:var(--fg-2);
  /* Nome composto de fármaco ou URL colada não empurra a largura da página. */
  overflow-wrap:break-word;
}
.post-body>*:first-child{margin-top:0}
.post-body>*:last-child{margin-bottom:0}
.post-body p{margin:0 0 1.4em;font-size:var(--post-fs,17px);line-height:var(--post-lh,1.75);color:var(--fg-2)}

/* H2 — divisor de assunto: régua + respiro grande. O `padding-top` é o ar
   ENTRE a régua e o título; o `margin-top`, o ar antes da régua. */
.post-body h2{font-family:var(--font-display);font-weight:400;
  font-size:var(--post-h2,clamp(25px,2.6vw,31px));line-height:1.2;letter-spacing:-.014em;color:var(--fg);
  margin:2.1em 0 .6em;padding-top:.62em;border-top:1px solid var(--divider);
  text-wrap:balance}
.post-body h2:first-child{margin-top:0;padding-top:0;border-top:none}

/* H3 — subdivisão dentro do assunto: sem régua, respiro menor que o do H2,
   mas ainda ~3x o de baixo. */
.post-body h3{font-family:var(--font-display);font-weight:500;
  font-size:clamp(19px,2vw,22px);line-height:1.3;letter-spacing:-.01em;color:var(--fg);
  margin:1.85em 0 .5em;text-wrap:balance}

/* H4 — rótulo, não título. Fica de propósito menor que o corpo: quem
   varre a página precisa distingui-lo do texto pela FORMA (caixa alta,
   entreletra aberta, sans), não pelo tamanho. */
.post-body h4{font-family:var(--font-body);font-weight:500;font-size:var(--fs-small-plus);text-transform:uppercase;
  letter-spacing:.14em;line-height:1.4;color:var(--fg-2);margin:2em 0 .55em}

.post-body a{color:var(--fg);border-bottom:1px solid var(--cd-nude-grey);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.post-body a:hover{color:var(--cd-blue-grey);border-bottom-color:var(--cd-blue-grey)}
.post-body strong{color:var(--fg);font-weight:500}
.post-body em{font-style:italic}

/* Listas — mesmo corpo e mesma entrelinha do parágrafo. Um item de lista
   costuma ser uma frase inteira; ler mais apertado que o texto ao redor
   não tem justificativa. */
.post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:0;list-style:none}
.post-body ol{counter-reset:bl}
.post-body li{position:relative;padding-left:28px;margin-bottom:.55em;
  font-size:var(--post-fs,17px);line-height:var(--post-lh,1.75)}
.post-body li:last-child{margin-bottom:0}
/* O marcador nasce no centro óptico da PRIMEIRA linha: metade da altura de
   linha (0.5 x --post-lh em `em`) menos metade do próprio ponto. Assim ele
   acompanha o clamp do corpo em vez de ficar preso a um `top` fixo. */
.post-body ul>li::before{content:"";position:absolute;left:6px;
  top:calc(.5em * var(--post-lh,1.75) - 3.5px);
  width:7px;height:7px;border-radius:50%;background:var(--cd-nude-grey)}
.post-body ol>li{counter-increment:bl}
/* O número precisa da MESMA caixa de linha do item, senão a linha de base
   do algarismo sobe em relação à primeira linha do texto. */
.post-body ol>li::before{content:counter(bl);position:absolute;left:0;top:0;
  font-family:var(--font-display);font-size:.82em;
  line-height:calc(var(--post-lh,1.75) / .82);
  color:var(--cd-blue-grey);width:20px;text-align:right}
.post-body li>ul,.post-body li>ol{margin:.5em 0 0}

/* Citação — o único ponto do corpo que muda de voz: serif light itálico.
   No celular o recuo cai para 18px: 26px de um lado só, num container de
   ~350px, come 7,5% da linha. */
.post-body blockquote{margin:2.1em 0;padding:0 0 0 clamp(18px,3vw,26px);
  border-left:2px solid var(--cd-nude-grey);
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(19px,2.2vw,24px);line-height:1.55;color:var(--fg)}
.post-body blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin-bottom:.5em}
.post-body blockquote>*:last-child{margin-bottom:0}
.post-body blockquote cite{display:block;font-family:var(--font-body);font-style:normal;
  font-size:var(--fs-micro);line-height:1.5;letter-spacing:.04em;color:var(--fg-2);margin-top:12px}

.post-body img{border-radius:var(--r-md);margin:2.1em 0;width:100%;
  box-shadow:0 0 0 1px var(--cd-nude-tint)}
.post-body figure{margin:2.1em 0}
.post-body figure img{margin:0}
.post-body figcaption{margin-top:12px;font-family:var(--font-display);font-style:italic;
  font-weight:300;font-size:var(--fs-micro);line-height:1.5;color:var(--fg-2);text-align:center}
.post-body hr{border:none;border-top:1px solid var(--divider);margin:2.6em 0}
.post-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--cd-beige-50);border:1px solid var(--cd-nude-tint);border-radius:5px;padding:2px 6px}
.post-body pre{background:var(--cd-beige-50);border:1px solid var(--cd-nude-tint);
  border-radius:var(--r-sm);padding:18px 20px;overflow-x:auto;margin:2.1em 0}
.post-body pre code{background:none;border:none;padding:0}
/* `display:block` + overflow-x é o que faz a tabela ROLAR DENTRO DA CAIXA
   em vez de empurrar a largura do documento no celular. */
.post-body .table-wrap,.post-body table{margin:2.1em 0}
.post-body table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.post-body thead th{background:var(--cd-beige-50);font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-2);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--cd-nude-tint);white-space:nowrap}
.post-body tbody td{padding:12px 14px;border-bottom:1px solid var(--divider);
  font-size:calc(var(--post-fs,17px) - 1.5px);line-height:1.6;
  color:var(--fg-2);vertical-align:top}
.post-body tbody tr:last-child td{border-bottom:none}

/* ── 5 · FAQ DO ARTIGO ───────────────────────────────────────────────
   A pergunta é conteúdo, não rótulo de interface: entra na escala do
   sistema (--fs-display-sm, o mesmo degrau dos H3 de card e de passo).
   No celular ela SOBE de 16,5px para 19px — antes o acordeão era o texto
   MENOR da página do artigo, e é ele que a pessoa varre procurando a
   própria dúvida. O <button> já ganha 44px de alvo pelo site.css §6.2. */
.post-faq{max-width:var(--read-col,41.3rem);margin:clamp(48px,6vw,80px) auto 0}
/* O H2 "Perguntas frequentes" é PAPEL 1: mora na coluna de leitura e fecha o
   assunto do artigo, então fala com a voz do corpo (--post-h2). Tinha clamp
   próprio e lia 1px MENOR que os H2 que ele vem fechar. */
.post-faq h2{font-family:var(--font-display);font-weight:400;font-size:var(--post-h2,clamp(25px,2.6vw,31px));
  line-height:1.16;margin:0 0 var(--sp-6)}
.acc-item{border-bottom:1px solid rgba(19,30,41,.1)}
.acc-item:first-child{border-top:1px solid rgba(19,30,41,.1)}
.acc-btn{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-5);padding:20px 0;text-align:left;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-sm);
  line-height:1.35;color:var(--fg);transition:color var(--dur) var(--ease)}
.acc-btn:hover{color:var(--cd-blue-grey)}
.acc-toggle{position:relative;width:18px;height:18px;flex-shrink:0;margin-top:6px}
.acc-toggle::before,.acc-toggle::after{content:"";position:absolute;background:var(--cd-blue-grey);
  transition:transform var(--dur) var(--ease)}
.acc-toggle::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.acc-toggle::after{top:0;left:50%;height:100%;width:1.5px;transform:translateX(-50%)}
.acc-item.open .acc-toggle::after{transform:translateX(-50%) scaleY(0)}
/* visibility:hidden — e nao so max-height:0 — porque recorte visual NAO
   tira o conteudo da ordem de tabulacao: sem isto o teclado entrava nos links
   das respostas fechadas, com o foco invisivel. O delay de 360ms deixa a
   animacao de fechar terminar antes de esconder; ao abrir, 0s. */
.acc-panel{max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height 360ms var(--ease), visibility 0s linear 360ms}
.acc-item.open .acc-panel{visibility:visible;
  transition:max-height 360ms var(--ease), visibility 0s linear 0s}
/* A resposta lê 1px abaixo do corpo do artigo — mesma família de valores,
   hierarquia preservada — em vez dos 16px fixos de antes. */
.acc-panel-inner{padding:0 0 var(--sp-6);max-width:62ch;
  font-size:calc(var(--post-fs,17px) - 1px);line-height:1.72;color:var(--fg-2)}

/* ── 6 · COMPARTILHAR + DISCLAIMER DO ARTIGO ─────────────────────── */
.post-share{max-width:var(--read-col,41.3rem);margin:clamp(40px,5vw,56px) auto 0;
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding-top:var(--sp-6);border-top:1px solid var(--divider)}
.post-share .lbl{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.16em;
  color:var(--fg-2);margin-right:var(--sp-1)}
/* O alvo de 44×44 vem do site.css §6.2 (.share-btn está na lista): aqui só
   o desenho. O padding vertical some — a altura é do min-height, senão o
   botão volta a se dimensionar pelo conteúdo, que é o defeito do 1.0. */
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:0 18px;font-size:var(--fs-micro);line-height:1.2;color:var(--fg-2);
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.share-btn:hover{border-color:var(--cd-blue-grey);color:var(--fg)}
.share-btn svg{width:15px;height:15px;flex:0 0 auto}
.post-disclaimer{max-width:var(--read-col,41.3rem);margin:var(--sp-7) auto 0;
  font-size:var(--fs-micro);line-height:1.65;color:var(--fg-2);
  font-style:italic;font-family:var(--font-display);font-weight:300}

/* ── 7 · CTA DO ARTIGO (largura total, superfície deep) ──────────── */
.blog-cta{background:var(--bg-deep);color:#fff;padding-block:var(--section-y);
  position:relative;overflow:hidden}
.blog-cta::before{content:"";position:absolute;right:-180px;top:-100px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(196,191,182,.12) 0%,transparent 70%);
  pointer-events:none}
.blog-cta-inner{max-width:680px;margin:0 auto;text-align:center;position:relative}
/* .blog-cta NÃO carrega .surface-deep na marcação, então as inversões do
   site.css §4 não o alcançam: eyebrow e anel de foco são reafirmados aqui.
   O TAMANHO também precisa ser reafirmado: `.blog-cta p` abaixo vale (0,1,1)
   e derrotava o `.b-eyebrow` do site.css, que vale (0,1,0) — o kicker vinha
   pintando 16,5px, do tamanho do parágrafo que ele deveria anunciar. Dois
   nomes de classe (0,2,0) vencem uma classe + um tipo. */
.blog-cta .b-eyebrow,.blog-cta .eyebrow{color:rgba(255,255,255,.72);font-size:var(--fs-eyebrow);line-height:1.4}
/* PAPEL 2 — H2 INSTITUCIONAL DE BLOCO. Esta é uma faixa de largura total,
   igual às seções da home: usa o MESMO token de H2 de seção do sistema
   (--fs-display-lg). Tinha clamp próprio (26→38px), "Continue lendo" tinha
   outro (24→32px) e o corpo do artigo um terceiro — três tamanhos para duas
   funções na mesma página. Papel 1 (dentro da coluna) é --post-h2, §3. */
.blog-cta h2{color:#fff;font-family:var(--font-display);font-weight:300;
  font-size:var(--fs-display-lg);line-height:var(--lh-display);margin:0 0 var(--sp-5)}
.blog-cta p{color:var(--cd-beige-light);font-size:var(--fs-lead);line-height:1.7;margin:0 0 var(--sp-7)}
.blog-cta :where(a,button):focus-visible{outline-color:var(--focus-on-deep)}
/* Escopado em .blog-cta pelo mesmo motivo do eyebrow: solto, `.blog-cta-micro`
   vale (0,1,0) e perde de `.blog-cta p` (0,1,1) — a microcópia vinha pintando
   16,5px em vez do degrau de meta. */
.blog-cta .blog-cta-micro{margin-top:var(--sp-4);font-size:var(--fs-micro);line-height:1.55;color:rgba(255,255,255,.72)}

/* ── 8 · RELACIONADOS ────────────────────────────────────────────── */
.blog-related{background:var(--bg-warm);padding-block:var(--section-y)}
/* Mesmo papel 2 do CTA (§7): faixa de largura total, token de H2 de seção. */
.blog-related h2{font-family:var(--font-display);font-weight:300;
  font-size:var(--fs-display-lg);line-height:var(--lh-display);margin:0 0 var(--sp-7)}
.blog-related .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── 9 · RESPONSIVO ──────────────────────────────────────────────────
   O que NÃO está mais aqui, e por quê:
   · body{font-size:15.5px}  — o corpo é 16px em todo lugar (site.css §3).
   · .post-body{font-size:16.5px} — o artigo não encolhe no celular (§4).
   · .btn{white-space:normal;padding-block:12.2px} — o botão do 2.0 já
     quebra o rótulo e tem altura por min-height (site.css §5).
   · .container/.blog-container{padding:0 20px} — a calha é o token
     --gutter, clamp(20px,3vw,28px), uma só para o site inteiro.
   · header, rodapé, menu aberto, .blog-pag e prefers-reduced-motion —
     todos com definição única no site.css.                            */
@media (max-width:1024px){
  .blog-grid,.blog-grid-featured,.blog-related .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* A grade cai para 2 colunas e a coluna do destaque fica MAIS larga do que
     na grade de 3: o título sobe um degrau. Fixo pelo token, não por --fs-
     display-md — em vw ele daria 24,58px a 1024px contra 21,53px a 1025px,
     encolhendo ao alargar a janela. */
  .blog-card.featured .blog-card-title{font-size:var(--fs-card-title-lg)}
}
@media (max-width:768px){
  .blog-grid,.blog-grid-featured,.blog-related .blog-grid{grid-template-columns:minmax(0,1fr)}
  /* Só o RITMO dos títulos aperta no celular; o corpo do texto não. A régua
     do H2 vale mais que a distância até ela quando a coluna é estreita. */
  .post-body h2{margin-top:1.75em}
  .post-body h3{margin-top:1.6em}
  .post-featured img{aspect-ratio:16/10;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--cd-nude-tint),
    0 12px 30px rgba(19,30,41,.10)}
  .blog-search{flex-direction:column}
  .post-byline{flex-wrap:wrap}
}

/* =====================================================================
   10 · BUSCA, DESTAQUES E INTRO DE CATEGORIA
   ---------------------------------------------------------------------
   HEADER E RODAPÉ SAÍRAM DAQUI. Eram uma réplica valor-a-valor do
   <style> do index.php — duas cópias que já haviam divergido (calha de
   28px vs clamp, `.btn` do menu clonado à mão com font-size 14,5px e
   `border-bottom:none!important`, quatro cópias do bloco de menu aberto
   entre os dois arquivos). Definição única: site.css §7 e §8.
   ===================================================================== */
/* Variações do grid de destaques conforme a quantidade real de artigos:
   .blog-grid-featured (3) já vem da seção 2; duo e solo evitam colunas
   fantasma quando há 2 ou 1 destaque. */
.blog-grid-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-grid-solo{grid-template-columns:minmax(0,1fr)}
.blog-grid-solo .blog-card.featured .blog-card-link{flex-direction:row;align-items:stretch}
.blog-grid-solo .blog-card.featured .blog-card-img{flex:0 0 52%;aspect-ratio:auto;min-height:300px}
.blog-grid-solo .blog-card.featured .blog-card-body{padding:clamp(26px,3vw,44px);justify-content:center}

/* Anel de foco do campo de busca.
   O `outline:none` de `.blog-search input` (seção 1) tem especificidade
   0,1,1 e VENCE o `:where(…):focus-visible` do site.css §6.1, que vale
   0,0,0 porque `:where()` zera o que está dentro dele. Sem esta regra o
   campo de busca seria o único interativo do blog sem indicação de foco
   por teclado. */
.blog-search input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.blog-search .btn{flex-shrink:0}
.blog-search-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.blog-search-clear{font-size:var(--fs-micro);color:var(--fg-2);border-bottom:1px solid var(--cd-nude-grey);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.blog-search-clear:hover{color:var(--fg);border-bottom-color:var(--cd-blue-grey)}
.share-btn[data-copied="1"]{border-color:var(--cd-blue-grey);color:var(--fg)}

/* Intro editorial da página de categoria — texto corrido, mesma medida de
   leitura do artigo (antes eram 68ch resolvidos em 16,5px = 561px, uma
   quarta largura de coluna no mesmo site). */
.blog-cat-intro{max-width:var(--read-col,41.3rem);margin:0 0 var(--stack);
  font-size:var(--fs-lead);line-height:1.75;color:var(--fg-2)}
.blog-cat-intro h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,2.3vw,28px);line-height:1.2;color:var(--fg);margin:1.6em 0 .5em}
.blog-cat-intro h2:first-child{margin-top:0}
.blog-cat-intro h3{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.9vw,21px);
  line-height:1.3;color:var(--fg);margin:1.5em 0 .45em}
.blog-cat-intro p{margin:0 0 1.2em}
.blog-cat-intro ul{margin:0 0 1.2em}
.blog-cat-intro li{position:relative;padding-left:24px;margin-bottom:.5em}
.blog-cat-intro li::before{content:"";position:absolute;left:4px;top:calc(.5em * 1.75 - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--cd-nude-grey)}
.blog-cat-intro a{color:var(--fg);border-bottom:1px solid var(--cd-nude-grey)}
.blog-cat-intro a:hover{border-bottom-color:var(--cd-blue-grey)}

@media (max-width:768px){
  .blog-grid-duo,.blog-grid-solo{grid-template-columns:minmax(0,1fr)}
  .blog-grid-solo .blog-card.featured .blog-card-link{flex-direction:column}
  .blog-grid-solo .blog-card.featured .blog-card-img{flex:none;aspect-ratio:16/10;min-height:0}
}