@charset "utf-8";
/* ==========================================================================
   Casamento e Maternidade — folha de estilo principal
   CSS3 puro: custom properties, Grid e Flexbox. Sem frameworks.
   Ordem: tokens > reset > tipografia > layout > componentes > utilitários >
          estados > temas > impressão.
   ========================================================================== */

/* ---------- 1. Tokens de design ---------- */
:root {
  /* Cores de marca */
  --cor-marca: #8a2846;
  --cor-marca-escura: #6b1c35;
  --cor-marca-clara: #fdeef3;
  --cor-apoio: #0f6157;
  --cor-apoio-clara: #e6f2f0;
  --cor-destaque: #b4562a;

  /* Neutros quentes */
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #faf6f4;
  --cor-fundo-forte: #241a1e;
  --cor-superficie: #ffffff;
  --cor-borda: #e4dbd7;
  --cor-borda-forte: #cbbdb7;
  --cor-texto: #241f21;
  --cor-texto-suave: #5b5054;
  --cor-texto-inverso: #ffffff;

  /* Tipografia */
  --fonte-titulo: "Georgia", "Times New Roman", "Noto Serif", serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ts-100: 0.75rem;
  --ts-200: 0.8125rem;
  --ts-300: 0.875rem;
  --ts-400: 1rem;
  --ts-500: 1.125rem;
  --ts-600: 1.375rem;
  --ts-700: 1.75rem;
  --ts-800: 2.125rem;
  --ts-900: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

  /* Espaçamento */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* Formas */
  --raio-1: 4px;
  --raio-2: 8px;
  --raio-3: 16px;
  --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(36, 26, 30, .08);
  --sombra-2: 0 4px 16px rgba(36, 26, 30, .10);

  /* Layout */
  --largura-max: 1240px;
  --largura-texto: 44rem;
  --altura-cabecalho: 64px;
}

/* ---------- 2. Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--ts-400);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--cor-fundo-alt); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.22; margin: 0 0 var(--e-3); font-weight: 700; letter-spacing: -0.01em; }
p, ul, ol, dl, figure, table, pre, blockquote { margin: 0 0 var(--e-4); }
ul, ol { padding-left: 1.35rem; }
a { color: var(--cor-marca); text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: break-word; }
a:hover { color: var(--cor-marca-escura); }
hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--e-6) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--ts-300); }
th, td { border: 1px solid var(--cor-borda); padding: var(--e-2) var(--e-3); text-align: left; vertical-align: top; }
th { background: var(--cor-fundo-alt); font-weight: 700; }
caption { caption-side: bottom; padding-top: var(--e-2); color: var(--cor-texto-suave); font-size: var(--ts-200); text-align: left; }

/* Tabelas largas rolam dentro do próprio contêiner: a página nunca rola na horizontal. */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--e-5); max-width: 100%; }
.tabela-rolavel table { margin: 0; }
.tabela-rolavel:focus-visible { outline: 3px solid var(--cor-apoio); outline-offset: 2px; }

/* ---------- 3. Acessibilidade base ---------- */
.pular-para-conteudo {
  position: absolute; left: var(--e-2); top: -100px; z-index: 999;
  background: var(--cor-marca); color: var(--cor-texto-inverso);
  padding: var(--e-3) var(--e-4); border-radius: 0 0 var(--raio-2) var(--raio-2);
  font-weight: 700; text-decoration: none; transition: top .15s ease-in-out;
}
.pular-para-conteudo:focus { top: 0; color: var(--cor-texto-inverso); }
:focus-visible { outline: 3px solid var(--cor-apoio); outline-offset: 2px; border-radius: var(--raio-1); }
.apenas-leitor {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 4. Estrutura ---------- */
.envoltorio { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--e-4); }
.secao { padding-block: var(--e-6); }
.secao--alt { background: var(--cor-fundo-alt); }

