/* ==================================================================
   Sistema de Certificação. Deividi Pansera
   Identidade de A Mente Euclidiana, tomada do site do curso:
   fundo quente quase preto, ouro e vinho.
   Cinzel para capitulares e rótulos; Cormorant Garamond para leitura.
   Sem cantos arredondados, sem sombras difusas, sem gradientes.
   Só filete, espaço e tipografia.
   ================================================================== */

:root {
  /* Fundos. Site: --fundo, --fundo2, --fundo3 */
  --breu:      #0c0a09;
  --carvao:    #131009;
  --carvao-2:  #1a1510;
  --tinta:     #000000;

  /* Ouro. Site: --ouro, --ouro2 */
  --ouro:      #c9a84c;
  --ouro-vivo: #e2c06a;
  --ouro-fosco:#8a7433;
  --filete:    rgba(201,168,76,.30);
  --filete-f:  rgba(201,168,76,.52);

  /* Cremes. Site: --creme para leitura principal, --creme2 para a
     secundária (é o tom do corpo de texto do site), --creme3 para meta. */
  --marfim:    #f7f0e0;
  --marfim-2:  #d4c8a8;
  --cinza:     #d4c8a8;
  --cinza-2:   #8a7e68;

  /* Vinho. Site: --vinho3 nos textos de erro, por contraste; --vinho nos
     filetes e preenchimentos, onde o contraste importa menos. */
  --rubro:     #c03050;
  --rubro-esc: #6b1a2a;
  --rubro-cl:  rgba(107,26,42,.18);

  --verde:     #7d9a5c;

  /* Papeis derivados. Existem para que trocar de tema seja trocar so
     este bloco, sem tocar no corpo do arquivo. Os valores abaixo sao
     os mesmos literais que havia antes espalhados pelas regras. */
  --forte:          #f2efe8;
  --sobre-ouro:     var(--breu);
  --barra-fundo:    rgba(13,13,13,.94);
  --selecao:        rgba(201,168,76,.28);
  --selecao-txt:    #ffffff;
  --campo-linha:    rgba(201,168,76,.38);
  --trilho:         rgba(201,168,76,.14);
  --medidor-trilho: rgba(201,168,76,.15);
  --hover-sutil:    rgba(201,168,76,.045);
  --marcada:        rgba(201,168,76,.085);
  --foco-halo:      rgba(201,168,76,.16);
  --linha-hover:    rgba(201,168,76,.035);

  /* Corpo do texto de leitura. Os tamanhos foram calibrados para
     Cormorant Garamond; uma fonte de altura-x maior pede menos. */
  --escala: 1;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --corpo:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui:      "Cormorant Garamond", Georgia, serif;

  --transicao: 180ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  background: var(--breu);
  color: var(--marfim);
  font-family: var(--corpo);
  font-size: calc(23px * var(--escala));
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selecao); color: var(--selecao-txt); }

/* ---------- Moldura de página ---------- */

.moldura {
  border: 1px solid var(--filete);
  margin: 18px;
  min-height: calc(100vh - 36px);
  padding: 0;
}
@media (max-width: 640px) { .moldura { margin: 9px; } }

.envelope { max-width: 680px; margin: 0 auto; padding: 54px 30px 110px; }
.envelope--largo { max-width: 900px; }

/* ---------- Marca ---------- */

.marca {
  text-align: center;
  padding: 14px 0 40px;
}
.marca__logo {
  display: block;
  max-width: 440px;
  width: 84%;
  height: auto;
  margin: 0 auto;
}
.marca__selo {
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto 18px;
}

/* Filete curto e centrado, recorrente na identidade */
.filete-curto {
  width: 54px; height: 1px;
  background: var(--ouro);
  opacity: .55;
  margin: 26px auto;
  border: 0;
}
.filete-curto--rubro { background: var(--rubro); opacity: .7; }

/* ---------- Cabeçalho ---------- */

.topo { text-align: center; margin-bottom: 42px; }

.topo__sobre {
  font-family: var(--display);
  font-size: 12.1px;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 20px;
  padding-left: .38em;
}
.topo__titulo {
  font-family: var(--display);
  font-size: clamp(26.5px, 3.9vw, 38px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .04em;
  color: var(--marfim);
  margin: 0;
}
.topo__sub {
  font-family: var(--corpo);
  font-style: italic;
  font-size: calc(23px * var(--escala));
  color: var(--cinza);
  margin: 14px 0 0;
}

h2 {
  font-family: var(--display);
  font-size: 17.3px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
  text-align: center;
  margin: 62px 0 8px;
  padding-left: .22em;
}
h2 + p { text-align: center; color: var(--cinza); font-style: italic; margin-bottom: 30px; }

h3 {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro); margin: 0 0 18px;
}

