/*
 * Nexo Base - Hero / Banner do Header.
 *
 * Este arquivo deve ser carregado condicionalmente apenas quando
 * o Hero estiver ativo na página atual.
 */

.nexo-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	min-height: var(--nexo-hero-min-height, 620px);
	max-height: var(--nexo-hero-max-height, 1080px);
	margin-top: var(--nexo-hero-margin-top, 0);
	margin-bottom: var(--nexo-hero-margin-bottom, 0);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: var(--nexo-hero-padding-top, 160px);
	padding-bottom: var(--nexo-hero-padding-bottom, 120px);
	overflow: hidden;
	background-color: #ffffff;
}

.nexo-hero--background {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--nexo-hero-background-position, center center);
}

.nexo-hero--image {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

.nexo-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--nexo-hero-background-position, center center);
	z-index: 0;
}

.nexo-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(15, 23, 42, var(--nexo-hero-overlay-opacity, 0.35));
	pointer-events: none;
}

.nexo-hero__inner {
	position: relative;
	z-index: 2;
	width: min(var(--nexo-header-container-width, 1362px), calc(100% - 48px));
	min-height: inherit;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.nexo-hero__content {
	width: 100%;
	max-width: 720px;
	color: #25292a;
}

/* ==========================================================================
   Hero content custom HTML
   ========================================================================== */

.nexo-hero-copy {
	width: 100%;
	max-width: 720px;
}

.nexo-hero-copy__eyebrow {
	margin: 0 0 8px;
	color: #ff5a00;
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nexo-hero-copy__title {
	margin: 0 0 20px;
	color: #25292a;
	font-size: clamp(34px, 4.2vw, 58px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.nexo-hero-copy__title-line {
	display: block;
	white-space: nowrap;
}

.nexo-hero-copy__text {
	max-width: 520px;
	margin: 0 0 22px;
	color: #25292a;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.32;
}

.nexo-hero-copy__cta {
	width: 100%;
}

.nexo-hero-copy__cta .nexo-cta-button-wrap {
	width: auto;
	margin: 0;
}

.nexo-hero-copy__cta .nexo-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 54px;
	padding: 0 22px;
	border-radius: 7px;
	font-size: var(--nexo-cta-button-font-size, 15px);
	font-weight: 800;
	letter-spacing: 0;
	white-space: nowrap;
}

.nexo-hero-copy__button {
	--nexo-whatsapp-icon-size: 25px;
	--nexo-whatsapp-icon-gap: 14px;
	--nexo-cta-label-offset-y: 1px;
	--nexo-cta-button-font-size: 15px;
}

/* ==========================================================================
   Hero content safe area below floating header
   ========================================================================== */

.nexo-hero--has-content {
	min-height: max(
		var(--nexo-hero-min-height, 620px),
		calc(
			var(--nexo-header-top-offset, 57px) +
			var(--nexo-header-height, 89px) +
			520px
		)
	);
	padding-bottom: max(var(--nexo-hero-padding-bottom, 120px), 90px);
}

.nexo-hero--has-content .nexo-hero__inner {
	align-items: flex-start;
	padding-top: calc(
		var(--nexo-header-top-offset, 57px) +
		var(--nexo-header-height, 89px) +
		48px
	);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.nexo-hero__content,
	.nexo-hero-copy {
		max-width: 640px;
	}

	.nexo-hero-copy__eyebrow {
		font-size: clamp(32px, 4.2vw, 46px);
	}

	.nexo-hero-copy__text {
		font-size: 15px;
	}
}

@media (max-width: 780px) {
	.nexo-hero {
		min-height: clamp(420px, 90vw, 680px);
		padding-top: 120px;
		padding-bottom: 80px;
	}

	.nexo-hero__inner {
		width: calc(100% - 32px);
		align-items: flex-start;
	}

	.nexo-hero__content,
	.nexo-hero-copy {
		max-width: 100%;
	}

	.nexo-hero-copy__eyebrow {
		margin-bottom: 6px;
		font-size: clamp(26px, 6vw, 34px);
		line-height: 1.05;
		white-space: normal;
	}

	.nexo-hero-copy__title {
		margin-bottom: 16px;
		font-size: clamp(28px, 8vw, 42px);
		line-height: 1.04;
	}

	.nexo-hero-copy__title-line {
		white-space: normal;
	}

	.nexo-hero-copy__text {
		max-width: 100%;
		margin-bottom: 18px;
		font-size: 14px;
		line-height: 1.38;
	}

	.nexo-hero-copy__cta .nexo-cta-button {
		min-height: 50px;
		padding: 0 18px;
		font-size: var(--nexo-cta-button-font-size, 11px);
	}

	.nexo-hero--has-content {
		min-height: max(
			520px,
			calc(
				var(--nexo-header-top-offset, 32px) +
				var(--nexo-header-height, 72px) +
				430px
			)
		);
		padding-bottom: 70px;
	}

	.nexo-hero--has-content .nexo-hero__inner {
		padding-top: calc(
			var(--nexo-header-top-offset, 32px) +
			var(--nexo-header-height, 72px) +
			32px
		);
	}
}

/* ==========================================================================
   Hero mobile image positioning
   ========================================================================== */

@media (max-width: 640px) {
	.nexo-hero--background {
		background-size: auto 70%;
		background-position: right -90px bottom 0;
	}

	.nexo-hero--has-content .nexo-hero__content,
	.nexo-hero-copy {
		max-width: 100%;
	}

	.nexo-hero-copy__eyebrow {
		font-size: clamp(24px, 7vw, 32px);
		line-height: 1.05;
	}

	.nexo-hero-copy__title {
		max-width: 420px;
		font-size: 33px;
		line-height: 1.04;
	}

	.nexo-hero-copy__text {
		max-width: 430px;
		font-size: 13px;
		line-height: 1.35;
	}
}