/* ==========================================================================
   Componentes — shell, botões, cards, hero, grafismos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inversão tipográfica por trilha (cap. 8 §4.2)
   O par vê título técnico e argumento editorial; o paciente vê título humano
   e informação utilitária. Mesmo inventário de fontes, duas texturas.
   -------------------------------------------------------------------------- */

[data-trilha="pro"] h1,
[data-trilha="pro"] h2,
[data-trilha="pro"] h3,
[data-trilha="pro"] .display {
  font-family: var(--font-sans);
  font-weight: var(--wght-title);
  letter-spacing: -.02em;
}
[data-trilha="pro"] { --lh-corpo: 1.55; }
[data-trilha="pro"] :where(p, li) { font-family: var(--font-serif); }

[data-trilha="paciente"] h1,
[data-trilha="paciente"] h2,
[data-trilha="paciente"] h3,
[data-trilha="paciente"] .display {
  font-family: var(--font-serif);
  font-weight: calc(var(--wght-title) - 100);
}
/* :where() zera a especificidade — sem isso a regra vencia .lead, .legenda,
   .ressalva e .vinculo, e a página colapsava num tamanho de corpo só. O passo
   de tamanho vive no token, não numa regra de elemento. */
[data-trilha="paciente"] {
  --lh-corpo: 1.65;
  --fs-corpo: clamp(1.125rem, 1.083rem + .185vw, 1.1875rem);
}
[data-trilha="paciente"] :where(p, li) { font-family: var(--font-sans); }
/* A monoespaçada é quase ausente na trilha do paciente. */
[data-trilha="paciente"] .micro { letter-spacing: .08em; font-family: var(--font-sans); font-weight: 500; }

/* --------------------------------------------------------------------------
   O hero e o rodapé são o campo profundo — o mesmo --bg. O que os separa das
   seções não é luminância, é o halo e a densidade do conteúdo.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Barra de topo
   -------------------------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  /* Navy, e nao mais o --ink-950: a barra tem de ser o MESMO escuro da
     abertura, senao o cabecalho fica num tom e a abertura em outro, e a
     emenda le como defeito. 92% em vez de 88% porque agora ela desliza
     sobre campo BRANCO, e a 88% o texto claro sujava. */
  background: color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linha-navy);
}
@supports not (backdrop-filter: blur(1px)) { .topo { background: var(--navy); } }

.topo__interno {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 68px;
}

.lockup { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.lockup__nome {
  font-family: var(--font-serif);
  font-size: 1.25rem; font-weight: 500;
  letter-spacing: -.01em; line-height: 1;
}
.lockup__credencial { display: none; white-space: nowrap; }
@media (min-width: 1240px) { .lockup__credencial { display: block; font-size: .6875rem; } }

.nav { display: none; margin-inline: auto; }
@media (min-width: 1100px) {
  .nav { display: flex; gap: var(--e-3); align-items: center; }
}
.nav a {
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500;
  color: var(--text-2); text-decoration: none; padding: var(--e-1) 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a { padding-block: 12px; }   /* 40 → 44px de alvo (WCAG 2.5.5) */
.nav a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--track); }

.topo__acoes { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }
@media (min-width: 1100px) { .topo__acoes { margin-left: 0; } }

