@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fontes/bodoni-moda-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:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fontes/bodoni-moda-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}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fontes/newsreader-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:"Newsreader";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fontes/newsreader-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}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 800;font-display:swap;src:url(/fontes/newsreader-italico-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:"Newsreader";font-style:italic;font-weight:300 800;font-display:swap;src:url(/fontes/newsreader-italico-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}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fontes/libre-franklin-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:"Libre Franklin";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fontes/libre-franklin-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}

:root{color-scheme:light;
--papel:#F0EEE8;--reticula:#E4E1D8;--tinta:#15140F;--grafite:#57544B;--fio:#BAB5A9;
--caneta:#2A43A0;--caneta-clara:#DDE2F1;
--f-marca:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
--f-texto:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
--f-ui:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;--e8:72px;
--medida:64ch;--tempo:120ms}
/* Edicao noturna: o manual so troca as cores. A caneta clareia para manter 8,3:1 sobre
   o papel escuro; o grafite fica em 6,5:1 nos dois temas. */
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
--papel:#15140F;--reticula:#211F1A;--tinta:#ECE8DE;--grafite:#A9A497;--fio:#3E3B33;
--caneta:#98ABF3;--caneta-clara:#232B4C}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);
font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;font-optical-sizing:auto}
@media (max-width:720px){body{font-size:17px}}
::selection{background:var(--caneta-clara);color:var(--tinta)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--caneta);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Hover so onde existe ponteiro que paire. No dedo, o :hover gruda depois do toque, e o
   botao que acabou de ser tocado ficava azul como se fosse uma marca do aluno. */
@media (hover:hover){a:hover{color:var(--caneta)}}

/* ---- estilos de redacao: os nomes sao os de uma redacao de jornal ---- */
.chapeu{font:700 12px/1.25 var(--f-ui);text-transform:uppercase;letter-spacing:.14em}
.manchete{font:700 clamp(32px,5.6vw,60px)/1.02 var(--f-texto);letter-spacing:-.015em;
text-wrap:balance}
.titulo{font:600 clamp(26px,3.8vw,42px)/1.08 var(--f-texto);letter-spacing:-.01em;
text-wrap:balance}
.intertitulo{font:700 20px/1.3 var(--f-texto);text-wrap:balance}
.linha-fina{font:italic 400 clamp(18px,2vw,21px)/1.45 var(--f-texto);color:var(--grafite);
max-width:60ch;text-wrap:pretty}
.texto p{max-width:var(--medida);text-wrap:pretty}
.texto p+p{margin-top:.9em}
.legenda{font:400 13px/1.5 var(--f-ui);color:var(--grafite)}
.dado{font:500 15px/1.3 var(--f-ui);font-variant-numeric:tabular-nums lining-nums}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---- fios: o grosso e fino abre o cabecalho, o grosso abre um bloco de dados ---- */
.fio{border:0;border-top:1px solid var(--tinta);margin:0}
.fio-gf{height:7px;border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta)}

/* ---- marca ---- */
.marca{font-family:var(--f-marca);font-weight:800;font-size:clamp(66px,17.5vw,196px);
line-height:.86;letter-spacing:-.02em;text-align:center;
padding-block:clamp(14px,2.2vw,26px) clamp(12px,1.8vw,22px)}
.faixa{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;
padding-block:10px;font:500 12px/1.3 var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.faixa span:nth-child(2){color:var(--grafite)}
.lema{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
gap:6px 24px;padding-block:12px 0}
.lema q{font:italic 400 clamp(17px,2vw,20px)/1.3 var(--f-texto);quotes:"\201C" "\201D"}
.lema .legenda{text-align:right}
@media (max-width:720px){.faixa{flex-direction:column;align-items:flex-start;gap:2px}
.lema .legenda{text-align:left}}

/* ---- botoes: principal em tinta, secundario em contorno, terciario sublinhado ---- */
.botoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{font:600 14px/1 var(--f-ui);letter-spacing:.02em;padding:14px 22px;min-height:44px;
border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);border-radius:0;
cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
justify-content:center;gap:8px;touch-action:manipulation;
transition:background var(--tempo),color var(--tempo),border-color var(--tempo)}
.btn.sec{background:transparent;color:var(--tinta)}
@media (hover:hover){
.btn:hover{background:var(--caneta);border-color:var(--caneta);color:var(--papel)}
.btn.sec:hover{background:var(--reticula);border-color:var(--tinta);color:var(--tinta)}}
.btn[disabled],.btn[disabled]:hover{background:transparent;color:var(--grafite);
border-color:var(--fio);cursor:not-allowed}
.btn.largo{width:100%}
.lnk{font:500 14px/1.3 var(--f-ui);background:none;border:0;padding:12px 0;color:var(--tinta);
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
cursor:pointer;touch-action:manipulation}
@media (hover:hover){.lnk:hover{color:var(--caneta)}}

