/* ============================================
   SECTION HERO V1
   Widget: webc-section-hero-v1
   Globales: usa tokens --webc__* del theme
   ============================================ */

.section-hero-v1 {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--webc__color-white);
	background-color: var(--webc__color-primary);
	min-height: 400px;
}

.section-hero-v1__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--webc__color-black);
	opacity: 0.3;
	z-index: 1;
	pointer-events: none;
}

.section-hero-v1__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--webc__container-max-width);
	margin: 0 auto;
	padding: var(--webc__section-padding-y);
	text-align: center;
}

.section-hero-v1__breadcrumbs {
	font-family: var(--webc__font-text);
	font-size: var(--webc__font-size-sm);
	margin-bottom: var(--webc__spacing-md);
}

.section-hero-v1__breadcrumbs a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.section-hero-v1__breadcrumbs a:hover {
	opacity: 1;
	text-decoration: underline;
}

.section-hero-v1__title {
	font-family: var(--webc__font-display);
	font-size: var(--webc__font-size-hero);
	font-weight: var(--webc__font-weight-bold);
	line-height: var(--webc__line-height-hero);
	margin: 0;
	color: inherit;
}

@media (max-width: 1024px) {
	.section-hero-v1 {
		min-height: 300px;
	}

	.section-hero-v1__title {
		font-size: var(--webc__font-size-3xl);
		line-height: var(--webc__line-height-tight);
	}
}

@media (max-width: 767px) {
	.section-hero-v1 {
		min-height: 250px;
	}

	.section-hero-v1__container {
		padding: var(--webc__section-padding-y);
	}

	.section-hero-v1__title {
		font-size: var(--webc__font-size-2xl);
	}
}