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

html {
  color: var(--cor-tinta);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* Troca de página same-origin: crossfade nativo (Chrome/Safari/Android).
   Só root · ~180ms · sem JS · Firefox ignora (= troca seca). */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: ease;
}
/* Mobile: um pouco mais curto — menos tempo com snapshot na tela. */
@media (max-width: 719px) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.14s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition {
    navigation: none;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  font: 400 1.05rem/1.65 var(--fonte-corpo);
  background:
    radial-gradient(110% 70% at 100% -10%, var(--fundo-radial-1), transparent 52%),
    radial-gradient(90% 55% at -5% 35%, var(--fundo-radial-2), transparent 48%),
    linear-gradient(165deg, var(--fundo-grad-ini) 0%, var(--fundo-grad-meio) 28%, var(--cor-papel-forte) 58%, var(--cor-areia) 100%);
  color: var(--cor-tinta);
  background-attachment: fixed;
}

@media (max-width: 719px) {
  body {
    background-attachment: scroll;
  }
}

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

a {
  color: var(--cor-azul-mar);
}

a:hover {
  color: var(--cor-azul-mar-profundo);
}

h1,
h2,
h3 {
  font-family: var(--fonte-display);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-tinta);
  margin: 0;
}