*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 1rem/1.65 var(--fonte);
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
h1, h2, h3 { color: var(--branco); }
h1, h2 {
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7.1vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4.3vw, 4rem); }
a { color: inherit; text-underline-offset: .25em; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.layout__container {
  width: min(100% - var(--gutter) * 2, var(--largura-desktop));
  margin-inline: auto;
}
.link-pular {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--fundo);
  translate: 0 calc(-100% - 2rem);
}
.link-pular:focus { translate: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}