/* ---- campos: fio embaixo, nunca caixa; o que o aluno escreve sai em caneta ---- */
.campo{display:block;margin-top:20px}
.campo>span{display:block;font:600 12px/1.25 var(--f-ui);text-transform:uppercase;
letter-spacing:.1em;color:var(--grafite)}
.campo>small{display:block;font:400 13px/1.45 var(--f-ui);color:var(--grafite);margin-top:6px}
input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;border-radius:0;
font:400 18px/1.4 var(--f-texto);color:var(--caneta);background:transparent;border:0;
border-bottom:1px solid var(--tinta);padding:10px 0 9px;margin:0}
select{color:var(--tinta);font:500 15px/1.3 var(--f-ui);cursor:pointer}
select option{color:initial}
textarea{background:var(--reticula);padding:10px 12px;resize:vertical;font-size:16px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;
border-bottom:2px solid var(--caneta);padding-bottom:8px}
input[type=radio]{accent-color:var(--caneta);width:16px;height:16px;margin:0;flex:none}
select:disabled{color:var(--grafite);border-bottom-color:var(--fio);cursor:not-allowed}

/* ---- aviso: fio grosso em cima, fino embaixo; para o leitor sem gritar ---- */
.aviso{display:flex;gap:10px 18px;align-items:center;justify-content:space-between;
flex-wrap:wrap;border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta);
padding-block:12px}
.aviso p{font:500 14px/1.45 var(--f-ui);max-width:60ch}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================================
   O SITE PUBLICO. Vem DEPOIS do ESTILO_BASE do app (scripts/37_estudo.py), que ja traz
   as fontes, as cores do manual nas duas edicoes, os estilos de redacao (.chapeu,
   .manchete, .titulo, .linha-fina, .intertitulo, .legenda), os fios, a marca, os botoes
   e os campos. Aqui fica so o que e do site.

   As tres regras do manual valem aqui como no app:
   - preto e impresso, azul e seu: caneta so para o que o VISITANTE fez (a alternativa que
     marcou na demonstracao, o numero que digitou nas notas de corte);
   - fio antes de caixa: nada de cartao, sombra ou canto arredondado — a unica excecao
     sao as bolhas ovais da folha de respostas;
   - sem vermelho e sem verde.
   Pecas que o app tambem tem (questao, veredito, planta, reta) copiam as regras dele.
   Mudou la, muda aqui.
   ===================================================================================== */

body{padding-bottom:env(safe-area-inset-bottom)}
.folha{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0}
.pular:focus{left:16px;top:12px;z-index:20;background:var(--papel);padding:10px 14px;
border:1px solid var(--tinta);font:600 14px/1 var(--f-ui)}
main:focus{outline:none}
.apagado{color:var(--grafite)}
.num{font-variant-numeric:tabular-nums lining-nums}
.mt{margin-top:24px}
.fio-leve{border:0;border-top:1px solid var(--fio);margin:0}
.fio-grosso{border:0;border-top:3px solid var(--tinta);margin:0}