/* ---------- 5. Cabeçalho ---------- */
.cabecalho { border-bottom: 1px solid var(--cor-borda); background: var(--cor-superficie); position: sticky; top: 0; z-index: 60; }
.cabecalho__topo { display: flex; align-items: center; gap: var(--e-3); min-height: var(--altura-cabecalho); flex-wrap: nowrap; }
.marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--cor-texto); flex: 1 1 auto; min-width: 0; }
.marca__simbolo { width: 34px; height: 34px; flex: 0 0 auto; }
.marca__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--ts-500); line-height: 1.1; letter-spacing: -0.02em; }
.marca__nome span { color: var(--cor-marca); }
.cabecalho__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); flex: 0 0 auto; }

.busca-topo { display: flex; align-items: center; gap: var(--e-1); }
.busca-topo input[type="search"] {
  width: 190px; padding: .45rem .7rem; border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pill); background: var(--cor-fundo-alt); font-size: var(--ts-300);
}
.busca-topo button {
  border: 1px solid var(--cor-marca); background: var(--cor-marca); color: var(--cor-texto-inverso);
  border-radius: var(--raio-pill); padding: .45rem .9rem; font-size: var(--ts-300); font-weight: 600; cursor: pointer;
}
.busca-topo button:hover { background: var(--cor-marca-escura); }

.alternar-menu {
  display: none; align-items: center; gap: var(--e-2); background: transparent;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-2);
  padding: .4rem .7rem; font-size: var(--ts-300); font-weight: 600; cursor: pointer;
}
.alternar-menu__barras { width: 18px; height: 2px; background: currentColor; position: relative; display: block; }
.alternar-menu__barras::before, .alternar-menu__barras::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.alternar-menu__barras::before { top: -6px; }
.alternar-menu__barras::after { top: 6px; }

