/*
| PAGINA DO EMPREENDIMENTO
|
| Regras que antes ficavam em quatro blocos <style> dentro do proprio
| template. Carregado so nesta pagina, via add_style() em
| template/empreendimento.php.
|
| NAO e gerado pelo sass: escrito a mao e nao e tocado quando o
| style.min.css e recompilado. Editar direto aqui.
*/


/* ===== bloco 1 de 4 ===== */

/* Iguala o tamanho do título ao banner da home (3.5vw em vez de 3.65vw). */
.section-empreendimento.banner h1{
	font-size: 3.5vw;
}

/* Dá respiro à direita ao título/subtítulo do banner para que o texto
   não encoste na borda verde (a caixa só tinha padding à esquerda).
   Só no desktop/tablet — o mobile já tem seu próprio espaçamento. */
@media only screen and (min-width: 769px){
	.section-empreendimento.banner .txt-banner h1,
	.section-empreendimento.banner .txt-banner h2{
		padding-right: 4vw;
	}
}

/* Posiciona a logo da construtora no canto inferior direito da caixa
   verde (mesma linha do VK à esquerda) e aplica filtro que deixa a
   marca em branco, já que o fundo é verde sólido. */
.section-empreendimento.banner .logo-construtora-banner{
	position: absolute;
	right: 0;
	bottom: 0;
	left: auto;
	top: auto;
	z-index: 3;
	max-width: 14vw;
	max-height: 7vw;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 0 4vw 1.6vw 0;
	filter: brightness(0) invert(1);
}

@media only screen and (max-width: 1024px){
	.section-empreendimento.banner .logo-construtora-banner{
		max-width: 22vw;
		max-height: 11vw;
		padding: 0 3vw 2vw 0;
	}
}

/* No mobile a logo volta a ficar dentro do fluxo, alinhada à esquerda
   logo abaixo do subtítulo, mantendo o filtro branco. */