/* ---- capa: a assinatura de cabecalho do manual, que ele reserva para a abertura ---- */
.capa-cab{padding-top:calc(12px + env(safe-area-inset-top))}
.capa-cab .marca{margin:0}
.cadernos{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 26px;
margin-top:18px;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.cadernos a,.site-nav a,.cab .conta{font:600 12px/1 var(--f-ui);letter-spacing:.12em;
text-transform:uppercase;text-decoration:none;color:var(--tinta);white-space:nowrap;
border-bottom:3px solid transparent;padding:13px 0 8px}
.cadernos .conta{border-bottom-color:var(--tinta)}
@media (hover:hover){.cadernos a:hover,.site-nav a:hover,.cab .conta:hover{color:var(--caneta)}}

/* ---- cabecalho das paginas internas: o mesmo do app, com o nome levando para a capa ---- */
.cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:"marca nav conta" "gf gf gf";align-items:baseline;column-gap:32px;
padding-top:calc(14px + env(safe-area-inset-top))}
.app-marca{grid-area:marca;font-family:var(--f-marca);font-weight:800;font-size:28px;
line-height:1;letter-spacing:-.015em;padding-bottom:10px;text-decoration:none;color:var(--tinta)}
.site-nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:0 22px}
.site-nav a[aria-current="page"]{border-bottom-color:var(--tinta)}
.cab .conta{grid-area:conta;justify-self:end;padding-bottom:10px;border-bottom:0;
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cab .fio-gf{grid-area:gf}
@media (max-width:980px){
.cab{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marca conta" "gf gf" "nav nav";
column-gap:12px}
.app-marca{font-size:24px}
.site-nav{flex-wrap:nowrap;gap:0 18px;overflow-x:auto;scrollbar-width:none;
-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{font-size:11px;letter-spacing:.1em;padding:15px 0 10px}
.site-nav a:last-child{margin-right:28px}
.cadernos{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:0 18px;scrollbar-width:none}
.cadernos::-webkit-scrollbar{display:none}
.cadernos a{font-size:11px;letter-spacing:.1em}
/* No celular as secoes rolam de lado, e "Entrar" ficaria no fim da fila, fora da tela.
   Ele fica preso a direita, com papel por baixo e um fio separando — sem sombra. */
.cadernos .conta{position:sticky;right:0;margin-left:auto;background:var(--papel);
padding-left:14px;border-left:1px solid var(--fio);border-bottom-color:transparent;
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}

/* ---- secoes: cada uma abre com o fio grosso e fino, como as paginas do manual ---- */
.secao{padding-top:88px}
.secao:first-child{padding-top:40px}
.sec-cab{display:grid;gap:12px;padding-top:14px;margin-bottom:36px}
.sec-cab .chapeu{display:flex;justify-content:space-between;gap:16px}
.sec-cab .chapeu span:last-child{color:var(--grafite);font-weight:500}
.sub{margin-top:56px;margin-bottom:20px;display:grid;gap:6px}
.sub .chapeu{color:var(--grafite)}
.abre{padding-top:40px}
.abre .manchete{margin-top:12px}
.abre .linha-fina{margin-top:16px}
@media (max-width:720px){.secao{padding-top:64px}}

/* ---- a primeira pagina: materia em oito colunas, lateral em quatro ---- */
.primeira{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-top:40px}
.primeira .materia{grid-column:span 8}
.primeira .lateral{grid-column:span 4;border-left:1px solid var(--fio);padding-left:32px;
display:flex;flex-direction:column;gap:28px}
.materia .manchete{margin-top:12px}
.materia .linha-fina{margin-top:16px}
.materia .botoes{margin-top:24px}
.duas-col{columns:2 18em;column-gap:36px;column-rule:1px solid var(--fio);margin-top:32px}
.duas-col p{break-inside:avoid-column}
.duas-col p+p{margin-top:.9em}
.duas-col p:first-child::first-letter{font-family:var(--f-marca);font-weight:800;float:left;
font-size:4.1em;line-height:.78;padding:6px 8px 0 0}
.indice li{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;align-items:baseline;
padding-block:9px;border-bottom:1px solid var(--fio)}
.indice li:first-child{border-top:1px solid var(--tinta)}
.indice a{font:600 17px/1.2 var(--f-texto);text-decoration:none}
@media (hover:hover){.indice a:hover{text-decoration:underline}}
.indice span{font:400 12px/1.3 var(--f-ui);color:var(--grafite);text-align:right}

/* ficha: o box de perfil do manual, fio grosso no topo */
.ficha{border-top:3px solid var(--tinta)}
.ficha>.chapeu{padding-block:10px;border-bottom:1px solid var(--tinta)}
.ficha dl{display:grid;grid-template-columns:auto 1fr;column-gap:20px;margin:0}
.ficha dt,.ficha dd{padding-block:9px;border-bottom:1px solid var(--fio);font-size:15px;line-height:1.4}
.ficha dt{font:600 12px/1.9 var(--f-ui);text-transform:uppercase;letter-spacing:.1em;color:var(--grafite)}
.ficha dd{font-family:var(--f-texto)}
.ficha dd b{font-family:var(--f-ui);font-weight:700;font-variant-numeric:tabular-nums lining-nums}
/* a agenda da capa: rotulo em cima, data embaixo, como a coluna de servico do jornal */
.ficha.agenda dl{grid-template-columns:1fr}
.ficha.agenda dt{border-bottom:0;padding-bottom:0;line-height:1.5}
.ficha.agenda dd{padding-top:2px}
.ficha.agenda dd b{white-space:nowrap}

/* O NUMERO DE DESTAQUE: Bodoni em tamanho optico baixo, um por tela, como pede o manual. */
.grande{font-family:var(--f-marca);font-weight:800;font-variation-settings:"opsz" 14;
font-size:clamp(64px,8vw,92px);line-height:.85;font-variant-numeric:lining-nums;color:var(--tinta)}
.grande small{font:italic 400 22px/1 var(--f-texto);margin-left:6px}
.pedra{font-family:var(--f-marca);font-weight:700;font-size:40px;line-height:1}
.pedra small{display:block;font:500 12px/1.4 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
color:var(--grafite);margin-top:10px}
.destaque-num{display:grid;gap:10px;border-top:3px solid var(--tinta);padding-top:14px}
.destaque-num p:not(.grande){font-size:16px;line-height:1.5}

/* ---- grades ---- */
.grade-2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 40px}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}
.c8{grid-column:span 8}.c12{grid-column:1/-1}
.quatro,.tres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--tinta)}
.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.quatro>div,.tres>div{padding:20px 22px 4px;border-left:1px solid var(--fio);display:flex;
flex-direction:column;gap:10px;min-width:0}
.quatro>div:first-child,.tres>div:first-child{border-left:0;padding-left:0}
.quatro .fig{height:112px;display:flex;align-items:center}
/* o texto corrido das colunas — e so ele: rotulo, lema, pedra e legenda guardam o proprio corpo */
.quatro p:not(.chapeu):not(.intertitulo):not(.olho):not(.pedra):not(.legenda):not(.passo),
.tres p:not(.chapeu):not(.intertitulo):not(.passo):not(.legenda){font-size:16px;line-height:1.55}
.passo{font:700 12px/1 var(--f-ui);letter-spacing:.14em;color:var(--grafite)}
/* as figurinhas dos quatro passos da capa: pecas do app em miniatura, sem enfeite */
.mini-folha{display:grid;grid-template-columns:repeat(4,auto);gap:8px 6px}
.mini-folha .bolha{width:26px;height:19px;font-size:10px}
.mini-motivo{max-width:24ch;border-left:3px solid var(--tinta);padding-left:10px}
.mini-72{display:grid;grid-template-columns:repeat(12,8px);gap:5px 4px}
.mini-72 i{display:block;width:8px;height:6px;border:1px solid var(--tinta);border-radius:50%}
.tres .botoes{margin-top:auto;padding-top:8px}

