/* ==========================================================================
   CPS Slider — front-end (sin dependencias, scroll-snap nativo)
   ========================================================================== */

.cps-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Pista con scroll horizontal + snap. El navegador hace el trabajo, no el JS. */
.cps-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* Firefox */
	-ms-overflow-style: none;         /* IE/Edge antiguo */
}
.cps-track::-webkit-scrollbar {
	display: none;                    /* Chrome/Safari */
}

.cps-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.cps-slide-link {
	display: block;
	line-height: 0;
}

/* aspect-ratio reserva el espacio ANTES de cargar la imagen -> CLS = 0.
   El ratio llega por variable desde el shortcode (def. 2560/734). */
.cps-slide-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--cps-ratio, 2560 / 734);
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Flechas
   -------------------------------------------------------------------------- */
.cps-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index: 2;
	padding: 0;
	transition: background 0.2s ease;
}
.cps-arrow:hover,
.cps-arrow:focus-visible {
	background: #fff;
	outline: none;
}
.cps-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2px solid #111;
	border-right: 2px solid #111;
}
.cps-prev { left: 14px; }
.cps-next { right: 14px; }
.cps-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.cps-next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* --------------------------------------------------------------------------
   Puntos (dots)
   -------------------------------------------------------------------------- */
.cps-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}
.cps-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.cps-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* En móvil, flechas algo más pequeñas y pegadas al borde. */
@media (max-width: 767px) {
	.cps-arrow { width: 36px; height: 36px; }
	.cps-prev { left: 8px; }
	.cps-next { right: 8px; }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.cps-track { scroll-behavior: auto; }
}