:root {
  --fundo: #0b1017;
  /* A faixa do fecho da pagina de entrada, um tom acima do fundo. */
  --fecho: #0d131b;
  --painel: #131a24;
  --painel-alto: #1a2331;
  --risca: #253143;
  /* O traco dos icones da tela; aqui tambem a borda de um cartao com o rato em cima. */
  --risca-viva: #3b4a60;
  --texto: #e6edf6;
  --apagado: #8ea0b8;
  --azul: #4a9eff;
  --azul-claro: #8fc2ff;
  --azul-escuro: #1e3a5f;
  --verde: #3fb950;
  --amarelo: #d29922;
  --vermelho: #f85149;
  --raio: 10px;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; transition: color 400ms ease-out; }
a:hover { color: var(--azul-claro); text-decoration: none; }

/* Foco visivel so para quem navega pelo teclado — o rato nao precisa dele. */
a:focus-visible, button:focus-visible, summary:focus-visible, .botao:focus-visible, .rolar:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 7px;
}

/* "Saltar para o conteudo": escondido ate alguem chegar la com o Tab. */
.salto {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--azul-escuro); color: #fff; border: 1px solid var(--azul);
  border-radius: 7px; padding: 9px 14px; font-size: 14px; font-weight: 600;
}
.salto:focus { top: 12px; }

h1 { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; margin: 0; }

code, .codigo { font-family: var(--mono); font-size: 13px; }

/* Cores de texto. So para o que diz alguma coisa: bom, mau, fraco. */
.txt-verde { color: var(--verde); }
.txt-vermelho { color: var(--vermelho); }
.txt-amarelo { color: var(--amarelo); }
.txt-azul { color: var(--azul); }
.txt-apagado { color: var(--apagado); }
.txt-texto { color: var(--texto); }
.forte { font-weight: 600; }

/* ---- campos e botoes ---- */
input, select, textarea {
  background: var(--painel-alto); color: var(--texto);
  border: 1px solid var(--risca); border-radius: 7px; padding: 9px 12px;
  font: inherit; font-size: 14px;
}
input::placeholder, textarea::placeholder { color: var(--apagado); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
textarea { resize: vertical; line-height: 1.5; }

button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--azul-escuro); color: #fff; border: 1px solid var(--azul);
  border-radius: 7px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out;
}
button:hover, .botao:hover { background: var(--azul); color: #fff; }
button:active, .botao:active { transform: translateY(1px); transition: none; }
button.perigo, .botao.perigo { background: rgba(248,81,73,.12); border-color: var(--vermelho); color: var(--vermelho); }
button.perigo:hover, .botao.perigo:hover { background: var(--vermelho); color: #fff; }
button.discreto, .botao.discreto { background: transparent; border-color: var(--risca); color: var(--apagado); }
button.discreto:hover, .botao.discreto:hover { background: var(--painel-alto); color: var(--texto); }

/* ---- avisos ----
   O ":not(.cartao)" nao e enfeite: "aviso" e tambem a cor amarela de um cartao
   de numeros, e sem isto o cartao apanhava a margem e o enchimento do aviso. */
.aviso:not(.cartao) {
  padding: 15px 17px; border-radius: var(--raio); margin-bottom: 22px;
  border: 1px solid var(--risca); background: var(--painel);
  font-size: 14px; color: var(--apagado); text-wrap: pretty;
}
.aviso:not(.cartao) strong { color: var(--texto); }
.aviso.bom:not(.cartao) { border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.07); }
.aviso.mau:not(.cartao) { border-color: rgba(248,81,73,.45); background: rgba(248,81,73,.07); }
.aviso.depois:not(.cartao) { margin: 22px 0 0; }

/* ---- a porta fechada (403, 404, erro) ---- */
.porta { max-width: 480px; margin: 110px auto; text-align: center; padding: 0 20px; }
.porta .marca { font-size: 26px; }
.porta h1 { font-size: 30px; margin-top: 18px; }
.porta p { color: var(--apagado); margin: 14px 0 26px; text-wrap: pretty; }
.porta .acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.porta .botao { padding: 12px 22px; font-size: 15px; }
.porta .acoes form { margin: 0; }
.porta .acoes button { padding: 12px 22px; font-size: 15px; }

/* Quem pediu menos movimento nao leva transicoes nem animacoes: o site continua a
   ler-se igual, so deixa de se mexer. (O scroll narrativo ja tem a sua regra.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.marca { font-size: 14px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; color: var(--texto); }
.marca span { color: var(--azul); }
a.marca:hover { color: var(--texto); }


/* ---- barra de cima ---- */
.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 0 32px; height: 60px;
  background: rgba(11, 16, 23, .72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(37, 49, 67, .7);
  position: sticky; top: 0; z-index: 20;
}
.topo .grupos { display: flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: wrap; }
.topo .grupos a, .sub a {
  padding: 7px 11px; border-radius: 7px;
  color: var(--apagado); font-size: 13px; white-space: nowrap;
  transition: background 300ms ease-out, color 300ms ease-out;
}
.topo .grupos a:hover, .sub a:hover { background: var(--painel-alto); color: var(--texto); }
/* O grupo aceso e discreto; o azul fica para a pagina onde se esta. */
.topo .grupos a.aceso { background: var(--painel-alto); color: var(--texto); }
.topo .grupos a.ativo, .sub a.ativo { background: var(--azul-escuro); color: #fff; }

/* ---- sub-barra: as paginas do grupo onde se esta ---- */
.sub {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  padding: 7px 32px; min-height: 46px;
  background: rgba(11, 16, 23, .6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(37, 49, 67, .5);
  position: sticky; top: 60px; z-index: 19;
}
.sub .rotulo-grupo {
  font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--apagado); margin-right: 10px;
}

/* ---- quem entrou ---- */
.eu { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.eu .quem { display: flex; align-items: center; gap: 10px; color: var(--texto); }
a.quem:hover .nome { color: var(--azul-claro); }
.eu img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--risca); }
.eu .nome { font-size: 13px; font-weight: 600; transition: color 400ms ease-out; }
.eu .cargo { font-size: 11px; color: var(--apagado); text-transform: uppercase; letter-spacing: .5px; }
.eu form { margin: 0; }

/* ---- a pesquisa ---- */
.pesquisa-barra { margin: 0; }
.pesquisa-barra input { width: 190px; padding: 7px 11px; font-size: 13px; background: var(--painel); transition: width 300ms ease-out; }
.pesquisa-barra input:focus { width: 260px; }
.pesquisa-gaveta { margin: 0; }
.pesquisa-gaveta input { width: 100%; padding: 12px 14px; font-size: 16px; }

/* ---- o sino ---- */
.sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; color: var(--apagado);
  transition: background 300ms ease-out, color 300ms ease-out;
}
.sino:hover, .sino.ativo { background: var(--painel-alto); color: var(--texto); }
.sino .contador {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--vermelho); color: #fff; box-shadow: 0 0 0 2px var(--fundo);
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ---- gaveta do telemovel (escondida no computador) ---- */
/* A gaveta abre por baixo da barra, presa a ela (que e sticky) e nao ao ecra:
   o backdrop-filter da barra faz dela o bloco de conter dos filhos "fixed", e
   um "position: fixed" aqui dentro ficava com a altura da barra — zero. */
