/* --- VARIABLES GLOBALES Y ESTILOS BASE --- */
@import url("https://fonts.googleapis.com/css2?family=Aspekta:wght@300;550;850&display=swap");

:root {
  /* ✨ MEJORA: Fuente de verdad única para los colores */
  --bg-main: #afafaf; /* Color de fondo principal y de reinicio */
  --text-color: #ffecec;
  --text-hover-color: #bbe2c1;
  --transition-speed: 300ms;
}

/* Colores específicos para cada sección */
.obj { --bg: #ff0000; }
.webs { --bg: #0800ff; }
.nimrock11 { --bg: #d6ebea; }
.videos { --bg: #7054ff; }
.animacion { --bg: #cdc4e0; }
.alergia { --bg: #2c0612; }
.flyers { --bg: #0c8183; }
.gorras { --bg: #ffffff; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Establece la base del tamaño de fuente */
  font-family: "Aspekta", sans-serif;
}

body {
  /* ✨ MEJORA: Usamos Flexbox para centrar el contenido perfectamente */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ocupa al menos toda la altura de la pantalla */
  
  background-color: var(--bg-main);
  transition: background-color var(--transition-speed) ease;
  overflow-x: hidden;
}


/* --- ESTILOS DE LA LISTA DE NAVEGACIÓN --- */
.section-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 1rem; /* Espacio para que no se pegue a los bordes en móvil */
}

.nav-item {
  font-weight: 650;
  /* 🎨 UNIFICADO: Usamos clamp para un tamaño de fuente fluido y adaptable */
  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;
}

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


/* --- BOTÓN 'VOLVER AL TIEMPO' --- */
/* 🎨 UNIFICADO: Tomamos los mejores estilos de tu base.css */
.volver-tiempo {
  position: fixed;
  top: 50%;
  left: 1rem; /* Le damos un poco de espacio desde el borde */
  transform: translateY(-50%);
  color: #000000;
  font-weight: 550;
  font-size: clamp(0.9rem, 2vw, 1rem); /* También lo hacemos responsivo */
  text-decoration: none;
  transition: all 0.5s ease;
  z-index: 999;
}
  
.volver-tiempo:hover {
  font-weight: 800;
  color: #ebe2fd;
  transform: translateY(-50%) scale(1.05); /* Pequeño efecto de zoom */
}