/* ============================================================
   Páginas de conteúdo: blog e textos longos.
   Depende de tokens.css + site.css (nav, rodapé, botões vêm de lá).
   ============================================================ */

/* ---------- cabeçalho da página de texto ---------- */
.conteudo-topo {
  padding: 9rem 0 var(--s7);
  border-bottom: 1px solid var(--linha-neutra);
}
.conteudo-topo .container { max-width: 800px; }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--creme-45);
  margin-bottom: var(--s5);
}
.migalhas a { color: var(--creme-45); }
.migalhas a:hover { color: var(--dourado); }
.migalhas span[aria-hidden] { color: var(--creme-25); }

.conteudo-topo h1 {
  font-family: var(--f-titulo);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s5);
}
.conteudo-resumo {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--creme-70);
  max-width: 60ch;
}
.conteudo-meta {
  margin-top: var(--s5);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--creme-45);
}

/* ---------- corpo do artigo ---------- */
.artigo {
  padding: var(--s8) 0 var(--s9);
}
.artigo .container { max-width: 800px; }

/* medida de leitura: ~68 caracteres por linha é onde o olho não se perde */
.artigo p,
.artigo ul,
.artigo ol {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--creme-70);
}
.artigo p { margin: 0 0 var(--s5); }

.artigo h2 {
  font-family: var(--f-titulo);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--creme);
  margin: var(--s8) 0 var(--s4);
}
.artigo h2:first-child { margin-top: 0; }
.artigo h3 {
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--creme);
  margin: var(--s6) 0 var(--s3);
}

.artigo ul, .artigo ol { margin: 0 0 var(--s5); padding-left: 1.15rem; }
.artigo li { margin-bottom: var(--s3); }
.artigo li::marker { color: var(--dourado); }

.artigo strong { color: var(--creme); font-weight: 600; }
.artigo a { color: var(--dourado); text-decoration: underline; text-underline-offset: 3px; }
.artigo a:hover { color: var(--dourado-claro); }

.artigo hr {
  border: 0;
  border-top: 1px solid var(--linha-neutra);
  margin: var(--s8) 0;
}

/* destaque de texto — usado para o preço ou a regra que a pessoa veio buscar */
.destaque {
  border-left: 2px solid var(--dourado);
  background: rgba(201, 168, 76, 0.05);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  max-width: 68ch;
}
.destaque p { margin: 0; color: var(--creme); }
.destaque p + p { margin-top: var(--s3); }

/* tabelinha de preço dentro do texto */
.tabela-texto {
  width: 100%;
  max-width: 68ch;
  border-collapse: collapse;
  margin: 0 0 var(--s6);
  font-size: 0.92rem;
}
.tabela-texto th,
.tabela-texto td {
  text-align: left;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--linha-neutra);
}
.tabela-texto th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
}
.tabela-texto td:last-child { text-align: right; white-space: nowrap; color: var(--creme); }

/* chamada para agendar, no fim do texto */
.chamada {
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--s6);
  margin-top: var(--s8);
  max-width: 68ch;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.05), transparent);
}
.chamada h2 {
  margin: 0 0 var(--s3);
  font-size: 1.25rem;
}
.chamada p { margin-bottom: var(--s5); }

/* ---------- lista de posts ---------- */
.posts {
  display: grid;
  gap: var(--s5);
  max-width: 800px;
}
.post-cartao {
  display: block;
  border: 1px solid var(--linha-neutra);
  border-radius: var(--raio);
  padding: var(--s6);
  transition: border-color var(--transicao), background var(--transicao);
}
.post-cartao:hover {
  border-color: var(--linha-forte);
  background: rgba(201, 168, 76, 0.03);
}
.post-cartao .data {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme-45);
}
.post-cartao h2 {
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  margin: var(--s3) 0;
  color: var(--creme);
}
.post-cartao:hover h2 { color: var(--dourado); }
.post-cartao p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--creme-70);
  margin: 0;
  max-width: 62ch;
}
.post-cartao .ler {
  display: inline-block;
  margin-top: var(--s4);
  font-size: 0.78rem;
  color: var(--dourado);
}

/* ---------- o que ler depois ---------- */
.relacionados {
  border-top: 1px solid var(--linha-neutra);
  padding-top: var(--s6);
  margin-top: var(--s8);
  max-width: 68ch;
}
.relacionados p.etiqueta { margin-bottom: var(--s4); }
.relacionados ul { list-style: none; padding: 0; margin: 0; }
.relacionados li { margin-bottom: var(--s3); }

@media (max-width: 860px) {
  .conteudo-topo { padding: 7rem 0 var(--s6); }
  .artigo { padding: var(--s7) 0 var(--s8); }
  .post-cartao { padding: var(--s5); }
  .chamada { padding: var(--s5); }
}