/* Blog (estilo F): índice com destaques, categorias, grade paginada; artigo com sumário lateral.
   O .cartao-post continua aqui porque a home usa na vitrine do blog. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── migalha em fundo claro ─────────────────────────────── */
.migalha--clara { color: var(--apagado); }
.migalha--clara a { color: var(--suave); }
.migalha--clara a:hover { color: var(--floresta-2); }

/* ── topo do índice ─────────────────────────────────────── */
.blog-topo { padding: 48px 0 0; background: linear-gradient(180deg, var(--areia-2) 0%, #fff 100%); border-bottom: 1px solid var(--linha); }
.blog-topo__linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 22px; }
.blog-topo h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.05; }
.blog-topo h1 small { display: block; margin-top: 8px; font-family: var(--fonte); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--apagado); }
.blog-topo__sub { margin-top: 12px; max-width: 640px; font-size: 17px; color: var(--suave); }
.blog-busca { display: flex; gap: 8px; width: min(380px, 100%); flex-shrink: 0; }
.blog-busca .entrada { height: 48px; border-radius: 999px; padding-inline: 18px; }
.blog-busca .botao { height: 48px; }

.blog-cats { display: flex; gap: 4px; margin-top: 30px; overflow-x: auto; scrollbar-width: none; }
.blog-cats::-webkit-scrollbar { display: none; }
.blog-cats a { flex-shrink: 0; padding: 14px 16px 16px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 600; color: var(--suave); text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.blog-cats a:hover { color: var(--tinta); }
.blog-cats a[aria-current="page"] { color: var(--floresta-2); border-bottom-color: var(--musgo); }
.blog-cats__campista { margin-left: auto; color: var(--brasa) !important; }
.blog-cats__campista[aria-current="page"] { border-bottom-color: var(--brasa) !important; }

/* ── rótulos de seção ───────────────────────────────────── */
.blog-rotulo { font-size: 22px; letter-spacing: -0.02em; }
.blog-rotulo::after { content: ""; display: block; width: 36px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--musgo); }

/* ── destaques (página 1) ───────────────────────────────── */
.blog-destaques { padding: 48px 0 8px; }
.blog-destaques__grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; }
.post-d { display: flex; flex-direction: column; }
.post-d__img { display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; }
.post-d__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.post-d:hover .post-d__img img { transform: scale(1.03); }
.post-d__corpo { padding-top: 22px; }
.post-d__selo { display: inline-block; margin-right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--brasa); color: #fff; font-size: 12px; font-weight: 700; }
.post-d__t { margin-top: 10px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.post-d__t a { color: inherit; text-decoration: none; }
.post-d__t a:hover { color: var(--floresta-2); }
.post-d__d { margin-top: 12px; font-size: 17px; color: var(--suave); }
.blog-destaques__lado { display: flex; flex-direction: column; gap: 20px; }
.blog-destaques__lado .blog-rotulo { margin-bottom: 4px; }

/* ── cartão de artigo ───────────────────────────────────── */
.post-c { display: flex; flex-direction: column; }
.post-c__img { display: block; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--areia-2); }
.post-c__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-c:hover .post-c__img img { transform: scale(1.04); }
.post-c__corpo { padding-top: 16px; }
.post-c__cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--floresta-2); text-decoration: none; }
.post-c__cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-c__t { margin-top: 8px; font-size: 19px; line-height: 1.25; }
.post-c__t a { color: var(--tinta); text-decoration: none; }
.post-c__t a:hover { color: var(--floresta-2); }
.post-c__d { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-c__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 13px; color: var(--apagado); }
.post-c__meta span::before { content: "·"; margin-right: 14px; }
.post-c--lista { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start; padding-top: 20px; border-top: 1px solid var(--linha); }
.post-c--lista:first-of-type { padding-top: 0; border-top: 0; }
.post-c--lista .post-c__img { aspect-ratio: 4 / 3; border-radius: 12px; }
.post-c--lista .post-c__corpo { padding: 0; }
.post-c--lista .post-c__t { margin-top: 4px; font-size: 16.5px; }
.post-c--lista .post-c__meta { margin-top: 6px; }

