/* =================================================================
   mundo-construcao.css · Portal III · O Mundo · EM BREVE
   Estilo: PAPER CIENTÍFICO (periódico acadêmico)
   Ligado a: mundo-construcao.html
   ================================================================= */

/* -----------------------------------------------------------------
   BASE COMPARTILHADA DO PORTAL O MUNDO
   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.: mundo-base.css) e importe-o em cada página.
   ----------------------------------------------------------------- */

/* Fontes: Crimson Pro (texto acadêmico) e JetBrains Mono (metadados) */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono&display=swap");

/* ---------- Tokens ---------- */
:root {
  --papel: #FFFFFF;
  --tinta: #1A1A1A;
  --apoio: #555555;       /* metadados e textos secundários */
  --linha: #DDDDDD;       /* divisórias finas */
  --verde: #2F6B47;       /* cor do portal O Mundo (botões) */

  /* Uma cor discreta por área, usada nas etiquetas */
  --area-historia: #8A5A1F;
  --area-sociedade: #2A3368;
  --area-ambiente: #2F6B47;
  --area-historiografia: #7A3B5E;

  --serifa: "Crimson Pro", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 17px/1.55 var(--serifa); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.pagina > main { flex: 1; }
/* Margens laterais seguras em todas as faixas */
.faixa { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }

/* ---------- Cabeçalho de periódico ---------- */
.cabecalho { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; padding-block: 14px 10px; border-bottom: 3px double var(--tinta); }
.cabecalho__nome { margin-right: auto; font: 600 22px var(--serifa); text-decoration: none; }
.cabecalho__nome small { font: italic 400 15px var(--serifa); color: var(--apoio); }
.cabecalho a.cabecalho__link { font: 12px var(--mono); letter-spacing: .06em; color: var(--apoio); text-decoration: none; }
.cabecalho a.cabecalho__link:hover { color: var(--tinta); }
/* Página atual (aria-current="page") sublinhada */
.cabecalho a.cabecalho__link[aria-current="page"] { color: var(--tinta); border-bottom: 1px solid var(--tinta); }

/* Linha de metadados (volume, número, data) */
.metadados { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--tinta); font: 11px var(--mono); letter-spacing: .05em; color: var(--apoio); }

.corpo { padding-block: 24px 28px; }

/* ---------- Tipografia acadêmica ---------- */
.versalete { font-variant: small-caps; letter-spacing: .05em; font-weight: 600; }
.titulo-artigo { margin: 6px auto 4px; max-width: 30ch; text-align: center; font: 600 clamp(24px, 3.2vw, 32px)/1.2 var(--serifa); text-wrap: balance; }
.autoria { text-align: center; font-style: italic; color: #444; font-size: 16px; }

/* ---------- Etiquetas de área ---------- */
.area { display: inline-block; margin-right: 4px; padding: 1px 6px; border: 1px solid currentColor; font: 11px var(--mono); letter-spacing: .06em; }
.area--historia { color: var(--area-historia); }
.area--sociedade { color: var(--area-sociedade); }
.area--ambiente { color: var(--area-ambiente); }
.area--historiografia { color: var(--area-historiografia); }

/* ---------- Botões ---------- */
.botao {
  display: inline-block; padding: 7px 14px;
  background: var(--verde); color: #fff; border: 1px solid var(--verde);
  font: 600 15px var(--serifa); font-variant: small-caps; letter-spacing: .08em;
  text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--tinta); border-color: var(--tinta); }
.botao--contorno { background: var(--papel); color: var(--tinta); border-color: var(--tinta); }
.botao--contorno:hover { color: #fff; }

/* ---------- Rodapé ---------- */
.rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 10px 18px; border-top: 1px solid var(--tinta); font: 11px var(--mono); color: var(--apoio); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--tinta); }

@media (max-width: 640px) {
  .faixa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* -----------------------------------------------------------------
   ESPECÍFICO DA PÁGINA "EM BREVE" (nota de "no prelo")
   Mesmo desenho da nota de errata da 404, em tinta neutra.
   ----------------------------------------------------------------- */
.prelo { position: relative; max-width: 62ch; margin: 20px auto; padding: 18px 20px; border: 2px solid var(--tinta); }
.carimbo { position: absolute; top: 14px; right: 14px; padding: 2px 8px; border: 2px solid var(--apoio); color: var(--apoio); font: 600 13px var(--mono); letter-spacing: .12em; transform: rotate(6deg); }
.prelo__codigo { font: 12px var(--mono); color: var(--apoio); }
.prelo__codigo, .prelo h1 { padding-right: 160px; }
.prelo h1 { margin: 0 0 4px; font: 600 26px var(--serifa); }
.prelo p { margin: 10px 0; text-align: justify; }
.prelo__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) {
  .carimbo { position: static; display: inline-block; margin-bottom: 8px; }
  .prelo__codigo, .prelo h1 { padding-right: 0; }
}