/* Tela de prova — desenhada para até 5h30 de leitura contínua.

   CONTEXTO.md 4.9: aqui a cor é quase ausente. O único destaque colorido é a
   alternativa marcada. Nada pisca, nada anima, nada compete com o texto no
   campo de visão. Verde e vermelho não existem nesta tela: eles só aparecem
   DEPOIS da divulgação, na revisão.

   Mobile-first (4.20): o celular é o dispositivo principal do público, então o
   estilo base é o de tela estreita e o desktop apenas ganha espaço. */

/* ===========================================================================
   A PROVA E CLARA, E ISSO E ORDEM DO DONO — 23/08/2026

   No dia em que a area do aluno virou escura ("Torre de Controle"), ele cravou
   a excecao: *"as partes que envolvam os simulados DEVEM ser claras. O aluno
   passa muito tempo fazendo prova e tema escuro nessa parte pode ser
   cansativo. Nenhum problema as telas de resultado serem escuras, somente a
   area de instrucao e realizacao da prova serem claras"*.

   Entao esta folha NAO acompanhou o rebrand no fundo. Ela ja nascia clara e
   continua: 5h30 de leitura corrida sao outra coisa que dois minutos olhando
   um resultado. Os tres fundos que o aluno ESCOLHE (papel, sepia, noite)
   continuam como estavam — o noite e preferencia dele, nao tema da casa.

   O QUE MUDOU FOI SO O ACENTO: o azul saiu, o laranja da marca entrou.

   O azul nunca foi da casa. Ele veio do template que serviu de referencia em
   14/08; a marca do dono tem um foguete com rastro laranja, e e de la que o
   tom vem. Sem essa troca o aluno sairia de um painel laranja e entraria numa
   prova azul — o mesmo defeito de 15/08, quando esta folha ficou verde depois
   que o resto virou azul.

   TROCAR O ACENTO NAO FOI TROCAR O HEX. Cada fundo precisou do seu tom, e os
   tres foram medidos (`scratchpad/contraste.py`):

     fundo   escreve/borda   preenchimento   em cima do cheio
     claro   #B33C10  5,71   #FBE9E2  5,00   branco   5,88
     sepia   #A8380E  5,51   #F6E3D4  5,21   branco   6,49
     noite   #FF7A3D  6,89   #2A1A14  6,45   #2B1000  6,89

   **O LARANJA DA AREA DO ALUNO NAO SERVE AQUI.** O `#FF7A3D` mede 2,52:1
   sobre o papel claro — ele foi escolhido para escrever sobre fundo quase
   preto. E a regra dos dois tons de sempre, aplicada ao contrario: no escuro o
   tom vivo escreve, no claro quem escreve e o escuro.

   **O SEPIA PRECISOU DE UM LARANJA PROPRIO**, como precisava de um azul
   proprio. O creme e mais escuro que o papel, e o tom que passa num nao passa
   no outro por pouco.

   **NO NOITE O LARANJA INVERTE.** O escuro `#B33C10` mede 3,04:1 sobre o fundo
   noite e some. Sobe para o vivo `#FF7A3D`, e por isso quem escreve EM CIMA
   dele deixa de ser branco (2,59) e passa a ser a tinta escura (6,89). E o
   defeito que derrubou o botao "Proxima" em TRES paletas seguidas — verde-agua
   (1,9), verde-floresta (2,47) e azul (1,83). Nao repita: cor nova aqui se
   mede nos tres fundos, sempre.

   O principio do 4.9 nao mudou: aqui a cor e quase ausente. O laranja so
   aparece na alternativa marcada, no foco e na acao principal. O papel
   continua sem ser branco puro.
   =========================================================================== */
