/* =================================================================
   mundo-artigo.css · Portal III · O Mundo · ARTIGO
   Estilo: PAPER CIENTÍFICO (periódico acadêmico)
   Ligado a: mundo-artigo.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 DE ARTIGO
   ----------------------------------------------------------------- */
.centro { text-align: center; }
.resumo, .palavras { max-width: 68ch; margin: 16px auto 0; text-align: justify; hyphens: auto; }
.palavras { margin-top: 6px; font-size: 15px; }

/* Texto em duas colunas, como em periódico */
.colunas { columns: 2 280px; column-gap: 32px; margin-top: 18px; font-size: 16.5px; text-align: justify; hyphens: auto; }
.colunas h2 { margin: 0 0 6px; font: 600 17px var(--serifa); break-after: avoid; }
.colunas p { margin: 0 0 12px; }
sup a { font: 10px var(--mono); color: var(--verde); text-decoration: none; }

/* Tabela no padrão acadêmico (só linhas horizontais) */
.tabela { width: 100%; margin: 6px 0 4px; border-collapse: collapse; font-size: 15px; break-inside: avoid; }
.tabela th, .tabela td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela thead th { border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.tabela tbody tr:last-child td { border-bottom: 2px solid var(--tinta); }
.legenda { margin: 0 0 14px; font-size: 14px; color: #444; }

.notas { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tinta); font-size: 14px; color: #444; }
.notas p { margin: 0 0 4px; }
.referencias { margin: 6px 0 0; padding-left: 20px; font-size: 15px; }
.referencias li { margin-bottom: 4px; }

/* -----------------------------------------------------------------
   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-16px-0-0 { font-size:16px !important; margin:16px 0 0 !important; }