/*
 * Ficha do empreendimento (single). Paleta oficial da marca — ver também
 * assets/css/empreendimento-archive.css:
 * primary #014751, apoio #042C3B, secondary #D9E74C, complementar #FF5B04.
 */

/*
 * Largura padrão do conteúdo da ficha (pedido explícito: estava tudo
 * espremido em ~645px, o content-size padrão que o Twenty Twenty-Five
 * aplica via var(--wp--style--global--content-size) a cada bloco
 * "is-layout-constrained" direto dentro de .entry-content — ver regra
 * herdada do tema: `.is-layout-constrained > :where(...) {max-width:
 * var(--wp--style--global--content-size)}`. O arquivo de empreendimentos
 * (empreendimento-archive.css) já usa 1320px como largura padrão do
 * conteúdo (.eqi-empreendimentos-archive); igualando aqui a ficha fica
 * consistente com o resto do site. Só redefine a variável NESTE
 * .entry-content (não em :root), então não afeta outras páginas do tema.
 * A capa (.eqi-empreendimento-capa) já é full-bleed por conta própria
 * (wrapper generateblocks/element com width/max-width:100%, ver
 * part_cover()) e não usa essa variável — não é afetada por esta regra.
 */
.single-eqi_empreendimento .entry-content {
	--wp--style--global--content-size: 1320px;
}

.eqi-breadcrumb {
	display: flex;
	padding: 16px 20px 0;
}

.eqi-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
	font-size: 0.85rem;
}

.eqi-breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(4, 44, 59, 0.55);
}

.eqi-breadcrumb-item:not(:last-child)::after {
	content: '\203a';
	color: rgba(4, 44, 59, 0.35);
}

.eqi-breadcrumb-item a {
	color: rgba(4, 44, 59, 0.7);
	text-decoration: none;
}

.eqi-breadcrumb-item a:hover {
	color: #FF5B04;
}

.eqi-breadcrumb-item span[aria-current] {
	color: #014751;
	font-weight: 600;
}

.eqi-location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0 20px;
	font-size: 0.92rem;
	color: rgba(4, 44, 59, 0.75);
}

.eqi-location-icon {
	display: inline-flex;
	color: #014751;
	flex-shrink: 0;
}

/*
 * "N Fotos": canto SUPERIOR direito da capa (pedido explícito, corrige
 * posição anterior no canto inferior). .wp-block-cover já é
 * position:relative por padrão (core), então basta position:absolute aqui
 * — sem precisar de offsets copiados da 1141 (ver ver_fotos_button()).
 * !important: se algum dia esse bloco for salvo pelo editor visual, o
 * qi_blocks_global_styles pode passar a emitir sua própria posição pro
 * mesmo seletor — isso garante que a nossa sempre prevaleça.
 *
 * width:auto — .qodef-block-container (mesma classe do elemento, ver
 * qi-blocks/assets/dist/main.css) tem "width:100%" por padrão. Com
 * position:absolute isso vira 100% do containing block (a capa, agora
 * full-bleed 100vw — ver regra .gb-element-e4a2c1a6 mais abaixo), então a
 * caixa (invisível, sem padding) ocupava a largura inteira da capa e o
 * conteúdo visível (o link <a>, inline) ficava alinhado à borda ESQUERDA
 * dessa caixa gigante — na prática o botão aparecia grudado no left:0 da
 * tela em vez de perto do right:24px pedido. width:auto faz a caixa
 * encolher pro tamanho do próprio botão, que aí sim respeita right/top.
 *
 * right: alinhado com a borda direita do conteúdo abaixo (pedido
 * explícito — "praticamente no meio do banner" agora que a capa é
 * full-bleed) — ver --wp--style--global--content-size:1320px no topo
 * deste arquivo, que é a largura real do conteúdo centralizado abaixo da
 * capa. calc((100vw - 1320px) / 2) reproduz a mesma folga que o
 * navegador aplica dos dois lados pra centralizar essa coluna de 1320px
 * dentro da viewport inteira — o right:24px original vira só o
 * fallback pra telas onde 1320px não cabe (a coluna de baixo encolhe até
 * a viewport, sem essa folga).
 */
.eqi-empreendimento-capa .qodef-block-eqi-ver-fotos {
	position: absolute !important;
	top: 24px !important;
	right: 24px !important;
	bottom: auto !important;
	left: auto !important;
	width: auto !important;
	z-index: 3;
}

