/*
Theme Name: Houzez Child - AKASA Recife
Theme URI: https://github.com/Carmass/akasarecife
Description: Tema filho do Houzez com a identidade visual da A K A S A Recife. Todas as customizacoes do projeto ficam aqui, para sobreviverem as atualizacoes do tema pai.
Author: WebsitesRecife
Author URI: https://websitesrecife.com.br
Template: houzez
Version: 1.1.0
Text Domain: houzez-child
*/

/* ============================================================
   Identidade AKASA Recife
   Principal  #FF0A0A   |   Escuro  #A40E0E   |   BG escuro  #0D0D0D

   As cores das Theme Options ja foram trocadas no banco
   (scripts/recolorir.php). Este arquivo cobre apenas o que fica
   chumbado no CSS do tema pai: ver assets/cores-akasa.css,
   gerado por scripts/gerar-css-override.mjs.
   ============================================================ */

:root {
	--akasa-vermelho: #ff0a0a;
	--akasa-vermelho-escuro: #a40e0e;
	--akasa-preto: #0d0d0d;
	--akasa-respiro: 32px;
}

/* ------------------------------------------------------------
   Respiro lateral do conteudo

   O demo do Houzez so cria margem lateral pelo max-width de 1440px
   do .e-con-inner: em qualquer tela menor que isso o conteudo encosta
   na borda da janela. (Comprovado no backup original, antes de
   qualquer alteracao nossa.) Como efeito colateral, o carrossel de
   imoveis — que usa margem negativa de 10px no .slick-list — passava
   a estourar a largura e criava rolagem horizontal na pagina.

   O padding entra no #main-wrap, que envolve apenas o conteudo da
   pagina: cabecalho e rodapio sao templates do Theme Builder e ficam
   fora dele, com o espacamento proprio deles preservado.
   ------------------------------------------------------------ */
/* Grid "box" do corpo inteiro: gutter lateral em TODO documento Elementor
   do conteudo — paginas ([data-elementor-type="wp-page"]) e templates do
   Theme Builder do corpo (imovel, agente...), que o Houzez envolve em
   wrappers .htb-*. O cabecalho fica dentro de <header> (fora destes
   seletores) e o rodape tem regra propria logo abaixo. */
#main-wrap [data-elementor-type="wp-page"] > .e-con > .e-con-inner,
#main-wrap [data-elementor-type="wp-page"] > .e-con.e-con-full,
#main-wrap [class*="htb-"] > [data-elementor-type] > .e-con > .e-con-inner,
#main-wrap [class*="htb-"] > [data-elementor-type] > .e-con.e-con-full,
/* o rodape e um template do Theme Builder e fica FORA do #main-wrap
   (body > footer > .elementor): sem esta linha ele continua encostado
   nas bordas. O cabecalho fica fora deste seletor e mantem o espacamento
   proprio. */
footer .elementor > .e-con > .e-con-inner,
footer .elementor > .e-con.e-con-full {
	padding-left: var(--akasa-respiro);
	padding-right: var(--akasa-respiro);
}

/* paginas de arquivo/listagem (breadcrumb, titulo, grade de imoveis): o
   .container do tema vem com 12px; alinha ao respiro do projeto */
#main-wrap .container {
	padding-left: var(--akasa-respiro);
	padding-right: var(--akasa-respiro);
}

@media (max-width: 767.98px) {
	#main-wrap [data-elementor-type="wp-page"] > .e-con > .e-con-inner,
	#main-wrap [data-elementor-type="wp-page"] > .e-con.e-con-full,
	#main-wrap [class*="htb-"] > [data-elementor-type] > .e-con > .e-con-inner,
	#main-wrap [class*="htb-"] > [data-elementor-type] > .e-con.e-con-full,
	footer .elementor > .e-con > .e-con-inner,
	footer .elementor > .e-con.e-con-full,
	#main-wrap .container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ------------------------------------------------------------
   Rodape
   ------------------------------------------------------------ */

/* Icones de contato (telefone, e-mail, endereco): vinham grandes demais e
   empurravam o texto para baixo. Ficam do tamanho do texto e alinhados a ele. */
footer .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-right: 10px;
}

