/* =================================================================
   filosofia-construcao.css · Portal I · Filosofia e Política · EM BREVE
   Estilo: MANIFESTO (neobrutalista editorial)
   Ligado a: filosofia-construcao.html
   ================================================================= */

/* -----------------------------------------------------------------
   BASE COMPARTILHADA DO PORTAL FILOSOFIA E POLÍTICA
   Este bloco se repete em todos os CSS do portal para que cada página
   funcione sozinha. Se preferir, mova-o para um arquivo único
   (ex.: filosofia-base.css) e importe-o em cada página.
   ----------------------------------------------------------------- */

/* Fontes: Archivo Black (títulos), Manrope (texto), JetBrains Mono (rótulos) */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;700&family=Manrope:wght@400;600;700&display=swap");

/* ---------- Tokens ---------- */
:root {
  --fundo: #F2E6C4;        /* luar: fundo do portal */
  --tinta: #0B1029;        /* noite: texto e bordas */
  --violeta: #5A4FB0;      /* cor de destaque do portal */
  --papel-claro: #FFF8E6;  /* caixas e campos */
  --borda: 3px solid var(--tinta);

  --fonte-bloco: "Archivo Black", Impact, sans-serif;
  --fonte-texto: "Manrope", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.6 var(--fonte-texto);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }

/* Container que mantém o rodapé no fim da tela */
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.pagina > main { flex: 1; }

/* ---------- Navegação do portal ---------- */
.nav {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-bottom: var(--borda);
  font: 12px var(--fonte-mono); letter-spacing: .08em;
}
.nav__marca {
  margin-right: auto; padding: 12px 20px;
  font: 400 17px var(--fonte-bloco); letter-spacing: 0; text-decoration: none;
}
.nav__link { padding: 12px 16px; border-left: var(--borda); text-decoration: none; display: flex; align-items: center; }
.nav__link:hover { background: var(--papel-claro); }
/* Página atual (marcada com aria-current="page" no HTML) */
.nav__link[aria-current="page"] { background: var(--tinta); color: var(--fundo); }

/* ---------- Tipografia ---------- */
.mono { font: 12px var(--fonte-mono); letter-spacing: .08em; }
.titulo-gigante {
  margin: 0;
  font: 400 clamp(40px, 7.4vw, 96px)/.9 var(--fonte-bloco);
  text-transform: uppercase; letter-spacing: -.015em;
}
.titulo-gigante em { font-style: normal; color: var(--violeta); }
.titulo-grande { margin: 0; font: 400 clamp(28px, 4.4vw, 52px)/.95 var(--fonte-bloco); text-transform: uppercase; }
.titulo-bloco { margin: 6px 0 8px; font: 400 22px/1 var(--fonte-bloco); text-transform: uppercase; }
.chamada { font-size: 17px; max-width: 46ch; margin: 16px 0 0; }

/* ---------- Etiquetas ---------- */
.tag {
  display: inline-block; margin-right: 6px; padding: 3px 8px;
  border: 2px solid var(--tinta);
  font: 11px var(--fonte-mono); letter-spacing: .1em;
}
.tag--violeta { background: var(--violeta); border-color: var(--violeta); color: #fff; }

/* ---------- Botões (links e <button> usam a mesma classe) ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--tinta); color: var(--fundo);
  border: var(--borda);
  font: 400 16px var(--fonte-bloco); text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.botao--contorno { background: transparent; color: var(--tinta); }
.botao--violeta { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.botao--violeta:hover { background: var(--tinta); border-color: var(--tinta); }

/* ---------- Blocos e grades ---------- */
.espaco { padding: 24px 20px; }
.escuro { background: var(--tinta); color: var(--fundo); }
.violeta { background: var(--violeta); color: #fff; }
.grade-2, .grade-3 { display: grid; border-top: var(--borda); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 > *, .grade-3 > * { padding: 18px 20px; }
.grade-2 > * + *, .grade-3 > * + * { border-left: var(--borda); }

/* ---------- Rodapé ---------- */
.rodape {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px; border-top: var(--borda);
  font: 11px var(--fonte-mono); letter-spacing: .08em;
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--violeta); }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .grade-2 > * + *, .grade-3 > * + * { border-left: 0; border-top: var(--borda); }
  .nav__marca { width: 100%; border-bottom: var(--borda); }
  .nav__link:first-of-type { border-left: 0; }
}

/* -----------------------------------------------------------------
   ESPECÍFICO DA PÁGINA "EM BREVE"
   Mesmo desenho da página 404 (bloco gigante + texto), com outra palavra.
   ----------------------------------------------------------------- */
.obra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 60vh; }
.obra__marca {
  display: flex; align-items: flex-end; padding: 20px;
  border-right: var(--borda);
  font: 400 clamp(64px, 12vw, 150px)/.85 var(--fonte-bloco); letter-spacing: -.03em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.obra__marca span { color: var(--violeta); }
.obra__texto { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 20px; }
.obra__texto p { margin: 0; font-size: 16px; }
.obra__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .obra { grid-template-columns: minmax(0, 1fr); }
  .obra__marca { border-right: 0; border-bottom: var(--borda); }
}