/* ---- listas de regras e de argumentos ---- */
.regras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;
border-top:1px solid var(--tinta)}
.regras li{padding-block:16px;border-bottom:1px solid var(--fio)}
.regras b{display:block;font:700 19px/1.3 var(--f-texto)}
.regras span{display:block;font-size:16px;line-height:1.55;margin-top:4px;max-width:52ch}
.texto p{max-width:var(--medida);text-wrap:pretty}
.texto p+p{margin-top:.9em}
.texto h3{margin-top:32px;margin-bottom:8px}
.texto ul.marcadores{margin-top:.9em;max-width:var(--medida)}
.texto ul.marcadores li{padding-left:18px;position:relative;margin-top:6px}
.texto ul.marcadores li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;
height:1px;background:var(--tinta)}
.olho{font:italic 300 clamp(24px,3vw,30px)/1.28 var(--f-texto);text-wrap:balance}
.fora{margin-top:40px;border:1px solid var(--tinta);padding:20px 24px;display:grid;
grid-template-columns:minmax(0,200px) 1fr;gap:12px 32px}
.fora p:not(.chapeu){font-size:16px;line-height:1.55;max-width:70ch}

/* assim e assim nao: a tabela de voz do manual */
.assim{border-top:3px solid var(--tinta)}
.assim .cab-a,.assim .lin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.3fr);
gap:6px 28px;padding-block:14px;border-bottom:1px solid var(--fio);align-items:baseline}
.assim .cab-a{border-bottom:1px solid var(--tinta);padding-block:10px}
.assim .sit{font:600 13px/1.4 var(--f-ui);color:var(--grafite)}
.assim .sim{font:500 18px/1.4 var(--f-texto)}
.assim .nao{font:400 17px/1.4 var(--f-texto);color:var(--grafite);text-decoration:line-through;
text-decoration-thickness:1px;text-decoration-color:var(--grafite)}
.assim .rot{display:none}
.proibidas{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font:italic 400 19px/1.3 var(--f-texto);
color:var(--grafite)}
.proibidas s{text-decoration-thickness:1px}

/* ---- estado do mapa: forma e palavra, nunca cor ---- */
.estado{display:inline-flex;align-items:center;gap:7px;font:500 13px/1.2 var(--f-ui);white-space:nowrap}
.estado svg{width:12px;height:12px;flex:none}
.estados{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--tinta)}
.estados>div{padding:16px 16px 0;border-left:1px solid var(--fio);display:grid;gap:6px;align-content:start}
.estados>div:first-child{border-left:0;padding-left:0}
.estados svg{width:22px;height:22px;color:var(--tinta)}
.estados b{font:600 16px/1.25 var(--f-texto)}
.estados span{font:400 13px/1.45 var(--f-ui);color:var(--grafite)}

/* ---- errata e caixa de aviso: os unicos contornos fechados ---- */
.errata{border:1px solid var(--tinta);padding:16px 18px 18px;display:grid;gap:8px}
.errata .chapeu{display:flex;justify-content:space-between;gap:12px}
.errata .chapeu span:last-child{font-weight:500;color:var(--grafite);letter-spacing:.06em}
.errata p:not(.chapeu){font-size:16px;line-height:1.5}

/* ---- tabelas: fio grosso no topo, fino entre as linhas ---- */
.rolagem{overflow-x:auto}
.tabela{width:100%;min-width:300px;border-collapse:collapse;font:400 15px/1.3 var(--f-ui);
font-variant-numeric:tabular-nums lining-nums}
.tabela caption{text-align:left;font:700 12px/1.25 var(--f-ui);text-transform:uppercase;
letter-spacing:.14em;padding-bottom:8px}
.tabela th{font:600 11px/1.2 var(--f-ui);text-transform:uppercase;letter-spacing:.1em;
color:var(--grafite);text-align:left;padding:8px 8px 8px 0;border-top:3px solid var(--tinta);
border-bottom:1px solid var(--tinta);vertical-align:bottom}
.tabela td{padding:9px 8px 9px 0;border-bottom:1px solid var(--fio);vertical-align:baseline}
.tabela .r{text-align:right;padding-right:18px}
.tabela td:first-child{font:500 16px/1.3 var(--f-texto)}
.tabela td.ui{font:400 14px/1.35 var(--f-ui)}
.tabela .apagado{color:var(--grafite)}