/* ── grade + paginação ──────────────────────────────────── */
.blog-lista { padding: 56px 0 88px; }
.blog-lista .blog-rotulo { margin-bottom: 28px; }
.blog-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.blog-vazio { padding: 64px 24px; border-radius: 22px; background: var(--areia-2); text-align: center; }
.blog-vazio h2 { font-size: 24px; }
.blog-vazio p { margin-top: 8px; color: var(--suave); }

.paginacao { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 64px; }
.paginacao ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.paginacao a, .paginacao span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--tinta-2); border: 1px solid var(--linha-2); background: #fff; transition: border-color .15s, color .15s, background .15s; }
.paginacao a:hover { border-color: var(--musgo); color: var(--floresta-2); }
.paginacao span[aria-current="page"] { background: var(--floresta); border-color: var(--floresta); color: #fff; }
.paginacao__seta.is-off { opacity: .4; }
.paginacao__gap { display: grid; place-items: center; min-width: 24px; color: var(--apagado); }

/* ── ferramentas + campistas ────────────────────────────── */
.blog-recursos { padding: 72px 0; background: var(--areia-2); }
.blog-recursos__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.recurso-c { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--linha); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.recurso-c:hover { transform: translateY(-3px); border-color: var(--musgo); box-shadow: var(--sombra); }
.recurso-c__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; background: var(--salvia); color: var(--floresta-2); }
.recurso-c strong { font-family: var(--titulo); font-size: 17px; color: var(--tinta); }
.recurso-c span:last-child { font-size: 14.5px; color: var(--suave); }

.blog-campistas { padding: 80px 0 88px; }
.blog-campistas__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.blog-campistas__topo p { margin-top: 10px; color: var(--suave); }
.blog-campistas .blog-rotulo::after { background: var(--brasa); }

/* ── CTA do blog ────────────────────────────────────────── */
.blog-cta { padding: 0 0 32px; }
.blog-cta__painel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 52px; border-radius: 28px; background: linear-gradient(115deg, var(--floresta) 0%, #0d6b4b 55%, var(--musgo) 100%); color: rgba(255, 255, 255, .85); }
.blog-cta__painel h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; color: #fff; }
.blog-cta__painel p { margin-top: 10px; max-width: 560px; }
.blog-cta .botao--branco { color: var(--floresta); }
.blog-cta .botao--vidro { color: #fff; }

/* ── artigo ─────────────────────────────────────────────── */
.artigo-topo { padding: 48px 0 0; background: linear-gradient(180deg, var(--areia-2) 0%, #fff 70%); }
.artigo-topo__cat { margin-top: 30px; }
.artigo-topo h1 { margin-top: 12px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; }
.artigo-topo__sub { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--suave); }
.artigo-topo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 24px; font-size: 14px; color: var(--apagado); }
.artigo-topo__autor { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta-2); }
.artigo-topo__autor img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; }
.artigo__capa { margin: 36px 0 0; border-radius: 24px; overflow: hidden; }
.artigo__capa img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }

.artigo-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding-block: 56px 72px; }
.artigo-corpo { max-width: 740px; }
.artigo-corpo p, .artigo-corpo li { font-size: 18px; line-height: 1.75; color: var(--tinta-2); }
.artigo-corpo p { margin-top: 16px; }
.artigo-corpo h2 { margin-top: 52px; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.18; scroll-margin-top: 100px; }
.artigo-corpo a:not(.botao) { color: var(--floresta-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.artigo-corpo a:not(.botao):hover { color: var(--musgo); }
.artigo__intro { margin-top: 0 !important; font-size: 20px !important; line-height: 1.65 !important; color: var(--tinta) !important; }
.artigo__lista { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.artigo__lista li { position: relative; padding-left: 34px; }
.artigo__lista li::before { content: ""; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--salvia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7a54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.artigo__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 40px 0 8px; padding: 26px 28px; border-radius: 20px; background: var(--salvia); border: 1px solid #c4ead8; }
.artigo__cta p { margin: 4px 0 0 !important; font-size: 15.5px !important; }
.artigo-corpo .artigo__cta-t { margin: 0 !important; font-family: var(--titulo); font-size: 19px !important; font-weight: 800; color: var(--tinta) !important; }
.artigo-corpo .faq { margin-top: 18px; }
.artigo-corpo .faq__item summary { font-size: 18px; }
.artigo-corpo .faq__item p { margin-top: 0; font-size: 16.5px; }

.artigo-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--linha); }
.artigo-rodape p { margin: 0 8px 0 0 !important; font-size: 15px !important; font-weight: 700; color: var(--tinta) !important; }
.artigo-corpo .artigo-rodape a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha-2); font-size: 14px; font-weight: 600; color: var(--tinta-2); text-decoration: none; }
.artigo-corpo .artigo-rodape a:hover { border-color: var(--musgo); color: var(--floresta-2); }