p { margin: 0 0 18px; }
a { color: var(--ouro); text-decoration-color: var(--filete-f); text-underline-offset: 4px; }
a:hover { color: var(--ouro-vivo); }
strong { font-weight: 600; color: var(--forte); }
em { color: var(--marfim-2); }

/* ---------- Painel ---------- */

.painel {
  background: var(--carvao);
  border: 1px solid var(--filete);
  padding: 32px 34px;
  margin-bottom: 26px;
}
.painel--centro { text-align: center; }

/* Passos numerados. Usados na orientação sobre o validador de diplomas.
   O número vai no ::before, em ouro, para que a lista siga a mesma
   economia do resto: filete, espaço e tipografia, sem marcador gráfico. */
.passos {
  list-style: none;
  counter-reset: passo;
  max-width: 44ch;
  margin: 24px auto 4px;
  padding: 0;
  text-align: left;
}
.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 32px;
  margin-bottom: 11px;
  font-size: calc(20.7px * var(--escala));
  line-height: 1.5;
  color: var(--marfim-2);
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  text-align: center;
  font-family: var(--ui);
  font-size: calc(15px * var(--escala));
  font-weight: 600;
  color: var(--ouro);
}

/* ---------- Formulários ---------- */

.campo { margin-bottom: 26px; }
.campo label {
  display: block;
  font-family: var(--display);
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
  opacity: .85;
  margin-bottom: 10px;
  padding-left: .2em;
}
.campo__dica {
  font-size: calc(19.6px * var(--escala)); font-style: italic;
  color: var(--cinza-2); margin: 9px 0 0; line-height: 1.55;
}

input[type=text], input[type=email], input[type=tel],
input[type=date], input[type=password], textarea, select {
  width: 100%;
  padding: 13px 2px;
  font-family: var(--corpo);
  font-size: calc(21.9px * var(--escala));
  color: var(--marfim);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--campo-linha);
  transition: border-color var(--transicao), background var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--cinza-2); font-style: italic; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--ouro);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
select { border: 1px solid var(--filete-f); padding: 9px 10px; }
select option { background: var(--carvao-2); color: var(--marfim); }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 600px) { .linha-dupla { grid-template-columns: 1fr; gap: 0; } }

/* Caixa de declaração */
.declaracao {
  display: flex; gap: 14px; align-items: flex-start;
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  padding: 20px 2px;
  margin: 30px 0;
  cursor: pointer;
  font-size: calc(21.3px * var(--escala)); font-style: italic; color: var(--marfim-2);
}
.declaracao input { margin-top: 6px; accent-color: var(--ouro); flex-shrink: 0; }

/* ---------- Botões ---------- */

