@layer base {

  *,
  *::before,
  *::after { box-sizing: border-box }

  * { margin: 0; padding: 0 }

  html {
    scroll-behavior: smooth;

    scroll-padding-top: var(--header-height);

    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    background: var(--papel);
    color: var(--rio-negro);
    -webkit-font-smoothing: antialiased;
  }

  img { display: block; max-width: 100% }

  a { color: var(--aco) }

  h1, h2, h3 {
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: 1.12;
  }
  h1 { font-size: var(--size-h1) }
  h2 { font-size: var(--size-h2) }
  h3 { font-size: var(--size-h3); letter-spacing: -0.01em }

  ::selection { background: var(--areia); color: var(--rio-negro) }

  :focus-visible {
    outline: 3px solid var(--areia);
    outline-offset: 3px;
    border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}