/* Base visual das paginas de conteudo (aulas, provas, guias).
 *
 * A home e a pagina de Arrais ainda carregam o CSS no proprio arquivo: elas
 * divergiram (escala do h1, cabecalho, heroi) e sao as duas que convertem hoje,
 * entao ficaram de fora desta extracao. Os tokens e os componentes aqui sao os
 * mesmos; quando alguma das duas precisar de manutencao, vale trazer para ca.
 */

:root{
  /* marca: iguais nos dois temas */
  --navy:#072B38; --on-navy:#FFFFFF; --teal:#0B7F92; --teal-2:#3AB0C2; --on-teal:#FFFFFF; --teal-hover:#0a6f80;
  /* texto e superficies: mudam por tema */
  --ink:#0F2A33; --muted:#51646D; --faint:#657279; --strong:#072B38;
  --bg:#FFFFFF; --bg-2:#F4F8F9; --line:#E2E9EC; --surface:#FFFFFF;
  --ok:#0F8A5F; --ok-bg:#E8F6F0; --err:#B3261E; --err-bg:#FBECEA;
  --warn:#B4741A; --warn-bg:#FDF4E7; --law:#4B4FA8; --law-bg:#EEEFFA;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:72px;
  --r-1:10px; --r-2:16px; --r-3:24px;
  --maxw:1140px; --textw:72ch;
  --shadow:0 1px 2px rgba(7,43,56,.05), 0 8px 24px -12px rgba(7,43,56,.18);
}
*{box-sizing:border-box}
/* O `display` dos botoes vence o `hidden` do navegador (regra de autor ganha da
   do agente), e o botao da loja comeca escondido esperando o lojas.js. Sem isto
   ele aparece no desktop apontando para a App Store. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none !important; transition:none !important}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal-2); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); padding:12px 16px; z-index:100}
.skip:focus{left:12px; top:12px}

/* tipografia */
h1,h2,h3,h4{line-height:1.15; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(30px,4.6vw,46px); font-weight:700}
h2{font-size:clamp(24px,3.2vw,34px); font-weight:700}
h3{font-size:20px; font-weight:600}
.lead{font-size:clamp(17px,2.1vw,21px); color:var(--muted); max-width:62ch}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--teal)}
.small{font-size:14px; color:var(--muted)}
.tiny{font-size:13px; color:var(--faint)}