:root {
  --papel: #FAFCFC;        /* nunca branco puro: reduz o brilho em 5h de leitura */
  --tinta: #201E1D;        /* 16,12:1 no papel claro */
  --tinta-fraca: #605D5D;
  --linha: #E3E8E4;
  /* O LARANJA DA MARCA, EM VERSAO ESCURA — 23/08/2026, com o rebrand.
     O azul saiu porque nunca foi da casa: ele veio do template de 14/08. A
     marca do dono tem um foguete com rastro laranja, e e de la que este tom
     vem.

     E ELE E MAIS ESCURO QUE O DO PAINEL DE PROPOSITO. O #FF7A3D da area do
     aluno mede 2,52:1 aqui — ele foi escolhido para escrever sobre fundo
     quase preto, e sobre papel claro ele nao escreve. Este mede 5,71. E a
     regra dos dois tons de sempre, aplicada ao contrario: no escuro o tom
     vivo escreve, no claro o escuro escreve. */
  --marca: #B33C10;        /* 5,71:1 — o tom que ESCREVE, nao o que pinta */
  --marca-fraca: #FBE9E2;  /* 5,00:1 com a letra da alternativa em cima */
  /* A cor do texto que fica EM CIMA do azul cheio (botao principal, marca da
     questao atual). Nao pode ser branco fixo: no fundo noite o azul clareia, e
     branco sobre ele mede 1,83:1 — o botao "Proxima" da prova, ilegivel a
     noite. O defeito ja apareceu em duas paletas (1,9:1 com o verde-agua,
     2,47:1 com o verde-floresta) e so foi visto quando a varredura passou
     pelos tres fundos. Nao repita: qualquer cor nova aqui se mede nos tres. */
  --sobre-marca: #FFFFFF;  /* 5,88:1 sobre o laranja escuro do papel claro */
  /* Realce de toque. Era `rgba(0,0,0,.03)` fixo: no fundo noite isso ESCURECIA
     a alternativa sob o dedo, ou seja, o retorno visual acontecia ao contrario.
     Cada fundo tem o seu. */
  --realce: rgba(30, 42, 56, 0.05);
  --tam: 17px;             /* controlado pelo aluno */
  --raio: 8px;
  /* Arredonda o que se toca (mesma regra de app.css). Nada de pilula de 99px:
     ate 06/08/2026 os botoes e os controles daqui eram pilulas, sobra da folha
     antiga — os do resto da plataforma ja tinham deixado de ser. */
  --raio-toque: 12px;
  /* A MESMA FONTE DO RESTO DA PLATAFORMA, auto-hospedada — ver o bloco
     `@font-face` no fim desta folha. Ate 15/08 esta tela caia na fonte do
     sistema enquanto as outras pediam DM Sans, entao a prova tinha a cara do
     aparelho e o painel tinha a da casa. A pilha de reserva continua atras
     dela: se o arquivo nao chegar, o texto aparece do mesmo jeito. */
  --corpo: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* A FONTE. Duplicada da `app.css` de proposito: cada moldura carrega UMA folha,
   e a da prova nao carrega a do aluno. O raciocinio completo (fonte variavel,
   `unicode-range`, `font-display: swap`) esta escrito uma vez so, no topo da
   `app.css`. Licenca SIL OFL 1.1, copia em `static/fontes/LICENCA.txt`. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fontes/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fontes/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* Fundos que o aluno escolhe. Muita gente faz simulado à noite. */

/* O SEPIA VOLTOU A PRECISAR DE UM TOM PROPRIO, e vale registrar o vaivem para
   ninguem "simplificar" isto de novo:

     verde-agua (ate 10/08)   4,10:1 no creme  -> precisava de tom proprio
     verde-floresta (10-14/08) 5,50:1          -> a excecao pode sair
     azul (15/08)             4,34:1           -> a excecao VOLTOU

   O azul que escreve no papel claro nao aguenta o creme. Aqui ele desce para
   `--marca-escura`, que mede 7,72:1. Medido, nao estimado. */
html[data-fundo="sepia"] {
  --papel: #F4ECD8; --tinta: #3A3222; --tinta-fraca: #6B6047;
  --linha: #DED2B8; --marca: #A8380E; --marca-fraca: #F6E3D4;
  --sobre-marca: #FFFFFF;   /* 6,49:1 sobre o laranja do creme */
  --realce: rgba(58, 50, 34, 0.06);
}
html[data-fundo="noite"] {
  /* No escuro o tom que escreve no claro some no fundo — o laranja escuro
     `#B33C10` mede 3,04:1 aqui. Sobe para o laranja vivo, 6,89:1 sobre
     #12181F. E o MESMO `--fogo` que a area do aluno usa. */
  --papel: #12181F; --tinta: #D8DEE4; --tinta-fraca: #8A98A6;
  --linha: #26313C; --marca: #FF7A3D; --marca-fraca: #2A1A14;
  /* Aqui o laranja e VIVO, entao quem escreve em cima dele e o escuro: 6,89:1.
     Branco daria 2,59 e sumiria — e o defeito do botao "Proxima", que ja
     apareceu em TRES paletas seguidas. Nao repita: cor nova aqui se mede nos
     tres fundos, sempre. */
  --sobre-marca: #2B1000;
  /* No escuro o realce CLAREIA: e o unico jeito de o toque parecer toque. */
  --realce: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--tam);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* O LINK SOLTO — "Voltar ao painel", no pe da preparacao.
   Esta folha nunca teve regra para `a`, e ate 23/08/2026 ninguem viu: com o
   tema azul, o azul do NAVEGADOR passava por tom da casa. Com o laranja o
   link ficou visivelmente de outra familia. Ele usa `--marca`, entao muda com
   o fundo escolhido pelo aluno — e nos tres ele mede acima de 5:1. */
a { color: var(--marca); }

/* Espaçamentos utilitários. Existem porque `style="margin-top:16px"` NÃO
   funciona: a CSP do SEGURANCA.md seção 9 não permite estilo em atributo, e o
   navegador descarta em silêncio. */
.espaco-acima { margin-top: 16px; }
.espaco-acima-g { margin-top: 22px; }
.linha-embutida { display: inline; }
.tema-redacao { font-size: 1.05em; }

/* Texto que existe só para quem usa leitor de tela.
   Não é `display:none` nem `visibility:hidden` de propósito: os dois somem
   também para o leitor, que é justamente quem precisa ler isto. A receita
   abaixo tira da tela sem tirar da árvore de acessibilidade. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- barra fixa: cronômetro e ajustes ---------- */
/* UMA linha, ~49px. Ela tinha 131px medidos em 375px — relógio, seis
   controles abertos e duas linhas de aviso —, o que somado ao rodapé fixo
   entregava um quarto do celular a controle numa tela feita para ler 5h30. Os
   controles foram para dentro do painel de ajustes: são escolha de uma vez, e
   ação ocasional não merece espaço permanente (4.9, mesma razão do 4.37). */
.faixa {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: 7px 14px;
}
.faixa-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}
.tempo { margin: 0; display: flex; align-items: center; }
/* GRANDE, a pedido do dono em 12/08/2026. Ele media 15px em cinza fraco: era o
   número mais importante da tela vestido como legenda, e para lê-lo o aluno
   precisava parar e procurar. Agora são 26px, tabulares, na tinta cheia.

   `tabular-nums` não é detalhe: sem ele os dígitos têm larguras diferentes e o
   relógio treme a cada segundo — num número que fica no campo de visão por
   5h30, isso é movimento constante numa tela cuja regra é nada se mexer.

   E a barra não cresceu um pixel: medida em 375px, continua nos mesmos 49px de
   antes. Quem manda na altura é o botão "Ajustes" (34px de área de toque), e
   26px × 1,15 dá 30px — cabe embaixo dele. O relógio triplicou de tamanho de
   graça. Medido, não estimado. */