/* ---- grafico de barras: uma serie, uma cor, o valor na ponta. A barra mais baixa leva
   tinta (e dela que o texto fala); as outras, grafite. Raio zero, como pede o manual. ---- */
.barras{border-top:3px solid var(--tinta)}
.barras li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 4ch minmax(0,110px);
gap:4px 14px;align-items:center;padding-block:7px;border-bottom:1px solid var(--fio)}
.b-rot{font:500 16px/1.3 var(--f-texto)}
.b-trilho{height:14px;position:relative}
.b-trilho i{position:absolute;left:0;top:0;bottom:0;background:var(--grafite)}
.barras li.destaque .b-trilho i{background:var(--tinta)}
.barras li.destaque .b-rot,.barras li.destaque .b-val{font-weight:700}
.b-val{font:600 15px/1 var(--f-ui);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.b-n{font:400 12px/1.3 var(--f-ui);color:var(--grafite)}
.escala-barras{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 4ch minmax(0,110px);
gap:0 14px;font:400 11px/1 var(--f-ui);color:var(--grafite);padding-top:6px}
.escala-barras span:nth-child(2){display:flex;justify-content:space-between}
@media (max-width:720px){
.barras li,.escala-barras{grid-template-columns:minmax(0,1fr) 4ch}
.b-rot{grid-column:1/-1}.b-trilho{grid-column:1}.b-val{grid-column:2}.b-n{grid-column:1/-1}
.escala-barras span:first-child,.escala-barras span:nth-child(n+3){display:none}
.escala-barras span:nth-child(2){grid-column:1}}

/* ---- a folha de respostas de uma prova inteira, bloco por bloco ---- */
.folha-prova{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 28px;
border-top:3px solid var(--tinta);padding-top:18px}
.bloco-folha .chapeu{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;
border-bottom:1px solid var(--fio);margin-bottom:10px}
.bloco-folha .chapeu span{color:var(--grafite);font-weight:500;font-variant-numeric:tabular-nums}
.bolhas{display:flex;flex-wrap:wrap;gap:8px 6px}
.bolhas .bolha{width:30px;height:22px;font-size:10px;font-variant-numeric:tabular-nums}

/* ---- a questao, igual a do app: sete colunas para ela, cinco para o veredito ---- */
.q-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:start}
.q-lado{position:sticky;top:16px;display:grid;gap:16px}
@media (max-width:1000px){.q-grade{grid-template-columns:minmax(0,1fr)}.q-lado{position:static}}
.q-meta{display:flex;justify-content:space-between;gap:4px 16px;align-items:baseline;flex-wrap:wrap}
.q-meta .legenda{font-variant-numeric:tabular-nums}
.enunciado{font:400 18px/1.55 var(--f-texto);margin-top:14px;white-space:pre-wrap;
max-width:var(--medida);overflow-wrap:break-word}
.enunciado,.alt{-webkit-user-select:text;user-select:text}
.alts{display:grid;margin-top:18px;border-top:1px solid var(--fio)}
.linha-alt{display:flex;align-items:stretch;border-bottom:1px solid var(--fio)}
.alt{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;column-gap:14px;padding:11px 0;min-height:48px;border:0;background:none;
font:400 17px/1.4 var(--f-texto);color:var(--tinta);text-align:left;cursor:pointer}
.alt[disabled]{cursor:default;color:var(--tinta)}
.alt-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.marcas{display:flex;gap:10px;padding-left:6px}
.marcas:empty{display:none}
@media (max-width:720px){.alt{grid-template-columns:auto minmax(0,1fr)}
.alt .bolha{grid-row:1 / span 2}.marcas{grid-column:2;padding-left:0;margin-top:5px}}
/* A bolha e oval como na folha de respostas: a unica excecao ao raio zero. */
.bolha{flex:none;width:30px;height:22px;border-radius:50%;border:1.25px solid var(--tinta);
display:inline-grid;place-items:center;font:700 11px/1 var(--f-ui);color:var(--tinta);
background:transparent;transition:background var(--tempo),color var(--tempo)}
@media (hover:hover){.alt:not([disabled]):hover .bolha:not(.sua):not(.gab){background:var(--reticula)}}
.bolha.sua{background:var(--caneta);border-color:var(--caneta);color:var(--papel)}
.bolha.gab{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.marca-txt{font:600 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
color:var(--grafite);white-space:nowrap}
.marca-txt.azul{color:var(--caneta)}
.riscar{flex:none;width:44px;display:grid;place-items:center;border:0;background:none;
color:var(--grafite);cursor:pointer;padding:0;touch-action:manipulation}
.riscar svg{width:12px;height:12px}
@media (hover:hover){.riscar:not([disabled]):hover{color:var(--tinta)}}
.riscar[aria-pressed="true"]{color:var(--caneta)}
.riscar[disabled]{cursor:default}
.linha-alt.fora .alt-txt{color:var(--grafite);text-decoration:line-through;
text-decoration-color:var(--caneta);text-decoration-thickness:1.5px}
.linha-alt.fora .bolha:not(.gab):not(.sua){border-color:var(--fio);color:var(--grafite)}
mark.grifo{background:var(--caneta-clara);color:inherit;box-shadow:inset 0 -1.5px 0 var(--caneta);cursor:pointer}
#pincel{position:fixed;z-index:9;font:600 14px/1 var(--f-ui);letter-spacing:.02em;
padding:14px 20px;min-height:44px;border:1px solid var(--tinta);background:var(--tinta);
color:var(--papel);border-radius:0;cursor:pointer;box-shadow:0 0 0 2px var(--papel);
touch-action:manipulation}
.fonte{margin-top:12px}
.acao{margin-top:22px;display:grid;gap:16px}
.confianca .legenda{margin-bottom:8px}
.segmentos{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--tinta)}
.segmentos button{font:600 13px/1 var(--f-ui);padding:12px 6px;min-height:44px;border:0;
border-left:1px solid var(--tinta);background:none;color:var(--tinta);cursor:pointer;
transition:background var(--tempo),color var(--tempo);touch-action:manipulation}
.segmentos button:first-child{border-left:0}
.segmentos button[aria-pressed="true"]{background:var(--caneta-clara);color:var(--caneta);
box-shadow:inset 0 -3px 0 var(--caneta)}
.segmentos button[disabled]{cursor:default}
.dicas{display:grid;gap:8px}
.so-teclado{display:none}
@media (hover:hover) and (pointer:fine){.so-teclado{display:block}}
.veredito{border-top:3px solid var(--tinta);padding-top:12px;display:grid;gap:8px}
.veredito:focus{outline:none}
.veredito .v{font:700 30px/1.1 var(--f-texto);letter-spacing:-.01em}
.veredito .v span{font-weight:400}
.veredito p{font-size:16px;line-height:1.5}
.veredito .legenda{font-size:13px}
.no-app{border-top:1px solid var(--fio);padding-top:10px;display:grid;gap:6px}
.no-app .chapeu{color:var(--grafite)}
.no-app p:not(.chapeu){font-size:15px;line-height:1.5}
.progresso{font:500 12px/1.2 var(--f-ui);letter-spacing:.06em;color:var(--grafite);
font-variant-numeric:tabular-nums}

