/*
 * Hero de la portada. Reproduce el slider 'home' de RevSlider 5.4.8.
 *
 * La idea central: RevSlider trabajaba con sliderLayout 'auto' sobre una rejilla
 * de 1920x650 y ESCALABA la rejilla entera cuando la ventana era mas estrecha.
 * Por eso las capas de texto no se movian respecto al fondo. Aqui se hace igual:
 * .dq-hero__rejilla mide siempre 1920x650 y se le aplica scale(--dq-escala), que
 * fija hero.js.
 */

.dq-hero {
	--dq-escala: 1;
	--dq-rejilla-ancho: 1920px;
	--dq-rejilla-alto: 650px;
	/* Power3.easeInOut de GSAP, que es lo que usaba cada capa al entrar. */
	--dq-curva: cubic-bezier(0.77, 0, 0.175, 1);

	position: relative;
	max-width: var(--dq-rejilla-ancho);
	margin: 0 auto;
	overflow: hidden;
}

/* ---------------------------------------------------------------- escritorio */

.dq-hero__escritorio {
	height: calc(var(--dq-rejilla-alto) * var(--dq-escala));
	overflow: hidden;
}

.dq-hero__escritorio .swiper-slide {
	position: relative;
	overflow: hidden;
}

/* data-bgfit="cover" y data-bgposition="center top" del original. */
.dq-hero__fondo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.dq-hero__rejilla {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--dq-rejilla-ancho);
	height: var(--dq-rejilla-alto);
	margin-left: calc(var(--dq-rejilla-ancho) / -2);
	transform: scale(var(--dq-escala));
	transform-origin: top center;
	pointer-events: none;
}

/*
 * Selector largo a proposito: Pofo y Elementor traen reglas propias para h1/h2
 * (tamano, familia, margenes, mayusculas) y hay que ganarles sin !important.
 * El color va en linea porque cambia capa a capa.
 */
.dq-hero .dq-hero__rejilla .dq-hero__capa {
	position: absolute;
	top: var(--dq-capa-y);
	margin: 0;
	padding: 0;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 38px;
	line-height: 22px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;

	opacity: 0;
	transform: translateX(var(--dq-capa-desde));
	/* Salida: 300ms sin retraso, como el frame 999 del original. */
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.dq-hero .dq-hero__rejilla .dq-hero__capa--izquierda {
	left: var(--dq-capa-izquierda);
}

.dq-hero .dq-hero__rejilla .dq-hero__capa--derecha {
	right: var(--dq-capa-derecha);
}

/* Entrada: 800ms con la curva de GSAP y el retraso escalonado de cada capa. */
.dq-hero .swiper-slide-active .dq-hero__capa {
	opacity: 1;
	transform: translateX(0);
	transition:
		opacity 0.8s var(--dq-curva) var(--dq-capa-retraso),
		transform 0.8s var(--dq-curva) var(--dq-capa-retraso);
}

/* ------------------------------------------------ flechas, estilo hesperiden */

.dq-hero__flecha {
	position: absolute;
	top: 50%;
	z-index: 100;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: background 0.2s ease;
}

.dq-hero__flecha:hover,
.dq-hero__flecha:focus-visible {
	background: rgba(0, 0, 0, 1);
}

.dq-hero__flecha--anterior { left: 20px; }
.dq-hero__flecha--siguiente { right: 20px; }

/* El chevron del original venia de la fuente revicons; aqui se dibuja. */
.dq-hero__flecha::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.dq-hero__flecha--anterior::before {
	transform: translate(-40%, -50%) rotate(-135deg);
}

.dq-hero__flecha--siguiente::before {
	transform: translate(-60%, -50%) rotate(45deg);
}

.dq-hero__flecha.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------------------------------------------------------------- movil */

/*
 * El original tenia DOS bloques: el slider de RevSlider oculto con
 * vc_hidden-sm/xs y un slider aparte con tres imagenes que ya llevan el texto
 * dentro. El corte es 992px, no el 1024 con el que Elementor oculta cosas.
 */
.dq-hero__movil {
	display: none;
}

.dq-hero__imagen {
	display: block;
	width: 100%;
	height: auto;
}

.dq-hero__bullets .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.5;
}

.dq-hero__bullets .swiper-pagination-bullet-active {
	opacity: 1;
}

@media (max-width: 991px) {
	.dq-hero__escritorio { display: none; }
	.dq-hero__movil { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.dq-hero .dq-hero__rejilla .dq-hero__capa,
	.dq-hero .swiper-slide-active .dq-hero__capa {
		opacity: 1;
		transform: none;
		transition: none;
	}
}