/* ============================================================
   Home — valores extraídos do CSS real (post-1896.css)
   ============================================================ */

/* ⚠️ Os títulos de bloco desta página (hero, Conheça Nossos Imóveis,
   Instagram, Porque escolher, Depoimentos, Fale com Nosso Time) NÃO têm
   regra aqui de propósito. O padrão é único e vive no `base.css`
   (`.bloco-titulo`), que é o arquivo que toda página do site carrega.
   Não recriar tamanho/peso/entrelinha de título aqui. */

.home-hero {
	min-height: var(--altura-hero);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--espaco-hero) var(--espaco-lateral);
	background-image: url('/assets/img/banner-home.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.home-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #034F74;
	opacity: .9;
}
.home-hero__conteudo { position: relative; z-index: 1; width: 100%; max-width: 1200px; }

.home-hero__filtros {
	background-color: #FFFFFF52;
	backdrop-filter: blur(6px);
	border-bottom: 3px solid var(--cor-destaque);
	border-radius: 10px;
	padding: 40px;
}
/* Grade de 4 colunas — mesmo arranjo do site atual (4 campos em cima, 3 + o
   botão embaixo). Antes era flex livre e cabiam 6 campos na mesma linha, o que
   espremia os dois campos de preço a ponto de cortar "Mínimo"/"Máximo". */
.home-hero__filtros form {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 2%;
	align-items: end;
}
.home-hero__filtros .filtro-campo { margin-bottom: 0; }
.home-hero__filtros .filtro-btn { width: 100%; margin-top: 0; padding: 11px 20px; }
.home-hero__filtros .filtro-label { color: var(--cor-branco); }

@media (max-width: 768px) {
	.home-hero__filtros { padding: 30px; }
	.home-hero__filtros form { grid-template-columns: repeat(2, 1fr); gap: 14px 3%; }
	/* Código do Imóvel e o botão fecham a grade ocupando a largura toda —
	   com 7 campos em 2 colunas, sem isso sobraria uma célula vazia. */
	.home-hero__filtros .filtro-campo:last-of-type,
	.home-hero__filtros .filtro-btn { grid-column: 1 / -1; }
}
/* No celular tudo vira uma coluna só — aí a folga entre os campos, que no
   desktop dá respiro, vira rolagem à toa. Aperta o gap, a distância do rótulo
   pro campo e a altura do próprio campo. Vale SÓ aqui: no desktop e no tablet
   o espaçamento continua o mesmo. */
@media (max-width: 480px) {
	.home-hero__filtros { padding: 20px; }
	.home-hero__filtros form { grid-template-columns: 1fr; gap: 6px; }
	.home-hero__filtros .filtro-label { font-size: 14px; margin-bottom: 2px; }
	.home-hero__filtros .filtro-select,
	.home-hero__filtros .filtro-input { padding: 8px 12px; }
	.home-hero__filtros .filtro-btn { margin-top: 4px; }
}

/* ---------- Conheça Nossos Imóveis (abas + grid) ---------- */

.home-destaques { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); }

/* Abas Comprar/Alugar — valores reais do widget n-tabs do Elementor
   (`custom-widget-nested-tabs.min.css` + elemento 6cace58 do post-1896.css).
   A caixa alta e o letter-spacing NÃO estão na regra da aba: vêm da regra
   global de `button` do kit (post-1885.css), que a aba herda por ser <button>. */
.home-abas { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: var(--espaco-titulo); }
.home-abas__botao {
	font-family: var(--fonte-titulo);
	font-weight: 400;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	color: var(--cor-secundaria);
	background: #f1f2f3;
	border: none;
	border-radius: 5px;
	padding: 15px 35px;
	cursor: pointer;
	transition: background .3s, color .3s;
}
/* Hover cai no MESMO amarelo do estado ativo — é assim no site atual, não é
   engano: `--n-tabs-title-background-color-hover` aponta pro accent. */
.home-abas__botao:hover,
.home-abas__botao.ativa {
	background: var(--cor-destaque);
	color: var(--cor-branco);
}

/* O wrapper é quem entra e sai com as abas Comprar/Alugar (antes era a própria
   grade) — as setas precisam sumir junto com os cards da aba escondida. */