.gaveta { display: none; }
.gaveta summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 14px; border: 1px solid var(--risca); border-radius: 7px;
  font-size: 14px; font-weight: 600; color: var(--texto);
}
.gaveta summary::-webkit-details-marker { display: none; }
.gaveta[open] summary { background: var(--painel-alto); }
.gaveta .corpo-gaveta {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--fundo); border-top: 1px solid var(--risca);
  padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 18px;
}
.gaveta .grupo-gaveta { display: flex; flex-direction: column; gap: 2px; }
.gaveta .grupo-gaveta b {
  font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--apagado); margin-bottom: 4px;
}
.gaveta .grupo-gaveta a {
  padding: 11px 12px; border-radius: 7px; color: var(--texto); font-size: 15px;
}
.gaveta .grupo-gaveta a.ativo { background: var(--azul-escuro); color: #fff; }

/* ---- a pagina ---- */
body.painel main { max-width: 1240px; margin: 0 auto; padding: 44px 32px 72px; }
.cabeca { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.cabeca .legenda { margin: 0; }

body.painel main h2 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .8px; color: var(--apagado); margin: 42px 0 14px;
}
body.painel main h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--texto); margin: 30px 0 12px;
}
.legenda { font-size: 15px; color: var(--apagado); margin: 0 0 22px; max-width: 700px; text-wrap: pretty; }
.legenda strong { color: var(--texto); }
body.painel main h2 + .legenda { margin: -6px 0 14px; }
.legenda.depois { margin: 12px 0 0; }
.nota { font-size: 12px; color: var(--apagado); }

/* ---- cartoes de numeros ---- */
.grelha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cartao {
  background: var(--painel); border: 1px solid var(--risca);
  border-radius: var(--raio); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.cartao .rotulo { color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.cartao .numero { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; }
.cartao .numero.codigo { font-family: var(--mono); font-size: 28px; letter-spacing: 0; }
.cartao .nota { color: var(--apagado); font-size: 12px; }
.cartao.aviso .numero { color: var(--amarelo); }
.cartao.mau .numero { color: var(--vermelho); }
.cartao.bom .numero { color: var(--verde); }

/* ---- tabelas ---- */
.quadro { background: var(--painel); border: 1px solid var(--risca); border-radius: var(--raio); overflow: hidden; }
.rolar { overflow-x: auto; }
/* Tabelas longas: rolam dentro do quadro, com o cabecalho sempre a vista. */
.quadro.longa { max-height: 72vh; overflow: auto; }
.quadro.longa th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--risca); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 11px 16px; background: var(--painel-alto);
  color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600; white-space: nowrap;
}
td { padding: 12px 16px; border-top: 1px solid var(--risca); vertical-align: middle; }
td.fraco { color: var(--apagado); }
td.indicativo { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
tbody tr { transition: background 300ms ease-out; }
tbody tr:hover { background: var(--painel-alto); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.json { max-width: 280px; font-family: var(--mono); font-size: 12px; color: var(--apagado); word-break: break-word; }
td.sem-quebra { white-space: nowrap; }
td.mensagem-erro { max-width: 420px; }
details.pilha { margin-top: 6px; }
details.pilha summary { cursor: pointer; color: var(--apagado); font-size: 13px; }
details.pilha pre { white-space: pre-wrap; margin: 8px 0 0; font-size: 12px; color: var(--apagado); }
.vazio { padding: 44px; text-align: center; color: var(--apagado); font-size: 14px; }

/* ---- etiquetas ---- */
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--painel-alto); color: var(--apagado);
}
.etiqueta.verde { background: rgba(63,185,80,.15); color: var(--verde); }
.etiqueta.amarela { background: rgba(210,153,34,.15); color: var(--amarelo); }
.etiqueta.vermelha { background: rgba(248,81,73,.15); color: var(--vermelho); }
.etiqueta.azul { background: rgba(74,158,255,.15); color: var(--azul); }

/* ---- barra do minimo semanal ---- */
.barra { height: 6px; background: var(--painel-alto); border-radius: 3px; overflow: hidden; min-width: 110px; }
.barra i { display: block; height: 100%; background: var(--azul); border-radius: 3px; }
.barra i.cumpriu { background: var(--verde); }

