/* =================================================================
   portais.css · Estrutura compartilhada da página de portais
   (barra superior, as 3 colunas e as 2 divisórias).
   Ligado a: portais.html (carregado DEPOIS dos três portal-*.css,
   na mesma posição em que ficava o antigo bloco <style>).
   Saiu do HTML para a Content-Security-Policy não precisar de 'unsafe-inline'.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #0B1029; font: 16px/1.6 "Manrope", system-ui, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.pagina { min-height: 100vh; display: flex; flex-direction: column; }

/* Barra superior clara, igual à página inicial */
.topo {
  display: flex; align-items: center; gap: 16px;
  background: #F4F2EE; color: #1B1F3B; border-bottom: 1px solid #1B1F3B;
  padding-block: 12px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  font-size: 12px; letter-spacing: .14em;
}
.topo a { text-decoration: none; color: #5A5F80; }
.topo a:hover { color: #1B1F3B; }
.topo b { margin: 0 auto; font-weight: 600; letter-spacing: .3em; }
.topo span { color: #5A5F80; }

/* Grade: portal | divisória | portal | divisória | portal */
.portais {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
}

/* Cada portal ocupa a altura toda e empurra o botão para o fim */
.portal { display: flex; flex-direction: column; min-width: 0; }
.portal__corpo { flex: 1; display: flex; flex-direction: column; }

/* As duas divisórias: linha fina + pequena fase da lua no meio */
.divisoria {
  background: #0B1029;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding-block: 20px;
}
.divisoria::before, .divisoria::after { content: ""; flex: 1; width: 1px; background: #2A3368; }

/* Telas estreitas: portais empilhados e divisórias horizontais */
@media (max-width: 960px) {
  .portais { grid-template-columns: minmax(0, 1fr); }
  .divisoria { flex-direction: row; height: 22px; padding: 0 20px; }
  .divisoria::before, .divisoria::after { width: auto; height: 1px; }
}