/* ==========================================================================
   BLOG — listagem, categorias e artigo
   Arquivo à parte desde 30/09/2026 (QA S16): antes ia num <style> dentro
   de blog-includes/header.php, e voltava no HTML de toda página do blog. Aqui fica em cache
   (1 ano, com ?v= do filemtime). Entra no FIM do <head>, depois do CSS da
   página, como antes (a ordem da cascata não mudou).
   ========================================================================== */
/* O CSS do acordeão (FAQ do artigo) NÃO está aqui: continua embutido no
   <head>, lido da fonte única partials/acordeao-css.php, logo depois
   deste arquivo. Nenhuma regra daqui depois do ponto onde ele entrava
   mexe no acordeão (conferido em 30/09/2026). */

@font-face{font-family:'Manrope';src:url('/fontes/manrope-400.woff2') format('woff2'),url('/fontes/manrope-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* 500: o rodapé único usa esse peso e, sem a declaração, o navegador caía no
   400 ou no 600 mais próximo (QA 29/09/2026) */
@font-face{font-family:'Manrope';src:url('/fontes/manrope-500.woff2') format('woff2'),url('/fontes/manrope-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fontes/manrope-600.woff2') format('woff2'),url('/fontes/manrope-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fontes/manrope-700.woff2') format('woff2'),url('/fontes/manrope-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fontes/manrope-800.woff2') format('woff2'),url('/fontes/manrope-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
/* Marcellus: a serifa dos títulos (peso único 400 — não existe negrito, e
   qualquer font-weight acima de 400 num título faria o navegador inventar um
   negrito falso). Dois subconjuntos com o unicode-range do Google Fonts: o
   latin cobre o português inteiro; o latin-ext só baixa se aparecer letra
   de fora dele. */
@font-face{font-family:'Marcellus';src:url('/fontes/marcellus-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Marcellus';src:url('/fontes/marcellus-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Paleta da marca. Os nomes --sl-* são herança do modelo e ficaram para não
   mexer no CSS inteiro; o que vale é o papel:
   - terracotta/olive/amber = marrom #a37d5a, o destaque em fundo claro (fio,
     marcador, rótulo, botão com branco: 6,7 no branco, 6,3 no fundo #fbf8f3);
   - as versões -dark = #8c6a4b, o hover do marrom (branco 8,6);
   - forest = oliva #474036, a tinta (títulos e links: 11,5 no fundo);
   - sage = creme #F9F2E8 (caixas de enquadramento), sage-dark = bege
     #eadccd (borda dessas caixas e fundo de imagem ainda sem capa);
   - gray-200/300 = bordas bege; gray-500 = texto secundário #6b675a (5,3 no
     fundo); gray-700 = corpo #4d4b3c (8,3 no fundo). */
:root{
  --sl-terracotta:#a37d5a;--sl-terracotta-dark:#8c6a4b;--sl-olive:#a37d5a;--sl-olive-dark:#8c6a4b;
  --sl-amber:#a37d5a;--sl-sage:#F9F2E8;--sl-sage-dark:#eadccd;
  --sl-forest:#474036;--sl-forest-dark:#3a342c;--sl-white:#fff;
  --sl-gray-100:#F9F2E8;--sl-gray-200:#ebe1d3;--sl-gray-300:#cfc6b6;--sl-gray-500:#6b675a;--sl-gray-700:#4d4b3c;
  /* texto que não é título em cinza, como no site (29/09/2026: #777777).
     30/09/2026: #727272 no blog. O fundo do blog é #fbf8f3, e o #777 dava
     4,23:1, abaixo do AA (4,5:1); #727272 dá 4,54:1 nele e 4,8:1 no branco
     dos cartões, e a diferença para o #777 não se vê. Nas caixas creme
     (#F9F2E8: "Resposta rápida" e intro das categorias) vale --fg-creme,
     #6f6f6f (4,52:1; o #777 dava 4,03:1). */
  --fg:#727272;--fg-muted:#727272;--fg-creme:#6f6f6f;--fg-brand:var(--sl-forest);--accent:var(--sl-terracotta);
  --border:var(--sl-gray-200);--border-strong:var(--sl-gray-300);
  --shadow-sm:0 1px 3px rgba(36,32,27,.08),0 1px 2px rgba(36,32,27,.04);
  --shadow-md:0 4px 6px rgba(36,32,27,.07),0 2px 4px rgba(36,32,27,.04);
  --shadow-warm:0 8px 24px -8px rgba(163,125,90,.30);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:9999px;
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;
  --font-body:'Manrope',system-ui,sans-serif;
  /* Margem lateral do blog = a do cabeçalho e do rodapé únicos (.bbh .in e
     .bbf .in), para o conteúdo começar no mesmo x do logo (QA 29/09/2026).
     Era 24px fixo: 16px à esquerda do logo a 1440px. */
  --bl-gutter:clamp(1.25rem,.9rem + 1.8vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x SÓ no body (QA 29/09/2026): com hidden também no html, o body
   virava contêiner de rolagem e o cabeçalho sticky grudava nele — que não
   rola —, então o menu e o "Agendar avaliação" sumiam logo no início do
   artigo. Mesmo padrão do styles.css. scroll-padding de 100px: o cabeçalho
   tem 80px acima de 680px e agora fica fixo por cima das âncoras. */
html,body{margin:0;padding:0;max-width:100%}
body{overflow-x:hidden}
html{scroll-padding-top:100px}
/* font-synthesis:style — o mesmo do styles.css: o HTML do artigo vem do
   editor do painel e pode trazer <strong> dentro de um h2/h3; a Marcellus só
   tem o 400, e sem isto o navegador engrossaria a serifa à força (negrito
   falso). A Manrope tem os pesos reais e não muda; itálico continua. */
body{font-family:var(--font-body);background:#fbf8f3;color:var(--fg);line-height:1.6;font-size:15.5px;font-synthesis:style}
img{max-width:100%;height:auto;display:block}
a{color:var(--sl-forest);text-decoration:none}
a:hover{color:var(--sl-terracotta-dark)}
/* h2/h3/h4 de base continuam em Manrope: o rodapé e as perguntas do acordeão
   usam h2/h3 e não são títulos de conteúdo. Os títulos do blog recebem a
   Marcellus pelo seletor próprio (bloco "ALINHAMENTO" mais abaixo). O h1 é
   sempre o título da página, então vai direto em Marcellus 400. */
h1,h2,h3,h4{font-family:var(--font-body);color:var(--sl-forest);line-height:1.2;margin:0 0 12px;font-weight:700}
h1{font-family:var(--font-display);font-size:33px;font-weight:400;letter-spacing:0}
h2{font-size:26px;font-weight:600}
h3{font-size:18px;font-weight:600}

/* NAV — replicado da landing */
.btn{font-family:var(--font-body);font-weight:700;font-size:15px;padding:14px 24px;border-radius:var(--r-pill);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all 140ms var(--ease-out);text-decoration:none;line-height:1}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-warm)}
.btn-primary:hover{background:var(--sl-terracotta-dark);color:#fff;transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
/* Estilos do cabeçalho estão no cabeçalho único: partials/header.php */

/* CONTAINER */
.blog-container{max-width:1180px;margin:0 auto;padding:0 var(--bl-gutter)}

/* HERO */
.blog-hero{padding:48px 0 36px;background:#fbf8f3}
/* balance/pretty (QA 29/09/2026): sem palavra sozinha na última linha do
   título e do texto de apoio do blog e das categorias */
.blog-hero h1{font-size:39px;margin:8px 0 14px;text-wrap:balance}
.blog-hero .blog-lead{font-size:clamp(15.5px,14.4px + .25vw,17.4px);/* 390px: 18 -> 16 */color:var(--fg-muted);max-width:680px;margin:0 0 24px;text-wrap:pretty}
.blog-crumbs{font-size:13px;color:var(--fg-muted);margin-bottom:8px}
.blog-crumbs a{color:var(--sl-forest);font-weight:600}
/* Separador e página atual no cinza secundário da marca: #6b675a dá 5,3:1
   sobre o fundo #fbf8f3 (um cinza claro como #bbb sumiria, 1,8:1). */
.blog-crumbs span{margin:0 6px;color:var(--fg-muted)}

.blog-search{display:flex;gap:8px;margin-bottom:18px}
/* min-width:0 obrigatorio: item de flex nasce com min-width:auto, e para
   <input> o min-content e a largura intrinseca (size=20). Sem isto o campo
   nao encolhia e o botao Buscar saia da tela abaixo de 343px. */
/* font-size 16px depois do font:inherit (QA 29/09/2026): com os 15,5px
   herdados o Safari do iPhone dava zoom na página ao tocar no campo */
.blog-search input{flex:1;min-width:0;padding:11px 14px;border-radius:var(--r-pill);border:1px solid var(--border-strong);font:inherit;font-size:16px;background:#fff}
.blog-search input:focus{outline:none;border-color:var(--sl-forest);box-shadow:0 0 0 3px rgba(71,64,54,.15)}
/* Botão no marrom da marca com rótulo branco (6,7:1); hover no marrom mais
   escuro #8c6a4b (8,6:1). */
.blog-search button{padding:14px 24px;background:var(--sl-terracotta);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;cursor:pointer;box-shadow:var(--shadow-warm);transition:all 140ms var(--ease-out)}
.blog-search button:hover{background:var(--sl-terracotta-dark);transform:translateY(-1px)}

.blog-cats{display:flex;flex-wrap:wrap;gap:8px}
.blog-cats a{background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;font-size:13.5px;font-weight:600;color:var(--sl-forest)}
.blog-cats a:hover{border-color:var(--sl-forest);background:var(--sl-sage);color:var(--sl-forest)}
/* Celular (QA 29/09/2026): as 6 fichas quebravam em 5 linhas (254px a
   390px) e empurravam o primeiro artigo para baixo da dobra. Viram uma
   faixa de uma linha, rolável na horizontal, que vai de borda a borda da
   tela (a margem negativa desfaz o gutter) — a ficha cortada na borda
   direita é o sinal de que há mais. */
@media (max-width:640px){
  .blog-cats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--bl-gutter));padding:0 var(--bl-gutter) 4px;
    scroll-padding-inline:var(--bl-gutter);scroll-snap-type:x proximity;scrollbar-width:none}
  .blog-cats::-webkit-scrollbar{display:none}
  .blog-cats a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}

/* MAIN */
.blog-main{padding:32px var(--bl-gutter) 64px}
.blog-section{margin-bottom:48px}
.blog-section h2{margin-bottom:20px;font-size:22px}
/* As contagens citadas nos comentarios daqui para baixo ("3 das 4
   categorias", "22 titulos", "categoria de 40 caracteres") sao do acervo em
   que este CSS foi calibrado, antes deste site. O CSS vale para qualquer
   acervo, mas a introducao das categorias e os cortes de titulo e de
   categoria devem ser reconferidos no celular quando as categorias e os
   primeiros artigos daqui estiverem publicados. */
/* INTRODUÇÃO DA CATEGORIA
   Era um <section> com style inline: max-width:780px e margin:0 auto, ou seja,
   CENTRADO num contêiner de 1180px — desalinhado da grade de cartões logo
   abaixo, que ocupa a largura toda. E com 32px acima contra 40px abaixo: dois
   espaços quase iguais, sem dizer a que bloco o texto pertence.

   Agora é ancorado à ESQUERDA, na mesma largura de leitura do .blog-lead do
   herói logo acima (680px) — as duas linhas de texto passam a compartilhar a
   mesma margem esquerda e o mesmo limite à direita.

   O tratamento é o que o site já usa para texto de enquadramento: fundo
   creme, fio marrom de 4px à esquerda. É o mesmo par do box "Resposta rápida" do
   artigo (.post-tldr). O fio à esquerda não é enfeite: é ele que ancora o
   bloco visualmente desse lado.

   Ritmo: encostado no herói (o texto continua o herói) e 52px até os artigos
   (ali começa outra coisa). 32:52 em vez de 32:40. */
/* Largura da COLUNA INTEIRA, igual à grade de cartões logo abaixo (1132px a
   1440px). A versão anterior tinha 680px e ficava visivelmente mais estreita
   que tudo o que vem depois. */
.blog-intro{margin:0 0 60px;background:var(--sl-sage);
  border:1px solid var(--sl-sage-dark);border-left:4px solid var(--sl-terracotta);
  border-radius:var(--r-md);padding:26px 30px}
.blog-intro>:first-child{margin-top:0}
.blog-intro>:last-child{margin-bottom:0}
/* O parágrafo PODE ser dividido entre as duas colunas, e é isso que faz elas
   fecharem na mesma altura. A primeira versão tinha break-inside:avoid, e
   como os dois parágrafos são muito desiguais (o descritivo tem 2,4× a 3,4×
   a ressalva clínica) o balanceador não tinha o que mover: a coluna da
   direita ficava 40% a 71% vazia.
   orphans/widows:1 vem junto porque tirar só o break-inside não resolveu —
   medido: em 3 das 4 categorias a divisão deixaria UMA linha solta, o padrão
   de 2 a barra, e a coluna voltava a desbalancear. Com os três, a sobra
   máxima medida nas 4 categorias caiu para 12%. */
.blog-intro p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--fg-creme);
  break-inside:auto;orphans:1;widows:1}
.blog-intro strong{color:var(--sl-forest)}
/* link no marrom da marca: 6,0:1 sobre o creme da caixa */
.blog-intro a{color:var(--sl-terracotta);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.blog-intro a:hover{color:var(--sl-terracotta-dark)}
/* DUAS COLUNAS de texto a partir de 768px. Sem isto, a linha na largura
   cheia teria ~134 caracteres a 16px — o dobro do que se lê sem perder a
   linha. Com duas, cai para 41 a 71, e o bloco passa a repetir a divisão da
   grade de cartões que vem logo abaixo.
   Entrava em 900px até 22/09/2026, e a faixa de 768 a 899 ficava com texto
   corrido na largura toda: medido no ar, 94 caracteres por linha a 820px e
   105 a 899px, contra o teto de 80 da WCAG 1.4.8. Em 768px o iPad em retrato
   já pega as duas colunas e a linha volta para 41. */
@media (min-width:768px){
  .blog-intro{columns:2;column-gap:44px}
  .blog-intro p{margin-bottom:0}
  .blog-intro p+p{margin-top:14px}
}
/* A faixa que sobra — celular deitado e janela estreita, onde duas colunas
   dariam menos de 40 caracteres cada e não compensam. Aqui a caixa continua
   na largura cheia (decisao de design), mas a LINHA ganha teto: 590px são
   os mesmos 80 caracteres da WCAG nesta fonte. Sem o teto, a linha ia a 90
   caracteres em 767px. */
@media (min-width:641px) and (max-width:767px){
  .blog-intro p{max-width:590px}
}
@media (max-width:640px){
  /* 60px tambem aqui: o espaco ACIMA e o mesmo do desktop (24 da margem do
     texto de apoio + 36 do padding do heroi), porque nenhum dos dois encolhe
     no celular. Deixar 36 embaixo repetiria, em tela pequena, exatamente o
     desequilibrio que a revisao de layout apontou no desktop. */
  .blog-intro{margin-bottom:60px;padding:16px 18px;border-left-width:3px}
  .blog-intro p{font-size:15px}
}

/* O espaço ACIMA do bloco é a soma de três coisas: a margem do texto de apoio
   do herói (24px), o padding de baixo do herói (36px) e o padding de cima do
   main (32px) = 92px, contra 60px abaixo. Nada disso se vê como separação,
   porque o fundo do herói e o do body são a MESMA cor (#fbf8f3) — o leitor
   mede do último texto, e via 92 contra 52.
   Zerando o padding do main quando existe introdução, o de cima vira 60 e
   iguala o de baixo. A classe só entra quando o bloco existe: sem ele, a
   grade de cartões continua com os 32px de respiro. */
.blog-main.has-intro{padding-top:0}

.blog-result{color:var(--fg-muted);margin-bottom:24px}
.blog-empty{color:var(--fg-muted);background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:32px;text-align:center}
/* link "Ver todos os artigos" da busca sem resultado (QA 29/09/2026) */
.blog-empty a{color:var(--sl-forest);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.blog-empty a:hover{color:var(--sl-terracotta-dark)}

/* GRID DE CARDS */
/* Cartao HORIZONTAL desde 21/09/2026: capa a esquerda, conteudo a direita,
   no celular tambem. Duas colunas — nao tres: com tres, cada cartao ficaria
   com 361px e a coluna de texto com 155px, estreita demais para um titulo.
   Com duas, o cartao fica em 554px, a mesma faixa das duas referencias
   medidas (455px e 548px). */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* O grid de destaque nao tem mais razao para ser diferente: a proporcao
   2fr 1fr 1fr foi desenhada para cartao vertical, e num cartao horizontal
   produziria uma coluna de texto de 110px. O bloco so renderiza quando algum
   artigo e marcado como destaque, e precisa nascer certo. */
.blog-grid-featured{grid-template-columns:repeat(2,1fr)}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
/* 40% de capa. A primeira versao usava 45% — a media das duas referencias
   medidas (42,2% e 45,8%) — e a coluna de texto ficava com 260px, estreita
   demais para o resumo em 3 linhas e para 2 dos 22 titulos. Com 40% ela vai
   a 288px: os 22 titulos cabem inteiros e o resumo volta as 3 linhas. */
.blog-card a.card-link{color:inherit;display:grid;grid-template-columns:40% 1fr;
  align-items:stretch;flex:1}

/* A CAPA MANDA NA ALTURA — foi o erro da primeira versao ter sido o
   contrario. Sem aspect-ratio aqui, a altura da caixa vinha do texto, que
   muda de altura conforme o titulo tem 2 ou 3 linhas; a proporcao da caixa
   entao variava de cartao para cartao NA MESMA TELA (medido: 1,08 e 1,16 a
   1440px) e desabava nos pontos de quebra (1,78 a 640px contra 0,78 a
   641px — a mesma capa inteira de um lado e pela metade do outro).
   Com a proporcao declarada, o recorte vira um numero escolhido e igual em
   todos os cartoes: 9/10 sobre uma capa 16:9 mantem 51% da largura — a mesma
   proporcao das duas referencias de layout medidas (0,93 e 0,89).
   O texto foi dimensionado para caber nesta altura; quando sobra, ele fica
   centrado em vez de esticar. */
/* A proporcao mora no ::before, nao em aspect-ratio. Item de grade com
   aspect-ratio e esticado nos dois eixos: se a linha crescer porque o texto
   ficou mais alto, o navegador aplica a proporcao e AUMENTA A LARGURA junto,
   passando da coluna e invadindo o padding do texto. Aqui isso ainda nao
   acontece — o texto cabe e quem manda na linha e a capa —, mas e a mesma
   armadilha que estourou nos cartoes do site em 22/09/2026, la medida em 17px
   de invasao. Porcentagem de padding resolve contra a LARGURA do bloco que a
   contem: a altura continua saindo da largura, sem a regra que alargava. */
.blog-card .img{background:var(--sl-sage-dark);overflow:hidden;position:relative}
.blog-card .img::before{content:"";display:block;padding-top:111.111%}  /* 9/10 */
.blog-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 250ms var(--ease-out)}
.blog-card:hover .img img{transform:scale(1.03)}
/* LEGENDA VISÍVEL "Imagem ilustrativa" (QA 29/09/2026) — as regras .ilus e
   .ilus-tag do styles.css §10.9 (o blog não carrega o styles.css), com a
   tinta #474036 sobre o creme a 90% (11,1:1 no branco, 8,8:1 no preto).
   No cartão a <img> é absoluta dentro da capa, então o invólucro .ilus
   ocupa a capa inteira (inset:0) e a pílula fica no canto inferior
   esquerdo DA CAPA. aria-hidden no HTML; pointer-events:none para não
   roubar o clique do cartão. */
.ilus{position:relative;display:block}
.blog-card .img>.ilus{position:absolute;inset:0;height:100%}
.ilus-tag{position:absolute;left:10px;bottom:10px;z-index:1;display:block;max-width:calc(100% - 20px);
  padding:4px 9px;border-radius:var(--r-pill);background:rgba(249,242,232,.9);color:#474036;
  font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.25;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none;
  box-shadow:0 1px 2px rgba(36,32,27,.14)}
@media (max-width:600px){.ilus-tag{left:8px;bottom:8px;max-width:calc(100% - 16px)}}
/* 340px para baixo a capa do cartão cai para ~117px e a pílula saía cortada
   ("Imagem ilustrat…", medido a 320px): a legenda quebra em duas linhas em
   vez de perder a palavra. */
@media (max-width:340px){.blog-card .ilus-tag{white-space:normal;border-radius:8px}}
/* min-width:0 e obrigatorio: sem ele a coluna de texto nao encolhe abaixo do
   conteudo e uma palavra longa ("blefaroplastia" num titulo estreito) empurra o cartao para
   fora da grade. */
.blog-card .body{padding:18px 22px 16px;min-width:0;display:flex;flex-direction:column;
  justify-content:center}
/* Duas colunas (≥1100): miolo no TOPO (QA 29/09/2026). Centrado, a
   categoria de cada cartão caía numa altura diferente conforme o título
   tinha 2 ou 3 linhas, e a fileira ficava desalinhada lado a lado. Em uma
   coluna (e no celular) continua centrado: não há vizinho ao lado. */
@media (min-width:1100px){.blog-card .body{justify-content:flex-start}}
/* Artigo sem capa: o texto ocupa as duas colunas, em vez de deixar 45% do
   cartao em branco. So o title e obrigatorio no painel, entao isto acontece. */
.blog-card .body:only-child{grid-column:1/-1}
/* letter-spacing menor para que um rotulo de categoria de ate 40
   caracteres caiba em UMA linha na coluna de 288px. Em duas linhas ele
   empurrava o texto para alem da altura da capa, e era isso que fazia
   cartoes vizinhos terem cortes de capa diferentes. */
.blog-card .cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--sl-terracotta);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hyphens:manual (QA2 01/10/2026, C1): o hifenizador automático partia os
   títulos no celular ("pro-cedimento", "colá-geno"); break-word só quebra a
   palavra que não cabe inteira. A mesma correção do .post-card (styles.css). */
.blog-card h2,.blog-card h3{font-size:16.5px;margin:0 0 10px;line-height:1.3;color:var(--sl-forest);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;hyphens:manual;text-wrap:pretty}
.blog-card .ex{color:var(--fg-muted);font-size:13.5px;line-height:1.55;margin:0 0 12px;flex:0 1 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* margin-top:0 e nao auto. A margem automatica comia todo o espaco livre da
   coluna: empurrava o "Ler conteudo" para o rodape e, com isso, colava
   categoria/titulo/resumo no topo. Sem ela, o grupo inteiro vira um bloco so
   e o justify-content:center do .body centra esse bloco na altura da capa. */
.blog-card .meta{font-size:12.5px;color:var(--fg-muted);margin-top:0;display:flex;align-items:center;justify-content:flex-start;gap:10px}
/* "Ler conteúdo" no marrom (6,7:1 no branco do cartão), escurece no hover */
.blog-card .read-more{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--sl-terracotta)}
.blog-card .read-more svg{transition:transform 140ms var(--ease-out)}
.blog-card:hover .read-more{color:var(--sl-terracotta-dark)}
.blog-card:hover .read-more svg{transform:translateX(2px)}

/* PAGINAÇÃO */
.blog-pag{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px;justify-content:center}
.blog-pag a{padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border);color:var(--sl-forest);font-weight:600;font-size:14px}
.blog-pag a:hover{background:var(--sl-sage)}
/* página atual: marrom com branco (6,7:1), hover no marrom escuro (8,6:1) */
.blog-pag a.ativo{background:var(--sl-terracotta);color:#fff;border-color:var(--sl-terracotta)}
.blog-pag a.ativo:hover{background:var(--sl-terracotta-dark);border-color:var(--sl-terracotta-dark);color:#fff}

/* ARTIGO — container único e centralizado, sem padding extra do .blog-container */
/* Linha de leitura (QA 29/09/2026): com 780px e 15,5px a linha do corpo ia a
   96–106 caracteres (1440 e 768). Com 700px e 17px (≥821) e 660px e 16px
   (641–820, no bloco de 820px mais abaixo) ela volta à faixa de 70–85. */
.post-wrap{max-width:700px;margin:0 auto;padding:32px var(--bl-gutter) 48px}
.post-hero{margin-bottom:24px}
.post-hero .crumbs{font-size:12px;color:var(--fg-muted);margin-bottom:14px;line-height:1.5}
.post-hero .crumbs a{color:var(--sl-forest);font-weight:600}
/* Trilha numa linha só (QA 29/09/2026): o último item repetia o título
   inteiro — que está no h1 logo abaixo — e ocupava 3 linhas no celular.
   Agora ele encolhe primeiro e termina em reticências; os links não
   quebram. O texto completo continua no DOM (leitor de tela) e no
   BreadcrumbList do JSON-LD. */
.post-hero .crumbs{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.post-hero .crumbs>*{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.post-hero .crumbs>.sep{flex:none;overflow:visible}
.post-hero .crumbs>[aria-current]{flex:1 1 0;min-width:1.5em}
/* No celular sobravam 18–48px para o título ("Blef…"): ele sai da tela, com
   o separador que o antecede, e a trilha termina na categoria. Oculto só
   visualmente — o leitor de tela continua lendo o item atual. */
@media (max-width:640px){
  .post-hero .crumbs>.sep:nth-last-child(2){display:none}
  .post-hero .crumbs>[aria-current]{position:absolute;flex:none;width:1px;height:1px;min-width:0;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);border:0}
  /* Só a categoria encolhe (QA2 01/10/2026, C4): a 320 os três links
     encolhiam juntos e saíam "Iníci" e "Blog" cortado. */
  .post-hero .crumbs>a{flex-shrink:0}
  .post-hero .crumbs>a:nth-last-child(3){flex-shrink:1}
}
/* Separador no cinza secundário (#6b675a, 5,3:1 no fundo). Mesmo decorativo
   (aria-hidden), um cinza claro sumiria em tela clara. */
.post-hero .crumbs span.sep{margin:0 6px;color:var(--fg-muted)}
/* ficha da categoria: marrom com branco (6,7:1), hover no marrom escuro */
.post-hero .cat{display:inline-block;background:var(--sl-terracotta);color:#ffffff;padding:5px 13px;border-radius:var(--r-pill);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;text-decoration:none}
.post-hero .cat:hover{background:var(--sl-terracotta-dark);color:#fff}
.post-hero h1{font-size:35px;line-height:1.18;margin:0 0 18px;color:var(--sl-forest)}

/* byline de autoria/revisão (E-E-A-T visível ao leitor) */
/* Réguas acima e abaixo: sem elas a assinatura encostava no título e no
   corpo do artigo e o leitor não percebia onde um bloco terminava. */
.post-byline{display:flex;align-items:center;gap:15px;margin:0 0 32px;padding:17px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:left}
.post-byline .pb-av{flex:0 0 auto;width:58px;height:58px;border-radius:50%;object-fit:cover;
  background:var(--sl-sage-dark);color:var(--sl-forest);font-size:16px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--border)}
.post-byline .pb-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.post-byline .pb-by{font-size:15px;font-weight:700;color:var(--fg);line-height:1.3}
.post-byline .pb-rev{font-size:13px;font-weight:600;color:var(--sl-terracotta);
  display:flex;align-items:center;gap:7px;line-height:1.4}
/* flex:0 0 auto + aspect-ratio: como item de flex ao lado de um texto que
   quebra, o selo encolhia na horizontal e o círculo saía achatado. */
.post-byline .pb-check{flex:0 0 auto;width:18px;height:18px;aspect-ratio:1;border-radius:50%;
  background:var(--sl-terracotta);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.post-byline .pb-check svg{width:10px;height:10px;display:block;stroke:currentColor}
.post-byline .pb-date{font-size:12.5px;color:var(--fg-muted);line-height:1.4}
@media (max-width:560px){
  .post-byline{gap:12px;padding:15px 0;align-items:flex-start}
  .post-byline .pb-av{width:50px;height:50px;font-size:15px}
  .post-byline .pb-rev{align-items:flex-start}
  .post-byline .pb-check{margin-top:2px}
}

/* Resposta rápida (AEO): box no topo do artigo, renderizado a partir do campo
   geo_direct_answer (painel: Blog › artigo › Resposta direta principal). */
.post-tldr{background:var(--sl-sage);border:1px solid var(--sl-sage-dark);border-left:4px solid var(--sl-terracotta);border-radius:var(--r-md,12px);padding:18px 20px;margin:0 0 32px}
.post-tldr .tldr-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sl-terracotta);margin-bottom:7px}
.post-tldr p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-creme)}
.post-tldr :last-child{margin-bottom:0}

.post-featured-img{margin:0 0 40px}
/* moldura premium (mat branco + fio + sombra funda) */
.post-featured-img img{width:100%;height:auto;border-radius:var(--r-lg);aspect-ratio:16/9;object-fit:cover;display:block;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--sl-gray-200),0 26px 56px -24px rgba(71,64,54,.4)}
.post-caption{text-align:center;font-size:13px;color:var(--fg-muted);margin-top:10px}
.post-previa{background:#a37d5a;color:#fff;text-align:center;font-size:14px;font-weight:600;padding:10px 16px;line-height:1.4}

.post-body{font-size:17px;line-height:1.78;color:var(--fg)}
.post-body p{margin:0 0 18px}
.post-body strong{color:var(--sl-forest)}
.post-body h2{font-size:24px;margin:36px 0 14px;color:var(--sl-forest);font-weight:400;line-height:1.25}
/* h3 do corpo em Marcellus 400; o h4 continua Manrope 600. O h3 fica 5%
   MAIOR que os 18,5px de antes (a mesma régua do .article-block h3 do
   styles.css), não menor: a Marcellus 400 é mais leve que o Manrope 600, e a
   17px o h3 ficava abaixo do h4 (16,5px em 600) — medido, o h4 lia como o
   título de nível mais alto. */
.post-body h3{font-family:var(--font-display);font-size:19.5px;margin:28px 0 10px;color:var(--sl-forest);font-weight:400;line-height:1.3}
.post-body h4{font-size:16.5px;margin:22px 0 8px;color:var(--sl-forest);font-weight:600}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:24px}
.post-body li{margin-bottom:6px}
/* imagens dentro do artigo: mesma linguagem, moldura um pouco mais leve */
.post-body img{border-radius:var(--r-md);margin:30px auto;max-width:100%;height:auto;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--sl-gray-200),0 18px 40px -20px rgba(71,64,54,.34)}
.post-body blockquote{border-left:4px solid var(--accent);background:var(--sl-sage);padding:18px 22px;margin:24px 0;border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--sl-forest)}
.post-body a{color:var(--sl-forest);text-decoration:underline}
.post-body a:hover{color:var(--sl-terracotta-dark)}

/* FAQ do post: mesmo acordeão das páginas de área (CSS em partials/acordeao-css.php) */
.post-faq{margin:44px 0 0}
/* O título da seção vai em Marcellus (bloco ALINHAMENTO); as perguntas do
   acordeão continuam em Manrope, pelo CSS do acordeão. */
.post-faq h2{font-size:1.38rem;font-weight:400;letter-spacing:0;color:var(--sl-forest);margin:0 0 18px}
/* (aqui entrava o CSS do acordeão: ver o topo do arquivo) */

/* COMPARTILHAR */
.post-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:36px 0 0;padding-top:20px;border-top:1px solid var(--border);font-size:13.5px;color:var(--fg-muted)}
.post-share a,.post-share button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:#fff;color:var(--sl-forest);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all 140ms var(--ease-out)}
.post-share a:hover,.post-share button:hover{border-color:var(--sl-forest);background:var(--sl-sage);color:var(--sl-forest)}
/* o "Compartilhar" nativo nasce escondido e só aparece com a Web Share API (30/09/2026) */
.post-share [hidden]{display:none}
.post-share svg{width:15px;height:15px;flex-shrink:0}
/* Celular (QA2 01/10/2026, C9): o rótulo "Compartilhar:" vai para uma
   linha só dele e os dois botões ficam lado a lado até 320 — antes o
   "Copiar link" caía sozinho na 2a linha, embaixo do rótulo. */
@media (max-width:480px){.post-share>span:first-child{flex-basis:100%}}
/* Texto só para leitor de tela — o aviso "Link copiado" do Compartilhar
   (role=status) — (QA 29/09/2026). O blog não carrega o styles.css. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* CAIXA DO AUTOR */
.author-box{display:flex;gap:16px;margin:28px 0 0;padding:22px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.author-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--sl-sage-dark);color:var(--sl-forest);font-weight:700;display:grid;place-items:center;flex-shrink:0;font-size:16px}
img.author-avatar{display:block}
.author-info strong{font-size:16px;color:var(--sl-forest)}
.author-info p{margin:6px 0 8px;font-size:13.5px;color:var(--fg-muted);line-height:1.55}

