@import url('/portal-media.css?v=20260914-webp');
@import url('/mobile-image-fit.css?v=20260914-no-crop');

/* Cabeçalho do site inteiro.

   Vive num arquivo próprio porque o mesmo cabeçalho é carimbado em toda página
   estática pelo scripts/build-seo.cjs — inclusive nas escritas à mão (termos,
   obrigado, recuperar), que não carregam seo.css. Quem chega em qualquer página
   por um link do Google precisa conseguir sair dali para qualquer outra parte
   do site, e não só voltar para a home. */

/* Trava global: a página nunca cria rolagem horizontal. Componentes internos
   podem quebrar linha, reduzir largura ou recortar decoração, mas o documento
   permanece com scroll apenas vertical. */
html,body{width:100%;max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,picture,video,canvas,svg{max-width:100%}
img,video{height:auto}

/* O cabeçalho é fixo no topo: a saída para outra página tem de estar disponível
   a qualquer altura da rolagem, não só no começo. Como ele cobre o topo da
   janela, os links internos (#apostilas, #metodo) precisam parar abaixo dele. */
html{scroll-padding-top:104px}
/* A barra é azul-marinho, e não creme, porque ela é a moldura do portal: some
   a linha entre "cabeçalho" e "página" quando as duas são claras, e era isso
   que fazia cada seção do site parecer um site diferente. Sendo escura, ela
   emoldura qualquer conteúdo que venha abaixo — foto, texto ou formulário.
   A barra ocupa a largura inteira da janela; só o conteúdo dela é centralizado,
   senão o azul terminaria no meio da tela em monitores largos. */
.guide-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;padding:10px max(24px,calc((100% - 1180px)/2));background:rgba(8,40,79,.94);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(228,201,130,.24)}
.guide-brand{display:flex;align-items:center;flex-shrink:0;font:700 22px Georgia,serif;color:#f3ead9;text-decoration:none}
/* A logo original é azul-marinho sobre transparente: sobre esta barra ela
   sumiria. Aqui entra a versão de tinta creme, gerada do mesmo desenho pelo
   scripts/build-images.py. E não há mais mix-blend-mode: aquilo existia para
   apagar o fundo branco de um arquivo que não tinha transparência de verdade —
   agora tem, e o truque só escureceria a logo contra o azul. */
.guide-brand img{width:98px;height:80px;object-fit:contain}
.guide-header nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.guide-header nav a{font:800 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#dce5ef;text-decoration:none;white-space:nowrap}
.guide-header nav a:hover{color:#e4c982}
.guide-header nav a:focus-visible{outline:3px solid #e4c982;outline-offset:4px;border-radius:6px}
.nav-access{padding:9px 14px;border:1px solid rgba(228,201,130,.55);border-radius:999px;background:transparent;color:#e4c982!important}
.nav-access:hover{background:rgba(228,201,130,.14)}

/* Menu de concursos: estado -> cidade. Abre no hover e no foco do teclado, sem
   depender de JavaScript — a página inteira é estática. */
.mega{position:static}
.mega-trigger{position:relative;z-index:2}
.mega-panel{position:absolute;left:0;right:0;top:100%;z-index:30;display:none;background:#fff;border:1px solid #e6dece;border-radius:0 0 14px 14px;padding:22px 24px;box-shadow:0 26px 44px rgba(8,40,79,.14);max-height:70vh;overflow-y:auto;overflow-x:hidden}
.mega:hover .mega-panel,.mega:focus-within .mega-panel{display:block}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.mega-uf{display:block;margin-bottom:10px;font:900 11px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#85662c;text-decoration:none}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-col li a{display:block;margin-left:-8px;padding:6px 8px;border-radius:8px;font:400 15px/1.4 system-ui,-apple-system,sans-serif;color:#08284f;text-decoration:none;white-space:normal}
.mega-col li a:hover{background:#f4f0e6}
.mega-col li a span{display:block;font-size:11px;font-weight:400;letter-spacing:.02em;color:#66717d}
.mega-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid #efe8da;font:400 12px/1.5 system-ui,sans-serif;color:#66717d}


/* ------------------------------------------------------------------ *
 * Menu do celular, sobre o cabeçalho do portal.
 * ------------------------------------------------------------------ */

/* O botão nasce escondido em qualquer largura e só é revelado pela classe
   js-menu, que apenas o site-header.js aplica. Hambúrguer visível que não abre
   é pior do que menu nenhum. */
.nav-toggle{display:none}

/* Recorte da foto por largura. A faixa das páginas internas usa uma imagem de
   fundo, e uma foto larga num aparelho estreito é cortada justamente no meio,
   que é onde o assunto está. Cada largura recebe o recorte feito para ela. */
@media(max-width:1024px){
  .portal-inner-hero{background-image:linear-gradient(90deg,rgba(4,28,54,.98) 0%,rgba(4,28,54,.78) 43%,rgba(4,28,54,.20) 76%,rgba(4,28,54,.06)),var(--inner-image-tab,var(--inner-image))}
}
@media(max-width:760px){
  .portal-inner-hero{background-image:linear-gradient(180deg,rgba(4,28,54,.22),rgba(4,28,54,.92) 68%),var(--inner-image-mob,var(--inner-image))}
}

/* A trilha de migalhas dentro da faixa escura. Ela chega com a cor do texto
   corrido, que sobre fundo azul quase some. */
.portal-inner-copy .crumbs,.portal-inner-copy nav[aria-label="Trilha"]{margin:0 0 14px;font-size:12px;color:#c3d3e2}
.portal-inner-copy .crumbs a,.portal-inner-copy nav[aria-label="Trilha"] a{color:#e1bd61;text-decoration:none}
.portal-inner-copy .crumbs a:hover{text-decoration:underline}

@media(max-width:900px){
  /* A barra de navegação do portal vira gaveta. O que ela fazia antes era
     rolar de lado: oito itens num trilho horizontal, onde os últimos só
     aparecem para quem descobre que precisa arrastar. Menu escondido atrás de
     um gesto não descoberto é menu que não existe. */
  .portal-primary{position:relative}
  .portal-site-header.js-menu .portal-primary{display:flex;align-items:center;min-height:52px;padding-inline:12px}
  .portal-site-header.js-menu .nav-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:transparent;color:#fff;font:800 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
  .portal-site-header.js-menu .nav-toggle:focus-visible{outline:3px solid #e1bd61;outline-offset:3px}
  .nav-toggle-riscos{display:grid;gap:4px;width:18px}
  .nav-toggle-riscos i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .portal-site-header.js-menu[data-menu-aberto] .nav-toggle-riscos i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .portal-site-header.js-menu[data-menu-aberto] .nav-toggle-riscos i:nth-child(2){opacity:0}
  .portal-site-header.js-menu[data-menu-aberto] .nav-toggle-riscos i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* A gaveta desce por baixo da barra, com rolagem própria: num telefone
     deitado a lista inteira não cabe, e sem isso os últimos itens ficariam
     inalcançáveis. */
  .portal-site-header.js-menu .portal-primary>.portal-wide{display:none}
  .portal-site-header.js-menu[data-menu-aberto] .portal-primary>.portal-wide{position:absolute;left:0;right:0;top:100%;z-index:70;display:flex;flex-direction:column;align-items:stretch;width:100%!important;max-height:calc(100dvh - 190px);overflow-y:auto;overflow-x:hidden;margin:0;padding:6px 16px 18px;background:#06294f;border-top:1px solid rgba(225,189,97,.3);box-shadow:0 24px 48px rgba(3,17,35,.45)}
  .portal-site-header.js-menu[data-menu-aberto] .portal-primary>.portal-wide a{display:block;height:auto;padding:14px 4px;font:800 16px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;color:#fff;border-bottom:1px solid rgba(225,189,97,.14)}
  .portal-site-header.js-menu[data-menu-aberto] .portal-home-link{display:none}
}
@media(max-width:520px){
  .portal-site-header.js-menu .nav-toggle{padding:9px 13px}
}
@media(prefers-reduced-motion:reduce){.nav-toggle-riscos i{transition:none}}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media print{.guide-header,.portal-site-header{display:none!important}}