/* ── tratamiento_antes_despues ───────────────────────── */

.tratamiento-antes-despues-swiper {
	overflow: visible;
	margin: 2rem auto;
	position: relative;
}

/* Desktop + Tablet: grid layout */
@media (min-width: 768px) {
	.tratamiento-antes-despues-swiper .swiper-wrapper {
		display: grid !important;
		gap: 2rem !important;
		justify-items: center;
		justify-content: center;
		transform: none !important;
		width: auto !important;
	}

	.tratamiento-antes-despues-swiper[data-count="1"] .swiper-wrapper {
		grid-template-columns: 1fr;
		max-width: 450px;
		margin: 0 auto;
	}

	.tratamiento-antes-despues-swiper[data-count="2"] .swiper-wrapper {
		grid-template-columns: repeat(2, auto);
	}

	.tratamiento-antes-despues-swiper[data-count="3"] .swiper-wrapper {
		grid-template-columns: repeat(3, auto);
		gap: 20px;
	}

	.tratamiento-antes-despues-swiper .swiper-slide {
		width: auto !important;
		height: auto;
	}

	.tratamiento-antes-despues-swiper .swiper-pagination {
		display: none;
	}
}

/* Mobile: Swiper activo */
@media (max-width: 767px) {
	.tratamiento-antes-despues-swiper {
		overflow: hidden;
		padding-bottom: 40px !important;
	}

	.tratamiento-antes-despues-swiper.swiper-initialized .swiper-wrapper {
		display: flex !important;
		gap: 0;
		grid-template-columns: unset;
		max-width: none !important;
		margin: 0;
	}

	.tratamiento-antes-despues-swiper .swiper-pagination {
		display: block;
		bottom: 10px;
	}

	.tratamiento-antes-despues-swiper.swiper-initialized .antes-despues-par {
		width: 100%;
	}

	.tratamiento-antes-despues-swiper.swiper-initialized .foto-contenedor {
		flex: 1 1 50%;
	}

	.tratamiento-antes-despues-swiper.swiper-initialized .foto-contenedor img {
		width: 100% !important;
		height: 210px !important;
	}
}

/* ── Estilos compartidos ─────────────────────────────── */

.antes-despues-par {
	display: flex;
	gap: 3px;
	border-radius: 16px;
	overflow: hidden;
}

.foto-contenedor {
	position: relative;
}

.foto-contenedor img {
	width: 210px;
	height: 290px !important;
	object-fit: cover;
	display: block;
}

.foto-etiqueta {
	position: absolute;
	bottom: 12px;
	left: 12px;
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Paginación */
.tratamiento-antes-despues-swiper .swiper-pagination-bullet {
	background: #d5ae6d;
	opacity: 0.4;
}

.tratamiento-antes-despues-swiper .swiper-pagination-bullet-active {
	opacity: 1;
}