.cronometro {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* Últimos 5 minutos. O aviso NÃO é cor — é uma moldura: quem não distingue os
   tons vê a caixa aparecer do mesmo jeito (WCAG 1.4.1). E continua sem
   vermelho: susto no fim da prova não ajuda ninguém. */
.cronometro.acabando {
  font-weight: 700;
  border: 1.5px solid var(--tinta-fraca);
  border-radius: var(--raio);
  padding: 0 8px;
}
/* Ocupa o lugar do relógio enquanto ele está oculto: é o aviso de 4.9 dito a
   quem oculta, e só a quem oculta. */
.nota-tempo { margin: 0; font-size: 12.5px; color: var(--tinta-fraca); }

.controles { display: flex; gap: 6px; flex-wrap: wrap; }
.ctrl {
  appearance: none;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta-fraca);
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 12px;
  cursor: pointer;
  min-height: 34px;
  /* `inline-flex` e não `inline-block`: desde 12/08/2026 um `.ctrl` também é
     <a> ("Ir para a redação"), e âncora não centraliza texto na vertical
     sozinha — ficaria 3px acima dos botões vizinhos. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ctrl:hover { border-color: var(--tinta-fraca); }
/* O peso entra junto com a cor: contorno e texto verdes seriam cor sozinha
   carregando o recado, e quem não distingue os dois tons não veria qual está
   escolhido (WCAG 1.4.1). */
.ctrl[aria-pressed="true"] {
  border-color: var(--marca);
  color: var(--marca);
  font-weight: 600;
}

/* ---------- painel de ajustes ---------- */
.ajustes {
  max-width: 780px;
  margin: 9px auto 2px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}
.ajuste {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
/* Largura fixa para os três rótulos alinharem numa coluna só: sem isso os
   grupos de botões começam em três lugares diferentes. */
.ajuste-rotulo {
  flex: 0 0 84px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.aviso-cronometro {
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

/* ---------- corpo da questão ---------- */
.folha {
  /* ~64 caracteres por linha: linha larga cansa o olho na volta da quebra. */
  max-width: 34em;
  margin: 0 auto;
  padding: 18px 16px 120px;
}
/* É um <h1>: leitor de tela navega por cabeçalho, e sem nenhum o aluno cego
   não tem como pular direto para a questão. As medidas abaixo são explícitas
   para que ele continue com a mesma cara discreta de antes, e não com o
   tamanho e o peso que o navegador dá a um h1 por padrão. */
.numero-questao {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 10px;
}
.texto-base {
  border-left: 2px solid var(--linha);
  padding-left: 14px;
  margin-bottom: 18px;
}
.fonte {
  font-size: 13px;
  color: var(--tinta-fraca);
  margin-top: 6px;
}
.enunciado { margin-bottom: 20px; }
.enunciado p, .texto-base p { margin: 0 0 12px; }
.enunciado p:last-child, .texto-base p:last-child { margin-bottom: 0; }

/* O CREDITO DA FONTE, em corpo menor — como em prova impressa.
   Pedido do dono em 13/08/2026: *"a imagem, logo abaixo letras minusculas
   falando de onde veio aquela imagem, para nao ficar parecido com o
   enunciado"*. Vale para fonte de figura, citacao de texto e "Adaptado".

   `--tinta-fraca` e nao um cinza fixo: a tela de prova tem TRES fundos e cada
   um traz o proprio tom. Medido nos tres — claro 6,33:1, sepia 5,26:1,
   noite 6,06:1 —, todos acima do piso de 4,5. Um cinza fixo passaria no claro
   e sumiria no noite.

   O paragrafo do credito cola no que ele credita (2px em vez de 12px): credito
   nao e um paragrafo novo do texto, e o rodape do anterior. */
.enunciado small, .texto-base small {
  display: block;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--tinta-fraca);
}
.enunciado p:has(> small), .texto-base p:has(> small) { margin-top: -8px; }

/* A FRACAO EMPILHADA, decidida em 12/09/2026: o `[[frac:NUM/DEN]]` que
   `renderizacao.expandir_fracoes` monta vira este par de `<span>`.
   `currentColor` e de proposito — esta folha tem TRES fundos (claro, sepia,
   noite) e o traco tem de acompanhar a tinta de cada um, sem cor fixa. */
.fracao {
  display: inline-flex; flex-direction: column; vertical-align: middle;
  text-align: center; line-height: 1.05; margin: 0 0.15em;
  /* RESETA O text-indent HERDADO, e NAO E COSMETICO. Medido com um
     PDF de verdade (Playwright `page.pdf()`, nao so a tela) em
     12/09/2026: a ficha de impressao usa recuo pendurado negativo
     (`text-indent: -26px` em `impressao.css`, para a letra da
     alternativa) e, SEM este reset, o motor de PDF do Chromium
     EMBARALHA o numerador e o denominador -- '=' some, o traco vira
     um sinal solto, 9 e 7 trocam de linha. So aparece no PDF real;
     a tela (mesmo em @media print emulado) mostra a fracao certa. */
  text-indent: 0;
}
.fracao-n { border-bottom: 1px solid currentColor; padding: 0 0.25em; }
.fracao-d { padding: 0 0.25em; }
/* O 9/7 no EXPOENTE (10<sup>[[frac:9/7]]</sup>): sem isto a fracao
   fica do tamanho do texto normal e no meio da linha, e nao parece
   expoente nenhum -- medido com Playwright em 12/09/2026 na questao
   180 de 2016. O `middle` de cima centra a fracao na linha; dentro de
   <sup> ele cancelaria a subida do proprio <sup>. */
sup .fracao { vertical-align: 0.45em; font-size: 0.85em; }

/* ---------- alternativas ---------- */
.alternativas { list-style: none; margin: 0; padding: 0; }
.alt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 11px 10px;
  margin-bottom: 6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.alt:hover { background: var(--realce); }
.alt.marcada { background: var(--marca-fraca); border-color: var(--marca); }
/* A bolha acompanha o tamanho da letra em vez de ficar cravada em 34px: quem
   sobe a fonte para 24px é justamente quem enxerga pior, e uma bolha fixa
   encolhia na proporção exata em que ele precisava dela maior. O piso de 34px
   é o alvo confortável para o dedo (4.20). */
.bolha {
  flex: 0 0 auto;
  width: max(34px, calc(var(--tam) * 2));
  height: max(34px, calc(var(--tam) * 2));
  border: 1.5px solid var(--linha);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.8em;
  color: var(--tinta-fraca);
  background: var(--papel);
}
.alt.marcada .bolha {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
/* Centra a PRIMEIRA linha do texto na bolha, em qualquer tamanho de letra: era
   um `padding-top: 5px` cru, certo só aos 17px e torto nos outros seis
   tamanhos. Metade da diferença entre a bolha e a altura de uma linha. */
.alt-texto { padding-top: calc((max(34px, var(--tam) * 2) - var(--tam) * 1.7) / 2); }

/* ---------- ações discretas ---------- */
/* O aviso da ultima questao. Discreto como tudo aqui, mas com moldura: ele
   aparece UMA vez em 90 telas, e sem contorno passaria por mais um paragrafo
   do enunciado. */
.ultima-questao {
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

.acoes-questao {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  /* `center`, desde que as tres acoes viraram botoes de mesma altura minima.
     Era `baseline` porque o "finalizar" mora dentro de um <form> e o texto
     dele assentava 4px abaixo dos vizinhos <a>; com caixas de altura igual,
     centralizar alinha as BORDAS, que e o que se ve agora. */
  align-items: center;
}
/* A saída fica na ponta oposta das ajudas de navegação. Ela não é um terceiro
   atalho: é o fim da prova, e ficar lado a lado com "próxima em branco"
   convidava ao clique errado. */
.acoes-questao .sair-da-prova { margin-left: auto; }
/* Os `.ctrl` da barra de Ajustes são 12,5px porque ficam numa faixa apertada.
   Aqui não há aperto, e estas três ações são texto corrido — mantêm os 13,5px
   que tinham como link, para o botão discreto não virar botão pequeno. */
.acoes-questao .ctrl { font-size: 13.5px; }
/* `.link-discreto` foi embora em 12/08/2026: as tres acoes desta linha viraram
   `.ctrl`, o botao quieto que a barra de Ajustes ja usava. Nenhum template
   pedia mais esta classe, e regra sem dono e cilada para quem chegar depois. */

/* ---------- navegação inferior fixa ---------- */
.rodape-prova {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--papel);
  border-top: 1px solid var(--linha);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
/* Alinhada com a coluna de leitura (34em), e não com a largura da janela: o
   rodapé é a continuação da folha, e uma linha de botões atravessando 1280px
   sob um texto de 34em lê como duas telas diferentes coladas. */
.rodape-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 34em;
  margin: 0 auto;
  padding: 0 16px;
}
.botao {
  appearance: none;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--raio-toque);
  font: inherit;
  font-size: 15px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* "Próxima" é a ação da vez, então tem cor. O TAMANHO, porém, é o mesmo dos
   outros: um botão esticado por toda a linha destoa dos vizinhos e vira a
   coisa mais chamativa da tela — numa tela feita para ler, o que chama a
   atenção deveria ser o texto (4.9). Cor basta para dizer qual é o principal. */
.botao.principal { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.botao:disabled { opacity: 0.4; cursor: not-allowed; }
/* `cresce` deixou de esticar: sobrou como marcador de qual é o botão da vez,
   caso um dia ele precise de tratamento próprio. */
.botao.cresce { flex: 0 0 auto; }

/* ---------- cartão-resposta ---------- */
/* Fechado por padrão, em QUALQUER largura.
   Antes ele abria sozinho acima de 720px ("no desktop fica sempre visível"), e
   o resultado era o oposto do pretendido: 90 quadrados = ~15 linhas dentro de
   um rodapé `fixed`, sobrando um quinto da tela para ler a questão. Pular de
   questão é ação ocasional — o normal é seguir em ordem, e o pulo acontece na
   revisão. Ação ocasional não merece espaço permanente (4.9).
   Quem preferir o contrário fixa a rail, e a escolha fica guardada no aparelho,
   como o tamanho da letra e o fundo. */
.cartao {
  display: none;
  border-top: 1px solid var(--linha);
  padding: 12px 0 4px;
  max-width: 780px;
  margin: 0 auto;
  /* Rolagem própria: com 90 itens a gaveta não pode empurrar a tela toda.
     Era 46vh, e medido em 375px o rodapé aberto ficava com 442px de 812 — 54%
     do aparelho, a mesma queixa de antes com outro número. Com 90 itens a
     grade rola de qualquer jeito (13 linhas), então a altura não é o que
     mostra tudo: é o quanto se enxerga por vez. 30vh dá ~5 linhas, ~40
     questões, e o rodapé inteiro cai para ~38%. */
  max-height: 30vh;
  overflow-y: auto;
}
.cartao.aberto { display: block; }
.legenda-cartao {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--tinta-fraca);
}
/* 38px em vez de 42: no celular a diferença é uma coluna a mais (8 em vez de
   7), e o alvo continua acima dos 34px de 4.20. */
.grade-cartao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 5px;
}
.q-marca {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-fraca);
  text-decoration: none;
  background: var(--papel);
}
.q-marca.respondida { border-color: var(--marca); color: var(--marca); }
.q-marca.atual { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }

/* ---------- caixas de diálogo simples ---------- */
.painel {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px;
  margin-top: 14px;
  background: var(--papel);
}
.painel textarea, .redacao-area {
  width: 100%;
  font-family: var(--corpo);
  font-size: 16px;   /* impede o zoom automático do Safari no iPhone */
  line-height: 1.7;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  resize: vertical;
}
.redacao-area { min-height: 58vh; }
.oculto-total { display: none; }

.situacao-salvamento {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.situacao-salvamento[data-estado="erro"] { color: #A8322A; font-weight: 600; }

/* ---------- telas de preparação e encerramento ---------- */
.centro { max-width: 34em; margin: 0 auto; padding: 22px 16px 60px; }

/* O BANNER DA MARCA, na antessala e no encerramento (17/08/2026).
   Ocupa a largura inteira do miolo. `width/height` no HTML e `aria-hidden` lá
   também: o navegador reserva o espaço antes de a imagem chegar, então a tela
   não pula com o texto já lido — e um salto de layout na tela que antecede a
   prova é ansiedade de graça.

   Ele NÃO aparece na tela de questão: aquela moldura não tem marca, não tem
   menu e não tem link para fora, de propósito (CONTEXTO 4.7). */
.antessala-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-toque);
  margin: 0 0 20px;
}
.centro h1 { font-size: 1.5em; line-height: 1.3; margin: 0 0 6px; }
.centro h2 { font-size: 1.1em; margin: 26px 0 8px; }

/* ---------- a antessala da prova, e a tela de encerramento ----------
   Refeitas em 12/08/2026. Eram texto solto sobre o papel: titulo, paragrafo,
   uma fichinha de contorno fino e sete marcadores de lista em fila. O dono
   reprovou com as mesmas palavras que usou no cadastro em 07/08 — "um tanto de
   letras solta na tela, nao tem um balao, uma caixa onde os textos estao".

   A paleta NAO mudou: esta folha e a da prova, onde a cor atrapalha de verdade
   (4.9). O que entrou foi estrutura — caixa, numero grande e assunto agrupado. */
.antessala-cabeca { margin-bottom: 20px; }
.antessala-calma { margin: 10px 0 0; }

/* Os tres numeros que decidem se e hora de comecar. UM cartao dividido, e nao
   tres soltos: eles se leem juntos ("80 questoes em 5h30 de Linguagens e
   Humanas"), e tres caixas separadas convidam a ler cada uma por si. */
.antessala-numeros {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-toque);
  overflow: hidden;
  margin-bottom: 18px;
}
.antessala-numero {
  padding: 16px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 14px;
}
.antessala-numero:last-child { border-bottom: 0; }
/* A MEDALHA, entrou em 15/08 junto com o tema. E o mesmo quadrado arredondado
   de 44px dos cartoes de numero do painel do aluno — a antessala e a ultima
   tela da plataforma antes do exame, e ela devia parecer a plataforma.
   Preenchimento fraco e desenho no tom que ESCREVE, e nao azul cheio com
   desenho branco: aqui a cor pesa (4.9), e a medalha chapada seria a mancha
   mais forte de uma tela que existe para acalmar. */
.antessala-medalha {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--marca-fraca);
  color: var(--marca);       /* 4,52 no claro · 7,06 no sepia · 7,79 no noite */
}
.antessala-medalha svg { width: 22px; height: 22px; display: block; }
.antessala-dizeres { min-width: 0; }
/* O corpo dos numeros da CASA: 34px em `--corpo`, e nao 26px em mono. O mono
   era sobra da folha antiga e fazia estes tres numeros serem os unicos da
   plataforma com cara de terminal. */
