/* iws-carousel-frontend.css
 * Estilos base del carrusel. Los colores/tamaños específicos de cada
 * carrusel se aplican vía variables CSS inyectadas por iws-carousel.js
 * (--iws-arrow-color, --iws-arrow-size, --iws-bullet-color, --iws-bullet-color-active).
 */

.iws-swiper {
	width: 100%;
	padding-bottom: 40px; /* espacio para los bullets */
	box-sizing: border-box;
}

.iws-swiper .swiper-slide {
	height: auto;
	display: flex;
	width: auto; /* Swiper controla el ancho real vía slidesPerView */
	flex-direction: column;
}

/*
 * RESET DE ANCHO DE COLUMNAS DIVI DENTRO DEL SLIDE
 * ---------------------------------------------------
 * Divi asigna a cada .et_pb_column un ancho en % (ej. 16.66% para una
 * columna "1/6"), calculado en relación a su fila original. Al mover esa
 * columna dentro de un swiper-slide, ese % ya no aplica al contexto
 * correcto y la columna se ve angosta/incompleta. Estas reglas fuerzan
 * que la columna (y cualquier variante de clase de ancho de Divi:
 * et_pb_column_1_2, _1_3, _1_4, _1_5, _1_6, _2_3, _2_5, _3_4, _3_5, _4_5,
 * etc.) ocupe siempre el 100% del ancho disponible dentro de su slide.
 */
.iws-swiper .swiper-slide > .iws-slide-column,
.iws-swiper .swiper-slide [class*="et_pb_column"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	box-sizing: border-box !important;
}

.iws-swiper .swiper-slide .et_pb_column_inner,
.iws-swiper .swiper-slide .et_pb_module {
	width: 100% !important;
	max-width: 100% !important;
}

/* Flechas */
.iws-swiper .iws-arrow {
	color: var(--iws-arrow-color, #333333);
	width: var(--iws-arrow-size, 20px);
	height: var(--iws-arrow-size, 20px);
}

.iws-swiper .iws-arrow::after {
	font-size: var(--iws-arrow-size, 20px);
}

/* Bullets / paginación */
.iws-swiper .iws-pagination .swiper-pagination-bullet {
	background: var(--iws-bullet-color, #cccccc);
	opacity: 1;
}

.iws-swiper .iws-pagination .swiper-pagination-bullet-active {
	background: var(--iws-bullet-color-active, #333333);
}

/* Forma: cuadrado */
.iws-pagination-square .swiper-pagination-bullet {
	border-radius: 2px;
}

/* Forma: barra */
.iws-pagination-bar .swiper-pagination-bullet {
	border-radius: 2px;
	width: 24px;
	height: 4px;
}

/* Forma: círculo (default de Swiper, se deja explícito por claridad) */
.iws-pagination-circle .swiper-pagination-bullet {
	border-radius: 50%;
}