/* Complemento do site institucional/blog. O visual base (cores, fontes, cabeçalho, rodapé,
   formulário, seções) vem do CSS da própria landing, copiado pelo build. Aqui só entra o que a
   landing não tem: artigo, cards, autores. Classes com prefixo bl- para não colidir. */

/* o cabeçalho da landing é fixo; na landing o hero compensa, aqui o main compensa */
#main-content { padding-top: 72px; }
#main-content > section:first-child { scroll-margin-top: 72px; }

.bl-trilha { font-size: 13px; color: #5f6878; margin: 0 0 20px; }
.bl-trilha a { color: #5f6878; text-decoration: none; }
.bl-trilha a:hover { color: var(--gold); }

/* artigo */
.bl-artigo { max-width: 760px; margin: 0 auto; padding: 56px 0 80px; }
.bl-artigo-cabeca h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing: -.015em; margin: 14px 0 18px; color: var(--navy); }
.bl-linha-fina { font-size: 1.2rem; color: #2b3548; margin: 0 0 22px; line-height: 1.6; }
.bl-meta { font-size: 14px; color: #5f6878; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; margin-bottom: 36px; }
.bl-meta a { color: var(--navy); text-decoration: none; font-weight: 600; }
.bl-meta a:hover { color: var(--gold); }
.bl-corpo { color: #2b3548; font-size: 17px; line-height: 1.75; }
.bl-corpo h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 52px 0 14px; color: var(--navy); scroll-margin-top: 96px; }
.bl-corpo h3 { font-size: 1.45rem; margin: 32px 0 10px; color: var(--navy); }
.bl-corpo p { margin: 0 0 18px; }
.bl-corpo ul, .bl-corpo ol { padding-left: 1.3em; margin: 0 0 22px; }
.bl-corpo li { margin-bottom: 8px; }
.bl-corpo strong { color: var(--navy); }
.bl-tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 26px; }
.bl-corpo table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; box-shadow: 0 1px 2px rgba(8,16,42,.05), 0 12px 32px -14px rgba(8,16,42,.16); }
.bl-corpo th, .bl-corpo td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.bl-corpo th { background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.bl-pontos { background: #fff; border-left: 3px solid var(--gold); box-shadow: 0 1px 2px rgba(8,16,42,.05), 0 12px 32px -14px rgba(8,16,42,.16); padding: 24px 28px 8px; margin: 8px 0 36px; }
.bl-pontos h2 { font-size: 1.5rem; margin: 0 0 12px; }
.bl-cta { background: linear-gradient(180deg, #17265a 0%, #0b1430 100%); color: #fff; border-radius: 14px; padding: 30px 32px; margin: 40px 0; }
.bl-cta strong { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 500; display: block; margin-bottom: 8px; line-height: 1.2; }
.bl-cta p { color: rgba(255,255,255,.86); margin: 0 0 18px; }
.bl-autores { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 28px; display: grid; gap: 18px; }
.bl-autor { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(8,16,42,.05), 0 12px 32px -14px rgba(8,16,42,.16); }
.bl-autor h3 { font-size: 1.35rem; margin: 0 0 2px; }
.bl-autor h3 a { color: var(--navy); text-decoration: none; }
.bl-autor h3 a:hover { color: var(--gold); }
.bl-autor-cargo { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a6a1d; margin: 0 0 8px; }
.bl-autor p { margin: 0; font-size: 15px; color: #2b3548; }

/* índice do blog e página de autor */
.bl-topo { padding: 64px 0 24px; max-width: 820px; }
.bl-topo h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 12px 0 14px; color: var(--navy); }
.bl-topo p { font-size: 1.15rem; color: #2b3548; margin: 0; }
.bl-topo ul { padding-left: 1.2em; color: #2b3548; margin: 12px 0 0; }
.bl-topo li { margin-bottom: 8px; }
.bl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 24px 0 88px; }
.bl-card { background: #fff; border-radius: 14px; padding: 26px 26px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(8,16,42,.05), 0 12px 32px -14px rgba(8,16,42,.16); transition: transform .2s, box-shadow .2s; }
.bl-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(8,16,42,.06), 0 28px 56px -22px rgba(8,16,42,.32); }
.bl-card h2, .bl-card h3 { font-size: 1.6rem; margin: 10px 0; color: var(--navy); }
.bl-card p { font-size: 15.5px; color: #2b3548; margin: 0 0 18px; flex: 1; }
.bl-card-meta { font-size: 13px; color: #5f6878; }
.bl-card-ler { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a6a1d; margin-top: 6px; }
.bl-secao-titulo { font-size: 2rem; margin: 36px 0 0; color: var(--navy); }

/* aviso de erro do formulário (mesmo estilo do aviso de faturamento da landing) */
#blog-erro { margin-top: 12px; }

@media (max-width: 900px) {
  .bl-artigo { padding-top: 36px; }
  .bl-cta { padding: 24px 22px; }
}