/*
Theme Name: Dr. Caio Araújo
Description: Tema clássico próprio do site do Dr. Caio Araújo (plano-site.md, D1). Metade fixa com a identificação CFM, coluna de leitura ao lado.
Version: 1.0.17
Requires PHP: 8.1
Text Domain: drcaio
*/

/* Poppins hospedada no tema (sem Google Fonts: nada do visitante vai para terceiros). Subconjunto latino, cobre o português. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-700.woff2") format("woff2"); }

/* Marca atual (kit do site): azul #22366A e âmbar #F2B760. Sálvia tirada da parede do consultório. */
:root {
  --bg: #f7f9f8;
  --paper: #ffffff;
  --surface: #e4ece7;
  --surface-2: #d3e0d8;
  --ink: #22366a;
  --ink-soft: #46557c;
  --accent: #f2b760;
  --accent-press: #e9a43f;
  --field: #22366a;
  --field-ink: #f7f9f8;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --step-head: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --step-display: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);

  --topo-h: 72px; /* cabeçalho fixo no celular; 84px a partir de 960 px */
  --margem: clamp(16px, 3vw, 40px);
  --coluna: 46rem;
  --respiro: clamp(3rem, 2rem + 3.5vw, 6rem);
  /* Foco azul nas superfícies claras (o âmbar tinha 1,7:1 e sumia sobre o botão); âmbar só nos blocos azuis. */
  --foco: 3px solid var(--ink);
  --borda-campo: #7b87a3;
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: o que recebe foco ou é alvo de âncora não fica atrás do cabeçalho fixo. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-body);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
:focus-visible { outline: var(--foco); outline-offset: 3px; }
.agendar :focus-visible, .rodape :focus-visible { outline-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
/* Evita palavra sozinha na última linha (o detector achou 22 casos). */
p, li, dd, dt { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--ink); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-display); font-weight: 700; }
h2 { font-size: var(--step-head); font-weight: 700; }
h3 { font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
p, ul, ol, dl, table { margin: 0; }
address { font-style: normal; }

.pular { position: absolute; left: -9999px; top: 0; z-index: 30; padding: 12px 16px; background: var(--accent); }
.pular:focus { left: 16px; top: 16px; }

/* Botão: chapado, uma cor, formato pílula em todo o site. */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4em;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--ink);
  font: 600 var(--step-small)/1.2 "Poppins", system-ui, sans-serif; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.botao:hover { background: var(--accent-press); }
.botao:active { transform: translateY(1px) scale(0.98); }
.botao--claro { background: var(--paper); }
.botao--claro:hover { background: var(--surface); }

/* ---------- Estrutura: barra no topo; no miolo, palco fixo à esquerda e leitura à direita; rodapé fora do miolo
   (o sticky fica preso ao miolo e não invade o rodapé). ---------- */
.miolo { display: grid; grid-template-columns: minmax(0, 1fr); }
.leitura { padding: 0 var(--margem) var(--respiro); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--margem); background: var(--bg); }
.marca { display: grid; text-decoration: none; line-height: 1.25; }
.marca-nome { font-weight: 700; font-size: 1.125rem; }
.marca-sub { font-size: var(--step-small); color: var(--ink-soft); }
.menu-botao {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 1rem "Poppins", system-ui, sans-serif; cursor: pointer;
  transition: background-color 160ms ease;
}
.menu-botao:hover, .menu-botao[aria-expanded="true"] { background: var(--surface-2); }
.menu-lista, .menu-lista ul { list-style: none; padding: 0; }
.menu-lista a { display: block; padding: 10px 0; text-decoration: none; font-weight: 600; }
.menu-lista a:hover { text-decoration: underline; }
.menu-lista .sub-menu a { font-weight: 400; padding-left: 16px; }
.menu-lista .current-menu-item > a { text-decoration: underline; text-decoration-color: var(--accent); }

/* Menu até 1199 px: escondido até o botão abrir. Sem JavaScript, a lista aparece aberta.
   Só os seis destinos principais: as subpáginas ficam nas páginas Atendimento e Consulta (menos opções por decisão). */
