/* ============================================================
   Tratamientos Destacados — tratamientos-destacados.css
   ============================================================ */

.tr-destacados {
	--tr-black: #262522;
	--tr-gray: #655f5d;
	--tr-gold: #c8a280;
	--tr-border: #99928f;
	--tr-bg-soft: #f9f5f1;
	--tr-white: #fafafa;
	--tr-radius: 999px;
	--tr-radius-card: 8px;
	font-family: inherit;
	color: var(--tr-black);
}

/* ── Nav ─────────────────────────────────────────────────── */

.tr-destacados__subcats {
	margin-bottom: 2rem;
}

/* Desktop: nav centrado sin scroll */
.tr-destacados__nav {
	display: block;
	min-width: unset;
	width: fit-content;
	margin: auto;
}

/* Mobile: scroll horizontal en el wrapper, igual que tr-archive__subcats */
@media (max-width: 768px) {
	.tr-destacados__subcats {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #f2ece8 transparent;
		cursor: grab;
		padding-bottom: 6px;
	}

	.tr-destacados__subcats.is-dragging {
		cursor: grabbing;
		user-select: none;
	}

	.tr-destacados__subcats::-webkit-scrollbar {
		height: 4px;
	}

	.tr-destacados__subcats::-webkit-scrollbar-track {
		background: transparent;
	}

	.tr-destacados__subcats::-webkit-scrollbar-thumb {
		background: #f2ece8;
		border-radius: 999px;
	}

	.tr-destacados__nav {
		display: inline-block;
		min-width: 100%;
		width: auto;
		margin: 0;
	}
}

/* Buttons dentro de tr-destacados son <button>, no <a> */
.tr-destacados .tr-archive__subcat-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* ── Swiper wrap ─────────────────────────────────────────── */

.tr-destacados__swiper-wrap {
	width: 100%;
}

/* Alturas iguales entre slides */
.tr-destacados-swiper .swiper-wrapper {
	align-items: stretch;
}

.tr-destacados-swiper .swiper-slide {
	height: auto;
}

.tr-destacados-swiper .tr-archive__card {
	height: 100%;
}

/* Estado de carga */
.tr-destacados-swiper--loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* ── Paginación ──────────────────────────────────────────── */

.tr-destacados__pagination {
	position: static;
	margin-top: 1.5rem;
	text-align: center;
}

.tr-destacados__pagination .swiper-pagination-bullet {
	background: var(--tr-border);
	opacity: 1;
}

.tr-destacados__pagination .swiper-pagination-bullet-active {
	background: var(--tr-black);
}

.tr-destacados__pagination .swiper-pagination-bullet {
	background: #f2ece8;
	opacity: 1;
	width: 8px;
	height: 8px;
}

.tr-destacados__pagination .swiper-pagination-bullet-active {
	background: #c8a280;
}

/* Ocultar paginación en desktop (3 slides visibles, no hace falta) */
@media (min-width: 769px) {
	.tr-destacados__pagination {
		display: none;
	}
}

/* ── Mobile: overflow visible para el efecto 1.5 slides ─── */

@media (max-width: 768px) {
	.tr-destacados__swiper-wrap {
		overflow: hidden;
	}

	.tr-destacados-swiper {
		padding-bottom: 60px !important;
	}
}