/* ═══════════════════════════════════════════════════════════════
   MOARA BPO — ESTILOS DO BLOG
   Reaproveita as variáveis de css/style.css (:root)
═══════════════════════════════════════════════════════════════ */

.breadcrumb {
  font-size: .78rem; color: var(--txt-mudo);
  margin: 7rem auto 0; max-width: 760px; padding: 0 5%;
}
.breadcrumb a { color: var(--txt-mudo); }
.breadcrumb a:hover { color: var(--ouro); }

/* ── Cabeçalho de artigo ─────────────────────────────────────── */
.article-header { max-width: 760px; margin: 0 auto; padding: 1.5rem 5% 2.5rem; }
.article-eyebrow {
  display: block; font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ouro); margin-bottom: 1rem;
}
.article-header h1 {
  font-family: var(--ft); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 1.25rem;
}
.article-lede { font-size: 1.05rem; color: var(--txt-mudo); line-height: 1.8; margin-bottom: 1.25rem; }
.article-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .85rem; color: var(--txt-mudo); }

/* ── Corpo do artigo ─────────────────────────────────────────── */
.article-body { max-width: 760px; margin: 0 auto; padding: 0 5% 3rem; }
.article-body h2 {
  font-family: var(--ft); font-weight: 300; font-size: 1.7rem;
  margin: 2.75rem 0 1rem; color: var(--txt);
}
.article-body h2 em, .article-body h3 em { font-style: italic; color: var(--ouro); }
.article-body h3 { font-size: 1.2rem; margin: 2rem 0 .85rem; color: var(--txt); font-weight: 500; }
.article-body p { margin-bottom: 1.15rem; color: var(--txt); line-height: 1.85; }
.article-body ul, .article-body ol { margin: 0 0 1.15rem 1.2rem; color: var(--txt); line-height: 1.85; }
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--ouro2); font-weight: 500; }
.article-body a { color: var(--ouro2); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--ouro); }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .92rem; }
.article-body th, .article-body td {
  text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--borda);
}
.article-body th { color: var(--ouro); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Perguntas rápidas (mini FAQ do artigo) ──────────────────── */
.article-quickfaq { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: 2rem; }
.article-quickfaq h2 { margin-top: 0; }
.qf-item { margin-bottom: 1.5rem; }
.qf-item strong { display: block; color: var(--txt); font-weight: 500; margin-bottom: .35rem; }
.qf-item p { color: var(--txt-mudo); margin: 0; }

/* ── Bloco de autoria ─────────────────────────────────────────── */
.author-box {
  display: flex; gap: 1.25rem; align-items: flex-start; max-width: 760px;
  margin: 3rem auto; padding: 1.75rem 5%; background: var(--preto2); border-radius: var(--radius);
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box strong { display: block; color: var(--txt); font-family: var(--ft); font-size: 1.1rem; font-weight: 400; }
.author-box span { display: block; color: var(--ouro); font-size: .8rem; margin: .15rem 0 .6rem; }
.author-box p { color: var(--txt-mudo); font-size: .88rem; margin: 0; line-height: 1.7; }

/* ── CTA de fechamento ────────────────────────────────────────── */
.article-cta {
  max-width: 760px; margin: 0 auto 5rem; padding: 2.5rem 5%;
  text-align: center; background: var(--preto2); border-radius: var(--radius);
}
.article-cta h2 { font-family: var(--ft); font-weight: 300; font-size: 1.5rem; margin-bottom: .75rem; }
.article-cta p { color: var(--txt-mudo); margin-bottom: 1.5rem; }

/* ── Listagem do blog ─────────────────────────────────────────── */
.blog-hero { max-width: 760px; margin: 8rem auto 0; padding: 0 5%; }
.blog-grid {
  max-width: 1200px; margin: 2.5rem auto 6rem; padding: 0 5%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem;
}
.blog-card {
  background: var(--preto2); border-radius: var(--radius); padding: 1.75rem;
  border: 1px solid var(--borda); transition: border-color .2s;
}
.blog-card:hover { border-color: var(--borda2); }
.blog-card-tag {
  display: inline-block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ouro); margin-bottom: .85rem;
}
.blog-card h2 { font-family: var(--ft); font-weight: 300; font-size: 1.4rem; margin-bottom: .75rem; }
.blog-card h2 a { color: var(--txt); }
.blog-card h2 a:hover { color: var(--ouro2); }
.blog-card p { color: var(--txt-mudo); font-size: .92rem; line-height: 1.7; margin-bottom: 1rem; }
.blog-card-date { font-size: .75rem; color: var(--txt-mudo); }