.artigo-lado { position: relative; }
.artigo-lado > * + * { margin-top: 24px; }
.sumario { position: sticky; top: 100px; padding: 22px 22px 18px; border-radius: 18px; border: 1px solid var(--linha); background: #fff; }
.sumario__t, .sumario summary { font-family: var(--titulo); font-size: 15px; font-weight: 800; color: var(--tinta); }
.sumario ol { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; }
.sumario li { counter-increment: s; }
.sumario a { display: grid; grid-template-columns: 22px 1fr; padding: 7px 0; font-size: 14px; line-height: 1.4; color: var(--suave); text-decoration: none; }
.sumario a::before { content: counter(s); font-weight: 700; color: var(--musgo); }
.sumario a:hover { color: var(--floresta-2); }
.sumario--movel { display: none; position: static; margin: 28px 0 0; }
.sumario--movel summary { cursor: pointer; }
.lado-cta { position: sticky; top: calc(100px + var(--sumario-h, 0px)); padding: 24px; border-radius: 18px; background: linear-gradient(160deg, var(--floresta), #0d6b4b); color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.artigo-lado:has(.sumario) .lado-cta { position: static; }
.lado-cta__t { font-family: var(--titulo); font-size: 19px; font-weight: 800; color: #fff; }
.lado-cta p:not(.lado-cta__t) { margin: 8px 0 18px; }
.lado-cta .botao--lima { background: #fff; color: var(--floresta); }
.lado-cta .link-seta { display: inline-flex; margin-top: 14px; color: #fff; font-size: 14px; }
.blog-lista--rel { padding-top: 64px; border-top: 1px solid var(--linha); background: var(--areia-2); }

/* ── cartão antigo (vitrine do blog na home) ────────────── */
.cartao-post { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.cartao-post:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cartao-post__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.cartao-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cartao-post:hover .cartao-post__img img { transform: scale(1.05); }
.cartao-post__meta { display: block; padding: 18px 22px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-2); }
.cartao-post__t { display: block; padding: 8px 22px 0; font-family: var(--titulo); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--tinta); }
.cartao-post__d { display: block; padding: 8px 22px 22px; font-size: 14.5px; color: var(--suave); }
.cartao-post__t:last-child { padding-bottom: 22px; }

/* ── responsivo ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .artigo-grade { grid-template-columns: 1fr; gap: 0; }
  .artigo-corpo { max-width: 760px; margin: 0 auto; }
  .artigo-lado { display: none; }
  .sumario--movel { display: block; }
  .blog-recursos__grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .blog-topo__linha { flex-direction: column; align-items: stretch; }
  .blog-busca { width: 100%; }
  .blog-destaques__grade { grid-template-columns: 1fr; }
  .blog-grade { grid-template-columns: repeat(2, 1fr); }
  .blog-cta__painel { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
  .blog-cats__campista { margin-left: 0; }
}
@media (max-width: 600px) {
  .blog-topo { padding-top: 32px; }
  .blog-grade { grid-template-columns: 1fr; gap: 36px; }
  .post-c--lista { grid-template-columns: 104px 1fr; }
  .paginacao { gap: 6px; }
  .paginacao a, .paginacao span { min-width: 40px; height: 40px; padding: 0 10px; }
  .paginacao__seta { display: none !important; }
  .blog-recursos__grade { grid-template-columns: 1fr; }
  .blog-campistas__topo { flex-direction: column; align-items: flex-start; }
  .artigo__capa { border-radius: 16px; }
  .artigo__capa img { aspect-ratio: 16 / 10; }
  .artigo-corpo p, .artigo-corpo li { font-size: 17px; }
  .artigo__cta { flex-direction: column; align-items: flex-start; }
  .blog-cta__painel { padding: 32px 22px; border-radius: 22px; }
}