/* As páginas de conteúdo: o blog, as páginas de profissão e o calendário da
   saúde.

   Terceira folha da casa. Entra DEPOIS do landing.css (tokens, botões, foco,
   capa, rodapé) e do publico.css, mas ao contrário da primeira versão ela não
   pega mais o `.documento` emprestado dos Termos: um artigo de blog abre com
   foto, tem índice lateral e prosa de leitura longa — outro objeto. A prosa
   nova vive em `.prosa`, o índice em `.indice`, e o `.documento` fica onde
   sempre esteve, servindo os documentos numerados.

   Breakpoints da casa: 600 e 1040, os mesmos da landing (o 720/900 da versão
   anterior morreu junto com ela).

   Movimento no contrato data-luz: o estado padrão de tudo aqui é o FINAL; o
   pré-estado só existe sob html[data-luz], que o _luz.ejs põe e o conteudo.js
   confirma. Sem JS nada se esconde.

   Mesma regra de contraste da casa: --ouro-claro é LUZ e só vive sobre a
   noite (aqui, dentro do .convite e da capa); sobre o papel quem carrega
   texto é --ouro-forte e o que é só grafismo é --ouro. */

/* ============================================================== a trilha */

/* O padding-block leva cada link da trilha a 40px de alvo. Sem ele o medidor
   de mobile acusa 22px — a régua da casa é o dedo, não o cursor. O recuo
   negativo devolve o espaço que o padding tomaria acima do título. */
.migalhas {
  margin-top: calc(var(--e6) - 9px);
  margin-bottom: -9px;
  font-size: 13.5px;
  color: var(--claro-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}
.migalhas a, .migalhas span { padding-block: 9px; }
.migalhas a { color: var(--claro-2); text-decoration: none; }
.migalhas a:hover { color: var(--ouro-claro); text-decoration: underline; }
.migalhas span[aria-hidden] { color: var(--claro-3); opacity: .55; }
.migalhas span[aria-current] { color: var(--claro-3); }

/* ============================================================== a pílula */

/* O rótulo de cluster nos cartões e na manchete — o mesmo desenho da etiqueta
   de plano do publico.css. Ouro-forte sobre o véu de ouro: 5,1:1, AA. */
.pilula {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-redondo);
  font-size: 12px;   /* 12px é o piso do medidor de mobile — nada de 11 aqui */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ouro-forte);
  background: rgba(185, 126, 36, .12);
}

.cartao-meta {
  margin-top: var(--e4);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--e2);
  font-size: 13px;
  color: var(--tinta-3);
}

/* ============================================================== o índice /blog */

.blog-indice { padding-top: var(--e8); }

/* A manchete: o texto mais novo em cartão grande, foto primeiro. O alvo é o
   cartão inteiro — a régua do dedo mora no bloco, não no título. */
.manchete-liga {
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--linha);
  border-radius: var(--r-gg);
  background: var(--branco);
  transition: border-color .25s var(--curva), transform .25s var(--curva);
}
.manchete-liga:hover { border-color: var(--ouro); transform: translateY(-2px); }

.manchete-foto { margin: 0; }
.manchete-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.manchete-corpo { padding: var(--e6) var(--e5); }
.manchete-corpo h2 {
  margin-top: var(--e4);
  font-size: clamp(24px, 5.6vw, 34px);
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}
.manchete-resumo {
  margin-top: var(--e3);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 60ch;
}

/* O h2 que abre a grade tem cara de chapéu — hierarquia de índice, não de
   prosa: quem manda na página são os títulos dos textos. */
.blog-grade-titulo { margin: var(--e9) 0 0; font-family: var(--f-corpo); }

@media (min-width: 600px) {
  .manchete-corpo { padding: var(--e7); }
}
@media (min-width: 1040px) {
  .manchete-liga { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .manchete-foto img { height: 100%; min-height: 380px; aspect-ratio: auto; }
  .manchete-corpo { align-self: center; padding: var(--e8); }
}

/* ======================================================= grade de cartões */

.cartoes {
  margin-top: var(--e6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); gap: var(--e6); }
}
@media (min-width: 1040px) {
  .cartoes { grid-template-columns: repeat(3, 1fr); }
}

.cartao { margin: 0; }
.cartao::marker { content: none; }

.cartao a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--branco);
  transition: border-color .25s var(--curva), transform .25s var(--curva);
}
.cartao a:hover { border-color: var(--ouro); transform: translateY(-2px); }

