/* =============================================================================
   ARTIGOS — a folha das páginas de conteúdo

   DIVISÃO DE RESPONSABILIDADE (a mesma do resto do site):
     tokens.css        → QUANTO vale
     design-system.css → o CHROME e a tipografia base, em TODAS as páginas
     articles.css      → só o que é do ARTIGO: coluna de leitura, blocos de
                         destaque, FAQ, relacionados, selos

   ORDEM DE CARGA (conferida na página servida): esta folha entra ANTES de
   tokens/design-system. Ou seja, ela PERDE qualquer disputa — e é por isso
   que ela não redefine mais chrome. A versão anterior trazia dropdown, menu
   mobile, .btn-*, helpers de fonte e `html, body, main { background: #fff }`,
   tudo já pertencente ao design-system: eram regras mortas dando a falsa
   impressão de estarem no ar.

   Nenhum valor cru abaixo desta linha. Se falta um valor, ele nasce em
   tokens.css primeiro.
   ============================================================================= */

/* ══════════════════════════ FONTES ═══════════════════════════════════════
   Recline também é declarada em fontes.css. A duplicata fica de propósito:
   as páginas de artigo carregam esta folha ANTES do chrome, e um artigo
   pintado antes de fontes.css resolver ficaria com a serifa do sistema no H1.
   O navegador deduplica por src, então o custo é zero.

   O "custo zero" depende de os DOIS lados apontarem para o MESMO arquivo. Na
   migração para woff2 isso quase se perdeu: fontes.css passou a pedir
   Recline-Regular.woff2 e aqui continuava Recline-Regular.otf, o que faria a
   página de artigo baixar as duas — e, por ser a última declaração a valer,
   usar justamente a pesada. Se um dia um lado mudar de arquivo, o outro tem de
   mudar junto. */
