/* Estilos específicos para menú con fondo blanco */

/* Sobrescribir estilos de navegación 3D para fondo blanco */
.nav-3d-button {
    position: relative;
    border-radius: 0.5rem;
    background: transparent !important; /* Transparent background to show underlying image */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.nav-3d-button:hover {
    background: rgba(255, 255, 255, 0.3) !important; /* Semi-transparent white background on hover for contrast */
    backdrop-filter: blur(4px);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.nav-3d-button:active {
    background: rgba(255, 255, 255, 0.4) !important; /* Semi-transparent white background for active state */
    backdrop-filter: blur(4px);
    transform: translateY(0) scale(0.98);
}

.nav-3d-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(59, 130, 246), rgb(34, 197, 94));
    transform: translateX(-50%);
    transition: width 0.3s ease;
    border-radius: 1px;
}

.nav-3d-button:hover::before {
    width: 80%;
}

.mobile-nav-3d {
    background: transparent !important; /* Transparent background to show underlying image */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.mobile-nav-3d:hover {
    background: rgba(255, 255, 255, 0.3) !important; /* Semi-transparent white background on hover for contrast */
    backdrop-filter: blur(4px);
    transform: translateX(4px) scale(1.02);
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
}

.mobile-nav-3d:active {
    background: rgba(255, 255, 255, 0.4) !important; /* Semi-transparent white background for active state */
    backdrop-filter: blur(4px);
    transform: translateX(4px) scale(0.98);
}

/* Asegurar que el menú tenga fondo blanco sólido, excepto en home */
nav:not(.on-home) {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Navegación con fondo blanco en página home */
nav.on-home:not(.scrolled) {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Navegación con fondo cuando se hace scroll en home */
nav.on-home.scrolled {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Estilos para dropdowns con fondo blanco */
.dropdown-menu {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Menú móvil con fondo blanco en páginas normales */
nav:not(.on-home) .mobile-menu,
nav.on-home.scrolled .mobile-menu {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Menú móvil blanco en página home sin scroll */
nav.on-home:not(.scrolled) .mobile-menu {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Colores de texto oscuros para navegación en home */
nav.on-home:not(.scrolled) .nav-3d-button,
nav.on-home:not(.scrolled) .mobile-nav-3d,
nav.on-home:not(.scrolled) a,
nav.on-home:not(.scrolled) button {
    color: rgb(31, 41, 55) !important; /* gray-800 */
    transition: color 0.3s ease;
}

nav.on-home:not(.scrolled) .nav-3d-button:hover,
nav.on-home:not(.scrolled) .mobile-nav-3d:hover,
nav.on-home:not(.scrolled) a:hover,
nav.on-home:not(.scrolled) button:hover {
    color: rgb(29, 78, 216) !important; /* blue-700 for better contrast with blue background */
}

/* SVGs en color oscuro para navegación en home */
nav.on-home:not(.scrolled) svg {
    color: rgb(31, 41, 55) !important; /* gray-800 */
    fill: rgb(31, 41, 55) !important;
}