/* LL Comunica, blog.
   Complementa o estilo.css, que não é editado aqui. Usa só as variáveis dele (marfim dominante, carvão, bordô,
   vermelho de acento pontual, Poppins). Todas as classes novas começam com "blog-" para não colidir com o site.js. */

/* ---------- Cabeça do artigo ---------- */
.blog-migalhas { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .875rem; line-height: 1.4; color: var(--suave); }
.blog-migalhas li { display: flex; align-items: center; gap: .5rem; }
.blog-migalhas li + li::before { content: "/"; color: var(--suave-claro); }
.blog-migalhas a { color: var(--suave); text-decoration: none; }
.blog-migalhas a:hover { color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }
.blog-migalhas [aria-current] { color: var(--texto); font-weight: 600; }

.blog-cabeca h1 { max-width: 24ch; font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
.blog-cabeca .lead { max-width: 780px; color: var(--texto); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin: 1.8rem 0 0; font-size: .9rem; color: var(--suave); }
/* Retrato recortado da arte da Luciana (imagem larga): o fundo aproxima o rosto sem gerar arquivo novo */
.blog-foto { display: block; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--carvao-fundo) url("assets/luciana-leitte-arte.webp") 38% 8% / auto 394% no-repeat; }
.blog-meta b { color: var(--texto); font-weight: 600; }
.blog-meta-autor { display: inline-flex; align-items: center; gap: .7rem; }

/* ---------- Corpo do artigo (herda .documento do estilo.css) ---------- */
/* Item de grade não encolhe abaixo do conteúdo por padrão: sem isso, a tabela larga estica a coluna no celular */
.documento-grade > .sumario, .documento-grade > .blog-artigo { min-width: 0; }
.blog-artigo { max-width: 100%; }
.blog-artigo h3 { margin: 1.9rem 0 .6rem; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
.blog-artigo ol { margin: 0 0 1em; padding-left: 1.4rem; }
.blog-artigo ol li { margin-bottom: .55rem; }
.blog-artigo ol li::marker { color: var(--bordo); font-weight: 700; }
.blog-artigo a { overflow-wrap: anywhere; }
.blog-artigo .quadro strong { color: var(--bordo); }
.blog-artigo .quadro.blog-alerta { border-left: 4px solid var(--bordo); }

/* Botões dentro do .documento: o link bordô do documento não pode pintar o texto do botão */
.documento a.botao { font-weight: 700; overflow-wrap: normal; }
.documento a.botao-cheio, .documento a.botao-cheio:hover { color: var(--branco); }
.documento a.botao-claro, .documento a.botao-claro:hover { color: var(--bordo); }
.documento a.botao-linha { color: var(--carvao); }
.documento a.botao-linha:hover { color: var(--marfim); }

/* Passos numerados */
.blog-passos { display: grid; gap: 1.1rem; margin: 1.2rem 0 1.6rem; padding: 0 !important; list-style: none; counter-reset: blog-passo; }
.blog-passos > li { position: relative; margin: 0 !important; padding-left: 3.3rem; counter-increment: blog-passo; }
.blog-passos > li::before { content: counter(blog-passo); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--bordo); color: var(--marfim); font-size: .95rem; font-weight: 800; }
.blog-passos > li > strong:first-child { display: block; margin-bottom: .2rem; color: var(--texto); font-weight: 700; }

