/*
 * Slider de cabecera: réplica de Revolution Slider "home2-slider".
 *
 * Revolution elige la rejilla según el ancho del slider y escala todo (alto, textos, posiciones) por
 * --s = ancho / ancho de rejilla, con un máximo de 1:
 *   >= 1024px  escritorio 1425x700
 *   778-1023   portátil   1024x768
 *   480-777    tablet      778x960
 *   < 480      móvil       480x720
 * Las medidas de cada nivel están en unidades de la rejilla (las de Revolution) y se multiplican por --s.
 * Posiciones tomadas de la diapositiva 1 (alineación izquierda) y de la 3 (centro).
 */

.hsl-slider {
	container: hsl-slider / inline-size;
	position: relative;
	width: 100%;
	background: #262626;
	overflow: hidden;
}

/* Móvil (< 480px). Alineación centrada en todos los casos. */
.hsl-slider .swiper {
	--s: min(1px, 100cqw / 480);
	--gw: 480;
	--h: 720;
	--centrado: 1;
	--x0: 0;
	--tx: -3;
	--dx: -6;
	--bx: -17;
	--tt: 143;
	--tf: 50;
	--tlh: 50;
	--tls: -3;
	--df: 25;
	--dls: -2;
	--dg: 23.5;
	--bg: 36.5;
	--bg-solo: 97;
	--bf: 17;
	--blh: 22;
	--bpv: 3;
	--bph: 10;
	--bls: 0;
}

/* Centrado: Revolution calculaba mal el alto del texto de varias líneas y lo dejaba colgando desde arriba. */
.hsl-slider .hsl-slide--centro {
	--tx: -6;
	--bx: -17;
	--tt: 142.8;
	--tf: 28;
	--tlh: 30;
	--tls: -1;
	--bg-solo: 87.2;
}

/* Tablet (480-777px). */
@container hsl-slider (min-width: 480px) {
	.hsl-slider .swiper {
		--s: min(1px, 100cqw / 778);
		--gw: 778;
		--h: 960;
		--centrado: 0;
		--x0: 105;
		--tx: 0;
		--dx: 5;
		--bx: 9;
		--tt: 249.5;
		--tf: 65;
		--tlh: 65;
		--tls: -3;
		--df: 31;
		--dg: 21;
		--bg: 12.5;
		--bg-solo: 70.5;
		--bf: 14;
		--blh: 14;
		--bpv: 5;
		--bph: 17;
	}

	.hsl-slider .hsl-slide--centro {
		--tx: 12;
		--bx: -12;
		--tt: 98.4;
		--tf: 30;
		--tlh: 28;
		--tls: -1;
		--bf: 15;
		--bg-solo: 120.6;
	}
}

/* Portátil (778-1023px). Revolution solapaba aquí el botón con la descripción: se mantiene la separación de escritorio. */
@container hsl-slider (min-width: 778px) {
	.hsl-slider .swiper {
		--s: min(1px, 100cqw / 1024);
		--gw: 1024;
		--h: 768;
		--x0: 212;
		--dx: 3;
		--bx: 27;
		--tt: 220.5;
		--dg: 4;
		--bg: 27.5;
		--bg-solo: 68.5;
		--bf: 10;
		--blh: 12;
		--bpv: 7;
		--bph: 22;
	}

	.hsl-slider .hsl-slide--centro {
		--tx: 0;
		--bx: -16;
		--tt: 278;
		--tf: 40;
		--tlh: 37;
		--tls: -2;
		--bf: 15;
		--bg-solo: 10;
	}
}

/* Escritorio (>= 1024px). */
@container hsl-slider (min-width: 1024px) {
	.hsl-slider .swiper {
		--s: min(1px, 100cqw / 1425);
		--gw: 1425;
		--h: 700;
		--bx: 5;
		--tt: 186.5;
		--bf: 14;
		--blh: 18;
		--bpv: 10;
		--bph: 30;
		--bls: 1;
	}

	.hsl-slider .hsl-slide--centro {
		--bx: -1;
		--tt: 243.5;
		--bf: 14;
		--bg-solo: 32.5;
	}
}

.hsl-slider .swiper,
.hsl-slider .hsl-slide {
	height: calc(var(--h) * var(--s));
}

.hsl-slider .hsl-slide {
	position: relative;
	overflow: hidden;
}