/* COMO OS CANDIDATOS RESPONDERAM: quatro barras, uma por alternativa. O gabarito e tinta
   (e o que a prova afirma), a marcada pelo visitante e caneta (e dele), o resto e fio.
   Cada barra leva o numero na ponta: a cor nunca e o unico jeito de ler. */
.dist{display:grid;gap:0;margin-top:4px}
.dist li{display:grid;grid-template-columns:30px minmax(0,1fr) 4ch minmax(0,11ch);gap:10px;
align-items:center;padding-block:5px}
.dist .d-tr{height:12px;position:relative;background:linear-gradient(var(--fio),var(--fio)) 0 50%/100% 1px no-repeat}
.dist .d-tr i{position:absolute;left:0;top:0;bottom:0;background:var(--fio)}
.dist li.gab .d-tr i{background:var(--tinta)}
.dist li.sua .d-tr i{background:var(--caneta)}
.dist .d-v{font:600 13px/1 var(--f-ui);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.dist .bolha{width:26px;height:19px;font-size:10px}

/* ---- notas de corte: uma reta de 0 a 72 por curso, alinhadas ---- */
.filtros{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:0 24px;
align-items:end}
.filtros .campo{margin-top:0}
@media (max-width:720px){.filtros{grid-template-columns:1fr;gap:16px}}
.sua-nota{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center;
border-top:3px solid var(--tinta);padding-top:14px;margin-top:28px}
.sua-nota .grande{color:var(--caneta)}
.sua-nota .grande.sem-valor{color:var(--fio)}
.sua-nota input[type=range]{width:100%;accent-color:var(--caneta);border:0;padding:0;margin:10px 0 4px;
height:28px;background:transparent}
.sua-nota .dado{margin-top:6px}
@media (max-width:720px){.sua-nota{grid-template-columns:1fr}}
.cortes-cab,.cortes-lista li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) 5ch;
gap:4px 18px;align-items:center}
.cortes-cab{font:600 11px/1.2 var(--f-ui);text-transform:uppercase;letter-spacing:.1em;
color:var(--grafite);padding:8px 0;border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta);
margin-top:28px}
.cortes-cab .c-escala{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;
letter-spacing:0;text-transform:none;font-weight:500}
.cortes-lista li{padding-block:8px;border-bottom:1px solid var(--fio)}
.cortes-lista li[hidden]{display:none}
.c-nome{font:500 16px/1.3 var(--f-texto);min-width:0}
.c-nome small{display:block;font:400 12px/1.3 var(--f-ui);color:var(--grafite)}
.c-reta{height:18px;position:relative;
background:linear-gradient(var(--fio),var(--fio)) 0 50%/100% 1px no-repeat}
.c-reta i{position:absolute;top:1px;bottom:1px;width:2px;margin-left:-1px;background:var(--tinta)}
.c-reta s{position:absolute;top:-9px;bottom:-9px;width:2px;margin-left:-1px;background:var(--caneta);
text-decoration:none}
.c-num{font:700 15px/1 var(--f-ui);font-variant-numeric:tabular-nums lining-nums;text-align:right;
white-space:nowrap}
.cortes-lista li.sem .c-num,.cortes-lista li.sem .c-nome{color:var(--grafite)}
.cortes-lista li.alcanca .c-num::before{content:"";display:inline-block;width:6px;height:6px;
border-radius:50%;background:var(--caneta);margin-right:6px;vertical-align:2px}
@media (max-width:720px){
.cortes-cab,.cortes-lista li{grid-template-columns:minmax(0,1fr) 5ch}
.c-nome{grid-column:1/-1}.c-reta,.cortes-cab .c-escala{grid-column:1}.c-num{grid-column:2}
.cortes-cab>span:first-child{display:none}}
.vazio{border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);padding-block:28px;
display:grid;gap:10px;justify-items:start}
.vazio .intertitulo{font-size:24px}
.vazio p{font-size:16px;line-height:1.5;max-width:52ch}

