:root{
    --bg:#fafaf8;
    --fg:#111;
    --secondary:#f0ede8;
    --border:#e0dbd4;
    --muted:#888880;
    --accent:#c4a35a;
    --primary:#2b4a2e;
    --primary-fg:#fafaf8;

    --ease-expo:cubic-bezier(.16,1,.3,1);
}

/*==========================
    NAVBAR
===========================*/

#navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
    transition:.35s;
}

#navbar.scrolled{
    background:rgba(250,250,248,.96);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 10px rgba(0,0,0,.05);
}

#navbar.hidden{
    transform:translateY(-100%);
}

.nav-inner{
    max-width:1200px;
    margin:auto;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
}

/*==========================
    LOGO
===========================*/

.brand-link{
    display:flex;
    flex-direction:column;
    gap:4px;
    text-decoration:none;
}

.brand-logo{
    width:120px;
    transition:.3s;
}

.brand-link:hover .brand-logo{
    transform:scale(1.05);
}

.brand-sub{
    font-size:.55rem;
    color:white;
    letter-spacing:.2em;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,.6);
    transition:.3s;
}

#navbar.scrolled .brand-sub{
    text-shadow:none;
}

/*==========================
    LINKS
===========================*/

.nav-links{
    display:none;
    align-items:center;
    gap:2rem;
}

.nav-links>a{
    text-decoration:none;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:white;
    font-weight:600;
    transition:.3s;
}

.nav-links>a:hover{
    color:var(--accent);
}

#navbar.scrolled .nav-links>a{
    color:#555;
}

#navbar.scrolled .nav-links>a:hover{
    color:var(--primary);
}

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

.dropdown{
    position:relative;
}

.dropdown-toggle{
    cursor:pointer;
}

.dropdown-menu{
    position:absolute;
    left:50%;
    top:100%;
    transform:translateX(-50%) translateY(15px);

    background:white;

    min-width:180px;

    border-radius:8px;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    display:flex;
    flex-direction:column;

    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%);
}

.dropdown-menu a{
    padding:12px 20px;
    text-decoration:none;
    font-size:.65rem;
    text-align:center;
}

.dropdown-menu a:hover{
    background:#f5f5f5;
    color:var(--primary);
}

/*==========================
    BOTON
===========================*/

.nav-right{
    display:none;
}

.btn-primary{

    background:var(--primary);

    color:white;

    padding:.8rem 1.5rem;

    text-decoration:none;

    font-size:.65rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-2px);
}

/*==========================
    BURGER
===========================*/

.burger{

    background:none;

    border:none;

    color:white;

    cursor:pointer;
}

#navbar.scrolled .burger{

    color:#111;

}

.burger svg{

    width:22px;

    height:22px;

}

/*==========================
    MOBILE MENU
===========================*/

#mobile-menu{

    display:none;

    flex-direction:column;

    background:white;

    border-top:1px solid var(--border);

    position:absolute;

    width:100%;

    top:64px;

    left:0;

    padding:20px;

    gap:20px;

}

#mobile-menu a{

    text-decoration:none;

    color:#444;

    text-transform:uppercase;

    font-size:.8rem;

}

/*==========================
    DESKTOP
===========================*/

@media(min-width:768px){

.nav-links{
display:flex;
}

.nav-right{
display:flex;
}

.burger{
display:none;
}

#mobile-menu{
display:none!important;
}

}


/*==========================
    DESTACAR "PRODUCTOS" (DROPDOWN TOGGLE)
===========================*/

.nav-links .dropdown-toggle {
    text-decoration: none;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    
    /* Blanco puro y más grueso para que destaque */
    color: #ffffff; 
    font-weight: 800; /* El resto tiene 600, este es más gordito */
    
    transition: .3s;
}

.nav-links .dropdown-toggle:hover {
    color: var(--accent);
}

/* Cuando hacés scroll el navbar se pone blanco, 
   así que acá le ponemos un gris casi negro para que se siga leyendo y destacando */
#navbar.scrolled .nav-links .dropdown-toggle {
    color: #111; /* Más oscuro que el #555 del resto de links */
    font-weight: 800;
}

#navbar.scrolled .nav-links .dropdown-toggle:hover {
    color: var(--primary);
}


.dropdown-menu a {
    padding: 12px 20px;
    text-decoration: none;
    font-size: .65rem;
    text-align: center;
    color: #000 !important;
}



/*==========================
    ENLACES DEL DROPDOWN
===========================*/

.dropdown-menu a {
    padding: 12px 20px;
    text-decoration: none;
    font-size: .65rem;
    text-align: center;
    
    /* Forzamos el color oscuro siempre, porque el fondo de la caja es blanco */
    color: #444444 !important; 
    
    /* Tipografía idéntica al resto del menú para que no desentone */
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    
    transition: background 0.3s, color 0.3s;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
    /* Al pasar el mouse, toma el color verde/principal de tu paleta */
    color: var(--primary) !important; 
}