/* Tripolone — componentes reusados: busca, card de imóvel, CTAs, favoritos, chips. */

/* ---------- Busca ---------- */
.busca-imoveis {
	margin-top: 1.6rem;
	padding: 1.1rem;
	border-radius: var(--raio);
	background: var(--branco);
	box-shadow: var(--sombra);
}

.busca-imoveis__abas { display: flex; gap: .4rem; margin-bottom: 1rem; }

.busca-imoveis__aba {
	padding: .45rem 1.15rem;
	border-radius: 8px;
	background: var(--menta-50);
	font-size: .78rem;
	font-weight: 600;
	color: var(--texto-medio);
	cursor: pointer;
	transition: background var(--rapido), color var(--rapido);
}

.busca-imoveis__aba input { position: absolute; opacity: 0; pointer-events: none; }
.busca-imoveis__aba:hover { background: var(--menta-100); }
.busca-imoveis__aba:has(input:checked) { background: var(--verde-900); color: var(--branco); }
.busca-imoveis__aba:has(input:focus-visible) { outline: 2px solid var(--verde-600); outline-offset: 2px; }




.busca-imoveis__campos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	align-items: end;
}

.busca-imoveis__campo { display: flex; flex-direction: column; gap: .25rem; margin: 0; }

.busca-imoveis__campo label { font-size: calc(.68rem + 3px); font-weight: 600; color: var(--texto-suave); }

.busca-imoveis__campo input,
.busca-imoveis__campo select {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--borda);
	border-radius: 8px;
	background: var(--branco);
	color: var(--texto);
	font-family: var(--sans);
	font-size: .85rem;
}

.busca-imoveis__campo input:focus-visible,
.busca-imoveis__campo select:focus-visible { outline: 2px solid var(--verde-600); outline-offset: 1px; }

.busca-imoveis__botao {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .68rem 1.6rem;
	border: 0;
	border-radius: 8px;
	background: var(--ouro-metal);
	color: var(--ouro-texto);
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(92, 61, 20, .12);
	transition: box-shadow var(--rapido), transform var(--rapido) var(--ease);
}

.busca-imoveis__botao:hover { box-shadow: 0 8px 18px rgba(92, 61, 20, .22); transform: translateY(-1px); }
.busca-imoveis__botao { justify-content: center; align-self: end; min-height: 40px; }

/* ---------- Card de imóvel (estrutura Horizon) ---------- */
.imoveis { padding-block: var(--espaco); background: var(--papel); }

.imoveis__grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.6rem;
}

.imoveis__grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.imovel-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Fio dourado no lugar do cinza: é o detalhe que dá o ar de catálogo impresso. */
	border: 1px solid rgba(184, 134, 58, .32);
	border-radius: var(--raio);
	background: var(--branco);
	overflow: hidden;
	transition: transform var(--suave) var(--ease), border-color var(--suave), box-shadow var(--suave) var(--ease);
}

.imovel-card:hover { transform: translateY(-4px); border-color: var(--dourado-titulo); box-shadow: var(--sombra); }

.imovel-card__midia { position: relative; display: block; overflow: hidden; }

.imovel-card__midia img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .7s var(--ease);
}

.imovel-card:hover .imovel-card__midia img { transform: scale(1.05); }

.imovel-card__vazio {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	background: var(--menta-100);
	color: var(--texto-suave);
	font-size: .78rem;
}

.imovel-card__selo,
.imovel-card__tempo {
	position: absolute;
	inset-inline-start: .85rem;
	padding: .3rem .7rem;
	border-radius: 6px;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.3;
}

.imovel-card__selo { inset-block-end: .85rem; background: var(--pistache); color: var(--verde-900); }
/* O selo de data saiu da vitrine: ruído sobre a foto, sem peso na decisão. */
.imovel-card__tempo { display: none; }

.imovel-card__corpo { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.25rem 1.3rem; }

.imovel-card__cabeca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .9rem;
	align-items: start;
}

.imovel-card__titulo { font-size: .96rem; font-weight: 600; line-height: 1.35; }
.imovel-card__titulo a:hover { color: var(--dourado); }

.imovel-card__preco {
	font-size: .98rem;
	font-weight: 700;
	color: var(--verde-900);
	white-space: nowrap;
	text-align: end;
}

.imovel-card__periodo { display: block; font-size: .68rem; font-weight: 400; color: var(--texto-suave); }

