*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--alabastro);
  color: var(--ebano);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; letter-spacing: .01em; }
p { margin: 0; }
::selection { background: var(--lino); color: var(--ebano); }
:focus-visible { outline: 2px solid var(--ebano); outline-offset: 3px; border-radius: 6px; }

.hero :focus-visible, .footer :focus-visible { outline-color: var(--alabastro); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 160px) 0; }
.muted { color: var(--topo-oscuro); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--topo-oscuro); font-weight: 500; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--topo); }

.title {
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.04;
  text-transform: uppercase;
}
.title--sm { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.12; text-transform: none; letter-spacing: 0; max-width: 22ch; }
.title .soft { color: var(--topo-texto); display: block; }
.title--light { color: var(--alabastro); }
.title--light .soft { color: var(--topo); }