:root {
    --nav-bg-glass: rgba(255, 255, 255, 0.1);
    --btn-gradient: linear-gradient(90deg, #ff2c91 0%, #ff52af 100%);
    --active-pink: #ff2c91;
    --text-white: #ffffff;
}

.navbar-container {
    position: fixed;
    top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    padding: 0 15px;
}

.nav-capsule {
    position: relative;
    background-color: var(--nav-bg-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* El padding izquierdo es mucho mayor que el derecho a propósito: la
       cápsula es un pill de 80px de alto y el logo necesita despegarse de
       la curva. A la derecha el botón ya trae su propio relleno. */
    padding: 0 10px 0 68px;
    border-radius: 100px;
    width: 100%;
    max-width: 1900px;
    height: 80px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 35px;
    display: block;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--nx-dur-media) var(--nx-ease);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-links a.active::before {
    content: "✦";
    color: var(--active-pink);
    line-height: 1;
}

.nav-links a.active {
    color: var(--active-pink);
}

.btn-whatsapp {
    background: var(--btn-gradient);
    color: white;
    text-decoration: none;
    padding: 6px 24px;
    border-radius: 100px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s var(--nx-ease), box-shadow 0.2s var(--nx-ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-whatsapp:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 44, 145, 0.4);
}

.icon-wa {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.15));
}

.nav-toggle {
    display: none;
}

.hamburger {
    display: none;
}

/* Laptop: se reduce el aire del logo para no dejar la cápsula descompensada
   cuando queda poco ancho. Debe ir ANTES del bloque de 992px, que redefine
   el padding completo con la misma especificidad. */
@media (max-width: 1200px) {
    .nav-capsule {
        padding-left: 48px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .navbar-container {
        top: 12px;
        padding: 0 12px;
    }

    .nav-capsule {
        height: 58px;
        padding: 0 18px;
        max-width: 360px;
        justify-content: center;
    }

    .hamburger {
        position: absolute;
        left: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        z-index: 3;
    }

    .hamburger span {
        width: 27px;
        height: 3px;
        background: #ffffff;
        border-radius: 20px;
        transition: transform var(--nx-dur-media) var(--nx-ease), opacity var(--nx-dur-media) var(--nx-ease);
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-img {
        height: 28px;
    }

    .btn-whatsapp {
        position: absolute;
        right: 18px;
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .btn-whatsapp span {
        display: none;
    }

    .icon-wa {
        width: 28px;
        height: 28px;
    }

    .nav-links {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(8, 14, 13, 0.96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 28px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition:
            opacity var(--nx-dur-media) var(--nx-ease),
            transform var(--nx-dur-media) var(--nx-ease),
            visibility var(--nx-dur-media) var(--nx-ease);
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        width: 100%;
        padding: 14px 16px;
        border-radius: 18px;
        justify-content: center;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(255, 44, 145, 0.12);
    }

    .nav-toggle:checked ~ .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Mobile pequeño */
@media (max-width: 420px) {
    .nav-capsule {
        max-width: 100%;
        height: 58px;
    }

    .logo-img {
        height: 26px;
    }

    .hamburger {
        left: 20px;
    }

    .btn-whatsapp {
        right: 16px;
    }
}