/*
| COMPLEMENTOS
|
| Regras que antes iam num <style> solto dentro do HTML (index.php e
| header.php). Ficam aqui para nao sujar o codigo-fonte da pagina.
|
| Este arquivo NAO e gerado pelo sass: e escrito a mao e nao e tocado quando
| o style.min.css e recompilado. Editar direto aqui.
*/


/* ---------------------------------------------------------------------------
| HEADER
| Atrasa levemente a entrada do header para que o banner ja esteja visivel
| antes da logo aparecer (evita a logo branca surgir sobre o fundo ainda claro,
| deixando so as pontas verdes visiveis por um instante). fill-mode backwards
| mantem o header escondido durante o delay, sem flicker. Vale para todas as
| paginas.
--------------------------------------------------------------------------- */

header.animation_top.animated{
	animation-delay: .4s;
	animation-fill-mode: backwards;
}


/* ---------------------------------------------------------------------------
| BOTAO FLUTUANTE E BOX DO WHATSAPP
|
| Os valores abaixo NAO foram convertidos de "em" no olho: foram lidos com
| getComputedStyle direto no site da Vokkan, em 1440px e em 375px, e escritos
| aqui em px.
|
| O motivo de nao copiar os "em" da Vokkan: la o body e 50% ( 10px no desktop,
| 8px no mobile ) e aqui e 56% no desktop e 50% no mobile. O mesmo "1.3em"
| daria tamanhos diferentes nos dois sites. Em px o resultado e identico.
|
| Medido na Vokkan:
|   desktop 1440px  ->  box 300x397, fonte 13px
|   mobile   375px  ->  box 300x409, fonte 14.4px
|   botao flutuante 54x54, icone 22.4px / line-height 55px
--------------------------------------------------------------------------- */

.bt-whatsbox{
	width: 54px;
	height: 54px;
}

/*
| O icone da Vokkan mede 22.4px num circulo de 54px ( 41% ). Aqui o glifo
| branco e maior: 28px ( ~52% ), mantendo o circulo no mesmo tamanho.
|
| ESTE E O UNICO NUMERO A MEXER se quiser mais ou menos branco: acima de ~38px
| o glifo comeca a encostar na borda do circulo.
*/
.bt-whatsbox i{
	font-size: 28px;
	line-height: 54px;
}

/* O botao virou <button> para ser alcancavel pelo teclado. Zera o visual
   nativo para ficar identico a <div> que era antes. */
button.bt-whatsbox{
	border: none;
	padding: 0;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}


.whatsbox{
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 999;
	color: #DDD;
	background: rgba(80, 87, 89, 0.95);
	width: 300px;
	border-radius: 7px;
	display: none;
	overflow: hidden;
	letter-spacing: 0;
	font-size: 13px;
	box-shadow: 0 0 30px 15px rgba(0, 0, 0, 0.2);
}

.whatsbox .head{
	background: #00c65e;
	padding: 9px 20px 14px;
	font-weight: 400;
	color: #fff;
}

.whatsbox .head i{
	font-size: 24px;
	margin-right: 5px;
	transform: translateY(4px);
}

/*
| X de fechar — valores medidos na Vokkan.
|
| Dois detalhes que eu tinha errado: faltava o "top: 9px", entao ele ficava na
| posicao estatica do texto; e eu havia anulado o transform, mas la o X herda
| de proposito o translateY(4px) do ".head i", que e o que o alinha ao titulo.
|
| Com isto o centro do X cai a 24px do topo, contra 25px do centro do
| cabecalho — praticamente centrado, igual la.
*/
.whatsbox .head .bt-close-whatsbox{
	position: absolute;
	top: 9px;
	right: 16px;
	font-size: 22px;
	line-height: 22px;
	margin-right: 0;
	cursor: pointer;
	transform: translateY(4px);
}

.whatsbox .pd20{
	padding: 20px;
}

.whatsbox input,
.whatsbox select{
	width: 100%;
	margin-top: 10px;
	padding: 13px 18px 12px;
	font-size: 1em;
	border: 1px solid #bebebe;
	border-radius: 30px;
	background: #FFF;
	color: #4c5659;
}

/*
| Na Vokkan a margem de 10px fica no <select>, e o wrapper .select fica com
| zero. Eu tinha invertido os dois, o que somava 20px e abria aquele vao em
| volta do "Selecione o Setor".
|
| O padding-right de 36px e o espaco da setinha do wrapper.
*/
.whatsbox .select{
	width: 100%;
	margin-top: 0;
}

.whatsbox .select select{
	margin-top: 10px;
	padding: 11px 36px 9px 18px;
	color: #333;
	height: auto;
}

.whatsbox .select:after{
	top: 60% !important;
}

/*
| Botao vazado, como o da Vokkan. O .btn do Vivapark traz min-width:280px e
| padding:24px 40px 22px, que estouram a caixa; por isso o min-width volta a
| zero. A margem de 15px tambem e a de la ( medida ), maior de proposito que
| os 10px entre os campos.
*/
.whatsbox .btn{
	margin: 15px 0 0;
	width: 100%;
	min-width: 0;
	font-size: 14.4px;
	background: none;
	border: 1px solid #00c65e;
	border-radius: 30px;
	padding: 14px 25px 11px;
	color: #00c65e;
	overflow: hidden;
}

.whatsbox .btn span{
	color: #00c65e;
	transition: color .2s linear;
}