.navegacao { border-top: 1px solid var(--cor-borda); background: var(--cor-superficie); }
.navegacao__lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-1);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.navegacao__lista > li { flex: 0 0 auto; }
.navegacao__lista a {
  display: block; padding: .7rem .7rem; font-size: var(--ts-300); font-weight: 600;
  color: var(--cor-texto-suave); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navegacao__lista a:hover { color: var(--cor-marca); border-bottom-color: var(--cor-marca-clara); }
.navegacao__lista a[aria-current="page"] { color: var(--cor-marca); border-bottom-color: var(--cor-marca); }

/* ---------- 6. Rodapé ---------- */
.rodape { background: var(--cor-fundo-forte); color: #ece5e7; margin-top: var(--e-7); padding-block: var(--e-7) var(--e-5); }
.rodape a { color: #f4dde5; }
.rodape a:hover { color: #ffffff; }
.rodape__grade { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rodape__titulo { font-size: var(--ts-300); text-transform: uppercase; letter-spacing: .08em; color: #ffffff; margin-bottom: var(--e-3); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); font-size: var(--ts-300); }
.rodape__base { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.18); font-size: var(--ts-200); color: #cfc4c8; display: grid; gap: var(--e-2); }

/* ---------- 7. Cartões editoriais ---------- */
.faixa-titulo { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-4); border-bottom: 2px solid var(--cor-marca); padding-bottom: var(--e-2); }
.faixa-titulo h2 { font-size: var(--ts-600); margin: 0; }
.faixa-titulo a { margin-left: auto; font-size: var(--ts-300); font-weight: 600; white-space: nowrap; }

.etiqueta {
  display: inline-block; font-size: var(--ts-100); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cor-marca); text-decoration: none; margin-bottom: var(--e-2);
}
.etiqueta:hover { text-decoration: underline; }

.cartao { display: flex; flex-direction: column; gap: var(--e-3); background: var(--cor-superficie); }
.cartao__figura { margin: 0; overflow: hidden; border-radius: var(--raio-2); background: var(--cor-fundo-alt); }
.cartao__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cartao__titulo { font-size: var(--ts-500); margin: 0; }
.cartao__titulo a { color: var(--cor-texto); text-decoration: none; }
.cartao__titulo a:hover { color: var(--cor-marca); text-decoration: underline; }
.cartao__resumo { font-size: var(--ts-300); color: var(--cor-texto-suave); margin: 0; }
.cartao__meta { font-size: var(--ts-200); color: var(--cor-texto-suave); display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0; }
.cartao__meta span + span::before { content: "•"; margin-right: var(--e-2); color: var(--cor-borda-forte); }

.cartao--destaque .cartao__figura img { max-height: 22rem; }
.cartao--destaque .cartao__titulo { font-size: var(--ts-800); }
.cartao--destaque .cartao__resumo { font-size: var(--ts-500); }
.cartao--compacto { flex-direction: row; gap: var(--e-3); align-items: flex-start; }
.cartao--compacto .cartao__figura { flex: 0 0 104px; }
.cartao--compacto .cartao__figura img { aspect-ratio: 1 / 1; }
.cartao--compacto .cartao__titulo { font-size: var(--ts-400); }
.cartao--texto .cartao__titulo { font-size: var(--ts-400); }

/* Grades editoriais */
.grade-hero { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.grade-hero__secundarios { display: grid; gap: var(--e-4); }
.grade-3 { display: grid; gap: var(--e-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { display: grid; gap: var(--e-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-2 { display: grid; gap: var(--e-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-divisoria { display: grid; gap: var(--e-4); }
.lista-divisoria > li { list-style: none; padding-bottom: var(--e-4); border-bottom: 1px solid var(--cor-borda); }
.lista-divisoria > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-limpa { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); }

.bloco-tema { background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-3); padding: var(--e-5); }
.bloco-tema h3 { font-size: var(--ts-500); }
.bloco-tema ul { margin: 0; padding-left: 1.1rem; font-size: var(--ts-300); display: grid; gap: var(--e-2); }

.chamada-categoria {
  display: block; text-decoration: none; color: inherit; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2); padding: var(--e-4); background: var(--cor-superficie);
  border-left: 5px solid var(--cor-marca);
}
.chamada-categoria:hover { box-shadow: var(--sombra-2); }
.chamada-categoria strong { display: block; font-family: var(--fonte-titulo); font-size: var(--ts-500); margin-bottom: var(--e-2); }
.chamada-categoria span { font-size: var(--ts-300); color: var(--cor-texto-suave); }

/* ---------- 8. Migalhas ---------- */
.migalhas { font-size: var(--ts-200); color: var(--cor-texto-suave); padding-block: var(--e-3); }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; }
.migalhas li + li::before { content: "›"; margin-right: var(--e-2); color: var(--cor-borda-forte); }

/* ---------- 9. Artigo ---------- */
.artigo-layout { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; padding-block: var(--e-5) var(--e-7); }
.artigo { min-width: 0; }
.artigo__cabecalho { margin-bottom: var(--e-5); }
.artigo__titulo { font-size: var(--ts-900); margin-bottom: var(--e-4); }
.artigo__linha-fina { font-size: var(--ts-500); color: var(--cor-texto-suave); margin-bottom: var(--e-4); }
.artigo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  font-size: var(--ts-200); color: var(--cor-texto-suave);
  border-block: 1px solid var(--cor-borda); padding-block: var(--e-3); margin-bottom: var(--e-5);
}
.artigo__meta a { font-weight: 600; }
.artigo__figura { margin: 0 0 var(--e-5); }
.artigo__figura img { width: 100%; aspect-ratio: 16 / 9; max-height: 24rem; object-fit: cover; border-radius: var(--raio-2); }
.artigo__figura figcaption { font-size: var(--ts-200); color: var(--cor-texto-suave); padding-top: var(--e-2); }

.corpo { max-width: var(--largura-texto); font-size: var(--ts-500); }
.corpo h2 { font-size: var(--ts-700); margin-top: var(--e-7); scroll-margin-top: calc(var(--altura-cabecalho) + 1.5rem); }
.corpo h3 { font-size: var(--ts-600); margin-top: var(--e-6); scroll-margin-top: calc(var(--altura-cabecalho) + 1.5rem); }
.corpo h4 { font-size: var(--ts-500); margin-top: var(--e-5); }
.corpo li { margin-bottom: var(--e-2); }
.corpo ol { counter-reset: none; }
.corpo table { font-size: var(--ts-300); margin-block: var(--e-5); }
.corpo figure { margin-block: var(--e-5); }

.resposta-direta {
  background: var(--cor-marca-clara); border-left: 5px solid var(--cor-marca);
  padding: var(--e-4) var(--e-5); border-radius: 0 var(--raio-2) var(--raio-2) 0;
  font-size: var(--ts-500); margin-bottom: var(--e-5);
}
.resposta-direta p:last-child { margin-bottom: 0; }
.resposta-direta strong { color: var(--cor-marca-escura); }

.destaque-info {
  background: var(--cor-apoio-clara); border: 1px solid #bcdcd7; border-left: 5px solid var(--cor-apoio);
  padding: var(--e-4) var(--e-5); border-radius: 0 var(--raio-2) var(--raio-2) 0; margin-block: var(--e-5);
  font-size: var(--ts-400);
}
.destaque-info h3, .destaque-info h4, .destaque-info__titulo { margin-top: 0; font-size: var(--ts-500); font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.22; margin-bottom: var(--e-3); }
.destaque-info p:last-child, .destaque-info ul:last-child { margin-bottom: 0; }

.alerta-medico {
  background: #fff5ec; border: 1px solid #f0d3b6; border-left: 5px solid var(--cor-destaque);
  padding: var(--e-4) var(--e-5); border-radius: 0 var(--raio-2) var(--raio-2) 0; margin-block: var(--e-5);
  font-size: var(--ts-400);
}
.alerta-medico h3 { margin-top: 0; font-size: var(--ts-500); color: #8a3a10; }
.alerta-medico p:last-child, .alerta-medico ul:last-child { margin-bottom: 0; }

.passos { list-style: none; padding: 0; counter-reset: passo; display: grid; gap: var(--e-4); margin-block: var(--e-5); }
.passos > li { counter-increment: passo; position: relative; padding-left: 3rem; }
.passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: .1rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--cor-marca); color: var(--cor-texto-inverso); border-radius: 50%;
  font-family: var(--fonte-texto); font-size: var(--ts-300); font-weight: 700;
}
.passos > li strong { display: block; font-family: var(--fonte-titulo); font-size: var(--ts-500); }

.faq { display: grid; gap: var(--e-4); margin-block: var(--e-5); }
.faq h3 { font-size: var(--ts-500); margin: 0 0 var(--e-2); }
.faq > div { border-bottom: 1px solid var(--cor-borda); padding-bottom: var(--e-4); }
.faq > div:last-child { border-bottom: 0; }

/* Índice do artigo */
.indice { border: 1px solid var(--cor-borda); border-radius: var(--raio-2); background: var(--cor-fundo-alt); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-5); }
.indice__titulo { font-size: var(--ts-400); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--e-3); font-family: var(--fonte-texto); }
.indice ol { list-style: decimal; margin: 0; padding-left: 1.3rem; font-size: var(--ts-300); display: grid; gap: var(--e-2); }
.indice ol ol { list-style: lower-alpha; margin-top: var(--e-2); padding-left: 1.1rem; }
.indice a { color: var(--cor-texto); text-decoration: none; }
.indice a:hover { color: var(--cor-marca); text-decoration: underline; }

/* Barra lateral */
.lateral { display: grid; gap: var(--e-5); position: sticky; top: calc(var(--altura-cabecalho) + var(--e-4)); }
.lateral__bloco { border: 1px solid var(--cor-borda); border-radius: var(--raio-2); padding: var(--e-4); background: var(--cor-superficie); }
.lateral__titulo { font-size: var(--ts-300); text-transform: uppercase; letter-spacing: .07em; font-family: var(--fonte-texto); border-bottom: 2px solid var(--cor-marca); padding-bottom: var(--e-2); margin-bottom: var(--e-3); }
.lateral__bloco > p { margin: var(--e-4) 0 0; font-size: var(--ts-300); font-weight: 600; }

/* Compartilhamento */
.compartilhar { margin-block: var(--e-6); padding: var(--e-4) 0; border-block: 1px solid var(--cor-borda); }
.compartilhar h2 { font-size: var(--ts-500); margin-bottom: var(--e-3); }
.compartilhar__lista { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; margin: 0; }
.compartilhar__lista a, .compartilhar__lista button {
  display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill);
  padding: .5rem .95rem; font-size: var(--ts-300); font-weight: 600;
  color: var(--cor-texto); background: var(--cor-superficie); cursor: pointer;
}
.compartilhar__lista a:hover, .compartilhar__lista button:hover { border-color: var(--cor-marca); color: var(--cor-marca); background: var(--cor-marca-clara); }
.compartilhar__aviso { font-size: var(--ts-200); color: var(--cor-texto-suave); margin: var(--e-3) 0 0; min-height: 1.2em; }
.compartilhar small { overflow-wrap: anywhere; word-break: break-word; }

/* Caixa do autor */
.caixa-autor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-4); background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-3); padding: var(--e-5); margin-block: var(--e-6); }
.caixa-autor img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.caixa-autor h2 { font-size: var(--ts-500); margin-bottom: var(--e-2); }
.caixa-autor p { font-size: var(--ts-300); margin-bottom: var(--e-2); }