@media (min-width: 1361px) {
	.eqi-empreendimento-capa .qodef-block-eqi-ver-fotos {
		right: calc((100vw - 1320px) / 2) !important;
	}
}

@media (max-width: 600px) {
	.eqi-empreendimento-capa .qodef-block-eqi-ver-fotos {
		top: 12px !important;
		right: 12px !important;
	}
}

/*
 * Pills das abas de tipologia: design outline (borda, sem fundo) com
 * espaçamento entre elas, no lugar do segmented-control conectado que o
 * Essential Blocks gera por padrão. Sobrescreve via !important porque o
 * CSS do próprio bloco (extraído de blockMeta pro arquivo eb-style-*.css
 * na 1ª visita) tem alta especificidade e não é seguro editar esse JSON
 * à mão (ver tabs_wrapper_attrs_json()) — regras e especificidade reais
 * conferidas em wp-content/uploads/eb-style/eb-style-{ID}.min.css:
 * ul.tabTitles[data-tabs-ul-id] tem border-width/color/style própria (a
 * "moldura" conectada em volta de todas as pills, removida abaixo) e cada
 * li tem só background-color (sem border), então o outline de cada pill é
 * aditivo, não uma sobrescrita de border existente.
 *
 * border-radius 6px (não 999px/pill totalmente arredondado) pra ficar no
 * mesmo padrão visual dos outros CTAs (ver popup_cta_buttons(), "Agende
 * sua visita" usa border.radius 6px). Nunca preenchida (nem em repouso,
 * nem ativa, nem hover) — só borda/cor mudam de estado, sem background.
 */
.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px !important;
	border: none !important;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 10px 22px !important;
	border: 1px solid #014751 !important;
	border-radius: 6px !important;
	background: transparent !important;
	cursor: pointer;
	transition: border-color 0.2s ease, border-width 0.2s ease;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li .tab-title-wrap {
	padding: 0 !important;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li .tab-title-text {
	margin: 0 !important;
	color: #014751 !important;
	font-size: 0.92rem !important;
	line-height: 1.3;
	text-align: center;
	transition: color 0.2s ease;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li:hover {
	background: transparent !important;
	border-color: #FF5B04 !important;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li:hover .tab-title-text {
	color: #FF5B04 !important;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li.active {
	background: transparent !important;
	border-width: 2px !important;
	border-color: #014751 !important;
}

.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li.active .tab-title-text {
	color: #014751 !important;
	font-weight: 600;
}

/* Seta/triângulo decorativo do segmented-control original — sem sentido numa pill solta com borda. */
.root-eb-advanced-tabs-pbg9u .eb-tabs-nav ul.tabTitles li.active:after {
	display: none !important;
}

/*
 * CTAs "Receber detalhes e valores" / "Agende sua visita" (core wp:button,
 * ver popup_cta_buttons()) — transição + hover elegante. "Receber detalhes
 * e valores" (preenchido em repouso) inverte pra fundo branco + outline
 * verde no hover (pedido explícito); "Agende sua visita" (outline em
 * repouso) ganha fundo primary no hover, igual ao padrão já usado no botão
 * "Fale conosco" do header.
 */
.abrir-popup-detalhes .wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/*
 * border:1px transparente em repouso só no botão preenchido — sem isso, a
 * borda de 1px só aparece no hover e o botão "pula" de tamanho (a borda
 * soma ao box em vez de substituir o espaço já ocupado). Não mexe no
 * "Agende sua visita" (is-style-outline), que já tem sua própria borda.
 */
.abrir-popup-detalhes:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid transparent;
}

.abrir-popup-detalhes:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: #ffffff !important;
	border-color: #014751 !important;
	color: #014751 !important;
}

.abrir-popup-detalhes.is-style-outline .wp-block-button__link:hover {
	background-color: #014751 !important;
	border-color: #014751 !important;
	color: #FBECD7 !important;
}

/*
 * "Receba novidades do mercado imobiliário" (cta-newsletter.html): o CSS
 * embutido nesse template-part (copiado literal da versão DESKTOP da
 * 1141, que lá tem um bloco mobile-only pareado que a gente não replica)
 * usa margin-right:50% + padding-left:100px fixos, sem nenhuma media
 * query. Resolvido de vez mais abaixo (ver bloco de largura/centralização
 * perto do fim do arquivo), que já cobre todos os tamanhos de tela —
 * não precisa de media query em separado aqui.
 */