.topo { position: sticky; top: 0; z-index: 15; }
.js .topo { flex-wrap: wrap; }
.js .menu { display: none; flex-basis: 100%; padding: 8px 0 16px; }
.js .topo.aberto .menu { display: block; }
.js .menu-lista .sub-menu { display: none; }
.menu-lista .current-menu-ancestor > a, .menu-lista .current-page-ancestor > a { text-decoration: underline; text-decoration-color: var(--accent); }
.menu-acao { margin-top: 12px; width: 100%; }
html:not(.js) .menu-botao { display: none; }
/* Abaixo de 1200 px o nome cede espaço ao botão: a 360 px o botão descia para uma segunda linha (cabeçalho de 127 px). */
@media (max-width: 1199px) { .marca { flex: 1 1 0; min-width: 0; } }
/* No celular a barra fixa já é o botão de agendar; no menu ele seria repetido. */
@media (max-width: 599px) { .menu-acao { display: none; } }

.palco { position: relative; }
.palco-foto { margin: 0; }
.palco-foto img { width: 100%; height: 30svh; min-height: 200px; object-fit: cover; object-position: 50% 30%; }
.palco-cartao { position: relative; margin: -24px var(--margem) 0; padding: 16px 20px 18px; background: var(--paper); }
.palco-nome { font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
/* Classificação e CRM no mesmo parágrafo (exigência do CFM: CRM junto da classificação). */
.palco-classificacao { margin-top: 6px; font-size: var(--step-small); line-height: 1.45; }
.palco-classificacao strong { font-weight: 600; white-space: nowrap; }
/* No celular a barra fixa de WhatsApp faz o papel do botão; o cartão fica só com a identificação. */
.palco-local, .palco-avaliacao, .palco-cartao .botao { display: none; }

/* Páginas internas no celular: sem foto; a identificação vira uma faixa curta antes do título.
   Exceção: a página do Dr. Caio, que é sobre ele e precisa do rosto. Só no celular: no desktop todas têm a foto. */
@media (max-width: 959px) {
  body:not(.tipo-home):not(.tipo-sobre) .palco-foto { display: none; }
  body:not(.tipo-home):not(.tipo-sobre) .palco-cartao { margin: 0; padding: 14px var(--margem); background: var(--surface); }
  body:not(.tipo-home):not(.tipo-sobre) .palco-nome { display: none; } /* o nome já está no cabeçalho logo acima */
  body:not(.tipo-home):not(.tipo-sobre) .palco-classificacao { margin-top: 0; }
  .tipo-sobre .palco-foto img { height: 46svh; min-height: 280px; }
  .tipo-sobre .palco-nome { display: none; } /* o H1 da página já é o nome */
  .tipo-sobre .palco-classificacao { margin-top: 0; }
}
/* Ponto focal por foto: o retrato vertical tem o rosto no terço de cima. */
.palco .palco-foto--retrato_vertical img { object-position: 50% 12%; }

.whatsapp-fixo {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  border-radius: 999px; background: var(--accent); color: var(--ink);
  font-weight: 600; text-decoration: none;
  outline: 4px solid var(--bg);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 220ms ease;
}
/* Some quando o formulário de agendamento está na tela (site.js), para não disputar o polegar com ele. */
.whatsapp-fixo.oculto { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.rodape { padding-bottom: 88px; }
/* O foco do teclado não fica escondido atrás da barra fixa (WCAG 2.4.11). */
@media (max-width: 599px) { html { scroll-padding-bottom: 88px; } }
/* Barra fixa só no celular; do tablet em diante o botão do menu e o formulário dão conta. */
@media (min-width: 600px) {
  .whatsapp-fixo { display: none; }
  .rodape { padding-bottom: var(--respiro); }
}

@media (min-width: 960px) {
  :root { --topo-h: 84px; }
  .miolo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .topo { min-height: var(--topo-h); padding: 0 var(--margem); }
  .palco { position: sticky; top: var(--topo-h); align-self: start; height: calc(100svh - var(--topo-h)); }
  .palco-foto, .palco-foto img { height: 100%; min-height: 0; }
  .palco-foto img { object-position: 50% 22%; }
  .palco-cartao {
    position: absolute; left: var(--margem); right: var(--margem); bottom: var(--margem);
    margin: 0; padding: 24px 28px 26px; background: var(--paper);
  }
  .palco-nome { font-size: var(--step-head); }
  .palco-classificacao { font-size: 1rem; margin-top: 8px; }
  .palco-local { display: block; margin-top: 8px; font-size: var(--step-small); color: var(--ink-soft); }
  .palco-cartao .botao { display: inline-flex; margin-top: 16px; }
  .palco-avaliacao { display: block; margin-top: 16px; font-size: var(--step-small); font-weight: 600; }

  /* Margens externas iguais: a coluna termina na mesma margem do cabeçalho. */
  .leitura { padding: 8px var(--margem) var(--respiro) clamp(32px, 5vw, 88px); }
  .whatsapp-fixo { display: none; }
  .rodape { padding-bottom: var(--respiro); }
}

/* Menu em linha só a partir de 1200 px: abaixo disso o nome e seis links + botão se sobrepunham (crítica de 12/11). */
@media (min-width: 1200px) {
  .topo { height: var(--topo-h); flex-wrap: nowrap; }
  .js .menu, .menu { display: flex; align-items: center; gap: 28px; flex-basis: auto; padding: 0; }
  .menu-botao { display: none; }
  .menu-lista { display: flex; gap: 28px; }
  .menu-lista > li { position: relative; }
  .menu-lista a { padding: 8px 0; }
  .js .menu-lista .sub-menu, .menu-lista .sub-menu {
    display: none; position: absolute; left: -16px; top: 100%; z-index: 10; min-width: 260px; padding: 8px 16px;
    background: var(--paper); box-shadow: 0 10px 30px rgb(34 54 106 / 0.16);
  }
  .js .menu-lista li:hover > .sub-menu, .js .menu-lista li:focus-within > .sub-menu,
  .menu-lista li:hover > .sub-menu, .menu-lista li:focus-within > .sub-menu { display: block; }
  .menu-lista .sub-menu a { padding-left: 0; }
  /* Indicador de submenu desenhado em CSS (sem glifo). */
  .menu-lista .menu-item-has-children > a::after {
    content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-0.25em) rotate(45deg);
  }
  .menu-acao { display: inline-flex; margin: 0; width: auto; }
}

/* Telas baixas (notebook de 680-760 px de altura): cartão compacto, para não cobrir o rosto. */
@media (min-width: 960px) and (max-height: 760px) {
  .palco-cartao { left: 20px; right: 20px; bottom: 20px; padding: 16px 20px 18px; }
  .palco-nome { font-size: 1.25rem; }
  .palco-classificacao { margin-top: 4px; font-size: var(--step-small); }
  .palco-local { display: none; }
  .palco-cartao .botao { margin-top: 10px; min-height: 40px; }
}

/* ---------- Coluna de leitura ---------- */
.pagina { max-width: var(--coluna); }
.pagina > * + * { margin-top: var(--respiro); }
.pagina > h1 { margin-top: clamp(16px, 3vw, 40px); }
.pagina > .trilha + h1 { margin-top: 12px; }
.pagina > .resposta { margin-top: 24px; }
.pagina > .resposta + .fatos { margin-top: 40px; }

.trilha { margin-top: 24px; font-size: var(--step-small); color: var(--ink-soft); }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; padding: 0; }
/* Separador decorativo: o "/ ''" tira o "›" da leitura em voz alta (a primeira linha fica para navegador antigo). */
.trilha li + li::before { content: "›"; content: "›" / ""; margin-right: 8px; }
.trilha a { color: var(--ink-soft); }

