/*
 * Mesato — Hero/banner de página. Namespaced .mst-hero.
 * Full-bleed, gradiente nas cores da Marca (--mst-brand / --mst-brand-2),
 * com ondas SVG animadas. As cores vêm do componente Branding (injetadas
 * em :root); aqui há fallback para a cor base da marca.
 */
.mst-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 18px;
	padding: 64px 20px;
	overflow: hidden;
	text-align: center;
	color: #fff;
	background: linear-gradient( 135deg, var(--mst-brand, #B0703E), var(--mst-brand-2, #8a5630) );
}
.mst-hero--left { text-align: left; }

.mst-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 780px;
	margin: 0 auto;
}
.mst-hero--left .mst-hero-inner { margin-left: 0; }

.mst-hero-title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp( 30px, 5vw, 52px );
	line-height: 1.1;
	letter-spacing: .2px;
}
.mst-hero-sub {
	margin: 0;
	font-size: clamp( 15px, 2.2vw, 19px );
	line-height: 1.5;
	opacity: .92;
}

/* Caixa de pesquisa no hero (comanda o [mesato_menu] da página). */
.mst-hero-search {
	position: relative;
	display: flex;
	align-items: center;
	width: min( 480px, 100% );
	margin: 18px auto 0;
}
.mst-hero--left .mst-hero-search { margin-left: 0; }
.mst-hero-search svg {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--mst-brand-dark, #7a4c28);
	opacity: .7;
	pointer-events: none;
}
.mst-hero-search input {
	width: 100%;
	padding: 13px 16px 13px 44px;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .96 );
	box-shadow: 0 10px 30px -12px rgba( 0, 0, 0, .45 );
	font: inherit;
	font-size: 15px;
	color: #2c2420;
}
.mst-hero-search input::placeholder { color: #8a8079; }
.mst-hero-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba( 255, 255, 255, .55 ), 0 10px 30px -12px rgba( 0, 0, 0, .45 ); }

/* Ondas animadas (marca Mesato) — subtis, decorativas. */
.mst-hero-art {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: .16;
	pointer-events: none;
}
.mst-hero-waves {
	position: absolute;
	left: -5%;
	top: 50%;
	width: 110%;
	height: 60%;
	transform: translateY( -50% );
}
.mst-hero-waves g { will-change: transform; }
.mst-hero-waves .mst-w1 { animation: mst-hero-drift 9s ease-in-out infinite; }
.mst-hero-waves .mst-w2 { animation: mst-hero-drift 12s ease-in-out infinite reverse; }
.mst-hero-waves .mst-w3 { animation: mst-hero-drift 15s ease-in-out infinite; }

@keyframes mst-hero-drift {
	0%, 100% { transform: translateX( 0 ); }
	50%      { transform: translateX( -48px ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mst-hero-waves g { animation: none !important; }
}

@media ( max-width: 640px ) {
	.mst-hero { padding: 48px 18px; margin-bottom: 14px; }
}

/* Quando o hero está presente, esconder o título nativo da página (sem
 * duplicação). :has() é suportado nos navegadores modernos. */
.et-l--post:has( .mst-hero ) .entry-title,
article:has( .mst-hero ) .entry-title,
#left-area:has( .mst-hero ) .entry-title,
#main-content:has( .mst-hero ) .entry-title.main_title {
	display: none !important;
}

/* Remover o espaço entre o header e o banner: o contentor do Divi tem um
 * padding superior (~58px) que separa o hero do header. Quando há hero,
 * encostamos o banner ao header. */
#main-content .container:has( .mst-hero ),
.container:has( .mst-hero ),
.et_builder_inner_content:has( .mst-hero ) {
	padding-top: 0 !important;
}