/* ---------- blog: indice ---------- */
.lista-artigos{display:grid;gap:0;margin-top:.5rem;border-top:1px solid var(--linha)}
.lista-artigos a{display:block;text-decoration:none;color:inherit;padding:1.6rem 0;border-bottom:1px solid var(--linha);transition:padding-left .2s,border-color .2s}
.lista-artigos a:hover{padding-left:.7rem;border-bottom-color:var(--turquesa)}
.lista-artigos h2{font-size:1.32rem;margin:0 0 .4rem;color:var(--turquesa);letter-spacing:-.01em}
.lista-artigos a:hover h2{text-decoration:underline;text-underline-offset:3px}
.lista-artigos p{margin:0;color:var(--suave);font-size:.97rem;line-height:1.6;max-width:56rem}

/* ---------- blog: paginacao ----------
   A pagina atual NAO e link: e um <span aria-current="page">. Como link, o leitor
   de tela anuncia um destino que e a propria pagina. Area de toque de 44px, que e
   o minimo do WCAG 2.5.8, vem do padding somado a altura da linha. */
.conta-artigos{margin-top:.9rem;font-size:.92rem;color:var(--suave);letter-spacing:.01em}

.paginacao{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--linha)}
.pag-nums{display:flex;gap:.4rem;order:2}
.pag-n{display:grid;place-items:center;min-width:2.6rem;height:2.6rem;border-radius:50%;
  text-decoration:none;font-weight:700;font-size:.98rem;color:var(--turquesa);
  border:1.5px solid transparent;transition:background .16s,border-color .16s,color .16s}
.pag-n:hover,.pag-n:focus-visible{background:var(--nevoa);border-color:var(--turquesa)}
.pag-agora{background:var(--turquesa);color:#fff;border-color:var(--turquesa)}

.pag-passo{display:inline-flex;align-items:center;min-height:2.6rem;padding:.5rem .1rem;
  text-decoration:none;font-weight:700;font-size:.98rem;color:var(--turquesa)}
.pag-passo:hover,.pag-passo:focus-visible{text-decoration:underline;text-underline-offset:4px}
.paginacao .pag-passo:first-child{order:1}
.paginacao .pag-passo:last-child{order:3}
/* o passo indisponivel some da ordem de tabulacao por ser <span>, mas fica
   no lugar para os numeros nao pularem de um lado para o outro entre paginas */
.pag-off{color:var(--suave);opacity:.45}

@media(max-width:560px){
  .paginacao{justify-content:center;gap:1rem 2.2rem}
  .pag-nums{order:1;width:100%;justify-content:center}
  .paginacao .pag-passo:first-child{order:2}
  .paginacao .pag-passo:last-child{order:3}
}

/* ---------- blog: artigo ---------- */
.artigo{padding-top:.4rem}
.artigo p{margin:0 0 1.15rem;line-height:1.78;font-size:1.045rem}
.artigo h2{font-size:1.62rem;margin:2.5rem 0 .85rem}
.artigo h3{font-size:1.2rem;margin:1.9rem 0 .6rem;font-family:var(--corpo);font-weight:700;letter-spacing:0}
.artigo ul,.artigo ol{margin:0 0 1.15rem;padding-left:1.3rem;line-height:1.78}
.artigo li{margin-bottom:.45rem}
.artigo blockquote{margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:3px solid var(--turquesa-claro);color:var(--suave);font-style:italic}
.artigo figure{margin:1.9rem 0}
.artigo img{width:100%;height:auto;border-radius:12px;display:block}
.artigo a{color:var(--turquesa);text-underline-offset:2px}
.artigo strong,.artigo b{font-weight:700;color:var(--tinta)}
/* 🔴 Mesmo alvo de toque do .volta. A margem caiu de 1.4 para .9 porque o
   padding novo ja devolve o espaco. */
.volta-blog{display:inline-flex;align-items:center;min-height:2.5rem;margin-bottom:.9rem;font-size:.92rem;color:var(--turquesa);text-decoration:none;font-weight:500}
.volta-blog:hover{text-decoration:underline}
.assinatura{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linha);font-size:.92rem;color:var(--suave)}