/* Relacionados */
.relacionados { margin-top: var(--e-7); }

/* Barra de progresso de leitura */
.progresso-leitura { position: fixed; inset-inline: 0; top: 0; height: 3px; background: transparent; z-index: 80; pointer-events: none; }
.progresso-leitura__barra { height: 100%; width: 0; background: var(--cor-marca); transition: width .1s linear; }

/* ---------- 10. Páginas de conteúdo institucional ---------- */
.pagina { padding-block: var(--e-5) var(--e-7); }
.pagina__cabecalho { border-bottom: 2px solid var(--cor-marca); padding-bottom: var(--e-4); margin-bottom: var(--e-5); }
.pagina__titulo { font-size: var(--ts-900); margin-bottom: var(--e-3); }
.pagina__intro { font-size: var(--ts-500); color: var(--cor-texto-suave); max-width: var(--largura-texto); margin: 0; }
.prosa { max-width: var(--largura-texto); font-size: var(--ts-400); }
.prosa h2 { font-size: var(--ts-700); margin-top: var(--e-6); scroll-margin-top: calc(var(--altura-cabecalho) + 1.5rem); }
.prosa h3 { font-size: var(--ts-500); margin-top: var(--e-5); }
.prosa li { margin-bottom: var(--e-2); }

/* ---------- 11. Busca ---------- */
.busca-pagina { padding-block: var(--e-5) var(--e-7); }
.busca-form { display: flex; flex-wrap: wrap; gap: var(--e-2); max-width: 40rem; margin-bottom: var(--e-4); }
.busca-form input[type="search"] { flex: 1 1 16rem; padding: .8rem 1rem; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-2); background: var(--cor-superficie); }
.busca-form button { border: 0; background: var(--cor-marca); color: var(--cor-texto-inverso); border-radius: var(--raio-2); padding: .8rem 1.4rem; font-weight: 700; cursor: pointer; }
.busca-form button:hover { background: var(--cor-marca-escura); }
#busca-status { font-size: var(--ts-300); color: var(--cor-texto-suave); margin-bottom: var(--e-4); }
#busca-resultados { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-5); max-width: 46rem; }
#busca-resultados li { border-bottom: 1px solid var(--cor-borda); padding-bottom: var(--e-4); }
#busca-resultados h2 { font-size: var(--ts-500); margin-bottom: var(--e-1); }
#busca-resultados p { font-size: var(--ts-300); color: var(--cor-texto-suave); margin: 0; }
#busca-resultados .url { font-size: var(--ts-200); color: var(--cor-apoio); }