/* ---- formularios ---- */
form.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
form.linha.depois { margin: 14px 0 0; }
.caixa {
  background: var(--painel); border: 1px solid var(--risca); border-radius: var(--raio);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.caixa form.linha { margin: 0; }
.caixa .legenda { margin: 0; font-size: 13px; }
td form, td form.linha { margin: 0; }
input.curto { width: 150px; }
input.medio { width: 160px; }

/* ---- textos do site ---- */
.textos { display: flex; flex-direction: column; gap: 14px; }
.texto-site .cabeca-texto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.texto-site .cabeca-texto a { margin-left: auto; font-size: 13px; }
.texto-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.texto-form textarea, .texto-form input[name="valor"] { width: 100%; }
details.versoes summary { cursor: pointer; color: var(--apagado); font-size: 13px; }
details.versoes table { margin-top: 10px; font-size: 13px; }
details.versoes td { padding: 8px 10px; }

/* ---- tickets, ausencias e disciplina ---- */
.campo-pergunta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--apagado); }
.campo-pergunta input, .campo-pergunta select, .campo-pergunta textarea { width: 100%; color: var(--texto); font-size: 14px; }
.abrir-ticket summary { cursor: pointer; }
.abrir-ticket form { margin-top: 14px; }
.grelha.depois { margin-top: 14px; }

/* ---- filtros por ligacao (estado, categoria...): sem JavaScript, e ficam no telemovel ---- */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.filtros a { padding: 5px 12px; border: 1px solid var(--risca); border-radius: 16px; color: var(--apagado); font-size: 13px; transition: border-color 400ms ease-out, color 400ms ease-out; }
.filtros a.ativo { border-color: var(--azul); color: var(--texto); background: var(--azul-escuro); }
@media (hover: hover) { .filtros a:hover { border-color: var(--risca-viva); color: var(--texto); } }

/* ---- ao vivo: o indicador, o interruptor e o bloco que acabou de mudar ---- */
.vivo-barra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.vivo-barra .auto-atualizar { margin-top: 0; }
.ao-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--apagado); }
.ao-vivo[hidden] { display: none; }
.ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); flex: none; }
.ao-vivo[data-estado="ligado"] { color: var(--texto); }
.ao-vivo[data-estado="ligado"]::before { background: var(--verde); box-shadow: 0 0 0 3px rgba(63, 185, 80, .18); }
.ao-vivo[data-estado="a-reconetar"]::before, .ao-vivo[data-estado="sondagem"]::before { background: var(--amarelo); }
/* O sino mora no cabecalho: o bloco nao deve mexer no layout dele. */
.viva-sino { display: contents; }
/* Um bloco que acabou de mudar acende um instante, para se perceber o que mexeu. */
.vivo-novo { animation: vivo-novo 1.4s ease-out; border-radius: var(--raio); }
@keyframes vivo-novo { from { background: rgba(74, 158, 255, .12); } to { background: transparent; } }