footer .elementor-icon-list-icon svg,
footer .elementor-icon-list-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

footer .elementor-icon-list-item {
	align-items: center;
	line-height: 1.5;
}

/* Redes sociais do rodape/copyright no vermelho da marca */
footer .elementor-social-icon,
footer .elementor-social-icon:hover {
	background-color: var(--akasa-vermelho);
	color: #fff;
}

footer .elementor-social-icon:hover {
	background-color: var(--akasa-vermelho-escuro);
}

/* ------------------------------------------------------------
   Seletor de idioma (GTranslate) no cabecalho
   ------------------------------------------------------------ */
/* Widget do GTranslate no modo "flags": uma bandeira redonda por idioma,
   lado a lado, sem texto — a atual ganha o anel vermelho da marca. */
.akasa-gtranslate-header .gtranslate_wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.akasa-gtranslate-header .gtranslate_wrapper a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(0, 0, 0, .12);
	background: #fff;
	transition: transform .15s, border-color .15s;
}

.akasa-gtranslate-header .gtranslate_wrapper a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.akasa-gtranslate-header .gtranslate_wrapper a:hover {
	transform: scale(1.12);
	border-color: var(--akasa-vermelho);
}

.akasa-gtranslate-header .gtranslate_wrapper a.gt-current-lang {
	border-color: var(--akasa-vermelho);
}

/* ------------------------------------------------------------
   Cabecalho fixo ao rolar

   O tema tem sticky proprio (Theme Options > main-menu-sticky), mas ele nao
   alcanca o cabecalho montado no Theme Builder. Aqui o header do Elementor
   passa a acompanhar a rolagem, mantendo logo, menu, idioma e botao.
   ------------------------------------------------------------ */
#header-hz-elementor {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
	transition: background-color .35s ease, box-shadow .35s ease;
}

/* no topo da home o cabecalho e transparente por design: so ganha fundo
   depois que a pagina rola (a classe entra por assets/akasa.js) */
body.transparent-yes #header-hz-elementor:not(.akasa-rolou) {
	background-color: transparent;
	box-shadow: none;
}

/* ------------------------------------------------------------
   CTA "Pronto para encontrar o imovel dos seus sonhos?"

   O bloco de texto tinha padding proprio e o botao ficava recuado em
   relacao ao texto. Zera o padding lateral dentro do CTA para os dois
   alinharem pela mesma borda.
   ------------------------------------------------------------ */
.akasa-cta .elementor-widget-container {
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------
   Pagina do imovel
   ------------------------------------------------------------ */

/* abas da galeria (foto/mapa/video) no vermelho da marca */
.property-banner .nav-pills .nav-link.active,
.property-banner .nav-pills .show > .nav-link {
	background-color: var(--akasa-vermelho) !important;
}

/* As colunas das secoes "semelhantes" agora vem do proprio widget
   (layout_columns por secao: principal 2 colunas, sidebar 1 coluna) —
   nada de forcar 100% por CSS, que atingia as duas de uma vez. */
.similar-property-wrap .item-title {
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 6px;
}

.similar-property-wrap .item-price-wrap {
	font-size: 18px;
	line-height: 1.3;
}

.similar-property-wrap .item-address {
	font-size: 14px;
	line-height: 1.4;
}

.similar-property-wrap .item-amenities li {
	font-size: 13px;
}

/* Sidebar "Imoveis semelhantes" (widget 4afea13): cards enxutos — some a
   linha de quartos/banheiros/m2 entre o titulo e o preco (pedido do Cesar). */
.elementor-element-4afea13 .item-amenities {
	display: none;
}

/* Sem isso, o slick ainda projeta 10px para fora durante o arrasto. */
#main-wrap {
	overflow-x: clip;
}

/* ------------------------------------------------------------
   Seletor de idioma (GTranslate) dentro do cabeçalho

   Inserido entre o menu e o botão "Fale conosco" por
   scripts/gtranslate-no-header.php. O widget do plugin vem com
   estilo próprio de bloco; aqui ele é alinhado ao cabeçalho.
   ------------------------------------------------------------ */