.home-destaques__carrossel { display: none; position: relative; }
.home-destaques__carrossel.ativa { display: block; }

.home-destaques__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

/* No desktop são 2 linhas de 4 (os 8 imóveis do LIMIT), sem carrossel: as setas
   ficam escondidas e a grade é grade mesmo. */
.home-destaques__carrossel .carrossel__seta { display: none; }

/* Aba vazia. Reaproveita a tipografia do `.imoveis-vazio` (imoveis.css, já
   carregado nesta página) e só centraliza, como no site atual. */
.home-destaques__vazio { text-align: center; margin: 0; padding: 20px 0 10px; }

/* Botão "Ver todos os imóveis" — valores do elemento af3b523 do post-1896.css.
   O `text-transform:uppercase` NÃO está lá: vem da regra global de `button` do
   kit (post-1885.css), mesma herança das abas. O letter-spacing do kit (2.4px)
   é sobrescrito por -0.2px neste botão específico. */
.home-destaques__acao { text-align: center; margin: var(--espaco-titulo) 0 0; }
.home-destaques__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cor-primaria);
	color: var(--cor-branco);
	font-family: var(--fonte-titulo);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.2px;
	/* Assimétrico no original: sobra menos à direita porque a seta já ocupa. */
	padding: 15px 40px 15px 50px;
	border-radius: 4px;
	transition: opacity .3s;
}
.home-destaques__btn:hover { opacity: .9; }

@media (max-width: 480px) {
	.home-destaques__btn { padding: 14px 26px; font-size: 15px; }
}

/* Abaixo de 769px a MESMA grade vira trilho horizontal. Não é uma segunda
   estrutura: é a de cima com display trocado, então nada duplica no HTML. */
@media (max-width: 768px) {
	.home-destaques__grid {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.home-destaques__grid::-webkit-scrollbar { display: none; }
	/* 20px de gap = o passo que o carrossel.js usa por clique de seta */
	.home-destaques__grid > * { flex: 0 0 calc(50% - 10px); scroll-snap-align: start; }

	.home-destaques__carrossel .carrossel__seta { display: block; }
	.home-destaques__carrossel .carrossel__seta--prev { left: -6px; }
	.home-destaques__carrossel .carrossel__seta--next { right: -6px; }
}

/* Celular: 1 imóvel por vez, como o Felipe pediu. As setas sobem pra cima da
   foto (a lateral não tem folga nenhuma nessa largura). */
@media (max-width: 480px) {
	/* Com 35px de padding lateral as duas abas não cabem lado a lado num
	   celular estreito e quebram linha. Aperta só o padding pra manterem-se
	   na mesma linha — o resto (cor, caixa alta, espaçamento) segue igual. */
	.home-abas__botao { padding: 13px 22px; letter-spacing: 1.6px; }

	/* 88% em vez de 100%: sobra uma tira do próximo imóvel na borda, que é o que
	   avisa "arrasta pro lado". Duas linhas não cabem — o card tem ~575px de
	   altura e a tela de celular tem ~700px, então a segunda linha só apareceria
	   rolando pra baixo dentro de algo que já rola pro lado. */
	.home-destaques__grid > * { flex: 0 0 88%; }

	/* Foto de 390px é medida de desktop. No celular derruba pra 240px e o card
	   inteiro cai de ~575px pra ~425px — cabe o imóvel todo numa tela só.
	   Vale só no carrossel da home; o card em "Todos os Imóveis" continua 390. */
	.home-destaques__grid .imovel-card__foto { min-height: 240px; padding: 20px; }

	.home-destaques__carrossel .carrossel__seta--prev { left: 8px; }
	.home-destaques__carrossel .carrossel__seta--next { right: 8px; }
}

/* ---------- Alugue / Compre / Anuncie ----------
   Valores do post-1896.css (d1488b8 / 816fe56 / b82859c). Usa os mesmos tokens
   de espaçamento das outras seções, como combinado com o Felipe. */

.servicos { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); }
.servicos__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}
.servicos__card {
	background: var(--cor-primaria);
	border-radius: 10px;
	padding: 60px 30px;
	text-align: center;
}
/* O do meio é laranja. Registro: em 28/07 eu tinha concluído que esse #E48B05
   era só cor de hover de ícone e que não existia seção laranja no site —
   estava errado, é o fundo deste card. */