@font-face {
    font-family: 'Recline';
    src: url('../fonts/Recline-Regular.woff2?assetv=ad41a71a14f598bc') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Regular.woff2?assetv=2fc8bd6f1cacdb46') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ══════════════════════════ A COLUNA DE LEITURA ══════════════════════════
   O artigo é texto longo: o que governa aqui é ritmo e medida, não caixa.
   A largura vem de --measure porque acima de ~68ch o olho perde a linha na
   volta — e o artigo é o único lugar do site onde alguém lê 1.500 palavras
   seguidas. */

/* A PÁGINA DE ARTIGO É UMA COLUNA — NÃO UMA CAIXA LARGA COM TEXTO DENTRO.

   Medido a 1440px na versão anterior: contêiner 1144px, parágrafo 677px, e
   NADA nos 467px restantes. Pior que o vão, o serrilhado: resumo 1144, texto
   677, H2 679, H3 1144, FAQ 1144 — nove bordas direitas distintas na mesma
   página, porque a medida capava só o texto corrido e cada outro bloco herdava
   a largura do contêiner.

   Duas decisões, e as duas dependem uma da outra:
   · a coluna de leitura passa a ser o próprio GRID da página. Todo bloco do
     artigo nasce com a mesma largura — uma borda direita só;
   · o vão à direita ganha função: recebe o índice do artigo (artigo-indice.js),
     que fica fixo enquanto o texto rola.

   A coluna NÃO encolheu: continua em --measure, 677px, 66 caracteres por linha
   em Work Sans 17px. Alargá-la pioraria a leitura, que é o único trabalho
   desta página — o que faltava era ocupar o resto da tela, não esticar o texto.

   `:has` em vez de uma classe posta pelo JS: a regra precisa valer na PRIMEIRA
   pintura, senão a página nasce larga e salta para a coluna quando o script
   roda. Onde `:has` falta (Firefox < 121), cai no comportamento anterior —
   texto capado em --measure dentro do contêiner largo. Degradação, não quebra. */
main:has(.article-content) {
    display: grid;
    grid-template-columns: minmax(0, var(--measure));
    justify-content: center;
    column-gap: var(--space-3xl);
    align-items: start;
}

/* Tudo do artigo mora na coluna... */
main:has(.article-content)>*:not(.artigo-indice) {
    grid-column: 1;
}

/* O AGRUPADOR DO CORPO: artigo + índice dentro da mesma caixa.

   Existe por um motivo só: dar um fim ao sticky. O índice é sticky e mora na
   coluna 2; o bloco que o prende é a área de grade dele, que ia até o fim do
   <main> — ou seja, passava por baixo do CTA, da FAQ e dos relacionados, e o
   índice seguia colado no topo depois que o texto acabou. Medido antes do
   conserto: terminava 349px além do fim do artigo, sobre a faixa escura.

   Clampar pela grade não funciona (testado: grid-row explícito e align-self
   não movem a caixa; forçar linhas explícitas joga o CTA para o topo). Com o
   agrupador, o bloco do sticky passa a ser exatamente a altura do artigo, e
   ele para sozinho. Medido depois: diferença de 0px para o fim do artigo.

   Quem cria o agrupador é o artigo-indice.js, junto com o índice, então nenhum
   arquivo de artigo precisou mudar. E não há salto na primeira pintura: o
   <main> continua reservando as duas colunas, e este bloco repete as mesmas
   medidas — o artigo tem a mesma largura antes e depois do script. */
main:has(.article-content)>.artigo-corpo {
    grid-column: 1 / -1;
}

.artigo-corpo>article {
    grid-column: 1;
    grid-row: 1;
}

@media (min-width: 1120px) {
    main:has(.article-content)>.artigo-corpo {
        display: grid;
        grid-template-columns: minmax(0, var(--measure)) var(--column-aside);
        justify-content: space-between;
        column-gap: var(--space-3xl);
        align-items: start;
    }
}

/* A coluna do índice é RESERVADA pelo CSS, não criada pelo JS. Se dependesse
   do script, a coluna de leitura nasceria centralizada e pularia 233px para a
   esquerda quando o índice chegasse. Reservando, o texto nunca se move: o
   índice preenche um lugar que já existia.

   1120px é onde os 677 da coluna + 240 do índice + vão cabem no miolo do
   contêiner (viewport menos os 96px de padding). */
@media (min-width: 1120px) {
    main:has(.article-content) {
        grid-template-columns: minmax(0, var(--measure)) var(--column-aside);
        justify-content: space-between;
    }
}

.article-content {
    max-width: none;
    color: var(--ink-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: var(--track-body);
}

/* Rede de segurança para navegador sem `:has`: sem o grid acima, o texto
   corrido ainda para na medida. Dentro da coluna esta regra é inerte — a
   coluna já vale --measure. */
.article-content>p,
.article-content>ul,
.article-content>ol,
.article-content>blockquote {
    max-width: var(--measure);
}

.article-content p {
    margin-block: 0 var(--space-sm);
    text-wrap: pretty;
}

/* `text-lg` está escrito em 553 pontos dos 14 artigos e carrega DEPOIS desta
   folha; só um seletor de especificidade maior o alcança. Sem isto, metade
   dos parágrafos fica em 18px e a medida de leitura muda de parágrafo para
   parágrafo dentro do mesmo artigo. */
.article-content p,
.article-content li {
    font-size: var(--text-body);
}

/* O H2 abre seção: régua fina no topo e um traço de acento à esquerda — o
   mesmo .section-mark do resto do site, aqui embutido no próprio heading
   para não exigir markup novo em 24 artigos já escritos. */
.article-content h2 {
    position: relative;
    margin-block: var(--space-2xl) var(--space-sm);
    padding-block-start: var(--space-md);
    border-block-start: var(--rule) solid var(--hairline-strong);
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    /* --text-figure (34px), não --text-section (46px): dentro de uma coluna de
       677px o H2 a 46px empatava com o H1 e a página perdia hierarquia. A
       escala da coluna é 46 (título) / 34 (seção) / 24 (H3) / 17 (corpo). */
    font-size: var(--text-figure);
    line-height: var(--leading-sub);
    letter-spacing: var(--track-sub);
    color: var(--ink);
}

.article-content h2::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--rule) * -1);
    inset-inline-start: 0;
    inline-size: 2.5rem;
    block-size: var(--rule-strong);
    background: var(--accent-tick);
}

.article-content h3 {
    margin-block: var(--space-lg) var(--space-2xs);
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-sub);
    line-height: var(--leading-sub);
    letter-spacing: var(--track-sub);
    color: var(--ink);
}

.article-content h4 {
    margin-block: var(--space-md) var(--space-3xs);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    color: var(--ink);
}

/* Listas com régua, não com bolinha: o mesmo desenho da .ruled-list do
   design-system, para o artigo não destoar das páginas de tratamento. */
