/* ============================================================
   BIBLIOTECA · Layout base (header e capa)
   ============================================================ */

/* ---------- Header compacto da ferramenta ---------- */
.header--ferramenta .voltar {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cinza); text-decoration: none; transition: color .25s;
}
.header--ferramenta .voltar:hover, .header--ferramenta .voltar:focus-visible { color: var(--osso); }
.header-atalhos { display: flex; gap: 1.4rem; }
/* O cabeçalho tem quatro blocos: voltar, marca e três atalhos. Abaixo
   de 720px eles não cabem sem se espremer, então caem por ordem de
   utilidade — "Prova" é o que mais gente procura, e é o último a sair. */
@media (max-width: 720px) { .header-atalhos { gap: 1rem; } .header-atalhos a:first-child { display: none; } }
@media (max-width: 560px) { .header-atalhos a:nth-child(2) { display: none; } }
@media (max-width: 400px) {
  /* a 400px sobra só marca + prova; "Voltar" vira a seta, sem palavra —
     e a seta ganha 44px de alvo, senão fica um toque de 16px */
  .header--ferramenta .voltar span { display: none; }
  /* a seta fica encostada na margem e o alvo de 44px cresce para a
     direita — centralizar exigia margem negativa, que vazava a .wrap */
  .header--ferramenta .voltar { min-width: 44px; min-height: 44px; justify-content: flex-start; }
  .header .wrap { gap: .5rem; }
  .logo b { font-size: 1.15rem; }
  .logo svg { width: 24px; height: 24px; }
}

/* ---------- Capa ---------- */
.bib-capa {
  /* 72svh empurrava o conteúdo pra baixo da dobra no celular: quase
     uma tela de nada antes do título. Abaixo de 700px a capa passa a
     ter a altura do próprio conteúdo. */
  min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 120px; padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--carvao); position: relative; overflow: hidden;
}
.bib-capa::before {
  content: ""; position: absolute; right: -8%; top: -24%;
  width: 68vmin; height: 68vmin;
  background: radial-gradient(circle, rgba(255,74,0,.12), transparent 64%);
}
.bib-capa .label { display: block; margin-bottom: 1.2rem; }
.bib-capa h1 { font-size: clamp(2.8rem, 12vw, 9rem); }
.bib-capa h1 em { font-style: normal; color: var(--brasa); }
.bib-capa__sub { color: var(--cinza); max-width: 54ch; margin-top: 1.5rem; font-size: clamp(1rem, 2.4vw, 1.2rem); }

/* progresso de exploração */
.bib-progresso { margin-top: 2.4rem; max-width: 560px; }
.bib-progresso__linha {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cinza); margin-bottom: .7rem;
}
.bib-progresso__linha b { color: var(--brasa); font-weight: 400; }
.bib-progresso__trilho { height: 3px; background: var(--carvao); position: relative; }
.bib-progresso__fogo {
  position: absolute; inset: 0; width: 0%;
  background: var(--grad-fogo);
  box-shadow: 0 0 12px rgba(255,74,0,.6);
  transition: width .8s var(--ease);
}

/* substitui estilos que estavam inline no HTML */
.estante__semjs { color: var(--cinza); }
.estante__semjs a { color: var(--brasa); text-decoration: underline; text-underline-offset: 3px; }
.prova__intro h2 { margin-top: .8rem; }
.footer__base--so { border-top: 1px solid var(--carvao); padding-top: 1.6rem; }

@media (max-width: 700px) {
  .bib-capa { min-height: 0; padding-top: 96px; }
}