.cartao-foto { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

.cartao-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--e5); }
.cartao-corpo .pilula { align-self: flex-start; }   /* o flex-column esticaria a etiqueta */
.cartao-corpo h3 { margin-top: var(--e4); font-size: 20px; line-height: 1.3; color: var(--tinta); }
.cartao-resumo {
  margin-top: var(--e3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O pé desce sozinho: cartões da mesma linha alinham a data embaixo mesmo com
   títulos de alturas diferentes. */
.cartao-corpo .cartao-meta { margin-top: auto; padding-top: var(--e4); }

.cartoes-vazio { margin-top: var(--e6); color: var(--tinta-media); }

/* ============================================================== o artigo */

/* A capa que pousa sobre a noite: a .capa escura já arredonda a base a partir
   de 600px, e a figura vem depois no fluxo com margem negativa — a foto invade
   o arredondado e a página abre com as duas camadas da marca à vista. A capa
   escura ganha respiro extra para a invasão não comer a data. */
/* O respiro extra existe para a foto INVADIR a capa escura — e por isso ele é
   condicionado a haver foto. As páginas do calendário sobem sem capa (uma lista
   de datas não tem cena que uma foto de banco sirva, e enfeite não é o que a
   casa faz com imagem), e nelas o mesmo padding deixava uma faixa escura vazia
   embaixo da data. */
body.pagina-artigo:has(.arte-capa) .doc-capa { padding-bottom: calc(var(--e8) + var(--e8)); }

.arte-capa {
  margin: calc(-1 * var(--e8)) auto 0;
  max-width: 880px;
  position: relative;
}
.arte-capa img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-gg);
  box-shadow: 0 1px 3px rgba(20, 18, 16, .07);
}
@media (min-width: 1040px) {
  body.pagina-artigo:has(.arte-capa) .doc-capa { padding-bottom: calc(var(--e8) + var(--e9)); }
  .arte-capa { margin-top: calc(-1 * var(--e9)); }
}

/* O corpo: no celular índice e prosa empilham; no desktop o índice vira rail
   fixo à esquerda e a prosa segura a medida de leitura (~68ch). */
.artigo-corpo { margin-top: var(--e8); }
.artigo .prosa { max-width: 68ch; margin-inline: auto; }

@media (min-width: 1040px) {
  .artigo-corpo:has(> .indice) {
    display: grid;
    grid-template-columns: 260px minmax(0, 660px);
    gap: var(--e9);
    justify-content: center;
    align-items: start;
  }
  .artigo-corpo:has(> .indice) .prosa { margin-inline: 0; }
  .indice {
    position: sticky;
    top: var(--e6);
    max-height: calc(100dvh - var(--e8));
    overflow: auto;
  }
}

/* ============================================================== o índice do texto */

.indice-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--branco);
  padding: var(--e4) var(--e6) var(--e5);
}
.indice-caixa summary {
  cursor: pointer;
  padding-block: 9px;   /* 40px de alvo no dedo */
  list-style: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-forte);
}
.indice-caixa summary::-webkit-details-marker { display: none; }
.indice-caixa summary::after { content: '▾'; margin-left: var(--e2); color: var(--ouro); }
.indice-caixa[open] summary::after { content: '▴'; }

/* O recuo negativo sangra a lista para dentro do padding da caixa: é o que dá
   folga para o item aceso virar faixa sem colar na borda. O padding no li
   devolve o texto ao lugar de sempre. */
.indice-caixa ol {
  margin: var(--e3) calc(-1 * var(--e3)) 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}
.indice-caixa li {
  display: flex;
  align-items: baseline;
  padding-inline: var(--e3);
  border-radius: var(--r-p);
  font-size: 14.5px;
  line-height: 1.5;
  transition: background-color .2s ease;
}
.indice-caixa li::before {
  counter-increment: item;
  content: counter(item) '.';
  flex: none;
  margin-right: var(--e2);
  color: var(--ouro);
  font-weight: 700;
  transition: color .2s ease;
}
.indice-caixa a { display: block; padding-block: 9px; color: var(--tinta-media); text-decoration: none; transition: color .2s ease; }
.indice-caixa a:hover { color: var(--ouro-forte); text-decoration: underline; }