/* ---- atualizar sozinho e o estado do bot ---- */
.auto-atualizar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--apagado); margin-top: 4px; }
.auto-atualizar span { margin-right: 6px; text-transform: uppercase; letter-spacing: .6px; font-size: 11px; }
.auto-atualizar a { padding: 3px 10px; border: 1px solid var(--risca); border-radius: 14px; color: var(--apagado); transition: border-color 400ms ease-out, color 400ms ease-out; }
.auto-atualizar a.ativo { border-color: var(--azul); color: var(--texto); background: var(--azul-escuro); }
@media (hover: hover) { .auto-atualizar a:hover { border-color: var(--risca-viva); color: var(--texto); } }
.estado-bot { max-width: 1240px; margin: 0 auto; padding: 0 32px 32px; font-size: 12px; color: var(--apagado); }
.estado-bot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 8px; vertical-align: 1px; }
.estado-bot.caido { color: var(--amarelo); }
.estado-bot.caido::before { background: var(--vermelho); }
.acoes-ticket { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.lista-simples { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
form.linha label { display: flex; align-items: center; gap: 8px; color: var(--apagado); font-size: 13px; }

/* ---- as fotos da prova (ficha da apreensao) ---- */
.fotos-prova { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fotos-prova a { display: block; border: 1px solid var(--risca); border-radius: var(--raio); overflow: hidden; background: var(--painel); transition: border-color 400ms ease-out; }
.fotos-prova a:hover { border-color: var(--risca-viva); }
.fotos-prova img { display: block; width: 100%; height: 180px; object-fit: cover; }

/* ---- a semana do agente ---- */
.conta-semana { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; max-width: 520px; font-size: 14px; }
.conta-semana span { color: var(--apagado); }
.conta-semana b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.conta-semana .total { border-top: 1px solid var(--risca); padding-top: 10px; margin-top: 4px; color: var(--texto); font-size: 16px; }
.conta-semana b.total { font-size: 20px; font-weight: 700; }
.minimo-semana { display: flex; align-items: center; gap: 12px; margin-top: 16px; max-width: 520px; font-size: 13px; }
.minimo-semana .barra { flex: 1; }

/* ---- a ficha da candidatura ---- */
dl.respostas { margin: 0; display: grid; grid-template-columns: 190px 1fr; gap: 12px 20px; }
dl.respostas dt { color: var(--apagado); font-size: 13px; }
dl.respostas dd { margin: 0; text-wrap: pretty; }
dl.respostas dd p { margin: 0 0 8px; }
label.marcar { display: flex; gap: 10px; align-items: center; cursor: pointer; }
label.marcar input { width: 18px; height: 18px; accent-color: var(--azul); }

/* ---- a lista dos avisos ---- */
.lista-avisos { list-style: none; margin: 14px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
form.regra-aviso { margin: 0; flex-wrap: nowrap; }
form.regra-aviso select { max-width: 260px; }
td .nota { margin-top: 3px; max-width: 360px; text-wrap: pretty; }
.aviso-sino {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center;
  background: var(--painel); border: 1px solid var(--risca); border-radius: var(--raio); padding: 14px 18px;
}
.aviso-sino .cabeca-aviso { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.aviso-sino .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: none; }
.aviso-sino .texto-aviso strong { font-size: 15px; }
.aviso-sino .texto-aviso p { margin: 4px 0 0; color: var(--apagado); font-size: 14px; text-wrap: pretty; white-space: pre-line; }
.aviso-sino .acao-aviso { margin: 0; }
.aviso-sino.lido { background: transparent; }
.aviso-sino.lido .texto-aviso strong { color: var(--apagado); }

/* ---- paginacao ---- */
.pag { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--apagado); flex-wrap: wrap; }

/* ---- menos largura: o nome sai da barra (o avatar fica) ---- */
@media (max-width: 1280px) {
  .eu .quem .texto { display: none; }
  .pesquisa-barra input { width: 150px; }
  .pesquisa-barra input:focus { width: 200px; }
}

/* ---- tablet e telemovel: a gaveta ----
   Os cinco grupos, a pesquisa e o sino nao cabem numa linha abaixo disto: em
   vez de partir a barra em tres, vai tudo para a gaveta. */
@media (max-width: 1100px) {
  .topo { padding: 0 16px; height: 56px; gap: 12px; }
  .topo .grupos, .sub, .eu .quem .texto, .eu form, .pesquisa-barra { display: none; }
  .topo .marca { flex: 1; }
  .gaveta { display: block; }
}
@media (max-width: 720px) {
  body.painel main { padding: 24px 14px 48px; }
  .aviso-sino { grid-template-columns: 1fr; }
  dl.respostas { grid-template-columns: 1fr; gap: 4px; }
  h1 { font-size: 27px; }
  th, td { padding: 9px 11px; }
}


/* ================= barra fixa ================= */
.publico .pub-barra {
  display: flex; align-items: center; gap: 28px;
  padding: 0 80px; height: 64px;
  background: rgba(11,16,23,.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(37,49,67,.7);
  position: sticky; top: 0; z-index: 30;
}
.publico .pub-barra .marca { font-size: 15px; }
/* O logotipo da pasta site/: altura fixa, largura pela proporcao. */
.publico .marca { display: inline-flex; align-items: center; }
.publico .marca-img { height: 26px; width: auto; margin-right: 10px; }
.publico .heroi-logo { height: 104px; width: auto; max-width: 70%; }
.publico .pub-nav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.publico .pub-nav a {
  padding: 7px 12px; border-radius: 7px; font-size: 14px; color: var(--apagado);
  transition: background 300ms ease-out, color 300ms ease-out;
}
.publico .pub-nav a:hover { background: var(--painel-alto); color: var(--texto); }
.publico .pub-nav a.ativo { color: var(--texto); }
.publico .pub-acoes { display: flex; gap: 8px; align-items: center; }
.publico .pub-acoes .botao, .publico .pub-acoes button { padding: 8px 16px; }
.publico .pub-barra .botao.discreto { color: var(--texto); }
.publico form.sair { margin: 0; }

/* O menu do telemovel. Abre por baixo da barra, preso a ela (que e sticky) e
   nao ao ecra: o backdrop-filter da barra prende-lhe os filhos "fixed", e um
   "position: fixed" aqui dentro ficava com a altura da barra. */
.publico .pub-menu { display: none; }
.publico .pub-menu summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 0 14px; min-height: 44px; display: flex; align-items: center;
  border: 1px solid var(--risca); border-radius: 7px; font-size: 14px; font-weight: 600;
}
.publico .pub-menu summary::-webkit-details-marker { display: none; }
.publico .pub-menu[open] summary { background: var(--painel-alto); }
.publico .pub-menu .corpo-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--fundo); border-top: 1px solid var(--risca);
  padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 22px;
}
.publico .pub-menu nav { display: flex; flex-direction: column; gap: 2px; }
.publico .pub-menu nav a { padding: 13px 12px; border-radius: 7px; color: var(--texto); font-size: 17px; }
.publico .pub-menu nav a.ativo { background: var(--painel-alto); }
.publico .pub-menu .acoes-menu { display: flex; flex-direction: column; gap: 10px; }
.publico .pub-menu .acoes-menu .botao, .publico .pub-menu .acoes-menu button { width: 100%; min-height: 50px; }

/* ================= blocos ================= */
.publico .seccao { padding: 150px 80px; }
.publico .seccao.seguida { padding-top: 0; }
.publico .seccao.junta { padding-bottom: 90px; }
.publico .dentro { max-width: 1120px; margin: 0 auto; }
.publico .dentro.estreito { max-width: 820px; }
.publico .par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.publico .meio { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.publico .coluna { display: flex; flex-direction: column; gap: 24px; }
.publico .sobrancelha {
  font-size: 13px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--azul); margin: 0;
}
.publico .titulo {
  font-size: 60px; font-weight: 700; letter-spacing: -2.2px; color: var(--texto);
  line-height: 1.04; margin: 0; text-wrap: balance;
}
.publico .meio .titulo { max-width: 820px; }
.publico .titulo.fecho-titulo { font-size: 52px; }
.publico .titulo.grupo-perguntas { font-size: 34px; letter-spacing: -1.2px; margin-bottom: 22px; }
/* Dois titulos lado a lado, cada um na sua coluna de texto: a 60 px, uma
   palavra comprida ficava sozinha numa linha. */
.publico .titulo.menor { font-size: 44px; letter-spacing: -1.6px; }
.publico .corpo { font-size: 20px; line-height: 1.55; color: var(--apagado); margin: 0; max-width: 620px; text-wrap: pretty; }
.publico .meio .corpo { max-width: 680px; }
.publico .corpo p { margin: 0 0 16px; }
.publico .corpo p:last-child { margin-bottom: 0; }
.publico .pequeno { font-size: 14px; color: var(--apagado); margin: 0; }
.publico .pequeno code { color: var(--texto); }
.publico .antes-quadro { margin-bottom: 44px; }
.publico .depois-escaloes { margin-top: 18px; text-align: center; }
.publico .texto-longo { display: flex; flex-direction: column; gap: 22px; }
.publico .texto-longo .corpo { max-width: none; }
.publico .acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.publico .inteiro { white-space: nowrap; }
.publico .narrativa .cena, .publico .seccao, .publico .cabeca-pub { scroll-margin-top: 72px; }

/* ================= heroi e cabeca das paginas ================= */
.publico .heroi { position: relative; padding: 150px 80px 110px; overflow: hidden; }
.publico .heroi .dentro, .publico .cabeca-pub .dentro { position: relative; }
.publico .heroi .corpo { font-size: 22px; max-width: 660px; }
.publico .heroi .meio { gap: 32px; }
.publico .heroi .pequeno { font-size: 13px; }
.publico .brilho {
  position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(74,158,255,.13), rgba(74,158,255,0) 65%);
}
.publico h1.grande { font-size: 92px; font-weight: 700; letter-spacing: -4px; line-height: 1; margin: 0; max-width: 900px; }
.publico .seta { display: flex; justify-content: center; margin-top: 90px; }
.publico .acao-grande { padding: 13px 22px; font-size: 16px; }
.publico .fecho .acao-grande { padding: 15px 26px; font-size: 17px; }