.akasa-gtranslate-header {
	display: flex;
	align-items: center;
}

.akasa-gtranslate-header .elementor-widget-container,
.akasa-gtranslate-header .gtranslate_wrapper {
	display: flex;
	align-items: center;
	line-height: 1;
}

@media (max-width: 991.98px) {
	.akasa-gtranslate-header {
		display: none; /* no celular o cabeçalho vira menu lateral; o seletor iria quebrar a linha */
	}
}

/* ============================================================
   Fase 4 — ajustes visuais (medidos no DevTools antes de escrever)
   ============================================================ */

/* ------------------------------------------------------------
   Cabecalho com 6 itens de menu + idioma + botao
   A 1366px o menu estourava a propria coluna e os itens passavam por
   baixo do seletor de idioma ("EM CONSTRUCAO" quebrava em 2 linhas).
   ------------------------------------------------------------ */
#header-hz-elementor .houzez-elementor-menu > li > a {
	white-space: nowrap;
}

/* larguras dos containers do header corrigidas no DADO
   (scripts/header-larguras-fase5.php: logo 18% | menu 52% | botao 18%);
   aqui so a garantia de linha unica e centralizacao do menu */
#header-hz-elementor .houzez-elementor-menu {
	flex-wrap: nowrap;
	justify-content: center;
}

@media (max-width: 1650px) {
	#header-hz-elementor .houzez-elementor-menu > li > a {
		font-size: 13px;
		padding-left: 9px;
		padding-right: 9px;
	}
}

@media (max-width: 1280px) {
	#header-hz-elementor .houzez-elementor-menu > li > a {
		font-size: 12px;
		padding-left: 6px;
		padding-right: 6px;
		letter-spacing: 0;
	}
}

/* o seletor de idioma nao pode empurrar nem cobrir o menu */
.akasa-gtranslate-header {
	flex: 0 0 auto;
}

@media (max-width: 1280px) {
	.akasa-gtranslate-header .gtranslate_wrapper {
		gap: 6px;
	}

	.akasa-gtranslate-header .gtranslate_wrapper a {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}
}

/* ------------------------------------------------------------
   Slideshow de fundo do banner: o Elementor monta o swiper, mas o
   CSS base do swiper nao carrega nesta configuracao — o wrapper fica
   sem display:flex (slides empilham e o translateX joga tudo para
   fora da tela: banner branco) e sem altura. CSS minimo do swiper:
   ------------------------------------------------------------ */
.elementor-background-slideshow {
	overflow: hidden;
}

.elementor-background-slideshow .swiper-wrapper {
	display: flex;
	height: 100%;
	transition-property: transform;
}

.elementor-background-slideshow .swiper-slide {
	flex-shrink: 0;
	height: 100%;
	width: 100%;
	position: relative;
}

.elementor-background-slideshow__slide__image {
	height: 100%;
	width: 100%;
}

/* ------------------------------------------------------------
   Depoimentos: o container do demo tem largura FIXA de 1440px
   (elemento 9b9e9c2) e vazava dos dois lados em telas menores.
   ------------------------------------------------------------ */
.elementor-element-9b9e9c2 {
	max-width: 100%;
}

.elementor-element-9b9e9c2 > .e-con {
	min-width: 0;
	max-width: 100%;
}

/* ------------------------------------------------------------
   Secoes de categoria da home: respiro entre o titulo e os
   botoes Anterior/Proximo do carrossel.
   ------------------------------------------------------------ */
.akasa-secao-lancamento .property-carousel-buttons-wrap,
.akasa-secao-em-construcao .property-carousel-buttons-wrap,
.akasa-secao-construido .property-carousel-buttons-wrap {
	margin-top: 26px;
	margin-bottom: 14px;
}

/* ------------------------------------------------------------
   Cards do carrossel de imoveis com o mesmo tamanho
   (foto com proporcao fixa + card esticado na altura do slide)
   ------------------------------------------------------------ */
