/* =========================================
TOP BAR PREMIUM SUPERIOR
========================================= */
.top-bar{
    width:100%;
    height:38px;
    background:#556b2f;
    color:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    font-size:12px;
    font-weight:500;
    letter-spacing:.4px;
    position:fixed;
    top:0;
    left:0;
    z-index:1200;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.top-bar div{
    white-space:nowrap;
}

/* =========================================
NAVBAR PRINCIPAL
========================================= */
.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;

    height:92px;

    position:fixed;
    top:38px;
    left:0;
    width:100%;

    z-index:1100;

    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(12px);

    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;

    border-bottom:1px solid rgba(0,0,0,0.04);

    box-shadow:0 8px 25px rgba(0,0,0,0.10);

    transition:all 0.3s ease;
}

/* SCROLL */
.nav.scrolled{
    background:rgba(255,255,255,0.92);
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

/* =========================================
LOGO
========================================= */
.logo img{
    height:78px;
    transition:.3s;
}

/* =========================================
MENU
========================================= */
.menu{
    display:flex;
    align-items:center;
    list-style:none;
    padding:0;
    margin:0;
    gap:28px;
}

.menu li{
    list-style:none;
    position:relative;
}

/* LINKS */
.nav a{
    position:relative;
    color:#666;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    padding:6px 0;
    transition:all .25s ease;
}

/* HOVER */
.nav a:hover{
    color:#556b2f;
}

/* LINEA INFERIOR */
.nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0%;
    height:2px;
    background:#556b2f;
    border-radius:2px;
    transform:translateX(-50%);
    transition:width .25s ease;
}

.nav a:hover::after{
    width:100%;
}

/* =========================================
DROPDOWN
========================================= */
.dropdown{
    position:relative;
}

.dropdown-content{
    position:absolute;
    top:100%;
    left:0;
    margin-top:12px;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(10px);
    border-radius:14px;
    padding:10px 0;
    min-width:210px;
    box-shadow:0 12px 25px rgba(0,0,0,0.08);
    border:1px solid rgba(0,0,0,0.05);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .25s ease;
}

.dropdown-content li a{
    padding:12px 18px;
    display:block;
    color:#444;
    font-size:13px;
}

.dropdown-content li a::after{
    display:none;
}

.dropdown-content li a:hover{
    background:#f5f5f5;
    padding-left:24px;
    color:#556b2f;
}

.dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================================
ICONOS
========================================= */
.nav-icon{
    font-size:21px;
    color:#555;
    transition:.3s;
}

.nav-icon:hover{
    color:#556b2f;
    transform:scale(1.08);
}

/* =========================================
CONTADOR CARRITO
========================================= */
.cart-icon-box{
    position:relative;
}

#cart-count{
    position:absolute;
    top:-8px;
    right:-10px;
    width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    background:#556b2f;
    color:#fff;
    font-size:10px;
    font-weight:bold;
    border-radius:50%;
    display:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* =========================================
BOTON HAMBURGUESA
========================================= */
.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#556b2f;
}

/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 992px){

    .top-bar{
        display:none;
    }

    .nav{
        top:0;
        height:90px;
        padding:0 25px;
        border-radius:0;
    }

    .logo img{
        height:58px;
    }

    .menu-toggle{
        display:block;
    }

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
    }

    .menu{
        flex-direction:column;
        align-items:flex-start;
        background:rgba(255,255,255,0.98);
        backdrop-filter:blur(12px);
        padding:20px;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
        gap:0;
        box-shadow:0 8px 20px rgba(0,0,0,0.08);
    }

    .menu.active{
        max-height:700px;
    }

    .menu li{
        width:100%;
        margin:8px 0;
    }

    .menu a{
        font-size:15px;
    }

    .dropdown-content{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        border:none;
        background:transparent;
        margin-top:5px;
        padding-left:15px;
        display:none;
    }

    .dropdown.active .dropdown-content{
        display:block;
    }
}