/* NAVEGAÇÃO ENTRE ARTIGOS */

/* faixa do "Continue lendo" num bege um tom abaixo do fundo da página */
.related.blog-container{max-width:none;margin:0;padding:0;background:#f3ece2}
.related > h2,.related > .blog-grid{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:var(--bl-gutter);padding-right:var(--bl-gutter);box-sizing:border-box}
.related > h2{padding-top:48px}
.related > .blog-grid{padding-bottom:72px}
.related h2{font-size:19.5px;margin-bottom:20px;color:var(--sl-forest)}

/* FOOTER — estilos no rodapé único: partials/footer.php */

/* Uma coluna so, e cedo. Em duas colunas abaixo de 1100px o cartao cai para
   menos de 514px e a coluna de texto para menos de 240px — cabem 25
   caracteres por linha, e o titulo volta a ser cortado. Em uma coluna o
   cartao fica largo e a capa pede MENOS proporcao: 45% de 1051px daria
   473px de imagem, que engoliria o cartao. Em 32% ela volta para ~336px,
   perto da largura que tinha na versao vertical — e o corte da capa fica
   ate melhor (mantem ~77% da largura, contra 65% em duas colunas). */
/* Em uma coluna a capa passa a ter largura FIXA, nao porcentagem. A versao
   anterior usava 32%, calibrado em 1099px; a 700px esses 32% viravam 209px ao
   lado de um cartao de 191px de altura, e o corte caia para 53%. Como a altura
   do cartao e praticamente a mesma em toda a faixa, e a LARGURA que precisa
   ser estavel. 300px com proporcao 5/4 mantem 70% da capa de ponta a ponta. */
@media (max-width:1099px){
  .blog-grid,.blog-grid-featured{grid-template-columns:1fr}
  .blog-card a.card-link{grid-template-columns:300px 1fr}
  .blog-card .img::before{padding-top:80%}        /* 5/4 */
  .blog-card .body{padding:20px 24px 18px}
}
/* As sete regras que o bloco "Continue lendo" tinha aqui sairam em
   21/09/2026. Elas existiam para caber DOIS cartoes verticais lado a lado no
   celular — escondiam categoria e resumo e derrubavam o titulo para 13px.
   Com o cartao horizontal, duas colunas de ~150px sao impossiveis, e o
   arranjo compacto ja e o padrao do cartao no celular. Pior: por serem mais
   especificas (.related .blog-card > .blog-card), elas venciam as regras
   novas e o bloco de relacionados ficava com um clamp de titulo diferente do
   resto da listagem. Sem elas, o "Continue lendo" e a listagem sao a mesma
   coisa — que e o certo, porque sao o mesmo componente. */
@media (max-width:820px){
  .blog-hero h1{font-size:28px}
  /* 641–820: coluna de 660px e corpo a 16px (~80 caracteres por linha a
     768px); abaixo de 641 a coluna já é a tela e o corpo desce a 15px no
     bloco seguinte (QA 29/09/2026) */
  .post-wrap{max-width:660px;padding:20px var(--bl-gutter) 36px}
  .post-hero h1{font-size:26px;line-height:1.22}
  .post-hero .crumbs{font-size:12px}
  .post-body{font-size:16px}
  .post-tldr p{font-size:15.5px}
  .post-body h2{font-size:20px;margin-top:30px}
  /* h3 a 18px (QA 29/09/2026): a 17px, contra o corpo de 15px, ele lia
     fraco. O h4 fica no corpo do texto (15px, o peso 600 é que o
     distingue) — com o h3 a 15,5px o h4 a 16,5px ficava maior que ele */
  .post-body h3{font-size:18px;margin-top:24px}
  .post-body h4{font-size:15px}
  .post-featured-img img{aspect-ratio:16/10}
}
@media (max-width:640px){
  .post-body{font-size:15px}
}
/* ==========================================================================
   TOQUE — o que so quebra no Safari do iPhone

   O blog tem CSS proprio e NAO carrega o styles.css, entao as correcoes de
   toque do site nao chegavam aqui: este arquivo estava sem
   -webkit-text-size-adjust, sem -webkit-tap-highlight-color e sem nenhuma
   regra (hover:none). Era a parte do site com os menores alvos de todos —
   o breadcrumb do artigo tinha 14px de altura de toque.
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (hover:none){
  /* o iOS pinta um retangulo cinza atras de cada toque */
  a,button,summary,label{-webkit-tap-highlight-color:transparent}

  /* alvo minimo: a WCAG 2.2 pede 24px, a Apple recomenda 44 */
  .blog-crumbs a{min-height:24px;display:inline-flex;align-items:center}
  /* trilha do artigo: block com linha de 24px (o mesmo alvo). inline-flex
     anulava o text-overflow:ellipsis da categoria (QA2 01/10/2026, C4) */
  .post-hero .crumbs a{display:block;line-height:24px}
  .post-hero .cat{min-height:32px;display:inline-flex;align-items:center}
  .post-share a,.post-share button{min-height:44px}
  /* O "Ler conteudo" do cartao NAO entra aqui. Ele vive dentro do <a> que
     envolve o cartao inteiro: nao e um alvo de toque separado, e o alvo real
     ja tem a largura do cartao por ~180px de altura. Os 44px so empurravam a
     altura do cartao para cima, e altura extra custa recorte de capa. */
  .blog-card .read-more{display:inline-flex;align-items:center}

  /* sem o retangulo do iOS o botao fica mudo no dedo: retorno proprio */
  .post-share a:active,.post-share button:active{transform:scale(.985)}
  .blog-card:active{transform:translateY(1px)}
}

