/* ==========================================================================
   BASE.CSS
   Elementos HTML e regras globais de tipografia (Fraunces nos títulos,
   Montserrat no corpo, conforme 01-design-system.md). Reset puro mora em
   reset.css — aqui só ficam decisões de marca. Mobile-first: estilo base
   pensado pra 320px, sem media query aqui exceto onde a escala tipográfica
   muda de degrau.
   ========================================================================== */

/* Fallbacks com métricas ajustadas — reduz o CLS do FOUT (font-display:swap
   troca a fonte de sistema pela real depois de baixar, e como Fraunces tem
   caracteres bem mais largos/altos que um serif genérico, isso reflui o
   texto e empurra o .hero__vsl pra baixo). ascent-override/descent-override
   vêm das métricas REAIS do arquivo (Fraunces 900 do Google Fonts, via
   fontTools). size-adjust NÃO é o valor cru da fórmula xAvgCharWidth
   (157.38% — testado, dava overshoot: uma linha do h1 quebrava a mais que
   com a fonte real, empurrando o vídeo pra baixo na direção oposta) — é
   126%, calibrado testando com a fonte real injetada via FontFace API e
   comparando a altura renderizada do .hero__headline em 320/375/414/768/
   1024/1440px até bater exato em todos. */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Times New Roman');
  size-adjust: 126%;
  ascent-override: 97.8%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 147.73%;
  ascent-override: 96.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7; /* 170% — corpo, conforme design system */
  color: var(--text-black);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.5; /* 150% — títulos, conforme design system */
  font-weight: 400;
}

/* Tipografia fluida — fonte única: docs/Design_System_Landing_Page.xlsx, aba
   "Design System", linhas TIPOGRAFIA. Tamanho de fonte de título/corpo/botão
   fica centralizado só aqui — não duplicar em layout.css nem components.css.

   320/375/390/414px são cenários de teste (não breakpoints — ver aba
   "Regras"), então dentro do tier mobile o tamanho varia de forma FLUIDA
   (clamp) só pra passar perto desses valores de checagem; a partir de
   768/1024/1280/1440 (breakpoints reais) o tamanho passa a ser um degrau
   fixo por media query, igual ao resto do projeto (container, espaçamento).

   H1 (planilha): 36px(320)→42px(414) fluido → 48px(768) → 56px(1024) →
   64px(1280, mantém em 1440). */
h1 {
  font-size: clamp(36px, 16px + 6.4vw, 42px);
  line-height: 1.1;
  font-weight: 900; /* Fraunces Black */
}

@media (min-width: 768px) {
  h1 {
    font-size: 48px;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 56px;
    line-height: 1.05;
  }
}

@media (min-width: 1280px) {
  h1 {
    font-size: 64px;
  }
}

/* H2 (planilha): 28px(320)→34px(414) fluido → 40px(768) → 44px(1024) →
   48px(1280) → 52px(1440, ainda cresce — diferente do H1). */
h2 {
  font-size: clamp(28px, 8px + 6.4vw, 34px);
  line-height: 1.1;
  font-weight: 900; /* Fraunces Black */
}

@media (min-width: 768px) {
  h2 {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 44px;
    line-height: 1.05;
  }
}

@media (min-width: 1280px) {
  h2 {
    font-size: 48px;
  }
}

@media (min-width: 1440px) {
  h2 {
    font-size: 52px;
  }
}

/* Parágrafo (planilha): 16px até 768, sobe pra 18px só a partir de 1024. */
p, li {
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  p, li {
    font-size: 18px;
  }
}

p {
  max-width: 620px; /* trava a largura pra evitar linha excessivamente longa/quebra ruim em telas grandes */
}