html { scroll-behavior: smooth; }
        /* Mesmo fundo da entrada: o simulado é parte do mesmo lugar,
           não uma página solta do site. Ver certificacoes/index.html. */
        body { overflow-x: hidden; background: #05100c; }
        /* A COR DE BASE VAI JUNTO NO SHORTHAND.
           Esta classe está na <body>, e `.campo` (classe) vence
           `body { background: ... }` (elemento) por especificidade. Sem
           a cor no final do shorthand, sobra só o gradiente sobre
           transparente — e a página inteira renderizou BRANCA, com o
           texto claro sumindo. Nenhum teste pegou; o print pegou. */
        .campo { background: radial-gradient(60% 45% at 50% 0%, rgba(47,180,137,.13), transparent 70%) #05100c; }
        .emblema { width: 38px; height: 26px; }
        .emblema rect { fill: #6ed3ae; }
        .emblema .base { fill: #2fb489; }
        .grao::after {
            content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
        }
        .risco { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
        .num { font-variant-numeric: tabular-nums; }
        .display { line-height: .92; letter-spacing: -.035em; }

        /* A BARRA É UM <progress>, NÃO UMA DIV COM style="width".
           A CSP gerada pelo build traz style-src-attr 'none', que mata
           atributo style inline. Elemento nativo também é anunciado por
           leitor de tela sem precisar de ARIA à mão. */
        progress.barra { appearance: none; -webkit-appearance: none; width: 100%; height: 3px; border: 0; background: rgba(255,255,255,.1); }
        progress.barra::-webkit-progress-bar { background: rgba(255,255,255,.1); }
        progress.barra::-webkit-progress-value { background: #2fb489; transition: width .35s cubic-bezier(.16,1,.3,1); }
        progress.barra::-moz-progress-bar { background: #2fb489; }

        /* A alternativa inteira é clicável: o <input> fica escondido do
           olho mas continua no fluxo de foco e de leitor de tela. */
        .alt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
        .alt-caixa { transition: border-color .2s, background-color .2s; }
        .alt input:focus-visible + .alt-caixa { outline: 2px solid #6ed3ae; outline-offset: 3px; }
        .alt input:checked + .alt-caixa { border-color: rgba(110,211,174,.55); background-color: rgba(47,180,137,.07); }
        .alt input:disabled + .alt-caixa { cursor: default; }
        .alt:not(.travada) .alt-caixa:hover { border-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.03); }

        .alt-certa .alt-caixa { border-color: rgba(110,211,174,.7) !important; background-color: rgba(47,180,137,.1) !important; }
        .alt-errada .alt-caixa { border-color: rgba(244,120,120,.55) !important; background-color: rgba(244,120,120,.07) !important; }

        .letra { font-variant-numeric: tabular-nums; }

        /* O ATRIBUTO hidden PRECISA VENCER A UTILITY DE DISPLAY.
           O Tailwind põe `[hidden] { display: none }` na camada base, e
           as utilities vêm depois no arquivo. Num elemento com
           `inline-flex` — os botões Confirmar e Próxima — a utility
           ganha e `el.hidden = true` não esconde nada: o botão fica na
           tela, clicável, depois de já ter sido usado.
           O teste automatizado não vê isso (clicar em elemento visível
           funciona igual); só apareceu quando o print foi olhado. */
        [hidden] { display: none !important; }

        /* focus() ROLA A PÁGINA, E O TOPO DESTE SITE É FIXO.
           Ao avançar de questão o foco vai para o enunciado, e sem
           margem de rolagem ele parava exatamente atrás do cabeçalho:
           em 1280px o enunciado ficava em top:0 com o topo ocupando até
           74px, escondendo o macrotema e a primeira linha da pergunta.
           No celular não acontece — a página é curta e não rola —, que
           é exatamente por que isso passaria despercebido. */
        #q-enunciado, #res-titulo { scroll-margin-top: 7rem; }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            progress.barra::-webkit-progress-value { transition: none; }
        }

.mascote-shadow {
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.5))
          drop-shadow(0 0 60px rgba(231,159,31,.28));
}