/* O slide do slick E o .item-listing-wrap sao o MESMO elemento (o tema poe as
   duas classes no mesmo div). Enquanto ele recebia height:100%, a altura
   deixava de ser "auto" e o align-items:stretch do flex nao valia — por isso os
   cards vinham com alturas diferentes conforme o titulo quebrava linha.
   Aqui o slide fica com height:auto (estica pela linha flex) e o height:100%
   desce um nivel, para o .item-wrap. */
.property-carousel-module .slick-track {
	display: flex !important;
	align-items: stretch !important;
}

.property-carousel-module .slick-slide {
	height: auto !important;
	float: none !important;
}

.property-carousel-module .slick-slide > .item-wrap,
.property-carousel-module .item-listing-wrap > .item-wrap {
	height: 100% !important;
}

.property-carousel-module .listing-image-wrap img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* ------------------------------------------------------------
   Botao "voltar ao topo": vermelho e acima das redes sociais do
   rodape (ficava por cima delas no fim da pagina).
   ------------------------------------------------------------ */
.back-to-top-wrap {
	bottom: 96px;
}

.back-to-top-wrap .btn-back-to-top {
	background-color: var(--akasa-vermelho) !important;
	border-color: var(--akasa-vermelho) !important;
	color: #fff !important;
}

.back-to-top-wrap .btn-back-to-top:hover {
	background-color: var(--akasa-vermelho-escuro) !important;
	border-color: var(--akasa-vermelho-escuro) !important;
}

/* ------------------------------------------------------------
   Azul chumbado no PHP do tema (inc/styling-options.php:1362):
   hover do botao de anuncio no menu mobile. Nao vem de opcao.
   ------------------------------------------------------------ */
.nav-mobile .btn-create-listing:hover,
.nav-mobile .btn-create-listing:active,
.navi-login-register .btn-create-listing:hover,
.navi-login-register .btn-create-listing:active {
	background-color: rgba(255, 10, 10, .8) !important;
}

/* ------------------------------------------------------------
   Rodape: listas de taxonomia (Tipos de imovel / Explore)
   quebravam palavra por falta de largura — a coluna delas
   (eec19b4) dividia o mesmo tanto do logo e da newsletter.
   ------------------------------------------------------------ */
/* colunas de listas dimensionadas pelo CONTEUDO (nada encolhe abaixo do
   proprio texto, entao nada sobrepoe o vizinho); largura da faixa vem do
   dado (22/46/26) */
footer .elementor-element-eec19b4 {
	gap: 30px;
	justify-content: flex-start;
}

footer .elementor-element-eec19b4 > .e-con,
footer .elementor-element-eec19b4 > .elementor-widget-Houzez_Taxonomies_List {
	width: auto;
	flex: 0 0 auto;
}

footer .taxonomy-item-list li {
	line-height: 1.5;
}

footer .taxonomy-item-list h3 {
	white-space: nowrap;
}

footer .taxonomy-item-list a {
	white-space: nowrap;
	font-size: 13px;
}

/* so a lista Institucional fica em linha unica; o endereco do bloco de
   contato PRECISA quebrar linha para a coluna 1 nao inchar */
.elementor-element-a4f0002 .elementor-icon-list-text {
	white-space: nowrap;
}

footer .elementor-element-bac8bef .elementor-icon-list-item {
	align-items: flex-start;
}

/* telefone e e-mail em linha unica; SO o endereco (ultimo item) quebra */
footer .elementor-element-bac8bef .elementor-icon-list-text {
	white-space: nowrap;
}

footer .elementor-element-bac8bef .elementor-icon-list-item:last-child .elementor-icon-list-text {
	white-space: normal;
	line-height: 1.5;
}

/* a lista Explore tem 17 bairros: grade de 2 colunas (o ul vem
   como flex-column do tema, entao columns: nao funciona) */
.elementor-element-61a7a01 .taxonomy-item-list ul {
	display: grid !important;
	grid-template-columns: repeat(2, max-content);
	gap: 4px 26px;
}

.elementor-element-61a7a01 .taxonomy-item-list a {
	white-space: nowrap;
	font-size: 12.5px;
}

