/* ==========================================================================
   POAB — Preparatório OAB · folha de estilo própria (sem CDN, sem framework)
   Paleta: vinho, dourado e areia — universo do Exame de Ordem.
   ========================================================================== */

:root {
  --vinho: #5b1220;
  --vinho-claro: #7c1e30;
  --vinho-escuro: #3a0b14;
  --ouro: #b98f34;
  --ouro-claro: #e0c179;
  --ouro-fraco: #f0e2c2;
  --areia: #f7f1e7;
  --areia-2: #fdfaf5;
  --areia-3: #eee3d1;
  --tinta: #2b2119;
  --tinta-suave: #6b5c4b;
  --verde: #2c6b45;
  --verde-fraco: #e6f1e9;
  --vermelho: #a3222b;
  --vermelho-fraco: #fbe9e9;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 14px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(43, 33, 25, .06), 0 10px 24px -14px rgba(43, 33, 25, .35);
  --sombra-forte: 0 18px 40px -22px rgba(58, 11, 20, .55);
  --borda: 1px solid rgba(185, 143, 52, .32);
  --largura: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--tinta);
  background-color: var(--areia);
  background-image:
    radial-gradient(1100px 460px at 12% -8%, rgba(185, 143, 52, .16), transparent 62%),
    radial-gradient(900px 420px at 96% 4%, rgba(91, 18, 32, .10), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
p { margin: 0 0 .9rem; }
a { color: var(--vinho); text-underline-offset: 3px; text-decoration-color: rgba(185, 143, 52, .7); }
a:hover { color: var(--vinho-claro); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--areia-3); padding: .1em .35em; border-radius: 5px; }

.pular {
  position: absolute; left: -9999px; top: 0; background: var(--vinho); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--raio-p) 0;
}
/* `top: 16px` (não 0): a `.faixa-ouro` é uma tarja dourada de 4px colada no
   topo de QUALQUER página (poab.css, logo abaixo) — com o link começando
   exatamente em y=0, o halo do foco (8px, ver `.pular:focus-visible` abaixo)
   tocava essa tarja em vez do vinho do `.topo`, e dourado-contra-vinho-escuro
   nesse ponto específico reprovava 3:1 (medido 1.67:1). O halo alcança até
   8px para fora da caixa — com o link começando a 16px, a borda do halo pára
   em 16-8=8px, 4px de folga depois do fim da tarja (que vai até 4px). */
.pular:focus { left: 0; top: 16px; }

/* Anel de foco de DUAS cores (WCAG 2.1 SC 1.4.11, mínimo 3:1). O anel de UMA
   cor só (dourado, `--ouro`) reprovava contraste contra vários fundos claros
   do app — o dourado é próximo demais da areia e dos cartões claros. O anel
   escuro por fora + halo claro por dentro (que preenche o vão do offset)
   garante que a cor que toca o fundo de verdade é sempre a de MAIOR
   contraste disponível: escura sobre claro, invertida sobre fundo vinho
   (ver as seções abaixo — .topo, .rodape, .hero, .numeros, .fechamento —
   que já pintam fundo escuro em toda página, e landing.css:672 que faz o
   mesmo para `.corpo-vidro`, regra aprovada da home que este bloco não
   sobrescreve: ela é mais específica e continua vencendo lá). */
:focus-visible {
  outline: 3px solid var(--vinho-escuro);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--areia-2);
}

/* Fundo escuro (vinho): anel invertido — claro por fora, vinho por dentro —
   para o anel continuar 3:1 mesmo onde o padrão (escuro sobre escuro)
   desapareceria contra o próprio fundo. Seletores são as seções que já
   pintam fundo vinho em qualquer página (não só a home). */
.topo :focus-visible,
.rodape :focus-visible,
.hero :focus-visible,
.numeros :focus-visible,
.fechamento :focus-visible {
  outline-color: var(--areia-2);
  box-shadow: 0 0 0 2px var(--vinho-escuro);
}