.servicos__card--destaque { background: #E48B05; }

.servicos__icone {
	width: 30%;
	height: auto;
	margin: 0 auto;
	transition: transform .3s;
}
.servicos__card:hover .servicos__icone { transform: scale(1.1); }

.servicos__titulo {
	font-family: var(--fonte-titulo);
	font-size: 28px;
	font-weight: 600;
	color: var(--cor-branco);
	margin: 0 0 12px;
}
.servicos__desc {
	font-family: var(--fonte-titulo);
	font-size: 16px;
	font-weight: 400;
	color: var(--cor-branco);
	margin: 0;
}

/* Três colunas com padding de 60/30 espremem demais abaixo do desktop —
   o texto do card do meio tem 150 caracteres. Empilha. */
@media (max-width: 768px) {
	.servicos__lista { grid-template-columns: 1fr; }
	.servicos__card { padding: 40px 25px; }
	.servicos__icone { width: 22%; }
	.servicos__titulo { font-size: 24px; }
}
@media (max-width: 480px) {
	.servicos__card { padding: 32px 20px; }
	.servicos__icone { width: 30%; }
	.servicos__titulo { font-size: 22px; }
	.servicos__desc { font-size: 15px; }
}

/* ---------- Conheça Nosso Instagram ----------
   Fundo e título do post-1896.css (2312f02 / 23ede98); colunas, quantidade,
   gap e proporção vieram dos atributos do próprio widget do feed atual. */

.instagram { background: var(--cor-primaria); }
.instagram__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--espaco-secao) var(--espaco-lateral);
}
.instagram__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.instagram__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.instagram__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}
.instagram__item:hover img { transform: scale(1.05); }

/* Play em cima da capa — só nos posts de vídeo/Reel. */
.instagram__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.instagram__play svg {
	width: 34px;
	height: 34px;
	fill: var(--cor-branco);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.instagram__acao { text-align: center; margin: 16px 0 0; }
.instagram__btn {
	display: inline-block;
	background: var(--cor-destaque);
	color: var(--cor-branco);
	font-family: var(--fonte-titulo);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 16px;
	border-radius: 4px;
}

/* Mesma escada de colunas do feed atual: 4 → 2 → 1. */
@media (max-width: 768px) {
	.instagram__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.instagram__grid { grid-template-columns: 1fr; }
	/* O feed atual mostra 4 posts no celular, não 8. */
	.instagram__item--extra { display: none; }
}

/* ---------- YouTube ----------
   Contêiner cbc8944 e rótulo 26b9597 do post-1896.css. As 4 colunas são de
   22% cada com gap de 5px — sobra folga nas laterais, é assim no original. */

.youtube { background: var(--cor-primaria); }
.youtube__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--espaco-secao) var(--espaco-lateral);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.youtube__marca { width: 22%; display: flex; align-items: flex-start; gap: 10px; }
/* Ícone "empilhado": fundo cheio laranja com o glifo branco por cima. */
.youtube__icone {
	flex-shrink: 0;
	display: inline-block;
	padding: .5em;
	line-height: 0;
	background: #E48B05;
	border-radius: 4px;
}
.youtube__icone svg { width: 22px; height: 22px; fill: var(--cor-branco); }
.youtube__texto { display: flex; flex-direction: column; }
.youtube__titulo {
	font-family: var(--fonte-titulo);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cor-branco);
}
/* `lowercase` está no CSS original — o texto cadastrado tem maiúscula, quem
   derruba é o estilo. Mantido igual pra não divergir do site atual. */
.youtube__sub {
	font-family: var(--fonte-titulo);
	font-size: 12px;
	font-weight: 300;
	text-transform: lowercase;
	line-height: 15px;
	color: var(--cor-branco);
}

