/* blog: a lista dos posts e a página de cada post.
   O cabeçalho é escuro como o resto do site; o texto fica no fundo claro, pra ler. */
.blog-cabeca, .artigo-cabeca { padding-block: var(--espaco-6) var(--espaco-5); }
@media (min-width: 900px) { .blog-cabeca, .artigo-cabeca { padding-block: 104px 88px; } }
.blog-cabeca .container, .artigo-cabeca .container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-3); }
.titulo-artigo { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; max-width: 20ch; }
.blog-cabeca .abertura, .artigo-cabeca .abertura { max-width: 46ch; }
.blog-lista { padding-block: var(--espaco-6) var(--espaco-7); }

/* a coluna do post: estreita, pra linha não passar de uns 70 caracteres */
.artigo-coluna { max-width: calc(680px + 2 * var(--espaco-3)); }
@media (min-width: 900px) { .artigo-coluna { max-width: calc(680px + 2 * var(--espaco-6)); } }
.artigo-voltar { text-decoration: none; transition: color .2s ease; }
.artigo-voltar:hover { color: var(--branco); }
.artigo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; font: 500 14px/1.3 var(--fonte-texto); color: var(--cinza-claro); }
.artigo-meta .tema { color: var(--branco); }
.artigo-corpo { padding-block: var(--espaco-6) var(--espaco-7); }

.texto-artigo { font-size: 18px; line-height: 1.7; color: #2b2833; }
@media (min-width: 900px) { .texto-artigo { font-size: 19px; } }
.texto-artigo > :first-child { margin-top: 0; }
.texto-artigo p { margin: 0 0 1.15em; }
.texto-artigo h2 { margin: 2.1em 0 .6em; font: 600 clamp(25px, 2.6vw, 30px)/1.2 var(--fonte-titulo); letter-spacing: -0.015em; color: var(--preto); }
.texto-artigo h3 { margin: 1.8em 0 .5em; font: 600 21px/1.25 var(--fonte-titulo); letter-spacing: -0.01em; color: var(--preto); }
.texto-artigo strong { font-weight: 600; color: var(--preto); }
.texto-artigo a {
  color: var(--preto); text-decoration: underline; text-decoration-color: var(--laranja);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s ease;
}
.texto-artigo a:hover { color: var(--laranja-botao); }
.texto-artigo ul, .texto-artigo ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.texto-artigo li { position: relative; margin-bottom: .7em; padding-left: 1.6em; }
.texto-artigo ul li::before {
  content: ""; position: absolute; left: .2em; top: .68em; width: 8px; height: 8px;
  border-radius: var(--raio-pilula); background: var(--laranja);
}
.texto-artigo ol { counter-reset: passo; }
.texto-artigo ol li { counter-increment: passo; padding-left: 2em; }
.texto-artigo ol li::before { content: counter(passo); position: absolute; left: 0; top: 0; font: 600 1em/1.7 var(--fonte-titulo); color: var(--laranja-botao); }

/* o destaque: um número grande, com a frase embaixo */
.destaque { margin: 1.8em 0; padding: var(--espaco-4); border-radius: var(--raio-md); background: var(--nevoa); }
.destaque p { margin: 0; font: 600 clamp(21px, 2.4vw, 26px)/1.3 var(--fonte-titulo); letter-spacing: -0.01em; color: var(--preto); }
.destaque strong { display: block; margin-bottom: 8px; font-size: clamp(56px, 8vw, 80px); line-height: 1; letter-spacing: -0.03em; color: var(--laranja); }

/* as fontes fecham o post, menores */
.texto-artigo h2#fontes {
  margin-top: 2.6em; padding-top: var(--espaco-3); border-top: 1px solid var(--borda-clara);
  font: 600 16px/1.3 var(--fonte-texto); letter-spacing: 0;
}
.texto-artigo ul.fontes { font-size: 15px; line-height: 1.5; color: var(--cinza); }
.texto-artigo ul.fontes li::before { top: .55em; width: 6px; height: 6px; background: #c9c7d1; }
.texto-artigo ul.fontes a { color: var(--cinza); text-decoration-color: #c9c7d1; }

.leia-tambem .titulo-2 { margin-bottom: var(--espaco-5); }
.leia-tambem .post-cartao { background: var(--branco); }
.artigo-convite .container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-3); }

/* página de erro (404): os dois botões lado a lado */
.erro-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }