:root {
    --accent-green: #1FFFB0;
    --btn-dark-blue: #002360;
    --text-muted-gray: #cbd5e1;
    --font-encode: 'Encode Sans', sans-serif;
    --bg-white-soft: #F5F5F5;
    --text-dark-gray: #242424;
}

/* ---- Base navbar layout ---- */
.custom-navbar {
    padding-top: 36px;
    z-index: 10;

    .container {
        padding: 12px 24px;
    }
}
.navbar-brand img {
    max-height: 40px;
    width: auto;
}
.custom-navbar .nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    transition: color 0.3s ease;
}
.custom-navbar .btn {
    transition: none !important;
}

.btn-acceso {
    background-color: var(--accent-green);
    color: var(--btn-dark-blue) !important;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    padding: 0.6rem 2.2rem;
    border: 4px solid rgba(31, 255, 176, 0.6);
    background-clip: padding-box; 
}
.btn-acceso:hover {
    background-color: var(--accent-green) !important;
    color: var(--btn-dark-blue) !important;
    border-color: rgba(31, 255, 176, 0.6) !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* ========================================
   Dark Variant (default — index hero)
   ======================================== */
.custom-navbar:not(.navbar-light-variant) .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}
.custom-navbar:not(.navbar-light-variant) .nav-link:hover,
.custom-navbar:not(.navbar-light-variant) .nav-link.active {
    color: #ffffff !important;
}

/* ========================================
   Light Variant (about_us, etc.)
   ======================================== */
.navbar-light-variant {
    .container{
        background-color: white;
        border-radius: 60px;
        box-shadow: 0px 0px 16.1px 0px #00000033;

        .btn-acceso {
            background-color: var(--btn-dark-blue);
            color: white !important;
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 50px;
            padding: 0.6rem 2.2rem;
            border: 4px solid rgba(31, 255, 176, 0.6);
            background-clip: padding-box; 
        }
        .btn-acceso:hover {
            background-color: var(--btn-dark-blue);
            color: white !important;
            border-color: rgba(31, 255, 176, 0.6) !important;
        }
    }
    
}
.navbar-light-variant .navbar-toggler {
    border-color: rgba(0, 35, 96, 0.3) !important;
}
.navbar-light-variant .nav-link {
    color: var(--text-dark-gray) !important;
}
.navbar-light-variant .nav-link:hover,
.navbar-light-variant .nav-link.active {
    color: var(--btn-dark-blue) !important;
}

/* ========================================
   Mobile Responsive
   ======================================== */
@media screen and (max-width: 768px) {

    .custom-navbar .navbar-toggler {
        border: none !important;
        padding: 0 !important;

        .icon-close {
            display: none;
        }

        &:not(.collapsed) {
            .icon-open {
                display: none;
            }
            .icon-close {
                display: inline-block;
            }
        }
    }

    .custom-navbar .navbar-collapse {

        .nav-item {
            padding: 16px 0px 16px 12px;

            .nav-link {
                font-weight: 500;
                font-size: 16px;
                line-height: 16px;
                letter-spacing: 0px;
                text-align: start;
            }
        }
        
    }

    .custom-navbar {
        margin-top: 0px;
        padding: 16px 24px;
        z-index: 10;

        .container {
            padding: 0px;
        }
    }

    .navbar-light-variant {
        border-radius: 0;
        background-color: white !important;

        .container {
            border-radius: 0;
            box-shadow: none;
        }
    }
}