/* ==========================================================
   BASE (360px en adelante)
   Apilado: texto arriba (plano) + imagen abajo (redondeada)
   ========================================================== */
.hero-banner {
	--hero-radius: 14px;
	--hero-eyebrow-color: #6b7280;
	--hero-title-color: var(--Color-Content-General-1, #2c2c2c);

	display: flex;
	flex-direction: column;
	width: 100%;
}

.hero-banner__card {
	order: 1;
	padding: 20px 16px 16px; /* 16px = margen lateral de página a 360px (360 - 328 = 32 / 2) */
}

.hero-banner__media {
	order: 2;
	width: 100%;
	height: 220px;
	border-radius: var(--hero-radius);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	/* Imagen para 360px */
	background-image: url("/documents/20122/32152608/hero_banner_360+%281%29.webp");
}

.hero-banner__eyebrow {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hero-eyebrow-color);
}



/* ===== 360px (hasta 575px): imagen 328 x 150 según Figma ===== */
@media (max-width: 575px) {
	.hero-banner__media {
		box-sizing: border-box;
		width: 328px;
		max-width: 100%;
		height: 150px;
		min-height: 150px;
		flex-shrink: 0;
		border-radius: 16px;
	}
}

/* ==========================================================
   576px en adelante
   ========================================================== */
@media (min-width: 576px) {
	.hero-banner__media {
		height: 260px;

		/* Imagen para 576px */
		background-image: url("/documents/20122/32152608/hero_banner_576+%281%29.webp");
	}

	.hero-banner__card {
		padding: 24px 4px 20px;
	}

	.hero-banner__title {
		font-size: 22px;
	}
}

