/*
 * Moving Premium Sliders — estilos del slider principal.
 * v1.1.0 — ajustes: tarjetas +20%, sombra inferior, overlay más claro, altura +modesta.
 */

.mps-slider {
	--mps-accent: #f5c842;
	--mps-height: 560px;
	--mps-radius: 18px;
	--mps-overlay: .6;
	position: relative;
	width: 100%;
	height: var(--mps-height);
	overflow: hidden;
	border-radius: var(--mps-radius);
	background: #0a0a0b;
	color: #fff;
	font-family: Lato, Inter, Arial, sans-serif;
	isolation: isolate;
}

.mps-slider * {
	box-sizing: border-box;
}

.mps-bg,
.mps-bg-next {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: opacity .72s ease, transform 6s ease;
}

.mps-bg {
	z-index: -3;
	transform: scale(1.025);
}

.mps-bg-next {
	z-index: -2;
	opacity: 0;
	transform: scale(1.04);
}

.mps-bg-next.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* Overlay oscuro sobre la imagen: más claro que la versión anterior (antes .82/.71/.13/.32). */
.mps-slider:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(104deg, rgba(3, 5, 8, var(--mps-overlay)) 0%, rgba(3, 5, 8, .5) 40%, rgba(3, 5, 8, .08) 78%, rgba(3, 5, 8, .2) 100%);
	pointer-events: none;
}

.mps-content {
	position: absolute;
	left: clamp(28px, 4vw, 66px);
	top: 50%;
	z-index: 3;
	width: min(39%, 520px);
	transform: translateY(-54%);
	transition: opacity .3s ease, transform .3s ease;
}

.mps-content.is-leaving {
	opacity: 0;
	transform: translateY(-48%);
}

.mps-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px !important;
	color: rgba(255, 255, 255, .66) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .24em;
}

.mps-kicker span {
	width: 24px;
	height: 1px;
	background: var(--mps-accent);
}

.mps-title {
	margin: 0 0 16px !important;
	color: #fff !important;
	font-size: clamp(34px, 4vw, 61px) !important;
	font-weight: 900 !important;
	letter-spacing: -.045em !important;
	line-height: .94 !important;
	text-transform: uppercase;
}

.mps-description {
	max-width: 480px;
	margin: 0 0 28px !important;
	color: rgba(255, 255, 255, .76) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

.mps-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-decoration: none !important;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.mps-button:hover {
	transform: translateY(-2px);
}

.mps-button--primary {
	background: var(--mps-accent);
	color: #111 !important;
}

.mps-button--ghost {
	border-color: rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .07);
	color: #fff !important;
	backdrop-filter: blur(8px);
}

.mps-button[hidden] {
	display: none;
}

.mps-cards {
	position: absolute;
	right: clamp(28px, 4vw, 64px);
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(56%, 860px);
	transform: translateY(-50%);
	overflow: hidden;
	padding: 10px;
}

/* Tarjeta base: +20% sobre el original, y +15% adicional sobre esa versión (158×269 → 182×309). */
.mps-card {
	position: relative;
	width: 182px;
	height: 309px;
	flex: 0 0 182px;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 15px;
	background: #171719;
	cursor: pointer;
	opacity: .76;
	box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .55), 0 4px 10px -6px rgba(0, 0, 0, .35);
	transition: flex-basis .45s ease, width .45s ease, height .45s ease, opacity .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.mps-card:hover {
	opacity: 1;
	transform: translateY(-4px);
	box-shadow: 0 20px 32px -16px rgba(0, 0, 0, .6), 0 6px 12px -6px rgba(0, 0, 0, .4);
}

/* Tarjeta activa: +20% sobre el original, y +15% adicional sobre esa versión (206×329 → 237×378). */
.mps-card.is-active {
	width: 237px;
	height: 378px;
	flex-basis: 237px;
	border-color: var(--mps-accent);
	opacity: 1;
	box-shadow: 0 22px 36px -16px rgba(0, 0, 0, .62), 0 8px 14px -6px rgba(0, 0, 0, .42);
}

.mps-card:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 68%);
}

.mps-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.mps-card:hover img,
.mps-card.is-active img {
	transform: scale(1.045);
}

