/* ============================================================
   BASE — reset, fontes locais, escala responsiva
   ============================================================ */

/* Mundial — licenciada, embutida localmente (jamais rede).
   woff2 primeiro (universal, leve); .otf como fallback. Cada peso do Mundial
   é empacotado como família própria no .otf; aqui unificamos sob "Mundial". */
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialThin.woff2") format("woff2"),
       url("../assets/fonts/MundialThin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialLight.woff2") format("woff2"),
       url("../assets/fonts/MundialLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialRegular.woff2") format("woff2"),
       url("../assets/fonts/MundialRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialDemibold.woff2") format("woff2"),
       url("../assets/fonts/MundialDemibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialItalic.woff2") format("woff2"),
       url("../assets/fonts/MundialItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
/* Thin itálico: só o "(in memoriam)" da História usa (ver css/historia.css) */
@font-face {
  font-family: "Mundial";
  src: url("../assets/fonts/MundialThinItalic.woff2") format("woff2"),
       url("../assets/fonts/MundialThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: block;
}

/* Archivo — ESTÁTICOS instanciados (Light/Regular/Medium/SemiBold, largura
   normal), família renomeada "Archivo FBR" para nunca casar com fontes locais
   do sistema (ex.: "Archivo Expanded"). Itálico é sintetizado (não usamos). */
@font-face {
  font-family: "Archivo FBR";
  src: url("../assets/fonts/ArchivoFBR-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  font-display: block;
}
@font-face {
  font-family: "Archivo FBR";
  src: url("../assets/fonts/ArchivoFBR-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: block;
}
@font-face {
  font-family: "Archivo FBR";
  src: url("../assets/fonts/ArchivoFBR-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-display: block;
}
@font-face {
  font-family: "Archivo FBR";
  src: url("../assets/fonts/ArchivoFBR-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  font-display: block;
}
@font-face {
  font-family: "Archivo FBR Expanded";
  src: url("../assets/fonts/ArchivoFBRExpanded-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: expanded;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* 1rem = 10 design-px no canvas 1920. Piso de 7px para tablets. */
  font-size: max(7px, 0.52083vw);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-0);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.55;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  /* ARMADILHA MEDIDA EM 16/08 (reportada três vezes pelo Cesar): a JANELA pode
     ser mais alta que a TELA. Medido aqui: screen.availHeight 923 px com
     innerHeight 1200 px — a viewport tinha 277 px que o monitor não mostrava,
     e todo rodapé (o CTA da capa, a barra de seções da Localização) caía fora
     do quadro físico. `100vh`/`100dvh` seguem a janela e não acusam nada.
     `--vh-util` é medido no JS contra a tela (main.js → ajustarAlturaUtil) e
     vale o MENOR entre janela e área visível. Quando os dois coincidem — o caso
     normal e o do totem — nada muda. */
  height: var(--vh-util, 100dvh);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation; /* sem double-tap-zoom da página */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; }

/* Tela = camadas empilhadas com crossfade + deslocamento 24px */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity var(--t-screen) ease-out, transform var(--t-screen) ease-out;
  pointer-events: none;
  overflow: hidden;
}
.screen.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.screen.is-leaving {
  opacity: 0;
  transform: translateY(-2.4rem);
  pointer-events: none;
}

/* Utilidades tipográficas */
.type-hero {
  font-family: var(--font-display);
  font-weight: 100;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  font-size: clamp(var(--fs-hero-min), 6.4rem, var(--fs-hero));
  line-height: 1.15;
}
.type-module-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  font-size: var(--fs-module-sm);
  line-height: 1.2;
}
.type-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 1.4;
}
.type-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.type-data {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.text-secondary { color: var(--text-2); }

/* Scrollbars discretos (web/desktop) */
::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; }
::-webkit-scrollbar-thumb { background: rgba(229, 224, 211, 0.18); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }