/* =========================================================
   Artigos — complementa styles.css e servico.css
   Só usa os tokens aprovados do :root de styles.css.
   ========================================================= */

/* ---------- Topo ---------- */
.article-hero {
  max-width: 860px;
  padding-top: 140px;
  padding-bottom: 88px;
}
.article-hero .hero__title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  text-wrap: balance;
}
.article-hero .hero__lead { max-width: 680px; }
.article__byline {
  margin-top: 28px;
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .58);
}
.article__byline strong { font-weight: 600; color: var(--gold-100); }

/* ---------- Corpo ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article > p, .article > ul { margin-top: 18px; }
.article p, .article li { color: var(--ink-soft); }
.article strong { color: var(--ink); font-weight: 600; }
.article h2 {
  margin-top: 56px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
}
.article h3 {
  margin-top: 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
}
.article h3 + p { margin-top: 8px; }
.article .checks { margin-top: 18px; }
.article .quote { margin-top: 36px; }

/* Resposta direta no início: é o trecho que buscadores e IAs citam. */
.article__summary {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius);
  background: var(--white);
}
.article__summary .kicker { margin-bottom: 4px; }
.article__summary .checks { margin-top: 12px; padding-top: 14px; }

/* Chamada para a avaliação no meio do texto. */
.article__cta {
  margin-top: 56px;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--navy);
  color: rgba(255, 255, 255, .76);
}
.article .article__cta h2 { margin-top: 0; color: var(--white); }
.article .article__cta p { margin-top: 12px; color: rgba(255, 255, 255, .76); }
.article__cta .btn { margin-top: 24px; }

/* Leia também (artigos e páginas relacionadas). */
.related { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.related ul { display: grid; gap: 12px; }
.related a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.related a:hover { color: var(--gold-700); }
.faq-aside .related { margin-top: 32px; }
.faq-aside .related a { font-size: .92rem; }

.article__note { margin-top: 44px; font-size: .82rem; }

/* ---------- Lista de artigos ---------- */
.article-list .card { display: flex; flex-direction: column; }
.article-list .card h2 {
  margin: 10px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
}
.article-list .card__link { margin-top: auto; padding-top: 22px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .article-hero { padding-top: 116px; padding-bottom: 72px; }
  .article__cta { padding: 28px 22px; }
  .article__summary { padding: 22px 20px; }
}