@media only screen and (max-width: 768px){

	/* Trava a altura do banner (foto) no tamanho atual para que ela
	   NÃO mude quando a caixa verde crescer. */
	.section-empreendimento.banner{
		padding-top: 0;
		height: 135vw;
		min-height: 135vw;
		overflow: visible;
	}

	/* Caixa verde sai do fluxo (absolute) e ultrapassa um pouco o
	   limite inferior do banner, sem afetar a foto. Os 3 itens se
	   distribuem com mais respiro via space-between. */
	.section-empreendimento.banner .txt-banner{
		position: absolute;
		top: 73vw;
		left: 0;
		width: 62%;
		min-width: 230px;
		height: auto;
		min-height: 78vw;
		margin-top: 0;
		padding: 34px 24px 38px;
		border-radius: 0 46px 0 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.section-empreendimento.banner .txt-banner h1{ margin-bottom: 0; }
	.section-empreendimento.banner .txt-banner h2{ margin-bottom: 0; }

	.section-empreendimento.banner .txt-banner .logo-construtora-banner{
		position: static;
		top: auto;
		right: auto;
		order: 3;
		align-self: flex-start;
		margin-top: 0;
		max-width: 118px;
		max-height: 52px;
		padding: 0;
	}
}

@media only screen and (min-width: 577px) and (max-width: 768px){
	.section-empreendimento.banner{
		height: 110vw;
		min-height: 110vw;
	}

	.section-empreendimento.banner .txt-banner{
		top: 55vw;
		width: 62%;
		min-height: 60vw;
		padding: 34px 26px 98px;
		justify-content: flex-start;
		gap: 34px;
	}

	.section-empreendimento.banner .txt-banner h1{
		font-size: 32px;
		line-height: 1.08;
		margin-bottom: 0;
	}

	.section-empreendimento.banner .txt-banner h2{
		font-size: 15px;
		line-height: 1.25;
		margin-bottom: 0;
	}

	.section-empreendimento.banner .txt-banner .logo-construtora-banner{
		position: absolute;
		right: 24px;
		bottom: 28px;
		left: auto;
		top: auto;
		align-self: auto;
		max-width: 118px;
		max-height: 52px;
		padding: 0;
	}

	.section-empreendimento.banner .txt-banner .vk{
		display: block !important;
		position: absolute;
		left: 24px;
		bottom: 31px;
		width: 92px;
		max-width: 32%;
		height: auto;
	}
}


/* ===== bloco 2 de 4 ===== */

.section-empreendimento.galeria-emp .thumbs{
	display:flex;
	gap:15px;
	overflow:hidden;
}

.section-empreendimento.galeria-emp .thumbs .bt-thumb{
	flex:0 0 130px;
	max-width:130px;
	transition:all .6s cubic-bezier(0.38, 0, 0.02, 1);
}

.section-empreendimento.galeria-emp .thumbs .bt-thumb:hover,
.section-empreendimento.galeria-emp .thumbs .bt-thumb.is-active{
	filter:grayscale(1) brightness(.82);
}

.section-empreendimento.galeria-emp .thumbs .bt-thumb img{
	display:block;
	width:100%;
	aspect-ratio:16 / 10;
	object-fit:cover;
}

.section-empreendimento.galeria-emp .carousel-galeria .item > a{
	position:relative;
	display:block;
}

.section-empreendimento.galeria-emp .carousel-galeria .item .zoom{
	position:absolute;
	bottom:100px;
	left:calc(50% - 15px);
	z-index:2;
	width:30px !important;
	max-width:30px !important;
	height:auto !important;
}

.section-empreendimento.galeria-emp .container-galeria .owl-carousel .box-legenda{
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	padding:0 180px !important;
	box-sizing: border-box !important;
}

.section-empreendimento.galeria-emp .container-galeria .bt-next img,
.section-empreendimento.galeria-emp .container-galeria .bt-prev img{
	filter:grayscale(1) brightness(.72);
}

.section-empreendimento.galeria-emp .carousel-galeria .item picture,
.section-empreendimento.galeria-emp .carousel-galeria .item .box-img{
	display: block;
	width: 100%;
}

@media only screen and (max-width: 1024px){
	.section-empreendimento.galeria-emp .thumbs{
		gap:10px;
	}

	.section-empreendimento.galeria-emp .thumbs .bt-thumb{
		flex-basis:92px;
		max-width:92px;
	}

	.section-empreendimento.galeria-emp .container-galeria .owl-carousel .box-legenda{
		left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding:0 100px !important;
		box-sizing: border-box !important;
		font-size:1.5em !important;
	}

	.section-empreendimento.galeria-emp .carousel-galeria .item .box-img{
		max-height: 340px;
		object-fit: cover;
	}
}

@media only screen and (max-width: 576px){
	.section-empreendimento.galeria-emp .container-galeria .owl-carousel .box-legenda{
		left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding:0 60px !important;
		box-sizing: border-box !important;
		font-size:1.3em !important;
		bottom:30px !important;
	}

	.section-empreendimento.galeria-emp .carousel-galeria .item .box-img{
		max-height: 250px;
		object-fit: cover;
	}
}


/* ===== bloco 3 de 4 ===== */

/* Centraliza as plantas quando há poucas (não preenchem a linha);
   quando há muitas e o carrossel rola, o margin auto fica neutro. */
.section-empreendimento.plantas .carousel-plantas .owl-stage{
	margin: 0 auto;
}


/* ===== bloco 4 de 4 ===== */

/* Sem o mapa, o gradiente 70% cinza / 30% branco cortava o cinza
   acima do endereço/botão. Deixa cinza sólido cobrindo a seção toda. */
.section-empreendimento.localizacao{
	background: #f3f3f3;
	padding-bottom: 70px;
}

.section-empreendimento.locais-proximos{
	margin-top: 140px;
}

/* Centraliza as proximidades quando há poucas (não preenchem a linha);
   quando há muitas e o carrossel rola, o margin auto fica neutro. */
.section-empreendimento.locais-proximos .slide-locais .owl-stage{
	margin: 0 auto;
}

/* No mobile, reduz o espaço enorme acima das seções "Andamento das
   obras" e "Locais próximos" (proximidades). */
@media only screen and (max-width: 768px){
	.section-empreendimento.construtora.mb60{
		margin-bottom: 0;
	}

	.section-empreendimento.andamento-videos{
		padding-top: 20px;
	}

	.section-empreendimento.locais-proximos{
		margin-top: 75px;
	}

	/* Reduz o espaço abaixo de proximidades, antes do "fala com a gente". */
	.section-fale-gente.mt80-mobile{
		margin-top: 40px !important;
	}
}