/* cabecalho */
header{position:sticky; top:0; z-index:50; background:#072B38; border-bottom:1px solid rgba(255,255,255,.10)}
.nav{display:flex; align-items:center; gap:var(--sp-3); height:68px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:#FFFFFF; letter-spacing:-.01em; min-height:44px}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px}
.nav .entrar{color:rgba(255,255,255,.82); font-size:15px; font-weight:600; display:inline-flex; align-items:center; min-height:44px; margin-left:auto}
.nav .entrar:hover{color:#FFFFFF; text-decoration:underline}
.nav .cta{margin-left:var(--sp-2); white-space:nowrap}
@media (max-width:400px){ .nav{gap:var(--sp-2)} .nav .cta{padding:0 14px; font-size:15px} }
@media (max-width:360px){ .nav .brand span{display:none} }

/* botoes */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:var(--r-1);
  font-weight:600; font-size:16px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; text-align:center;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{background:var(--teal); color:var(--on-teal)}
.btn-primary:hover{background:var(--teal-hover); text-decoration:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal); text-decoration:none}
.btn-light{background:var(--on-navy); color:var(--navy)}
.btn-light:hover{background:#e9f2f4; text-decoration:none}
.btn-sm{min-height:44px; font-size:15px; padding:0 16px}

section{padding:var(--sp-5) 0}
.section-head{max-width:64ch; margin-bottom:var(--sp-4)}
.section-head h2{margin-bottom:12px}

/* trilha de navegacao */
.migalhas{padding:var(--sp-2) 0 0; font-size:14px; color:var(--faint)}
.migalhas ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.migalhas li+li::before{content:"/"; margin-right:6px; color:var(--line)}
.migalhas a{color:var(--muted)}

/* topo das paginas de conteudo */
.capa{padding:var(--sp-4) 0 var(--sp-5); background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.capa h1{margin:10px 0 16px}
.capa .meta{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); font-size:14px; color:var(--faint)}
.capa .meta b{color:var(--strong); font-weight:600}

/* corpo de texto */
.prosa{max-width:var(--textw)}
.prosa > * + *{margin-top:var(--sp-2)}
.prosa h2{margin-top:var(--sp-5); font-size:clamp(22px,2.6vw,28px)}
.prosa h3{margin-top:var(--sp-4)}
.prosa p{margin:0; color:var(--ink)}
.prosa ul,.prosa ol{margin:0; padding-left:22px; display:grid; gap:8px}
.prosa li{color:var(--ink)}
.prosa strong{color:var(--strong)}

/* caixas de destaque: lei, atencao, dica, info */
.caixa{border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:0 var(--r-2) var(--r-2) 0; padding:16px 18px; background:var(--bg-2)}
.caixa h4{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin:0 0 8px; font-weight:700}
.caixa p{margin:0; font-size:16px; color:var(--ink)}
.caixa-law{border-left-color:var(--law); background:var(--law-bg)} .caixa-law h4{color:var(--law)}
.caixa-warn{border-left-color:var(--warn); background:var(--warn-bg)} .caixa-warn h4{color:var(--warn)}
.caixa-tip{border-left-color:var(--ok); background:var(--ok-bg)} .caixa-tip h4{color:var(--ok)}

/* macete de memorizacao */
.macete{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px dashed var(--teal); border-radius:var(--r-2); padding:14px 16px}
.macete svg{width:22px; height:22px; color:var(--teal); flex:none; margin-top:2px}
.macete p{margin:0; font-size:16px}

/* tabelas */
.tabela{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface)}
.tabela table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
.tabela th,.tabela td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tabela th{background:var(--bg-2); color:var(--strong); font-weight:600; font-size:14px}
.tabela tr:last-child td{border-bottom:none}

/* resumo da aula */
.resumo{background:var(--navy); color:#D7E5EA; border-radius:var(--r-3); padding:var(--sp-3) var(--sp-4)}
.resumo h2{color:var(--on-navy); font-size:21px; margin:0 0 14px}
.resumo ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.resumo li{display:flex; gap:10px; align-items:flex-start; font-size:16px}
.resumo svg{width:20px; height:20px; color:var(--teal-2); flex:none; margin-top:3px}

/* questao resolvida */
.questao{border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); overflow:hidden}
.questao + .questao{margin-top:var(--sp-2)}
.questao-topo{padding:16px 18px 0; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.questao-topo .num{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
.questao-topo .nivel{font-size:12px; color:var(--faint)}
.questao-enunciado{padding:8px 18px 0; margin:0; font-weight:600; color:var(--strong); white-space:pre-line}
.questao ol{list-style:none; counter-reset:alt; padding:14px 18px 0; margin:0; display:grid; gap:6px}
.questao ol li{counter-increment:alt; display:flex; gap:10px; font-size:16px; color:var(--muted)}
.questao ol li::before{
  content:counter(alt,upper-alpha); flex:none;
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--muted);
}
.questao ol li.certa{color:var(--ink); font-weight:500}
.questao ol li.certa::before{background:var(--ok); border-color:var(--ok); color:#fff}
.questao details{border:none; border-top:1px solid var(--line); border-radius:0; margin-top:16px; background:var(--bg-2)}
.questao summary{padding:14px 18px; font-size:15px}
.questao details p{padding:0 18px 16px; font-size:15px}
.questao .norma{display:block; padding:0 18px 16px; font-size:13px; font-weight:600; color:var(--teal)}

/* ficha de numeros */
.ficha{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2)}
.ficha div{border:1px solid var(--line); border-radius:var(--r-2); padding:18px; background:var(--surface)}
.ficha b{display:block; font-size:24px; letter-spacing:-.02em; color:var(--strong)}
.ficha span{font-size:14px; color:var(--muted)}
@media (max-width:760px){ .ficha{grid-template-columns:1fr 1fr} }

/* grade de cartoes (indices de aulas e provas) */
.cartoes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2)}
.cartao{display:block; border:1px solid var(--line); border-radius:var(--r-2); padding:18px; background:var(--surface); color:var(--ink)}
.cartao:hover{border-color:var(--teal); text-decoration:none}
.cartao b{display:block; font-size:17px; color:var(--strong); margin-bottom:4px}
.cartao span{font-size:14px; color:var(--muted)}
@media (max-width:900px){ .cartoes{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .cartoes{grid-template-columns:1fr} }

/* etiquetas de assunto */
.assuntos{display:flex; flex-wrap:wrap; gap:8px}
.assunto{border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:14px; font-weight:500; color:var(--muted); background:var(--surface)}
a.assunto:hover{border-color:var(--teal); color:var(--teal); text-decoration:none}

/* faixa com as normas de origem */
.norms{background:var(--navy); color:#D7E5EA; padding:var(--sp-3) 0}
.norms p{margin:0; font-size:15px}
.norms strong{color:var(--on-navy)}

/* aviso de material independente */
.aviso{border:1px solid var(--warn); background:var(--warn-bg); border-radius:var(--r-2); padding:16px 18px; max-width:var(--textw)}
.aviso p{margin:0; font-size:15px; color:var(--ink)}
.aviso p + p{margin-top:8px}

/* chamada para o app */
.chamada{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-4); text-align:center}
.chamada h2{margin-bottom:12px}
.chamada .lead{margin:0 auto}
.chamada .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:var(--sp-3)}

/* proxima e anterior */
.vizinhos{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2)}
.vizinho{border:1px solid var(--line); border-radius:var(--r-2); padding:16px; background:var(--surface); color:var(--ink)}
.vizinho:hover{border-color:var(--teal); text-decoration:none}
.vizinho span{display:block; font-size:13px; color:var(--faint); margin-bottom:4px}
.vizinho b{font-size:16px; color:var(--strong); font-weight:600}
.vizinho.fim{text-align:right}
@media (max-width:620px){ .vizinhos{grid-template-columns:1fr} .vizinho.fim{text-align:left} }