/* O heroi em ponto pequeno, para as paginas que nao sao o inicio. */
.publico .cabeca-pub { position: relative; padding: 120px 80px 96px; overflow: hidden; }
.publico .cabeca-pub .meio { gap: 26px; }
.publico .titulo-pagina { font-size: 68px; font-weight: 700; letter-spacing: -2.6px; line-height: 1.02; margin: 0; max-width: 900px; text-wrap: balance; }

/* ================= numeros ao vivo ================= */
.publico .faixa-numeros { padding: 0 80px 130px; }
.publico .numeros, .publico .estrutura {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--risca); border-radius: var(--raio); background: var(--painel); overflow: hidden;
}
.publico .estrutura { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A segunda linha ("o que se fez"): tantas colunas quantos os numeros que se leram. */
.publico .numeros.extra { margin-top: 14px; }
.publico .numeros.extra.n1 { grid-template-columns: minmax(0, 1fr); }
.publico .numeros.extra.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.publico .numeros.extra.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.publico .numero-vivo { padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.publico .numero-vivo + .numero-vivo { border-left: 1px solid var(--risca); }
.publico .numero-vivo .valor { font-size: 40px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.publico .numero-vivo .rotulo { font-size: 14px; color: var(--apagado); }
.publico .nota-numeros { margin-top: 14px; text-align: center; font-size: 13px; }

/* ================= cartoes (modulos, escaloes, unidades, principios) ================= */
.publico .grelha-modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.publico .modulo, .publico .escalao, .publico .unidade, .publico .principio, .publico .porta-cartao {
  background: var(--painel); border: 1px solid var(--risca); border-radius: var(--raio);
  transition: border-color 400ms ease-out, transform 400ms ease-out;
}
.publico .modulo {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 28px 30px; color: var(--apagado); font-size: 15px; line-height: 1.55;
}
.publico .modulo b { color: var(--texto); font-size: 18px; letter-spacing: -.3px; padding-right: 24px; }
.publico .modulo i {
  position: absolute; right: 24px; top: 26px; font-style: normal; color: var(--apagado);
  transition: color 400ms ease-out, transform 400ms ease-out;
}
/* O hover so onde ha rato: num ecra de toque ficava preso depois do toque. */
@media (hover: hover) {
  .publico .modulo:hover, .publico .escalao:hover, .publico .unidade:hover,
  .publico .principio:hover, .publico .porta-cartao:hover {
    border-color: var(--risca-viva); transform: translateY(-2px);
  }
  .publico .modulo:hover { color: var(--apagado); }
  .publico .modulo:hover i { color: var(--azul); transform: translateX(3px); }
}
.publico .modulo:active { transform: translateY(1px); transition: none; }

/* ================= a narrativa (as seccoes 2 a 6 da prancha) ================= */
.publico .narrativa .cena { padding: 0 80px 150px; }
.publico .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.publico .chip {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  font-size: 14px; font-weight: 600; letter-spacing: .3px;
  background: var(--painel-alto); color: var(--apagado); border: 1px solid var(--risca);
  font-family: var(--mono);
}
.publico .conta {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; justify-content: center;
  font-size: 42px; font-weight: 700; letter-spacing: -1.4px;
}
.publico .codigao {
  display: flex; align-items: flex-end; gap: 4px; line-height: 1;
  font-family: var(--mono); font-size: 76px; font-weight: 700; letter-spacing: -1px;
}
.publico .partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 780px; }
.publico .parte { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.publico .parte i { display: block; height: 1px; background: var(--risca); }
.publico .parte i.azul { background: var(--azul); }
.publico .parte b { font-size: 13px; font-weight: 600; letter-spacing: .4px; }
.publico .parte span { font-size: 13px; color: var(--apagado); }
.publico .cartao-prova { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.publico .cabeca-prova { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.publico .cabeca-prova .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--painel-alto); border: 1px solid var(--risca); }
.publico .moldura {
  height: 180px; border-radius: 8px; background: var(--painel-alto);
  border: 1px solid var(--risca); display: flex; align-items: center; justify-content: center;
}
.publico .registada { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.publico .formula { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.publico .formula .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--apagado); }
.publico .formula .conta-formula { font-size: 19px; line-height: 1.6; }

/*
 * O scroll narrativo da prancha: cada cena prende-se ao ecra e fica ali, uma de
 * cada vez — revela-se ao chegar, fica presa enquanto se desce, e apaga-se ao
 * sair. So CSS, sem JavaScript nenhum.
 *
 * Precisa de quatro coisas ao mesmo tempo, e sem qualquer uma delas as cenas
 * ficam paradas e sempre visiveis, como nas pranchas: um ecra (nao a
 * impressao), largo e alto, de quem nao pediu menos movimento, num browser com
 * animacoes ligadas ao scroll.
 *
 * A revelacao acaba ANTES de o palco prender (a cena a 15% do topo): quem salta
 * por um cartao da grelha dos modulos aterra com a cena ja inteira, e nao a
 * meio de aparecer.
 */
@media screen and (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .publico .narrativa .cena { height: 150vh; padding: 0 80px; view-timeline-name: --cena; view-timeline-axis: block; }
    .publico .narrativa .palco { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; }
    .publico .narrativa .palco > .dentro {
      width: 100%;
      animation: revelar linear both, apagar linear forwards;
      animation-timeline: --cena, --cena;
      animation-range: entry 5% entry 85%, exit 0% exit 60%;
    }
  }
}
/* Entre 901 e 1000 px a barra ja encolheu para 56px: o palco prende-se a ela, nao
   aos 64px de cima (8px de folga a mostrar o que ia por baixo). */
@media screen and (min-width: 901px) and (max-width: 1000px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .publico .narrativa .palco { top: 56px; height: calc(100vh - 56px); }
  }
}
@keyframes revelar {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}
@keyframes apagar {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-32px); }
}