/* Onde o leitor está. O conteudo.js põe o aria-current no link do trecho em
   cena — sem JS nada acende e o índice segue um índice.

   Só cor: o véu de ouro da .pilula na faixa, ouro-forte no numeral e no texto.
   Nada de negrito no item aceso de propósito — num rail de 260px engordar a
   fonte requebra a linha, e a lista inteira daria um pulo a cada título que
   passa. Cor não mexe em uma medida sequer. */
.indice-caixa li:has(a[aria-current]) { background: rgba(185, 126, 36, .10); }
.indice-caixa li:has(a[aria-current])::before,
.indice-caixa a[aria-current] { color: var(--ouro-forte); }

@media (min-width: 1040px) {
  /* No rail o summary é rótulo, não botão — fechar um índice fixo não ajuda. */
  .indice-caixa summary { pointer-events: none; }
  .indice-caixa summary::after { display: none; }
  .indice-caixa a { padding-block: 5px; }   /* passo de mouse */
}

/* ============================================================== a prosa */

.prosa > p, .prosa li { font-size: 17px; line-height: 1.75; color: var(--tinta-media); }
.prosa > p:first-child { font-size: 19px; line-height: 1.65; color: var(--tinta-2); }
.prosa p + p { margin-top: var(--e5); }

.prosa h2 {
  margin-top: var(--e9);
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.2;
  scroll-margin-top: var(--e7);
}
.prosa h2 + p { margin-top: var(--e4); }

/* O h3 troca de família de propósito, como nos documentos: dentro da prosa a
   serif graúda é só do h2, e o degrau abaixo é peso, não corpo. */
.prosa h3 { margin-top: var(--e7); font-family: var(--f-corpo); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.prosa h3 + p { margin-top: var(--e4); }

.prosa strong { font-weight: 700; color: var(--tinta); }

/* Link no meio da prosa: o mesmo truque do crédito — o padding estica o alvo
   ao piso de 32px do medidor e a caixa de linha nem fica sabendo. */
.prosa a { padding-block: 5px; }

.prosa ul, .prosa ol {
  margin: var(--e5) 0 0;
  padding-left: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.prosa li::marker { color: var(--ouro); }

.prosa blockquote {
  margin: var(--e7) 0 0;
  padding-left: var(--e5);
  border-left: 3px solid var(--ouro);
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--tinta-2);
}
.prosa blockquote p { font: inherit; color: inherit; }

.prosa img { display: block; max-width: 100%; height: auto; margin-top: var(--e6); border-radius: var(--r-m); }
.prosa hr { margin: var(--e8) 0; border: 0; border-top: 1px solid var(--linha); }
.prosa code {
  padding: 2px 6px;
  border-radius: var(--r-p);
  background: var(--linha-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

/* Tabela rola dentro de si mesma — a página nunca rola de lado. */
.prosa table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14.5px; }
.prosa th, .prosa td { padding: var(--e3) var(--e4); text-align: left; border-bottom: 1px solid var(--linha); }
.prosa th { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }

.prosa .destaque {
  margin-top: var(--e5);
  padding: var(--e5) var(--e6);
  border-left: 3px solid var(--ouro);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--branco);
}

/* ============================================================== a barra de leitura */

/* Só existe de verdade com JS: o transform nasce em zero e é o script que o
   estica — sem script a barra é um risco invisível, não um estado quebrado. */
.leitura-barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transform-origin: left;
  transform: scaleX(0);
}

/* ============================================================== compartilhar */

.compartilha {
  margin-top: var(--e8);
  padding-top: var(--e6);
  border-top: 1px solid var(--linha);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
}
.compartilha-rotulo { font-size: 13px; font-weight: 700; color: var(--tinta-3); margin-right: var(--e2); }
.compartilha-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--e5);
  border: 1px solid var(--linha-3);
  border-radius: var(--r-redondo);
  background: var(--branco);
  color: var(--tinta-2);
  font-family: var(--f-corpo);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--curva), color .25s var(--curva);
}
.compartilha-btn:hover { border-color: var(--ouro); color: var(--tinta); }

/* ============================================================== o convite */

/* A noite volta como objeto sobre o papel, espelhando a capa — com o mesmo
   halo. Aqui dentro vale a regra do escuro: ouro-claro pode ser texto. */