/* lista Institucional (inserida por script): sem icone de "check" */
.elementor-element-a4f0002 .elementor-icon-list-icon {
	display: none;
}

/* ------------------------------------------------------------
   CTA final e faixas coladas na borda: respiro ja vem do seletor
   [data-elementor-type="wp-page"] la em cima; aqui so o conteudo
   interno do CTA alinhado (regra .akasa-cta preservada acima).
   ------------------------------------------------------------ */

/* botao "Fale conosco" do cabecalho nunca quebra em duas linhas */
#header-hz-elementor .elementor-button-text {
	white-space: nowrap;
}

@media (max-width: 1200px) {
	#header-hz-elementor .elementor-button {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ------------------------------------------------------------
   Mega menu das categorias (injetado por akasa_mega_menu no
   functions.php): painel com os 4 imoveis mais recentes.
   ------------------------------------------------------------ */
.houzez-elementor-menu > li.akasa-tem-mega {
	position: relative;
}

.houzez-elementor-menu .akasa-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	z-index: 1002;
	width: 660px;
	max-width: calc(100vw - 64px);
	padding: 18px 18px 12px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
	border: 1px solid rgba(0, 0, 0, .06);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s, transform .18s, visibility .18s;
}

.houzez-elementor-menu > li.akasa-tem-mega:hover > .akasa-mega,
.houzez-elementor-menu > li.akasa-tem-mega:focus-within > .akasa-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ponte invisivel para o mouse nao "cair" entre o item e o painel */
.houzez-elementor-menu .akasa-mega::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.akasa-mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.akasa-mega-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px;
	border-radius: 10px;
	transition: background-color .15s;
}

.akasa-mega-card:hover {
	background-color: #f7f2f2;
}

.akasa-mega-foto {
	flex: 0 0 92px;
	width: 92px;
	height: 64px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
}

.akasa-mega-corpo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.akasa-mega-corpo strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--akasa-preto);
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
}

.akasa-mega-corpo > span {
	font-size: 12px;
	line-height: 1.4;
	color: #6b6b6b;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.akasa-mega-vermais {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 8px 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--akasa-vermelho);
	text-transform: none;
	letter-spacing: 0;
}

.akasa-mega-vermais:hover {
	color: var(--akasa-vermelho-escuro);
}

/* menu mobile/offcanvas: painel escondido (a navegacao la e por toque) */
.nav-mobile .akasa-mega,
.offcanvas .akasa-mega,
.mobile-navbar-nav .akasa-mega {
	display: none !important;
}


/* newsletter do rodape: campo de e-mail ocupa a largura da coluna e o botao
   acompanha, sem esmagar o input */
footer .elementor-element-b2e4bdf {
	min-width: 0;
}

footer .elementor-element-b2e4bdf form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

footer .elementor-element-b2e4bdf form input[type="email"],
footer .elementor-element-b2e4bdf form .form-control {
	flex: 1 1 160px;
	min-width: 0;
	width: auto;
}

footer .elementor-element-b2e4bdf form button,
footer .elementor-element-b2e4bdf form .elementor-button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* listas do rodape sem o contador "(n)": mais limpo e as duas colunas do
   Explore param de invadir a newsletter */
footer .taxonomy-item-list .count {
	display: none;
}

/* ------------------------------------------------------------
   A linha principal do rodape (16921d9) e um container GRID do
   Elementor: largura de coluna se define nas TRILHAS do grid,
   nao no width dos filhos (que viravam 22% da propria trilha).
   ------------------------------------------------------------ */
footer .elementor-element-16921d9 {
	grid-template-columns: minmax(220px, 23fr) minmax(0, 51fr) minmax(230px, 26fr);
	gap: 40px;
}

footer .elementor-element-16921d9 > .e-con {
	width: 100%;
}

/* ============================================================
   Fase 7 — footer desktop
   ============================================================ */

/* as trilhas do grid precisam vencer a regra gerada pelo Elementor
   (.elementor-18750 .elementor-element.elementor-element-16921d9) */