/* Tabela */
.blog-tabela-caixa { margin: 1.3rem 0 .6rem; overflow-x: auto; border: 1px solid var(--areia); border-radius: 14px; background: var(--branco); }
.blog-tabela { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.blog-tabela th, .blog-tabela td { padding: .8rem 1rem; border-bottom: 1px solid var(--areia); text-align: left; vertical-align: top; }
.blog-tabela th { background: var(--marfim-fundo); color: var(--bordo); font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-tabela tr:last-child td { border-bottom: 0; }
.blog-tabela td:first-child { font-weight: 600; }
.blog-nota { font-size: .875rem; color: var(--suave); }

/* Evite x prefira */
.blog-troca { display: grid; gap: .8rem; margin: 1.3rem 0 1.6rem; }
.blog-troca-linha { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.blog-troca-linha > div { padding: .95rem 1.1rem; border: 1px solid var(--areia); border-radius: 14px; background: var(--branco); font-size: .96rem; line-height: 1.5; }
.blog-troca-linha span { display: block; margin-bottom: .35rem; font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-troca-linha .blog-evite span { color: var(--suave); }
.blog-troca-linha .blog-evite { color: var(--suave); text-decoration: line-through; text-decoration-color: rgba(227, 32, 55, .55); text-decoration-thickness: 1.5px; }
.blog-troca-linha .blog-evite span { text-decoration: none; display: inline-block; }
.blog-troca-linha .blog-prefira { border-color: rgba(122, 14, 46, .35); }
.blog-troca-linha .blog-prefira span { color: var(--bordo); }

/* ---------- Ferramenta interativa (checklist, calculadora, agenda) ---------- */
.blog-ferramenta { margin: 2.6rem 0; padding: clamp(1.4rem, 3.4vw, 2.1rem); border-radius: var(--raio); background: var(--carvao); color: var(--marfim); }
.blog-ferramenta .chapeu { margin-bottom: .8rem; color: var(--acento-claro); }
.documento .blog-ferramenta h3 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; }
.blog-ferramenta > p { color: var(--suave-claro); }
.blog-ferramenta a:not(.botao) { color: var(--marfim); }

.blog-checklist { display: grid; gap: .55rem; margin: 1.3rem 0 0 !important; padding: 0 !important; list-style: none; }
.blog-checklist li { margin: 0 !important; }
.blog-checklist label { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; padding: .8rem .95rem; border-radius: 12px; background: rgba(249, 244, 234, .06); line-height: 1.45; cursor: pointer; transition: background-color .25s; }
.blog-checklist label:hover { background: rgba(249, 244, 234, .1); }
.blog-checklist label:has(input:checked) { background: rgba(249, 244, 234, .15); }
.blog-checklist input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 24px; height: 24px; margin: .05rem 0 0; border: 2px solid rgba(249, 244, 234, .6); border-radius: 7px; background: transparent; cursor: pointer; transition: background-color .2s, border-color .2s; }
.blog-checklist input::after { content: ""; width: 6px; height: 12px; margin-top: -2px; border: solid var(--bordo); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.blog-checklist input:checked { border-color: var(--marfim); background: var(--marfim); }
.blog-checklist input:checked::after { transform: rotate(45deg) scale(1); }
.blog-checklist small { display: block; margin-top: .2rem; font-size: .85rem; color: var(--suave-claro); }

.blog-placar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(249, 244, 234, .18); }
.blog-placar-numero { margin: 0; font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--marfim); white-space: nowrap; }
.blog-placar-numero small { font-size: 1rem; font-weight: 600; color: var(--suave-claro); }
.blog-placar-texto { flex: 1 1 260px; margin: 0; color: var(--suave-claro); }
.blog-ferramenta .botao { margin-top: 1.2rem; }
.blog-ferramenta-nota { margin: 1rem 0 0; font-size: .92rem; color: var(--suave-claro); }

.blog-grupo { margin: 1.3rem 0 0; }
.blog-grupo-titulo { display: block; margin-bottom: .6rem; font-size: .95rem; font-weight: 600; }
.blog-escolha { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-escolha button { min-height: 44px; padding: .5rem 1rem; border: 1.5px solid rgba(249, 244, 234, .45); border-radius: 999px; background: transparent; color: var(--marfim); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.blog-escolha button:hover { border-color: var(--marfim); }
.blog-escolha button[aria-pressed="true"] { border-color: var(--marfim); background: var(--marfim); color: var(--bordo); }
.blog-escolha-dias button { min-width: 56px; padding-inline: .7rem; }

.blog-campos { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.blog-campo label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: .95rem; font-weight: 600; }
.blog-campo output { color: var(--marfim); font-weight: 800; white-space: nowrap; }
.blog-campo input[type="range"] { width: 100%; margin: 0; accent-color: var(--acento-claro); cursor: pointer; }

.blog-resultados { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.5rem; }
.blog-resultado { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(249, 244, 234, .08); }
.blog-resultado span { display: block; font-size: .85rem; line-height: 1.4; color: var(--suave-claro); }
.blog-resultado strong { display: block; margin-top: .3rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.1; color: var(--marfim); }
.blog-resultado-destaque { background: var(--bordo); }
.blog-resultado-destaque span { color: rgba(249, 244, 234, .85); }

.blog-agenda { display: grid; gap: .6rem; margin: 1.4rem 0 0 !important; padding: 0 !important; list-style: none; }
.blog-agenda li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; margin: 0 !important; padding: .85rem 1rem; border-radius: 12px; background: rgba(249, 244, 234, .07); line-height: 1.45; }
.blog-agenda b { color: var(--acento-claro); font-weight: 700; }

/* ---------- Perguntas frequentes, autora e fontes ---------- */
.blog-faq { margin-top: .4rem; border-top: 1px solid var(--areia); }
.blog-faq .pergunta summary { font-size: 1rem; }

.blog-autor { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; align-items: center; margin: 3rem 0 0; padding: 1.4rem; border: 1px solid var(--areia); border-radius: var(--raio); background: var(--branco); }
.blog-autor .blog-foto { width: 84px; height: 84px; }
.blog-autor p { margin: 0; font-size: .95rem; color: var(--suave); }
.blog-autor .blog-autor-nome { margin-bottom: .25rem; font-size: 1.05rem; font-weight: 700; color: var(--texto); }

.blog-fontes { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--areia); font-size: .9rem; color: var(--suave); }
.documento .blog-fontes h2 { margin: 0 0 .7rem; font-size: 1.05rem; letter-spacing: 0; }
.blog-fontes ul { padding-left: 1.1rem; }
.blog-fontes li { margin-bottom: .4rem; }

/* ---------- Chamada final ---------- */
.blog-cta { position: relative; overflow: hidden; padding-block: clamp(3.8rem, 8vw, 6rem); background: var(--bordo); color: var(--marfim); }
.blog-cta::before { content: ""; position: absolute; right: -6%; top: -20%; width: min(560px, 60vw); aspect-ratio: 1; background: url("assets/ll-simbolo-branco.png") center / contain no-repeat; opacity: .05; pointer-events: none; }
.blog-cta .envolve { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: end; }
.blog-cta .chapeu { color: var(--marfim); }
.blog-cta h2 { margin-bottom: 1rem; font-size: clamp(1.9rem, 3.8vw, 3rem); text-wrap: balance; }
.blog-cta p:not(.chapeu) { max-width: 640px; margin: 0; font-size: var(--t-lead); color: rgba(249, 244, 234, .92); }
.blog-cta-botoes { display: flex; flex-direction: column; gap: .8rem; }

/* ---------- Cartões de artigo (lista do blog e "continue lendo") ---------- */
.blog-lista { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4.5rem, 8vw, 6.5rem); }
.blog-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.blog-cartoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-cartao { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--areia); border-radius: var(--raio); background: var(--branco); color: var(--texto); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.blog-cartao:hover { transform: translateY(-4px); border-color: rgba(122, 14, 46, .45); box-shadow: 0 22px 40px -28px rgba(43, 43, 43, .45); }
.blog-cartao-rotulo { font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bordo); }
.blog-cartao h2, .blog-cartao h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.18; text-wrap: balance; }
.blog-cartoes-3 .blog-cartao h3 { font-size: 1.2rem; }
.blog-cartao p { margin: 0; color: var(--suave); font-size: .97rem; }
.blog-cartao-ler { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .4rem; font-weight: 700; color: var(--bordo); }
.blog-cartao-ler svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.blog-cartao:hover .blog-cartao-ler svg { transform: translateX(4px); }
.blog-cartao-info { font-size: .85rem; color: var(--suave); }

.blog-relacionados { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--areia); }
.blog-relacionados .cabeca { margin-bottom: 2rem; }
.blog-relacionados .cabeca h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.blog-lista .outros-caminhos, .blog-relacionados .outros-caminhos { margin-top: 2.4rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .blog-cta .envolve { grid-template-columns: 1fr; align-items: start; }
  .blog-cta-botoes { flex-direction: row; flex-wrap: wrap; }
  .blog-cartoes-3 { grid-template-columns: 1fr; }
  .sumario { padding: 1.1rem 1.2rem; border: 1px solid var(--areia); border-radius: 14px; background: var(--branco); }
}
@media (max-width: 760px) {
  .blog-cartoes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .blog-troca-linha { grid-template-columns: 1fr; gap: .4rem; }
  .blog-resultados { grid-template-columns: 1fr; }
  .blog-agenda li { grid-template-columns: 1fr; gap: .2rem; }
  .blog-autor { grid-template-columns: 64px 1fr; padding: 1.1rem; }
  .blog-autor img { width: 64px; height: 64px; }
  .blog-cta-botoes .botao { width: 100%; }
}