/* Blog do dbadigital.ai — mesmo visual da home (style.css), com tipografia de leitura. */
.blog { max-width: var(--max); margin: 0 auto; padding: 24px 24px 80px; }
.blog-cabeca { display: flex; align-items: center; gap: 40px; margin: 20px 0 50px; flex-wrap: wrap; }
.blog-cabeca .leitura { flex: 1 1 280px; max-width: 420px; }
.serie { margin-bottom: 56px; }
.serie .rotulo { opacity: 1; transform: none; }
.cartoes { display: grid; gap: 16px; }
.cartao { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; padding: 16px; }
.cartao .capa { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; border: 1px solid var(--linha); background: #0a0f1a; }
.cartao .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao .meta { display: block; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--acento); margin-bottom: 6px; text-transform: uppercase; }
.cartao h3 { margin: 0 0 6px; }
.cartao.rascunho { border-style: dashed; }
.cartao:not(:has(.capa)) { grid-template-columns: 1fr; }

/* artigo */
.artigo { max-width: 760px; margin: 0 auto; }
.voltar { display: inline-block; font: 500 13px var(--mono); color: var(--texto-fraco); text-decoration: none; margin: 10px 0 26px; }
.voltar:hover { color: var(--acento); }
.kicker { font: 600 12px var(--hud); letter-spacing: .2em; color: var(--acento); margin: 0 0 10px; }
.artigo h1 { font: 600 clamp(30px, 5vw, 46px)/1.1 var(--sans); letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.meta-artigo { font: 500 13px var(--mono); color: var(--texto-fraco); margin: 0 0 26px; }
.lide { font: 400 21px/1.55 var(--sans); color: var(--texto); margin: 0 0 30px; border-left: 2px solid var(--acento-2); padding-left: 18px; }
.capa-artigo { margin: 0 0 34px; }
.capa-artigo img, .texto-artigo img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--linha); background: #0a0f1a; }
.texto-artigo { font: 400 19px/1.75 "IBM Plex Serif", Georgia, serif; color: #dfe6f2; }
.texto-artigo h2 { font: 600 26px/1.25 var(--sans); color: var(--texto); margin: 48px 0 12px; letter-spacing: -.01em; }
.texto-artigo h3 { font: 600 20px/1.3 var(--sans); color: var(--texto); margin: 34px 0 8px; }
.texto-artigo p { margin: 0 0 20px; }
.texto-artigo a { color: var(--acento); text-underline-offset: 3px; }
.texto-artigo strong { color: var(--texto); }
.texto-artigo ul, .texto-artigo ol { padding-left: 24px; margin: 0 0 20px; }
.texto-artigo li { margin: 6px 0; }
.texto-artigo blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--acento); color: var(--texto); font-style: italic; font-size: 21px; }
.texto-artigo hr { border: 0; border-top: 1px solid var(--linha); margin: 40px 0; }
.texto-artigo code { font: 15px var(--mono); background: var(--bg-card); padding: 1px 6px; border-radius: 4px; }
.texto-artigo pre { background: var(--bg-card); border: 1px solid var(--linha); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
.texto-artigo pre code { background: none; padding: 0; }
.texto-artigo figure { margin: 30px 0; }
.texto-artigo figcaption { font: 400 13.5px/1.5 var(--mono); color: var(--texto-fraco); margin-top: 10px; }
.pe-artigo { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linha); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px var(--mono); color: var(--texto-fraco); }
.verificado { font: 400 13.5px var(--mono); color: var(--texto-fraco); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verificado a { color: var(--acento); }
.serie-nav { max-width: 760px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.serie-nav .post { padding: 16px 18px; }
.serie-nav .proximo { text-align: right; }
.serie-nav .meta { font: 500 12px var(--mono); color: var(--acento); letter-spacing: .06em; text-transform: uppercase; }
.serie-nav h3 { font-size: 17px; margin: 4px 0 0; }
.rodape-blog { max-width: var(--max); margin: 0 auto; padding: 30px 24px calc(50px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); }

@media (max-width: 760px) {
  .cartao { grid-template-columns: 1fr; }
  .blog-cabeca { gap: 24px; }
  .texto-artigo { font-size: 18px; }
  .lide { font-size: 19px; }
  .serie-nav { grid-template-columns: 1fr; }
  .serie-nav .proximo { text-align: left; }
}