footer .elementor-element.elementor-element-16921d9 {
	grid-template-columns: minmax(220px, 23fr) minmax(0, 51fr) minmax(230px, 26fr) !important;
	gap: 40px !important;
}

/* redes sociais com fundo vermelho (a regra antiga perdia para o widget) */
footer .elementor-social-icon,
footer a.elementor-social-icon {
	background-color: var(--akasa-vermelho) !important;
}

footer a.elementor-social-icon:hover {
	background-color: var(--akasa-vermelho-escuro) !important;
}

footer .elementor-social-icon svg {
	fill: #fff;
}

/* coluna 1: logo colada nas informacoes de contato (max 30px) */
footer .elementor-element-bac8bef {
	justify-content: flex-start !important;
	align-content: flex-start;
	gap: 30px !important;
}

footer .elementor-element-bac8bef > .elementor-widget-houzez_site_logo {
	margin-bottom: 0;
}

/* icones de contato maiores no desktop */
@media (min-width: 768px) {
	footer .elementor-element-bac8bef .elementor-icon-list-icon {
		width: 26px;
		height: 26px;
		flex: 0 0 26px;
		margin-right: 12px;
	}

	footer .elementor-element-bac8bef .elementor-icon-list-icon svg,
	footer .elementor-element-bac8bef .elementor-icon-list-icon i {
		width: 24px;
		height: 24px;
		font-size: 24px;
	}

	footer .elementor-element-bac8bef .elementor-icon-list-text {
		font-size: 15px;
	}
}

/* logo do footer menor no mobile */
@media (max-width: 767.98px) {
	footer .elementor-element-b8fa3c0 img {
		max-width: 46% !important;
	}
}


/* ------------------------------------------------------------
   Slider do banner em crossfade suave (efeito fade do swiper;
   o CSS base do fade tambem nao carrega sozinho)
   ------------------------------------------------------------ */
.elementor-background-slideshow.swiper-fade .swiper-slide {
	transition-property: opacity;
	pointer-events: none;
}

.elementor-background-slideshow.swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

.elementor-background-slideshow.swiper-fade .swiper-wrapper {
	transition-property: none;
}


/* ------------------------------------------------------------
   Fase 8 — correcoes mobile
   ------------------------------------------------------------ */

/* o tema poe overflow-x:hidden no body, o que QUEBRA position:sticky
   no iOS Safari; clip corta igual sem matar o sticky */
body {
	overflow-x: clip !important;
}

/* footer no celular: uma coluna empilhada (as trilhas de 3 colunas
   valem so no desktop) */
@media (max-width: 767.98px) {
	footer .elementor-element.elementor-element-16921d9 {
		grid-template-columns: 1fr !important;
		gap: 30px !important;
	}

	footer .elementor-element-eec19b4 {
		flex-direction: column !important;
		gap: 26px !important;
	}

	footer .elementor-element-eec19b4 > .e-con,
	footer .elementor-element-eec19b4 > .elementor-widget-Houzez_Taxonomies_List {
		width: 100%;
	}
}


/* ------------------------------------------------------------
   Fase 9
   ------------------------------------------------------------ */

/* tipografia do menu mobile no preto da marca */
.offcanvas-mobile-menu .nav-link,
.offcanvas-mobile-menu .mobile-navbar-nav a,
.offcanvas-mobile-menu .offcanvas-title {
	color: var(--akasa-preto) !important;
}

/* newsletter: campo em cima, botao Enviar embaixo (era cortado na borda) */
footer .elementor-element-b2e4bdf form {
	flex-direction: column;
	align-items: stretch;
}

footer .elementor-element-b2e4bdf form button,
footer .elementor-element-b2e4bdf form .elementor-button {
	width: 100%;
}

/* newsletter: os filhos lado a lado vivem no fields-wrapper do Elementor
   (colunas 66/33), nao no form — empilha campo e botao de verdade */
footer .elementor-element-b2e4bdf .elementor-form-fields-wrapper {
	flex-direction: column;
	gap: 12px;
}