.mps-card__num,
.mps-card__title {
	position: absolute;
	z-index: 1;
	color: #fff;
	text-align: left;
}

.mps-card__num {
	top: 10px;
	right: 11px;
	color: rgba(255, 255, 255, .7);
	font-size: 10px;
	font-weight: 800;
}

.mps-card__title {
	right: 12px;
	bottom: 13px;
	left: 12px;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.25;
	text-transform: uppercase;
}

.mps-controls {
	position: absolute;
	bottom: 25px;
	left: clamp(28px, 4vw, 66px);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 11px;
}

.mps-arrow {
	display: grid;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 21px;
	line-height: 1;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.mps-arrow:hover {
	background: rgba(255, 255, 255, .2);
	transform: scale(1.06);
}

.mps-progress {
	width: 70px;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, .18);
}

.mps-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--mps-accent);
	transform-origin: left;
}

.mps-counter {
	position: absolute;
	right: 30px;
	bottom: 24px;
	z-index: 4;
	display: flex;
	align-items: baseline;
	gap: 6px;
	color: rgba(255, 255, 255, .48);
	font-size: 12px;
}

.mps-counter strong {
	color: #fff;
	font-size: 21px;
}

.mps-watermark {
	position: absolute;
	right: -10px;
	bottom: -28px;
	z-index: 0;
	color: rgba(255, 255, 255, .055);
	font-size: 150px;
	font-weight: 900;
	line-height: 1;
	pointer-events: none;
}

.mps-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.mps-notice {
	padding: 15px;
	border-left: 4px solid #f5c842;
	background: #fff;
}

.mps-slider--no-cards .mps-content {
	width: min(70%, 720px);
}

@keyframes mpsProgress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Tablet: +14% original, y +15% adicional sobre esa versión (114×210 → 131×241 / 146×256 → 168×294). */
@media (max-width: 980px) {
	.mps-content {
		width: 44%;
	}

	.mps-cards {
		right: 20px;
		width: 58%;
		gap: 16px;
	}

	.mps-card {
		width: 131px;
		flex-basis: 131px;
		height: 241px;
	}

	.mps-card.is-active {
		width: 168px;
		flex-basis: 168px;
		height: 294px;
	}
}

/* Móvil: overlay algo más marcado por legibilidad (imagen a ancho completo) y tarjetas ~13% original,
   +15% adicional sobre esa versión (106×160 → 122×184 / 124×184 → 143×212), con gap ajustado para el carrusel horizontal. */
@media (max-width: 767px) {
	.mps-slider {
		height: auto;
		min-height: 730px;
		border-radius: min(var(--mps-radius), 16px);
	}

	/* En móvil el recorte de "cover" puede perder parte de la imagen. Cada diapositiva
	   define su propio punto de enfoque desde el admin (--mps-bg-pos-mobile, puesto por
	   slider.js); si no se definió ninguno, cae de nuevo en el centro, igual que en escritorio. */
	.mps-bg,
	.mps-bg-next {
		background-position: var(--mps-bg-pos-mobile, center);
	}

	.mps-slider:after {
		background: linear-gradient(to bottom, rgba(3, 5, 8, .7) 0%, rgba(3, 5, 8, .5) 52%, rgba(3, 5, 8, .6) 100%);
	}

	.mps-content,
	.mps-slider--no-cards .mps-content {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		padding: 54px 22px 24px;
		transform: none;
	}

	.mps-content.is-leaving {
		transform: translateY(8px);
	}

	.mps-title {
		font-size: clamp(30px, 10vw, 46px) !important;
	}

	.mps-description {
		font-size: 14px !important;
	}

	.mps-cards {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		gap: 12px;
		padding: 8px 20px 86px;
		transform: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mps-cards::-webkit-scrollbar {
		display: none;
	}

	.mps-card {
		width: 122px;
		height: 184px;
		flex-basis: 122px;
	}

	.mps-card.is-active {
		width: 143px;
		height: 212px;
		flex-basis: 143px;
	}

	.mps-controls {
		bottom: 24px;
		left: 22px;
	}

	.mps-counter {
		right: 22px;
	}

	.mps-watermark {
		font-size: 90px;
	}

	.mps-progress {
		width: 45px;
	}
}