/* ================= tabelas ================= */
.publico td.vazio { text-align: center; color: var(--apagado); padding: 28px; }
.publico .acessos th:first-child { width: 34%; }

/* ================= escaloes (patentes) ================= */
.publico .escaloes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.publico .escalao { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.publico .escalao .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--apagado); }
.publico .escalao.primeiro { border-color: rgba(74,158,255,.45); }
.publico .escalao.primeiro .rotulo { color: var(--azul); }
.publico .escalao b { font-size: 22px; letter-spacing: -.4px; }
.publico .escalao .valor { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.publico .escalao .valor small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--apagado); }
.publico .escalao ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--apagado); font-size: 14px; }

/* ================= palavra da direcao ================= */
.publico .palavra { margin: 0; max-width: 820px; font-size: 28px; line-height: 1.45; letter-spacing: -.5px; color: var(--texto); text-wrap: pretty; }
.publico .palavra p { margin: 0 0 16px; }
.publico .palavra footer { margin-top: 18px; font-size: 15px; letter-spacing: 0; color: var(--apagado); }

/* ================= perguntas ================= */
.publico .acordeao { border-top: 1px solid var(--risca); text-align: left; }
.publico .pergunta { border-bottom: 1px solid var(--risca); }
.publico .pergunta summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 18px; font-weight: 600; letter-spacing: -.2px;
  transition: color 300ms ease-out;
}
.publico .pergunta summary::-webkit-details-marker { display: none; }
.publico .pergunta summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--apagado);
}
.publico .pergunta[open] summary::after { content: "−"; }
@media (hover: hover) { .publico .pergunta summary:hover { color: var(--azul-claro); } }
.publico .resposta { padding: 0 44px 24px 0; color: var(--apagado); font-size: 16px; line-height: 1.6; }
.publico .resposta p { margin: 0; }

/* ================= sobre e unidades ================= */
.publico .duas-portas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.publico .principios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.publico .porta-cartao, .publico .principio { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.publico .porta-cartao b, .publico .principio b { font-size: 18px; letter-spacing: -.3px; }
.publico .porta-cartao p, .publico .principio p { margin: 0; color: var(--apagado); font-size: 15px; line-height: 1.55; }
.publico .unidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.publico .unidade { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.publico .unidade-topo { display: flex; align-items: center; justify-content: space-between; }
.publico .unidade .emoji { font-size: 30px; line-height: 1; }
.publico .unidade b { font-size: 22px; letter-spacing: -.4px; }
.publico .unidade-texto { color: var(--apagado); font-size: 15px; line-height: 1.55; }
.publico .unidade-texto p { margin: 0 0 10px; }
.publico .unidade-texto p:last-child { margin: 0; }
.publico .na-rua { font-size: 13px; color: var(--apagado); margin-top: auto; }
.publico .na-rua.com { color: var(--verde); }
.publico .acoes-contacto { display: flex; gap: 12px; flex-wrap: wrap; }

/* ================= candidatura ================= */
.publico .candidatura .dentro { display: flex; flex-direction: column; gap: 56px; }
.publico .candidatura .aviso { margin: 0; }
.publico .bloco-candidatura { display: flex; flex-direction: column; gap: 20px; }
.publico .bloco-candidatura .corpo { max-width: none; font-size: 17px; }
.publico .acoes-candidatura { display: flex; justify-content: center; }
.publico .nota-candidatura { text-align: center; }

/* Os quatro passos: explicam o caminho, e com uma candidatura dizem onde esta. */
.publico .passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: passo; }
.publico .passos li {
  counter-increment: passo; position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 20px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--risca);
}
.publico .passos li::before {
  content: counter(passo); display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700;
  background: var(--painel-alto); color: var(--apagado); border: 1px solid var(--risca); margin-bottom: 4px;
}
.publico .passos li b { font-size: 16px; }
.publico .passos li span { font-size: 14px; line-height: 1.5; color: var(--apagado); }
.publico .passos li.feito::before { content: "✓"; background: rgba(63,185,80,.15); color: var(--verde); border-color: rgba(63,185,80,.45); }
.publico .passos li.atual { border-color: rgba(74,158,255,.6); }
.publico .passos li.atual::before { background: var(--azul-escuro); color: #fff; border-color: var(--azul); }

.publico .mensagem-chefia {
  margin: 0; padding: 18px 22px; border-left: 3px solid var(--azul); border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--painel); font-size: 17px; line-height: 1.55;
}
.publico .mensagem-chefia .rotulo { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--apagado); margin-bottom: 6px; }
.publico .mensagem-chefia p { margin: 0 0 10px; }
.publico .mensagem-chefia p:last-child { margin: 0; }