.article-content ul,
.article-content ol {
    margin-block: 0 var(--space-sm);
    padding: 0;
    list-style: none;
}

.article-content ul>li,
.article-content ol>li {
    position: relative;
    padding-block: var(--space-2xs);
    padding-inline-start: var(--space-md);
    border-block-end: var(--rule) solid var(--hairline);
}

.article-content ul>li:last-child,
.article-content ol>li:last-child {
    border-block-end: 0;
}

.article-content ul>li::before {
    content: "";
    position: absolute;
    inset-block-start: 1.05em;
    inset-inline-start: 0;
    inline-size: var(--space-2xs);
    block-size: var(--rule);
    background: var(--hairline-strong);
}

.article-content ol {
    counter-reset: item;
}

.article-content ol>li {
    counter-increment: item;
}

.article-content ol>li::before {
    content: counter(item, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    /* D-03 (2026-09-11): --ink-numeral e' para numeral grande (.t-ordinal);
       em 11px dava 3,31-3,65:1. Em texto pequeno, --ink-secondary (5,2:1+). */
    color: var(--ink-secondary);
}

.article-content strong {
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.article-content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.article-content a:hover {
    color: var(--ink);
}

.article-content blockquote {
    margin-block: var(--space-lg);
    padding-inline-start: var(--space-md);
    border-inline-start: var(--rule-strong) solid var(--accent-tick);
    font-family: var(--font-title);
    font-size: var(--text-quote);
    line-height: var(--leading-quote);
    color: var(--ink);
}

/* Tabela: réguas horizontais, zero preenchimento de célula. Rolagem própria
   no eixo X — tabela larga não pode empurrar a página inteira. */
.article-content table {
    display: block;
    overflow-x: auto;
    inline-size: 100%;
    margin-block: var(--space-lg);
    border-collapse: collapse;
    font-size: var(--text-secondary);
}

.article-content th {
    padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
    border-block-end: var(--rule-strong) solid var(--hairline-strong);
    text-align: start;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
    white-space: nowrap;
}

.article-content td {
    padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
    border-block-end: var(--rule) solid var(--hairline);
    vertical-align: top;
}

.article-content img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block: var(--space-lg);
}

.article-content hr {
    margin-block: var(--space-2xl);
    border: 0;
    border-block-start: var(--rule) solid var(--hairline-strong);
}


/* ══════════════════════════ CABEÇA DO ARTIGO ═════════════════════════════
   .article-title é também o seletor que o editor do admin procura para achar
   o título — trocar por ele resolve o estilo E mantém o contrato. */

.article-title {
    /* O PROBLEMA: os catorze títulos vão de 70 a 93 caracteres, e a cabeça do
       artigo mudava de altura entre uma página e outra — o olho, a data e o
       resumo apareciam em alturas diferentes ao navegar. Amplitude medida
       entre o menor e o maior: 141px.

       TRÊS AJUSTES QUE SÓ FUNCIONAM JUNTOS:
       · 22ch em vez de 18ch dá mais palavras por linha, reduzindo a chance de
         uma linha órfã;
       · --weight-light estreita o traço de Recline e ganha caracteres na
         mesma largura;
       · text-wrap: balance reparte as linhas igualmente em vez de encher a
         primeira e deixar a última com duas palavras.
       Juntos, a amplitude cai de 141px para 71px, e treze dos catorze títulos
       passam a ocupar duas ou três linhas.

       `balance` não tem suporte em navegador antigo (Chrome < 114, Safari <
       17.4). Onde falta, a quebra volta ao natural — degrada exatamente para
       o comportamento de hoje, sem quebrar nada.

       O CAP DE 22ch SAIU e o tamanho caiu de --text-display (68px) para
       --text-section (46px): quem governa a largura agora é a coluna. A 68px
       num contêiner de 677 os títulos de 70 a 93 caracteres ocupariam cinco a
       seis linhas; a 46px ocupam três ou quatro, e a amplitude entre o menor e
       o maior cai para uma linha. */
    margin-block: 0 var(--space-sm);
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-section);
    line-height: var(--leading-section);
    letter-spacing: var(--track-section);
    text-wrap: balance;
    color: var(--ink);
}


/* O "Resumo" do topo é a mesma peça que a .answer-capsule das páginas de
   tratamento — o trecho que os buscadores de IA extraem e citam. Vinha em
   caixa azul com gradiente, que além de fora da paleta escondia essa função.
   Mesmo desenho da capsule: régua de acento à esquerda, sem fundo. */
