/* 🌟 HEADER FIJO SIN SOLAPAMIENTO */
  header {
    
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important; /* Altura fija */
    padding: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    font-size:  10px;
    
    /* Imagen de fondo ajustada correctamente */
    background: url("https://images.pexels.com/photos/2119903/pexels-photo-2119903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") no-repeat center center;
    background-size: cover; /* Asegura que la imagen cubra todo el header */
    
    /* 🔥 Difuminado del fondo */
    backdrop-filter: blur(10px) !important;
    
    /* 🔥 Capa semitransparente para mejor legibilidad */
    position: relative;
}
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Capa oscura con transparencia */
  backdrop-filter: blur(5px); /* Difuminado extra */
  z-index: -1; /* Coloca la capa detrás del contenido */
}

h1 {
  margin-bottom: 10px; /* ✅ Espacio entre el título y el menú */
  font-size: 1.8rem;
  color: #dde4e8;
}

  
  /* 🔥 Navbar con hover dinámico */
  /* 🔥 NAVBAR DINÁMICO */
.nav-container {
  margin-top: 10px; /* Espacio entre el título y el menú */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 25px;
}



nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 15px;
  transition: color 0.3s ease-in-out, transform 0.2s;
  position: relative;
}

/* ✨ EFECTO DE SUBRAYADO */
nav ul li a::after {
  content: "";
  width: 0;
  height: 3px;
  background: #f04e23;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out;
}

nav ul li a:hover {
  color: #f04e23;
  transform: scale(1.1);
}

nav ul li a:hover::after {
  width: 100%;
}

  /* 🎯 MENÚ HAMBURGUESA PARA MÓVILES */
  .menu-toggle {
    display: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
  }
  
  /* 🛠️ Responsividad */
  @media (max-width: 768px) {
    header {
      padding: 10px 15px;
    }
  
    /* 🔥 Ocultar menú y mostrar botón hamburguesa */
    nav ul {
      display: none;
      flex-direction: column;
      background: rgba(51, 51, 51, 0.95);
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      text-align: center;
      gap: 10px;
      padding: 10px 0;
    }
  
    nav ul.show {
      display: flex;
    }
  
    .menu-toggle {
      display: block;
    }
  }