/* ==========================================================================
   Tours and the City — portada
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: #1a1813;
	min-height: clamp(30rem, 88svh, 47.5rem);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(58, 20, 6, .34) 0%, rgba(58, 20, 6, .06) 30%, rgba(58, 20, 6, .1) 52%, rgba(58, 20, 6, .68) 100%);
}

.hero__body {
	position: relative;
	width: 100%;
	/* El mismo techo que en las fichas: el titular nunca toca la cabecera. */
	padding-top: calc(var(--header-h) + 1.5rem);
	padding-bottom: clamp(3rem, 7vw, 4.5rem);
}

/* En móvil el vídeo es 16:9: un héroe a casi toda la pantalla solo enseña una
   tira vertical del encuadre. Más bajo se ve más vídeo y el contenido sube. */
@media (max-width: 48rem) {
	.hero { min-height: clamp(20rem, 62svh, 33rem); }
	.hero__body { padding-block: 2rem; }
}

/* El titular usa line-height < 1, así que sus mayúsculas sobresalen de la caja:
   el antetítulo necesita holgura extra para no quedar pisado. */
.hero__eyebrow {
	color: #fff;
	font-weight: 500;
	letter-spacing: .3em;
	margin-bottom: clamp(1.25rem, 3.4vw, 2.75rem);
	text-shadow: 0 1px 3px rgba(46, 16, 4, .55), 0 2px 18px rgba(46, 16, 4, .45);
}

.hero__title { color: var(--cream); text-shadow: 0 2px 30px rgba(46, 16, 4, .35); }

/* La palabra clave del titular va en itálica con un trazo naranja debajo, como
   en la web anterior (Elementor «underline»). El trazo se dibuja al llegar. */
.hero__title em { position: relative; display: inline-block; font-style: italic; color: inherit; }
.hero__hl {
	position: absolute;
	left: -.04em;
	right: -.04em;
	bottom: -.2em;
	height: .36em;
	width: auto;
	overflow: visible;
	pointer-events: none;
	fill: none;
	stroke: var(--orange);
	stroke-width: 14;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hero__hl path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: hero-hl-draw 1.1s cubic-bezier(.4, 0, .2, 1) .5s forwards;
}
@keyframes hero-hl-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.hero__hl path { animation: none; stroke-dashoffset: 0; }
}

/* Subtítulo: qué hacemos, dónde y qué nos diferencia, en los primeros segundos. */
.hero__lead {
	color: var(--cream);
	font-size: var(--fs-lead-sm);
	line-height: 1.4;
	max-width: 34ch;
	margin-top: clamp(1rem, 2.4vw, 1.75rem);
	text-shadow: 0 1px 3px rgba(46, 16, 4, .55), 0 2px 18px rgba(46, 16, 4, .45);
}


/* Sello Tripadvisor Travelers’ Choice Best of the Best 2026, bajo el titular. */
.hero__award { margin-top: clamp(1.25rem, 3vw, 2rem); }
.hero__award img { display: block; width: clamp(11.5rem, 20vw, 15rem); height: auto; filter: drop-shadow(0 2px 10px rgba(46, 16, 4, .5)); }

/* Titular a una línea solo cuando hay sitio de sobra. */
@media (min-width: 75rem) {
	.hero__title { white-space: nowrap; }
}

.home-intro {
	padding-block: var(--section-y) var(--section-y-sm);
	text-align: center;
}
.home-intro p { max-width: 26ch; margin-inline: auto; }
@media (min-width: 48rem) { .home-intro p { max-width: 24ch; } }
@media (min-width: 64rem) { .home-intro p { max-width: 40ch; } }
.home-intro strong { font-weight: 600; }
.home-intro em { font-style: italic; }

/* Bloque naranja: separa el índice de ciudades de la intro y mete el color de
   la marca en la primera pantalla y media. Sin aire extra arriba y abajo: la
   banda mide exactamente lo que miden las filas. */
.home-cities { background: var(--orange); padding-block: 0; }
/* En móvil las filas son tarjetas y el bloque necesita aire arriba y abajo.
   (home.css carga después de components.css: la regla tiene que vivir aquí.) */
@media (max-width: 40rem) { .home-cities { padding-block: clamp(3rem, 9vw, 3.75rem); } }

/* Rejilla de experiencias destacadas en portada. */
.home-picks { padding-block: var(--section-y-sm); }