.convite {
  position: relative;
  overflow: hidden;
  margin-top: var(--e9);
  padding: var(--e7) var(--e6);
  border-radius: var(--r-ggg);
  background: var(--noite);
  color: var(--claro);
}
.convite::before {
  content: '';
  position: absolute;
  top: -160px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 151, .16) 0%, rgba(255, 214, 151, .04) 45%, transparent 70%);
}
.convite > * { position: relative; }
.convite .convite-chapeu, .convite .convite-chapeu i { color: var(--ouro-claro); }
.convite h2 {
  margin-top: var(--e4);
  font-size: clamp(24px, 5.6vw, 32px);
  line-height: 1.15;
  color: var(--claro);
  max-width: 22ch;
}
.convite p:not(.chapeu) { margin-top: var(--e4); max-width: 52ch; font-size: 16.5px; color: var(--claro-2); }
.convite .btn { margin-top: var(--e6); }

@media (min-width: 1040px) {
  .convite { padding: var(--e8) var(--e9); }
}

/* ========================================================== leia também */

.relacionados { margin-top: var(--e9); }
.relacionados-titulo { font-family: var(--f-corpo); }

/* O rodapé das páginas de conteúdo respira como o da landing. */
.blog-indice + .coluna .rodape, .artigo + .coluna .rodape { margin-top: var(--e8); }

/* ======================================================= página de profissão */

/* A página de uma profissão é LANDING, e desde 22/08/2026 a forma diz isso: capa
   escura com herói, o produto na primeira dobra, e a prosa em trechos curtos
   entre os blocos que convertem.

   Quase nada precisa nascer aqui. O .capa, o .heroi, o .olho, as .acoes, o
   .produto, os .passos, as .frentes, a .oferta, o .preco-bloco, o .faq, o
   .conhecer, o .fecho e o .zap-flutua são todos do landing.css, que o
   _cabeca.ejs já carrega em toda página de conteúdo — e nenhum deles está preso
   a um body.pagina-*. O que falta é só a medida do texto e a figura do herói.

   Saíram daqui, com a página antiga: .profissao (a grade de duas colunas),
   .profissao-retrato (o rosto sobre a capa de documento), .profissao-prosa (a
   coluna de 68ch, medida de artigo) e o .doc-capa, que era do _topo-marca. */

/* O trecho de texto entre dois blocos de conversão.

   A medida é de landing, não de documento: ~62ch alinhados à esquerda dentro da
   coluna larga, e não 68ch centrados. Um bloco de texto que começa onde o
   .titulo-secao acima dele começa lê-se como seção; centrado, lê-se como
   página de artigo — que é justamente o que esta página deixou de ser. */
.profissao-texto .prosa { max-width: 62ch; }
.profissao-texto .titulo-secao + .prosa { margin-top: var(--e6); }

/* O parágrafo graúdo de abertura é do primeiro trecho, e só dele: `.prosa >
   p:first-child` (l. 302) dá 19px ao primeiro parágrafo, e com a prosa partida
   em quatro ou cinco trechos ele dispararia em cada um — a página inteira em
   corpo de olho. */
.profissao-texto ~ .profissao-texto .prosa > p:first-child {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tinta-media);
}

/* A figura ao lado do H1 nas páginas sem moldura do Instagram: a capa do próprio
   texto. O aspect-ratio é obrigatório — o <img> declara 1600×900 e a coluna do
   herói é estreita; sem ele a altura fica em 900 e a foto se deforma. O ângulo e
   a sombra são os do .produto-caixa, para as duas versões do herói terem o mesmo
   peso visual. */
.profissao-figura { margin: var(--e7) 0 0; }
.profissao-figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-ggg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
/* As garantias andam coladas no cartão de preço, como no /assinar. */
.profissao-confianca { margin-top: var(--e6); }

@media (min-width: 600px) {
  .profissao-figura img { transform: rotate(-2.5deg); }
}

@media (min-width: 1040px) {
  .profissao-figura { margin-top: 0; }
}

/* ============================================================== o calendário */

/* Três peças novas, e todas nascem de uma decisão só: **a lista de datas é uma
   LISTA, não uma tabela.**

   A tabela era o desenho óbvio — quando · o quê · de quem, três colunas. Em
   360px ela rola de lado, e o `.prosa table` acima resolve isso com
   `overflow-x: auto`, que é a saída certa para uma tabela de dados e a errada
   para o conteúdo principal de uma página: metade da informação fica atrás de
   um gesto que ninguém faz. Aqui cada data empilha, e no desktop a coluna do
   "quando" sai para a margem esquerda, onde vira índice visual.

   Medidas: a lista mora na coluna larga, não nos 68ch da prosa. Ela é
   consulta, não leitura corrida, e ler "3 de outubro" não pede medida de
   parágrafo. */

