/* ══════════════════════════════════════════════════════════════
   Blog — moldura da identidade A (cabeçalho/rodapé padrão) com
   leitura confortável. Requer tokens → base → queops.css.
   ══════════════════════════════════════════════════════════════ */

.blog main { padding-top: var(--altura-topo); }
.blog .rotulo { color: var(--cinza-escuro); }
.blog .rotulo::before { content: ""; display: inline-block; width: 18px; height: 3px; background: var(--vermelho); vertical-align: middle; margin: -2px 10px 0 0; }

/* Índice */
.blog-topo { background: var(--marinho); color: var(--branco); padding: var(--space-4) 0; border-left: var(--faixa) solid var(--vermelho); }
.blog-topo p { color: var(--cinza-claro); margin: var(--space-2) 0 0; }
.blog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.post-card { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--line); border-bottom: 6px solid var(--vermelho); text-decoration: none; color: var(--marinho); transition: transform .2s; }
.post-card:hover { transform: translateY(-3px); }
.post-card img { width: 100%; height: 200px; object-fit: cover; }
.post-card__corpo { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h2 { font: 700 22px/1.25 var(--font-display); margin: 0 0 12px; }
.post-card p { color: var(--cinza-escuro); font-size: 15px; margin: 0 0 16px; flex: 1; }
.post-card .rotulo { flex: 0; margin-bottom: 10px; }
.post-meta { font-size: 13px !important; color: var(--cinza-escuro); margin: 0 !important; flex: 0 !important; }

/* Post */
.post { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.trilha { font-size: 14px; color: var(--cinza-escuro); margin-bottom: var(--space-3); display: flex; flex-wrap: wrap; gap: 8px; }
.trilha a { color: var(--marinho); }
.post h1 { margin: 0 0 var(--space-2); }
.post > .post-meta { padding-bottom: var(--space-3); margin-bottom: var(--space-3) !important; border-bottom: 1px solid var(--line); }
.post-capa { width: 100%; margin-bottom: var(--space-4); }
.artigo { font-size: 18px; }
.artigo p { margin: 0 0 1.5rem; line-height: 1.9; color: #34334a; white-space: pre-line; }
.artigo h2 { font: 700 28px/1.25 var(--font-display); color: var(--marinho); margin: 3rem 0 1.2rem; }
.artigo h3 { font: 700 22px/1.3 var(--font-display); color: var(--marinho); margin: 2.2rem 0 .9rem; }
.artigo ul { margin: 0 0 1.5rem 1.5rem; color: #34334a; line-height: 1.9; }
.artigo a { color: var(--marinho); text-decoration-color: var(--vermelho); text-underline-offset: 3px; }
.artigo strong { color: var(--marinho); }
.compartilhe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.compartilhe span { font-size: 14px; color: var(--cinza-escuro); }
.compartilhe a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border: 1px solid var(--marinho); color: var(--marinho); text-decoration: none; font: 700 13px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.compartilhe a:hover { background: var(--marinho); color: var(--branco); }
.post-cta { margin-top: var(--space-4); background: var(--marinho); color: var(--branco); padding: var(--space-4) var(--space-3); text-align: center; border-left: 16px solid var(--vermelho); }
.post-cta h2 { font: 700 30px/1.2 var(--font-display); margin: 0 0 12px; }
.post-cta p { color: var(--cinza-claro); max-width: 34em; margin: 0 auto var(--space-3); }
.continue { margin-top: var(--space-4); }
.continue h2 { font: 700 24px/1.2 var(--font-display); color: var(--marinho); margin: 0 0 var(--space-2); }
.continue__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.continue__item { display: block; padding: 20px 24px; border: 1px solid var(--line); border-top: 4px solid var(--vermelho); text-decoration: none; }
.continue__item strong { display: block; font: 700 17px/1.3 var(--font-display); color: var(--marinho); margin-bottom: 6px; }
.continue__item span { font-size: 14px; color: var(--cinza-escuro); }
@media (max-width: 640px) {
  .artigo { font-size: 17px; }
  .post-cta { padding: var(--space-3) 20px; border-left-width: 10px; }
  .post-cta h2 { font-size: 24px; }
}