/* `.pular` (pular para o conteúdo) não é descendente do `.topo` — é irmão
   dele no HTML, mas fica visualmente por cima do vinho quando ganha foco
   (mesmo caso do `.corpo-vidro .pular:focus-visible` em landing.css). Halo
   de 8px (bem mais largo que o padrão de 2px): medido que o selo "P" do
   cabeçalho fica a ~1px do anel nesta largura de texto — um halo estreito
   deixava o claro do anel encostar direto no dourado do selo (que usa
   `fill` de SVG, imune ao truque de medir com texto invisível). 8px > o
   alcance do anel (offset 2 + 3 de espessura = 5) garante uma faixa sólida
   de vinho-escuro entre o anel e QUALQUER vizinho, selo incluso. */
.pular:focus-visible {
  outline-color: var(--areia-2);
  box-shadow: 0 0 0 8px var(--vinho-escuro);
}

.miudo { font-size: .86rem; color: var(--tinta-suave); }
.sobrenome {
  font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro); margin: 0 0 .35rem;
}
.chamada { font-size: 1.08rem; max-width: 54ch; color: #4a3c30; }
.chamada-curta { color: var(--tinta-suave); max-width: 62ch; margin-bottom: 0; }

/* ------------------------------------------------------------------ topo */

.topo { background: linear-gradient(160deg, var(--vinho) 0%, var(--vinho-escuro) 100%); color: #f7ece0; }
.faixa-ouro { height: 4px; background: linear-gradient(90deg, var(--ouro-claro), var(--ouro) 45%, var(--vinho-claro) 46%, var(--ouro) 60%, var(--ouro-claro)); }
.topo-interno {
  max-width: var(--largura); margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.selo-anel { fill: none; stroke: var(--ouro-claro); stroke-width: 1.6; }
.selo-anel-fino { fill: rgba(224, 193, 121, .12); stroke: rgba(224, 193, 121, .55); stroke-width: .8; }
.selo-texto { font-family: var(--serif); font-size: 20px; fill: var(--ouro-claro); font-weight: 700; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-texto strong { font-family: var(--serif); font-size: 1.42rem; letter-spacing: .06em; }
.marca-texto small { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(240, 226, 194, .8); }

.menu { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.menu a { color: rgba(247, 236, 224, .92); text-decoration: none; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; border-bottom-color: var(--ouro); }
.menu a.btn { border-bottom: 0; }
.linha-sair { margin: 0; }
.menu .btn-texto { color: rgba(247, 236, 224, .8); }
.menu .btn-texto:hover { color: #fff; }
.etiqueta-prova {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-claro);
  border: 1px solid rgba(224, 193, 121, .45); padding: .25rem .6rem; border-radius: 999px;
}

/* ------------------------------------------------------------- estrutura */

.pagina { width: 100%; max-width: 840px; margin: 0 auto; padding: 2.2rem 1.25rem 3rem; flex: 1; }
.pagina-larga { max-width: var(--largura); }
.pagina-estreita { max-width: 520px; }
.pagina-prova { max-width: 880px; padding-top: 1rem; }

.rodape { background: var(--vinho-escuro); color: rgba(240, 226, 194, .78); margin-top: auto; }
.rodape-interno { max-width: var(--largura); margin: 0 auto; padding: 1.6rem 1.25rem; }
.rodape p { margin: 0 0 .3rem; font-size: .88rem; }
.rodape .miudo { color: rgba(240, 226, 194, .72); }
.rodape a { color: var(--ouro-claro); text-decoration-color: rgba(224, 193, 121, .55); }
.rodape a:hover, .rodape a:focus-visible { color: var(--ouro-fraco); }

.cabecalho-pagina {
  display: flex; gap: 1.5rem; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.6rem;
}
.cabecalho-pagina h1 { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  padding: .72rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-vinho { background: var(--vinho); color: #fdf6ea; box-shadow: var(--sombra); }
.btn-vinho:hover { background: var(--vinho-claro); color: #fff; }
.btn-ouro { background: linear-gradient(180deg, var(--ouro-claro), var(--ouro)); color: #3a2a08; box-shadow: var(--sombra); }
.btn-ouro:hover { filter: brightness(1.05); color: #33240a; }
/* `.btn-vinho`/`.btn-ouro` já têm sombra ambiente própria (`var(--sombra)`,
   acima) na MESMA especificidade do `:focus-visible` genérico lá em cima —
   por ordem no arquivo (a sombra ambiente vem depois), ela ganha e o halo do
   foco nunca aparecia fora de seção escura (medido: `box-shadow` no foco
   continuava a sombra ambiente, sem nenhum halo). Dentro de `.topo` etc. o
   `:focus-visible` descendente já resolve sozinho (mais específico, 2
   classes contra 1) — aqui é só o caso de fora, sobre cartão claro. */
.btn-vinho:focus-visible, .btn-ouro:focus-visible {
  box-shadow: 0 0 0 2px var(--areia-2);
}
/* Dentro de seção escura o par tem que inverter (halo escuro), como o resto
   do app — precisa de UMA classe a mais que a regra logo acima
   (.topo .btn-ouro:focus-visible vs .btn-ouro:focus-visible) para ganhar
   dela por especificidade, não por ordem. */
.topo .btn-vinho:focus-visible, .topo .btn-ouro:focus-visible,
.rodape .btn-vinho:focus-visible, .rodape .btn-ouro:focus-visible,
.hero .btn-vinho:focus-visible, .hero .btn-ouro:focus-visible,
.numeros .btn-vinho:focus-visible, .numeros .btn-ouro:focus-visible,
.fechamento .btn-vinho:focus-visible, .fechamento .btn-ouro:focus-visible {
  box-shadow: 0 0 0 2px var(--vinho-escuro);
}
.btn-contorno { background: transparent; border-color: rgba(91, 18, 32, .35); color: var(--vinho); }
.btn-contorno:hover { background: rgba(91, 18, 32, .06); }
.btn-mini { padding: .45rem .95rem; font-size: .86rem; }
.btn-grande { padding: .95rem 2rem; font-size: 1.05rem; }
.btn-bloco { width: 100%; }
.btn-texto {
  background: none; border: 0; padding: 0; font: inherit; font-size: .9rem;
  color: var(--vinho); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.acoes { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ----------------------------------------------------------------- cartões */

.cartao {
  background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1.5rem; box-shadow: var(--sombra); margin-bottom: 1.4rem;
}
.cartao h2 { margin-top: 0; }
.cartao-form { padding: 2rem; }
.cartao-form h1 { margin-bottom: .2rem; }
.cartao-nota { background: linear-gradient(180deg, #fffdf9, var(--areia-2)); }
/* Convite do diagnóstico por área no plano grátis: cadeado é convite, não bronca. */
.cartao-cadeado { background: linear-gradient(180deg, #fffdf9, var(--areia-2)); border-left: 4px solid var(--ouro); }
.cartao-cadeado h2 { display: flex; align-items: center; gap: .5rem; }
.cartao-cadeado .cadeado { display: inline-flex; color: var(--ouro); }
.areas-fracas-nomes { font-family: var(--serif); font-size: 1.25rem; color: var(--vinho); margin: .2rem 0 .8rem; }
.centralizado { text-align: center; }
.centralizado .acoes { justify-content: center; }
.codigo-erro { font-family: var(--serif); font-size: 3.4rem; color: var(--ouro); margin: 0; line-height: 1; }

.grade-tres { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-bottom: 1.6rem; }
.grade-tres .cartao { margin-bottom: 0; }

.grade-indicadores { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.5rem; }
.grade-indicadores.compacta { grid-template-columns: repeat(3, minmax(96px, 130px)); gap: .6rem; margin-bottom: 0; }
.indicador {
  background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1rem 1.1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .1rem;
}
.indicador .rotulo, .painel-numero .rotulo, .destaque-tempo .rotulo, .placar .rotulo,
.diploma-numeros .rotulo, .verificacao .rotulo, .cronometro .rotulo {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700;
}
.indicador .numero { font-family: var(--serif); font-size: 2.1rem; line-height: 1.1; color: var(--vinho); }
.painel-numero {
  display: flex; align-items: center; gap: .8rem; background: var(--areia-2);
  border: var(--borda); border-radius: var(--raio); padding: .9rem 1.2rem; box-shadow: var(--sombra);
}
.painel-numero .numero { font-family: var(--serif); font-size: 2.3rem; color: var(--vinho); line-height: 1; }

/* ---------------------------------------------------------------- formulários */

.formulario { display: grid; gap: .35rem; margin-top: 1.2rem; }
.formulario label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--tinta-suave); margin-top: .6rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  font: inherit; font-size: 1rem; padding: .7rem .85rem; border-radius: var(--raio-p);
  border: 1px solid rgba(107, 92, 75, .35); background: #fff; color: var(--tinta); width: 100%;
}
input:focus, select:focus { border-color: var(--ouro); }
.formulario .btn { margin-top: 1.2rem; }
.rodape-form { margin: 1.2rem 0 0; font-size: .9rem; }
/* "Entrar com Google" (lote 4C): separador discreto e o botão de contorno com o
   "G" oficial. O SVG é escrito no template — nenhuma folha, script ou imagem de
   terceiro entra no POAB por causa deste botão. */
.ou-separador {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.2rem 0 .2rem; color: var(--tinta-suave); font-size: .85rem;
}
.ou-separador::before, .ou-separador::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--areia-3);
}
/* O `.formulario .btn` acima dá 1.2rem de topo ao botão de entrar; o do Google
   vem depois do separador, então zera a margem para os dois ficarem alinhados. */
.btn-google { margin-top: .8rem; gap: .65rem; }
.btn-google svg { flex: none; }
/* aviso de privacidade abaixo do link de voltar (tela do CPF no checkout) */
.nota-documento { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--areia-3); line-height: 1.5; }
/* Olhinho de mostrar/ocultar senha (regra da casa: vale em TODO campo de senha).
   O botão nasce `hidden` no HTML e só aparece quando o script liga o clique —
   sem JavaScript ninguém vê um controle que não faz nada. */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3rem; }
.olhinho {
  position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-suave); cursor: pointer;
}
/* O `hidden` do botão precisa ganhar do seletor de classe acima (lição da casa:
   atributo perde para seletor mais específico e o controle morto reaparece). */
.olhinho[hidden] { display: none !important; }
.olhinho:hover { color: var(--vinho); background: rgba(91, 18, 32, .07); }
/* Dourado reprovava 3:1 contra o campo branco (2.98:1 medido) — mesma cor
   de duas pontas do anel global, só que menor (botão circular pequeno). */
.olhinho:focus-visible {
  outline: 2px solid var(--vinho-escuro);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--areia-2);
}
.olhinho .olho-risco { display: none; }
.olhinho.olhinho-aberto { color: var(--vinho); }
.olhinho.olhinho-aberto .olho-risco { display: inline; }

.formulario-linha { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.formulario-linha input[type="search"] { flex: 1 1 240px; }
.formulario-linha select { flex: 0 1 220px; }
/* checkbox da curadoria de questão (tela /admin/questoes/{id}) */
.campo-checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 400; text-transform: none; letter-spacing: normal; }
.campo-checkbox input { width: auto; }
/* textarea genérico de formulário (ex.: /avaliar) */
.formulario textarea, .formulario-resposta textarea {
  font: inherit; font-size: 1rem; line-height: 1.55; padding: .7rem .85rem;
  border-radius: var(--raio-p); border: 1px solid rgba(107, 92, 75, .35);
  background: #fff; color: var(--tinta); width: 100%; resize: vertical; min-height: 5rem;
}
.formulario textarea:focus, .formulario-resposta textarea:focus { border-color: var(--ouro); }
/* nota de 1 a 5 e tipo da avaliação (/avaliar): radios como cartõezinhos, não
   bolinha nua — mais fácil de acertar no celular. */
.grupo-radio { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .6rem; }
.opcao-radio {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
  border: 1px solid rgba(107, 92, 75, .35); border-radius: var(--raio-p);
  font-weight: 400; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.opcao-radio input { width: auto; margin: 0; }
.opcao-radio:has(input:checked) { border-color: var(--ouro); background: #fdf3dd; }
.opcao-radio-texto { flex: 1 1 auto; }
/* /admin/avaliacoes: linha de avaliação ainda não lida ganha uma faixa dourada */
.linha-nao-lida { border-left: 3px solid var(--ouro); }
.formulario-resposta { display: grid; gap: .4rem; min-width: 220px; }

.alerta { border-radius: var(--raio-p); padding: .9rem 1.1rem; margin: 0 0 1.3rem; font-size: .93rem; border-left: 4px solid; }
.alerta-erro { background: var(--vermelho-fraco); border-color: var(--vermelho); color: #6d1a20; }
.alerta-aviso { background: #fdf3dd; border-color: var(--ouro); color: #5c451a; }
ul.alerta { list-style: disc; padding-left: 2rem; }

/* ------------------------------------------------------------------ tabelas */

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela th, .tabela td { padding: .62rem .7rem; text-align: left; border-bottom: 1px solid rgba(185, 143, 52, .25); vertical-align: top; }
.tabela th {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
  border-bottom: 2px solid rgba(185, 143, 52, .45); white-space: nowrap;
}
.tabela tbody tr:hover { background: rgba(185, 143, 52, .07); }
.tabela .fraco { color: var(--vermelho); font-weight: 700; }
.tabela .forte { color: var(--verde); font-weight: 700; }
.col-barra { width: 120px; }
.col-acao { white-space: nowrap; }
.celula-enunciado { max-width: 380px; color: var(--tinta-suave); }
.linha-inativa { opacity: .6; }
.tabela-questoes td { font-size: .86rem; }

.barra { width: 110px; height: 10px; display: block; }
.b-fundo { fill: var(--areia-3); }
.b-ok { fill: var(--verde); }
.b-media { fill: var(--ouro); }
.b-baixa { fill: var(--vermelho); }

.etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
}
.etiqueta-entregue { background: var(--verde-fraco); color: var(--verde); }
.etiqueta-expirado { background: var(--vermelho-fraco); color: var(--vermelho); }
.etiqueta-em_andamento { background: #fdf3dd; color: #7a5c1c; }
.etiqueta-branco { background: var(--areia-3); color: var(--tinta-suave); margin-left: auto; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.4rem; }
.chip {
  background: var(--areia); border: var(--borda); border-radius: 999px; padding: .3rem .85rem;
  font-size: .86rem; display: inline-flex; gap: .45rem; align-items: center;
}
.chip span { font-weight: 700; color: var(--vinho); }

.lista-marcada, .lista-numerada { padding-left: 1.15rem; margin: 0 0 1.2rem; }
.lista-marcada { list-style: none; padding-left: 0; }
.lista-marcada li { position: relative; padding-left: 1.35rem; margin-bottom: .35rem; font-size: .95rem; }
.lista-marcada li::before { content: "◆"; position: absolute; left: 0; color: var(--ouro); font-size: .8rem; top: .12rem; }
.lista-numerada li { margin-bottom: .5rem; }

.linha-dados { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.linha-dados.vertical { flex-direction: column; gap: .6rem; }
.linha-dados li { display: flex; flex-direction: column; }
.linha-dados span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; }
.linha-dados strong { font-size: 1.02rem; }

/* -------------------------------------------------------------- simulado/novo */

.cartao-opcao { display: flex; flex-direction: column; text-align: left; }
.cartao-opcao .opcao-numero {
  font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--ouro); margin: 0 0 .2rem;
}
.cartao-opcao h2 { margin-bottom: .8rem; }
.cartao-opcao .btn { margin-top: auto; }

.cartao-abertura { padding: 2rem; }
.destaque-tempo {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: linear-gradient(160deg, rgba(185, 143, 52, .12), rgba(91, 18, 32, .06));
  border: var(--borda); border-radius: var(--raio); padding: 1.2rem; margin: 1.2rem 0 1.6rem;
}
.numero-grande { display: block; font-family: var(--serif); font-size: 1.75rem; color: var(--vinho); line-height: 1.15; }

/* ------------------------------------------------------------------- prova */

.corpo-prova { background-image: none; background: var(--areia); }
.barra-prova {
  position: sticky; top: 0; z-index: 30; margin: 0 -1.25rem 1.4rem;
  background: rgba(253, 250, 245, .96); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(185, 143, 52, .4); box-shadow: 0 6px 18px -14px rgba(43, 33, 25, .7);
}
.barra-prova-interna {
  max-width: 880px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.cronometro { display: flex; flex-direction: column; min-width: 118px; }
.cronometro strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--vinho); font-variant-numeric: tabular-nums; }
.cronometro.alerta-tempo strong { color: var(--vermelho); }
.cronometro.critico strong { color: var(--vermelho); animation: pulsar 1s steps(2, start) infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

.progresso-bloco { flex: 1 1 200px; display: flex; flex-direction: column; gap: .3rem; }
.progresso { height: 10px; border-radius: 999px; background: var(--areia-3); overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--vinho), var(--vinho-claro)); transition: width .2s ease; }
.progresso-texto { font-size: .8rem; color: var(--tinta-suave); }

.cabecalho-prova { margin-bottom: 1.2rem; }
.mapa-questoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.8rem; }
.mapa-questoes a {
  width: 2.05rem; height: 2.05rem; display: grid; place-items: center; font-size: .8rem;
  border-radius: var(--raio-p); border: 1px solid rgba(185, 143, 52, .45); background: var(--areia-2);
  color: var(--tinta-suave); text-decoration: none; font-variant-numeric: tabular-nums;
}
.mapa-questoes a:hover { border-color: var(--vinho); color: var(--vinho); }
.mapa-questoes a.respondida { background: var(--vinho); border-color: var(--vinho); color: #fdf6ea; font-weight: 700; }

.questao {
  background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--sombra); scroll-margin-top: 96px;
}
.questao-cabeca { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .9rem; }
.questao-numero {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--vinho); color: #fdf6ea; font-family: var(--serif); font-size: 1.1rem; font-weight: 700;
}
.questao-numero.errado { background: var(--vermelho); }
.questao-area { margin: 0; font-weight: 700; font-size: .98rem; }
.questao-origem { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }
.enunciado { white-space: pre-line; margin-bottom: 1rem; text-align: justify; hyphens: auto; }

.alternativas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alternativa {
  display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem; cursor: pointer;
  border: 1px solid rgba(185, 143, 52, .35); border-radius: var(--raio-p); background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.alternativa:hover { border-color: var(--vinho-claro); background: rgba(91, 18, 32, .03); }
.alternativa input { position: absolute; opacity: 0; width: 0; height: 0; }
.alternativa .letra {
  flex: none; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--areia-3); color: var(--vinho); font-weight: 700; font-size: .85rem;
}
.alternativa:has(input:checked) { border-color: var(--vinho); background: rgba(91, 18, 32, .06); box-shadow: inset 0 0 0 1px var(--vinho); }
.alternativa:has(input:checked) .letra { background: var(--vinho); color: #fdf6ea; }
.alternativa:has(input:focus-visible) {
  outline: 3px solid var(--vinho-escuro);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--areia-2);
}
.questao-rodape { margin-top: .8rem; text-align: right; }
.questao-rodape .limpar { color: var(--tinta-suave); font-size: .82rem; }

.entrega-final {
  text-align: center; background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1.8rem; box-shadow: var(--sombra);
}
.entrega-final p { color: var(--tinta-suave); max-width: 52ch; margin: 0 auto 1.2rem; }

.modal { position: fixed; inset: 0; background: rgba(43, 33, 25, .55); display: grid; place-items: center; z-index: 50; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--areia-2); border-radius: var(--raio); padding: 1.8rem; max-width: 440px; box-shadow: var(--sombra-forte); border-top: 5px solid var(--ouro); }
.modal-acoes { display: flex; gap: .7rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---------------------------------------------------------------- resultado */

.placar {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.8rem; align-items: center;
  background: var(--areia-2); border: var(--borda); border-left: 6px solid var(--ouro);
  border-radius: var(--raio); padding: 1.8rem; box-shadow: var(--sombra); margin-bottom: 1.4rem;
}
.placar-aprovado { border-left-color: var(--verde); }
.placar-reprovado { border-left-color: var(--vermelho); }
.placar-nota { text-align: center; border-right: 1px dashed rgba(185, 143, 52, .5); padding-right: 1.2rem; }
.placar-nota strong { display: block; font-family: var(--serif); font-size: 4.2rem; line-height: 1; color: var(--vinho); }
.placar-aprovado .placar-nota strong { color: var(--verde); }
.placar-reprovado .placar-nota strong { color: var(--vermelho); }
.placar-dados h1 { margin-bottom: .4rem; }

/* ------------------------------------------------- prova oficial específica */

.selo-oficial {
  background: linear-gradient(150deg, var(--verde) 0%, #1e4a2f 100%);
  color: #eef7f0; border-radius: var(--raio); padding: 1.6rem 1.5rem;
  margin-bottom: 1.4rem; box-shadow: var(--sombra-forte); text-align: center;
  border: 2px solid rgba(255, 255, 255, .18);
}
.selo-oficial-abaixo { background: linear-gradient(150deg, #8c2f36 0%, #5b1220 100%); }
.selo-chamada {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em;
}
.selo-detalhe { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .88); }

.cartao-oficial { border-left: 4px solid var(--ouro); }
.form-oficial { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.form-oficial label { font-size: .82rem; font-weight: 700; color: var(--tinta-suave); display: block; margin-bottom: .3rem; }
.form-oficial select { min-width: 22rem; flex: 1 1 22rem; }
.etiqueta-oficial { background: rgba(185, 143, 52, .2); color: #6b4e12; margin-left: .3rem; }

@media (max-width: 640px) {
  .form-oficial select { min-width: 100%; }
  .form-oficial .btn { width: 100%; }
}

.revisao h2 { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 1rem; }
.contador { font-family: var(--sans); font-size: .8rem; background: var(--vermelho); color: #fff; border-radius: 999px; padding: .15rem .65rem; }
.questao-revisao { border-left: 4px solid var(--vermelho); }
.alternativas-revisao li {
  display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem;
  border: 1px solid rgba(185, 143, 52, .3); border-radius: var(--raio-p); background: #fff;
}
.alternativas-revisao .letra {
  flex: none; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--areia-3); color: var(--vinho); font-weight: 700; font-size: .85rem;
}
.alt-correta { border-color: var(--verde); background: var(--verde-fraco); }
.alt-correta .letra { background: var(--verde); color: #fff; }
.alt-errada { border-color: var(--vermelho); background: var(--vermelho-fraco); }
.alt-errada .letra { background: var(--vermelho); color: #fff; }
.selo-alt { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; align-self: center; }
.selo-certo { color: var(--verde); }
.selo-erro { color: var(--vermelho); }

/* ------------------------------------------------------------------ gráfico */

.grafico { width: 100%; height: auto; display: block; }
.g-fundo { fill: #fffdf9; stroke: rgba(185, 143, 52, .3); }
.g-linha { stroke: rgba(185, 143, 52, .25); stroke-width: 1; }
.g-linha-corte { stroke: rgba(163, 34, 43, .55); stroke-width: 1.2; stroke-dasharray: 6 5; }
.g-rotulo-y, .g-rotulo-x { font-family: var(--sans); font-size: 11px; fill: #6b5c4b; }
.g-valor { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: #5b1220; }
.g-vazio { font-family: var(--sans); font-size: 13px; fill: #6b5c4b; }
.g-area { fill: rgba(91, 18, 32, .10); }
.g-linha-nota { fill: none; stroke: var(--vinho); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto { fill: #fffdf9; stroke: var(--vinho); stroke-width: 2.4; }

/* -------------------------------------------------------------- responsivo */

@media (max-width: 900px) {
  .placar { grid-template-columns: 1fr; gap: 1rem; }
  .placar-nota { border-right: 0; border-bottom: 1px dashed rgba(185, 143, 52, .5); padding: 0 0 1rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .pagina { padding: 1.5rem 1rem 2.4rem; }
  .topo-interno { padding: .7rem 1rem; gap: .6rem; }
  .menu { gap: .8rem; font-size: .9rem; width: 100%; justify-content: space-between; }
  .cabecalho-pagina { align-items: flex-start; }
  .grade-indicadores { grid-template-columns: repeat(2, 1fr); }
  .grade-indicadores.compacta { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .indicador .numero { font-size: 1.7rem; }
  .barra-prova { margin: 0 -1rem 1.2rem; }
  .barra-prova-interna { padding: .6rem 1rem; gap: .7rem; }
  .cronometro strong { font-size: 1.35rem; }
  .questao { padding: 1.1rem; }
  .enunciado { text-align: left; }
  .mapa-questoes a { width: 1.9rem; height: 1.9rem; font-size: .75rem; }
  .cartao, .cartao-form, .cartao-abertura { padding: 1.2rem; }
  .placar { padding: 1.2rem; }
  .placar-nota strong { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .topo, .rodape, .barra-prova, .nao-imprimir, .pular { display: none !important; }
  body { background: #fff; }
  /* .numeros (home) pinta fundo vinho com texto cream — na impressão isso sai
     cream-sobre-branco (praticamente ilegível) e gasta tinta à toa. Tinta
     escura sobre fundo nenhum, aqui e em qualquer descendente que herde a
     cor clara (o número em `--ouro-claro` e a legenda em cream). */
  .numeros, .numero-item {
    background: none !important;
  }
  .numeros, .numero-item, .numero-item strong, .numero-item span {
    color: var(--tinta) !important;
  }
}