.botao {
  display: inline-block;
  font-family: var(--display);
  font-size: 13.8px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 40px;
  padding-left: calc(40px + .2em);
  border: 1px solid var(--ouro);
  background: transparent;
  color: var(--ouro);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.botao:hover { background: var(--ouro); color: var(--sobre-ouro); }
.botao--discreto { border-color: var(--filete-f); color: var(--cinza); }
.botao--discreto:hover { background: transparent; border-color: var(--ouro); color: var(--ouro); }
.botao[disabled] { opacity: .35; cursor: not-allowed; }
.botao[disabled]:hover { background: transparent; color: var(--ouro); }

/* ---------- Notas e avisos ---------- */

.nota {
  border-left: 2px solid var(--filete-f);
  padding: 4px 0 4px 24px;
  margin: 0 0 30px;
  font-size: calc(21.9px * var(--escala));
  color: var(--marfim-2);
}
.nota--ouro  { border-left-color: var(--ouro); }
.nota--rubro { border-left-color: var(--rubro); }
.nota p:last-child { margin-bottom: 0; }
.nota__rotulo {
  display: block;
  font-family: var(--display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 10px;
}
.nota--ouro  .nota__rotulo { color: var(--ouro); }
.nota--rubro .nota__rotulo { color: var(--rubro); }

/* ==================================================================
   PROVA
   ================================================================== */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--barra-fundo);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filete);
}
.barra__conteudo {
  max-width: 900px; margin: 0 auto;
  padding: 14px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.barra__marca {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--cinza-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra__marca img { width: 17px; height: 17px; flex-shrink: 0; }
.barra__dir { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }

.barra__contagem {
  font-family: var(--display); font-size: 13.8px;
  letter-spacing: .12em; color: var(--cinza-2);
  font-variant-numeric: tabular-nums;
}
.barra__contagem strong { color: var(--ouro); font-weight: 600; }

.barra__relogio {
  font-family: var(--display); font-size: 16.1px; font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--marfim-2);
  transition: color var(--transicao);
}
.barra__relogio--urgente { color: var(--rubro); animation: pulsa 1.7s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

.barra__trilho { height: 1px; background: var(--trilho); }
.barra__preenche {
  height: 100%; width: 0;
  background: var(--ouro);
  transition: width 420ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Divisor de parte ---------- */

.parte { text-align: center; margin: 76px 0 40px; }
.parte:first-of-type { margin-top: 44px; }
.parte__rotulo {
  font-family: var(--display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--ouro); padding-left: .42em;
}
.parte__titulo {
  font-family: var(--display);
  font-size: 19.6px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marfim);
  margin: 16px 0 0;
}
.parte__nota {
  font-style: italic; font-size: calc(20.7px * var(--escala)); color: var(--cinza);
  max-width: 520px; margin: 14px auto 0;
}

/* ---------- Questão ---------- */

.questao {
  border-top: 1px solid var(--filete);
  padding: 34px 0 6px;
}
.questao:first-of-type { border-top: 0; }

.questao__topo {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px;
}
.questao__numero {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  letter-spacing: .14em;
  color: var(--ouro-fosco);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao);
}
.questao--respondida .questao__numero { color: var(--ouro); }
.questao__marca {
  font-family: var(--display);
  font-size: 10.9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cinza-2);
}

.questao__enunciado { font-size: calc(24.2px * var(--escala)); line-height: 1.58; margin-bottom: 26px; }
.questao__enunciado strong { color: var(--ouro-vivo); font-weight: 600; }

/* ---------- Alternativas ---------- */

.opcoes { display: flex; flex-direction: column; }

.opcao {
  position: relative;
  display: flex; align-items: baseline; gap: 18px;
  padding: 15px 16px 15px 18px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.opcao:hover { background: var(--hover-sutil); border-left-color: var(--filete-f); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }

.opcao__letra {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 14.4px; font-weight: 600;
  letter-spacing: .16em;
  color: var(--cinza);
  min-width: 16px;
  transition: color var(--transicao);
}
.opcao__texto { flex: 1; line-height: 1.55; }

.opcao--marcada {
  background: var(--marcada);
  border-left-color: var(--ouro);
}
.opcao--marcada .opcao__letra { color: var(--ouro); }
.opcao--marcada .opcao__texto { color: var(--forte); }
.opcao input:focus-visible ~ .opcao__texto { outline: 1px dotted var(--ouro); outline-offset: 4px; }

/* ---------- Navegador ---------- */

.navegador {
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  padding: 30px 0;
  margin: 56px 0 40px;
  text-align: center;
}
.navegador__titulo {
  font-family: var(--display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--cinza-2); margin: 0 0 22px; padding-left: .26em;
}
.navegador__grade {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.chip {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-family: var(--display); font-size: 12.7px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cinza-2);
  border: 1px solid var(--filete);
  text-decoration: none;
  transition: all var(--transicao);
}
.chip:hover { border-color: var(--ouro); color: var(--ouro); }
.chip--feito { border-color: var(--ouro); background: var(--ouro); color: var(--sobre-ouro); }
.chip--feito:hover { color: var(--sobre-ouro); }

.envio { text-align: center; padding-bottom: 20px; }
.envio__resumo {
  font-family: var(--corpo); font-style: italic;
  font-size: calc(20.7px * var(--escala)); color: var(--cinza); margin: 0 0 26px;
}
.envio__resumo--completo { color: var(--ouro); font-style: normal;
  font-family: var(--display); font-size: 12.7px; letter-spacing: .2em; text-transform: uppercase; }

/* ==================================================================
   RESULTADO
   ================================================================== */

.placar { text-align: center; padding: 20px 0 10px; }

.medidor { display: block; margin: 0 auto; }
.medidor__trilho { fill: none; stroke: var(--medidor-trilho); stroke-width: 1.5; }
.medidor__arco {
  fill: none; stroke-width: 1.5; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1200ms cubic-bezier(.32,.72,.3,1);
}
.medidor__arco--ok  { stroke: var(--ouro); }
.medidor__arco--nao { stroke: var(--rubro); }
.medidor__corte { stroke: var(--marfim); stroke-width: 1; opacity: .45; }
.medidor__pct {
  font-family: var(--display); font-size: 39.1px; font-weight: 600;
  letter-spacing: .02em; fill: var(--marfim);
}
.medidor__rotulo {
  font-family: var(--display); font-size: 9.8px; font-weight: 600;
  letter-spacing: .22em; fill: var(--cinza-2);
}

.placar__frac {
  font-family: var(--corpo); font-style: italic;
  font-size: calc(20.7px * var(--escala)); color: var(--cinza); margin: 20px 0 0;
}
.placar__selo {
  display: inline-block;
  font-family: var(--display); font-size: 12.7px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 12px 30px; padding-left: calc(30px + .3em);
  margin-top: 24px;
  border: 1px solid;
}
.placar__selo--ok  { color: var(--ouro);  border-color: var(--ouro); }
.placar__selo--nao { color: var(--rubro); border-color: var(--rubro); }

/* ---------- Desempenho por área ---------- */

.areas { margin-top: 8px; }
.area {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--filete);
}
.area:first-child { border-top: 1px solid var(--filete); }
.area__nome {
  font-family: var(--display); font-size: 12.7px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marfim-2);
}
.area__nota {
  font-family: var(--display); font-size: 12.7px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; color: var(--cinza-2); text-align: right;
}
.area__barra { grid-column: 1 / -1; height: 1px; background: var(--trilho); }
.area__preenche { height: 100%; transition: width 1000ms cubic-bezier(.4,0,.2,1); }
.area__preenche--alto  { background: var(--ouro); }
.area__preenche--medio { background: var(--ouro-fosco); }
.area__preenche--baixo { background: var(--rubro); }
.area__revisar {
  grid-column: 1 / -1;
  font-style: italic; font-size: calc(18.4px * var(--escala)); color: var(--cinza-2); margin: 4px 0 0;
}

