/* =========================================================
	 OVERLAY
	 ========================================================= */
.dps-popup-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(15, 15, 15, 0.85);
	backdrop-filter: blur(5px);
	z-index: 99999999;
	display: none;
	justify-content: center;
	align-items: center;
}
/*.dps-popup-overlay {top: 0 !important;left: 0 !important;transition: all 0.3s ease;	}*/

.dps-popup-overlay.is-active {
	display: flex;
}

/* =========================================================
	 POPUP CONTENT
	 ========================================================= */
.dps-popup-content {
	width: 90%;
	max-width: 850px;
	background: #ffffff;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	position: relative;
}
/*.dps-popup-content {transform: scale(0.9);transition: transform 0.3s ease;}*/

/* Animación suave SIN transform */
.dps-popup-overlay.is-active .dps-popup-content {
	animation: dps-popup-in 0.25s ease-out;
}
/*.dps-popup-overlay.is-active .dps-popup-content {transform: scale(1);}*/

@keyframes dps-popup-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* =========================================================
	 CLOSE BUTTON
	 ========================================================= */
.dps-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 35px;
	height: 35px;
	background: #e74c3c;
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	z-index: 10;
}
/*.dps-close {transition: background 0.2s;}*/

.dps-close:hover { background: #c0392b; }

/* =========================================================
	 SLICK BASE (REEMPLAZA slick-theme)
	 ========================================================= */
.dps-popup-content .slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
}

.dps-popup-content .slick-list {
	overflow: hidden;
}

.dps-popup-content .slick-track {
	display: flex;
}

.dps-popup-content .slick-slide {
	min-height: 1px;
}

.dps-popup-content .slick-slide img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================
	 MAIN SLIDER
	 ========================================================= */
.dps-main-slider {
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 8px;
}

.dps-main-slider img {
	height: 500px;
	object-fit: contain;
	background: #f9f9f9;
}
/*.dps-main-slider img {width: 100%;}*/

/* =========================================================
	 ARROWS
	 ========================================================= */
.slick-prev,
.slick-next{
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	padding: 0;
	/*-webkit-transform: translate(0, -50%);*/
	/*-ms-transform: translate(0, -50%);*/
	/*transform: translate(0, -50%);*/
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
}
.slick-prev,
.slick-next {
	z-index: 100;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.8) !important;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	transform: none !important;
	transition: all 0.3s ease;

}
.slick-prev { left: 10px; }
.slick-next { right: 10px; }

.slick-prev:before,
.slick-next:before{ 
	width: 16px;
	height: 16px;
	content: '';
	position: absolute;
	border-right: 3px solid #2ea3f2;
	border-bottom: 3px solid #2ea3f2;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
}
.slick-prev:before{	transform: translate(-50%, -50%) rotate(135deg); }
.slick-next:before{	transform: translate(-50%, -50%) rotate(315deg); }

.slick-prev:hover, .slick-next:hover {
	background: #fff !important;
	transform: scale(1.1);
}
.dps-thumb-slider .slick-prev, 
.dps-thumb-slider .slick-next {
	width: 30px;
	height: 30px;
}
.dps-thumb-slider .slick-prev:before, 
.dps-thumb-slider .slick-next:before {
	font-size: 18px;
}

/* =========================================================
	 MISC
	 ========================================================= */
body.dps-no-scroll {
	overflow: hidden !important;
}

/* =========================================================
	 MOBILE
	 ========================================================= */
@media (max-width: 768px) {
	.dps-popup-content {
		padding: 15px;
		width: 95%;
	}

	.dps-main-slider img {
		height: 300px;
	}

	.dps-thumb-slider img {
		height: 60px;
	}

	.slick-prev { left: 5px; }
	.slick-next { right: 5px; }
}
/* =========================================================
	 THUMB SLIDER - VERSIÓN LIMPIA
	 ========================================================= */

/* 1. CONTENEDOR PRINCIPAL */
.thumb-slider-container {
	position: relative;
	overflow: hidden;
	padding: 15px 0;
	margin: 0 auto;
	width: 100%;
	max-width: 410px; /* (120+10)*3 + margen extra */
	box-sizing: border-box;
}

/* 2. LISTA Y TRACK */
.thumb-slider-container .slick-list {
	width: 390px; /* (120+10)*3 = 390px */
	max-width: 390px;
	min-width: 390px;
	margin: 0 auto;
	overflow: hidden;
	padding: 5px 0 !important;
}

.thumb-slider-container .slick-track {
	display: flex !important;
	align-items: center !important;
	transition: transform 0.3s ease !important;
}

