/* ===========================================================
   Aqui Tem Química — /discursivas
   Estilo compartilhado pelo hub e pelas páginas de banca.
   =========================================================== */

:root{
  --papel:#F1F4F3;
  --branco:#FFFFFF;
  --tinta:#11201D;
  --tinta-2:#4A5C57;
  --linha:#CBD6D2;
  --roxo:#5B2A86;
  --ambar:#B57A00;
  --verde:#1B6B4C;
  --urgente:#B3261E;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:20px; line-height:1.55;
}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
h1,h2,h3{font-family:"Bricolage Grotesque","Source Sans 3",sans-serif; line-height:1.1; margin:0}
a{color:var(--roxo)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--roxo); outline-offset:3px}
img,svg{max-width:100%}

/* ---------- topo ---------- */
header.topo{padding:26px 0 6px}
.marca{font-size:17px; color:var(--tinta-2); text-decoration:none}
.volta{font-size:17px; color:var(--tinta-2); text-decoration:none}
.hero{padding:16px 0 32px; border-bottom:2px solid var(--tinta)}
.hero h1{font-size:clamp(38px,9.5vw,64px); font-weight:800; letter-spacing:-.02em}
.hero p.linha-fina{font-size:21px; max-width:44ch; color:var(--tinta-2); margin:16px 0 0}

.conta{display:flex; align-items:baseline; gap:14px; margin:24px 0 8px}
.conta .num{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(76px,22vw,128px); line-height:.82;
  font-variant-numeric:tabular-nums; color:var(--roxo);
}
.conta .rot{font-size:20px; max-width:12ch}

.ficha{margin-top:20px; border-top:1px solid var(--linha); display:grid; grid-template-columns:repeat(2,1fr)}
.ficha div{padding:13px 0; border-bottom:1px solid var(--linha)}
.ficha dt{font-size:16px; color:var(--tinta-2); margin:0}
.ficha dd{margin:2px 0 0; font-size:20px; font-weight:600}

/* ---------- seções ---------- */
section{padding:38px 0; border-bottom:1px solid var(--linha)}
section > h2{font-size:clamp(28px,6.5vw,38px); font-weight:800; letter-spacing:-.01em}
.sub{color:var(--tinta-2); font-size:19px; margin:8px 0 24px; max-width:48ch}

/* ---------- calendário do hub ---------- */
.prova{
  display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start;
  background:var(--branco); border:1px solid var(--linha); border-left:8px solid var(--linha);
  padding:18px 20px; margin-bottom:14px; text-decoration:none; color:inherit;
}
.prova:hover{border-color:var(--roxo)}
.prova.proxima{border-color:var(--roxo); border-left-color:var(--roxo)}
.prova.passada{opacity:.5}
.prova .faltam{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; line-height:.9;
  font-size:44px; color:var(--roxo); font-variant-numeric:tabular-nums; text-align:right;
}
.prova.proxima .faltam{color:var(--urgente)}
.prova .faltam small{display:block; font-family:"Source Sans 3",sans-serif; font-weight:400; font-size:15px; color:var(--tinta-2); margin-top:4px}
.prova h3{font-size:25px; font-weight:700; margin-bottom:2px}
.prova .quando{font-size:17px; color:var(--tinta-2); margin:0 0 8px}
.prova .oque{font-size:18px; margin:0}
.prova .estado{font-size:16px; color:var(--verde); font-weight:600; margin:8px 0 0}
.prova .estado.vazio{color:var(--tinta-2); font-weight:400; font-style:italic}

