/* ═══════════════════════════════════════════════════════════════════════
 * tapadera.css — la única sección de esta página: el hero
 *
 * Se carga DESPUÉS de base.css, que es de donde salen las variables
 * (--papel, --tinta, --pad-columna…) y las dos tipografías. Copiado tal
 * cual del hero de la portada (glampingainsa.com/dos, css/inicio.css):
 * mismo aspecto, sin las secciones de detrás.
 * ═══════════════════════════════════════════════════════════════════ */

html, body {
	height: 100%;
}

.hero {
	position: relative;
	background: url('../images/glamping_ainsa.jpg') no-repeat center center/cover;
	background-image: image-set(
		url('../images/glamping_ainsa.webp') type('image/webp'),
		url('../images/glamping_ainsa.jpg') type('image/jpeg'));
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 140px var(--pad-columna) clamp(72px, 10vh, 120px);
	color: var(--sobre-foto);
	text-align: left;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(20, 20, 15, 0.82) 0%,
		rgba(20, 20, 15, 0.62) 30%,
		rgba(20, 20, 15, 0.28) 58%,
		rgba(20, 20, 15, 0.05) 82%);
}

.hero-inner {
	position: relative;
	max-width: 760px;
}

.hero-marca-logo {
	line-height: 0;
	margin-bottom: var(--aire-titulo);
}

.logo-hero {
	width: min(430px, 76vw);
	height: auto;
	filter: brightness(0) invert(1);
}

.hero-marca {
	display: inline-block;
	max-width: 100%;
	text-align: center;
	text-wrap: balance;
	color: var(--sobre-foto);
	opacity: 0.85;
}

.hero-sub {
	max-width: 46ch;
	font-family: var(--tipo-display);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--sobre-foto);
	opacity: 0.92;
	margin-top: var(--aire-titulo);
}

@media (max-width: 768px) {
	.logo-hero {
		width: min(300px, 80vw);
	}
}