/* faq */
.faq{display:grid; gap:10px; max-width:820px}
details{border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface)}
summary{cursor:pointer; padding:18px 20px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; min-height:56px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:22px; color:var(--teal); font-weight:400; line-height:1}
details[open] summary::after{content:"−"}
details p{margin:0; padding:0 20px 20px; color:var(--muted); font-size:15px}
details p + p{padding-top:0}

/* faixa de quem chegou pelo link de um instrutor */
.convite{display:none; background:var(--teal); color:var(--on-teal)}
.convite.on{display:block}
.convite p{margin:0; padding:9px 0; font-size:14px; line-height:1.4; text-align:center}
.convite strong{font-weight:700}

footer{border-top:1px solid var(--line); padding:var(--sp-5) 0 var(--sp-4); font-size:15px; margin-top:var(--sp-5)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-4)}
footer h4{font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 12px; font-weight:600}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:2px}
footer ul a{display:inline-flex; align-items:center; min-height:44px}
footer a{color:var(--muted)}
footer a:hover{color:var(--teal)}
footer .brand{color:var(--strong)}
.legal{margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); color:var(--faint); font-size:13px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1418; --bg-2:#131C22; --ink:#E6EDF0; --muted:#A5B5BC; --faint:#8FA1A9;
    --line:#22303A; --surface:#151E24; --strong:#E6EDF0;
    --navy:#04222D; --teal:#3AB0C2; --teal-2:#5CC6D6; --on-teal:#04222D; --teal-hover:#5CC6D6;
    --ok:#4ADE9B; --ok-bg:#12302A; --err:#F2808A; --err-bg:#3A1B1F;
    --warn:#E8B465; --warn-bg:#33270F; --law:#A5A8F0; --law-bg:#1B1D3A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  }
  header{background:#072B38}
  .btn-light{background:var(--teal); color:var(--on-teal)}
  .resumo{background:#0B2730}
}