/* presente.css - Versión final sin scroll */

:root {
  --hover-bg: #daefef;
  --text-color: #ff0000;
  --text-hover-color: #ffffff;
  --transition-speed: 100ms;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Aspekta", sans-serif;
  overflow: hidden; /* Ocultamos CUALQUIER scroll posible */
}

body {
  height: 100vh; /* Forzamos al body a tener EXACTAMENTE la altura de la pantalla */
  background-color: var(--hover-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ✨ CAMBIO: El espacio entre elementos también depende de la altura */
  gap: 1vh;
  padding: 1rem;
  width: 100%;
}

.nav-item {
  font-weight: 800;
  /* ✨ LA CLAVE: El tamaño de la letra ahora depende de la ALTURA de la pantalla. */
  /* Esto asegura que la lista siempre quepa verticalmente. */
  font-size: 8vh;
  color: var(--text-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease, font-weight var(--transition-speed) ease;
  user-select: none;
  text-align: center;
  line-height: 1.1; /* Ajustamos el interlineado para que esté más compacto */
}

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

/* ✨ NOTA: Ya no necesitamos la sección @media, porque este nuevo método
   funciona automáticamente en TODAS las pantallas, grandes y pequeñas. */