/* ==========================================================================
   Hero de la portada (sección "banner" de Travel Agency)
   ========================================================================== */
:root {
	--hero-h: 88vh;          /* alto del hero */
	--hero-min-h: 520px;     /* alto mínimo en pantallas bajas */
	--hero-title: clamp(32px, 4.2vw, 56px);
	--hero-sub: clamp(16px, 1.5vw, 20px);
	--hero-text-w: 760px;    /* ancho máximo del texto */
}

/* Imagen más alta, recortada sin deformarse */
.home .banner .wp-custom-header img,
.home .banner .wp-custom-header video {
	width: 100%;
	height: var(--hero-h);
	min-height: var(--hero-min-h);
	object-fit: cover;
	display: block;
}

/* Título y subtítulo más contenidos para que la foto respire */
.home .banner .form-holder .text {
	max-width: var(--hero-text-w);
	margin: 0 auto;
	padding-top: var(--mersan-header-h, 90px); /* que no choque con la barra */
}
.home .banner .form-holder .text h2 {
	font-size: var(--hero-title);
	line-height: 1.1;
	margin-bottom: 16px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.home .banner .banner-content {
	font-size: var(--hero-sub);
	line-height: 1.5;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* --- Fundido automático (inc/hero-slider.php + assets/js/hero-slider.js) --- */
:root { --hero-fade: 1.5s; } /* duración del fundido */

.home .banner .mersan-hero-slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.home .banner .mersan-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity var(--hero-fade) ease-in-out;
}
.home .banner .mersan-hero-slide.is-active { opacity: 1; }