:root {
  --verde-palmaceite: #EB6109;
  --verde-hover: #EB6109;
  --verde-claro-bg: #e6f5eb;
  --blanco: #ffffff;
  --gris-texto: #444444;
  --gris-borde: #e0e0e0;
  --sombra-suave: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
  --transicion: all 0.3s ease;
}

/* ==== MENÚ PRINCIPAL (NAVBAR) ==== */
#mainNav {
  transition: var(--transicion);
  padding: 10px 0; /* Reduje un poco el padding para que no sea tan alto */
  background: transparent;
  z-index: 3000;
  font-family: "Poppins", sans-serif;
}

/* Estado Scrolled y Blanco */
#mainNav.scrolled, 
#mainNav.blanco {
  background: rgba(255, 255, 255, 0.98);
  padding: 8px 0;
  border-bottom: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
}

/* ==== SOLUCIÓN DEL LOGO ==== */
#logo {
  height: 3.2rem;
  transition: var(--transicion);
  
  /* ESTO QUITA EL FONDO BLANCO CUANDO EL MENÚ ES BLANCO */
  /* Funciona como una fusión de capas de Photoshop (Multiplicar) */
  mix-blend-mode: multiply; 
  display: block;
}

/* Ajuste del logo al bajar */
#mainNav.scrolled #logo {
  height: 2.8rem;
}

/* Nota: Si en el modo "inicio" (transparente) el logo se ve oscuro, 
   necesitarás sí o sí un PNG con fondo transparente real. */


/* ==== LINKS ==== */
#mainNav .navbar-nav .nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blanco);
  margin: 0 4px;
  padding: 8px 14px;
  border-radius: 8px; /* Bordes menos redondos, más serios */
  transition: var(--transicion);
}

#mainNav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Colores en fondo blanco */
#mainNav.scrolled .nav-link, 
#mainNav.blanco .nav-link {
  color: var(--gris-texto);
}

#mainNav.scrolled .nav-link:hover, 
#mainNav.blanco .nav-link:hover {
  color: var(--verde-palmaceite);
  background-color: var(--verde-claro-bg);
}

/* ==== SUBMENÚ (CORREGIDO: SIN MOVIMIENTO BRUSCO) ==== */
#mainNav .dropdown-menu {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 8px; /* Bordes más sutiles */
  box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Sombra más suave */
  padding: 5px 0;
  margin-top: 0px !important; /* Eliminamos el espacio extra que lo hacía ver "despegado" */
  
  /* Animación: Solo aparece (Fade), NO se mueve */
  animation: fadeIn 0.3s ease forwards;
  display: none; /* Asegura que esté oculto hasta el hover/click */
}

/* Forzar que se muestre al tener la clase show (Bootstrap) */
#mainNav .dropdown-menu.show {
  display: block;
}

/* Nueva animación simple: Solo opacidad */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Flechita (Piquito) - Opcional, si no te gusta bórralo */
#mainNav .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--blanco);
  border-top: 1px solid var(--gris-borde);
  border-left: 1px solid var(--gris-borde);
  transform: rotate(45deg);
  z-index: -1;
}

/* Ítems del menú */
#mainNav .dropdown-item {
  font-weight: 500;
  color: var(--gris-texto);
  padding: 8px 20px;
  border-left: 0px solid transparent; 
  transition: all 0.2s ease;
}

#mainNav .dropdown-item:hover {
  background-color: var(--verde-claro-bg);
  color: var(--verde-palmaceite);
  padding-left: 25px; /* Pequeño desplazamiento a la derecha */
}

/* ==== BOTÓN ACCESOS ==== */
.btn-acceso {
  background: var(--verde-palmaceite) !important;
  color: var(--blanco) !important;
  border-radius: 6px;
  padding: 6px 15px !important;
}

/* ==== RESPONSIVE (MÓVIL) - CORRECCIÓN DE EXPANSIÓN ==== */
@media (max-width: 991px) {
  #mainNav {
    background: var(--blanco);
    padding: 10px 0;
  }
  
  #mainNav .nav-link {
    color: var(--gris-texto);
    padding: 10px 15px; /* Más compacto */
    margin: 0;
    border-bottom: 1px solid #f0f0f0; /* Línea separadora sutil */
    border-radius: 0;
  }
  
  /* Solución a la "expansión fea" en móvil */
  #mainNav .dropdown-menu {
    border: none;
    box-shadow: none;
    background: #fcfcfc; /* Un gris casi blanco */
    padding-left: 15px;
    margin: 0;
    border-radius: 0;
    animation: none; /* Sin animación en móvil para que sea rápido */
  }

  /* Ocultar la flechita en móvil */
  #mainNav .dropdown-menu::before {
    display: none;
  }
  
  #logo {
    mix-blend-mode: normal; /* En móvil a veces es mejor dejarlo normal si el fondo cambia */
  }
}