/* Páginas de conteúdo (SEO, 17/10/2026): /alexandre-fininho/, /aulas/, /curso-de-bateria-gospel/,
   /aula-de-bateria-para-iniciantes/. Vem DEPOIS do painel.css e reaproveita os tokens, os botões
   (.btn-principal, .btn-sec) e o .doc das páginas de termos — aqui só o que elas não tinham. */
.doc.conteudo { max-width: 820px; }
.migalha { font-size: 13px; color: var(--texto-3); margin: -24px 0 18px; }
.migalha ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.migalha li + li::before { content: "›"; margin-right: 6px; color: var(--texto-3); }
.migalha a { color: var(--texto-2); text-decoration: none; }
.conteudo .linha-fina { font-size: 18px; color: var(--texto-2); line-height: 1.6; margin: 16px 0 8px; }
.conteudo h3 { font-size: 17px; font-weight: 800; margin: 24px 0 6px; color: var(--branco); }
.conteudo ol.passos { padding-left: 22px; display: grid; gap: 8px; margin-top: 10px; }
.conteudo ol.passos li { color: var(--texto-2); line-height: 1.7; }
.conteudo figure { margin: 28px 0; }
.conteudo figure img { width: 100%; height: auto; border-radius: 14px; display: block; }
.conteudo figcaption { font-size: 13px; color: var(--texto-3); margin-top: 8px; }
.tabela-rola { overflow-x: auto; margin-top: 12px; border: 1px solid var(--linha); border-radius: 12px; }
.conteudo table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.conteudo th, .conteudo td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; color: var(--texto-2); line-height: 1.5; }
.conteudo th { color: var(--branco); font-weight: 700; background: rgba(255, 255, 255, .03); }
.conteudo tr:last-child td { border-bottom: 0; }
/* .doc .nomes: o ".doc ul" do painel.css (display:grid) ganharia de um ".nomes" sozinho */
.doc .nomes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 12px; }
.doc .nomes li { border: 1px solid var(--linha-forte); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--branco); }
.chamada { margin: 40px 0 8px; padding: 24px; border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--vermelho-veu); }
.chamada p { color: var(--branco) !important; margin-bottom: 14px; }
.chamada .botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.conteudo details { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.conteudo summary { cursor: pointer; font-weight: 700; color: var(--branco); min-height: 28px; }
.conteudo details p, .conteudo details ul { margin-top: 10px; }
.curso-bloco { margin-top: 36px; padding-top: 8px; }
.curso-bloco h2 { margin-top: 0; }
.cat-meta { font-size: 13px; color: var(--texto-3); margin: 4px 0 10px; font-weight: 500; }
summary .cat-meta { margin: 0; }
.selo-gratis { display: inline-block; font-size: 11px; font-weight: 800; color: var(--ouro); border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: 1px; }
.conteudo .fonte { font-size: 13px; color: var(--texto-3); }
.conteudo .fonte a { color: var(--texto-2); }
@media (max-width: 520px) { .conteudo .linha-fina { font-size: 16px; } .chamada { padding: 18px; } }