footer .elementor-element-b2e4bdf .elementor-form-fields-wrapper > .elementor-field-group {
	width: 100% !important;
	max-width: 100%;
	padding: 0;
}

footer .elementor-element-b2e4bdf .elementor-form-fields-wrapper .elementor-button {
	width: 100%;
}

/* ============================================================
   Fase 10 — correcoes investigadas com medicao no navegador
   ============================================================ */

/* ------------------------------------------------------------
   1. CONTEUDO CRITICO NAO ESPERA O JAVASCRIPT
   Medido em CPU/rede de celular: titulo do banner e logo ficavam
   com visibility:hidden por ~21s (classe .elementor-invisible das
   animacoes de entrada) ate o elementor-frontend.js rodar.
   ------------------------------------------------------------ */
#header-hz-elementor .elementor-invisible,
.elementor-element-b1d5bdc .elementor-invisible,
.elementor-element-b1d5bdc .elementor-invisible * {
	visibility: visible !important;
	opacity: 1 !important;
	animation-name: none !important;
}

/* ------------------------------------------------------------
   2. Menu do desktop: preto com halo branco (pedido do Cesar).
   Restrito a >=1025px: no mobile o menu ja e preto e sem sombra.
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
	#header-hz-elementor .houzez-elementor-menu > li > a,
	#header-hz-elementor .navbar-nav > .nav-item > a {
		color: var(--akasa-preto) !important;
		text-shadow: 0 0 4px #ffffff, 0 0 8px #ffffff;
	}

	#header-hz-elementor .houzez-elementor-menu > li > a:hover,
	#header-hz-elementor .houzez-elementor-menu > li.current-menu-item > a {
		color: var(--akasa-vermelho) !important;
	}
}

/* ------------------------------------------------------------
   3. Banner no celular: imagens VERTICAIS (as panoramicas 16:9
   num viewport 9:19 viravam uma faixa central esticada, o que
   parecia foto girada e de baixa qualidade).
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	/* seletor por ATRIBUTO, nao por :nth-child: o swiper duplica os slides
	   (12 no total, 4 originais + 8 clones do loop) e os clones ficavam com
	   a foto panoramica esticada. */
	.elementor-background-slideshow__slide__image[style*="boa-viagem-desk"],
	.elementor-background-slideshow__slide__image[style*="boa-viagem-hd"] {
		background-image: url("../../uploads/2026/08/akasa-banner-boa-viagem-mob.jpg") !important;
	}

	.elementor-background-slideshow__slide__image[style*="porto-de-galinhas-hd"] {
		background-image: url("../../uploads/2026/08/akasa-banner-porto-de-galinhas-mob.jpg") !important;
	}

	.elementor-background-slideshow__slide__image[style*="condominio-hd"] {
		background-image: url("../../uploads/2026/08/akasa-banner-condominio-mob.jpg") !important;
	}

	.elementor-background-slideshow__slide__image[style*="muro-alto-hd"] {
		background-image: url("../../uploads/2026/08/akasa-banner-muro-alto-mob.jpg") !important;
	}

	/* fundo pintado antes de o swiper montar */
	.elementor-element-b1d5bdc {
		background-image: url("../../uploads/2026/08/akasa-banner-boa-viagem-mob.jpg") !important;
	}
}

/* ------------------------------------------------------------
   4. Parallax da secao Lancamentos (so no desktop: background
   fixed nao funciona no iOS e trava a rolagem no Android)
   ------------------------------------------------------------ */
@media (max-width: 1024.98px) {
	.akasa-secao-lancamento {
		background-attachment: scroll !important;
	}
}

/* ------------------------------------------------------------
   5. Pagina Sobre
   ------------------------------------------------------------ */

/* o bloco "500+ Clientes atendidos" e absoluto ancorado na coluna;
   com o texto institucional maior a coluna esticou e ele caiu para
   fora da imagem. Coluna com a altura da propria imagem resolve. */
.elementor-element-1f75f47 {
	align-self: center;
	height: -moz-fit-content;
	height: fit-content;
	position: relative;
}

/* Missao/Visao/Valores: 3 colunas ate 767px (32% + gap estourava
   a linha cedo demais) */