/* O formulario: rotulo, ajuda, campo, erro — por esta ordem, sempre. */
.publico .formulario { display: flex; flex-direction: column; gap: 26px; }
.publico .campo { display: flex; flex-direction: column; gap: 6px; }
.publico .campo label { font-size: 16px; font-weight: 600; }
.publico .campo .opcional { font-weight: 400; color: var(--apagado); font-size: 14px; }
.publico .campo .ajuda { margin: 0; font-size: 14px; color: var(--apagado); }
.publico .campo input:not([type="checkbox"]), .publico .campo textarea {
  width: 100%; font-size: 16px; padding: 12px 14px; background: var(--painel); border-color: var(--risca-viva);
}
.publico .campo textarea { min-height: 120px; }
.publico .campo .erro { margin: 0; font-size: 14px; color: var(--vermelho); }
.publico .campo.com-erro input, .publico .campo.com-erro textarea { border-color: var(--vermelho); }
.publico .campo label.marcar { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; cursor: pointer; }
.publico .campo label.marcar input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.publico .enviar { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.publico details.enviado, .publico details.retirar {
  border: 1px solid var(--risca); border-radius: var(--raio); background: var(--painel); padding: 0 20px;
}
.publico details.enviado summary, .publico details.retirar summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none;
}
.publico details.enviado summary::-webkit-details-marker, .publico details.retirar summary::-webkit-details-marker { display: none; }
.publico details.enviado summary::after, .publico details.retirar summary::after { content: " +"; color: var(--apagado); }
.publico details[open].enviado summary::after, .publico details[open].retirar summary::after { content: " −"; }
.publico details.retirar summary { color: var(--vermelho); }
.publico details.retirar form { margin: 0 0 18px; }
.publico details.retirar .pequeno { margin: 0 0 14px; }
.publico details.enviado dl { margin: 0 0 20px; display: grid; grid-template-columns: 200px 1fr; gap: 12px 20px; }
.publico details.enviado dt { color: var(--apagado); font-size: 14px; }
.publico details.enviado dd { margin: 0; font-size: 15px; }
.publico details.enviado dd p { margin: 0 0 8px; }