.imovel-card__local { margin: .45rem 0 0; font-size: .8rem; color: var(--texto-suave); }

.imovel-card__ficha {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.1rem;
	margin: 1rem 0 0;
	padding: .95rem 0 0;
	border-top: 1px solid var(--borda);
	list-style: none;
	font-size: .76rem;
	color: var(--texto-medio);
}

.imovel-card__ficha li { display: flex; align-items: center; gap: .35rem; }
.imovel-card__ficha svg { color: var(--dourado); }

.aviso-vazio {
	grid-column: 1 / -1;
	padding: 3.5rem 2rem;
	border: 1px dashed var(--menta-200);
	border-radius: var(--raio);
	background: var(--branco);
	text-align: center;
	color: var(--texto-suave);
}

/* ==========  Chamadas de ação  ========== */

.faixa-cta { padding-block: 0 var(--espaco); background: var(--branco); }

.faixa-cta__caixa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.6rem clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
	border: 1px solid var(--borda);
	border-inline-start: 3px solid var(--dourado);
	border-radius: var(--raio);
	background: var(--menta-50);
}

.faixa-cta h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .2rem; }
.faixa-cta p { margin: 0; font-size: .87rem; color: var(--texto-medio); }
.faixa-cta .btn { white-space: nowrap; }

/* Bloco "conte o que você procura" */
.procura { padding-block: var(--espaco); background: var(--menta-100); }

.procura__caixa {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.procura__form {
	display: grid;
	gap: .9rem;
	padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
	border-radius: var(--raio);
	background: var(--branco);
	box-shadow: var(--sombra);
}

.procura__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }

.procura__campo { display: flex; flex-direction: column; gap: .3rem; margin: 0; }

.procura__campo label { font-size: .7rem; font-weight: 600; color: var(--texto-suave); }

.procura__campo input,
.procura__campo select,
.procura__campo textarea {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--borda);
	border-radius: 8px;
	background: var(--branco);
	color: var(--texto);
	font-family: var(--sans);
	font-size: .88rem;
	resize: vertical;
}

.procura__campo input:focus-visible,
.procura__campo select:focus-visible,
.procura__campo textarea:focus-visible { outline: 2px solid var(--verde-600); outline-offset: 1px; }

.procura__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.procura__enviar { width: 100%; justify-content: center; margin-top: .2rem; }

.procura__aviso { margin: 0; font-size: .72rem; color: var(--texto-suave); text-align: center; }

.procura__ok {
	grid-column: 1 / -1;
	padding: clamp(2rem, 1.5rem + 2vw, 3rem);
	border: 1px solid var(--menta-200);
	border-radius: var(--raio);
	background: var(--papel);
	text-align: center;
}

.procura__ok h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); margin-bottom: .6rem; }
.procura__ok p { max-width: 52ch; margin: 0 auto 1.5rem; color: var(--texto-medio); }

/* Barra fixa da página do imóvel, no celular */
.barra-mobile { display: none; }

@media (max-width: 900px) {
	.procura__caixa { grid-template-columns: 1fr; }

	.barra-mobile {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 55;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .75rem 1rem;
		background: var(--branco);
		border-top: 1px solid var(--borda);
		box-shadow: 0 -4px 18px rgba(15, 61, 46, .1);
	}

	.barra-mobile__preco { font-size: 1.1rem; font-weight: 700; color: var(--dourado); }
	.barra-mobile .btn { padding-block: .7rem; }

	/* Só a ficha do imóvel tem barra fixa no rodapé. */
	.single-imovel .zap-fixo { inset-block-end: calc(5.2rem + env(safe-area-inset-bottom)); }

	body.single-imovel { padding-bottom: 4.5rem; }
}

@media (max-width: 620px) {
	.faixa-cta__caixa { flex-direction: column; align-items: start; }
	.faixa-cta .btn { width: 100%; justify-content: center; }
	.procura__linha { grid-template-columns: 1fr; }
}

/* ==========  Favoritos  ========== */


.imovel-card__salvar {
	position: absolute;
	inset-block-start: .8rem;
	inset-inline-end: .8rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--texto-suave);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 61, 46, .14);
	transition: background var(--rapido), color var(--rapido), transform var(--rapido) var(--ease);
}

.imovel-card__salvar svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Onde existe mouse, o coração só aparece na passagem. No toque ele fica sempre
   visível, senão o visitante de celular perde a função. */