/* O .btn do Vivapark preenche no hover com um :after cinza escuro subindo.
   Aqui o hover e o da Vokkan: fundo verde e texto branco. */
.whatsbox .btn:after{
	display: none;
}

.whatsbox .btn:hover{
	background: #00c65e;
	color: #fff;
}

.whatsbox .btn:hover span{
	color: #fff;
}

.whatsbox .btn.is-loading{
	opacity: .6;
	pointer-events: none;
}


/*
| Mobile: na Vokkan a caixa continua com 300px e so a fonte sobe para 14.4px.
| O max-width e a unica coisa que ela nao tem — protege telas de 320px, onde
| 300px + margem estouraria.
*/
@media only screen and (max-width: 767px){
	.whatsbox{
		font-size: 14.4px;
		width: 300px;
		max-width: calc(100% - 30px);
		right: 15px;
		bottom: 20px;
	}
}


/* ---------------------------------------------------------------------------
| FORMULARIO "FALE COM A GENTE"  ( home e pagina de empreendimento )
|
| A secao tem fundo verde e texto branco. Os tres ajustes abaixo vieram de
| medicao no site em producao, nao de chute.
--------------------------------------------------------------------------- */

/*
| 1. Campos um pouco mais altos.
| O input global e "padding:16px 20px", que dava 53px de altura. Com 22px em
| cima e embaixo vai para ~65px, sem mexer na largura.
*/
.section-fale-gente input.input,
.section-fale-gente textarea{
	padding: 22px 20px;
}

/*
| 2. Hover do link da politica de privacidade.
| O global "a:hover{color:#46b760}" pinta o link de verde — e o fundo da secao
| e justamente esse verde, entao o texto sumia ao passar o mouse. Usa o cinza
| escuro da marca, o mesmo do botao "Tenho Interesse" logo abaixo.
*/
.section-fale-gente form a:hover{
	color: #4c5659;
}

/*
| 3. Nome do empreendimento em branco.
| O "Seu interesse em <strong>Nome</strong>" saia em cinza escuro porque o
| Bulma define "strong{color:#363636}". Aqui o strong volta a herdar a cor do
| texto em volta, que e branca.
*/
.section-fale-gente strong{
	color: inherit;
}


/* ---------------------------------------------------------------------------
| GRADE DO INSTAGRAM
| Proporcao 4:5, a mesma do post do Instagram. Vale para a home e para a pagina
| de empreendimento, que usam a mesma .section-instagram.
|
| Isto e uma garantia de layout: com o arquivo ja gerado em 4:5 pelo q-admin o
| "cover" nao corta nada. Serve para a grade nao ficar irregular enquanto ainda
| houver imagens antigas quadradas no ar.
--------------------------------------------------------------------------- */

.section-instagram figure picture,
.section-instagram figure picture img{
	display: block;
	width: 100%;
}

.section-instagram figure picture img{
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}


/* ---------------------------------------------------------------------------
| GALERIA DA HOME
--------------------------------------------------------------------------- */

/* No mobile as miniaturas comecam alinhadas a esquerda da imagem (respeitando
   o padding esquerdo) e seguem ate a direita sem respeitar a borda direita,
   bleed para fora da tela. */
@media only screen and (max-width: 768px){
	.section-gallery-home .gallery-thumbs-mobile{
		width: auto;
		margin-left: 0;
		margin-right: -40px;
	}
}

/* Desktop/tablet: a faixa de thumbnails e mais larga que o wrap (bleed a
   direita), entao um spacer em % nao bate com a grade da imagem grande. Em vez
   do spacer, deslocamos a faixa com uma margem em % (relativa ao wrap = mesma
   grade da imagem) menos o padding de coluna (7px), alinhando a 1a thumb a
   imagem grande. */
@media only screen and (min-width: 769px){
	.section-gallery-home .columns.thumbs{
		margin-left: calc(8.3333% - 7px);
	}
}

/* No mobile o quadro da galeria fica um pouco mais alto que o recorte
   horizontal original. O picture/a tambem precisa ocupar 100% do quadro, senao
   a imagem volta para a altura natural e cria o vao branco entre foto e
   miniaturas. */
@media only screen and (max-width: 576px){
	.section-gallery-home .mask-img{
		height: auto;
		aspect-ratio: 1520 / 1040;
	}
	.section-gallery-home .mask-img picture,
	.section-gallery-home .mask-img a{
		display: block;
		width: 100%;
		height: 100%;
	}
	.section-gallery-home .mask-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 62% 58%;
	}
	.section-gallery-home .mask-img.is-vertical img{
		object-position: center 70%;
	}
}

/* Fotos em pe (.is-vertical): usam o arquivo original inteiro (lg-) e o quadro
   (mesma altura dos slides horizontais) corta o excedente. Sem a margem a foto
   fica ancorada no topo e so aparece ceu; a margem negativa sobe a imagem para
   a faixa visivel ficar do meio pra baixo, onde costuma estar o assunto (maos,
   copos, pratos). Ajuste fino: mais negativo = foto mais pra cima. Em telas
   menores valem as regras que ja existiam (cover com altura fixa). */
@media only screen and (min-width: 1025px){
	.section-gallery-home .mask-img.is-vertical{
		aspect-ratio: 1520 / 850;
	}
	.section-gallery-home .mask-img.is-vertical img{
		width: 100%;
		margin-top: -55%;
	}
}