.article-summary {
    margin-block: var(--space-lg);
    padding-inline-start: 28px;
    border-inline-start: var(--rule) solid var(--accent-tick);
    background: none;
}

.article-summary p {
    margin: 0;
    max-width: var(--measure);
}

.article-summary strong {
    font-weight: var(--weight-medium);
    color: var(--ink);
}


/* ══════════════════════════ ÍNDICE DO ARTIGO ═════════════════════════════
   O que ocupa a coluna da direita. Não é enfeite para tapar o vão: os artigos
   têm de 3 a 9 seções e 1.200 a 2.000 palavras — sem índice, achar "quando
   procurar avaliação" no meio do texto é rolar até topar com ele.

   Montado em runtime por artigo-indice.js a partir dos próprios H2, para não
   exigir markup novo em 24 artigos já escritos nem uma lista à mão que
   silenciosamente deixa de bater com o texto quando alguém edita um título.

   Régua fina, sem caixa, sem fundo: é aparato de navegação e não pode competir
   com o texto ao lado. */
.artigo-indice {
    /* Abaixo de 1120px não existe a segunda coluna — o índice some junto. */
    display: none;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
    /* Nove seções ainda cabem em tela de notebook; passando disso o índice
       rola sozinho em vez de empurrar o rodapé. */
    max-block-size: calc(100vh - var(--header-h) - var(--space-3xl));
    overflow-y: auto;
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-strong) solid var(--accent-tick);
}

@media (min-width: 1120px) {
    .artigo-indice {
        display: block;
    }
}

.artigo-indice-rotulo {
    margin-block: 0 var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
}

.artigo-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.artigo-indice li {
    margin: 0;
}

.artigo-indice a {
    display: block;
    padding-block: var(--space-3xs);
    padding-inline-start: var(--space-xs);
    border-inline-start: var(--rule-strong) solid transparent;
    font-size: var(--text-secondary);
    line-height: var(--leading-sub);
    color: var(--ink-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.artigo-indice a:hover {
    color: var(--ink);
}

/* A seção em que o leitor está. `aria-current` em vez de uma classe: o estado
   é o mesmo para quem vê e para quem ouve a página. */
.artigo-indice a[aria-current="true"] {
    border-inline-start-color: var(--accent-tick);
    color: var(--ink);
}


/* ══════════════════════════ BLOCOS DE DESTAQUE ═══════════════════════════
   Eram cartões brancos com sombra e canto arredondado — o vocabulário que
   saiu do projeto. Viram FAIXA: fundo --ground-deep e uma régua de acento no
   topo. Sem sombra, sem raio, sem borda em volta. */

.insight-box,
.cta-box {
    margin-block: var(--space-xl);
    padding: var(--space-lg) var(--space-md);
    background: var(--ground-deep);
    border-block-start: var(--rule-strong) solid var(--accent-tick);
    color: var(--ink-body);
}

.insight-box>*:first-child,
.cta-box>*:first-child {
    margin-block-start: 0;
}

.insight-box>*:last-child,
.cta-box>*:last-child {
    margin-block-end: 0;
}

.insight-box h2,
.insight-box h3,
.insight-box h4,
.cta-box h2,
.cta-box h3,
.cta-box h4 {
    margin-block: 0 var(--space-2xs);
    padding: 0;
    border: 0;
    max-width: none;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-sub);
    line-height: var(--leading-sub);
    color: var(--ink);
}

/* A régua do H2 é do fluxo do artigo; dentro de um bloco ela duplicaria a
   régua do próprio bloco. */
.insight-box h2::before,
.cta-box h2::before,
.final-cta h2::before {
    content: none;
}

.insight-box strong,
.cta-box strong {
    font-weight: var(--weight-medium);
    color: var(--ink);
}

/* O CTA final fecha o artigo: é o único bloco em faixa escura, o que separa
   o convite do texto sem precisar de moldura. */
.final-cta {
    margin-block: var(--space-2xl) 0;
    padding: var(--space-xl) var(--space-md);
    background: var(--ground-dark);
    color: var(--ink-invert-body);
}

.final-cta h2,
.final-cta h3 {
    margin-block: 0 var(--space-sm);
    padding: 0;
    border: 0;
    max-width: 20ch;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-section);
    line-height: var(--leading-section);
    color: var(--brand-white);
}

