/*=========================================================
    XALTILOLLI 2.0
    DROPDOWN
=========================================================*/


/*=========================================================
    CONTENEDOR
=========================================================*/

.menu__item--dropdown{

    position:relative;

}



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

.dropdown{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%) translateY(-10px);

    width:var(--dropdown-width);

    padding:.75rem 0;

    margin:0;

    list-style:none;

    border-radius:var(--dropdown-radius);

    background:var(--dropdown-background);

    backdrop-filter:blur(12px);

    box-shadow:var(--dropdown-shadow);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .25s ease,

        transform .25s ease,

        visibility .25s;

}



/*=========================================================
    ABRIR
=========================================================*/

.menu__item--dropdown:hover > .dropdown,
.menu__item--dropdown:focus-within > .dropdown,
.menu__item--dropdown.open > .dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}


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

.dropdown li{

    margin:0;

    padding:0;

}



.dropdown a{

    display:block;

    padding:.85rem 1.4rem;

    color:#fff;

    text-decoration:none;

    font-size:.95rem;

    transition:

        background .20s,

        color .20s,

        padding-left .20s;

}



/*=========================================================
    HOVER
=========================================================*/

.dropdown a:hover{

    background:rgba(255,255,255,.08);

    color:var(--menu-hover);

    padding-left:1.8rem;

}



/*=========================================================
    DIVISOR
=========================================================*/

.dropdown__divider{

    height:1px;

    margin:.5rem 1rem;

    background:rgba(255,255,255,.15);

}



/*=========================================================
    FLECHA
=========================================================*/

.menu__item--dropdown:hover .menu__arrow,

.menu__item--dropdown.open .menu__arrow{

    transform:rotate(180deg);

}



/*=========================================================
    EFECTO ENTRADA
=========================================================*/

.dropdown li{

    opacity:0;

    transform:translateY(-6px);

    transition:

        opacity .25s ease,

        transform .25s ease;

}



.menu__item--dropdown:hover .dropdown li,

.menu__item--dropdown.open .dropdown li{

    opacity:1;

    transform:translateY(0);

}



/*=========================================================
    RETARDO CASCADA
=========================================================*/

.dropdown li:nth-child(1){transition-delay:.03s;}
.dropdown li:nth-child(2){transition-delay:.06s;}
.dropdown li:nth-child(3){transition-delay:.09s;}
.dropdown li:nth-child(4){transition-delay:.12s;}
.dropdown li:nth-child(5){transition-delay:.15s;}
.dropdown li:nth-child(6){transition-delay:.18s;}
.dropdown li:nth-child(7){transition-delay:.21s;}
.dropdown li:nth-child(8){transition-delay:.24s;}
.dropdown li:nth-child(9){transition-delay:.27s;}