/* ==================== CONFIGURACIÓN GENERAL ==================== */

/* Base cuando está en HERO: transparente + texto claro */
.navbar-background {
    background: var(--navbar-hero-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        background var(--duration-800) ease,
        backdrop-filter var(--duration-800) ease,
        -webkit-backdrop-filter var(--duration-800) ease,
        border-color var(--duration-800) ease,
        box-shadow var(--duration-800) ease;
}

.navbar-background,
.navbar-background .navbar-brand,
.navbar-background .nav-link,
.navbar-background .dropdown-item {
    font-family: var(--font-cabinet);
}

/* Brand */
.navbar-background .navbar-brand {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-400);
    letter-spacing: 0.5px;
    transition: color var(--duration-800) ease, opacity var(--duration-800) ease;
}

/* Links */
.navbar-background .nav-link {
    margin-left: 20px;
    font-size: var(--font-size-200);
    color: var(--color-text-tertiary);
    transition: color var(--duration-800) ease, opacity var(--duration-800) ease;
}

.navbar-background .nav-link:hover {
    color: var(--color-accent-aqua-primary);
}

/* ==================== BG EN ZONA CLARA ==================== */

.navbar-background.is-light {
    background: var(--navbar-glass-bg);
    backdrop-filter: blur(var(--navbar-blur));
    -webkit-backdrop-filter: blur(var(--navbar-blur));
}

.navbar-background.is-light .navbar-brand,
.navbar-background.is-light .nav-link {
    color: var(--color-text-primary);
}

.navbar-background.is-light .nav-link:hover {
    color: var(--color-accent-aqua-secondary);
}

/* ==================== DROPDOWN GLASS ==================== */

.navbar-background .dropdown-menu {
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(var(--navbar-blur));
    -webkit-backdrop-filter: blur(var(--navbar-blur));
    border: none;
    border-radius: 14px;
    padding: 10px;
    background-clip: padding-box;
}

.navbar-background .dropdown-item {
    color: var(--color-text-primary);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background var(--duration-800) ease, transform var(--duration-800) ease;
}

.navbar-background .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.50);
    transform: translateX(4px);
}

.navbar-background.is-light .dropdown-menu {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(var(--navbar-blur));
    -webkit-backdrop-filter: blur(var(--navbar-blur));
    border: none;
    border-radius: 14px;
    padding: 10px;
    background-clip: padding-box;
}

.navbar-background.is-light .dropdown-item {
    color: var(--color-text-tertiary);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background var(--duration-800) ease, transform var(--duration-800) ease;
}

.navbar-background.is-light .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(4px);
}

/* ==================== HAMBURGER ==================== */

.navbar-background .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.45);
}

.navbar-background.is-light .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.45);
}

.navbar-background .navbar-toggler-icon {
    filter: invert(1) opacity(0.75);
    transition: filter var(--duration-800) ease;
}

.navbar-background.is-light .navbar-toggler-icon {
    filter: invert(0) opacity(0.75);
}

/* ==================== SUBRAYADO ==================== */

.navbar-background .nav-link {
    position: relative;
}

.navbar-background .nav-link::after {
    content: "";
    position: absolute;
    left: -2px;
    bottom: 5px;
    width: 0%;
    /* height: 2px; */
    border-radius: 2px;
    background: currentColor;
    opacity: 75%;
    transition: width var(--duration-800) ease, opacity var(--duration-800) ease;
}

.navbar-background .nav-link:hover::after {
    width: 100%;
}