.akasa-secao-mvv .elementor-element-a5f0110 {
	flex-wrap: nowrap;
}

.akasa-secao-mvv .elementor-element-a5f0111,
.akasa-secao-mvv .elementor-element-a5f0112,
.akasa-secao-mvv .elementor-element-a5f0113 {
	width: auto !important;
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767.98px) {
	.akasa-secao-mvv .elementor-element-a5f0110 {
		flex-wrap: wrap;
	}

	.akasa-secao-mvv .elementor-element-a5f0111,
	.akasa-secao-mvv .elementor-element-a5f0112,
	.akasa-secao-mvv .elementor-element-a5f0113 {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------
   6. Footer: contatos alinhados ao centro do icone, mais juntos
   ------------------------------------------------------------ */
footer .elementor-element-bac8bef .elementor-icon-list-item {
	align-items: center !important;
}

@media (min-width: 768px) {
	footer .elementor-element-bac8bef .elementor-icon-list-icon {
		margin-right: 8px;
	}
}

/* setas da lista Institucional na mesma cor das outras listas do rodape */
.elementor-element-a4f0002 .elementor-icon-list-icon svg {
	fill: #FFFFFF85;
	width: 12px;
	height: 12px;
}

.elementor-element-a4f0002 .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
	fill: var(--akasa-vermelho);
}

/* ------------------------------------------------------------
   7. Selos do card: "Destaque" nunca mais fica embaixo dos status
   ------------------------------------------------------------
   A fila de status vira uma linha flex do tamanho do card, com um selo
   fantasma (invisivel, mesma largura do "Destaque") como primeiro item.
   Ele reserva o espaco do selo real, entao os status quebram para a linha
   de baixo em vez de passar por cima. Ver
   houzez-child/template-parts/listing/partials/item-labels.php
   ------------------------------------------------------------ */
.item-header > .labels-wrap.akasa-linha-selos {
	position: absolute !important;
	left: 20px !important;
	right: 20px !important;
	width: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	gap: 4px !important;
	row-gap: 4px !important;
}

.item-header > .labels-wrap.akasa-linha-selos > * {
	position: static !important;
	flex: 0 0 auto !important;
}

.item-header > .labels-wrap.akasa-linha-selos > .akasa-selo-fantasma {
	visibility: hidden !important;
	margin-right: auto !important;
	pointer-events: none;
}

/* nos carrosseis o tema usa respiro de 15px em vez de 20px */
.property-carousel-module-v1-4cols .item-header > .labels-wrap.akasa-linha-selos,
.property-carousel-module-v1-5cols .item-header > .labels-wrap.akasa-linha-selos {
	left: 15px !important;
	right: 15px !important;
}

/* ------------------------------------------------------------
   8. Resultado da busca: respiro antes do rodape
   ------------------------------------------------------------ */
.main-half-map-wrap .listing-view,
.search-results .listing-view.grid-view,
.search-results .houzez_ajax_pagination {
	padding-bottom: var(--akasa-respiro, 32px);
}

.main-half-map-wrap .houzez_ajax_pagination {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------
   9. Barra fixa do imovel: simbolo AR no lugar da logo horizontal
   ------------------------------------------------------------ */
.mobile-property-contact .agent-image.akasa-agent-simbolo img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #ececec;
	padding: 4px;
}

/* ------------------------------------------------------------
   10. Consentimento do formulario: o link abre a politica sem
       marcar/desmarcar a caixinha (ele mora dentro do <label>)
   ------------------------------------------------------------ */
.gdpr-text-wrap a {
	color: var(--akasa-vermelho);
	text-decoration: underline;
}

/* ------------------------------------------------------------
   11. Contato: os 4 cartoes (escritorio, telefone, e-mail, chat)
       com a mesma altura. O container e um grid com
       align-items:center, entao o cartao de texto mais longo
       ficava maior e desalinhado dos outros tres.
   ------------------------------------------------------------ */
.elementor-element-845137b {
	align-items: stretch !important;
}

.elementor-element-845137b > .e-con {
	height: 100%;
}