/* Saida de build/make_blog.py (nao editar aqui). Mesmas fontes e cores do site (estilo.css). */
:root{
  --bg:#f4f7fb; --painel:#fff; --painel2:#edf2f8; --borda:#d5dfea; --borda2:#b7c6d6;
  --txt:#2b3a4a; --tit:#0f2a44; --apag:#56677a; --marinho:#0f2a44; --marinho2:#1d4a73;
  --link:#1b5e8c; --acento:#e8912c; --acento-hover:#f2a24a; --raio:12px;
  --sombra:0 1px 2px rgba(15,42,68,.06),0 6px 18px rgba(15,42,68,.07);
  --f-tit:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-txt:"Inter","Segoe UI",system-ui,Roboto,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--txt); font:17px/1.7 var(--f-txt);
     overflow-wrap:break-word}
a{color:var(--link)}
a:focus-visible{outline:3px solid var(--link); outline-offset:2px}
h1,h2,h3{color:var(--tit); line-height:1.25; font-family:var(--f-tit); font-weight:700;
         letter-spacing:-.01em}
img{max-width:100%; height:auto}

/* cabeçalho */
.topo{background:var(--marinho); border-bottom:3px solid var(--acento); color:#fff}
.topo .linha{max-width:1120px; margin:0 auto; padding:10px 16px; display:flex; align-items:center;
             gap:8px 18px; flex-wrap:wrap}
.marca{display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none;
       font:700 18px/1.2 var(--f-tit); letter-spacing:-.01em; margin-right:auto}
.marca img{width:32px; height:32px; border-radius:8px; display:block}
.menu{display:flex; align-items:center; gap:4px 14px; flex-wrap:wrap; font-size:15px; font-weight:600}
.menu a{color:#fff; text-decoration:none; padding:6px 2px}
.menu a:hover{text-decoration:underline}
.menu a.ativo{color:#ffd29b}
.menu a.lang{padding:4px 9px; border:1px solid rgba(255,255,255,.5); border-radius:8px; font-size:12px;
             letter-spacing:.04em}

/* conteúdo */
main{max-width:760px; margin:0 auto; padding:24px 16px 40px}
main.largo{max-width:1120px}
.migalha{font-size:14px; color:var(--apag); margin:0 0 10px}
.migalha a{color:var(--apag)}
.chapeu{display:inline-block; font:700 12px/1.4 var(--f-txt); letter-spacing:.08em; text-transform:uppercase;
        color:var(--marinho2); margin:0 0 6px}
.artigo h1{font-size:clamp(28px,5.4vw,42px); margin:0 0 12px}
.meta{font-size:14px; color:var(--apag); margin:0 0 20px}
.capa{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--raio);
      margin:0 0 24px; background:var(--painel2)}
.texto h2{font-size:clamp(22px,3.6vw,28px); margin:36px 0 10px}
.texto h3{font-size:19px; margin:24px 0 6px}
.texto p,.texto li{margin:0 0 14px}
.texto ol,.texto ul{padding-left:24px}
.texto hr{border:0; border-top:1px solid var(--borda); margin:28px 0}
.texto em{color:var(--apag)}
.tabela{overflow-x:auto; margin:18px 0; border:1px solid var(--borda); border-radius:10px; background:#fff}
.tabela table{border-collapse:collapse; width:100%; font-size:15px; line-height:1.5}
.tabela th,.tabela td{border-bottom:1px solid var(--borda); padding:8px 10px; text-align:left; vertical-align:top}
.tabela th{background:var(--painel2); color:var(--tit)}
.tabela tr:last-child td{border-bottom:0}
.video{position:relative; aspect-ratio:16/9; margin:18px 0; border-radius:var(--raio); overflow:hidden;
       background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.no-app,.chamada{background:var(--painel); border:1px solid var(--borda); border-radius:var(--raio);
                 box-shadow:var(--sombra); padding:20px 20px 22px; margin:30px 0}
.no-app{border-left:5px solid var(--marinho2)}
.no-app h2,.chamada h2{margin:0 0 8px; font-size:22px}
.no-app p,.chamada p{margin:0 0 12px}
.no-app-aula{font-weight:600; color:var(--tit)}
.chamada{background:var(--marinho); border-color:var(--marinho); color:#e6eef6}
.chamada h2{color:#fff}
.botao{display:inline-block; background:var(--acento); color:var(--marinho); font:700 15px/1.25 var(--f-txt);
       text-decoration:none; padding:12px 18px; border-radius:10px; margin:6px 10px 0 0}
.botao:hover{background:var(--acento-hover)}
.botao.contorno{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7)}
.botao.contorno:hover{background:rgba(255,255,255,.12)}
.relacionados h2{font-size:22px; margin:36px 0 12px}

/* cartões (índice e relacionados) */
.grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:0 0 30px}
.cartao{background:var(--painel); border:1px solid var(--borda); border-radius:var(--raio);
        box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column}
.cartao img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--painel2)}
.cartao .c-corpo{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1}
.cartao h3{font-size:19px; margin:0 0 8px}
.cartao h3 a{color:var(--tit); text-decoration:none}
.cartao h3 a:hover{text-decoration:underline}
.cartao p{margin:0 0 12px; font-size:15px; line-height:1.55}
.cartao .c-meta{margin-top:auto; font-size:13px; color:var(--apag)}
.lista-rel{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.lista-rel li{background:var(--painel); border:1px solid var(--borda); border-radius:10px; padding:12px 14px}
.lista-rel a{font-weight:600; text-decoration:none}
.lista-rel a:hover{text-decoration:underline}
.lista-rel span{display:block; font-size:14px; color:var(--apag); line-height:1.5}
.abre h1{font-size:clamp(30px,5.6vw,46px); margin:0 0 8px}
.abre p{font-size:18px; color:var(--apag); margin:0 0 26px; max-width:720px}
.secao-curso{font-size:24px; margin:10px 0 14px}

/* rodapé */
.rodape{background:var(--painel); border-top:1px solid var(--borda); color:var(--apag); font-size:14px;
        line-height:1.6}
.rodape .linha{max-width:1120px; margin:0 auto; padding:22px 16px 28px}
.rodape p{margin:0 0 6px}
.rodape a{color:var(--link)}
@media (max-width:480px){
  body{font-size:16.5px}
  .marca{font-size:17px}
  .menu{gap:2px 12px; font-size:14px}
  main{padding-top:18px}
}