/* Complementa /p/landing.css. Só o que o artigo precisa a mais: leitura longa,
   sumário, resposta direta, tabela, FAQ e caixa de autor. */
.artigo { max-width: 720px; }
.artigo h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.artigo h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; margin: 2.4rem 0 .8rem; letter-spacing: -.01em; scroll-margin-top: 80px; }
.artigo h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; scroll-margin-top: 80px; }
.artigo p, .artigo li { font-size: 1.03rem; line-height: 1.72; }
.artigo ul, .artigo ol { padding-left: 1.2rem; margin: .9rem 0; }
.artigo li { margin: .35rem 0; }
.artigo a { text-underline-offset: 3px; }
.artigo code { background: rgba(127,127,127,.14); padding: .12em .38em; border-radius: 5px; font-size: .92em; }
.artigo blockquote { border-left: 3px solid var(--brand, #0058DD); margin: 1.2rem 0; padding: .1rem 0 .1rem 1rem; opacity: .9; }

.meta-artigo { font-size: .88rem; opacity: .7; margin: 0 0 1.4rem; }

/* Resposta direta: é o trecho que buscador e IA citam, então vem antes de tudo
   e é visualmente destacado para o leitor achar a resposta sem rolar. */
.resposta-direta {
  font-size: 1.1rem; line-height: 1.65; font-weight: 500;
  border-left: 4px solid var(--brand, #0058DD);
  background: rgba(0, 88, 221, .05);
  padding: .95rem 1.1rem; border-radius: 0 10px 10px 0; margin: 0 0 1.8rem;
}

.sumario { border: 1px solid rgba(127,127,127,.25); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 2rem; }
.sumario-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; opacity: .6; margin: 0 0 .5rem; font-weight: 600; }
.sumario ul { list-style: none; padding: 0; margin: 0; }
.sumario li { margin: .3rem 0; font-size: .95rem; }

.tabela { overflow-x: auto; margin: 1.2rem 0; }
.tabela table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabela th, .tabela td { border: 1px solid rgba(127,127,127,.25); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.tabela th { background: rgba(127,127,127,.08); font-weight: 600; }

.faq details { border-bottom: 1px solid rgba(127,127,127,.22); padding: .85rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.faq details p { margin: .6rem 0 0; opacity: .92; }

.autor { display: flex; flex-direction: column; gap: .2rem; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; padding: 1rem 1.1rem; margin: 2.6rem 0 1.6rem; }
.autor-nome { font-weight: 700; }
.autor-cargo { font-size: .85rem; opacity: .7; }
.autor-bio { font-size: .93rem; line-height: 1.6; margin: .5rem 0 0; opacity: .9; }

.lista-artigos { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .6rem; }
.lista-artigos a { display: block; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; padding: .85rem 1rem; text-decoration: none; }
.lista-artigos a:hover { border-color: var(--brand, #0058DD); }
.lista-artigos .t { display: block; font-weight: 650; margin-bottom: .18rem; }
.lista-artigos .d { display: block; font-size: .9rem; opacity: .72; line-height: 1.5; }

.blog-rodape { max-width: 720px; margin: 3rem auto 2rem; padding: 1.4rem 1.2rem 0; border-top: 1px solid rgba(127,127,127,.2); font-size: .9rem; opacity: .8; text-align: center; }
.blog-rodape .mini { font-size: .82rem; opacity: .8; }

/* O landing.css poe margem generosa em section, boa pra landing e demais pro
   indice do blog, onde as secoes sao curtas. */
main.wrap > section { margin-bottom: 1.6rem; }
main.wrap > section > h2 { margin-bottom: .4rem; }