/*
 * El sitio carga el CSS de Swiper v11 desde CDN, pero todos los carruseles
 * del theme (banner del home, marcas, productos...) usan las clases de una
 * versión vieja de Swiper (.swiper-container en vez de .swiper). Como el
 * CSS nuevo no reconoce esas clases, nunca reciben overflow:hidden ni el
 * acomodo en fila — por eso los slides se apilan uno debajo del otro,
 * todos visibles a la vez, en vez de mostrarse de a uno.
 *
 * Van con !important porque, después de revisar todo lo demás (caché,
 * orden de carga, contenido servido), la única explicación que queda es
 * que algo con más prioridad sigue ganando estas propiedades puntuales.
 * Ojo: Swiper (JS) sí le pone a .swiper-wrapper y a cada .swiper-slide un
 * ancho en línea (style="width: ...px") para calcular el desplazamiento
 * del carrusel — por eso NO forzamos "width" aquí (lo taparíamos y el
 * carrusel dejaría de calcular bien las posiciones).
 */
.swiper-container {
    position: relative !important;
    overflow: hidden !important;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-wrapper {
    position: relative;
    height: 100%;
    z-index: 1;
    display: flex !important;
    flex-wrap: nowrap !important;
    box-sizing: content-box;
}
.swiper-slide {
    flex-shrink: 0 !important;
    height: 100%;
    position: relative;
}

/*
 * Banner principal del home (banner_block.html): la altura del carrusel
 * usaba un min-height fijo en px pensado para escritorio, y con
 * background-size: contain la imagen se encogía en pantallas angostas
 * dejando mucho espacio en blanco alrededor. Aquí calculamos la altura a
 * partir de la proporción real de la imagen (1048x584, la medida que pide
 * el modelo Banner) para que se ajuste sola en cualquier ancho de pantalla.
 */
.banner-hero.banner-1 .box-swiper {
    height: auto;
    min-height: 0;
    aspect-ratio: 1048 / 584;
    overflow: hidden;
}

.banner-hero.banner-1 .box-swiper .swiper-container,
.banner-hero.banner-1 .box-swiper .swiper-wrapper,
.banner-hero.banner-1 .box-swiper .swiper-slide {
    height: 100%;
}