/* ---------- Revisão comentada ---------- */

.revisao { margin-top: 10px; }
.revisao__item {
  border-top: 1px solid var(--filete);
  padding: 30px 0 26px;
}
.revisao__item:last-child { border-bottom: 1px solid var(--filete); }

.revisao__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.revisao__tag {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.revisao__tag--certo { color: var(--ouro); }
.revisao__tag--erro  { color: var(--rubro); }
.revisao__origem {
  font-family: var(--display); font-size: 10.9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cinza-2);
}

.resposta {
  display: flex; gap: 16px; align-items: baseline;
  padding: 10px 0; font-size: calc(21.9px * var(--escala));
}
.resposta__rotulo {
  flex-shrink: 0; width: 96px;
  font-family: var(--display); font-size: 10.9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.resposta--sua   .resposta__rotulo { color: var(--rubro); }
.resposta--certa .resposta__rotulo { color: var(--ouro); }
.resposta--sua   { color: var(--cinza); }

.revisao__just {
  font-size: calc(20.7px * var(--escala)); font-style: italic; color: var(--cinza);
  border-top: 1px solid var(--filete);
  margin-top: 18px; padding-top: 16px;
}

/* ---------- Linha do tempo ---------- */

.trilha { list-style: none; padding: 0; margin: 30px 0 0; }
.trilha li {
  position: relative;
  padding: 0 0 34px 40px;
  border-left: 1px solid var(--filete);
}
.trilha li:last-child { border-left-color: transparent; padding-bottom: 0; }
.trilha li::before {
  content: ""; position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--breu); border: 1px solid var(--ouro-fosco);
  transition: all var(--transicao);
}
.trilha li.feito::before { background: var(--ouro); border-color: var(--ouro); }
.trilha li.atual::before {
  background: var(--breu); border-color: var(--ouro);
  box-shadow: 0 0 0 4px var(--foco-halo);
}
.trilha__rotulo {
  font-family: var(--display); font-size: 12.7px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marfim-2);
}
.trilha li.atual .trilha__rotulo { color: var(--ouro); }
.trilha__data {
  font-family: var(--display); font-size: 10.9px; letter-spacing: .1em;
  color: var(--cinza-2); margin-top: 5px;
}
.trilha__desc { font-style: italic; font-size: calc(20.7px * var(--escala)); color: var(--cinza); margin-top: 8px; }

