/* Tokens tomados del design system extraído de Figma (nodo 964:147) */
.mer-slider-block {
	--mer-color-deep-teak: #32201e;
	--mer-color-card-bg: rgba(50, 32, 30, 0.06);
	--mer-font-family-label: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mer-space-xs: 10px;
	--mer-space-sm: 20px;
	--mer-card-width: 273px;
	--mer-card-height: 336px;

	position: relative;
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	gap: var(--mer-space-sm);
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.mer-slider-swiper {
	width: 100%;
	overflow: hidden;
	padding-bottom: 4px;
}

.mer-slider-swiper .swiper-slide {
	height: auto;
	width: var(--mer-card-width);
}

/* ---------------------------------------------------------
 * Tarjeta
 * --------------------------------------------------------- */
.mer-slider-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: var(--mer-card-height);
	/* padding: var(--mer-space-sm); */
	padding: 1.25rem 3.5rem 1.25rem 1.25rem;
	background-color: var(--mer-color-card-bg);
	text-decoration: none;
	box-sizing: border-box;
	overflow: hidden;
}

.mer-slider-card-label {
	display: block;
	font-family: var(--mer-font-family-label);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.03;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--mer-color-deep-teak);
	position: relative;
	z-index: 2;
	transition: color 0.3s ease;
}

.mer-slider-card-media {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	flex: 1;
	min-height: 0;
}

.mer-slider-card-front {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.mer-slider-card-front img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(605%) hue-rotate(310deg) brightness(16%) contrast(90%);
}

/* La imagen hover cubre la tarjeta completa (de borde a borde, por
   encima del padding), no solo el área del icono. */
.mer-slider-card-hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	/* align-items: center; */
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.3s ease;
}

.mer-slider-card-hover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Velo oscuro para mantener el texto hover y el título legibles sobre
   cualquier imagen hover fotográfica. */
.mer-slider-card-hover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.mer-slider-card-hover-text {
	position: relative;
	z-index: 1;
	/* padding: 0 var(--mer-space-sm); */
	padding: 1.25rem;
	font-family: var(--mer-font-family-label);
	/* font-size: 13px; */
	font-size: .875rem;
	line-height: 1.4;
	color: #fff;
	/* text-align: center; */
	text-align: left;
}

/* Crossfade: al hacer hover (o foco por teclado) se oculta la imagen
   frontal y aparece la imagen hover (cubriendo toda la tarjeta) con el
   texto centrado. El título conserva su posición pero cambia a blanco
   para seguir siendo legible sobre la imagen hover. */
.mer-slider-card:hover .mer-slider-card-front,
.mer-slider-card:focus-visible .mer-slider-card-front {
	opacity: 0;
}

.mer-slider-card:hover .mer-slider-card-hover,
.mer-slider-card:focus-visible .mer-slider-card-hover {
	opacity: 1;
}

.mer-slider-card:hover .mer-slider-card-label,
.mer-slider-card:focus-visible .mer-slider-card-label {
	color: #fff;
}

/* ---------------------------------------------------------
 * Navegación (flechas) — sin paginación numérica
 * --------------------------------------------------------- */
.mer-slider-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.mer-slider-prev,
.mer-slider-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--mer-color-deep-teak);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.mer-slider-prev.swiper-button-disabled,
.mer-slider-next.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

@media only screen and (max-width: 48em) {
	.mer-slider-swiper .swiper-slide {
		width: auto;
	}
}