/* ================= fecho e rodape ================= */
.publico .fecho { padding: 130px 80px 150px; border-top: 1px solid var(--risca); background: var(--fecho); }
.publico .fecho .meio { gap: 28px; }
.publico .fecho .pequeno { max-width: 460px; }
.publico .rodape { padding: 56px 80px 40px; border-top: 1px solid var(--risca); font-size: 14px; color: var(--apagado); }
.publico .rodape-colunas { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.publico .rodape-marca { display: flex; flex-direction: column; gap: 12px; }
.publico .rodape-marca p { margin: 0; max-width: 320px; line-height: 1.55; }
.publico .rodape .servidor { color: var(--texto); }
.publico .rodape-coluna { display: flex; flex-direction: column; gap: 10px; }
.publico .rodape-coluna b { color: var(--texto); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.publico .rodape-coluna a { color: var(--apagado); }
.publico .rodape-coluna a:hover { color: var(--texto); }
.publico .rodape-nota { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--risca); font-size: 13px; }
.publico .barra-acao { display: none; }

/* ================= tablet ================= */
@media (max-width: 1100px) {
  .publico .pub-barra, .publico .seccao, .publico .heroi, .publico .cabeca-pub, .publico .faixa-numeros,
  .publico .fecho, .publico .rodape, .publico .narrativa .cena { padding-left: 40px; padding-right: 40px; }
  .publico .grelha-modulos, .publico .unidades, .publico .principios, .publico .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publico .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publico .numeros .numero-vivo + .numero-vivo { border-left: 0; }
  .publico .numeros .numero-vivo:nth-child(even) { border-left: 1px solid var(--risca); }
  .publico .numeros .numero-vivo:nth-child(n+3) { border-top: 1px solid var(--risca); }
  .publico .numeros.extra.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publico .rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .publico .rodape-marca { grid-column: 1 / -1; }
  .publico .pub-barra { gap: 18px; }
  .publico .pub-nav a { padding: 7px 9px; }
}

/* ================= a barra encolhe =================
   Seis paginas e dois botoes nao cabem abaixo disto: vai tudo para o "Menu". */
@media (max-width: 1000px) {
  .publico .pub-barra { height: 56px; gap: 12px; }
  .publico .pub-nav, .publico .pub-acoes { display: none; }
  .publico .pub-barra .marca { flex: 1; }
  .publico .pub-menu { display: block; }
}

/* ================= coluna unica ================= */
@media (max-width: 900px) {
  .publico .par { grid-template-columns: 1fr; gap: 40px; }
  .publico .par .quadro, .publico .par .cartao-prova { order: 2; }
  .publico .seccao { padding-top: 110px; padding-bottom: 110px; }
  .publico .seccao.seguida { padding-top: 0; }
  .publico .narrativa .cena { padding-bottom: 110px; }
  .publico .heroi { padding-top: 110px; padding-bottom: 90px; }
  .publico .cabeca-pub { padding-top: 96px; padding-bottom: 80px; }
  .publico h1.grande { font-size: 68px; letter-spacing: -3px; }
  .publico .titulo-pagina { font-size: 54px; letter-spacing: -2px; }
  .publico .titulo { font-size: 46px; letter-spacing: -1.8px; }
  .publico .titulo.fecho-titulo { font-size: 42px; }
  .publico .escaloes { grid-template-columns: 1fr; }
  .publico .escalao ul { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
}

/* ================= telemovel (a prancha de 400) ================= */
@media (max-width: 600px) {
  .publico .pub-barra { padding: 0 20px; }
  .publico .seccao { padding: 72px 20px; }
  .publico .seccao.seguida { padding-top: 0; }
  .publico .seccao.junta { padding-bottom: 56px; }
  .publico .narrativa .cena { padding: 0 20px 72px; }
  .publico .heroi { padding: 72px 20px 56px; }
  .publico .heroi .meio { gap: 22px; }
  .publico .seta { margin-top: 30px; }
  .publico .cabeca-pub { padding: 64px 20px 56px; }
  .publico .faixa-numeros { padding: 0 20px 72px; }
  .publico .fecho { padding: 64px 20px 72px; }
  .publico .rodape { padding: 40px 20px 112px; }
  .publico h1.grande { font-size: 44px; letter-spacing: -2px; line-height: 1.02; }
  .publico .titulo-pagina { font-size: 36px; letter-spacing: -1.4px; line-height: 1.06; }
  .publico .titulo { font-size: 34px; letter-spacing: -1.4px; line-height: 1.08; }
  .publico .titulo.fecho-titulo { font-size: 30px; }
  .publico .titulo.grupo-perguntas { font-size: 26px; }
  .publico .titulo.menor { font-size: 30px; letter-spacing: -1.1px; }
  .publico .corpo, .publico .heroi .corpo { font-size: 17px; }
  .publico .sobrancelha { font-size: 12px; letter-spacing: 2px; }
  .publico .pequeno { font-size: 13px; }
  .publico .brilho { width: 520px; height: 420px; top: -180px; background: radial-gradient(ellipse at center, rgba(74,158,255,.15), rgba(74,158,255,0) 65%); }
  .publico .antes-quadro { margin-bottom: 28px; }

  /* Na prancha de 400 as seccoes alinham a esquerda; so o heroi, a cabeca das
     paginas e o fecho ficam ao centro. */
  .publico .seccao .meio, .publico .narrativa .meio { align-items: flex-start; text-align: left; gap: 20px; }
  .publico .depois-escaloes, .publico .nota-numeros { text-align: left; }
  .publico .conta { font-size: 24px; gap: 8px; letter-spacing: -.8px; justify-content: flex-start; }
  .publico .codigao { font-size: 40px; gap: 2px; letter-spacing: -.5px; }
  .publico .partes { grid-template-columns: 1fr; gap: 12px; }
  .publico .parte { flex-direction: row; gap: 12px; text-align: left; align-items: baseline; }
  .publico .parte i { display: none; }
  .publico .parte b { min-width: 122px; }
  .publico .chip { padding: 7px 13px; font-size: 13px; }
  .publico .chips { gap: 8px; }

  /* O cartao da prova compacto, como na prancha. */
  .publico .cartao-prova { padding: 18px; gap: 14px; }
  .publico .cabeca-prova { display: none; }
  .publico .moldura { height: 140px; }
  .publico .registada { font-size: 13px; gap: 9px; }
  .publico .formula { padding: 18px 20px; gap: 10px; }
  .publico .formula .conta-formula { font-size: 15px; }
  .publico .so-largo { display: none; }
  /* A tabela das patentes tem de caber em 360 px sem rolar: letra e margens
     mais justas, e o nome parte em duas linhas se for preciso. */
  .publico .patentes th, .publico .patentes td { padding: 9px 7px; font-size: 13px; }
  .publico .patentes th { font-size: 10px; letter-spacing: .4px; }
  /* O "#" e o "No minimo" estao escondidos: as pontas visiveis sao a 2.a e a 5.a. */
  .publico .patentes th:nth-child(2), .publico .patentes td:nth-child(2) { padding-left: 12px; }
  .publico .patentes th:nth-child(5), .publico .patentes td:nth-child(5) { padding-right: 12px; }

  /* A grelha dos modulos vira um indice: so os nomes, dois a dois. */
  .publico .grelha-modulos { gap: 10px; }
  .publico .modulo { padding: 16px 16px 18px; }
  .publico .modulo b { font-size: 15px; }
  .publico .modulo span { display: none; }
  .publico .modulo i { top: 16px; right: 14px; }

  .publico .unidades, .publico .principios, .publico .duas-portas, .publico .estrutura, .publico .passos { grid-template-columns: 1fr; }
  .publico .candidatura .dentro { gap: 40px; }
  .publico details.enviado dl { grid-template-columns: 1fr; gap: 4px; }
  .publico details.enviado dd { margin-bottom: 10px; }
  .publico .enviar button { width: 100%; }
  .publico .estrutura .numero-vivo + .numero-vivo { border-left: 0; border-top: 1px solid var(--risca); }
  .publico .numero-vivo { padding: 18px 20px; }
  .publico .numero-vivo .valor { font-size: 30px; }
  .publico .escalao, .publico .unidade, .publico .principio, .publico .porta-cartao { padding: 20px; }
  .publico .escalao .valor { font-size: 28px; }
  .publico .palavra { font-size: 21px; }
  .publico .pergunta summary { font-size: 16px; padding: 18px 40px 18px 0; }
  .publico .resposta { padding-right: 0; font-size: 15px; }
  /* A toda a largura, e a partir linha se for preciso: um botao que transborda
     esconde o texto e o icone. */
  .publico .acao-grande, .publico .fecho .acao-grande {
    width: 100%; min-height: 52px; padding: 10px 22px; white-space: normal; text-align: center; line-height: 1.3;
  }
  .publico .acoes { width: 100%; flex-direction: column; }
  .publico .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

  /* "Quem ve o que" sao cartoes empilhados, como na prancha de 400. */
  .publico .acessos { background: none; border: 0; }
  .publico .acessos thead { display: none; }
  .publico .acessos table, .publico .acessos tbody { display: block; }
  .publico .acessos tr {
    display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
    background: var(--painel); border: 1px solid var(--risca); border-radius: var(--raio); padding: 14px 16px;
  }
  .publico .acessos td { border: 0; padding: 0; font-size: 13px; }
  .publico .acessos td.forte { font-size: 14px; }

  /* O "ligar" desta casa: entrar e o Discord sempre a mao, no fundo do ecra. */
  .publico .barra-acao {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(11,16,23,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(37,49,67,.7);
  }
  .publico .barra-acao .botao { flex: 1; min-width: 0; min-height: 48px; }
}