.final-cta p {
    max-width: 46ch;
    color: var(--ink-invert-body);
}

.final-cta strong {
    color: var(--brand-white);
    font-weight: var(--weight-medium);
}

.final-cta .cta-button,
.cta-box .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch);
    margin-block-start: var(--space-md);
    padding-inline: var(--space-md);
    border-radius: var(--radius);
    background: var(--brand-white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}

.cta-box .cta-button {
    background: var(--ground-dark);
    color: var(--brand-white);
}

.final-cta .cta-button:hover {
    background: var(--accent-lilac-pale);
}

.cta-box .cta-button:hover {
    background: var(--accent);
}

/* Nota educativa e referências. Régua lateral, sem caixa. */
/* ═══════════════════════ COLOFÃO DO ARTIGO ══════════════════════════════
   Substitui o bloco "Sobre este conteúdo educativo" (design, 2026-09-11): quatro
   parágrafos a 17px, caixa cinza com ⚠️, antes do FAQ. Agora é uma linha em
   letra miúda, com fio em cima (é como o sistema marca fecho), depois do FAQ e
   antes dos relacionados; as referências ficam recolhidas num <details>. A
   assinatura e o aviso de finalidade continuam visíveis (E-E-A-T, compliance). */
.artigo-colofao {
    margin-block: var(--space-xl) 0;
    padding-block-start: var(--space-md);
    border-block-start: var(--rule) solid var(--hairline);
    color: var(--ink-secondary);
    font-size: var(--text-fine);
    line-height: var(--leading-fine);
}
.artigo-colofao p,
.artigo-colofao li {
    font-size: var(--text-fine);
    line-height: var(--leading-fine);
    font-style: normal;
}
.artigo-colofao .artigo-colofao-linha {
    margin-block: var(--space-2xs) 0;
    max-width: 70ch;
}
.artigo-colofao a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.artigo-colofao-refs {
    margin-block-start: var(--space-xs);
}
.artigo-colofao-refs summary {
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.artigo-colofao .reference-list {
    margin-block: var(--space-2xs) 0;
    padding: 0;
    list-style: none;
}
.artigo-colofao .reference-list li {
    padding-block: var(--space-3xs);
    border: 0;
}
/* O atalho claro no meio do artigo (UX, 2026-09-11) usa .cta-box e .cta-button,
   que já existem; só ancora em #agendar. */
.cta-box[data-atalho] p {
    margin-block-start: 0;
}


/* ══════════════════════════ FAQ ══════════════════════════════════════════
   Mesmo desenho da .faq-list das páginas de tratamento: régua entre itens,
   marcador próprio, nada de cartão. O <details>/<summary> e os itemprop são
   contrato — o editor do admin e o JSON-LD dependem deles. */

/* ATENÇÃO AO SELETOR: escrevi este bloco inteiro em #faq, e `id="faq"` existe
   em apenas 2 dos 14 artigos publicados — nos outros 12 o FAQ ficou SEM regra
   nenhuma, com a resposta correndo 103 caracteres por linha contra os 59 do
   corpo. A âncora passa a ser a CLASSE .faq-list, que a migração aplica em
   todos, com o #faq mantido para os dois que já o têm. */
.faq-list details,
#faq details {
    border-block-end: var(--rule) solid var(--hairline);
    background: none;
}

/* A resposta é texto corrido e obedece à mesma medida do corpo. Vale para
   `.faq-content` e para o <div> solto que 12 artigos usam. */
.faq-list details>div,
.faq-list .faq-content,
#faq details>div,
#faq .faq-content {
    max-width: var(--measure);
}

.faq-list summary,
#faq summary {
    position: relative;
    display: block;
    padding-block: var(--space-sm);
    padding-inline-end: var(--space-lg);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-sub);
    line-height: var(--leading-sub);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease);
}

.faq-list summary:hover,
#faq summary:hover {
    color: var(--accent);
    background: none;
}

.faq-list summary::-webkit-details-marker,
#faq summary::-webkit-details-marker {
    display: none;
}

/* Cruz que vira traço: mostra o estado sem depender de rotação de seta. */
.faq-list summary::after,
#faq summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(var(--space-sm) + 0.55em);
    inline-size: 0.85rem;
    block-size: var(--rule-strong);
    background: var(--accent-tick);
}