.hsl-slider .hsl-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.hsl-slider .hsl-slide__inner {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* El ancla horizontal es la x del título dentro de la rejilla (centrada en el slider); en modo centrado, el centro. */
.hsl-slider .hsl-slide__content {
	position: absolute;
	top: calc(var(--tt) * var(--s));
	left: 0;
	right: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: calc((50% - var(--gw) * var(--s) / 2 + var(--x0) * var(--s)) * (1 - var(--centrado)));
	font-family: 'Lato', sans-serif;
	color: #000;
	text-align: left;
}

.hsl-slider .hsl-slide--centro .hsl-slide__content {
	--centrado: 1;
	align-items: center;
	text-align: center;
}

@container hsl-slider (max-width: 479.98px) {
	.hsl-slider .hsl-slide__content {
		align-items: center;
		text-align: center;
	}
}

.hsl-slider .hsl-slide__title,
.hsl-slider .hsl-slide__desc,
.hsl-slider .hsl-slide__btn {
	position: relative;
	white-space: nowrap;
}

.hsl-slider .hsl-slide__title {
	left: calc(var(--tx) * var(--s));
	margin: 0;
	font-size: calc(var(--tf) * var(--s));
	font-weight: 300;
	line-height: calc(var(--tlh) * var(--s));
	letter-spacing: calc(var(--tls) * var(--s));
}

/* Revolution dejaba la negrita sin el espaciado negativo del título. */
.hsl-slider .hsl-slide__title strong {
	font-weight: 700;
	letter-spacing: 0;
}

.hsl-slider .hsl-slide__desc {
	left: calc(var(--dx) * var(--s));
	margin: calc(var(--dg) * var(--s)) 0 0;
	font-size: calc(var(--df) * var(--s));
	font-weight: 400;
	line-height: calc(37 * var(--s));
	letter-spacing: calc(var(--dls, -2) * var(--s));
}

.hsl-slider a.hsl-slide__btn,
.hsl-slider a.hsl-slide__btn:visited {
	left: calc(var(--bx) * var(--s));
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: calc(var(--bg) * var(--s));
	padding: calc(var(--bpv) * var(--s)) calc(var(--bph) * var(--s));
	border: 0;
	border-radius: 30px;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: calc(var(--bf) * var(--s));
	font-weight: 400;
	line-height: calc(var(--blh) * var(--s));
	letter-spacing: calc(var(--bls) * var(--s));
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

/* Sin descripción, el botón queda donde estaría con ella (o a la distancia propia de la alineación centrada). */
.hsl-slider .hsl-slide__title + a.hsl-slide__btn {
	margin-top: calc(var(--bg-solo) * var(--s));
}

.hsl-slider a.hsl-slide__btn:hover,
.hsl-slider a.hsl-slide__btn:focus-visible {
	background-color: #fff;
	color: #000;
}

.hsl-slider .hsl-slide__btn svg {
	width: 0.85em;
	height: 0.85em;
}

/* Flechas: cuadrado 40x40 a 20px del borde (Revolution no las escala). */
.hsl-slider .hsl-slider__arrow {
	all: unset;
	position: absolute;
	top: 50%;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.hsl-slider .hsl-slider__arrow:hover,
.hsl-slider .hsl-slider__arrow:focus-visible {
	background: #000;
}

.hsl-slider .hsl-slider__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.hsl-slider .hsl-slider__arrow--prev {
	left: 20px;
}

.hsl-slider .hsl-slider__arrow--prev svg {
	transform: rotate(180deg);
}

.hsl-slider .hsl-slider__arrow--next {
	right: 20px;
}

.hsl-slider--single .hsl-slider__arrow {
	display: none;
}

/* Textos: fundido a los 0,5 s (300 ms) y salida al final de los 7 s. Botón: entra con la diapositiva y sale a los 6,7 s. */
.hsl-slider .hsl-slide__title,
.hsl-slider .hsl-slide__desc,
.hsl-slider .hsl-slide__btn {
	opacity: 0;
}

.hsl-slider .swiper-slide-active .hsl-slide__title,
.hsl-slider .swiper-slide-active .hsl-slide__desc {
	animation: hsl-texto 7s ease-in-out both;
}

.hsl-slider .swiper-slide-active .hsl-slide__btn {
	animation: hsl-boton 7s ease-in-out both;
}

@keyframes hsl-texto {
	0%, 7.143% { opacity: 0; }
	11.429%, 95.714% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes hsl-boton {
	0% { opacity: 0; }
	4.286%, 95.714% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hsl-slider .swiper-slide-active .hsl-slide__title,
	.hsl-slider .swiper-slide-active .hsl-slide__desc,
	.hsl-slider .swiper-slide-active .hsl-slide__btn {
		animation: none;
		opacity: 1;
	}
}