/* Prumo Blog (/blog). Carregado so nas paginas do blog, por cima do site.css; usa apenas os tokens do :root de site.css. */

.blog-cabeca { background: var(--creme); border-bottom: 1px solid var(--creme-borda); padding: var(--e-4) 0 var(--e-3); }
.blog-cabeca h1 { font-family: var(--fonte-titulo); font-size: clamp(var(--t-24), 5vw, var(--t-40)); line-height: 1.12; margin: var(--e-1) 0; color: var(--tinta); overflow-wrap: anywhere; }
.blog-cabeca .lead { color: var(--texto-2); max-width: 62ch; }
.blog-coluna { max-width: 760px; }

.blog-meta { color: var(--texto-3); font-size: var(--t-14); margin: var(--e-1) 0 0; }
.blog-meta a { color: inherit; }

.blog-tags { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }
.blog-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--borda-campo);
  border-radius: var(--raio-pilula); background: var(--branco); color: var(--tinta); font-weight: 600; font-size: var(--t-14); text-decoration: none; }
.blog-tag[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.blog-tag-n { font-weight: 500; opacity: .75; }

.blog-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 768px) { .blog-lista { grid-template-columns: repeat(2, 1fr); } .blog-lista--curta { grid-template-columns: 1fr; } }
.blog-item { background: var(--branco); border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: var(--e-3); position: relative; }
.blog-item:focus-within { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.blog-item-tag { font-weight: 600; color: var(--laranja-acao); text-decoration: none; position: relative; z-index: 1; }
.blog-item-titulo { font-size: var(--t-20); line-height: 1.25; margin: var(--e-1) 0; }
.blog-item-titulo a { color: var(--tinta); text-decoration: none; }
.blog-item-titulo a::after { content: ""; position: absolute; inset: 0; }
.blog-item-titulo a:hover { text-decoration: underline; }
.blog-item-resumo { color: var(--texto-2); margin: 0; }

.blog-paginas { display: flex; align-items: center; justify-content: center; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-4); color: var(--texto-2); }

/* corpo do artigo (HTML gerado do Markdown e sanitizado) */
.blog-corpo { font-size: var(--t-18); line-height: 1.65; color: var(--tinta); padding: var(--e-4) 0 var(--e-2); overflow-wrap: anywhere; }
.blog-corpo > :first-child { margin-top: 0; }
.blog-corpo h2 { font-family: var(--fonte-titulo); font-size: var(--t-24); line-height: 1.2; margin: var(--e-5) 0 var(--e-2); }
.blog-corpo h3 { font-size: var(--t-20); line-height: 1.3; margin: var(--e-4) 0 var(--e-1); }
.blog-corpo h4 { font-size: var(--t-18); margin: var(--e-3) 0 var(--e-1); }
.blog-corpo p, .blog-corpo ul, .blog-corpo ol, .blog-corpo blockquote, .blog-corpo table { margin: 0 0 var(--e-2); }
.blog-corpo ul, .blog-corpo ol { padding-left: 1.4em; }
.blog-corpo li { margin-bottom: 6px; }
.blog-corpo a { color: var(--laranja-acao); text-decoration: underline; text-underline-offset: 3px; }
.blog-corpo a:hover { color: var(--laranja-acao-hover); }
/* Botoes e cards dentro do corpo mantem o estilo proprio (o link do texto corrido nao vale para eles) */
.blog-corpo a.btn { text-decoration: none; }
.blog-corpo a.btn-cta, .blog-corpo a.btn-cta:hover { color: var(--branco); }
.blog-corpo a.btn-whats, .blog-corpo a.btn-whats:hover { color: var(--tinta); }
.blog-corpo .pc a, .blog-corpo .pc a:hover { color: inherit; text-decoration: none; }
.blog-corpo .blog-bloco-cab a { text-decoration: underline; }
.blog-corpo blockquote { border-left: 4px solid var(--laranja-marca); background: var(--creme-2); padding: var(--e-2); border-radius: 0 var(--raio-p) var(--raio-p) 0; color: var(--texto-2); }
.blog-corpo code { background: var(--cinza-fundo); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.blog-corpo hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-4) 0; }
.blog-corpo table { width: 100%; border-collapse: collapse; font-size: var(--t-16); display: block; overflow-x: auto; }
.blog-corpo th, .blog-corpo td { border-bottom: 1px solid var(--linha); padding: 8px 10px; text-align: left; }
.blog-corpo th { background: var(--creme); }

.blog-aviso { border-top: 1px solid var(--linha); padding-top: var(--e-2); }

.blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2);
  background: var(--amarelo-claro); border-radius: var(--raio-g); padding: var(--e-3); }
.blog-cta h2 { font-family: var(--fonte-titulo); font-size: var(--t-20); margin: 0 0 4px; }
.blog-cta p { margin: 0; color: var(--tinta); max-width: 48ch; }

.blog-previa { background: var(--alerta-fundo); border-bottom: 1px solid var(--alerta-borda); color: var(--alerta); padding: 10px 0; font-size: var(--t-14); }
.blog-previa a { color: inherit; font-weight: 600; }

@media (max-width: 480px) {
  .blog-corpo { font-size: var(--t-16); }
  .blog-item { padding: var(--e-2); }
  .blog-cta .btn { width: 100%; text-align: center; }
}

/* ---------- blocos interativos (shortcodes [[...]]) ---------- */
.blog-progresso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.blog-progresso span { display: block; height: 100%; background: var(--amarelo); transform: scaleX(0); transform-origin: 0 50%; }