/* ---------- 12. Utilitários ---------- */
.aviso-caixa { border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-2); padding: var(--e-4); font-size: var(--ts-300); color: var(--cor-texto-suave); background: var(--cor-fundo-alt); }
.centralizado { text-align: center; }
.texto-suave { color: var(--cor-texto-suave); }
.marcadores { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; }
.marcadores a { display: inline-block; font-size: var(--ts-200); border: 1px solid var(--cor-borda); border-radius: var(--raio-pill); padding: .25rem .7rem; text-decoration: none; color: var(--cor-texto-suave); background: var(--cor-fundo-alt); }
.marcadores a:hover { border-color: var(--cor-marca); color: var(--cor-marca); }
.botao {
  display: inline-block; background: var(--cor-marca); color: var(--cor-texto-inverso);
  padding: .7rem 1.3rem; border-radius: var(--raio-2); text-decoration: none; font-weight: 700;
}
.botao:hover { background: var(--cor-marca-escura); color: var(--cor-texto-inverso); }
.botao--secundario { background: transparent; color: var(--cor-marca); border: 2px solid var(--cor-marca); }
.botao--secundario:hover { background: var(--cor-marca-clara); color: var(--cor-marca-escura); }

/* Área reservada para anúncios automáticos do AdSense */
.area-anuncio { margin-block: var(--e-6); min-height: 1px; }

