/* --moldura = vermelho do brasão do logo. Logos são PNG transparentes: ficam direto sobre o rosa. */
:root { --fundo: #fce4ec; --moldura: #ec1f24; --texto: #1f1f1e; --borda: #d6d5cf; --destaque: #2a78d6; --destaque-fundo: #cde2fb; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Tela grande (quiosque): tudo em rem cresce com a tela; no celular fica em 16px. */
html { font-size: clamp(16px, min(1.55vw, 2.5vh), 64px); }  /* o menor entre largura e altura: a pergunta mais longa cabe sem rolar */
body { margin: 0; min-height: 100vh; border: 12px solid var(--moldura); font-family: system-ui, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.5; }
main { margin: 0 auto; padding: 1rem 2rem; }  /* largura total: a pergunta ocupa a tela */
.logo { padding: 1.5rem 2rem 0; }
/* Logo horizontal ocupa a largura toda; o compacto (celular) fica contido. */
.logo img { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 48rem) { .logo img { width: auto; max-width: 100%; max-height: 8rem; } }
section { text-align: center; margin-top: 3rem; }
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend { font-size: 1rem; opacity: .7; }
.enunciado { font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin: .5rem 0 1rem; }
.alternativa { display: block; margin: .6rem 0; position: relative; font-size: 1.3rem; }
.alternativa input { position: absolute; opacity: 0; }
.alternativa span { display: block; padding: .8rem 1.2rem; line-height: 1.35; border: 2px solid var(--borda); border-radius: .5rem; cursor: pointer; }
.alternativa input:checked + span { border-color: var(--destaque); background: var(--destaque-fundo); }
.alternativa input:focus-visible + span { outline: 3px solid var(--destaque); outline-offset: 2px; }
button { font: inherit; font-size: 1.3rem; padding: .8rem 2.2rem; border: 0; border-radius: .5rem; background: var(--destaque); color: #fff; cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
.aviso { font-size: 1.6rem; }