html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-carbon-suave);
  background-color: var(--color-marfil);
}

h1, h2, h3, h4 {
  font-family: var(--font-family-base);
  color: var(--color-nogal);
  line-height: 1.15;
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

p { max-width: 68ch; }

a { color: inherit; transition: color var(--transition-color); }
a:hover { color: var(--color-terracota); }

.overline {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ocre-laton);
  margin-bottom: var(--space-sm);
}
.overline--light { color: var(--color-ocre-laton); }

.section { padding-block: var(--space-xl); }
@media (min-width: 768px) { .section { padding-block: var(--space-2xl); } }
@media (min-width: 1200px) { .section { padding-block: var(--space-3xl); } }

.section--dark {
  background-color: var(--color-nogal);
  color: var(--color-marfil);
}
.section--dark h2, .section--dark h3 { color: var(--color-marfil); }

.section__title { margin-bottom: var(--space-lg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--space-md);
  background: var(--color-carbon); color: var(--color-marfil);
  padding: var(--space-sm) var(--space-md); z-index: 100;
  transition: top var(--transition-color);
}
.skip-link:focus { top: var(--space-md); }

img { background-color: var(--color-marfil-sombra); }