.faq-list summary::before,
#faq summary::before {
    content: "";
    position: absolute;
    inset-inline-end: calc(0.425rem - var(--rule-strong) / 2);
    inset-block-start: calc(var(--space-sm) + 0.55em - 0.425rem + var(--rule-strong) / 2);
    inline-size: var(--rule-strong);
    block-size: 0.85rem;
    background: var(--accent-tick);
    transition: opacity var(--dur-fast) var(--ease);
}

.faq-list details[open] summary::before,
#faq details[open] summary::before {
    opacity: 0;
}

#faq .faq-content,
#faq details>div {
    max-width: var(--measure);
    padding-block: 0 var(--space-sm);
    color: var(--ink-body);
}

.faq-list .faq-content p,
.faq-list details>div p,
#faq .faq-content p,
#faq details>div p {
    margin-block: 0 var(--space-2xs);
}


/* ══════════════════════════ RELACIONADOS ═════════════════════════════════
   Eram cartões brancos com sombra numa grade — a "cara de blog" que o
   projeto condenou. Viram lista régua, igual à vizinhança das páginas de
   tratamento: uma linha por artigo, nome à esquerda, resumo à direita.

   O bloco é GERADO por update_seo_assets.py (data-generated="related"): a
   marcação nasce de lá, não de edição manual no artigo.

   Desde 2026-09-11 mora FORA do <main>, entre a seção #agendar e o rodapé:
   a leitora encontra o pedido antes das saídas, e a faixa clara separa as
   duas escuras. Por isso é contêiner próprio, com a largura do <main>
   (1240 + 1.5rem/3rem), e sem fio no topo: a troca de fundo já separa. */

.related-articles {
    max-width: 1240px;
    margin-inline: auto;
    padding-block: var(--section-y-tight);
    padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
    .related-articles {
        padding-inline: 3rem;
    }
}

.related-articles h2 {
    margin-block: 0 var(--space-md);
    padding: 0;
    border: 0;
    max-width: 22ch;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-section);
    line-height: var(--leading-section);
    color: var(--ink);
}

.related-articles h2::before {
    content: none;
}

.articles-grid {
    display: block;
    border-block-start: var(--rule) solid var(--hairline-strong);
}

.article-card {
    display: block;
    overflow: visible;
    background: none;
    border: 0;
    border-block-end: var(--rule) solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
}

.article-card:hover {
    transform: none;
    box-shadow: none;
}

/* A linha: capa 80×80 (a mesma miniatura da home e do hub) ao lado de selo +
   título, resumo em largura total embaixo (celular); no desktop, três
   colunas — capa | título | resumo.
   Linha sem <img> (registro sem capa) fecha a coluna: nada fica vazio. */
.article-card-content,
.article-card>div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-areas:
        "capa cabeca"
        "resumo resumo";
    column-gap: var(--space-sm);
    row-gap: var(--space-3xs);
    padding: var(--space-sm) 0;
}

.article-card-content:not(:has(>img)),
.article-card>div:not(:has(>img)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "cabeca"
        "resumo";
}

.article-card-content>img {
    grid-area: capa;
    inline-size: 5rem;
    block-size: 5rem;
    object-fit: cover;
    align-self: start;
}

.article-card-content>div {
    grid-area: cabeca;
}

.article-card-content>p {
    grid-area: resumo;
}

/* A linha inteira é o <a> (como home, hub e vizinhança): o hover pinta o
   título e solta a gradação da capa, e o clique navega de qualquer ponto. */
a.article-card-content {
    color: inherit;
    text-decoration: none;
}

.article-card-content:hover .article-thumb {
    filter: var(--grade-thumb-hover);
}

.article-card h3 {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-sub);
    line-height: var(--leading-sub);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease);
}

.article-card-content:hover h3 {
    color: var(--accent);
}

.article-card p {
    margin: 0;
    max-width: 62ch;
    color: var(--ink-secondary);
    font-size: var(--text-secondary);
    line-height: var(--leading-body);
}

.article-card .read-more {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch);
    color: var(--accent);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (min-width: 768px) {

    .article-card-content,
    .article-card>div {
        grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas: "capa cabeca resumo";
        gap: var(--space-md);
        align-items: baseline;
    }

    .article-card-content:not(:has(>img)),
    .article-card>div:not(:has(>img)) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas: "cabeca resumo";
    }
}


