:root {
  --hover-bg: #afafaf; /* fondo base */
  --text-color: #ffecec;
  --text-hover-color: #ff00599b;
  --transition-speed: 300ms;
}

html, body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--hover-bg);
  font-family: "Aspekta", sans-serif;
  overflow-x: hidden; /* para evitar scroll horizontal */
}

.section-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-top: 4rem;
  padding: 0 1rem; /* para que no se pegue al borde */
}

.nav-item {
  font-weight: 600;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--text-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease, font-weight var(--transition-speed) ease;
  user-select: none; /* evita selección accidental */
}

.nav-item:hover,
.nav-item:focus-visible {
  font-weight: 50;
  color: var(--text-hover-color);
  outline: none;
}