.blog-corpo > .blog-bloco, .blog-corpo > .blog-indice, .blog-corpo > .blog-faq { margin: var(--e-3) 0; }
.blog-bloco { background: var(--branco); border: 1px solid var(--borda-suave); border-radius: var(--raio-g); padding: var(--e-3); font-size: var(--t-16); line-height: 1.5; }
.blog-bloco-tit { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-size: var(--t-18); line-height: 1.25; margin: 0 0 var(--e-1); color: var(--tinta); }
.blog-bloco-tit svg { width: 22px; height: 22px; flex: none; }
.blog-bloco-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: var(--e-2); }
.blog-bloco-cab .blog-bloco-tit { margin: 0; }
.blog-bloco-cab a { font-weight: 600; color: var(--laranja-acao); }
.blog-bloco-texto { margin: 0 0 var(--e-2); color: var(--texto-2); }
.blog-bloco-nota { margin: var(--e-1) 0 0; font-size: var(--t-14); color: var(--texto-3); font-family: var(--fonte-texto); font-weight: 500; }
.blog-grade { margin-bottom: var(--e-2); }

.blog-resumo { background: var(--amarelo-claro); border-color: #F0D875; }
.blog-resumo ul { margin: 0; padding-left: 1.2em; }
.blog-resumo li { margin: 6px 0; font-weight: 500; }
.blog-resumo li::marker { color: var(--tinta); }

.blog-indice { border-left: 4px solid var(--laranja-marca); padding: var(--e-1) 0 var(--e-1) var(--e-2); font-size: var(--t-16); }
.blog-indice-topo { padding-top: var(--e-3); }
.blog-indice-tit { font-weight: 700; margin: 0 0 6px; }
.blog-indice ol { margin: 0; padding-left: 1.3em; }
.blog-indice li { margin: 4px 0; }
.blog-indice a { color: var(--laranja-acao); text-underline-offset: 3px; }
.blog-corpo h2[id] { scroll-margin-top: 16px; }

.blog-bloco--quiz { background: var(--creme); border-color: var(--creme-borda); }
.blog-bloco--quiz .quiz { margin: 0; }
.blog-bloco--lista { background: var(--creme-2); }

.blog-busca-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-busca-linha input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--borda-campo); border-radius: var(--raio-p); font: inherit; background: var(--branco); }
.blog-busca-linha .btn { min-height: 48px; }
.blog-bloco--busca label.blog-bloco-tit { display: block; margin-bottom: var(--e-1); }

.blog-verif-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-2); margin-bottom: var(--e-2); }
/* .campo-moeda vem do site.css; aqui so o tamanho do campo e o prefixo sem quebra */
.blog-verif-campos { align-items: end; }
.blog-verif .campo-moeda { min-height: 48px; }
.blog-verif .campo-moeda > span { flex: none; white-space: nowrap; }
.blog-verif .campo-moeda input { border: 0; outline: none; font: inherit; flex: 1 1 auto; width: 100%; min-width: 0; padding: 10px 12px; background: transparent; }
.blog-verif-previa { min-height: 1.5em; margin: 0 0 var(--e-1); font-weight: 600; }
.blog-verif-res { margin-top: var(--e-2); border-radius: var(--raio); padding: var(--e-2); border: 2px solid var(--neutro-2); background: var(--neutro-fundo); color: var(--neutro); }
.blog-verif-res ul { margin: var(--e-1) 0; padding-left: 1.2em; }
.blog-verif-res p { margin: 0; }
.blog-verif-res-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tinta); }
.blog-verif-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--neutro); color: var(--branco); font-size: 14px; font-weight: 700; flex: none; }
.blog-verif-res--alerta { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta); }
.blog-verif-res--alerta .blog-verif-ico { background: var(--alerta); }
.blog-verif-res--favoravel { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.blog-verif-res--favoravel .blog-verif-ico { background: var(--ok); }
.blog-verif-res a { color: inherit; font-weight: 700; }

.blog-checklist { list-style: none; margin: 0; padding: 0; }
.blog-checklist li { border-top: 1px solid var(--linha); }
.blog-checklist li:first-child { border-top: 0; }
.blog-checklist label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; cursor: pointer; min-height: 44px; }
.blog-checklist input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ok); }
.blog-checklist input:checked + span { color: var(--texto-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.blog-checklist label:focus-within { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: var(--raio-p); }

.blog-bloco--canal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); background: var(--tinta); border-color: var(--tinta); }
.blog-bloco--canal .blog-bloco-tit { color: var(--branco); }
.blog-bloco--canal .blog-bloco-texto { color: #E5E5E5; margin: 0; }
.blog-bloco--canal .btn-whats svg { width: 20px; height: 20px; }

.blog-bloco--alerta .consentimento { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--e-1); font-size: var(--t-14); color: var(--texto-2); }

.blog-faq { border-top: 1px solid var(--linha); }
.blog-faq-item { border-bottom: 1px solid var(--linha); }
.blog-faq-item summary { cursor: pointer; padding: 14px 36px 14px 0; font-weight: 700; font-size: var(--t-18); list-style: none; position: relative; }
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font-size: 24px; line-height: 1; color: var(--laranja-acao); }
.blog-faq-item[open] summary::after { content: "\2212"; }
.blog-faq-item summary:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.blog-faq-resp { padding: 0 0 var(--e-2); color: var(--texto-2); }
.blog-faq-resp p { margin: 0 0 8px; }

@media (max-width: 480px) {
  .blog-bloco { padding: var(--e-2); border-radius: var(--raio); }
  .blog-busca-linha .btn, .blog-verif .btn, .blog-bloco--lista .btn, .blog-bloco--canal .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .blog-progresso { display: none; } }