@media (hover: hover) {
	.imovel-card__salvar { opacity: 0; transition: opacity var(--rapido), transform var(--rapido) var(--ease), color var(--rapido); }
	.imovel-card:hover .imovel-card__salvar,
	.imovel-card__salvar:focus-visible,
	.imovel-card__salvar.is-salvo { opacity: 1; }
}
.imovel-card__salvar:hover { transform: scale(1.1); color: var(--dourado); }
.imovel-card__salvar.is-salvo { color: #c0392b; }
.imovel-card__salvar.is-salvo svg { fill: currentColor; stroke: currentColor; }
.imovel-card__salvar.pulsa { animation: bate .4s var(--ease); }

@keyframes bate { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.32); } }

.imovel-card__tempo { margin: 0 0 .7rem; font-size: .72rem; color: var(--texto-suave); }

.topo__salvos {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--texto-medio);
	transition: background var(--rapido), color var(--rapido);
}

.topo__salvos:hover { background: var(--menta-100); color: var(--verde-900); }

.topo__badge {
	position: absolute;
	inset-block-start: -1px;
	inset-inline-end: -3px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--dourado);
	color: var(--branco);
	font-size: .62rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* ==========  Busca: chips e ordenação  ========== */

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.chips__titulo { font-size: .76rem; color: var(--texto-suave); }

.chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem;
	border: 1px solid var(--menta-200);
	border-radius: 999px;
	background: var(--branco);
	font-size: .78rem;
	transition: border-color var(--rapido), background var(--rapido);
}

.chip span:first-child { color: var(--texto-suave); }
.chip em { font-style: normal; color: var(--texto-suave); }
.chip:hover { border-color: var(--verde-900); background: var(--menta-50); }
.chip--limpar { border-style: dashed; color: var(--texto-medio); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.barra-lista { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }

.ordenar { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--texto-suave); }

.ordenar select {
	padding: .5rem .7rem;
	border: 1px solid var(--borda);
	border-radius: 8px;
	background: var(--branco);
	color: var(--texto);
	font-family: var(--sans);
	font-size: .82rem;
}

@media (max-width: 1024px) {
	.busca-imoveis { margin-inline-end: 0; }
	.busca-imoveis__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.busca-imoveis__botao { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.busca-imoveis__campos { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	.imoveis__grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.imoveis__grade--tres { grid-template-columns: 1fr; }
}

/* ==========  Busca personalizada em painel claro em todas as páginas  ========== */

.procura { padding-block: var(--espaco); background: transparent; }

.procura__caixa {
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: 0;
	align-items: stretch;
	border: 1px solid rgba(220, 180, 95, .55);
	border-radius: calc(var(--raio) + 6px);
	background: var(--branco);
	box-shadow: 0 18px 42px rgba(36, 59, 17, .08);
	overflow: hidden;
}

/* Lado esquerdo no creme da marca, com o monograma como marca d'água. */
.procura__texto {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 1.5rem + 3vw, 3.6rem);
	background: var(--papel);
	color: var(--verde-900);
	overflow: hidden;
}

/* Monograma da marca em marca d'água: preenche o vazio sem disputar com o texto. */
.procura__texto::after {
	content: "";
	position: absolute;
	inset-inline-end: -2.5rem;
	inset-block-end: -2rem;
	width: 190px;
	height: 228px;
	background: url("../assets/monograma-tripolone.png") no-repeat center / contain;
	opacity: .1;
	pointer-events: none;
}

.procura__texto > * { position: relative; z-index: 1; }

.procura__texto .chapeu { color: var(--dourado); }

.procura__texto .secao__titulo {
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);
	color: var(--verde-900);
}

.procura__texto .secao__apoio { color: var(--texto-medio); max-width: 34ch; }

.procura__form {
	padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.procura__form .procura__campo label { color: var(--texto-medio); }

.procura__form .procura__campo input,
.procura__form .procura__campo select,
.procura__form .procura__campo textarea {
	background: var(--branco);
	border-color: #d3d6c9;
	color: var(--texto);
}

.procura__form .procura__aviso { color: var(--texto-medio); }

.procura__enviar {
	background: var(--ouro-metal);
	color: var(--ouro-texto);
}

.procura__enviar:hover { color: var(--ouro-texto); }

.procura__ok {
	grid-column: 1 / -1;
	border: 0;
	background: var(--menta-50);
}

@media (max-width: 900px) {
	.procura__caixa { grid-template-columns: 1fr; }
	.procura__texto::after { width: 140px; height: 168px; }
}