/* ---- o mapa de exemplo: planta, cotacoes, projecao, lacunas — copiados do app ---- */
.painel{border:1px solid var(--fio);padding:22px clamp(16px,3vw,32px) 28px}
.painel .app-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-bottom:8px}
.painel .app-cab .app-marca{font-size:24px;padding:0}
.painel .app-nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.painel .app-nav span{font:600 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
padding-block:8px 6px;border-bottom:3px solid transparent}
.painel .app-nav span[aria-current]{border-bottom-color:var(--tinta)}
.painel .app-data{font:500 12px/1.2 var(--f-ui);color:var(--grafite);letter-spacing:.04em}
.painel-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 48px;margin-top:24px}
@media (max-width:1000px){.painel-corpo{grid-template-columns:minmax(0,1fr)}}
.sub-mapa{font:400 14px/1.5 var(--f-ui);color:var(--grafite);max-width:74ch;margin-top:6px}
.planta{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto}
.planta text{font-family:var(--f-ui)}
.planta .rotulo{font-size:12.5px;font-weight:600;fill:var(--tinta)}
.planta .rotulo.apagado{fill:var(--grafite);font-weight:500}
.planta .escala-txt{font-size:10px;fill:var(--grafite)}
.planta .anel{fill:none;stroke:var(--fio);stroke-width:1}
.planta .anel.zero{stroke:var(--tinta);stroke-width:1}
.planta .anel.geral{stroke:var(--caneta);stroke-width:1.75}
.planta .rua{stroke:var(--fio);stroke-width:1}
.planta .rua.sem{stroke-dasharray:2 4}
.planta.mini .anel,.planta.mini .rua{stroke:var(--grafite)}
.planta .praca{fill:var(--papel);stroke:var(--tinta);stroke-width:1.25}
.planta .ponto{fill:var(--caneta);stroke:var(--papel);stroke-width:2}
.planta .ponto.oco{fill:var(--papel);stroke:var(--caneta);stroke-width:1.75}
.planta .alvo{fill:transparent}
.cotacoes{width:100%;min-width:300px;border-collapse:collapse;font:400 15px/1.3 var(--f-ui);
font-variant-numeric:tabular-nums lining-nums}
.cotacoes caption{text-align:left;font:700 12px/1.25 var(--f-ui);text-transform:uppercase;
letter-spacing:.14em;padding-bottom:8px}
.cotacoes th{font:600 11px/1.2 var(--f-ui);text-transform:uppercase;letter-spacing:.1em;
color:var(--grafite);text-align:left;padding:8px 8px 8px 0;border-top:3px solid var(--tinta);
border-bottom:1px solid var(--tinta)}
.cotacoes td{padding:9px 8px 9px 0;border-bottom:1px solid var(--fio)}
.cotacoes .r{text-align:right;padding-right:18px}
.cotacoes td:first-child{font:500 16px/1.3 var(--f-texto)}
.cotacoes .estado{white-space:normal}
.projecao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:end;
border-top:3px solid var(--tinta);padding-top:14px}
@media (max-width:720px){.projecao{grid-template-columns:1fr}}
.reta{width:100%;height:auto;display:block;margin-top:10px}
.reta text{font-family:var(--f-ui);font-size:11px;fill:var(--grafite);font-variant-numeric:tabular-nums}
.reta .eixo{stroke:var(--tinta);stroke-width:1}
.reta .tick{stroke:var(--fio);stroke-width:1}
.reta .corte{stroke:var(--tinta);stroke-width:1.5}
.reta .corte-txt{fill:var(--tinta);font-weight:600}
.reta .faixa-sua{fill:var(--caneta-clara)}
.reta .voce{fill:var(--caneta);stroke:var(--papel);stroke-width:2}
.cortes{display:grid;margin-top:4px}
.cortes li{display:grid;grid-template-columns:36px 1fr;gap:10px;font:400 14px/1.4 var(--f-ui);
padding-block:6px;border-bottom:1px solid var(--fio)}
.cortes li b{font-variant-numeric:tabular-nums;font-weight:700}
.bloco>.chapeu{padding-bottom:8px;border-bottom:3px solid var(--tinta)}
.lacunas li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-block:9px;
border-bottom:1px solid var(--fio);align-items:baseline}
.lacunas li b{font:500 16px/1.3 var(--f-texto)}
.lacunas li span{font:400 13px/1.3 var(--f-ui);color:var(--grafite)}
.lacunas li em{font:600 14px/1.3 var(--f-ui);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.rotulo-exemplo{display:inline-block;font:600 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
padding:5px 8px;border:1px solid var(--tinta)}

/* ---- perguntas: abrem e fecham, com + e − como as disciplinas do mapa ---- */
.perguntas{border-top:3px solid var(--tinta)}
.perguntas details{border-bottom:1px solid var(--fio)}
.perguntas summary{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:baseline;
padding:14px 0;cursor:pointer;list-style:none;font:600 19px/1.35 var(--f-texto)}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::before{content:"+";font:500 17px/1 var(--f-ui);color:var(--grafite)}
.perguntas details[open]>summary::before{content:"\2212"}
.perguntas .resp{padding:0 0 20px 32px}
.perguntas .resp p{font-size:17px;line-height:1.6;max-width:var(--medida)}
.perguntas .resp p+p{margin-top:.8em}
@media (max-width:720px){.perguntas .resp{padding-left:0}}
.grupo-perg{margin-top:48px}
.grupo-perg:first-of-type{margin-top:0}
.grupo-perg>.chapeu{color:var(--grafite);margin-bottom:10px}

/* ---- rodape ---- */
.rodape-site{margin-top:96px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.rodape-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:24px 32px;
padding-top:22px}
.rodape-cols .chapeu{margin-bottom:10px}
.rodape-cols li{font:400 14px/1.4 var(--f-ui);padding-block:4px}
.rodape-cols a{text-decoration:none}
@media (hover:hover){.rodape-cols a:hover{text-decoration:underline}}
.rodape-aviso p:not(.chapeu){font:400 13px/1.5 var(--f-ui);color:var(--grafite);max-width:48ch}
.rodape-aviso p+p{margin-top:8px}
.rodape-linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:28px;
padding-top:12px;border-top:1px solid var(--fio);font:500 12px/1.4 var(--f-ui);letter-spacing:.06em;
text-transform:uppercase;color:var(--grafite)}