/* A lista acompanha a medida da prosa em vez de esticar até a borda da coluna:
   a página tem uma medida só, e a agenda é parte do texto, não um apêndice.
   O `margin-inline: 0` repete a regra do .prosa para o caso da grade de duas
   colunas do .artigo-corpo, onde tudo encosta à esquerda. */
.agenda { margin-top: var(--e8); max-width: 68ch; margin-inline: auto; }
.artigo-corpo:has(> .indice) .agenda { margin-inline: 0; }

/* O título de uma seção gerada tem o mesmo peso de um h2 escrito — quem lê a
   página não sabe (nem tem por que saber) que este veio de srv/calendario.js. */
.agenda-titulo {
  margin-top: var(--e9);
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.2;
  scroll-margin-top: var(--e7);
}

.agenda-lista {
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.agenda-item {
  padding: var(--e5) 0;
  border-top: 1px solid var(--linha);
}
.agenda-item:last-child { border-bottom: 1px solid var(--linha); }

/* O mês colorido puxa a barra dourada: ele não é uma data, é o tom das quatro
   semanas, e a lista precisa dizer isso antes de qualquer leitura. */
.agenda-campanha {
  padding-left: var(--e5);
  border-left: 3px solid var(--ouro);
}

.agenda-quando {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ouro-forte);
}

.agenda-nome {
  margin-top: var(--e2);
  font-family: var(--f-corpo);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}
/* O padding leva o link ao piso de 32px do medidor sem abrir a linha. */
.agenda-nome a { padding-block: 5px; }

/* A etiqueta diz o TIPO da data, e some no tipo mais comum (a data de
   conscientização): marcar o que é regra é ruído — o que informa é a exceção. */
.agenda-etiqueta {
  display: inline-block;
  margin-left: var(--e2);
  padding: 2px 8px;
  border-radius: var(--r-redondo);
  background: var(--linha-2);
  font-size: 12px;   /* o piso do medidor de mobile; 11px sai como LETRA-MIUDA */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  vertical-align: 1px;
}

.agenda-sobre { margin-top: var(--e2); font-size: 15.5px; line-height: 1.6; color: var(--tinta-media); }
.agenda-quem { margin-top: var(--e3); font-size: 14px; line-height: 1.5; color: var(--tinta-3); }
/* 8px, e não os 5px do resto: a linha de 14px dá 21px de caixa, e o piso do
   dedo é 32. Com 5px o medidor acusava 28px em toda profissão da lista. */
.agenda-quem a { padding-block: 8px; }

@media (min-width: 600px) {
  /* A data sai para a esquerda e a lista ganha um eixo — é o que transforma
     oito linhas empilhadas em algo que se varre com o olho. */
  .agenda-item { display: grid; grid-template-columns: 12rem 1fr; gap: var(--e5); }
  .agenda-campanha { padding-left: calc(var(--e5) - 3px); }
  .agenda-quando { padding-top: 3px; }
  .agenda-nome { margin-top: 0; }
}

/* ------------------------------------------------------- a grade dos meses */

.meses { margin-top: var(--e7); }

.meses-grade {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--e4);
}

