/**
 * HT Swiper
 *
 * El contenedor marcado con .ht-swiper puede estar dentro de una ficha con
 * ancho máximo: este bloque se extiende hasta los dos bordes del viewport.
 */
.ht-swiper {
	--ht-swiper-side-padding: clamp(1rem, 5vw, 6rem);
	--ht-swiper-control-color: #283172;
	--ht-swiper-control-active-color: #fcea42;
	position: relative;
	box-sizing: border-box;
	width: 100vw !important;
	max-width: none !important;
	/*
	 * El contenedor vive habitualmente dentro de un Flexbox vertical de
	 * Elementor. Un flex-basis de 100vw se convierte ahí en altura (por
	 * ejemplo, 1.912 px en una pantalla de 1.912 px de ancho).
	 */
	flex-basis: auto !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
	overflow: visible;
}

.ht-swiper.ht-swiper--initialised {
	/*
	 * Un contenedor de Elementor es Flexbox por defecto. Tras crear el
	 * viewport, las flechas y los puntos son hijos del contenedor; si este
	 * siguiera siendo una fila, Elementor encogería el viewport y las slides.
	 */
	display: block !important;
	/* El alto final debe venir de las tarjetas y de la paginación. */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

.ht-swiper > .ht-swiper__viewport {
	box-sizing: border-box;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden;
	padding-inline: var(--ht-swiper-side-padding);
}

.ht-swiper__viewport .swiper-wrapper {
	align-items: stretch;
	/* Auto sizing includes margins; use gap to avoid counting spacing twice. */
	gap: var(--ht-swiper-gap, 24px) !important;
}

.ht-swiper__viewport .swiper-wrapper > .swiper-slide {
	box-sizing: border-box;
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	height: auto;
	min-width: 0 !important;
	/* Swiper alone controls the distance between cards, including Elementor cards. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ht-swiper:not(.ht-swiper--slides-auto) .ht-swiper__viewport .swiper-wrapper > .swiper-slide {
	width: var(--ht-swiper-slide-width, auto) !important;
	max-width: none !important;
}

.ht-swiper--cards-shadow .ht-swiper__viewport .swiper-slide {
	box-shadow: var(--ht-swiper-card-shadow, none) !important;
}

.ht-swiper--cards-shadow-active > .ht-swiper__viewport {
	padding-bottom: var(--ht-swiper-card-shadow-space, 0px);
}

.ht-swiper__pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	margin-top: var(--ht-swiper-pagination-spacing, 1.25rem);
}

.ht-swiper__pagination .swiper-pagination-bullet {
	display: block;
	width: 0.5625rem;
	height: 0.5625rem;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 999rem;
	background: var(--ht-swiper-control-color);
	opacity: 1;
	box-shadow: none;
	cursor: pointer;
	transition: width 180ms ease, background-color 180ms ease;
}

.ht-swiper__pagination .swiper-pagination-bullet-active {
	width: 2.125rem;
	background: var(--ht-swiper-control-active-color);
}

.ht-swiper--pagination-white .ht-swiper__pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
	background: #ffffff;
}

.ht-swiper--pagination-active-white .ht-swiper__pagination .swiper-pagination-bullet-active {
	background: #ffffff;
}

.ht-swiper__previous,
.ht-swiper__next {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: var(--ht-swiper-control-color);
	box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
	cursor: pointer;
	transform: translateY(-50%);
}

.ht-swiper__previous {
	left: max(0.5rem, calc(var(--ht-swiper-side-padding) - 3.25rem));
}

.ht-swiper__next {
	right: max(0.5rem, calc(var(--ht-swiper-side-padding) - 3.25rem));
}

.ht-swiper__previous::before,
.ht-swiper__next::before {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
}

.ht-swiper__previous::before {
	content: '‹';
}

.ht-swiper__next::before {
	content: '›';
}

.ht-swiper__previous.swiper-button-disabled,
.ht-swiper__next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Diseño 1: chevrón fino, grande y sin círculo. */
.ht-swiper--arrow-design-1 .ht-swiper__previous,
.ht-swiper--arrow-design-1 .ht-swiper__next {
	width: 4rem;
	height: 5rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ht-swiper-arrow-design-1-color, #ffffff);
	box-shadow: none;
}

.ht-swiper--arrow-design-1 .ht-swiper__previous::before,
.ht-swiper--arrow-design-1 .ht-swiper__next::before {
	width: 1.125rem;
	height: 1.125rem;
	border: solid currentColor;
	border-width: 0 0.125rem 0.125rem 0;
	content: '';
	font-size: 0;
}

.ht-swiper--arrow-design-1 .ht-swiper__previous::before {
	transform: rotate(135deg);
}

.ht-swiper--arrow-design-1 .ht-swiper__next::before {
	transform: rotate(-45deg);
}

/* Efecto discreto: solo aparece la flecha del lado bajo el cursor. */
@media (hover: hover) and (pointer: fine) {
	.ht-swiper--arrows-discreet .ht-swiper__previous,
	.ht-swiper--arrows-discreet .ht-swiper__next {
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease, background-color 180ms ease;
	}

	.ht-swiper--arrows-discreet.ht-swiper--show-previous .ht-swiper__previous,
	.ht-swiper--arrows-discreet.ht-swiper--show-next .ht-swiper__next,
	.ht-swiper--arrows-discreet .ht-swiper__previous:focus-visible,
	.ht-swiper--arrows-discreet .ht-swiper__next:focus-visible {
		opacity: 1;
		pointer-events: auto;
	}

	.ht-swiper--arrows-discreet.ht-swiper--show-previous .ht-swiper__previous.swiper-button-disabled,
	.ht-swiper--arrows-discreet.ht-swiper--show-next .ht-swiper__next.swiper-button-disabled {
		opacity: 0.35;
		pointer-events: none;
	}
}

.ht-swiper :is(button, a, input, select, textarea):focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: 0.1875rem;
}

@media (max-width: 47.9375rem) {
	.ht-swiper {
		--ht-swiper-side-padding: 1rem;
	}

	.ht-swiper__previous,
	.ht-swiper__next {
		display: none;
	}
}