.resposta { font-size: var(--step-lead); line-height: 1.5; }

.fatos { background: var(--surface); padding: 24px clamp(20px, 3vw, 32px); }
.fatos dl { display: grid; gap: 14px; }
.fatos dl > div { display: grid; gap: 2px; }
.fatos dt { font-size: var(--step-small); font-weight: 600; color: var(--ink-soft); }
.fatos dd { margin: 0; }
@media (min-width: 600px) {
  .fatos dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; }
  .fatos dt { font-size: 1rem; }
}

.corpo h2 { margin: var(--respiro) 0 16px; }
.corpo h2:first-child { margin-top: 0; }
.corpo h3 { margin: 32px 0 8px; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.01em; }
.corpo h4 { margin: 24px 0 8px; font-size: var(--step-body); font-weight: 700; }
.corpo p + p, .corpo p + ul, .corpo ul + p, .corpo p + ol, .corpo ol + p, .corpo table + p, .corpo p + table { margin-top: 16px; }
.corpo ul, .corpo ol { padding-left: 1.25em; }
.corpo li + li { margin-top: 8px; }
.corpo strong { font-weight: 600; }
.corpo img { margin: 24px 0; }
.corpo table, .horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.corpo th, .corpo td, .horarios th, .horarios td { padding: 12px 10px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.corpo thead th { font-size: var(--step-small); color: var(--ink-soft); }
.corpo .tabela-rolagem { overflow-x: auto; }
.corpo .nota { font-size: var(--step-small); color: var(--ink-soft); }

/* Condições: linhas grandes, sem cartões. */
.bloco-condicoes h2 { margin-bottom: 16px; }
.condicoes { list-style: none; padding: 0; }
.condicoes a { display: grid; gap: 4px; padding: 20px 0; text-decoration: none; transition: transform 200ms ease; }
.condicoes a:hover { transform: translateX(8px); }
.condicoes-nome { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.condicoes-resumo { color: var(--ink-soft); }

/* Roteiro da consulta: canhoto de papel com borda serrilhada sobre campo sálvia. */
.roteiro-secao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; background: var(--surface); padding: clamp(24px, 4vw, 48px); }
.roteiro-intro p { margin-top: 12px; }
.roteiro {
  container-type: inline-size;
  background: var(--paper); padding: 28px 26px 44px; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px));
}
.roteiro h3 { font-weight: 700; }
.roteiro h3 + dl { margin-top: 8px; }
.roteiro dl + h3 { margin-top: 28px; }
.roteiro-linha { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.roteiro-linha dt { flex: 0 1 auto; }
/* Pontilhado entre o que acontece e quando (o "leader" do canhoto). */
.roteiro-linha::after { content: ""; order: 1; flex: 1 1 24px; border-bottom: 3px dotted var(--surface-2); transform: translateY(-5px); }
.roteiro-linha dd { order: 2; margin: 0; color: var(--ink-soft); white-space: nowrap; }
.roteiro-linha--simples::after { content: none; }
/* Canhoto estreito (celular): a linha pede ~270 px; abaixo disso o "quando" desce para baixo, sem o pontilhado. */
@container (max-width: 279px) {
  .roteiro-linha { flex-wrap: wrap; row-gap: 0; }
  .roteiro-linha::after { content: none; }
  .roteiro-linha dd { flex-basis: 100%; white-space: normal; }
}
.roteiro-final { margin-top: 28px; padding: 12px 16px; background: var(--field); color: var(--field-ink); font-weight: 600; }
@media (min-width: 1200px) {
  .roteiro-secao { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

/* Calculadora de IMC (página de obesidade; montada pelo site.js). */
.corpo .imc { margin: 24px 0; padding: 24px clamp(20px, 3vw, 32px); background: var(--surface); }
.corpo .imc:empty { display: none; }
.imc-titulo { font-weight: 700; }
.imc-campos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.imc-campos label { display: grid; gap: 6px; font-weight: 600; font-size: 1rem; }
.imc-campos input {
  width: 9rem; min-height: 48px; padding: 0 12px; border: 2px solid var(--borda-campo); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 400 1rem "Poppins", system-ui, sans-serif;
}
.imc-campos input:focus { border-color: var(--ink); }
.corpo .imc-resultado { margin-top: 16px; font-weight: 600; }
.corpo .imc-nota { margin-top: 4px; font-size: var(--step-small); color: var(--ink-soft); }

/* Urgência: campo sálvia mais escuro, aviso em destaque. */
.urgencia { background: var(--surface-2); padding: clamp(24px, 4vw, 40px); }
.urgencia-aviso { margin-top: 12px; font-size: var(--step-lead); font-weight: 600; }
.urgencia ul { margin-top: 16px; padding-left: 1.25em; }
.urgencia li + li { margin-top: 8px; }

/* FAQ como texto corrido: a pergunta abre o parágrafo. */
.faq h2 { margin-bottom: 20px; }
.faq-item + .faq-item { margin-top: 20px; }
.faq-item h3 { display: inline; font-size: inherit; font-weight: 600; letter-spacing: 0; }
.faq-item p { display: inline; }

.leia h2 { margin-bottom: 20px; }
.leia ul { list-style: none; padding: 0; display: grid; gap: 20px; }
.leia a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; align-items: center; font-weight: 600; text-decoration: none; }
.leia a span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.leia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms ease; }
.leia-sem-foto { display: block; aspect-ratio: 4 / 3; background: var(--surface); }
.leia a:hover img { transform: scale(1.03); }

/* Agendamento: campo azul de borda a borda da coluna. */
.agendar {
  margin-inline: calc(var(--margem) * -1); padding: clamp(28px, 5vw, 56px) var(--margem);
  background: var(--field); color: var(--field-ink);
}
@media (min-width: 960px) { .agendar { margin-inline: 0; padding: 48px 44px; } }
.agendar a { color: var(--field-ink); }
.agendar > p { margin-top: 12px; max-width: 36rem; }
.agendar-form { display: grid; gap: 20px; margin-top: 28px; max-width: 36rem; }
.agendar fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.agendar legend { width: 100%; margin-bottom: 10px; font-weight: 600; }
.agendar fieldset label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgb(247 249 248 / 0.12); cursor: pointer; transition: background-color 160ms ease;
}
.agendar fieldset label:hover { background: rgb(247 249 248 / 0.2); }
.agendar fieldset label:has(input:checked) { background: var(--field-ink); color: var(--ink); }
.agendar input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.agendar-nome { display: grid; gap: 8px; font-weight: 600; }
.agendar-nome input {
  min-height: 48px; padding: 0 14px; border: 2px solid transparent; border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 400 1rem "Poppins", system-ui, sans-serif;
}
.agendar-nome input:focus { border-color: var(--accent); outline: none; }
.agendar-previa { padding: 16px 18px; background: rgb(247 249 248 / 0.12); font-size: 1rem; }
.agendar-previa::before { content: "Mensagem: "; font-weight: 600; }
.agendar .botao { justify-self: start; }
.agendar-nota { font-size: var(--step-small); color: rgb(247 249 248 / 0.85); }