.mes-cartao { margin: 0; }
.mes-cartao > a,
.mes-cartao > div {
  display: block;
  height: 100%;
  padding: var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  background: var(--branco);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.mes-cartao > a:hover { border-color: var(--ouro); transform: translateY(-2px); }

/* Mês sem texto escrito continua na grade — o ano existe inteiro —, mas não
   finge ser clicável: sem moldura de cartão e com a tinta recuada. */
.mes-sem-pagina > div { border-style: dashed; background: none; }

.mes-nome { font-family: var(--f-titulo); font-size: 20px; color: var(--tinta); }
.mes-campanha { margin-top: var(--e2); font-size: 13.5px; line-height: 1.45; color: var(--ouro-forte); }
.mes-sem-pagina .mes-nome { color: var(--tinta-media); }
.mes-conta { margin-top: var(--e3); font-size: 12.5px; color: var(--tinta-3); }

/* --------------------------------------------------------- mês anterior/próximo */

/* Navegação, não link de corpo: doze pares de setas com a mesma âncora no meio
   do texto é exatamente o que o scripts/links.js existe para acusar. Aqui elas
   são da view, e o ano fecha o círculo — dezembro faz fronteira com janeiro. */
.vizinhos {
  margin-top: var(--e8);
  display: grid;
  gap: var(--e4);
}

.vizinho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  background: var(--branco);
  text-decoration: none;
  transition: border-color .2s ease;
}
.vizinho:hover { border-color: var(--ouro); }
.vizinho span { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.vizinho strong { font-family: var(--f-titulo); font-size: 20px; font-weight: 400; color: var(--tinta); }
.vizinho-depois { text-align: right; }

@media (min-width: 600px) {
  .vizinhos { grid-template-columns: 1fr 1fr; }
}

/* O rodapé do hub respira como o das outras páginas de conteúdo. */
.pagina-calendario .artigo + .coluna .rodape { margin-top: var(--e8); }

/* ---------------------------------------------------------- a grade das áreas */

/* O bloco `areas` do hub `/para` (views/conteudo/_areas.ejs).
   A gramática visual é a da faixa "para quem é" da home — retrato 4:5, véu
   escuro em cima da metade de baixo, nome em caixa alta —, e a repetição é de
   propósito: quem chega vindo de lá reconhece a fileira. O que não se
   reaproveita é o CSS dela (`.publico-fila`): aquela é uma fileira de SEIS,
   com o degrau do desktop no `nth-child(even)` calculado para uma linha só, e
   quinze itens escalonados em três linhas leem como erro de alinhamento. */
.areas-fila {
  margin: var(--e8) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4);
}
.areas-item { min-width: 0; }
/* O link é o item inteiro, e não uma camada esticada como na home: aqui não há
   item sem destino — área sem página não entra na lista —, então o <a> pode
   ser o próprio cartão e levar o foco junto. */
.areas-link {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-g);
  background: var(--linha-2);
  box-shadow: 0 1px 3px rgba(20, 18, 16, .07);
  text-decoration: none;
}
.areas-link:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
/* `aspect-ratio` na imagem, e não no cartão: a capa de cada página vem em 16:9
   e o cartão é 4:5 — é o object-fit que a recorta.

   `object-position` acima do meio porque as capas são fotos de consultório com
   gente: cortando 16:9 para 4:5 pelo centro geométrico, o corte come a cabeça
   e sobra mesa. 38% põe o rosto na altura certa em todas as quinze. */
.areas-link img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 38%;
}
/* O véu que segura o nome em AA por cima de foto clara — o mesmo da home, e
   pelo mesmo motivo: sem ele "Nutricionistas" some no jaleco branco. */
.areas-link::after {
  content: ''; position: absolute; inset: 42% 0 0;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0), rgba(20, 18, 16, .82) 76%);
  pointer-events: none;
}
.areas-nome {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--e5) var(--e2) var(--e4);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--claro); text-align: center; line-height: 1.25;
}
/* A sigla senta no canto de cima, longe do nome: embaixo ela disputaria as
   duas linhas que "OTORRINOLARINGOLOGISTAS" já ocupa na largura de um retrato
   de celular.

   12px, e não os 10,5 do primeiro desenho: 12 é o piso da régua de mobile da
   casa, e scripts/mobile/shot.js reprova abaixo disso — foi ele que pegou
   ("span.areas-sigla 10.5px" três vezes em 360px). Ela fica do tamanho do
   nome, e quem as separa é o lugar: a sigla no alto, em pílula; o nome
   embaixo, sobre o véu. */
.areas-sigla {
  position: absolute; top: var(--e3); left: var(--e3); z-index: 1;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(20, 18, 16, .55);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--claro);
}
/* Sem imagem o cartão não teria altura nenhuma — o nome é posicionado. Toda
   página tem capa, então isto é rede de segurança, não caminho normal. */
.areas-link:not(:has(img)) { min-height: 180px; background: var(--tinta); }

@media (hover: hover) {
  .areas-link img { transition: transform .5s ease; }
  .areas-link:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .areas-link img { transition: none; }
  .areas-link:hover img { transform: none; }
}

@media (min-width: 600px) {
  .areas-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
}
@media (min-width: 1040px) {
  .areas-fila { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e5); }
  .areas-nome { font-size: 13px; }
}