/* =======================================================================
   HERO BANNER — slides do carrossel principal da Home (imagem, vídeo
   ou HTML customizado, todos no mesmo tamanho de "slide padrão")
   ======================================================================= */

.hero-banner {
	position: relative; width: 100%; height: 850px !important;
	overflow: hidden; background: #0E3B2D;
}
.hero-banner__link { display: block; width: 100%; height: 100%; text-decoration: none; }

/* Tipo imagem (padrão, comportamento de sempre) — background-position
   um pouco acima do centro (35%), pra privilegiar rostos/pessoas, que
   normalmente ficam no terço superior/médio da foto, evitando cortar
   cabeças quando a proporção do banner é mais "larga e baixa" que a
   da foto original */
.hero-banner__bg {
	position: absolute; inset: 0; background-size: cover; background-position: center 35%;
}

/* Tipo vídeo — mesmo enquadramento full-bleed da imagem */
.hero-banner__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
}

/* Tipo HTML — ocupa o slide inteiro, o cliente controla o conteúdo interno */
.hero-banner__html-wrap {
	position: absolute; inset: 0; width: 100%; height: 100%;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.hero-banner__html-wrap > * { max-width: 100%; }

/* Escurecimento geral da foto (suave, não deve "matar" a imagem) */
.hero-banner__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,59,45,0.2) 0%, rgba(14,59,45,0.05) 30%, rgba(14,59,45,0.05) 60%, rgba(14,59,45,0.35) 100%);
	pointer-events: none;
}
.hero-banner__content {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 0 40px;
}
.hero-banner__titulo {
	font-family: 'Ripon Script', 'Ephesis', cursive !important; font-weight: 400;
	font-size: clamp(38px, 5vw, 72px); color: #FCFDFD; margin: 0;
	line-height: 1.22; text-shadow: 0 2px 14px rgba(0,0,0,0.45); text-align: center;
	max-width: 760px;
}
/* Tamanho do texto — editável por banner, no painel admin
   (Banners > Tamanho do texto). "Médio" é o padrão de sempre; os
   outros dois escalam pra cima/baixo mantendo a mesma responsividade
   (clamp) em qualquer tela. */
.hero-banner__titulo--pequeno { font-size: clamp(27px, 3.5vw, 50px) !important; max-width: 620px; }
.hero-banner__titulo--grande { font-size: clamp(48px, 6.5vw, 94px) !important; max-width: 880px; }

/* O vídeo institucional "afunda" de propósito — metade dele fica
   sobreposta à seção seguinte (fundo branco/bege), técnica pedida
   pelo cliente há um tempo. Recalibrado aqui pra bater com a altura
   real atual do vídeo (~725px em desktop, então metade ≈ 360px),
   já que o valor antigo (-350px, herdado do post-145.css) ficou
   desatualizado depois de mudanças na seção seguinte e deixou de
   produzir o efeito 50/50 pretendido. A compensação na seção
   seguinte evita que o conteúdo dela (título "Conheça nossos
   lançamentos") fique escondido atrás da metade do vídeo que
   sobrepõe ali. */
.elementor-element-92be6ca > .elementor-widget-container {
	margin: 50px 0 -400px 0 !important;
}
#sobre-nos + .featured-emp-section {
	margin-top: 400px !important;
}

/* Correção: o container "pai" do carrossel de banners
   (elementor-element-027f2ea) tem `min-height: 1080px` fixo no CSS
   original — calculado pra quando os banners tinham 1081px de altura.
   Como reduzimos a altura real do banner, esse min-height antigo
   sobrava como um vão vazio (branco) entre o banner e a seção
   seguinte. Sincronizo aqui com a altura real do .hero-banner em
   cada breakpoint. */
.elementor-element-027f2ea {
	min-height: 850px !important;
}

@media (max-width: 1024px) {
	.hero-banner { height: 540px !important; }
	.hero-banner__titulo { font-size: clamp(30px, 5vw, 46px); max-width: 600px; }
	.hero-banner__titulo--pequeno { font-size: clamp(21px, 3.5vw, 32px) !important; max-width: 480px; }
	.hero-banner__titulo--grande { font-size: clamp(39px, 6.5vw, 60px) !important; max-width: 680px; }
	.elementor-element-027f2ea { min-height: 540px !important; }
	.elementor-element-92be6ca > .elementor-widget-container { margin: 50px 0 -310px 0 !important; }
	#sobre-nos + .featured-emp-section { margin-top: 310px !important; }
}
@media (max-width: 767px) {
	.hero-banner { height: 380px !important; }
	.hero-banner__titulo { font-size: clamp(22px, 6.5vw, 32px); max-width: 90%; }
	.hero-banner__titulo--pequeno { font-size: clamp(16px, 4.5vw, 22px) !important; }
	.hero-banner__titulo--grande { font-size: clamp(28px, 8.5vw, 42px) !important; }
	.hero-banner__content { padding: 0 20px; }
	.elementor-element-027f2ea { min-height: 380px !important; }
	.elementor-element-92be6ca > .elementor-widget-container { margin: 30px 0 -120px 0 !important; }
	#sobre-nos + .featured-emp-section { margin-top: 120px !important; }
}