/* ══════════════════════════ COMPONENTES DE UM ARTIGO SÓ ══════════════════
   Timeline de recuperação e tabela de tratamentos nasceram num <style> inline
   de um único artigo. Adotadas aqui porque o build_chrome se recusa — com
   razão — a apagar um bloco inline cujas classes não existam no sistema: uma
   classe órfã segurava o bloco inteiro, e com ele voltavam o gradiente roxo e
   o fundo azul da caixa de resumo.

   Se um dia outro artigo precisar de timeline, ela já está aqui. */

.recovery-timeline {
    margin-block: var(--space-lg);
    padding: 0;
    background: none;
    border-block-start: var(--rule) solid var(--hairline-strong);
}

.timeline-item {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    border-block-end: var(--rule) solid var(--hairline);
}

.timeline-item:last-child {
    border-block-end: 0;
}

/* Era um disco roxo de 3rem com número dentro. Vira o mesmo numeral ordinal
   das listas contadas: sem círculo, sem gradiente, sem peso sintetizado. */
.timeline-marker {
    display: block;
    inline-size: auto;
    block-size: auto;
    background: none;
    border-radius: 0;
    /* D-03 (2026-09-11): --ink-numeral e' para numeral grande (.t-ordinal);
       em 11px dava 3,31-3,65:1. Em texto pequeno, --ink-secondary (5,2:1+). */
    color: var(--ink-secondary);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .timeline-item {
        grid-template-columns: 10rem minmax(0, 1fr);
        gap: var(--space-md);
        align-items: baseline;
    }
}

.treatment-table {
    display: block;
    overflow-x: auto;
    inline-size: 100%;
    margin-block: var(--space-lg);
    border-collapse: collapse;
    font-size: var(--text-secondary);
}

.treatment-table th {
    padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
    background: none;
    border-block-end: var(--rule-strong) solid var(--hairline-strong);
    text-align: start;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
    white-space: nowrap;
}

.treatment-table td {
    padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
    border-block-end: var(--rule) solid var(--hairline);
    vertical-align: top;
}

/* Zebra alternada é ruído numa tabela que já tem régua por linha. */
.treatment-table tr:nth-child(even) {
    background: none;
}

/* Eficácia alta/média: verde e âmbar viravam semáforo. O grau agora aparece
   pelo PESO e pela cor de tinta, dentro da paleta. */
.efficacy-high {
    color: var(--ink);
    font-weight: var(--weight-medium);
}

.efficacy-medium {
    color: var(--ink-secondary);
    font-weight: var(--weight-medium);
}


/* ══════════════════════════ META E SELOS ═════════════════════════════════
   Data, tempo de leitura e categoria. Eram pílulas coloridas com fundo;
   viram texto em versalete com um traço — a mesma linguagem da .t-micro,
   sem exigir troca de classe nos 24 artigos. */

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: var(--ink-secondary);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.badge,
.article-tag,
[class*="badge-"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    color: var(--ink-secondary);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.badge::before,
.article-tag::before,
[class*="badge-"]::before {
    content: "";
    inline-size: var(--space-2xs);
    block-size: var(--rule-strong);
    background: var(--hairline-strong);
}

/* Só o selo de artigo NOVO ganha o acento. Se todos acendem, nenhum acende. */
.badge-novo {
    color: var(--ink);
}

.badge-novo::before {
    background: var(--accent-tick);
}


/* ══════════════════════════ COMPARTILHAR ═════════════════════════════════
   Eram quatro círculos, cada um na cor da sua rede — quatro corpos estranhos
   à paleta, bem no alto do artigo. Viram ícones em linha, na cor do texto.
   O !important existe porque a cor de marca vem de utilitário no HTML. */

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch);
    min-block-size: var(--touch);
    border-radius: 0;
    background: none !important;
    color: var(--ink-secondary) !important;
    transition: color var(--dur-fast) var(--ease);
}

.share-button:hover {
    background: none !important;
    color: var(--accent) !important;
}


/* ══════════════════════════ LISTAGEM ═════════════════════════════════════
   Estas três classes são geradas ou alternadas pelo JS da listagem, então
   precisam de casa no sistema — enquanto viviam no <style> inline da página,
   elas seguravam o bloco inteiro e com ele o gradiente roxo do hero. */

/* Filtro de categoria. Eram pílulas com fundo; viram versalete com régua
   embaixo — só o ativo acende. */