.protocolo {
  font-family: var(--display);
  font-size: 28.8px; font-weight: 600; letter-spacing: .22em;
  color: var(--ouro);
  padding: 18px 0 16px;
  border-top: 1px solid var(--filete-f);
  border-bottom: 1px solid var(--filete-f);
  display: block; margin: 16px 0;
  padding-left: .22em;
}

/* ---------- Tabelas de dados ---------- */

table.dados { width: 100%; border-collapse: collapse; }
table.dados td {
  padding: 15px 0; border-bottom: 1px solid var(--filete);
  font-size: calc(20.7px * var(--escala)); color: var(--marfim-2);
}
table.dados tr:last-child td { border-bottom: none; }
table.dados td:first-child {
  font-family: var(--display); font-size: 13.2px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marfim-2);
}
table.dados td.num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--display); font-size: 15px; color: var(--ouro);
}

/* ---------- Rodapé ---------- */

.rodape {
  margin-top: 80px; padding-top: 30px;
  border-top: 1px solid var(--filete);
  text-align: center;
  font-size: calc(18.4px * var(--escala)); font-style: italic; line-height: 1.8; color: var(--cinza-2);
}
.rodape a { color: var(--cinza); }

/* ---------- Painel administrativo ---------- */

table.admin { width: 100%; border-collapse: collapse; font-size: calc(18.4px * var(--escala)); }
table.admin th, table.admin td {
  padding: 14px 12px; border-bottom: 1px solid var(--filete);
  text-align: left; vertical-align: top; color: var(--marfim-2);
}
table.admin th {
  font-family: var(--display); font-size: 10.9px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro); border-bottom-color: var(--filete-f);
}
table.admin tr:hover td { background: var(--linha-hover); }
.pill {
  display: inline-block;
  font-family: var(--display); font-size: 10.9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid var(--filete-f);
  color: var(--cinza); white-space: nowrap; text-decoration: none;
}
a.pill:hover { border-color: var(--ouro); color: var(--ouro); }

/* ---------- Acessibilidade e impressão ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  body { font-size: calc(21.3px * var(--escala)); }
  .envelope { padding: 34px 20px 80px; }
  .painel { padding: 24px 20px; }
  .opcao { padding: 13px 10px 13px 14px; gap: 13px; }
  .barra__conteudo { padding: 12px 18px; gap: 14px; }
  .barra__dir { gap: 16px; }
  .resposta { flex-direction: column; gap: 4px; }
  .resposta__rotulo { width: auto; }
  .questao__enunciado { font-size: calc(22.4px * var(--escala)); }
}

/* ---------- Figuras dos enunciados ---------- */
/* Ilustram a configuração descrita no texto, e nenhuma questão depende delas
   para ser respondida: quem usa leitor de tela ou imprime em preto e branco
   não perde informação. São SVG embutido, e não imagem, para escalar em
   qualquer largura, imprimir nítido e herdar as cores do tema. */

.figura {
  margin: 20px 0 6px;
  text-align: center;
}
.figura svg {
  width: 100%;
  max-width: 330px;
  height: auto;
  /* Recorta no viewBox. Com overflow visível, um rótulo que passasse da
     borda ia parar por cima do enunciado ou das alternativas. O gerador
     das figuras confere que nada passa, e isto é a segunda tranca. */
  overflow: hidden;
}

.fig-traco {
  fill: none;
  stroke: var(--marfim-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-apoio {
  fill: none;
  stroke: var(--cinza-2);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
.fig-destaque {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-ponto { fill: var(--marfim); stroke: none; }
.fig-rotulo {
  fill: var(--cinza);
  font-family: var(--display);
  font-size: 13px;
  font-style: italic;
}

@media print {
  .barra, .botao, .rodape, .navegador { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }

  /* A .moldura é só o filete decorativo da tela, e todo o conteúdo vive
     dentro dela. Escondê-la fazia a página sair em branco na impressão.
     Aqui ela some como enfeite e continua entregando o que carrega. */
  .moldura { border: 0; margin: 0; min-height: 0; }
  .envelope { max-width: none; padding: 0; }

  /* As figuras são desenhadas nas cores claras do tema, que sumiriam no
     papel branco. */
  .fig-traco, .fig-apoio, .fig-destaque { stroke: #000; }
  .fig-apoio { stroke: #777; }
  .fig-ponto { fill: #000; }
  .fig-rotulo { fill: #000; }
}