.youtube__video {
	width: 22%;
	aspect-ratio: 16 / 9;
	position: relative;
	padding: 0;
	border: none;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	display: block;
}
.youtube__video img { width: 100%; height: 100%; object-fit: cover; }
.youtube__video--ativo { cursor: default; }
.youtube__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.youtube__play svg { width: 58px; height: 41px; }
.youtube__play-fundo { fill: #212121; fill-opacity: .8; transition: fill .2s, fill-opacity .2s; }
.youtube__video:hover .youtube__play-fundo { fill: #f00; fill-opacity: 1; }

@media (max-width: 768px) {
	/* O rótulo passa a ocupar a linha inteira e os vídeos vão de dois em dois —
	   22% num tablet daria uma miniatura de ~150px, ilegível. */
	.youtube__marca { width: 100%; justify-content: center; margin-bottom: 10px; }
	.youtube__video { width: calc(50% - 5px); }
}
@media (max-width: 480px) {
	.youtube__video { width: 100%; }
}

/* ---------- Depoimentos ---------- */

.home-depoimentos { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); }

.carrossel { position: relative; }
.carrossel__trilho {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cor-branco);
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	border: none;
	cursor: pointer;
	font-size: 18px;
	color: var(--cor-primaria);
	z-index: 2;
}
.carrossel__seta--prev { left: -10px; }
.carrossel__seta--next { right: -10px; }

/* Nos depoimentos a seta cai sobre TEXTO, não sobre foto — a -10px ela comia
   as primeiras palavras. Empurra pra fora do trilho: cabe nos 50px de padding
   lateral da seção no desktop. Abaixo de 769px esse padding cai pra 20px e não
   haveria espaço, então some — arrastar já é natural no toque e a tira do
   próximo card na borda avisa que tem mais. */
.home-depoimentos .carrossel__seta--prev { left: -46px; }
.home-depoimentos .carrossel__seta--next { right: -46px; }

@media (max-width: 768px) {
	.home-depoimentos .carrossel__seta { display: none; }
}

.depoimento-card { flex: 0 0 340px; scroll-snap-align: start; }

/* Autor em cima (foto + nome + relação com a empresa), balão embaixo. */
.depoimento-card__autor { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.depoimento-card__foto {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.depoimento-card__nome {
	font-family: var(--fonte-titulo);
	font-size: 16px;
	font-weight: 600;
	color: var(--cor-primaria);
	margin: 0;
}
.depoimento-card__cargo {
	font-family: var(--fonte-titulo);
	font-size: 13px;
	line-height: 1.35;
	color: var(--cor-texto);
	margin: 2px 0 0;
}

.depoimento-card__bolha {
	position: relative;
	background: var(--cor-primaria);
	border-radius: 10px;
	padding: 20px;
	color: var(--cor-branco);
	font-family: var(--fonte-titulo);
	font-size: 14px;
	line-height: 1.5;
}
/* Setinha ligando o balão ao autor, alinhada com a foto. */
.depoimento-card__bolha::before {
	content: '';
	position: absolute;
	top: -9px;
	left: 26px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid var(--cor-primaria);
}

/* Corte em 7 linhas: é o que faz todos os cards nascerem da mesma altura, em
   vez de um com 4 linhas ao lado de outro com 11. Sem cortar o texto no PHP —
   o depoimento inteiro continua no HTML, só não aparece de cara. */
.depoimento-card__texto {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}
.depoimento-card--aberto .depoimento-card__texto {
	-webkit-line-clamp: unset;
	overflow: visible;
}
.depoimento-card__mais {
	margin-top: 10px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--fonte-titulo);
	font-size: 13px;
	font-weight: 500;
	color: var(--cor-destaque);
	text-decoration: underline;
}

.home-estrelas { text-align: center; font-size: 40px; margin: 30px 0; }

.home-confianca {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	margin: 0 auto;
}
/* Selos: círculos sobrepostos com borda branca, como no site atual — eram
   quadrados soltos aqui. `object-fit: cover` (não `contain`) é o que impede a
   foto de aparecer com tarja branca dentro do círculo. */
.home-confianca__selos { display: flex; padding-left: 14px; }
.home-confianca__selos img {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--cor-branco);
	margin-left: -14px;
}
.home-confianca__texto { font-family: var(--fonte-titulo); font-size: 23px; font-weight: 500; color: var(--cor-secundaria); max-width: 400px; }