/* ---------- 13. Responsivo ---------- */
@media (max-width: 1024px) {
  .artigo-layout { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grade-hero { grid-template-columns: minmax(0, 1fr); }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .busca-topo { display: none; }
  .alternar-menu { display: inline-flex; }
  .navegacao[data-recolhavel="true"] .navegacao__lista { display: none; flex-direction: column; }
  .navegacao[data-recolhavel="true"][data-aberto="true"] .navegacao__lista { display: flex; }
  .navegacao__lista { flex-direction: column; flex-wrap: nowrap; }
  .navegacao__lista a { border-bottom: 1px solid var(--cor-borda); border-left: 3px solid transparent; }
  .navegacao__lista a[aria-current="page"] { border-left-color: var(--cor-marca); }
  .cartao--destaque .cartao__titulo { font-size: var(--ts-700); }
}
@media (max-width: 560px) {
  .marca__simbolo { width: 28px; height: 28px; }
  .marca__nome { font-size: var(--ts-300); }
  .alternar-menu { padding: .4rem .55rem; }
  .envoltorio { padding-inline: var(--e-3); }
  .grade-3, .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .caixa-autor { grid-template-columns: minmax(0, 1fr); }
  .caixa-autor img { width: 80px; height: 80px; }
  .corpo { font-size: var(--ts-400); }
}

/* ---------- 14. Preferências do usuário ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #161113;
    --cor-fundo-alt: #1f181b;
    --cor-superficie: #1b1417;
    --cor-borda: #392e33;
    --cor-borda-forte: #52434a;
    --cor-texto: #f2eaed;
    --cor-texto-suave: #bcaeb4;
    --cor-marca: #f6a8c0;
    --cor-marca-escura: #ffc7d8;
    --cor-marca-clara: #33202a;
    --cor-apoio: #6fd3c2;
    --cor-apoio-clara: #16302c;
    --cor-destaque: #f0a570;
    --cor-fundo-forte: #0f0b0d;
  }
  .alerta-medico { background: #2c2016; border-color: #4a3524; }
  .alerta-medico h3 { color: #f0a570; }
  .destaque-info { border-color: #2c5b53; }
  img { background: var(--cor-fundo-alt); }
  .busca-topo button, .busca-form button { color: #1b1417; }
  .botao, .passos > li::before, .pular-para-conteudo { color: #1b1417; }
  .botao:hover { color: #1b1417; }
}

/* ---------- 15. Impressão ---------- */
@media print {
  @page { margin: 1.6cm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .cabecalho, .navegacao, .rodape, .lateral, .compartilhar, .relacionados,
  .progresso-leitura, .area-anuncio, .pular-para-conteudo, .migalhas,
  .busca-topo, .alternar-menu, .caixa-autor img { display: none !important; }
  .artigo-layout, .pagina { display: block; padding: 0; }
  .corpo, .prosa { max-width: none; font-size: 11pt; }
  .artigo__titulo, .pagina__titulo { font-size: 22pt; }
  .corpo h2 { font-size: 15pt; page-break-after: avoid; }
  .corpo h3 { font-size: 13pt; page-break-after: avoid; }
  .artigo__figura img { max-height: 8cm; object-fit: contain; }
  .indice { border: 1px solid #999; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .corpo a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  p, li, blockquote, figure, table { page-break-inside: avoid; }
  .tabela-rolavel { overflow: visible; }
  .resposta-direta, .destaque-info, .alerta-medico { border: 1px solid #999; background: #fff; }
}