/* Reglas específicas para el carrusel de marcas (.marcas-swiper) */
.marcas-swiper {
    width: 100%;
    overflow: hidden;
}

.marcas-swiper .swiper-wrapper {
    display: flex;
    gap: 22px;
    align-items: center;
    will-change: transform;
    /* allow programmatic scroll/translate from JS */
}

.marcas-swiper .swiper-slide {
    flex: 0 0 auto;
    width: clamp(120px, 10vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.marcas-swiper .slide-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: transparent;
    border-radius: 8px;
    transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, filter .22s ease;
}

.marcas-swiper img {
    max-width: 100%;
    max-height: 64px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: none;
}

/* Hover / focus animation for marca */
.marcas-swiper .swiper-slide:hover .slide-inner,
.marcas-swiper .swiper-slide:focus-within .slide-inner {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
    filter: drop-shadow(0 6px 10px rgba(2,6,23,0.08));
}

/* Make the effect less intense on very small screens */
@media (max-width: 600px) {
    .marcas-swiper .swiper-slide:hover .slide-inner,
    .marcas-swiper .swiper-slide:focus-within .slide-inner {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 8px 20px rgba(2,6,23,0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marcas-swiper .slide-inner {
        transition: none !important;
    }
    .marcas-swiper .swiper-slide:hover .slide-inner { transform: none !important; box-shadow: none !important; }
}

/* Ocultar scrollbar en navegadores WebKit/Chromium */
.marcas-swiper .swiper-wrapper::-webkit-scrollbar { display: none; }
.marcas-swiper .swiper-wrapper { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 600px) {
    .marcas-swiper .swiper-wrapper { gap: 14px; }
    .marcas-swiper .swiper-slide { width: clamp(100px, 22vw, 150px); }
    .marcas-swiper img { max-height: 44px; }
    .marcas-swiper { padding-inline: 8px; }

    /* Forzar autoscroll en móvil: ocultar barras y desactivar pan táctil
       (el JS controla el desplazamiento automáticamente) */
    .marcas-swiper .swiper-wrapper {
        overflow-x: hidden;
        -webkit-overflow-scrolling: auto;
        touch-action: none;
        padding-inline: 6px;
    }

    .marcas-swiper .swiper-slide {
        /* evitar scroll-snap en autoscroll-only mode */
        scroll-snap-align: none;
    }

    .marcas-swiper .swiper-wrapper { cursor: default; }
}

/* Make wrapper scrollable on small tablets as well */
@media (max-width: 900px) and (min-width: 601px) {
    .marcas-swiper .swiper-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-inline: 8px;
    }
    .marcas-swiper .swiper-slide { scroll-snap-align: start; }
}