/* BLOG (LOJA, 12/11/2026) — só as páginas /blog/ carregam este arquivo (o loja.css e as ~1.500 páginas da loja não mudam).
   Usa os tokens do loja.css (claro e escuro). Leitura: coluna de ~42em, texto 17px/1.65, títulos em Barlow Condensed como o resto da loja. */
.artigo { max-width: 44em; display: grid; gap: 16px; }
.artigo > * { margin: 0; min-width: 0; }
.artigo h1 { margin-top: 4px; }
.artigo .blog-resumo { font-size: 18px; line-height: 1.5; color: var(--texto2); max-width: 40em; }
.artigo .blog-data { font-size: 14px; color: var(--texto2); }
.artigo h2 { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.artigo h3 { margin-top: 6px; font-size: 21px; }
.artigo p, .artigo li { font-size: 17px; line-height: 1.65; }
.artigo ul, .artigo ol { padding-left: 1.3em; display: grid; gap: 8px; }
.artigo li::marker { color: var(--vivo); }
.artigo ol li::marker { font-weight: 600; }
.artigo strong { font-weight: 600; }
.artigo img { width: 100%; height: auto; border-radius: var(--raio); background: var(--foto-fundo); }
/* foto + crédito (no texto: a imagem e, na linha de baixo, o crédito em itálico) */
.artigo p:has(> img) { display: grid; gap: 6px; }
.artigo p > img + em { font-size: 13px; line-height: 1.4; color: var(--texto2); font-style: normal; }
.artigo p > img + em a { color: var(--texto2); }
.artigo blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--vivo); background: var(--vivo-fundo); border-radius: 0 var(--raio) var(--raio) 0; }
.artigo blockquote p { font-size: 16px; }
.artigo hr { width: 100%; border: 0; border-top: 1px solid var(--linha); }
.artigo a { overflow-wrap: anywhere; }
.blog-tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linha); border-radius: var(--raio); }
.blog-tabela table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; background: var(--superficie); }
.blog-tabela th, .blog-tabela td { border-bottom: 1px solid var(--linha); padding: 9px 12px; text-align: left; vertical-align: top; }
.blog-tabela th { font-weight: 600; background: var(--papel); }
.blog-tabela tr:last-child td { border-bottom: 0; }
/* o bloco do fim: os cartões vivos da loja (só o que está no site e tem estoque) */
.blog-bloco { margin-top: 36px; padding-top: 20px; border-top: 3px solid var(--marca); display: grid; gap: 14px; }
.blog-volta { margin-top: 28px; font-size: 15px; }
/* índice /blog/ */
.blog-lista { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 6px; }
.blog-item { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.blog-item:hover { border-color: var(--vivo); box-shadow: 0 6px 18px var(--sombra); }
.blog-item a { display: grid; height: 100%; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.blog-item a:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }
.blog-item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-item .c { display: grid; align-content: start; gap: 6px; padding: 14px 16px 18px; }
.blog-item h2 { font-size: 23px; }
.blog-item-data { font-size: 13px; color: var(--texto2); }
.blog-item-resumo { font-size: 15px; line-height: 1.5; color: var(--texto2); }