.antessala-valor {
  display: block;
  font-family: var(--corpo);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
/* A lista de areas e texto, nao numero: no mesmo corpo de 30px ela quebraria
   em duas linhas e desalinharia o cartao. */
.antessala-valor.pequeno {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.antessala-rotulo {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.antessala-extra { display: block; font-size: 12.5px; color: var(--tinta-fraca); }

.antessala-caixa {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-toque);
  padding: 14px 16px 4px;
  margin-bottom: 12px;
}
.antessala-titulo { font-size: 15px; margin: 0 0 8px; }
.antessala-lista { margin: 0; padding-left: 18px; }
.antessala-lista li { margin-bottom: 10px; font-size: 0.94em; }

/* ---------- A ESCOLHA DA ORDEM — 28/08/2026 ----------
   `fieldset` zera a moldura propria do navegador para herdar a da antessala; a
   `legend` volta a ser um titulo comum. Sem isto o bloco sai com dois
   contornos, um dentro do outro. */
.antessala-ordem { border: 1px solid var(--linha); padding-bottom: 14px; }
/* `legend` corta a moldura do `fieldset` e fica MONTADA nela — as outras
   caixas da antessala trazem o titulo DENTRO, e a caixa nova saia diferente
   das tres. O `float` tira a legenda do fluxo especial dela e a devolve para
   dentro da caixa, como um titulo comum; o `::after` fecha o float para o
   conteudo nao subir ao lado. */
/* O `font-weight` e explicito porque as outras tres caixas titulam com `h2`,
   que ja nasce negrito — `legend` nao. Sem isto o titulo desta caixa saia
   mais fraco que os vizinhos, na mesma tela. */
.antessala-ordem legend { float: left; width: 100%; padding: 0; font-weight: 700; }
.antessala-ordem::after { content: ""; display: table; clear: both; }
.antessala-nota { margin: 0 0 10px; font-size: 0.9em; color: var(--tinta-fraca); }
.antessala-nota:last-child { margin: 12px 0 0; }

/* Alvo de toque inteiro, e nao so a bolinha: no celular a bolinha sozinha tem
   uns 16px, e errar o alvo aqui e comecar a prova no modo que nao se queria. */
.antessala-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-toque);
  cursor: pointer;
}
/* `minmax(0, 1fr)` acima e a regra 1 do CLAUDE.md: faixa `1fr` nao encolhe
   abaixo do conteudo por padrao, e o texto longo desta caixa vazaria para fora
   da folha no celular. */
