/**
 * Blog — Encabezado con arco (copia de faq/hero)
 * Figma ("Desktop diseño 6" > BLOG > "Conoce nuestras sedes", 1440 × 433, auto layout vertical centrado, gap 12):
 *   arco "Verde Colabora" con --radius-arch sobre --color-light ·
 *   "BLOG" Heading/H1.2 50 "Blanco 70 Colabora" uppercase espaciado (caja de 36) ·
 *   h1 "Noticias y tendencias" Heading/H3 40 "Blanco Colabora" (caja de 72) ·
 *   texto Body/L 18 "Blanco 70 Colabora" (caja de 28).
 *   Mayúsculas medidas en la captura al 47% (0.705): y = 129 / 211 / 282, igual que en FAQs.
 */

.blog-hero {
	width: 100%;
	background-color: var(--color-light);
	color: var(--color-light);
}

.blog-hero__header {
	min-height: 433px;
	padding: 131px 24px 100px;
	border-radius: var(--radius-arch);
	background-color: var(--color-olive);
	text-align: center;
}

.blog-hero__eyebrow {
	margin: 0;
	color: var(--color-light-70);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-indent: 0.1em; /* compensa el espacio final del tracking: queda centrado */
	line-height: 36px;
}

.blog-hero .blog-hero__title {
	margin: 34.5px 0 0;
	color: var(--color-light);
	text-wrap: balance;
}

.blog-hero__text {
	max-width: 720px;
	margin: 25.7px auto 0;
	color: var(--color-light-70);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.blog-hero__header {
		min-height: 0;
		padding: 104px 48px 96px;
		border-radius: 220px 220px 0 0;
	}

	.blog-hero__eyebrow {
		font-size: 40px;
	}

	.blog-hero .blog-hero__title {
		margin-top: 24px;
		font-size: 34px;
		line-height: 42px;
	}

	.blog-hero__text {
		margin-top: 16px;
	}
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.blog-hero__header {
		padding: 80px 24px 72px;
		border-radius: 140px 140px 0 0;
	}

	.blog-hero__eyebrow {
		font-size: 30px;
		line-height: 36px;
	}

	.blog-hero .blog-hero__title {
		margin-top: 16px;
		font-size: 30px;
		line-height: 36px;
	}

	.blog-hero__text {
		margin-top: 14px;
		font-size: var(--fs-body-m);
		line-height: 22px;
	}
}