/* Site estático — versão web */
html { font-size: 16px; }
body { font-family: Georgia, "Times New Roman", serif; line-height: 1.45; color: #1a1a1a; margin: 0; background: #fff; }
* { box-sizing: border-box; }

/* Layout centralizado */
main { max-width: 960px; margin: 0 auto; padding: 16px; }
h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; color: #12304a; }
h1 { font-size: 2.5rem; margin: 2rem 0 0.5rem 0; }
h2 { font-size: 1.75rem; border-bottom: 2px solid #12304a; padding-bottom: 0.3rem; margin-top: 1.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.1rem; margin: 1rem 0 0.3rem 0; }

/* Índice: cartões + PDFs */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.cartao { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; background: #f9f9f9; text-decoration: none; color: inherit; transition: all 0.2s; }
.cartao:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-2px); }
.cartao h3 { margin-top: 0; color: #12304a; }
.cartao p { color: #666; margin: 0.5rem 0 0; }

.pdfs { background: #f0f4f8; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; }
.pdfs h3 { margin-top: 0; }
.pdf-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.pdf-item { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 1rem; text-decoration: none; color: inherit; transition: all 0.2s; }
.pdf-item:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.pdf-item-nome { font-weight: 600; color: #12304a; margin-bottom: 0.3rem; }
.pdf-item-tamanho { font-size: 0.9rem; color: #666; }

p { margin: 1rem 0; text-align: justify; }
ul, ol { margin: 0.5rem 0 0.5rem 1.5rem; }
li { margin: 0.3rem 0; }

/* Página de matéria: cabeçalho + sumário */
header.materia { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #ddd; margin-bottom: 1.5rem; }
.voltar { display: inline-block; padding: 0.5rem 1rem; background: #12304a; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem; }
.voltar:hover { background: #0f2336; }

nav.sumario { background: #f9f9f9; border-left: 4px solid #12304a; padding: 1.5rem; margin: 1.5rem 0; border-radius: 4px; }
nav.sumario h3 { margin-top: 0; }
nav.sumario ol { margin: 0.5rem 0; padding-left: 1.5rem; }
nav.sumario a { color: #12304a; text-decoration: none; }
nav.sumario a:hover { text-decoration: underline; }

/* Tópicos */
section.topico { margin: 3rem 0; }
section.topico h2 { padding-top: 1rem; }

/* Player de vídeo */
.video-player { width: 100%; max-width: 860px; aspect-ratio: 16/9; border: 1px solid #ddd; border-radius: 4px; margin: 1.5rem 0; }

/* Tabela de vídeos */
div.tab-videos table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 0.4rem 0 0.8rem 0; }
div.tab-videos th, div.tab-videos td { border-bottom: 1px solid #cfcfcf; padding: 0.4rem 0.6rem; vertical-align: top; text-align: left; }
div.tab-videos th { border-bottom: 2px solid #999; background: #f9f9f9; font-weight: 600; }
div.tab-videos td:last-child { white-space: nowrap; }
div.tab-videos a { color: #12304a; }
div.tab-videos a:hover { text-decoration: underline; }

.nota-videos { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }

/* Lista de vídeos */
.videos-completos { margin: 1.5rem 0; }
.videos-completos h4 { margin: 0.8rem 0 0.5rem 0; font-size: 1rem; }
.video-link { display: block; margin: 0.5rem 0; }
.video-link a { color: #12304a; text-decoration: none; }
.video-link a:hover { text-decoration: underline; }
.video-link-canal { font-size: 0.85rem; color: #666; }

/* Rodapé */
footer { text-align: center; padding: 2rem 0 1rem 0; border-top: 1px solid #ddd; margin-top: 3rem; font-size: 0.9rem; color: #666; }

/* Responsivo */
@media (max-width: 600px) {
    main { padding: 8px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.3rem; }
    .cartoes { grid-template-columns: 1fr; }
    .pdf-lista { grid-template-columns: 1fr; }
    header.materia { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .video-player { max-width: 100%; }
    table { font-size: 0.85rem; }
    div.tab-videos th, div.tab-videos td { padding: 0.3rem; }
}