/* 3. SLIDES - DIMENSIONES FIJAS 120x80px (3:2) */
.thumb-slider-container .slick-slide {
	width: 120px !important;
	height: 80px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	flex: 0 0 auto !important;
	margin: 0 5px !important;
	position: relative !important;
	transition: all 0.3s ease !important;
	opacity: 0.7;
	box-sizing: border-box !important;
}

/* Sobrescribir estilos inline de Slick */
.thumb-slider-container .slick-slide[style] {
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	margin: 0 5px !important;
}

/* 4. CONTENEDOR INTERNO E IMÁGENES */
.thumb-slider-container .slick-slide > div {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	border-radius: 4px;
}

.thumb-slider-container .slick-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 4px;
	border: 3px solid transparent;
	transition: all 0.3s ease;
	cursor: pointer;
	display: block !important;
}

/* 5. ESTADOS DE SLIDES */
.thumb-slider-container .slick-slide:hover {
	opacity: 0.9;
}

.thumb-slider-container .slick-slide.slick-current {
	opacity: 1 !important;
	transform: scale(1.05) !important;
	z-index: 10 !important;
}

.thumb-slider-container .slick-slide:hover img {
	border-color: rgba(0, 115, 170, 0.3);
}

.thumb-slider-container .slick-slide.slick-current img {
	border-color: #0073aa !important;
	box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

/* 6. CONFIGURACIÓN CON Y SIN SCROLL */
/* CON SCROLL (más de 3 imágenes) */
.thumb-slider-container.con-scroll .slick-list {
	cursor: grab;
}

.thumb-slider-container.con-scroll .slick-list:active {
	cursor: grabbing;
}

/* Efecto visual gradiente para indicar más imágenes */
.thumb-slider-container.con-scroll::before,
.thumb-slider-container.con-scroll::after {
	content: '';
	position: absolute;
	top: 5px;
	bottom: 5px;
	width: 20px;
	z-index: 2;
	pointer-events: none;
}

.thumb-slider-container.con-scroll::before {
	left: 0;
	background: linear-gradient(to right, 
		rgba(255, 255, 255, 0.9) 0%,
		transparent 100%);
}

.thumb-slider-container.con-scroll::after {
	right: 0;
	background: linear-gradient(to left, 
		rgba(255, 255, 255, 0.9) 0%,
		transparent 100%);
}

/* SIN SCROLL (3 o menos imágenes) */
.thumb-slider-container.sin-scroll .slick-track {
	transform: translate3d(0px, 0px, 0px) !important;
	justify-content: center !important;
	margin: 0 auto !important;
	width: auto !important;
}

.thumb-slider-container.sin-scroll .slick-list {
	overflow: hidden !important;
	cursor: default !important;
}

/* 7. DOTS (PUNTOS DE NAVEGACIÓN) */
.thumb-slider-container .slick-dots {
	display: flex !important;
	justify-content: center;
	list-style: none;
	padding: 15px 0 5px 0;
	margin: 0;
}

.thumb-slider-container .slick-dots li {
	margin: 0 4px;
}

.thumb-slider-container .slick-dots li button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #ddd;
	text-indent: -9999px;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0;
}

.thumb-slider-container .slick-dots li.slick-active button {
	background: #0073aa;
	transform: scale(1.2);
}

/* Ocultar dots cuando no hay scroll */
.thumb-slider-container.sin-scroll .slick-dots {
	display: none !important;
}

/* 8. OCULTAR EN MÓVIL */
.dps-mobile-hidden {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Asegurar que el slider principal ocupe más espacio cuando no hay miniaturas */
.dps-popup-content .et_pb_module:has(.dps-mobile-hidden) {
	flex-grow: 1;
}

/* 9. RESPONSIVE */
@media (max-width: 768px) {
	/* Ocultar miniaturas en móvil */
	.thumb-slider-container {
		display: none;
	}
	
	/* Mostrar dots en el slider principal en móvil */
	.slick-dots {
		display: flex !important;
		justify-content: center;
		list-style: none;
		padding: 15px 0 5px 0;
		margin: 0;
	}
	
	.slick-dots li {
		margin: 0 4px;
	}
	
	.slick-dots li button {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: none;
		background: #ccc;
		text-indent: -9999px;
		cursor: pointer;
		transition: background 0.3s;
	}
	
	.slick-dots li.slick-active button {
		background: #0073aa;
	}
}

/* Para tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.thumb-slider-container {
		padding: 10px 0 !important;
	}
}

/* Para pantallas muy pequeñas (backup) */
@media (max-width: 480px) {
	.thumb-slider-container .slick-slide {
		width: 100px !important;
		height: 67px !important;  /* Mantener relación 3:2 */
		min-width: 100px !important;
		max-width: 100px !important;
		margin: 0 4px !important;
	}
}