/*
 * Grid de "Fotos do empreendimento" (ver empreendimento-single.js): 1 foto
 * grande à esquerda + 4 à direita (2x2). !important no display/grid pra
 * vencer o "display:grid" que o Galleryberg já escreve inline no
 * container (.galeria-empreendimento) — só uma classe normal não venceria
 * um style="" inline.
 */
.galeria-empreendimento.eqi-grid-gallery {
	display: grid !important;
	position: relative;
	grid-template-columns: 2fr 1fr 1fr !important;
	grid-template-rows: repeat(2, 1fr) !important;
	gap: 8px !important;
	aspect-ratio: 16 / 7 !important;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(4, 44, 59, 0.06);
}

.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

/* Primeira foto: grande, ocupa as duas linhas na coluna da esquerda. */
.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

/* Fotos 2 a 5: grid 2x2 à direita. */
.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(2) {
	grid-column: 2;
	grid-row: 1;
}

.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(3) {
	grid-column: 3;
	grid-row: 1;
}

.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(4) {
	grid-column: 2;
	grid-row: 2;
}

.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(5) {
	grid-column: 3;
	grid-row: 2;
}

/*
 * Fotos além da 5ª: continuam no DOM (ver comentário no topo do JS) mas
 * fora do fluxo do grid, invisíveis — position:absolute tira o item do
 * layout do grid (spec), então não sobra rastro de coluna/linha vazia.
 */
.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(n+6) {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* 5ª foto quando há mais imagens: blur + "+ N imagens" por cima. */
.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image.eqi-grid-more img {
	filter: blur(3px);
	transform: scale(1.06);
}

/*
 * Overlay "+ N imagens". O seletor tem que ser longo assim porque o
 * Galleryberg manda em QUALQUER div dentro das figuras dele:
 * ".galleryberg-gallery-container figure.galleryberg-image > div:not(.components-drop-zone)
 * {display:flex;flex-direction:column;height:100%;width:100%}" — 3 classes
 * + 2 elementos, mais específico que um ".eqi-grid-more-overlay" solto, que
 * perdia inclusive o display. O prefixo abaixo tem 4 classes + 1 elemento,
 * então ganha dessa regra.
 */
.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image > .eqi-grid-more-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 44, 59, 0.45);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

/*
 * Os dois overlays ("+ N imagens" da 5ª foto no desktop e o da 1ª no
 * mobile) existem juntos no DOM (ver empreendimento-single.js) — cada
 * breakpoint mostra o seu. display:none (e não opacity) pra que o texto do
 * outro nem apareça pra leitor de tela.
 */
.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image > .eqi-grid-more-overlay--mobile {
	display: none;
}

/*
 * Mobile (<768px): o grid de 5 fotos vira UMA foto com o overlay
 * "+ N imagens" por cima. Em ~390px de largura as 4 miniaturas do 2x3
 * anterior ficavam com ~170x110 cada, pequenas demais pra mostrar
 * qualquer coisa do imóvel; uma foto grande + a contagem leva pro mesmo
 * lugar (o lightbox do Galleryberg, no clique) com muito mais leitura.
 */