/* Menu mobile: <details> nativo — funciona sem JavaScript. */
.menu-mobile { position: relative; }
@media (min-width: 1100px) { .menu-mobile { display: none; } }
.menu-mobile > summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--raio);
  color: var(--text);
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile__painel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 15rem; padding: var(--e-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.menu-mobile__painel a {
  font-family: var(--font-sans); font-size: var(--fs-ui);
  color: var(--text); text-decoration: none;
  padding: var(--e-2); border-radius: var(--raio); min-height: 44px;
  display: flex; align-items: center;
}
.menu-mobile__painel a:hover { background: var(--surface-2); }


/* --------------------------------------------------------------------------
   Botões — altura 48, raio 4. Cápsula é proibida por decisão de marca.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: 48px; padding: var(--e-2) var(--e-3);
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500;
  border-radius: var(--raio); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn--principal { background: var(--accent); color: var(--btn-principal-tinta, var(--ink-950)); }
.btn--principal:hover { background: var(--accent-hover); }

.btn--secundario { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--secundario:hover { border-color: var(--text); background: var(--surface); }

/* Alias histórico: em tema único não existe "botão claro" — é o secundário. */
.btn--claro, .btn--secundario-escuro {
  background: transparent; color: var(--text); border-color: var(--line-strong);
}
.btn--claro:hover, .btn--secundario-escuro:hover { border-color: var(--text); background: var(--surface); }

/* O CTA principal do hero precisa vencer os outros dois. */
.hero .btn--claro { background: var(--accent); color: var(--btn-principal-tinta, var(--ink-950)); border-color: transparent; }
.hero .btn--claro:hover { background: var(--accent-hover); }

/* --------------------------------------------------------------------------
   Hero — ink-950 sempre, independente do tema (cap. 8 §6.2, Faixa 1)
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--ink-950); color: var(--paper);
  padding-block: clamp(64px, 9vw, 128px);
}
.hero::after {   /* clareamento radial azul atrás do assunto, como nas peças dela */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 88% 30%, rgba(87,160,255,.14), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
.hero__interno { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 900px) { .hero__interno { grid-template-columns: 7fr 5fr; gap: var(--e-6); } }

.hero h1, .hero .display { color: var(--text); }
.hero .lead { color: var(--hero-lead, var(--ink-200)); }   /* --hero-lead só existe no campo claro */
/* Fica azul por decisao de marca, nao por acessibilidade: os dois passam.
   O ambar e reservado a foco, <em> do mural, trilha paciente e <mark>. */
.hero .micro { color: var(--acento-micro, var(--azul-400)); }
/* O retrato dissolve no campo em vez de terminar em aresta. É o conceito
   executado: no campo escuro o sujeito emerge do escuro, não é recortado
   sobre ele. A base some no campo; a borda esquerda funde na coluna de texto.
   O topo e a direita mantêm a borda viva, senão a foto perde estrutura.

   As duas máscaras vivem no MESMO elemento, e o compositing importa: a camada
   de baixo compõe contra transparente, então ela precisa ser `add`. Com
   `intersect, intersect` a imagem inteira desaparece — e desaparece em
   silêncio, sem erro de console. */

.hero__retrato {
  border-radius: var(--raio);

  /* A queda da base começa cedo e termina antes da borda: o terno branco é a
     maior massa clara do quadro e, com pouca opacidade, ainda lia como aresta. */
  --fade-base: linear-gradient(to bottom,
    #000 0%, #000 46%, rgba(0,0,0,.66) 68%, rgba(0,0,0,.2) 84%, transparent 96%);
  --fade-esq: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.4) 5%, rgba(0,0,0,.88) 13%, #000 20%);

  -webkit-mask-image: var(--fade-base), var(--fade-esq);
  -webkit-mask-composite: source-in;              /* WebKit antigo */
          mask-image: var(--fade-base), var(--fade-esq);
          mask-composite: intersect, add;         /* padrão */
}

/* Sem mask a foto volta a ser um retângulo — degradação aceitável, sem
   nenhum artefato. */
@supports not (mask-image: linear-gradient(#000, #0000)) {
  .hero__retrato, .retrato-dissolve {
    -webkit-mask-image: none; mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   Retrato dela fora do hero — /sobre, /microbiota-intestinal e a faixa
   "Quem assina" da home.

   O hero já dissolve o retrato no campo. Estas outras vinham como retângulo
   de aresta viva colado sobre o fundo, e liam como figurinha. Aqui o mesmo
   conceito, executado para um contexto diferente: no hero a foto funde no
   texto ao lado e cai no campo abaixo, então o esmaecimento é lateral e de
   base; aqui ela flutua numa seção, e a dissolução é em torno.

   As faixas são estreitas de propósito. Medi o arquivo: a `sobre-francine`
   tem conteúdo encostando nas QUATRO bordas — folga zero — e tom médio
   quente (#6D5240), não é retrato em fundo escuro como a do hero. Faixa
   larga não dissolveria a aresta, comeria a imagem.

   A base cai mais fundo que o resto. É o único assimétrico, e é de
   propósito: dá o sentido de gravidade, a foto assenta na página em vez de
   pairar dentro de uma moldura difusa.
   -------------------------------------------------------------------------- */

.retrato-dissolve {
  --dissolve-v: linear-gradient(to bottom,
    transparent 0%, #000 7%, #000 80%, rgba(0,0,0,.7) 91%, rgba(0,0,0,.2) 97%, transparent 100%);
  --dissolve-h: linear-gradient(to right,
    transparent 0%, #000 6%, #000 94%, transparent 100%);

  /* Mesma regra de compositing do hero: a camada de baixo compõe contra o
     transparente, então ela é `add`; a de cima recorta com `intersect`.

     ARMADILHA: se alguém sobrescrever `mask-image` aqui com UMA camada só e
     esquecer o `mask-composite`, sobra `intersect` sozinho — intersecção
     contra o vazio dá vazio, e a imagem some inteira, sem erro nenhum. Quem
     trocar para uma camada precisa trocar o composite para `add` junto. É o
     que a regra do hero no celular faz. */
  -webkit-mask-image: var(--dissolve-v), var(--dissolve-h);
  -webkit-mask-composite: source-in;
          mask-image: var(--dissolve-v), var(--dissolve-h);
          mask-composite: intersect, add;
}

/* --------------------------------------------------------------------------
   Faixa escura reutilizável — sujeita ao orçamento de escuro do cap. 8 §3.4:
   home ≤30% do scroll, trilha profissional ≤40%, trilha paciente ≤15%.
   -------------------------------------------------------------------------- */

/* Faixa de respiro: um degrau de elevação sobre o campo, não uma cor nova.
   É o que dá ritmo à página sem quebrar o conceito de campo escuro. */
.faixa-escura { background: var(--faixa); }
.faixa-escura { border-block: 1px solid var(--line-strong); }
.faixa-escura .micro, .mural .micro { color: var(--accent); }
.faixa-escura a:not(.btn) { color: var(--accent); }

/* --------------------------------------------------------------------------
   Cards e listas
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: var(--e-3); }
@media (min-width: 700px)  { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  border-top: 3px solid var(--track);
}
.card h3 { margin: 0; }
.card p { margin: 0; }
.card__rodape { margin-top: auto; padding-top: var(--e-2); }

/* Card que é um link inteiro: alvo grande, sem aninhar interativos. */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   Porta de público — o roteamento da home
   -------------------------------------------------------------------------- */

.porta {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--line); border-radius: var(--raio);
  background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.porta:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.porta__rotulo { color: var(--accent); }
.porta h3 { margin: 0; }
.porta p { margin: 0; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Faixa-mural — citação da parede da clínica.
   Texto real, nunca dentro de imagem: WCAG 1.1.1 e extração por IA.
   -------------------------------------------------------------------------- */

/* A faixa sobe um degrau; o mural DESCE ao campo. O filete e o que faz o
   recuo ser lido como recuo, e nao como um vao acidental de 320px. */
.mural {
  background: var(--ink-950); color: var(--paper); text-align: center;
  border-block: 1px solid var(--line-strong);
}
.mural__frase {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1.25; letter-spacing: -.01em;
  max-width: 22ch; margin-inline: auto;
}
/* §5.3.1 — a ênfase é peso E cor, nunca cor sozinha. */
.mural__frase em { font-style: normal; font-weight: 500; color: var(--amber-400); }
.mural__fonte { color: var(--ink-400); margin-top: var(--e-3); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Prova / números autodeclarados.
   Todo número aqui carrega procedência — ver nota metodológica em /sobre.
   -------------------------------------------------------------------------- */

.provas { display: grid; gap: var(--e-4); }
@media (min-width: 700px) { .provas { grid-template-columns: repeat(3, 1fr); } }
.prova__numero {
  font-family: var(--font-serif); font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1; font-weight: 500;
  color: var(--accent);
}
.prova__texto { margin-top: var(--e-1); color: var(--text-2); }

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e-3); }
.campo label { font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500; }
.campo .ajuda { font-size: var(--fs-legenda); color: var(--text-2); }
.campo input, .campo textarea, .campo select {
  font-family: var(--font-sans); font-size: var(--fs-ui);
  min-height: 48px; padding: var(--e-2);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--raio);
}
.campo textarea { min-height: 8rem; resize: vertical; }
/* :user-invalid só marca depois da interação. A regra anterior usava
   :not(:placeholder-shown), e como nenhum campo tem placeholder ela valia
   sempre: os campos obrigatórios nasciam com borda de erro. */
.campo :is(input, select, textarea):user-invalid { border-color: var(--danger-300); border-width: 2px; }
.erro { color: var(--danger-300); font-size: var(--fs-legenda); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

/* Sem serifa: o rodape esta FORA de .campo-claro, entao continuava herdando
   a serifa do body enquanto o site inteiro virou sem serifa. So o nome
   permanece serifado, porque ele e o lockup — o mesmo gesto da abertura. */
.rodape { background: var(--navy-deep); color: var(--sobre-navy); padding-block: var(--e-6) var(--e-4);
          font-family: var(--font-sans); }
.rodape .lockup__nome { font-family: var(--font-serif); }
.rodape a { color: #FFFFFF; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape h2 { color: #FFFFFF; font-size: var(--fs-ui); font-family: var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.rodape__grid { display: grid; gap: var(--e-5); }
@media (min-width: 700px) { .rodape__grid { grid-template-columns: 2fr 1fr 1fr; } }
.rodape__lista { list-style: none; padding: 0; margin: 0; }
.rodape__lista li { margin-bottom: var(--e-1); }
.rodape__legal { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--linha-navy); color: var(--sobre-navy-4); }

/* --------------------------------------------------------------------------
   Artigos
   -------------------------------------------------------------------------- */

.artigo-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.artigo-item { padding: var(--e-4) 0; border-bottom: 1px solid var(--line); }
.artigo-item h3 { margin-bottom: var(--e-1); }
.artigo-item h3 a { color: var(--text); text-decoration: none; }
.artigo-item h3 a:hover { color: var(--accent); }

/* `margin-inline: auto` NÃO é detalhe. Sem ele o max-width limita a largura e
   encosta o texto à esquerda. Medido em 1440px: o H1 centrado com 184px de
   cada lado, e o parágrafo com 211px à esquerda contra 500px à direita — 289px
   de assimetria dentro da mesma página.

   E a medida em `ch` engana: 68ch com Georgia deu 86 caracteres por linha,
   porque `ch` mede o glifo "0", que é mais estreito que a média das letras.
   O confortável é 55 a 75, então o teto virou absoluto. */
.artigo-corpo { max-width: var(--coluna-artigo); margin-inline: auto; }

/* UMA COLUNA SÓ, e é por isso que estes quatro andam juntos.

   Medido em 1440px: o .wrap tinha 1200px, o h1 e a resposta-direta ocupavam
   1072px, e só o corpo era estreito (729px). O cabeçalho ficava 340px mais
   largo que o texto que ele introduz — e o olho lê isso como dois blocos
   desalinhados, não como um artigo.

   A medida em `ch` engana: 68ch com Georgia deu 86 caracteres por linha,
   porque `ch` mede o glifo "0", mais estreito que a média das letras. O
   confortável é 55 a 75, então a coluna virou 40rem. */
/* TODOS os filhos diretos, e não uma lista de classes: a primeira versão
   desta regra citava .assinatura, .migalhas e .artigo-meta — três nomes que
   eu supus e que não existem no gerador. Os filhos reais são nav, p.micro,
   h1, .resposta-direta e dois p. Mirar no seletor universal acerta hoje e
   continua acertando quando o template mudar. */
.campo-claro article.secao > .wrap > * {
  max-width: var(--coluna-artigo);
  margin-inline: auto;
}
/* O corpo já tem a mesma largura pela regra acima; esta o mantém explícito
   para quem for ler o CSS procurando por ele. */
.campo-claro article.secao > .wrap > .artigo-corpo { max-width: var(--coluna-artigo); }
.artigo-corpo h2 { margin-top: var(--e-5); }
.artigo-corpo h3 { margin-top: var(--e-4); }
.artigo-corpo figure { margin: var(--e-4) 0; }
.artigo-corpo figcaption { font-size: var(--fs-legenda); color: var(--text-2); margin-top: var(--e-1); }

/* Bloco de resposta direta: o trecho que motores de IA extraem. */
.resposta-direta {
  padding: var(--e-3);
  background: var(--surface-2);
  border-left: 3px solid var(--track);
  border-radius: var(--raio);
  margin-bottom: var(--e-4);
}
.resposta-direta p:last-child { margin-bottom: 0; }

/* Ressalva de evidência. Cláusula de marca: não pode ser editada para fora. */
.ressalva {
  font-size: var(--fs-legenda); line-height: 1.5;
  color: var(--text-2);
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--line-strong);
  margin: var(--e-3) 0;
}

/* Declaração de vínculo — obrigatória em peça que trate de exame. */
.vinculo {
  font-size: var(--fs-legenda);
  padding: var(--e-2) var(--e-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--raio);
  color: var(--text-2);
  margin: var(--e-4) 0;
}

/* --------------------------------------------------------------------------
   Utilitários — substituem atributos style=, que a CSP bloqueia.
   `style-src 'self'` sem 'unsafe-inline' desliga style-src-attr por fallback,
   e o estilo inline some em produção sem aviso. Toda regra mora no CSS.
   -------------------------------------------------------------------------- */

.u-medida-curta  { max-width: 36ch; }
.u-medida-media  { max-width: 56ch; }
.u-medida-longa  { max-width: 70ch; }
.u-titulo-curto  { max-width: 20ch; }

.u-fraco         { color: var(--ink-400); }
.u-claro         { color: var(--paper); }
.u-sobre-escuro  { color: var(--ink-200); }

.u-borda-topo    { border-top: 1px solid var(--line-strong); }
.u-faixa-fina    { padding-block: var(--e-6); border-block: 1px solid var(--line-strong); }
.u-raio          { border-radius: var(--raio); }
.u-limpo         { border: 0; padding: 0; margin: 0; }

.u-col-cheia     { grid-column: 1 / -1; }
.u-alinha-centro { align-items: center; row-gap: var(--e-5); }

/* Botão secundário sobre fundo escuro — o contraste vem do ink-500,
   que é o mais claro que ainda separa da superfície ink-950. */
.u-medida-60     { max-width: 60ch; }
.u-medida-22     { max-width: 22ch; }
.u-mt-5          { margin-top: var(--e-5); }
.u-mb-3          { margin-bottom: var(--e-3); }
.u-pad-secao     { padding-block: var(--e-6); }
.u-mt-4          { margin-top: var(--e-4); }
.u-mb-2          { margin-bottom: var(--e-2); }
.u-medida-24     { max-width: 24ch; }
.u-medida-58     { max-width: 58ch; }
.u-medida-62     { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Correções da auditoria de UI/UX
   -------------------------------------------------------------------------- */

/* Na trilha do paciente o campo e o mesmo — o que muda e a luz: o acento
   vira ambar e o halo do hero esquenta. */
[data-trilha="paciente"] .hero { --text: var(--paper); --text-2: var(--ink-400); }
[data-trilha="paciente"] .hero::after {
  background: radial-gradient(60% 70% at 88% 30%, rgba(232,163,61,.20), transparent 70%);
}
[data-trilha="paciente"] .hero h1,
[data-trilha="paciente"] .hero .display { color: var(--text); }
[data-trilha="paciente"] .hero .lead    { color: var(--text-2); }
[data-trilha="paciente"] .hero .micro   { color: var(--accent); }

/* §6.2 Faixa 2 — o filete que diferencia as duas portas. --track já carrega
   a cor da trilha, então uma linha resolve as duas. */
.porta { border-top: 3px solid var(--track); }
.porta > ul, .card > ul { margin-bottom: 0; }

/* O H1 do hero é a serifa fina de contraste alto, não o peso de título. */
.hero .display { font-weight: 350; }

/* Placeholder de conteúdo pendente. Sem regra, o user-agent pinta amarelo puro. */
mark { background: var(--amber-900); color: var(--paper); padding: 0 .25em; border-radius: 2px; }

/* Alternador e hambúrguer na mesma altura dos botões. */
.menu-mobile > summary { width: 48px; height: 48px; }

/* A barra é sticky: sem isto toda âncora cai atrás dela. */
.topo__interno > * { min-width: 0; }
.topo { overflow-x: clip; }

/* Botões lado a lado que quebram em telas estreitas precisam de folga. */
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0 0 var(--e-3); }
.btn { margin-block: 2px; }

/* --- O hero quando empilha ------------------------------------------------
   No desktop o retrato divide a dobra com o texto. No celular ele caía para
   depois de tudo: o hero media 1177px numa tela de 812, a foto começava em
   756px e sobravam 56px dela acima da dobra — 13% da imagem. Num aparelho
   real, com barra de URL, não sobrava nada.

   A foto é o que apresenta a Francine. Texto sozinho no topo é uma parede.
   Aqui ela vem primeiro e estoura a página: de borda a borda, sem moldura.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* Respiro acima da foto. A cabeça dela começa a 4,3% da altura do arquivo —
     21px abaixo do topo da imagem a 375px de largura —, então encostar a foto
     na barra deixava o cabelo colado no header. Não dá para resolver por
     recorte: o espaço não existe no arquivo, precisa ser criado na página.

     Comparei as cores e concluí que a emenda não apareceria: o topo da foto é
     #080C0F e o campo é #081422. Numericamente quase idênticos — mas numa
     aresta horizontal de borda a borda, e com o halo âmbar do hero pintando a
     faixa de campo, essa diferença vira linha. Errei ao decidir isso pelo
     número em vez de olhar. A máscara agora dissolve o topo também: a foto
     emerge do campo nas duas pontas em vez de ser colada sobre ele. */
  .hero { padding-block: var(--e-5) var(--e-6); }

  /* ESCOPO. `.hero__interno` não é só do hero: as faixas "Quem assina" da
     home, "Trajetória" do /sobre e "Quem escreve" do hub usam o mesmo grid
     de duas colunas. Sem `.hero` na frente, tudo abaixo pegava essas seções
     também — e elas abriam com a foto ANTES do próprio título, estourada de
     borda a borda. Retrato primeiro é decisão do hero, onde a foto é a
     apresentação; numa seção de conteúdo quem abre é o título. */
  .hero .hero__interno { gap: 0; }

  /* O retrato sobe e escapa do .wrap. A ordem do DOM NÃO muda — o h1 continua
     sendo o primeiro elemento lido por leitor de tela e por mecanismo de
     busca, e a foto não é focável, então a ordem de tabulação também não se
     altera. Inverte só a ordem visual, que é o que o WCAG 1.3.2 permite.

     `50%` aqui é metade da coluna (a largura útil do wrap) e `50vw` é metade
     da janela: a diferença é exatamente o padding lateral que precisa ser
     anulado dos dois lados. O .hero tem overflow:hidden, então 100vw não
     cria rolagem horizontal em nenhuma largura. */
  .hero .hero__interno > :last-child {
    order: -1;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
  }

  /* As demais seções empilhadas mantêm o comportamento antigo: texto
     primeiro, retrato depois, contido e centrado. */
  .hero__interno { gap: var(--e-4); }
  .hero__interno > :last-child { max-width: 20rem; margin-inline: auto; }

  .hero__retrato {
    width: 100%;
    border-radius: 0;   /* borda a borda não tem canto */

    /* De borda a borda, o retrato 3:4 cresce com a largura da janela: a 768px
       ele daria 1024px de altura e não caberia nem na tela — seria preciso
       rolar só para ver a foto inteira. O teto corta em vez de encolher.

       `svh` é a altura da janela COM a barra do navegador visível, que é o
       estado em que a pessoa chega na página; `vh` mede a janela sem a barra
       e superestima. A linha de `vh` fica antes como reserva para navegador
       que não conhece `svh`.

       O corte tira só de baixo — ver `object-position` adiante. */
    max-height: 55vh;
    max-height: 55svh;
    object-fit: cover;

    /* Ancorado no topo, não em 25%. Recortar a partir de 25% comeria 7 dos
       21px de folga que existem acima da cabeça — justamente o que este
       bloco veio proteger. Cortando só por baixo, a folga fica intacta em
       qualquer altura de tela. O teto caiu de 64 para 58svh para devolver o
       espaço que o padding de topo consumiu. A 58svh a manchete terminava a
       3px da borda numa tela de 667 — margem que qualquer variação de fonte
       estouraria. A 55svh sobram 23px. */
    object-position: 50% 0%;

    /* A queda da base é outra quando a foto estoura. No retrato pequeno ela
       podia começar em 46% da altura, porque 46% de 341px é pouca coisa. De
       borda a borda a imagem tem ~500px: a mesma curva apagaria 270px e
       deixaria um vão morto entre a foto e o texto. Aqui ela começa tarde e
       cai rápido — dissolve a aresta sem comer o retrato.

       No topo a queda é curta, 7%. O cabelo dela começa a 4,3% da altura, ou
       seja dentro dessa faixa — mas ali a foto é preta contra um campo preto,
       e esmaecer sem contraste não revela nada. Só apaga a linha reta. */
    --fade-estourado: linear-gradient(to bottom,
      transparent 0%, #000 7%,
      #000 72%, rgba(0,0,0,.72) 86%, rgba(0,0,0,.24) 95%, transparent 100%);
    -webkit-mask-image: var(--fade-estourado);
            mask-image: var(--fade-estourado);
            mask-composite: add;
  }

  /* O texto sobe para dentro da faixa dissolvida. Sem isto ele começaria
     depois da caixa inteira da imagem, e os últimos pixels — que já são
     transparentes — viram um buraco. É o que faz a foto e o texto lerem
     como uma coisa só em vez de dois blocos empilhados. */
  .hero .hero__interno > :first-child { margin-top: -6vw; }
}

.cards + p { margin-top: var(--e-4); }


/* --------------------------------------------------------------------------
   Retorno de envio do formulário
   -------------------------------------------------------------------------- */

.aviso-envio {
  display: none;
  padding: var(--e-3);
  border-radius: var(--raio);
  border-left: 4px solid var(--track);
  background: var(--surface-2);
  margin-bottom: var(--e-4);
}
.aviso-envio[data-estado] { display: block; }
.aviso-envio[data-estado="erro"] { border-left-color: var(--danger-300); }
.aviso-envio p:last-child { margin-bottom: 0; }
.aviso-envio__titulo { font-family: var(--font-sans); font-weight: 600; margin-bottom: var(--e-1); }


/* Sem mask o anel viraria um disco azul chapado. Melhor não existir. */



/* --------------------------------------------------------------------------
   Opt-in de lista — o degrau barato da escada.
   Existe porque a única porta de conversão do site era a mais cara: para
   entrar numa lista de espera gratuita o profissional preenchia sete campos,
   incluindo número de conselho e descrição de caso clínico. A lista não tem
   restrição de capacidade, então filtrar ali não protegia nada.
   -------------------------------------------------------------------------- */

/* Primeiro filho nao soma sua margem ao padding da secao. */
.wrap > .optin:first-child, .leitura > .optin:first-child { margin-block-start: 0; }
.optin {
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--track);
  border-radius: var(--raio);
  margin-block: var(--e-5);
}
.optin h3 { margin-bottom: var(--e-1); }
.optin p { margin-bottom: var(--e-3); color: var(--text-2); }
.optin__linha { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-start; }
.optin__linha .campo { flex: 1 1 16rem; margin-bottom: 0; }
.optin__consent { margin-top: var(--e-2); font-size: var(--fs-legenda); }
.optin__consent label { display: flex; gap: var(--e-1); align-items: flex-start; font-family: var(--font-sans); }

/* --------------------------------------------------------------------------
   Contato por WhatsApp — substitui o formulário nas três páginas de público.
   O texto pré-preenchido é a única atribuição que um link de WhatsApp carrega,
   então ele diz de onde a pessoa veio. Sem isso não há como saber se o site
   converteu.
   -------------------------------------------------------------------------- */

.zap { display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start; }
.zap__aviso { font-size: var(--fs-legenda); color: var(--text-2); max-width: 54ch; }
.btn--zap { background: var(--accent); color: var(--ink-950); }
.btn--zap:hover { background: var(--accent-hover); }
.btn--zap svg { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   Faixa institucional — a terceira porta.
   Não é um terceiro card de peso igual: é descoberta, não competição. A linha
   de melhor margem estava arquivada dentro do card do profissional, e quem
   contrata palestra não é o médico — é a instituição que o contrata.
   -------------------------------------------------------------------------- */

.faixa-terceira {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3);
  align-items: baseline; justify-content: space-between;
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  border: 1px solid var(--line); border-left: 3px solid var(--track);
  border-radius: var(--raio); background: var(--surface);
}
.faixa-terceira p { margin: 0; max-width: 62ch; }
.faixa-terceira a { white-space: nowrap; font-family: var(--font-sans); font-weight: 500; }

/* ==========================================================================
   ENTRADA POR SCROLL — REMOVIDA EM 01/09/2026

   Duas implementacoes, duas quebras em producao no mesmo dia. A segunda
   deixou o site inteiro em opacity 0 com os fundos pintados: blocos brancos
   vazios abaixo do hero.

   O que aprendi e vale para quem voltar aqui:
   - `animation-timeline: view()` so existe no Chromium, e amarra a animacao a
     posicao do scroll: quem rola rapido consome o intervalo num quadro.
   - IntersectionObserver nao computa intersecao com a aba em segundo plano —
     e RESPONDE ao observe() inicial mesmo assim, entao "o observador esta
     vivo?" nao e um teste valido de que ele vai entregar.
   - `:is()` assume a especificidade do argumento mais especifico. A regra que
     escondia valia (0,4,0) e a que revelava, (0,2,0). `:where()` corrigiu a
     especificidade e a pagina continuou invisivel, por causa ainda nao
     identificada.

   A regra que fica: qualquer efeito de entrada que use `opacity: 0` tem um
   modo de falha em que o conteudo desaparece. Num site de cliente isso nao se
   paga. Se voltar, que seja so por `transform` — deslocamento nunca esconde.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A lâmina — o objeto de luz sobre o campo

   A cliente pediu: "quando temos muitos textos, precisa dar uma quebrada com
   caixas brancas, talvez… senão parece que é tudo meio que a mesma coisa".
   Ela escreveu CAIXAS, não faixas — e a diferença decide tudo.

   Faixa clara de largura total foi vetada, e com razão: ela substitui o campo,
   aparece rolando e lê como remendo. As peças que a própria cliente publica
   também não fazem isso — cada peça é INTEIRA clara ou INTEIRA escura, ela
   alterna entre peças, nunca dentro de uma.

   A lâmina é o contrário: um objeto delimitado que fica SOBRE o campo, com
   escuro nos quatro lados. Contraste contra o campo: L* 97 contra L* 6, ou
   ΔL* 91 — é o maior evento visual do site, e é pontual.

   REGRA: no máximo uma ou duas por página. Três já é zebra, que é justamente
   o que os dois lados rejeitaram.
   -------------------------------------------------------------------------- */

.lamina {
  /* A inversão é por ESCOPO, não caso a caso. Dentro da lâmina o acento do
     campo escuro daria 2,48:1 e o âmbar 2,01:1 — os dois reprovam. Trocando
     os tokens semânticos aqui, `a`, `li::marker`, `blockquote`, `.card`,
     `.btn` e o anel de foco herdam o par certo sem precisar ser tocados. */
  --bg:           var(--claro);
  --surface:      var(--claro-000);
  --surface-2:    var(--claro-000);
  --faixa:        var(--claro-000);
  --text:         var(--tinta);
  --text-2:       var(--tinta-2);
  --accent:       var(--azul-600);
  --accent-hover: var(--azul-500);
  --track:        var(--azul-600);
  --line:         var(--linha-clara);
  --line-strong:  var(--linha-clara-forte);
  --focus:        var(--foco-claro);

  background: var(--claro);
  color: var(--tinta);
  border-radius: var(--raio);
  padding: var(--e-4);
  /* Os 48px que garantem campo escuro em volta. Sem isto ela encosta na
     seção vizinha e passa a ler como faixa. */
  margin-block: var(--e-5);
}

@media (min-width: 768px) { .lamina { padding: var(--e-5); } }

.lamina > :first-child { margin-top: 0; }
.lamina > :last-child  { margin-bottom: 0; }

/* O filete de acento que marca a lâmina como bloco de resposta, e não como
   um retângulo branco solto. É o mesmo gesto das caixas sólidas azuis que
   ela usa nas peças dela. */
.lamina { border-left: 3px solid var(--azul-600); }

/* O retrato dissolvido NÃO pode entrar aqui: a máscara desvanece para
   transparente, e sobre o claro isso revelaria a borda escura da foto como
   vinheta suja. As porcentagens foram calibradas contra #080C0F. */
.lamina .hero__retrato,
.lamina .retrato-dissolve { -webkit-mask-image: none; mask-image: none; }

/* ==========================================================================
   DESDOBRAR — o <details> de conteúdo.
   A Francine aprovou o mecanismo na reunião de 31/08 (28:03): resumo visível,
   detalhe atrás de um clique. "Quem tem o interesse de fato, expande" (29:45).
   Precisa parecer controle desenhado, não widget cru do navegador — e o
   conteúdo continua no HTML, então rastreador e IA seguem lendo tudo.
   Escopado por :not(.menu-mobile): aquele é o menu do topo, com regras próprias.
   ========================================================================== */
details:not(.menu-mobile) {
  border-top: 1px solid var(--line-strong);
  margin-block: var(--e-3);
}
details:not(.menu-mobile):last-of-type { border-bottom: 1px solid var(--line-strong); }

details:not(.menu-mobile) > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding-block: var(--e-3);            /* alvo de toque acima de 44px */
  cursor: pointer; list-style: none;
  font-weight: 500; color: var(--text);
  transition: color .16s ease;
}
details:not(.menu-mobile) > summary::-webkit-details-marker { display: none; }
details:not(.menu-mobile) > summary:hover { color: var(--accent); }
details:not(.menu-mobile) > summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px;
}

/* A seta é desenhada, não é glifo: fonte pode faltar, borda não. */
details:not(.menu-mobile) > summary::after {
  content: ""; flex: none;
  width: .5em; height: .5em; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
details:not(.menu-mobile)[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  details:not(.menu-mobile) > summary::after { transition: none; }
}

/* O corpo recua da régua para não competir com o rótulo. */
details:not(.menu-mobile) > :not(summary) { margin-left: 0; }
details:not(.menu-mobile) > *:not(summary):first-of-type { margin-top: 0; }
details:not(.menu-mobile) > *:last-child { margin-bottom: var(--e-4); }
details:not(.menu-mobile) :is(p, li) { color: var(--text-2); }
details:not(.menu-mobile) :is(h3, h4, strong) { color: var(--text); }

/* Dois <details> seguidos formam lista: uma régua só entre eles. */
details:not(.menu-mobile) + details:not(.menu-mobile) { margin-top: calc(var(--e-3) * -1); }

/* --------------------------------------------------------------------------
   A GRAMÁTICA DE SEÇÃO

   Seis passos, na mesma ordem, em todas as seções: antetítulo → título →
   filete → lead → objeto → botões. É de onde vem a sensação de sistema; sem
   ela cada seção parece resolvida por conta própria.
   -------------------------------------------------------------------------- */

/* 48px porque é --e-5 e está na grade de 8. 3px porque é a espessura com que o
   site já marca bloco: .card, .porta, .optin e .lamina usam border-top: 3px.
   Um filete de 1px seria um peso novo no sistema. */
.filete {
  width: 48px; height: 3px;
  background: var(--accent);
  margin: var(--e-3) 0 var(--e-4);
  border: 0;
}

/* O antetítulo abre toda seção e carrega o acento do campo. `.micro` sozinho
   cai em --text-2 e as nove seções abririam em cinza. */
.antetitulo { color: var(--accent); }

/* Adotar a gramática significa nove antetítulos por página em vez de quatro.
   Mono a 12px em caixa alta, nove vezes, é caro de ler. O campo claro já usava
   13px; o escuro passa a concordar. Escopado na home. */
.home-doc { --fs-micro: .8125rem; }

/* Alvo de toque no rodapé: o link tinha ~30px de altura e o passo entre dois
   era 38 — reprova a WCAG 2.5.5, que pede 44. */
/* min-height em vez de padding: o alvo estava em 44px por SOMA (8+8+28),
   e quando o corpo caiu de 19 para 17px a soma virou 43. Altura mínima
   não depende do tamanho da fonte. */
.rodape__lista a { display: flex; align-items: center; min-height: 44px; }
.rodape__lista li { margin-bottom: 0; }

/* O lockup e o link para a home e media 36px no desktop e 28 no celular —
   abaixo dos 44 da WCAG 2.5.5. Altura minima em vez de padding: o padding
   variava com o numero de linhas do lockup, que empilha diferente no celular. */
.lockup { min-height: 44px; justify-content: center; }

/* Migalha de pao: os links mediam 15px. Sao navegacao, nao link inline em
   frase, entao a excecao de "inline" da 2.5.8 nao os cobre. */
nav.micro a { display: inline-block; padding-block: 15px; }   /* 14px dava 43,6 apos o corpo cair para 17px */

/* -------------------------------------------------- capa do artigo --- */
.artigo-capa { margin: var(--e-4) 0; }
.artigo-capa img {
  width: 100%; display: block; border-radius: 14px;
  aspect-ratio: 1200 / 630; object-fit: cover;
}

/* ------------------------------------------- imagem no meio do texto --- */
/* A figura EXTRAVASA a coluna de leitura. A coluna tem 40rem porque é o que
   se lê confortavelmente; imagem não se lê, se olha, e a mesma largura a
   deixa pequena demais para servir de evidência. O negativo nas laterais é
   limitado pelo espaço que sobra, então em tela estreita ela volta a caber. */
.figura-texto {
  margin: var(--e-5) calc(-1 * min(4rem, 6vw));
  max-width: none;
}
.figura-texto img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  background: var(--mist100, #ECF2F5);
}
.figura-texto figcaption {
  font-size: var(--fs-legenda); color: var(--tinta-2, #5A6672);
  line-height: 1.5; margin: .7rem auto 0; max-width: var(--coluna-artigo);
  padding-inline: min(4rem, 6vw);
}
@media (max-width: 40rem) {
  .figura-texto { margin-inline: 0; }
  .figura-texto figcaption { padding-inline: 0; }
}

/* -------------------------------------------------------- compartilhar --- */
.compartilhar { margin: var(--e-5) 0 var(--e-4); }
.compartilhar__rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-2, #5A6672); margin: 0 0 .8rem;
}
.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: .55rem; }
.compartilhar__b {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .85rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  color: var(--tinta, #142331); background: #fff;
  border: 1px solid var(--linha, rgba(16,43,69,.14)); border-radius: 999px;
  padding: 0 1rem; min-height: 44px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.compartilhar__b svg { fill: currentColor; flex-shrink: 0; }
.compartilhar__b:hover { transform: translateY(-1px); border-color: transparent; color: #fff; }
/* Cor da marca no hover, e só no hover: seis botões coloridos em repouso
   competiriam com o texto do artigo, que é o que a pessoa veio ler. */
.compartilhar__b--whatsapp:hover { background: #25D366; }
.compartilhar__b--facebook:hover { background: #1877F2; }
.compartilhar__b--telegram:hover { background: #229ED9; }
.compartilhar__b--x:hover        { background: #000; }
.compartilhar__b--copiar:hover   { background: var(--tinta, #142331); }
.compartilhar__b:focus-visible { outline: 2px solid var(--azul, #2E5875); outline-offset: 2px; }
.compartilhar__b--copiado { background: #1B7A48; border-color: #1B7A48; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .compartilhar__b, .compartilhar__b:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------- leia também --- */
/* O bloco EXTRAVASA a coluna de leitura, pelo mesmo motivo da figura: 40rem
   é a largura em que se lê confortavelmente, e cartão não se lê — se olha.
   Três cartões dentro de 40rem ficariam com 12rem cada. O seletor precisa
   dos quatro níveis para vencer `.campo-claro article.secao > .wrap > *`,
   que é (0,3,1) e aplica max-width a todo filho direto. */
.campo-claro article.secao > .wrap > .relacionados {
  max-width: min(64rem, 100%);
  margin-inline: auto;
}
.relacionados { margin: var(--e-5) 0 var(--e-4); }
.relacionados__titulo {
  font-size: var(--fs-h3);
  margin: 0 0 var(--e-3);
  text-align: center;
}
.relacionados__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-3);
}
.campo-claro article.secao > .wrap > .relacionados__todos {
  max-width: min(64rem, 100%);
  margin-inline: auto;
  text-align: center;
}

.rel-card {
  border: 1px solid var(--line);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
/* O link embrulha o cartão inteiro: a área clicável é o cartão, e não só o
   título. Um alvo de 15rem por 20rem não exige mira. */
.rel-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.rel-card__foto {
  /* Mesma proporcao da capa, 1200/630: encaixar em 16/10 cortava a foto
     em cima e embaixo sem ganho nenhum. */
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: linear-gradient(145deg, #0A2136, #668FA9);
}
/* width/height vêm medidos do arquivo, mas quem manda na proporção é esta
   regra — por isso o atributo não distorce nada. */
.rel-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.rel-card__corpo { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; }
.rel-card__k {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--azul-700, #2E5875); margin: 0 0 var(--e-1);
}
.rel-card__titulo {
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400;
  line-height: 1.25; margin: 0 0 var(--e-1); transition: color .18s;
}
.rel-card__resumo { font-size: var(--fs-legenda); color: var(--text-2); line-height: 1.55; margin: 0 0 var(--e-2); }
/* `margin-top:auto` empurra a chamada para o rodapé do cartão, para os três
   alinharem embaixo mesmo com títulos de alturas diferentes. */
.rel-card__cta { margin-top: auto; font-size: var(--fs-micro); font-weight: 700; color: var(--azul-700, #2E5875); }

.rel-card:hover { border-color: var(--azul-500); box-shadow: 0 14px 34px rgba(10, 33, 54, .10); transform: translateY(-2px); }
.rel-card:hover .rel-card__foto img { transform: scale(1.04); }
.rel-card:hover .rel-card__titulo { color: var(--azul-700, #2E5875); }
.rel-card:focus-within { border-color: var(--azul-500); }
.rel-card__link:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rel-card, .rel-card__foto img { transition: none; }
  .rel-card:hover, .rel-card:hover .rel-card__foto img { transform: none; }
}

/* A data faltava aqui — estava na home, no /blog e na assinatura do artigo,
   e só nestes cartões não. Vai acima da chamada, e não junto da categoria,
   porque categoria e tempo de leitura dizem "sobre o que é e quanto custa
   ler"; a data responde outra pergunta. */
.rel-card__data { font-size: var(--fs-micro); color: var(--text-2); margin: 0 0 var(--e-2); }

/* ------------------------------------------------- URL que não quebra --- */
/* A página do artigo rolava 25px para o lado no celular, e o culpado era um
   DOI: `https://doi.org/10.14309/ajg.0000000000000501` é um token único de
   369px que o navegador não tem onde partir. Sem uma regra de quebra ele
   simplesmente estoura o contêiner e leva a página inteira junto.

   `anywhere` só nos links de referência, onde partir no meio de um endereço
   é aceitável. No corpo do texto fica `break-word`, que só age quando a
   palavra realmente não cabe — e não corta palavra comum ao meio. */
.artigo-corpo { overflow-wrap: break-word; }
.artigo-corpo ol a[href^="http"],
.artigo-corpo li a[href^="http"] { overflow-wrap: anywhere; word-break: break-word; }

/* ------------------------------------------------------ redes no rodape --- */
.footer-redes { margin-top: var(--e-3); }
.footer-redes__rotulo {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700; color: var(--sobre-navy-3, rgba(255,255,255,.5)); margin: 0 0 var(--e-2);
}
.footer-redes__lista { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.footer-redes__link {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--sobre-navy-2, rgba(255,255,255,.78));
  border: 1px solid rgba(255,255,255,.18);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.footer-redes__link:hover { background: #fff; color: var(--navy, #0B2239); border-color: #fff; transform: translateY(-2px); }
.footer-redes__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .footer-redes__link { transition: none; }
  .footer-redes__link:hover { transform: none; }
}

/* --------------------------------------------------------------------------
/* 1. Sem JavaScript, nada se move. */
/* 2. Quem pede menos movimento não recebe movimento nenhum. */
/* 3. Se o observador não marcar em 3s, o próprio CSS devolve o elemento ao
      lugar. É a trava que existe porque a de cima já falhou uma vez. */

/* A trava dos 3s saiu do CSS e virou condicional em js/revela.js.
   Aqui ela revelava SEMPRE, 3 segundos depois de carregar, tenha o elemento
   sido visto ou nao — e ninguem rola uma pagina em menos de 3 segundos. Era
   ela que matava o efeito no site inteiro desde o primeiro commit. */

/* TITULO ANDA MENOS QUE A PROPRIA MARGEM.
   Com os 28px gerais, o h2 do corpo — que tem 16px de margem embaixo —
   aterrissava 12px DENTRO do proprio paragrafo. Na tela nao lia como efeito,
   lia como bug de layout. Medido no navegador, nao deduzido.
   10px cabe na margem com folga, e quem carrega a percepcao e o fade. */

/* --------------------------------------------------------------------------
   .reveal — entrada por rolagem.

   QUATRO TENTATIVAS. Vale registrar, porque cada uma errou de um jeito.

   1. opacity 0 + 24px, sem interruptor. Quebrou o site duas vezes em 31/08:
      elemento preso em opacity 0 esperando um observador que nao marcou.
   2. Trava em CSS: `animation: … 3s forwards`. Revelava SEMPRE aos 3s, tivesse
      sido visto ou nao — e ninguem rola em menos de 3s. Matou o efeito inteiro
      desde o primeiro commit, sem ninguem notar.
   3. transform puro, 18px, sem opacity. Seguro e INVISIVEL: o olho le
      deslocamento como tremida, nao como entrada.
   4. Esta. Fade completo, e o esconder passa a depender de um INTERRUPTOR que
      o proprio JavaScript pode derrubar.

   `html.revelar` e o interruptor, posto por js/marca-js.js. Sem ele, nada
   aqui esconde nada. Classe propria e nao `.js` porque `.js` tem outros usos.

   Quem derruba o interruptor:
   - js/marca-js.js, passados 4s sem nada revelado (cobre revela.js nao carregar)
   - o proprio revela.js, se o observador nao entregar (cobre observador morto)
   - prefers-reduced-motion, sempre
   - ausencia de JavaScript, que nunca liga o interruptor
   -------------------------------------------------------------------------- */

/* Titulo anda menos que a propria margem: com 18px o h2 do corpo, que tem
   16px embaixo, encostaria no proprio paragrafo durante o fade. */

/* --------------------------------------------------------------------------
   .reveal — entrada por rolagem.

   QUATRO TENTATIVAS, e cada uma errou de um jeito diferente:
   1. opacity 0 sem interruptor. Quebrou o site duas vezes em 31/08.
   2. Trava em CSS `animation: … 3s forwards`: revelava SEMPRE aos 3s, tivesse
      sido visto ou nao. Matou o efeito desde o primeiro commit, sem ninguem ver.
   3. transform puro, 18px: seguro e invisivel — o olho le deslocamento como
      tremida, nao como entrada.
   4. Esta. Fade completo, com o esconder dependendo de um INTERRUPTOR que o
      proprio JavaScript derruba se algo der errado.

   `html.revelar` e o interruptor, posto por js/marca-js.js — classe propria, e
   nao `.js`, porque `.js` tem outros usos (ver `.filtros` em paginas.css).

   Quem derruba o interruptor:
   - marca-js.js, aos 4s sem nada revelado  (cobre revela.js nao carregar)
   - revela.js, se o observador nao entregar (cobre observador morto)
   - prefers-reduced-motion, sempre
   - ausencia de JavaScript, que nunca o liga
   -------------------------------------------------------------------------- */
html.revelar .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.revelar .reveal.visible { opacity: 1; transform: none; }

/* Titulo anda menos que a propria margem: com 18px o h2 do corpo, que tem 16px
   embaixo, encostaria no proprio paragrafo durante o fade. */
html.revelar h2.reveal { transform: translateY(10px); }
html.revelar h2.reveal.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}