.dcm-image-slider {
	position: relative;
	width: 100%;
}

.dcm-image-slider .dcm-photo-slider {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La altura se aplica al .slick-slide (el div que Slick inserta alrededor de
   cada <li>) y al propio <li>: si solo se pone en el <li>, el wrapper de Slick
   no tiene altura de referencia y el height:100% de su CSS no resuelve. */
.dcm-image-slider .dcm-photo-slider li,
.dcm-image-slider .slick-slide,
.dcm-image-slider .slick-slide > div {
	height: var(--dcm-slider-height, 600px);
}

/* Separación visual entre slides (Slick no añade gap por defecto). */
.dcm-image-slider .slick-slide {
	margin: 0 var(--dcm-slide-gap, 10px);
}

.dcm-image-slider .slick-list {
	margin: 0 calc(var(--dcm-slide-gap, 10px) * -1);
}

/* object-fit cover centrado: horizontales y verticales llenan el slide
   sin deformarse, recortando lo que sobre por los bordes. */
.dcm-image-slider .dcm-photo-slider li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 4px;
}

/* Slides no activos: opacidad reducida, igual que en producción. */
.dcm-image-slider .slick-slide {
	opacity: 0.5;
	transition: opacity 0.4s ease;
}

.dcm-image-slider .slick-current {
	opacity: 1;
}

/* Flechas.
   OJO: el CSS personalizado de Divi de este sitio define reglas globales
   (.slick-arrow{margin-top:-60px;width:21px;height:21px}, .slick-prev{left:-16px},
   .slick-next{right:-16px}) pensadas para el slider antiguo .photo-slider.
   Nuestro modulo las hereda, asi que hay que anularlas explicitamente:
   el margin-top:-60px es lo que descentra las flechas verticalmente. */
/* !important necesario: las reglas del customizer del sitio son globales
   (.slick-arrow, .slick-prev, .slick-next sin prefijo) y ganan por orden de
   carga, sobre todo el margin-top:-60px que descentra verticalmente. */
.dcm-image-slider .slick-prev,
.dcm-image-slider .slick-next {
	position: absolute !important;
	z-index: 99;
	top: 50% !important;
	bottom: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: 40px;
	height: 40px;
	transform: translateY(-50%) !important;
}

/* Posicion horizontal: offset fijo desde el borde del slider.
   Configurable desde el modulo con "Posicion flechas". */
.dcm-image-slider .slick-prev {
	left: var(--dcm-arrow-offset, 20px) !important;
	right: auto !important;
	margin-left: 0 !important;
}

.dcm-image-slider .slick-next {
	right: var(--dcm-arrow-offset, 20px) !important;
	left: auto !important;
	margin-right: 0 !important;
}

.dcm-image-slider .slick-prev:before,
.dcm-image-slider .slick-next:before {
	font-size: 32px;
	opacity: 1;
}

/* Breakpoints alineados con los del JS (1025 / 768) para que el
   centerPadding del slider y la posicion de las flechas cambien a la vez. */
@media (max-width: 1024px) {
	.dcm-image-slider .slick-prev {
		left: 20px !important;
	}

	.dcm-image-slider .slick-next {
		right: 20px !important;
	}
}

@media (max-width: 767px) {
	.dcm-image-slider .slick-prev {
		left: 10px !important;
	}

	.dcm-image-slider .slick-next {
		right: 10px !important;
	}
}

/* Opcion "Ocultar flechas en movil" del modulo (solo movil, no tablet). */
@media (max-width: 767px) {
	.dcm-image-slider.dcm-hide-arrows-mobile .slick-prev,
	.dcm-image-slider.dcm-hide-arrows-mobile .slick-next {
		display: none !important;
	}
}

/* Paginacion.
   El slick.css que incluimos es la version minima: NO trae estilos para
   .slick-dots (eso vive en slick-theme.css). Por eso hay que definir los
   puntos aqui por completo, o no se ven. */
.dcm-image-slider .slick-dots {
	display: block;
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1;
}

.dcm-image-slider .slick-dots li {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}

.dcm-image-slider .slick-dots li button {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-color: var( --dcm-dot-color, rgba( 255, 255, 255, 0.5 ) );
	box-shadow: 0 0 3px rgba( 0, 0, 0, 0.3 );
	transition: background-color 0.3s ease;
}

.dcm-image-slider .slick-dots li button:before {
	content: none;
}

.dcm-image-slider .slick-dots li.slick-active button {
	background-color: var( --dcm-dot-active-color, #2dd4bf );
}