.antessala-opcao input { margin-top: 3px; }
/* Mesma marca do `:focus-visible` global desta folha — `--realce` e fundo de
   toque, quase transparente, e como contorno nao apareceria. */
.antessala-opcao:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.antessala-opcao-corpo { display: block; min-width: 0; }
.antessala-opcao-titulo { display: block; font-weight: 600; margin-bottom: 4px; }
.antessala-opcao-texto { display: block; font-size: 0.92em; }
.antessala-selo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--tinta-fraca);
}

/* ---------- O BANNER DO FIM DA PROVA — 15/08/2026 ----------
   A pedido do dono: um banner grande com uma figura que ilustre o termino.
   Era a unica tela da plataforma que existe so para dizer "acabou", e ela
   dizia isso em texto puro.

   O fundo e `--marca-fraca`, que e o unico tom pintado que ja esta medido nos
   TRES fundos (papel, sepia e noite). Um bloco azul cheio aqui ficaria certo no
   papel e brigaria com o sepia e com o noite — que e o defeito que esta folha
   ja pagou duas vezes. */
.encerrada-banner {
  background: var(--marca-fraca);
  border-radius: var(--raio-toque);
  padding: 22px 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.encerrada-dizeres { min-width: 0; }
.encerrada-banner h1 { margin: 2px 0 0; font-size: 1.65em; line-height: 1.15; }
.encerrada-sub { margin: 8px 0 0; color: var(--tinta-fraca); font-size: 0.95em; }
/* O numero grande do respondidas. `baseline` alinha o "de 90" pela base do
   numero, e nao pelo meio — encostado no meio ele parece cair. */
.encerrada-numero {
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.encerrada-valor {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}
.encerrada-de { font-size: 0.92em; color: var(--tinta-fraca); }
.encerrada-figura { display: flex; justify-content: center; }
.encerrada-svg { width: 100%; max-width: 210px; height: auto; display: block; }

/* AS PECAS DO DESENHO, pintadas por token — nunca por hex cravado. E o que faz
   a mesma figura funcionar nos tres fundos: no noite o "papel" dela escurece
   junto com a tela, em vez de virar um retangulo branco aceso no escuro. */
.des-papel { fill: var(--papel); }
.des-borda { fill: none; stroke: var(--marca); stroke-width: 2; }
.des-marca-fraco { fill: var(--marca); opacity: 0.35; }
.des-marca-cheio { fill: var(--marca); }
.des-vazio { fill: none; stroke: var(--marca); stroke-width: 1.6; opacity: 0.45; }
.des-marca-anel { fill: none; stroke: var(--marca); stroke-width: 2.5; }
.des-marca-traco {
  fill: none;
  stroke: var(--marca);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.des-marca-traco-grosso {
  fill: none;
  stroke: var(--marca);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 560px) {
  /* No desktop a figura vai para a direita, como no banner da area do aluno. */
  .encerrada-banner { flex-direction: row; align-items: center; gap: 24px; }
  .encerrada-dizeres { flex: 1 1 auto; }
  .encerrada-figura { flex: 0 0 210px; }
}

/* A escolha de lingua (08/09/2026): um fieldset com a cara das caixas da
   antessala, e opcoes grandes o bastante para o polegar. */
.antessala-lingua { padding-bottom: 10px; }
.antessala-lingua-ajuda { margin: 6px 0 12px; }
.antessala-opcao {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border: 1px solid var(--linha); border-radius: 10px;
  margin-bottom: 8px; font-size: 1.05rem; cursor: pointer;
}
.antessala-opcao input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.antessala-opcao:has(input:checked) { border-color: var(--marca); font-weight: 600; }
.antessala-partida { margin-top: 22px; text-align: center; }
.antessala-partida .botao { width: 100%; }
/* O aviso fica ABAIXO do botao, e nao dentro dele. Dentro, o rotulo virava uma
   frase de duas linhas ("Comecar agora — o cronometro dispara neste clique") e
   o botao deixava de parecer um botao. */
.antessala-aviso {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.antessala-saida {
  margin-top: 18px;
  font-size: 13px;
  color: var(--tinta-fraca);
  text-align: center;
}

@media (min-width: 560px) {
  /* No desktop os tres numeros ficam lado a lado, divididos por um filete —
     mesma peca, outra orientacao. */
  .antessala-numeros { grid-template-columns: repeat(3, 1fr); }
  .antessala-numero { border-bottom: 0; border-right: 1px solid var(--linha); }
  .antessala-numero:last-child { border-right: 0; }
}
.olho {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 4px;
}
.ficha { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin: 18px 0; }
.ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.92em; }
.ficha dt { color: var(--tinta-fraca); }
.ficha dd { margin: 0; font-variant-numeric: tabular-nums; }
.lista-instrucoes { padding-left: 20px; }
.lista-instrucoes li { margin-bottom: 8px; }

@media (min-width: 720px) {
  .folha { padding-top: 26px; }
}

/* ---------- o mesmo cartão, duas apresentações ---------- */
/* UM estado só — aberto ou fechado, lembrado no aparelho — e a apresentação
   decidida pela largura. Assim o botão "Questões" faz a mesma coisa em todo
   lugar, que é o que impede o defeito anterior de voltar: lá o cartão abria
   sozinho no desktop e o botão virava enfeite.

   Estreito: gaveta que sobe do rodapé.
   Largo (≥1100px): rail na margem que já sobra ao lado da coluna de 34em, sem
   roubar largura do texto e sem empurrar nada. */
@media (min-width: 1100px) {
  .cartao.aberto {
    position: fixed;
    /* Logo abaixo da barra, que agora tem ~49px em vez dos 131px de antes. */
    top: 62px;
    left: 14px;
    bottom: 82px;
    width: 138px;
    max-height: none;
    max-width: none;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--linha);
    border-top: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel);
    overflow-y: auto;
  }
  .cartao.aberto .grade-cartao {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .cartao.aberto .q-marca { min-height: 30px; font-size: 12px; }
}

/* ---------- classificacao de confianca ---------- */
/* Sem cor e sem peso: e informacao util, nao chamada para acao. A tela de
   prova nao pode ganhar mais um elemento disputando atencao (4.9). */
/* As regras de `.confianca` saíram junto com o controle (ver o comentário em
   prova/questao.html). Classe sem uso em CSS é armadilha: um dia alguém escreve
   `class="confianca"` num lugar novo e herda um desenho que ninguém desenhou
   para ali. */

/* Contador de progresso. Discreto como o resto: informa sem apressar. */
.contador-respondidas { color: var(--tinta-fraca); text-transform: none; letter-spacing: 0; }

/* So aparece na rampa, onde o numero da tela deixa de ser o do caderno.
   Mesma tinta fraca do contador: e referencia, nao informacao de prova. */
.numero-no-caderno { color: var(--tinta-fraca); text-transform: none; letter-spacing: 0; }

/* Figura de item: nunca estoura a largura da folha, nem no celular. */
.figura-item { max-width: 100%; height: auto; display: block; margin: 12px 0; }

/* A FIGURA DE PAGINA INTEIRA, e a lupa que ela ganha.
   Achado em 02/09/2026 na questao 54 de 2014, o quadro dos acidos graxos: com
   1456px de largura espremidos nos 358px da folha de um celular, o numero de
   20px chegava ao aluno com 5px, e a questao pedia somar colunas que ele nao
   enxergava.
   A figura CONTINUA CABENDO na folha, e a lupa e opcional. A primeira versao
   abria ampliada, e isso quebrou o mapa da questao 37, cuja pergunta e quais
   cinco paises estao em tom escuro: ampliado, o aluno via so as Americas.
   Quem decide quais figuras ganham a lupa e o servidor, pela largura do
   arquivo (`servicos/imagens.pede_rolagem`).
   Sem JavaScript e sem `style=`: quem guarda o estado e um checkbox escondido,
   e o CSS le o `:checked`. A caixa e um `span` porque o marcador da figura
   mora dentro de um `<p>` do enunciado. */
.figura-lupa { position: absolute; width: 1px; height: 1px; opacity: 0; }
.figura-rolagem { display: block; overflow-x: auto; margin: 12px 0; }
.figura-rolagem .figura-item { margin: 0; }
.figura-lupa:checked ~ .figura-rolagem .figura-item { max-width: none; }
.figura-lupa-rotulo {
  display: block; margin: -6px 0 12px; cursor: pointer;
  font-size: 0.82em; color: var(--tinta-fraca); text-decoration: underline;
}
.figura-lupa-fechar { display: none; }
.figura-lupa:checked ~ .figura-lupa-rotulo .figura-lupa-abrir { display: none; }
.figura-lupa:checked ~ .figura-lupa-rotulo .figura-lupa-fechar { display: inline; }
.figura-lupa:focus-visible ~ .figura-lupa-rotulo { outline: 2px solid; outline-offset: 3px; }


/* ---------- as cinco questões sem cadastro (09/09/2026) ----------
   `/experimentar` usa esta folha porque a pessoa LE aqui: cinco enunciados e
   cinco resolucoes seguidas. O que a tela de prova nao tem e esta pagina
   precisa: uma marca no alto, porque quem chegou de um anuncio ainda nao sabe
   onde esta, e a correcao NA MESMA TELA, que a prova so mostra na revisao.
   A paleta e a de sempre: sem verde nem vermelho. A alternativa correta ganha
   o preenchimento da marca, a marcada errada so o contorno, e o texto ao lado
   diz qual e qual. */
.experimento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 34em;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.experimento-marca {
  white-space: nowrap;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.experimento-nota {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  text-align: right;
}
/* O radio fica escondido e a LINHA inteira e o alvo do dedo; o `:checked` no
   filho pinta o rotulo como a alternativa marcada da prova. Sem JavaScript. */
.alt-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.alt { position: relative; }
.alt:has(.alt-radio:checked) { background: var(--marca-fraca); border-color: var(--marca); }
.alt:has(.alt-radio:checked) .bolha { background: var(--marca); border-color: var(--marca); color: #fff; }
.alt:has(.alt-radio:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.alternativas.revistas .alt { cursor: default; flex-wrap: wrap; }
/* O TEXTO FICA AO LADO DA BOLHA na correcao (30/09/2026). Com `flex-wrap`,
   que existe para a `.marca-alt` descer para a linha de baixo, o texto sem
   base flexivel pedia a largura inteira do proprio conteudo e caia para baixo
   da letra, deixando a bolha sozinha numa linha. `flex: 1 1 0` + `min-width: 0`
   e a armadilha da regra 1 do CLAUDE.md, aqui dentro de um `li`. */
.alternativas.revistas .alt-texto { flex: 1 1 0; min-width: 0; }
.alternativas.revistas .alt:hover { background: none; }
.alt.certa { background: var(--marca-fraca); border-color: var(--marca); }
.alt.certa .bolha { background: var(--marca); border-color: var(--marca); color: #fff; }
.alt.minha { border-color: var(--tinta-fraca); }
.marca-alt {
  flex: 1 0 100%;
  padding-left: calc(max(34px, var(--tam) * 2) + 12px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.alt.certa .marca-alt { color: var(--marca); }
.correcao {
  margin-top: 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-toque);
  padding: 16px 16px 6px;
}
.correcao h2 { font-size: 1.15em; line-height: 1.3; margin: 0 0 6px; }
.correcao h3 { font-size: 0.95em; margin: 18px 0 6px; }
.correcao-origem { margin: 0 0 4px; font-size: 0.85em; color: var(--tinta-fraca); }
.correcao-texto p { margin: 0 0 10px; }
.resultado-linhas { list-style: none; margin: 0; padding: 0 0 8px; }
.resultado-linhas li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--linha);
  font-size: 0.94em;
}
.resultado-linhas li:first-child { border-top: 0; }
.resultado-posicao { font-family: var(--mono); color: var(--tinta-fraca); }
.resultado-area { min-width: 0; }
.resultado-veredito { color: var(--tinta-fraca); text-align: right; white-space: nowrap; }
.experimento-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.pista { padding-bottom: 14px; }
.pista-frase { font-size: 1.15em; line-height: 1.35; margin: 4px 0 8px; }
.pista-nota { margin: 0; color: var(--tinta-fraca); font-size: 0.94em; }