/* ---- creditos ---- */
.creditos{columns:3 16em;column-gap:36px;column-rule:1px solid var(--fio)}
.creditos>div{break-inside:avoid;padding-bottom:18px}
.creditos p:not(.chapeu),.creditos li{font:400 14px/1.55 var(--f-ui)}
.creditos li{padding-block:3px}
.creditos .chapeu{margin-bottom:8px}

/* ---- responsivo ---- */
@media (max-width:1000px){
.primeira .materia,.primeira .lateral{grid-column:1/-1}
.primeira .lateral{border-left:0;padding-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
.quatro>div:nth-child(3){border-left:0;padding-left:0}
.quatro>div:nth-child(n+3){border-top:1px solid var(--fio)}
.c4,.c5,.c6,.c7,.c8{grid-column:1/-1}
.grade-2,.primeira{grid-template-columns:minmax(0,1fr)}
.estados{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
.estados>div:nth-child(4){border-left:0;padding-left:0}
.rodape-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.rodape-aviso{grid-column:1/-1}}
@media (max-width:720px){
.primeira{gap:24px;padding-top:28px}
.primeira .lateral{grid-template-columns:1fr}
.quatro,.tres,.regras,.fora{grid-template-columns:1fr}
.quatro>div,.tres>div{border-left:0;padding-left:0;padding-right:0}
.quatro>div+div,.tres>div+div{border-top:1px solid var(--fio);margin-top:16px}
.estados{grid-template-columns:repeat(2,minmax(0,1fr))}
.estados>div:nth-child(odd){border-left:0;padding-left:0}
.estados>div:nth-child(4){border-left:1px solid var(--fio);padding-left:16px}
.assim .cab-a{display:none}
.assim .lin{grid-template-columns:1fr;gap:6px}
.assim .rot{display:inline;font:600 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
color:var(--grafite);margin-right:8px;text-decoration:none}
.rodape-cols{grid-template-columns:1fr 1fr}
.duas-col{columns:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.cab,.cadernos,.rodape-cols nav,.pular{display:none}body{background:#fff}}