@media (max-width: 767px) {
	.galeria-empreendimento.eqi-grid-gallery {
		grid-template-columns: 1fr !important;
		grid-template-rows: 1fr !important;
		aspect-ratio: 3 / 2 !important;
	}

	.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(1) {
		grid-column: 1;
		grid-row: 1;
	}

	/*
	 * Da 2ª em diante: mesmo tratamento das "além da 5ª" no desktop — saem
	 * do fluxo do grid mas continuam no DOM, porque tanto o lightbox do
	 * Galleryberg quanto o botão "N Fotos" da capa dependem delas (ver
	 * comentário no topo de empreendimento-single.js). Mesma
	 * especificidade das regras de posicionamento acima, vem depois no
	 * arquivo — então ganha.
	 */
	.galeria-empreendimento.eqi-grid-gallery > figure.wp-block-galleryberg-image:nth-of-type(n+2) {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image > .eqi-grid-more-overlay--desktop {
		display: none;
	}

	/*
	 * Aqui o overlay NÃO cobre a foto inteira como o do desktop: lá ele fica
	 * sobre a 5ª foto (uma foto "extra", que pode borrar sem prejuízo); aqui
	 * a foto de baixo é a única que o visitante vê, então o indicador vira
	 * uma pílula no canto — mesma cor/tipografia, mas sem tapar o imóvel.
	 * Por isso também não há blur na imagem no mobile.
	 */
	.galeria-empreendimento.eqi-grid-gallery figure.wp-block-galleryberg-image > .eqi-grid-more-overlay--mobile {
		display: flex;
		inset: auto 10px 10px auto;
		/* width/height:auto desfaz o 100%/100% da regra do Galleryberg
		   citada acima — sem isso a pílula vira uma faixa do tamanho da
		   foto inteira. */
		width: auto;
		height: auto;
		padding: 7px 14px;
		border-radius: 999px;
		background: rgba(4, 44, 59, 0.82);
		font-size: 0.9rem;
		line-height: 1.2;
	}
}

/*
 * Faixa de miniaturas do lightbox (ver empreendimento-single.js). O
 * GLightbox do Galleryberg não tem miniaturas; a faixa é nossa, injetada
 * dentro do .glightbox-container quando o lightbox abre. z-index acima do
 * .gcontainer (que fica em 99999 no CSS do GLightbox) pra ficar por cima
 * da foto, e position:fixed porque o container ocupa a viewport inteira.
 */
.glightbox-container .eqi-lightbox-thumbs {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: rgba(4, 44, 59, 0.92);
	scrollbar-width: thin;
}

.glightbox-container .eqi-lightbox-thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 60px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	overflow: hidden;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.glightbox-container .eqi-lightbox-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.glightbox-container .eqi-lightbox-thumb:hover,
.glightbox-container .eqi-lightbox-thumb:focus-visible {
	opacity: 0.85;
}

.glightbox-container .eqi-lightbox-thumb.is-current {
	border-color: #FF5B04;
	opacity: 1;
}

/*
 * Com a faixa embaixo, a foto tem que caber no que sobrou da viewport. Só
 * limitar a altura da imagem não resolve: quem centraliza é o .gslider
 * (align-items:center) dentro do .gcontainer, que ocupa a viewport
 * inteira — a foto ficava centralizada em 100vh e entrava por baixo das
 * miniaturas (medido: 40px de sobreposição). Encurtando o .gcontainer, o
 * slide inteiro (foto e setas de navegação, que ficam dentro dele) passa a
 * se centralizar no espaço acima da faixa.
 */
.glightbox-container.eqi-has-thumbs .gcontainer {
	height: calc(100% - 100px) !important;
}

.glightbox-container.eqi-has-thumbs .ginner-container {
	height: 100% !important;
}

.glightbox-container.eqi-has-thumbs .gslide-image img {
	max-height: calc(100vh - 100px) !important;
}

@media (max-width: 767px) {
	.glightbox-container .eqi-lightbox-thumbs {
		gap: 6px;
		padding: 8px;
	}

	.glightbox-container .eqi-lightbox-thumb {
		width: 62px;
		height: 46px;
	}

	.glightbox-container.eqi-has-thumbs .gcontainer {
		height: calc(100% - 80px) !important;
	}

	.glightbox-container.eqi-has-thumbs .gslide-image img {
		max-height: calc(100vh - 80px) !important;
	}
}

/*
 * Preço da tipologia: ponto principal do card (pedido explícito), bem mais
 * destacado que o resto do texto — mesma cor de destaque (complementar)
 * usada no preço dos cards da grade de empreendimentos.
 */
.eqi-tipologia-preco {
	margin: 4px 0 16px;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.15;
	color: #FF5B04;
}

@media (max-width: 600px) {
	.eqi-tipologia-preco {
		font-size: 1.6rem;
	}
}

/*
 * Faixas de ponta a ponta da viewport (full-bleed), pedido explícito:
 * a capa/banner principal (.gb-element-e4a2c1a6, ver COVER_ELEMENT_ID em
 * part_cover()) e o fundo colorido das seções "Não encontrou o imóvel
 * certo?" e "Receba novidades..." (.gb-element-f694556e/-4aafc395, ver
 * formulario-nao-encontrou.html/cta-newsletter.html). As três eram só
 * width:100% do PAI via css inline do GenerateBlocks — ou seja, 100% da
 * largura do .entry-content (constrained, 1320px — ver bloco de
 * --wp--style--global--content-size no topo deste arquivo), nunca do
 * viewport inteiro. calc(50% - 50vw) é o breakout clássico: puxa as bordas
 * esquerda/direita até a borda da viewport não importa a largura do pai,
 * então funciona tanto dentro do .entry-content quanto de qualquer
 * container futuro que venha a envolver essas faixas. !important pela
 * mesma razão do bloco abaixo (vencer o css inline do GenerateBlocks).
 *
 * .gb-element-e4a2c1a6 já tem position:relative/top:-50px inline (efeito
 * de sobrepor a capa ao header) — não mexido aqui, só width/margin. O
 * botão "Ver Fotos" (.qodef-block-eqi-ver-fotos, ver regra logo acima
 * neste arquivo) é position:absolute relativo à PRÓPRIA .eqi-empreendimento
 * -capa (wp-block-cover é position:relative por padrão), não a este
 * wrapper — continua no canto superior direito da capa mesmo ela ficando
 * mais larga.
 */
.gb-element-e4a2c1a6,
.gb-element-f694556e,
.gb-element-4aafc395 {
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/*
 * 100vw inclui a largura da scrollbar (quando ela ocupa espaço, ex.:
 * Windows/Linux) — sem isso, as faixas breakout acima ficam alguns pixels
 * mais largas que a área visível e criam uma scrollbar horizontal
 * fantasma. Escopado só nesta página (classe de body do CPT) pra não
 * mudar o comportamento de overflow do resto do tema.
 */
body.single-eqi_empreendimento {
	overflow-x: hidden;
}

/*
 * "Receba novidades...": abaixo de 767px o próprio bloco (ver
 * cta-newsletter.html, atributo "@media (max-width:767px)" do
 * generateblocks/element) troca o fundo azul-escuro sólido por uma IMAGEM
 * de fundo laranja (bg-laranja-3.png) — copiado literal do mobile da 1141,
 * onde essa seção tinha outro design. Aqui, com o título/botão pensados
 * pro fundo escuro (texto branco, botão claro), a troca pra laranja no
 * mobile lê como as cores "invertendo" (pedido explícito: manter o mesmo
 * fundo escuro em qualquer largura). Remover só o background-image no
 * media query basta — o background-color escuro já definido no elemento
 * (sempre presente, não é sobrescrito por este media query) volta a valer
 * sozinho.
 */
@media (max-width: 767px) {
	.gb-element-4aafc395 {
		background-image: none !important;
	}
}

/*
 * Largura do CONTEÚDO (não da faixa colorida) das seções "Não encontrou o
 * imóvel certo?" e "Receba novidades..." — pedido explícito: são só um
 * formulário/CTA, não precisam ocupar a largura toda da faixa full-bleed.
 * max-width + margin:auto centraliza de fato, ao contrário de padding
 * fixo em pixel (dependia da largura do container bater com a da 1141,
 * que não bate aqui — ver notas anteriores sobre o form_desktop).
 * !important pra vencer o padding/margin inline vindos do blockMeta
 * (Essential Blocks) e do css_wrap() (GenerateBlocks), que não têm media
 * query e são a causa raiz do desalinhamento.
 *
 * Causa raiz do desalinhamento (confirmada via CDP/getBoundingClientRect,
 * não só visual): .gb-element-f694556e tem box-sizing:content-box (padrão
 * do navegador) com padding:5% vindo do css_wrap() em
 * formulario-nao-encontrou.html — nesse modelo de caixa, o padding SOMA
 * aos 100% de largura em vez de ser absorvido por ela, então a faixa
 * inteira ficava ~150px mais larga que o viewport (overflow horizontal
 * silencioso, sem scrollbar visível no editor) e todo o conteúdo dentro
 * dela — mesmo corretamente centralizado NA FAIXA — aparecia deslocado
 * pra direita em relação ao que o usuário via na tela. box-sizing:border-
 * box aqui resolve na raiz; as regras abaixo garantem a centralização do
 * conteúdo em si.
 */
.gb-element-f694556e {
	box-sizing: border-box !important;
}

.gb-element-f694556e > .wp-block-heading,
.gb-element-f694556e > .wp-block-paragraph {
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}

/*
 * Título "Não encontrou o imóvel certo?" vem com has-custom-verde-neon-color
 * (formulario-nao-encontrou.html) — cor de destaque que não combina bem
 * sobre o fundo escuro com imagem desta faixa (pedido explícito: branco,
 * igual ao parágrafo logo abaixo, que já usa has-custom-branco-color).
 * Seletor com 3 níveis de especificidade pra vencer de vez o
 * .has-custom-verde-neon-color{color:...!important} que o WP gera pra
 * qualquer cor de paleta — com os dois lados !important, empate de
 * especificidade decidiria por ordem de carregamento no <head> (frágil);
 * aqui a seleção mais específica garante a vitória independente da ordem.
 *
 * O parágrafo logo abaixo ("Descreva o imóvel...") já usa
 * has-custom-branco-color no markup, mas essa cor de paleta ("branco")
 * nunca foi migrada pro Global Styles deste ambiente — var(--wp--preset--
 * color--custom-branco) fica indefinida, e uma var() inválida faz o
 * navegador cair pro valor herdado (preto) em vez de branco. Mesmo fix
 * aqui: força branco direto, sem depender dessa variável existir.
 */
body.single-eqi_empreendimento .gb-element-f694556e > .wp-block-heading,
body.single-eqi_empreendimento .gb-element-f694556e > .wp-block-paragraph {
	color: #ffffff !important;
}

.gb-element-f694556e .eqi-nao-encontrou-form {
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}

/*
 * "Receba novidades...": além de estreitar (mesmo motivo acima), o texto
 * (título + parágrafo) precisa ficar centralizado — pedido explícito. O
 * design original era coluna de texto à esquerda + imagem decorativa à
 * direita (removida quando a seção passou a fundo sólido escuro), então
 * nunca teve text-align:center; agora que a coluna ficou estreita e
 * centralizada na faixa, o texto dentro dela também precisa centralizar.
 */
.qodef-block-dea881a2.qodef-block-container {
	display: block !important;
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	float: none !important;
	box-sizing: border-box;
}

/*
 * flex-direction:column (não row+wrap): numa caixa de 640px, título+texto
 * (~524px) e botão lado a lado ultrapassam a largura disponível, então
 * seria forçado a quebrar linha de qualquer forma — empilhado e
 * centralizado é mais previsível que depender do breakpoint próprio do
 * qi-blocks (qodef-button-below--1024), pensado pra a largura antiga
 * (bem maior, com imagem decorativa ao lado).
 */
.qodef-block-dea881a2 .qodef-m-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.qodef-block-dea881a2 .qodef-m-content {
	text-align: center;
}

/* "Entrar para a lista": espaço acima, agora empilhado sob o texto (coluna centralizada). */
.qodef-block-bf788968.qodef-block-container {
	margin-top: 20px;
}

/*
 * "Receber detalhes e valores" / "Agende sua visita": espaço acima do
 * primeiro CTA da aba de tipologia, agora que o preço veio pra cima de
 * tudo (ver build_tab()) e ficou mais coisa empilhada antes dos botões.
 */
.eb-tab-inner .wp-block-buttons {
	margin-top: 20px;
}

/*
 * "Receba novidades...": título/texto viram laranja/creme em ALGUNS
 * empreendimentos em produção (pedido explícito: reportado no
 * "Entrar para a lista", mas o mesmo bug afeta o título/texto do CTA) —
 * causa raiz não é nada gerado por este plugin. É CSS injetado pelo
 * PRÓPRIO qi-blocks via wp_add_inline_style('qi-blocks-main-css', ...)
 * (ver <style id="qi-blocks-main-inline-css"> na página renderizada),
 * escopado com "body[class*=\"-{ID do post}\"]" — um mecanismo interno do
 * plugin que guarda, por post, a última cor customizada vista para cada
 * uniqueClass. Como uniqueClass é FIXO/hardcoded (não muda por post —
 * "qodef-block-bf788968"/"qodef-block-dea881a2" em cta-newsletter.html),
 * qualquer post que em algum momento (edição manual, teste, importação
 * antiga) tenha tido uma cor diferente salva fica com esse cache
 * "grudado" pra sempre nesse post específico — sobrevive até a
 * regeneração de post_content deste plugin (regenerate() faz um
 * wp_update_post() direto, sem passar pelo fluxo normal do editor que
 * invalidaria esse cache do qi-blocks).
 *
 * Sem acesso a esse cache interno do qi-blocks pra limpar na origem, a
 * correção fica aqui: reforça as cores corretas (as mesmas definidas no
 * css_wrap() de cta-newsletter.html) com !important, cobrindo QUALQUER
 * post afetado — não é escopado a um ID específico de propósito, porque
 * o mesmo bug pode aparecer em outros posts além do relatado.
 */
.qodef-block-dea881a2 .qi-block-call-to-action .qodef-m-content .qodef-m-title,
.qodef-block-dea881a2 .qi-block-call-to-action .qodef-m-content .qodef-m-text {
	color: #ffffff !important;
}

.qodef-block-bf788968 .qi-block-button.qodef-block.qodef-layout--filled {
	background-color: rgba(4, 44, 59, 1) !important;
	color: rgba(217, 231, 76, 1) !important;
}

.qodef-block-bf788968 .qi-block-button.qodef-block.qodef-layout--outlined,
.qodef-block-bf788968 .qi-block-button.qodef-block.qodef-layout--textual {
	color: rgba(217, 231, 76, 1) !important;
}

.qodef-block-bf788968 .qi-block-button.qodef-block:not(.qodef-layout--textual):hover {
	border-color: rgba(217, 231, 76, 1) !important;
	color: rgba(0, 0, 0, 1) !important;
}

.qodef-block-bf788968 .qi-block-button.qodef-block.qodef-layout--textual:hover {
	color: rgba(0, 0, 0, 1) !important;
}

.qodef-block-bf788968 .qi-block-button.qodef-block.qodef-layout--filled:not(.qodef-hover--reveal):hover {
	background-color: rgba(217, 231, 76, 1) !important;
}

/*
 * Faixa flutuante de contato (ver EQI_Empreendimento_Template::maybe_render_sticky_bar()):
 * 65px de altura, "cartão" centralizado e descolado do rodapé (bottom: 20px,
 * não bottom: 0) — mesmas bordas arredondadas (6px) e box-shadow já usadas
 * nos CTAs da página (ver whatsapp_button()/qi-blocks button acima). z-index
 * abaixo do modal de leads (100000, ver lead-modal.css) mas acima de
 * qualquer coisa do conteúdo/rodapé do tema.
 *
 * Sem padding-bottom no body pra "abrir espaço" pra ela: isso deixava uma
 * faixa em branco vazia entre o fim do rodapé do tema e o fim real da
 * página (pedido explícito pra tirar esse espaço a mais). A faixa
 * simplesmente sobrepõe o que estiver embaixo ao rolar até o fim — mesmo
 * comportamento comum de CTAs flutuantes (ex.: botão de WhatsApp fixo).
 */
.eqi-sticky-bar {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	width: calc(100% - 40px);
	max-width: 720px;
	min-height: 65px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(4, 44, 59, 0.2);
	z-index: 999;
}

.eqi-sticky-bar-inner {
	min-height: 65px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.eqi-sticky-bar-lista {
	flex: 0 0 auto;
	background-color: rgba(4, 44, 59, 1);
	color: rgba(217, 231, 76, 1);
	border: none;
	border-radius: 6px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.eqi-sticky-bar-lista:hover {
	background-color: rgba(217, 231, 76, 1);
	color: rgba(4, 44, 59, 1);
}

.eqi-sticky-bar-agent {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.eqi-sticky-bar-agent-photo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	line-height: 0;
}

.eqi-sticky-bar-agent-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eqi-sticky-bar-agent-text {
	color: var(--eqi-apoio, #042c3b);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: break-word;
}

.eqi-sticky-bar-whatsapp {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(38, 212, 102, 0.13);
	border: 1px solid rgba(38, 212, 102, 0.9);
	color: rgba(7, 94, 83, 1);
	border-radius: 6px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.eqi-sticky-bar-whatsapp:hover {
	background-color: rgba(38, 212, 102, 0.48);
}

.eqi-sticky-bar-whatsapp-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.eqi-sticky-bar-whatsapp-icon svg {
	width: 100%;
	height: 100%;
}

/*
 * <768px: sem espaço pra 3 itens lado a lado — mantém só os 2 CTAs
 * (lista/whatsapp) e esconde o convite "Quer falar com um atendente?"
 * (foto+texto), que é reforço visual, não uma ação em si.
 */
@media (max-width: 767px) {
	.eqi-sticky-bar-agent {
		display: none;
	}

	.eqi-sticky-bar-lista,
	.eqi-sticky-bar-whatsapp {
		flex: 1 1 0;
		justify-content: center;
		padding: 12px 10px;
		font-size: 0.85rem;
	}
}