/* ---------- questões ---------- */
.questao{
  background:var(--branco); border:1px solid var(--linha); border-left:8px solid var(--linha);
  padding:22px 20px; margin-bottom:18px;
}
.questao.hoje{border-color:var(--roxo); border-left-color:var(--roxo)}
.questao.pronta{border-left-color:var(--verde)}
.cabeca{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:2px}
.cabeca .ord{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:34px; line-height:1}
.cabeca .quando{font-size:16px; color:var(--tinta-2)}
.questao h3{font-size:24px; font-weight:600; margin:6px 0 14px}
.enunciado{font-family:"Source Serif 4",Georgia,serif; font-size:19px; line-height:1.6; text-align:justify; margin:0 0 14px}
.dados{background:var(--papel); border:1px solid var(--linha); padding:12px 14px; font-size:18px; margin:0 0 14px}
.dados b{font-weight:600}
table.tab{border-collapse:collapse; width:100%; margin:0 0 14px; font-size:18px}
table.tab th,table.tab td{border:1px solid var(--tinta); padding:7px 8px; text-align:center}
table.tab th{background:var(--papel); font-weight:600}
figure{margin:0 0 14px; text-align:center}
figcaption{font-size:16px; color:var(--tinta-2); margin-top:4px}
.item{font-family:"Source Serif 4",Georgia,serif; font-size:19px; line-height:1.6; margin:0 0 12px}
.item b{font-family:"Source Sans 3",sans-serif; font-weight:600; color:var(--roxo)}
.linhas{display:none}

details{border-top:1px solid var(--linha); margin-top:16px; padding-top:12px}
summary{cursor:pointer; font-weight:600; font-size:18px; color:var(--roxo); list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ "}
details[open] summary::before{content:"▾ "}
.gab{font-size:18px; margin-top:10px}
.gab p{margin:0 0 8px}
.conta-passo{
  font-family:ui-monospace,"Courier New",monospace; font-size:17px; line-height:1.7;
  background:var(--papel); border-left:3px solid var(--tinta); padding:10px 12px; margin:0 0 8px;
}

.acao{
  display:inline-block; font-weight:600; font-size:18px; text-decoration:none; cursor:pointer;
  padding:11px 18px; border:2px solid var(--roxo); color:var(--roxo); background:var(--branco);
}
.acao:hover{background:var(--roxo); color:#fff}
.espera{font-size:17px; color:var(--tinta-2); font-style:italic; margin:0}
.video-slot{margin-top:16px}
.selo{display:inline-block; font-size:15px; font-weight:600; padding:3px 9px; border:1px solid var(--roxo); color:var(--roxo)}

.vazio{
  background:var(--branco); border:1px dashed var(--linha); padding:26px 22px; text-align:center;
  color:var(--tinta-2); font-size:19px;
}

/* ---------- vídeo ---------- */
.video-caixa{position:relative; padding-top:56.25%; background:#000; margin-bottom:16px}
.video-caixa iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- avisos ---------- */
.aviso{background:var(--branco); border:1px solid var(--linha); border-top:6px solid var(--ambar); padding:20px}
.aviso h2{font-size:26px; margin-bottom:10px}
.aviso p{font-size:19px; margin:0 0 10px}
.aviso p:last-child{margin:0}

footer{padding:32px 0 56px; font-size:17px; color:var(--tinta-2)}

@media (max-width:420px){
  body{font-size:19px}
  .ficha{grid-template-columns:1fr}
  .questao{padding:18px 15px}
  .prova{grid-template-columns:72px 1fr; gap:14px; padding:16px}
  .prova .faltam{font-size:36px}
}

/* ---------- impressão: só o caderno ---------- */
@media print{
  @page{size:A4; margin:18mm 16mm}
  body{background:#fff; font-size:11.5pt}
  .wrap{max-width:none; padding:0}
  .naoimprime,.hero .conta,.video-slot,details,.acao,.sub,header.topo{display:none !important}
  .hero{border-bottom:2px solid #000; padding-top:0}
  .hero h1{font-size:22pt}
  section{padding:0; border:0}
  section#questoes > h2{display:none}
  .questao{border:0; border-top:1.5px solid #000; padding:14px 0 0; margin:0 0 18px; page-break-inside:avoid}
  .questao h3{font-size:12pt}
  .cabeca .ord{font-size:16pt}
  .enunciado,.item{font-size:11pt}
  .linhas{display:block; border:1px solid #999; height:88px; margin:0 0 14px}
  .aviso{border:1px solid #000; page-break-inside:avoid}
  a{color:#000; text-decoration:none}
}