@media (max-width: 768px) {
	/* Dois depoimentos por tela no tablet; a folga vem do gap de 20px do trilho. */
	.depoimento-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 480px) {
	/* 88%: sobra uma tira do próximo, mesma afordância do carrossel de imóveis. */
	.depoimento-card { flex: 0 0 88%; }
	.depoimento-card__foto { width: 54px; height: 54px; }
	.home-confianca { flex-direction: column; text-align: center; }
	.home-confianca__texto { font-size: 19px; }
	.home-estrelas { font-size: 32px; }
}

/* ---------- Time (corretores) ---------- */

.home-time { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); }
.home-time__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px 0;
}
.corretor-card { width: 20%; text-align: center; padding: 0 10px; }
.corretor-card__foto {
	width: 55%;
	aspect-ratio: 1/1;
	border-radius: 100px;
	object-fit: cover;
	margin: 0 auto 10px;
	display: block;
	transition-duration: .3s;
}
.corretor-card__foto:hover { transform: scale(1.07); }
.corretor-card__nome { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--cor-secundaria); margin: 0 0 10px; }
.corretor-card__info { font-family: var(--fonte-titulo); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--cor-secundaria); margin: 0; }

/* São 5 corretores — número ímpar, então sempre sobra alguém sozinho na última
   linha quando as colunas diminuem. O `space-between` do desktop encosta esse
   sozinho na borda esquerda; `center` deixa ele no meio. Vale pros dois casos:
   3 colunas (sobra 2 na 2ª linha) e 2 colunas (sobra 1 na 3ª). */
@media (max-width: 768px) {
	.home-time__grid { justify-content: center; }
	.corretor-card { width: 33%; }
}
@media (max-width: 480px) { .corretor-card { width: 50%; } }

/* ---------- Porque escolher a Luirgi Machado? ----------
   Valores extraídos do post-1896.css (39008aa / 5c02115 / 4085658 / 0a701ab) */

.porque { max-width: 1200px; margin: 0 auto; padding: var(--espaco-secao) var(--espaco-lateral); text-align: center; }

.porque__lista {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
}

/* ⚠️ `border-radius` NÃO existe no CSS do WordPress — conferido nos 4 cards, no
   contêiner da seção e no HTML inteiro; o padrão do Elementor pra contêiner é
   `--border-radius:0`. Mas o Felipe vê arredondado no site dele, então vale o
   que ele vê. 10px não é chute: é o raio que o resto do site já usa (card de
   imóvel, painel de filtros do hero, seção Alugue/Compre/Anuncie). */
.porque__card {
	flex: 1 1 0;
	max-width: 25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 15px;
	background: var(--cor-primaria);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform .3s;
}
.porque__card:hover { transform: scale(1.07); }

/* O ícone é `view-framed` + `shape-circle` no Elementor: círculo vazado com
   borda de 3px, não o glifo solto que eu tinha feito. A borda de 3px é o
   padrão do Elementor (`.elementor-view-framed .elementor-icon`); a cor
   #FF7B00 e o tamanho 45px/padding 18px vêm do post-1896.css. */
.porque__icone {
	display: inline-block;
	padding: 18px;
	line-height: 0;
	border: 3px solid #FF7B00;
	border-radius: 50%;
}
.porque__icone svg { width: 45px; height: 45px; fill: #FF7B00; }

.porque__card-titulo {
	font-family: var(--fonte-titulo);
	font-size: 20px;
	font-weight: 500;
	line-height: 18px;
	color: #EDEDED;
	margin: 10px 0 8px;
}

/* Cinza, não branco — é o que faz o título sobressair sobre a descrição.
   Valores do post-1896.css (icon-box b5ac0c9). */
.porque__card-desc {
	font-family: var(--fonte-titulo);
	font-size: 15px;
	font-weight: 400;
	line-height: 16px;
	color: #B8B8B8;
	margin: 0;
}

@media (max-width: 768px) {
	.porque__lista { flex-wrap: wrap; gap: 0; }
	.porque__card { flex: 1 1 45%; padding: 40px 15px; margin-bottom: 10px; }
	.porque__card-titulo { font-size: 14px; }
	.porque__card-desc { font-size: 12px; }
}
@media (max-width: 480px) {
	.porque__card { flex: 1 1 100%; }
}