/* Base: body, títulos, links. Tudo o mais é componente. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: var(--altura-texto);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-display); font-weight: var(--peso-semibold); line-height: var(--altura-titulo); letter-spacing: var(--espacamento-titulo); color: var(--texto); text-wrap: pretty; }
h1 { font-size: var(--titulo-lg); }
h2 { font-size: var(--titulo-md); }
h3 { font-size: var(--titulo-sm); }
h4 { font-size: var(--texto-lg); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration: underline; }
code, kbd, .mono { font-family: var(--fonte-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
::selection { background: var(--destaque-suave); color: var(--texto); }
:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.display { font-family: var(--fonte-display); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-display); line-height: var(--altura-apertada); font-size: var(--display-md); }
.rotulo { font-size: var(--texto-xs); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-rotulo); text-transform: uppercase; color: var(--texto-suave); }
.suave { color: var(--texto-suave); }
.preco { font-family: var(--fonte-mono); font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; }
.pagina { max-width: var(--largura-pagina); margin: 0 auto; padding: 0 var(--espaco-6); }