/* Sobre (home): retrato e texto lado a lado. */
.sobre-resumo { display: grid; gap: 24px; align-items: center; }
.sobre-resumo figure { margin: 0; }
.sobre-resumo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 20% 30%; }
.sobre-resumo h2 + p { margin-top: 12px; }
.sobre-resumo p + p { margin-top: 12px; }
@media (min-width: 720px) { .sobre-resumo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* Como chegar. */
.chegar { background: var(--surface); padding: clamp(24px, 4vw, 40px); }
.chegar address { margin-top: 16px; font-size: var(--step-lead); line-height: 1.45; }
.chegar .botao { margin-top: 20px; }
.chegar h3 { margin-top: 32px; }
.chegar .horarios { margin-top: 8px; }
.chegar .horarios th, .chegar .horarios td { border-bottom-color: var(--surface-2); }

/* Lista de posts. */
.posts { display: grid; gap: 32px; }
.blog-recentes h2 { margin-bottom: 24px; }
.blog-recentes > p { margin-top: 24px; }
.post-item { display: grid; gap: 16px; }
.post-item h3, .post-item h2 { font-size: var(--step-lead); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.post-item h3 a, .post-item h2 a { text-decoration: none; }
.post-item h3 a:hover, .post-item h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.post-item-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms ease; }
.post-item-foto { display: block; overflow: hidden; }
.post-item-foto:hover img { transform: scale(1.03); }
.post-item-data { margin-top: 4px; font-size: var(--step-small); color: var(--ink-soft); }
.post-item-data + p { margin-top: 8px; }
.post-item-foto--tema { display: none; aspect-ratio: 4 / 3; align-content: end; padding: 12px 14px; background: var(--surface); color: var(--ink); font-size: var(--step-small); font-weight: 600; line-height: 1.3; text-decoration: none; }
@media (min-width: 600px) {
  .post-item { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; gap: 24px; }
  .post-item-foto--tema { display: grid; }
}

/* Post. */
.post-autor { margin-top: 20px; font-size: 1rem; color: var(--ink-soft); }
.post .corpo { margin-top: 40px; }
.post-condicao { background: var(--surface); padding: 24px 28px; }
.post-condicao p + p { margin-top: 8px; }
.post-condicao a { font-weight: 600; }
.post-aviso { font-size: var(--step-small); color: var(--ink-soft); }

.fontes { font-size: var(--step-small); }
.fontes h2 { font-size: 1rem; }
.fontes ul { margin-top: 8px; padding-left: 1.1em; }
.fontes li + li { margin-top: 4px; }

/* Pré-visualização: o que falta confirmar. Nunca aparece no site publicado. */
.pendencias { padding: 20px 24px; background: var(--surface-2); font-size: 1rem; }
.pendencias-titulo { font-weight: 700; }
.pendencias ul { margin-top: 8px; padding-left: 1.2em; }
.pendencias li + li { margin-top: 6px; }

/* ---------- Rodapé: o nome volta grande, campo azul ---------- */
.rodape { background: var(--field); color: var(--field-ink); padding-top: var(--respiro); padding-inline: var(--margem); }
.rodape a { color: var(--field-ink); }
.rodape-nome { font-size: clamp(2.5rem, 1rem + 6vw, 6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.rodape-classificacao { margin-top: 16px; max-width: 48rem; font-size: var(--step-lead); }
.rodape-colunas { display: grid; gap: 32px; margin-top: 56px; }
.rodape h2 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: var(--accent); letter-spacing: 0; }
.rodape-menu { list-style: none; padding: 0; columns: 2; column-gap: 24px; }
.rodape-menu li { margin-bottom: 8px; break-inside: avoid; }
.rodape-aviso { margin-top: 56px; font-size: var(--step-small); }
.rodape-legal { margin-top: 8px; font-size: var(--step-small); opacity: 0.85; }
.rodape-cookies {
  margin-top: 4px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--field-ink);
  font: inherit; font-size: var(--step-small); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: pointer;
}
.rodape-cookies:hover { text-decoration-color: var(--accent); }
html:not(.js) .rodape-cookies { display: none; } /* o aviso depende de JavaScript */
@media (min-width: 960px) { .rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Movimento: entradas discretas, só abaixo da dobra (site.js marca .anima). ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anima > * { opacity: 0; transform: translateY(18px); }
  .anima.visivel > * { opacity: 1; transform: none; transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .anima.visivel > *:nth-child(2) { transition-delay: 70ms; }
  .anima.visivel > *:nth-child(3) { transition-delay: 140ms; }
  .anima.visivel > *:nth-child(n+4) { transition-delay: 210ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .anima > * { opacity: 1; transform: none; }
}

/* Impressão: só o conteúdo, tudo visível (os blocos que entram ao rolar não podem sair em branco). */
@media print {
  .topo, .palco, .whatsapp-fixo, .agendar, .rodape-colunas nav, .pular { display: none !important; }
  .miolo { display: block; }
  .anima > * { opacity: 1 !important; transform: none !important; }
  body { background: #fff; font-size: 11pt; }
  .leitura { padding: 0; }
  a { color: inherit; text-decoration: none; }
}