/* Piso de fonte no celular. O chip de categoria estava em 10px — ilegivel a um
   palmo do rosto para boa parte de quem le o blog pelo celular. */
@media (max-width:620px){
  .post-hero .cat,.blog-card .cat{font-size:12px}
  .post-byline,.blog-crumbs{font-size:12px}
}

/* reveal ao rolar (mesmo padrão do site; reveal.js marca html.js-reveal) */
html.js-reveal .rvz{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js-reveal .rvz.rvz-in{opacity:1;transform:none}
html.js-reveal .rvz-fig{position:relative}
html.js-reveal .rvz-fig::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-130%) skewX(-12deg);opacity:0}
html.js-reveal .rvz-fig.rvz-in::after{animation:rvShine 1.15s .2s ease-out}
@keyframes rvShine{0%{transform:translateX(-130%) skewX(-12deg);opacity:0}18%{opacity:1}100%{transform:translateX(130%) skewX(-12deg);opacity:0}}
@media (prefers-reduced-motion:reduce){html.js-reveal .rvz{opacity:1;transform:none;transition:none}html.js-reveal .rvz-fig::after{display:none}}

/* ============================================================
   ALINHAMENTO COM O DESIGN SYSTEM DO SITE
   O blog tem CSS próprio (não carrega o styles.css), então a voz
   tipográfica é reaplicada aqui: Marcellus 400 nos títulos (h1 do herói e
   do artigo, h2/h3 do corpo, títulos de seção e de cartão), Manrope
   400/600/700 no corpo, na trilha, nas fichas e nos botões.
   A Marcellus é mais larga que a Manrope 600 que estava aqui: h1, títulos
   de seção e de cartão ficam ~0,92 dos anteriores; o h2 do corpo mantém o
   piso de 20px no celular e o h3 sobe 5% (ver .post-body h3), senão o h4
   em Manrope 600 passava à frente. letter-spacing 0 (os negativos eram
   calibrados para a Manrope e embolam a serifa). Peso SEMPRE 400: a família
   não tem negrito.
   ============================================================ */
