/* =========================
   WRAPPER
========================= */

.logo-nav-mobile {
    display: none;
    width: 100%;
    overflow: hidden;
}

/* =========================
   SLICK FIX REAL
========================= */

#logoSlider {
    width: 100%;
}

#logoSlider .slick-list {
    overflow: hidden;
}

#logoSlider .slick-track {
    display: flex !important;
    align-items: center;
}

nav.logo-nav {
    padding: 7px 0px;
    border-bottom: 1px solid #ededed;
}

/* =========================
   SLIDES HORIZONTALES
========================= */

.logo-slide.slick-slide.slick-active {
    width: 100px !important;
}

#logoSlider .logo-slide a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 22px;   /* 🔥 MÁS GAP ENTRE LOGOS */
    box-sizing: border-box;
}

/* IMÁGENES */
#logoSlider img {
    width: auto;
    height: 55px;
    object-fit: contain;
    display: block;
}

/* =========================
   PC
========================= */

.logo-nav-pc {
    display: flex;
    justify-content: center;
    gap: var(--gap-ad-banner);
}

.logo-nav-pc img {
    height: 26px;
}

.logo-nav .logo-item {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.logo-nav .logo-item.is-active {
    opacity: 1;
}

/* =========================
   MOBILE ONLY
========================= */

@media (max-width: 768px) {
    .logo-nav-pc {
        display: none;
    }

    .logo-nav-mobile {
        display: block;
    }
}

@media (max-width: 480px) {
    .logo-nav-mobile #logoSlider img {
        height: 30px;
    }

    
    #logoSlider {
        width: 100%;
    }

    #logoSlider .logo-slide a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0px; /* 🔥 espacio entre logos */
        box-sizing: border-box;
        width: 100px !important;
    }

    #logoSlider img {
        height: 55px;
        object-fit: contain;
        display: block;
    }

    .logo-nav-mobile {
        overflow-x: auto;
        display: flex;
        gap: 24px;
        scroll-snap-type: x mandatory;
        padding: 5px 0px;
    }

    .logo-slide a {
        flex: 0 var(--margin-main-container);
        scroll-snap-align: start;
    }
}