/* ===== 576px a 767px: layout apilado centrado, título 492 x 80 e imagen 492 x 150 según Figma ===== */
@media (min-width: 576px) and (max-width: 767px) {
	.hero-banner {
		display: flex;
		flex-direction: column;
		width: 492px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-banner__card {
		width: 100%;
		margin: 0;
		padding: 24px 0 20px;
	}

	/* Imagen 492 x 150 */
	.hero-banner__media {
		box-sizing: border-box;
		width: 492px;
		max-width: 100%;
		height: 150px;
		min-height: 150px;
		flex-shrink: 0;
		border-radius: 16px;
	}

	/* Título 492 x 80 */
	.hero-banner__title {
		box-sizing: border-box;
		width: 492px;
		max-width: 100%;
		height: 80px;
		min-height: 80px;
		align-self: stretch;
		margin: 0;
		color: var(--Color-Content-General-1, #2C2C2C);
		font-family: IberPangea, sans-serif;
		font-size: 32px;
		font-style: normal;
		font-weight: 600;
		line-height: 40px; /* 125% */
		font-feature-settings: 'liga' off, 'clig' off;
		overflow: hidden;
	}
}

/* ==========================================================
   768px en adelante — pasa a "hero" con tarjeta flotando sobre la foto
   ========================================================== */
@media (min-width: 768px) {
	.hero-banner {
		position: relative;
		display: block;
		min-height: 260px;
		border-radius: 18px;
		overflow: hidden;
	}

	.hero-banner__media {
		position: absolute;
		inset: 0;
		height: 100%;
		border-radius: 0;

		/* Imagen para 768px */
		background-image: url("/documents/20122/32152608/hero_banner_768+%281%29.webp");
	}

	/* Degradado oscuro para que la tarjeta clara siga siendo legible sobre la foto */
	.hero-banner::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			90deg,
			rgba(15, 23, 32, 0.55) 0%,
			rgba(15, 23, 32, 0.2) 50%,
			rgba(15, 23, 32, 0) 75%
		);
		pointer-events: none;
	}

	.hero-banner__card {
		position: absolute;
		z-index: 2;
		top: 28px;
		left: 28px;
		bottom: 28px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 340px;
		margin: 0;
		padding: 24px 28px;
		background-color: #ffffff;
		border-radius: 14px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	}
}
/* ===== 768px a 991px: layout apilado centrado, título 672 x 80 e imagen 672 x 150 según Figma ===== */
@media (min-width: 768px) and (max-width: 991px) {
	/* Deshace el modo "hero" de 768px y centra el banner en 672px */
	.hero-banner {
		position: static;
		display: flex;
		flex-direction: column;
		width: 672px;
		max-width: 100%;
		min-height: 0;
		margin-left: auto;
		margin-right: auto;
		border-radius: 0;
		overflow: visible;
	}

	.hero-banner::before {
		display: none !important;
	}

	.hero-banner__card {
		position: static;
		z-index: auto;
		display: block;
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 24px 0 20px;
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	/* Imagen 672 x 150 */
	.hero-banner__media {
		position: static;
		inset: auto;
		box-sizing: border-box;
		width: 672px;
		max-width: 100%;
		height: 150px;
		min-height: 150px;
		flex-shrink: 0;
		border-radius: 16px;
	}

	/* Título 672 x 80 */
	.hero-banner__title {
		box-sizing: border-box;
		width: 672px;
		max-width: 100%;
		height: 80px;
		min-height: 80px;
		align-self: stretch;
		margin: 0;
		color: var(--Color-Content-General-1, #2C2C2C);
		font-family: IberPangea, sans-serif;
		font-size: 32px;
		font-style: normal;
		font-weight: 600;
		line-height: 40px; /* 125% */
		font-feature-settings: 'liga' off, 'clig' off;
		overflow: hidden;
	}
}

/* ==========================================================
   992px en adelante
   ========================================================== */
@media (min-width: 992px) {
	.hero-banner {
		min-height: 260px;
		border-radius: 20px;
	}

	.hero-banner__media {
		/* Imagen para 992px */
		background-image: url("/documents/20122/32152608/hero_banner_992+%281%29.webp");
	}

	.hero-banner__card {
		top: 32px;
		left: 32px;
		bottom: 32px;
		max-width: 360px;
		padding: 26px 30px;
	}

	.hero-banner__eyebrow {
		font-size: 13px;
	}

	.hero-banner__title {
		font-size: 21px;
	}
}
/* ===== 992px a 1199px: card 402 x 174 según Figma ===== */
@media (min-width: 992px) and (max-width: 1199px) {
	.hero-banner__card {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 24px;
		width: 402px;
		max-width: 402px;
		height: 174px;
		min-height: 174px;
		top: 50%;
		bottom: auto;
		left: 88px;
		transform: translateY(-50%);
		padding: 32px 24px;
		border-radius: 16px;
		background: var(--Color-Surface-General-1, #FFF);
		box-shadow: none;
	}

	/* Etiqueta: 16px / 22px */
	.hero-banner__eyebrow {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		text-align: center;
		color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.8));
	}

	/* Título: 354 de ancho (402 - 48), 2 líneas de 32px */
	.hero-banner__title {
		width: 354px;
		max-width: 354px;
		height: 64px;
		min-height: 64px;
		margin: 0;
		font-size: 24px;
		line-height: 32px;
		text-align: center;
		overflow: hidden;
	}
}

/* ==========================================================
   1200px en adelante
   ========================================================== */
@media (min-width: 1200px) {
	.hero-banner {
		min-height: 280px;
	}

	.hero-banner__media {
		/* Imagen para 1200px */
		background-image: url("/documents/20122/32152608/hero_banner_1200+%281%29.webp");
	}

	.hero-banner__card {
		top: 34px;
		left: 40px;
		bottom: 34px;
		max-width: 380px;
		padding: 28px 32px;
	}

	.hero-banner__title {
		font-size: 22px;
	}
}
/* ===== 1200px a 1919px: card 401 x 178, título 353 x 80, sin recortes ===== */
@media (min-width: 1200px) and (max-width: 1919px) {
	.hero-banner__card {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 401px;
		max-width: 401px;
		height: auto;
		min-height: 178px;
		top: 50%;
		bottom: auto;
		left: 96px;
		transform: translateY(-50%);
		padding: 32px 24px;
		border-radius: 16px;
		background: var(--Color-Surface-General-1, #FFF);
		box-shadow: none;
	}

	/* Etiqueta: 16px / 22px */
	.hero-banner__eyebrow {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		text-align: center;
		color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.8));
	}

	/* Título 353 x 80 (crece si la fuente de reserva necesita más líneas) */
	.hero-banner__title {
		box-sizing: border-box;
		width: 353px;
		max-width: 353px;
		height: auto;
		min-height: 80px;
		align-self: stretch;
		margin: 0;
		color: var(--Color-Content-General-1, #2C2C2C);
		text-align: center;
		font-family: IberPangea, sans-serif;
		font-size: 32px;
		font-style: normal;
		font-weight: 600;
		line-height: 40px; /* 125% */
		letter-spacing: -0.02em;
		font-feature-settings: 'liga' off, 'clig' off;
		overflow: visible;
	}
}

/* ==========================================================
   1920px en adelante
   ========================================================== */
@media (min-width: 1920px) {
	.hero-banner {
		min-height: 320px;
	}

	.hero-banner__media {
		/* Imagen para 1920px */
		background-image: url("/documents/20122/32152608/hero_banner_1920.webp");
	}

	.hero-banner__card {
		top: 40px;
		left: 60px;
		bottom: 40px;
		max-width: 420px;
		padding: 32px 36px;
	}

	.hero-banner__eyebrow {
		font-size: 14px;
	}

	.hero-banner__title {
		font-size: 24px;
	}
/* ===== 1920px en adelante: card 408 x 178, título 360 x 80, sin recortes ===== */
@media (min-width: 1920px) {
	.hero-banner__card {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 408px;
		max-width: 408px;
		height: auto;
		min-height: 178px;
		top: 50%;
		bottom: auto;
		left: 96px;
		transform: translateY(-50%);
		padding: 32px 24px;
		border-radius: 16px;
		background: var(--Color-Surface-General-1, #FFF);
		box-shadow: none;
	}

	/* Etiqueta: 16px / 22px */
	.hero-banner__eyebrow {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		text-align: center;
		color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.8));
	}

	/* Título 360 x 80 */
	.hero-banner__title {
		box-sizing: border-box;
		width: 360px;
		max-width: 360px;
		height: auto;
		min-height: 80px;
		align-self: stretch;
		margin: 0;
		color: var(--Color-Content-General-1, #2C2C2C);
		text-align: center;
		font-family: IberPangea, sans-serif;
		font-size: 32px;
		font-style: normal;
		font-weight: 600;
		line-height: 40px; /* 125% */
		letter-spacing: -0.02em;
		font-feature-settings: 'liga' off, 'clig' off;
		overflow: visible;
	}
}
}