.blog-hero h1,.post-hero h1,.blog-card h2,.blog-card h3,.blog-card.featured h3,.post-body h2,.post-body h3,
.post-faq h2,.blog-section h2,.related h2,.rel-title{
  font-family:var(--font-display);font-weight:400;letter-spacing:0}
.blog-hero h1{font-size:clamp(1.56rem,1.06rem + 1.75vw,2.4rem);line-height:1.1}/* 390px: 25 · 1440px: 38,4 */
.post-hero h1{font-size:clamp(1.43rem,1.06rem + 1.38vw,2.16rem);line-height:1.12;color:var(--sl-forest)}/* 390px: 22,9 · 1440px: 34,6 */
/* h2 do corpo e do FAQ: o piso fica nos 20px de antes (1.25rem). A 0,92×
   (18,4px) o h2 do celular encostava no h3 de 17px e a hierarquia sumia;
   o teto continua ~0,92× (23,5 e 22,9px). */
.post-body h2{font-size:clamp(1.25rem,.99rem + .55vw,1.47rem);line-height:1.2}/* 390px: 20 · 820px: 20,4 · 1440px: 23,5 */
.post-faq h2{font-size:clamp(1.25rem,.98rem + .5vw,1.43rem);color:var(--sl-forest)}/* 390px: 20 · 1440px: 22,9 */
.blog-card h2,.blog-card h3{font-size:.96rem;line-height:1.3;letter-spacing:.005em}
/* O titulo do cartao em DESTAQUE nao e mais maior. O 1.4rem foi dimensionado
   para o cartao vertical, onde o destaque ocupava a coluna 2fr e tinha os
   ~542px inteiros de largura de texto. Hoje o grid de destaque e igual ao
   normal, entao o destaque teria 40% de capa e 288px de texto com o titulo
   23% maior: 16 dos 22 titulos do acervo estourariam as 3 linhas.
   Pior, .blog-card.featured h3 tem especificidade (0,2,1) contra (0,1,1) das
   regras dentro das media queries — media query nao soma especificidade —
   entao o destaque tambem escapava do encolhimento no celular. O bloco so
   renderiza com artigo marcado como destaque, e precisa nascer certo. O que
   distingue o destaque e a secao "Em destaque" acima dele, nao um corpo maior. */