/* Quebra de linha dentro do flex dos filtros. Um item de base 100% e altura
   zero empurra o resto para a linha seguinte — é o jeito de dividir a régua em
   duas metades sem fixar largura de container, que mudaria a cada categoria
   nova. Invisível e fora da árvore de acessibilidade. */
.filter-break {
    flex-basis: 100%;
    block-size: 0;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch);
    padding: 0;
    background: none;
    border: 0;
    border-block-end: var(--rule-strong) solid transparent;
    border-radius: 0;
    color: var(--ink-secondary);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.filter-btn:hover {
    color: var(--ink);
}

.filter-btn.active {
    color: var(--ink);
    border-block-end-color: var(--accent-tick);
}

/* Cartão rotativo do topo: as mensagens ocupam a MESMA célula de grade e
   trocam por opacidade.

   A versão anterior usava position:absolute dentro de uma caixa com
   `min-height: 72px` e `overflow: hidden` — número mágico herdado do design
   antigo, quando o texto era menor. Com a tipografia nova a mensagem mais
   longa passou a medir 79px, e a última linha era cortada ao meio. Empilhar
   por grade resolve na raiz: a caixa passa a ter a altura da MAIOR mensagem,
   sozinha, e nenhuma frase futura pode estourá-la. */
#rotating-card {
    display: grid;
}

.rotating-message {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
    pointer-events: none;
}

.rotating-message.active {
    opacity: 1;
    pointer-events: auto;
}

/* Esqueleto de carregamento: pulso de opacidade numa régua, sem bloco cinza
   — cinza do Tailwind é justamente o que saiu do projeto. */
.skeleton {
    background: var(--ground-deep);
    animation: pulso-esqueleto 1.4s ease-in-out infinite;
}

@keyframes pulso-esqueleto {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}


/* ══════════════════════════ RESTOS ═══════════════════════════════════════ */

/* Breadcrumb visível é padrão condenado no projeto — e a marcação antiga
   continua no HTML de doze artigos, escondida por esta regra.

   O comentário que estava aqui dizia que "a trilha continua no JSON-LD, que é
   o que o buscador lê". Era FALSO quando foi escrito: só 3 dos 14 publicados
   tinham BreadcrumbList. Hoje os 14 têm, por
   scripts/adicionar_breadcrumb_jsonld.py — a afirmação virou verdade DEPOIS
   de alguém conferir, não porque estava no comentário.

   O caminho de volta para a listagem, que o breadcrumb dava e ninguém repôs,
   agora existe em dois pontos: .link-rule junto da meta e "Ver todos os
   artigos" fechando os relacionados. */
.breadcrumb {
    display: none;
}

.hover-lift:hover {
    transform: none;
    box-shadow: none;
}

.neutral-dark-text {
    color: var(--ink-body);
}

.neutral-light-bg {
    background-color: var(--ground-deep);
}

.primary-light-bg {
    background-color: var(--accent-lilac-pale);
}

@media print {

    .no-print,
    /* Índice é navegação de tela: no papel vira uma lista de links mortos. */
    .artigo-indice {
        display: none;
    }
}

/* Borda de campo inválido. Era `border-red-500` do Tailwind, aplicada por JS
   na validação do telefone: vermelho de fora da paleta, e o único lugar da
   listagem que ainda o usava. */
.campo-invalido {
    border-color: var(--error) !important;
}

/* Imagem do artigo (S10, 2026-09-04): a mesma do card, logo abaixo do cabeçalho.
   width/height no HTML reservam o espaço; aqui só a largura da coluna e o corte
   para a proporção do card, para que as 14 cabeças fiquem da mesma altura. */
.article-figure {
    margin-block: var(--space-lg) 0;
}

.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

/* D-01 (design, 2026-09-11). O template antigo injeta por JS uma barra de
   progresso com os tokens purple-600 e pink-600, que não existem:
   invisível em 14 artigos e, no 15º, um gradiente fora da paleta sobre o
   header (z-index 9999). Sai por CSS agora; o script sai do template depois. */
#reading-progress {
    display: none !important;
}

/* 2a (2026-09-11): o "voltar ao topo" injetado por JS nos artigos publicados
   ocupava o canto do flutuante de WhatsApp com outro objeto (D-02/UX-03). O
   flutuante passa a vir do rodapé em todas as páginas; este sai por CSS aqui
   (o script já saiu do template). */
#back-to-top {
    display: none !important;
}