/* =================================================================
   mundo.css · Portal III · O Mundo · PÁGINA PRINCIPAL (EDIÇÃO ATUAL)
   Estilo: PAPER CIENTÍFICO (periódico acadêmico)
   Ligado a: mundo.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 PRINCIPAL
   ----------------------------------------------------------------- */
.capa { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }

/* Sumário da edição */
.sumario { list-style: none; margin: 0; padding: 0; }
.sumario li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.sumario__num, .sumario__pag { font: 12px var(--mono); color: var(--apoio); }
.sumario__titulo { font-weight: 600; text-decoration: none; }
.sumario__titulo:hover { text-decoration: underline; }
.sumario__areas { display: block; margin-top: 2px; }

/* Coluna "Em preparação" */
.preparacao { border: 1px solid var(--tinta); padding: 14px 16px; font-size: 16px; align-self: start; }
.preparacao > p { margin: 4px 0 10px; color: #444; font-size: 15px; }
.preparacao ul { list-style: none; margin: 0; padding: 0; }
.preparacao li { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--linha); }
.preparacao li:last-child { border-bottom: 1px solid var(--linha); }
.preparacao b { font-weight: 600; line-height: 1.3; }
/* Etapas: revisão (verde), redação (marrom), pesquisa (azul) */
.etapa { font: 10.5px var(--mono); letter-spacing: .08em; }
.etapa--revisao { color: var(--area-ambiente); }
.etapa--redacao { color: var(--area-historia); }
.etapa--pesquisa { color: var(--area-sociedade); }
.preparacao small { display: block; margin-top: 10px; font-size: 14px; color: #444; }

@media (max-width: 700px) { .capa { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------
   ANTES ERAM ESTILOS INLINE (style="" no HTML)
   Saíram do HTML para a Content-Security-Policy não precisar de 'unsafe-inline'.
   O !important mantém a mesma prioridade que o estilo inline tinha.
   ----------------------------------------------------------------- */
.u-font-size-16px-margin-0 { font-size:16px !important; margin:0 !important; }
.u-font-size-17px-margin-0 { font-size:17px !important; margin:0 !important; }
.u-margin-top-14px { margin-top:14px !important; }