/* microinterações iguais às do site: elevação + fio marrom no topo e borda
   bege mais funda no hover */
.blog-card{position:relative;overflow:hidden;transition:transform 260ms cubic-bezier(.22,.61,.36,1),
  box-shadow 260ms cubic-bezier(.22,.61,.36,1),border-color 260ms}
.blog-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#a37d5a;transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.25,1,.5,1)}
.blog-card:hover,.blog-card:focus-within{transform:translateY(-5px);box-shadow:var(--shadow-md);
  border-color:#dccab8}
.blog-card:hover::before,.blog-card:focus-within::before{transform:scaleX(1)}
.blog-card .read-more .ico,.blog-card .read-more svg{transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.blog-card:hover .read-more svg{transform:translateX(4px)}
/* botões do blog com o mesmo raio e resposta ao toque do site */
.post-share a,.post-share button{border-radius:12px;
  transition:transform 150ms cubic-bezier(.22,.61,.36,1),border-color 260ms,background 260ms,color 260ms}
.post-share a:hover,.post-share button:hover{transform:translateY(-2px)}
/* foco visível padronizado, no marrom da marca */
.blog-card a:focus-visible,.post-share a:focus-visible,.post-share button:focus-visible,
.post-hero .crumbs a:focus-visible{outline:2px solid #a37d5a;outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-card::before,.post-share a,.post-share button{transition:none}
  .blog-card:hover,.post-share a:hover,.post-share button:hover{transform:none}
}

/* ------------------------------------------------------------
   CELULAR — o cartao horizontal vira linha de lista.
   Fica DEPOIS do bloco acima de proposito: ele redefine
   .blog-card h2{font-size:1.14rem} sem media query, com a mesma
   especificidade. Uma media query colocada mais acima no arquivo
   perderia para ele sem avisar.

   A 390px sobram 342px de cartao. Com 38% de capa (129px) restam
   185px de texto, ~21 caracteres por linha:
     - o resumo sai. A 2 linhas daria um toco de 60 caracteres, e a
       altura extra ainda pioraria o corte da capa (a caixa fica
       mais alta que larga, e e a altura que manda no object-fit).
     - o titulo ganha a 4a linha e passa a caber inteiro nos 22.
     - a linha "Ler conteudo" sai junto: o cartao INTEIRO ja e o
       link, e no toque ela carregava min-height:44px de alvo que
       nao servia para nada. Alvo de toque agora: 342x175.
   O rotulo de categoria mantem os 12px do piso de fonte definido
   mais acima — aquilo foi correcao de legibilidade, nao enfeite.
   ------------------------------------------------------------ */
/* No celular a mesma regra: largura de capa com piso e teto, e proporcao
   declarada. A versao anterior tinha 38% sem proporcao, e a 640px a caixa
   ficava 1,78 (capa inteira) enquanto a 641px ficava 0,78 (menos da metade)
   — um pixel de diferenca apagava metade de cada capa. */
/* ------------------------------------------------------------
   CELULAR. Refeito em 22/09/2026 (decisao de design): a primeira
   versao mostrava so o titulo, e as vezes cortado.

   Aqui o cartao carrega CAPA + CATEGORIA + TITULO INTEIRO + "Ler conteudo".
   O resumo continua fora: ver o comentario da media query de 520px.

   Fica DEPOIS do bloco de alinhamento tipografico de proposito — ele
   redefine .blog-card h2{font-size:1.14rem} sem media query e com a mesma
   especificidade; uma media query mais acima perderia calada.
   ------------------------------------------------------------ */
@media (max-width:640px){
  /* 45% de capa, a mesma proporcao do desktop. A versao anterior usava uma
     tira estreita (104-150px) porque o cartao tinha so o titulo; com
     categoria e "Ler conteudo" de volta o cartao fica mais alto, e capa
     estreita ao lado de cartao alto e exatamente o que PIORA o recorte. */
  .blog-card a.card-link{grid-template-columns:min(45%,168px) 1fr;min-height:0}
  /* 6/7 e nao 9/10: a categoria no topo e o fio abaixo dela custam ~15px de
     altura de texto, e o texto precisa continuar cabendo DENTRO da capa — e
     a capa quem manda na altura, e e isso que mantem o mesmo recorte em
     todos os cartoes da tela. O recorte vai de 51% para 48%. */
  .blog-card .img::before{padding-top:116.667%}   /* 6/7 */
  /* center: o bloco inteiro (categoria + fio + titulo + "Ler conteudo")
     fica centrado na altura da capa. O flex-start que esteve aqui grudava
     tudo no topo e deixava a sobra embaixo. */
  .blog-card .body{padding:12px 13px;justify-content:center}
  .blog-card .ex{display:none}

  /* Categoria de volta, em ate duas linhas. No desktop ela cabe em uma com
     o letter-spacing reduzido; nos 160px do celular um rotulo longo nao
     cabe — e reticencia no meio de uma palavra seria pior do que a segunda
     linha. */
  /* 11px com entrelinha curta. Medido no aparelho: a coluna de texto tem
     161px a 390px. A quebra e por PALAVRA, nao por caractere: se as duas
     primeiras palavras de um rotulo em caixa-alta passam de ~161px, nenhuma
     reducao de fonte aceitavel poe a categoria em duas linhas, e ela usa
     tres. Reticencia no meio da palavra seria pior. Resolver de verdade pede
     um rotulo curto por categoria no painel (campo short_name, lido por
     blog-includes/card.php) — decisao de conteudo, nao de CSS. */
  /* Fio discreto separando a categoria do conteudo. var(--border) e o mesmo
     tom das bordas do cartao e da paginacao — e o fio mais leve do sistema,
     e e de proposito: ele organiza, nao chama atencao. So no celular; no
     desktop o resumo ja separa visualmente a categoria do resto. */
  /* 12px e não 11 (QA 29/09/2026): este bloco vem depois do piso de 12px
     (media de 620px) com a mesma especificidade e o derrubava calado. Os
     rótulos curtos do painel ("Face e pescoço", "Injetáveis") cabem. */
  .blog-card .cat{display:block;white-space:normal;overflow:visible;font-size:12px;
    letter-spacing:.03em;line-height:1.16;margin-bottom:9px;
    padding-bottom:8px;border-bottom:1px solid var(--border)}

  /* Titulo. Era .94rem em Manrope 600, com o clamp em 5 (medido no acervo
     anterior: o titulo mais longo, 85 caracteres, usava 5 linhas). Em
     Marcellus, mais larga, vai a .87rem (~0,92) para manter a mesma
     contagem de linhas — reconferir no celular com os artigos daqui.
     O 5 e TETO, nao altura fixa: titulo curto ocupa menos e o cartao nao
     encolhe, porque a altura vem da capa. */
  .blog-card h2,.blog-card h3,.blog-card.featured h3{font-size:.87rem;line-height:1.3;
    -webkit-line-clamp:5;margin:0 0 8px}

  /* "Ler conteudo" de volta: o leitor do blog e leigo e precisa do
     convite explicito, nao so de um cartao clicavel. */
  .blog-card .meta{display:flex;font-size:11.5px}
  .blog-card .read-more svg{width:12px;height:12px}
}

@media (max-width:360px){
  /* Galaxy Fold fechado, Android pequeno e os 320px que a WCAG 1.4.10 usa
     como alvo de refluxo. A coluna cai para ~122px; a fonte desce mais um
     degrau e o titulo usa ate 5 linhas para continuar inteiro. */
  .blog-card a.card-link{grid-template-columns:min(42%,140px) 1fr}
  /* capa um pouco mais alta aqui: com a coluna de texto em ~132px o titulo
     precisa de 5 linhas, e a 9/10 a capa nao alcancava essa altura — voltava
     a ser o texto a mandar, e a proporcao a variar de cartao para cartao. */
  .blog-card .img::before{padding-top:133.333%}   /* 3/4 */
  /* o titulo sobe aqui tambem: com o rotulo curto ocupando uma linha so, a
     categoria deixou de comer altura e sobrou espaco para a fonte maior. */
  /* .81rem (~13px) em Marcellus: era .87rem em Manrope 600 */
  .blog-card h2,.blog-card h3,.blog-card.featured h3{font-size:.81rem;line-height:1.3;-webkit-line-clamp:5}
  /* piso de 12px também aqui (QA 29/09/2026): eram 10px */
  .blog-card .cat{font-size:12px;letter-spacing:.02em}
  .blog-card .meta{font-size:11px}

/* 340px para baixo (Galaxy Fold fechado) a coluna de texto cai para ~132px e
   dois dos 22 titulos passam de 5 linhas com a fonte maior. A 6a linha custa
   altura e o recorte da capa varia um pouco mais aqui — a 320px o titulo
   inteiro vale mais que a proporcao constante de uma miniatura de 114px. */
@media (max-width:340px){
  .blog-card h2,.blog-card h3,.blog-card.featured h3{-webkit-line-clamp:6}
}
}