/* =================================================================
   portal-filosofia.css · Portal I · Filosofia e Política
   Estilo: MANIFESTO (neobrutalista editorial)
   Ligado a: portais.html · afeta apenas .portal-filosofia
   [CONEXÃO PENDENTE] Reaproveite este arquivo em filosofia.html
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono&family=Manrope:wght@400;600&display=swap");

.portal-filosofia {
  --pf-fundo: #F2E6C4;    /* luar */
  --pf-tinta: #0B1029;    /* noite */
  --pf-destaque: #5A4FB0; /* violeta da política */
  --pf-borda: 3px solid var(--pf-tinta);

  background: var(--pf-fundo);
  color: var(--pf-tinta);
  font-family: "Manrope", system-ui, sans-serif;
}

/* Cabeçalho com rótulo do portal */
.pf-cabecalho {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px;
  border-bottom: var(--pf-borda);
  font: 11px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
}

.portal-filosofia .portal__corpo { padding: 22px 20px 0; }

/* Frase-manifesto em tipografia gigante */
.portal-filosofia h2 {
  margin: 0;
  font: 400 clamp(38px, 4.6vw, 62px)/.92 "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.portal-filosofia h2 span { color: var(--pf-destaque); }

.pf-chamada { font-size: 15px; max-width: 38ch; margin: 16px 0 20px; }

/* Blocos de assunto: ocupam a largura toda, separados por bordas grossas */
.pf-blocos {
  display: grid;
  margin: auto -20px 0;          /* "auto" no topo cola os blocos no fim da coluna */
  border-top: var(--pf-borda);
}
.pf-bloco {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 20px;
  border-bottom: var(--pf-borda);
}
.pf-bloco b { font: 400 18px "Archivo Black", Impact, sans-serif; }
.pf-bloco small { font: 11px "JetBrains Mono", ui-monospace, monospace; text-align: right; }
.pf-bloco--escuro { background: var(--pf-tinta); color: var(--pf-fundo); }

/* Botão de entrada: bloco de cor chapada */
.pf-entrar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  background: var(--pf-destaque); color: #fff;
  font: 400 20px "Archivo Black", Impact, sans-serif;
  text-transform: uppercase; text-decoration: none;
}
.pf-entrar:hover { background: var(--pf-tinta); }