/* ===== Header y navegación ===== */
header {
  background: #222;
  color: #fff;
  padding: 20px 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Mantener logo a la izquierda */
  flex-wrap: wrap;
  position: relative;
}

header .logo {
  font-weight: bold;
  font-size: 1.5rem; /* Un tamaño de fuente un poco mayor para hacerlo más visible */
  white-space: nowrap;
}

nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  margin-right: auto; /* Para centrar nav en el espacio disponible */
  flex-wrap: wrap;
  max-width: 800px; /* Ajusta el máximo de ancho para el nav */
  flex-grow: 1;
  justify-content: center; /* Centra los links dentro del nav */
}

nav a {
  color: #e7dbdb;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 8px;
  transition: all 0.3s ease; /* Transición suave para el cambio de color */
  white-space: nowrap;
  font-family: 'Be Vietnam', sans-serif; 
}

nav a:hover {
  color: #fff; /* Cambia el color del texto al pasar el mouse */
  background-color: #14b9d5; /* Fondo suave en hover */
  border-radius: 5px; /* Redondear bordes para un estilo más amigable */
  transform: scale(1.1); /* Efecto de escala para mejorar la interacción */
}

/* ===== Responsive para dispositivos pequeños ===== */
@media (max-width: 768px) {
  header {
    padding: 20px 1rem; /* Reducir el padding para dispositivos pequeños */
    text-align: center; /* Centrar el texto en pantallas más pequeñas */
  }

  nav {
    flex-direction: column; /* Apilar los enlaces de navegación verticalmente */
    gap: 15px;
    width: 100%;
    justify-content: flex-start; /* Alinea los enlaces al inicio */
    max-width: none; /* Eliminar el max-width para que ocupe el 100% */
  }

  nav a {
    font-size: 1.1rem; /* Aumentar el tamaño de fuente de los enlaces */
    padding: 10px 5px;
  }
}

@media (max-width: 480px) {
  header {
    padding: 15px 1rem; /* Reducir aún más el padding en pantallas más pequeñas */
  }

  nav a {
    font-size: 1rem; /* Ajustar el tamaño de los enlaces */
    padding: 8px 5px;
  }
}