/*==================================================
  COSVIN FRAMEWORK
  NAVIGATION MENU
  Version: 2.0.0
==================================================*/

/*==================================
MENÚ
==================================*/

.cosvin-menu{

    width:100%;

    background:#111;

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.06);

}

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

.cosvin-menu ul{

    max-width:var(--container);

    margin:0 auto;

    padding:0 24px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:42px;

    list-style:none;

}

/*==================================
ITEMS
==================================*/

.cosvin-menu li{

    display:flex;

    align-items:center;

}

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

.cosvin-menu a{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    height:60px;

    color:var(--text-white);

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.30s;

}

/*==================================
EFECTO INFERIOR
==================================*/

.cosvin-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    border-radius:999px;

    background:var(--color-primary);

    transition:.30s;

}

.cosvin-menu a:hover{

    color:var(--color-primary);

}

.cosvin-menu a:hover::after{

    width:100%;

}

/*==================================
OFERTAS
==================================*/

.menu-offers{

    color:#FFD54A !important;

    font-weight:700;

}

.cosvin-menu a[href*="/ofertas/"]{
    margin-right:48px;
    color:#23e878;
    font-weight:800;
}

.cosvin-menu a[href*="/ofertas/"]::before{
    content:"";
    position:absolute;
    z-index:2;
    right:-46px;
    top:2px;
    width:44px;
    height:54px;
    background:url("../../images/branding/cosvin-ofertas-pointing-optimized.png") center/contain no-repeat;
    filter:drop-shadow(0 4px 7px rgba(94,255,25,.3));
    pointer-events:none;
    animation:cosvin-menu-offer-point 1.8s ease-in-out infinite;
}

@keyframes cosvin-menu-offer-point{
    0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
    50%{transform:translate3d(-4px,-2px,0) rotate(2deg)}
}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

    .cosvin-menu ul{

        gap:24px;

    }

}

@media(max-width:992px){

    .cosvin-menu{

        overflow-x:auto;

    }

    .cosvin-menu ul{

        width:max-content;

        min-width:100%;

        justify-content:flex-start;

        padding:0 20px;

    }

}

@media(max-width:768px){

    .cosvin-menu a{

        font-size:.90rem;

    }

}

@media(max-width:600px){

    .cosvin-menu{

        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;

    }

    .cosvin-menu::-webkit-scrollbar{display:none}

    .cosvin-menu ul{

        height:40px;
        width:max-content;
        min-width:max-content;
        gap:18px;
        justify-content:flex-start;
        padding:0 14px;
        overflow:visible;

    }

    .cosvin-menu a{

        height:40px;
        font-size:.68rem;
        white-space:nowrap;

    }

    .cosvin-menu li:has(a[href*="/contact"]){display:none}

    .cosvin-menu a[href*="/ofertas/"]{
        margin-right:0;
        padding-left:25px;
    }

    .cosvin-menu a[href*="/ofertas/"]::before{
        right:auto;
        left:0;
        top:4px;
        width:24px;
        height:32px;
        animation-name:cosvin-menu-offer-point-mobile;
    }

}

@keyframes cosvin-menu-offer-point-mobile{
    0%,100%{transform:translate3d(0,0,0) scaleX(-1) rotate(-2deg)}
    50%{transform:translate3d(3px,-2px,0) scaleX(-1) rotate(2deg)}
}

@media(prefers-reduced-motion:reduce){
    .cosvin-menu a[href*="/ofertas/"]::before{animation:none}
}