.header {
    background: rgba(20, 30, 60, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(120, 160, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 10, 30, 0.25) !important;
}

.header.scrolled {
    background: rgba(20, 30, 60, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 10, 30, 0.35) !important;
    border-bottom: 1px solid rgba(120, 160, 255, 0.4) !important;
}

.dropdown-menu {
    background: rgba(20, 30, 60, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(120, 160, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 10, 30, 0.25) !important;
    z-index: 1100 !important;
    margin-top: 5px !important;
    transform-origin: top center !important;
}

.nav-dropdown {
    position: relative !important;
}

.nav-dropdown:hover .dropdown-menu,
.dropdown-menu.show {
    transform: translateY(0) scale(1) !important;
    margin-top: 10px !important;
}

.dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -6px !important;
    left: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: rgba(20, 30, 60, 0.4) !important;
    border-left: 1px solid rgba(120, 160, 255, 0.3) !important;
    border-top: 1px solid rgba(120, 160, 255, 0.3) !important;
    transform: rotate(45deg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.nav-mobile {
    background: rgba(20, 30, 60, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(120, 160, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 10, 30, 0.25) !important;
    z-index: 1050 !important;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(120, 160, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 0 20px rgba(120, 160, 255, 0.3) !important;
}

.dropdown-item:hover {
    background: rgba(120, 160, 255, 0.15) !important;
    color: #ffffff !important;
}

.server-status {
    background: rgba(120, 160, 255, 0.15) !important;
    border: 1px solid rgba(120, 160, 255, 0.3) !important;
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .header,
    .dropdown-menu,
    .nav-mobile {
        background: rgba(20, 30, 60, 0.4) !important;
    }
}

@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .header,
    .dropdown-menu,
    .nav-mobile {
        background: rgba(20, 30, 60, 0.9) !important;
    }
}

.section, 
.profile-container, 
.container, 
.content,
.hero,
.normativas-hero,
.guide-hero {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 100px !important;
}