/*
 * Componentes ImobiCore.
 *
 * Regra de raio declarada e mantida: inputs e chips 8px, botões 16px,
 * cards 20px, painéis 28px, pills 999px.
 *
 * A assinatura é o chanfro de 30 graus, e ele aparece só em imagem. Ver a seção
 * "A ASSINATURA" mais abaixo antes de aplicá-lo em qualquer outro lugar.
 */

/* --------------------------------------------------------------------------
 * Reset de vazamento do tema pai.
 *
 * Este reset tem duas obrigações opostas: precisa VENCER o tema pai e precisa
 * PERDER de qualquer regra de componente nossa. Só `:where()` não resolve, e
 * essa foi uma armadilha real aqui — envolver tudo em `:where()` zera a
 * especificidade, e aí a regra perde até para o seletor de elemento do pai. O
 * Hello declara `h1, h2, h3, h4, h5, h6 { font-weight: 500 }` com (0,0,1), e
 * durante um tempo isso deixou TODO título do site em 500 em vez dos 800 do
 * contrato, sem nenhum erro aparecer: o CSS estava escrito e simplesmente não
 * valia.
 *
 * A construção correta mantém o escopo dentro de `:where()`, que não conta, e
 * deixa os seletores de elemento contando: `html` (0,0,1) mais `:is(h1…h4)`
 * (0,0,1) somam (0,0,2). Isso vence os (0,0,1) do pai por cálculo, sem depender
 * de ordem de arquivo, e continua perdendo dos (0,1,0) de uma classe nossa.
 * -------------------------------------------------------------------------- */

/* A face de display vale para todo título da página, inclusive o conteúdo
 * institucional: é a voz da marca. Aqui não se mexe em margem, senão o
 * espaçamento do texto de uma página comum desaparece. */
html :where(.imob-escopo) :is(h1, h2, h3, h4) {
	font-family: var(--imob-fonte);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--imob-tinta);
}

/*
 * O reset de caixa é escopado aos nossos blocos. Aplicado no body, ele zeraria
 * a margem dos parágrafos de qualquer página de conteúdo do tema.
 *
 * Mesma correção de especificidade dos títulos, e aqui havia um agravante: o
 * Hello declara a margem do parágrafo pela propriedade LÓGICA
 * `p { margin-block-end: .9rem }`, com (0,0,1). O atalho físico `margin: 0`
 * dentro de `:where()` puro valia (0,0,0) e perdia, então todo parágrafo dentro
 * dos nossos blocos carregava 14,4px de margem que o layout não previa — o
 * preço dentro do card entre eles.
 *
 * `html` mais `:is(...)` levam o reset a (0,0,2): vence o seletor de elemento do
 * pai e continua perdendo de qualquer classe nossa.
 */
html :where(
	.imob-topo, .imob-secao, .imob-card, .imob-busca, .imob-ficha, .imob-contato,
	.imob-cidades, .imob-filtros, .imob-vazio, .imob-galeria, .imob-formulario,
	.imob-barra-contato, .imob-bloco, .imob-paginacao, .imob-contato-bloco,
	.imob-barra-resultado, .imob-specs, .imob-pills
) :is(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
}

html :where(
	.imob-topo, .imob-secao, .imob-card, .imob-busca, .imob-ficha, .imob-contato,
	.imob-cidades, .imob-filtros, .imob-vazio, .imob-galeria, .imob-formulario,
	.imob-barra-contato, .imob-bloco, .imob-paginacao, .imob-contato-bloco,
	.imob-barra-resultado, .imob-specs, .imob-pills
) :is(ul, ol) {
	list-style: none;
}

.imob-escopo {
	font-family: var(--imob-fonte);
	font-size: var(--imob-body);
	line-height: var(--imob-body-lh);
	letter-spacing: 0.01em;
	color: var(--imob-tinta);
	background: var(--imob-bg);
}

.imob-escopo *,
.imob-escopo *::before,
.imob-escopo *::after {
	box-sizing: border-box;
}

/* Foco visível em tudo. Nunca removido, só redesenhado. */
.imob-escopo :focus-visible {
	outline: 3px solid var(--imob-acao-hover);
	outline-offset: 2px;
	border-radius: var(--imob-radius-sm);
}

.imob-pular-para {
	position: absolute;
	left: -9999px;
}

.imob-pular-para:focus {
	left: var(--imob-gutter);
	top: var(--imob-space-md);
	z-index: 60;
	padding: var(--imob-space-12) var(--imob-space-md);
	background: var(--imob-bg);
	border-radius: var(--imob-radius-sm);
	box-shadow: var(--imob-shadow-panel);
}

/* --------------------------------------------------------------------------
 * A ASSINATURA: o chanfro.
 *
 * A lateral de um hexágono regular sobe a 30 graus da horizontal, e este corte
 * reproduz exatamente essa inclinação. Os dois tokens andam juntos: 32px de
 * altura por 55px de largura, porque tan(30) = 0,577.
 *
 * Aparece só em imagem. Selo, pill, botão e campo seguem com a escala de raio.
 * Essa restrição é o que faz a assinatura ser assinatura em vez de maneirismo.
 * -------------------------------------------------------------------------- */

.imob-card__figura,
.imob-galeria__principal > img,
.imob-galeria__principal > .imob-placeholder {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--imob-chanfro-y)),
		calc(100% - var(--imob-chanfro-x)) 100%,
		0 100%
	);
}

/*
 * O card arredonda por fora (overflow hidden com raio de 20px), então os cantos
 * retos que o clip-path cria no topo da foto são aparados por ele. O corte de
 * baixo fica no interior do card e revela a superfície: a leitura é de peça
 * encaixada, que é o que o hexágono da marca quer dizer.
 */

/* --------------------------------------------------------------------------
 * Container único, usado por todas as seções para o alinhamento não deslocar.
 * -------------------------------------------------------------------------- */

.imob-container {
	width: 100%;
	max-width: var(--imob-container);
	margin-inline: auto;
	padding-inline: var(--imob-gutter);
}

.imob-secao {
	padding-block: var(--imob-space-48);
}

.imob-secao__cabecalho {
	margin-bottom: var(--imob-space-lg);
}

.imob-secao__titulo {
	font-size: var(--imob-h2);
	line-height: var(--imob-h2-lh);
}

.imob-secao__chamada {
	margin-top: var(--imob-space-sm);
	color: var(--imob-apoio);
	max-width: var(--imob-medida);
}

.imob-secao__acao {
	margin-top: var(--imob-space-lg);
}

/* --------------------------------------------------------------------------
 * Botões. 56px de altura mínima em todo controle.
 * -------------------------------------------------------------------------- */

.imob-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--imob-space-sm);
	min-height: 56px;
	padding: 0 var(--imob-space-24);
	border: 0;
	border-radius: var(--imob-radius-md);
	background: var(--imob-acao);
	color: #FFFFFF;
	font-family: var(--imob-fonte);
	font-size: var(--imob-body);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--imob-transicao-rapida), transform var(--imob-transicao-rapida), box-shadow var(--imob-transicao);
	box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.12);
}

.imob-botao:hover {
	background: var(--imob-acao-hover);
	box-shadow: inset 0 -1px 0 var(--imob-azul-claro);
	color: #FFFFFF;
}

.imob-botao:active {
	transform: scale(0.97);
}

.imob-botao--secundario {
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
	box-shadow: none;
}

.imob-botao--secundario:hover {
	background: var(--imob-azul-claro);
	color: var(--imob-acao-hover);
	box-shadow: none;
}

.imob-botao--whatsapp {
	background: var(--imob-verde);
}

.imob-botao--whatsapp:hover {
	background: var(--imob-verde-hover);
	box-shadow: inset 0 -1px 0 var(--imob-verde);
}

.imob-botao--largo {
	width: 100%;
}

.imob-icone {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 * Topo do arquivo. A foto sangra na largura toda e o painel de busca
 * sobrepõe a borda inferior dela: é aqui que o variance 0.45 é gasto.
 * -------------------------------------------------------------------------- */

/*
 * Fundo branco, sem o degradê azul que havia aqui.
 *
 * O degradê saía do azul pálido no topo, que é a mesma cor com que o painel de
 * busca começa. Painel claro sobre fundo claro da mesma família: o canto de cima
 * e o começo do corte de 30 graus sumiam contra o fundo, e a geometria que é a
 * assinatura da marca deixava de ser lida justamente na peça onde ela aparece.
 *
 * No branco o painel é a única cor daquela área, que é o que ele deve ser.
 */
.imob-topo {
	position: relative;
	padding-top: var(--imob-space-48);
	background: var(--imob-bg);
}

.imob-topo__conteudo {
	max-width: 46rem;
}

.imob-topo__titulo {
	font-size: var(--imob-hero);
	line-height: var(--imob-hero-lh);
}

.imob-topo__chamada {
	margin-top: var(--imob-space-md);
	font-size: var(--imob-body-lg);
	color: var(--imob-apoio);
	max-width: 34rem;
}

/*
 * Espaço normal entre a chamada e o painel.
 *
 * A margem era negativa para o painel montar sobre o bloco decorativo do topo.
 * Sem esse bloco, ela passou a puxar a busca por cima da própria chamada — o
 * rótulo "Encontre seu próximo endereço" ficava atravessando o texto acima.
 */
.imob-topo__painel {
	position: relative;
	margin-top: var(--imob-space-lg);
	z-index: 2;
}

@media (max-width: 900px) {
	.imob-topo__painel {
		margin-top: var(--imob-space-md);
	}
}

.imob-campo {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-xs);
	min-width: 0;
}

.imob-campo__rotulo {
	font-size: var(--imob-caption);
	font-weight: 700;
	color: var(--imob-apoio);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.imob-campo input,
.imob-campo select {
	min-height: 56px;
	width: 100%;
	padding: 0 var(--imob-space-md);
	font-family: var(--imob-fonte);
	font-size: var(--imob-body);
	color: var(--imob-tinta);
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-sm);
	transition: border-color var(--imob-transicao-rapida), box-shadow var(--imob-transicao-rapida);
	appearance: none;
}

.imob-campo select {
	background-image: linear-gradient(45deg, transparent 50%, var(--imob-apoio) 50%), linear-gradient(135deg, var(--imob-apoio) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--imob-space-lg);
}

.imob-campo input::placeholder {
	color: var(--imob-apoio);
}

.imob-campo input:focus,
.imob-campo select:focus {
	outline: none;
	border-color: var(--imob-acao);
	box-shadow: 0 0 0 4px var(--imob-azul-palido);
}

/* --------------------------------------------------------------------------
 * Barra de filtros ativos. Poço afundado, porque é superfície de controle
 * e não conteúdo: elevação tem que significar algo.
 * -------------------------------------------------------------------------- */

.imob-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imob-space-12);
	padding: var(--imob-space-md);
	background: var(--imob-sunken);
	border-radius: var(--imob-radius-md);
	margin-bottom: var(--imob-space-24);
}

.imob-filtros__rotulo {
	font-size: var(--imob-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--imob-apoio);
}

.imob-filtro-ativo {
	display: inline-flex;
	align-items: center;
	gap: var(--imob-space-sm);
	min-height: 40px;
	padding: 0 var(--imob-space-12);
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
	border-radius: var(--imob-radius-pill);
	font-size: var(--imob-small);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--imob-transicao-rapida);
}

.imob-filtro-ativo:hover {
	background: var(--imob-azul-claro);
	color: var(--imob-acao-hover);
}

.imob-filtros__limpar {
	margin-left: auto;
	color: var(--imob-acao-hover);
	font-weight: 700;
	font-size: var(--imob-small);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.imob-resultado-conta {
	font-size: var(--imob-small);
	color: var(--imob-apoio);
}

.imob-ordenar {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	margin-left: auto;
}

.imob-ordenar select {
	min-height: 48px;
	padding: 0 var(--imob-space-lg) 0 var(--imob-space-12);
	font-family: var(--imob-fonte);
	font-size: var(--imob-small);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-sm);
	background: var(--imob-bg);
	color: var(--imob-tinta);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--imob-apoio) 50%), linear-gradient(135deg, var(--imob-apoio) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.imob-barra-resultado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imob-space-md);
	margin-bottom: var(--imob-space-24);
}

/* --------------------------------------------------------------------------
 * Grade e card.
 * -------------------------------------------------------------------------- */

.imob-grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--imob-space-lg);
}

@media (max-width: 1024px) {
	.imob-grade {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.imob-grade {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.imob-card {
	display: flex;
	flex-direction: column;
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-lg);
	overflow: hidden;
	/* Sombra em repouso, e não só no hover: sem ela o card fica achatado contra
	 * o fundo e a grade lê como tabela em vez de coleção de peças. */
	box-shadow: var(--imob-shadow-card);
	transition: transform var(--imob-transicao), box-shadow var(--imob-transicao);
}

.imob-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--imob-shadow-card-hover);
}

/*
 * O destaque não desenha borda.
 *
 * A borda de 3px na cor de ação era o tratamento anterior, e ela errava duas
 * vezes. Na seção "Imóveis em destaque" todo card é destaque, então a moldura
 * marcava 100% dos itens e não informava nada — só gritava. E onde a distinção
 * existe de verdade, no arquivo, 3px na cor de ação é o peso que reservamos
 * para o que é clicável, então a moldura competia com os botões.
 *
 * Quem carrega o sinal é o selo, que é texto: funciona para quem não distingue
 * cor e não deforma a geometria do card. Aqui fica só o realce do hover.
 */
.imob-card--destaque:hover {
	box-shadow: var(--imob-shadow-acao);
}

.imob-card__figura {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--imob-sunken);
	overflow: hidden;
}

.imob-card__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--imob-transicao);
}

.imob-card:hover .imob-card__figura img {
	transform: scale(1.03);
}

.imob-card__selos {
	position: absolute;
	inset: var(--imob-space-12) var(--imob-space-12) auto var(--imob-space-12);
	display: flex;
	flex-wrap: wrap;
	gap: var(--imob-space-sm);
	pointer-events: none;
}

.imob-card__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-12);
	padding: var(--imob-space-md);
	flex: 1 1 auto;
}

.imob-card__titulo {
	font-size: var(--imob-h4);
	line-height: var(--imob-h4-lh);
}

.imob-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.imob-card__titulo a:hover {
	color: var(--imob-acao-hover);
}

.imob-card__local {
	display: flex;
	align-items: center;
	gap: var(--imob-space-xs);
	font-size: var(--imob-small);
	color: var(--imob-apoio);
}

/* O preço é o maior elemento do card, por regra do design. */
.imob-preco {
	font-family: var(--imob-fonte);
	font-size: var(--imob-preco);
	font-weight: 800;
	line-height: 1;
	color: var(--imob-tinta);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.imob-preco__periodo {
	font-family: var(--imob-fonte);
	font-size: var(--imob-small);
	font-weight: 400;
	color: var(--imob-apoio);
	letter-spacing: 0;
}

.imob-preco--grande {
	font-size: var(--imob-preco-lg);
}

.imob-preco--consulte {
	font-size: var(--imob-h3);
	color: var(--imob-apoio);
}

/* Faixa de especificações: dados em mono, separados por fio, sem virar cards. */
.imob-specs {
	display: flex;
	flex-wrap: wrap;
	margin-top: auto;
	border-top: 1px solid var(--imob-outline);
	padding-top: var(--imob-space-12);
}

.imob-specs__item {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	padding-right: var(--imob-space-12);
	margin-right: var(--imob-space-12);
	border-right: 1px solid var(--imob-outline);
	color: var(--imob-apoio);
	font-size: var(--imob-caption);
}

.imob-specs__item:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.imob-specs__valor {
	font-family: var(--imob-fonte);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: var(--imob-small);
	color: var(--imob-tinta);
}

/* --------------------------------------------------------------------------
 * Selos. Cor mais ícone mais palavra, sempre os três.
 * -------------------------------------------------------------------------- */

.imob-selo {
	display: inline-flex;
	align-items: center;
	gap: var(--imob-space-xs);
	padding: 6px var(--imob-space-12);
	border-radius: var(--imob-radius-pill);
	font-size: var(--imob-caption);
	font-weight: 700;
	line-height: 1.2;
	background: var(--imob-bg);
	color: var(--imob-tinta);
}

.imob-selo--leaf {
	background: var(--imob-verde-bg);
	color: var(--imob-verde-texto);
}

.imob-selo--coral {
	background: var(--imob-alerta-bg);
	color: var(--imob-alerta-texto);
}

.imob-selo--sun {
	background: var(--imob-sun);
	color: var(--imob-sun-texto);
}

.imob-selo--finalidade {
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
}

/* Pills de característica: poço afundado, texto secundário. */
.imob-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--imob-space-sm);
}

.imob-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--imob-space-xs);
	padding: 8px var(--imob-space-12);
	background: var(--imob-sunken);
	color: var(--imob-apoio);
	border-radius: var(--imob-radius-pill);
	font-size: var(--imob-caption);
	text-decoration: none;
}

a.imob-pill:hover {
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
}

/* --------------------------------------------------------------------------
 * Placeholder de foto. Gradiente on-palette enquanto não há imagem real,
 * composto como a foto final, nunca um vão vazio.
 * -------------------------------------------------------------------------- */

.imob-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.92);
}

.imob-placeholder__marca {
	display: grid;
	place-items: center;
	gap: var(--imob-space-sm);
	text-align: center;
	font-size: var(--imob-caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.imob-placeholder--1 {
	background: linear-gradient(135deg, var(--imob-azul-claro) 0%, var(--imob-acao) 100%);
}

.imob-placeholder--2 {
	background: linear-gradient(135deg, var(--imob-azul-palido) 0%, var(--imob-azul-claro) 55%, var(--imob-acao) 100%);
}

.imob-placeholder--3 {
	background: linear-gradient(160deg, var(--imob-azul-palido) 0%, var(--imob-azul-claro) 60%, var(--imob-acao) 100%);
}

.imob-placeholder--4 {
	background: linear-gradient(200deg, var(--imob-azul-claro) 0%, var(--imob-acao) 70%, var(--imob-navy-fim) 100%);
}

/* --------------------------------------------------------------------------
 * Estado vazio: painel composto, com saída clara.
 * -------------------------------------------------------------------------- */

.imob-vazio {
	display: grid;
	justify-items: center;
	gap: var(--imob-space-md);
	text-align: center;
	padding: var(--imob-space-xl) var(--imob-space-24);
	background: var(--imob-azul-palido);
	border-radius: var(--imob-radius-xl);
}

.imob-vazio__icone {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--imob-radius-pill);
	background: var(--imob-bg);
	color: var(--imob-acao-hover);
}

.imob-vazio__titulo {
	font-size: var(--imob-h3);
	line-height: var(--imob-h3-lh);
}

.imob-vazio__texto {
	color: var(--imob-apoio);
	max-width: 34rem;
}

/* --------------------------------------------------------------------------
 * Ficha do imóvel. Split assimétrico: galeria larga, contato estreito e fixo.
 * -------------------------------------------------------------------------- */

.imob-ficha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--imob-space-48);
	align-items: start;
	padding-block: var(--imob-space-lg) var(--imob-space-48);
}

@media (max-width: 900px) {
	/*
	 * `minmax(0, 1fr)` e não `1fr`.
	 *
	 * `1fr` equivale a `minmax(auto, 1fr)`, e esse `auto` faz o piso da trilha
	 * ser o min-content do item. A tira de miniaturas da galeria é um flex row de
	 * quatro peças de 104px que não encolhem, então o min-content dela vale
	 * 4×104 + 3×12 = 452px — e `overflow-x: auto` não muda isso, porque a
	 * propriedade de overflow não entra no cálculo de tamanho intrínseco de um
	 * container flex. A trilha ia a 452px numa tela de 390px, a ficha
	 * transbordava, e os dois elementos `fixed` da página (cabeçalho e barra de
	 * contato) passavam a dimensionar contra a largura do documento em vez da
	 * janela, aparecendo cortados. Com o piso em zero a trilha respeita a tela e
	 * a tira volta a rolar dentro do próprio espaço, que é o que ela já pedia.
	 */
	.imob-ficha {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--imob-space-lg);
		padding-bottom: 96px; /* espaço da barra fixa de contato */
	}
}

/*
 * Linha inteira da grade, para a galeria e o painel de preço começarem juntos na
 * fila de baixo. O título fica com a medida de leitura mesmo ocupando a largura
 * toda: linha de 1200px em corpo de display é longa demais para o olho voltar.
 */
.imob-ficha__cabecalho {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-12);
	max-width: var(--imob-medida-centro);
}

.imob-ficha__selos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--imob-space-sm);
}

.imob-ficha__titulo {
	font-size: var(--imob-h1);
	line-height: var(--imob-h1-lh);
}

.imob-ficha__local {
	display: flex;
	align-items: center;
	gap: var(--imob-space-xs);
	color: var(--imob-apoio);
	font-size: var(--imob-body);
}

.imob-ficha__codigo {
	font-family: var(--imob-fonte);
	font-variant-numeric: tabular-nums;
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
}

/* Galeria */
.imob-galeria__principal {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--imob-radius-lg);
	overflow: hidden;
	background: var(--imob-sunken);
}

.imob-galeria__principal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.imob-galeria__nav {
	position: absolute;
	inset: auto var(--imob-space-md) var(--imob-space-md) auto;
	display: flex;
	gap: var(--imob-space-sm);
}

.imob-galeria__botao {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: var(--imob-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--imob-tinta);
	cursor: pointer;
	box-shadow: var(--imob-shadow-card);
	transition: background var(--imob-transicao-rapida);
}

.imob-galeria__botao:hover {
	background: #FFFFFF;
}

.imob-galeria__tiras {
	display: flex;
	gap: var(--imob-space-12);
	margin-top: var(--imob-space-12);
	overflow-x: auto;
	padding-bottom: var(--imob-space-xs);
	scrollbar-width: thin;
}

.imob-galeria__tira {
	flex: 0 0 auto;
	width: 104px;
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: var(--imob-radius-sm);
	overflow: hidden;
	padding: 0;
	background: var(--imob-sunken);
	cursor: pointer;
	transition: border-color var(--imob-transicao-rapida);
}

.imob-galeria__tira img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.imob-galeria__tira[aria-current='true'] {
	border-color: var(--imob-acao);
}

/* Blocos de conteúdo da ficha */
.imob-bloco {
	margin-top: var(--imob-space-lg);
	padding-top: var(--imob-space-lg);
	border-top: 1px solid var(--imob-outline);
}

.imob-bloco__titulo {
	font-size: var(--imob-h3);
	line-height: var(--imob-h3-lh);
	margin-bottom: var(--imob-space-md);
}

/* Descrição: o Reading Passage do sistema de origem, quase intacto. */
.imob-descricao {
	font-size: 1.1875rem;
	line-height: 1.68;
	max-width: var(--imob-medida);
	color: var(--imob-tinta);
}

.imob-descricao p + p {
	margin-top: var(--imob-space-md);
}

/* Tabela de dados: fios, não uma grade de cartõezinhos. */
.imob-dados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0 var(--imob-space-lg);
}

.imob-dados__linha {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--imob-space-md);
	padding: var(--imob-space-12) 0;
	border-bottom: 1px solid var(--imob-outline);
}

.imob-dados__rotulo {
	color: var(--imob-apoio);
	font-size: var(--imob-small);
}

.imob-dados__valor {
	font-family: var(--imob-fonte);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--imob-tinta);
	text-align: right;
}

/* Painel de contato */
.imob-contato {
	position: sticky;
	top: var(--imob-space-24);
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-md);
	padding: var(--imob-space-24);
	background: var(--imob-bg);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-xl);
	box-shadow: var(--imob-shadow-card);
}

.imob-contato__preco {
	padding-bottom: var(--imob-space-md);
	border-bottom: 1px solid var(--imob-outline);
}

.imob-contato__extra {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-xs);
	font-size: var(--imob-small);
	color: var(--imob-apoio);
}

.imob-corretor {
	display: flex;
	align-items: center;
	gap: var(--imob-space-12);
	padding-top: var(--imob-space-md);
	border-top: 1px solid var(--imob-outline);
}

/* Avatar herdado do sistema de origem: anel branco interno, anel sky externo. */
.imob-avatar {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: var(--imob-radius-pill);
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--imob-acao);
	font-family: var(--imob-fonte);
	font-weight: 700;
	font-size: var(--imob-body);
}

.imob-corretor__nome {
	font-weight: 700;
}

.imob-corretor__papel {
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
}

/* Barra fixa de contato no mobile, substituindo o painel lateral. */
.imob-barra-contato {
	display: none;
}

@media (max-width: 900px) {
	.imob-barra-contato {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: var(--imob-space-md);
		padding: var(--imob-space-12) var(--imob-gutter);
		background: var(--imob-bg);
		border-top: 1px solid var(--imob-outline);
		box-shadow: var(--imob-shadow-panel);
	}

	.imob-barra-contato .imob-preco {
		font-size: 1.5rem;
	}

	.imob-barra-contato .imob-botao {
		margin-left: auto;
	}
}

/* Bloco de localização aproximada */
.imob-mapa {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--imob-radius-lg);
	overflow: hidden;
	background: var(--imob-sunken);
	display: grid;
	place-items: center;
}

.imob-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.imob-mapa__aviso {
	display: grid;
	place-items: center;
	gap: var(--imob-space-sm);
	text-align: center;
	padding: var(--imob-space-24);
	color: var(--imob-apoio);
	font-size: var(--imob-small);
	max-width: 28rem;
}

/* --------------------------------------------------------------------------
 * Formulário de contato
 * -------------------------------------------------------------------------- */

.imob-formulario {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-md);
	max-width: 46rem;
}

.imob-formulario__linha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--imob-space-md);
}

.imob-campo textarea {
	width: 100%;
	min-height: 120px;
	padding: var(--imob-space-12) var(--imob-space-md);
	font-family: var(--imob-fonte);
	font-size: var(--imob-body);
	line-height: var(--imob-body-lh);
	color: var(--imob-tinta);
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-sm);
	resize: vertical;
	transition: border-color var(--imob-transicao-rapida), box-shadow var(--imob-transicao-rapida);
}

.imob-campo textarea::placeholder {
	color: var(--imob-apoio);
}

.imob-campo textarea:focus {
	outline: none;
	border-color: var(--imob-acao);
	box-shadow: 0 0 0 4px var(--imob-azul-palido);
}

/* Erro do campo: coral gentil, nunca vermelho duro, e nunca bloqueando o campo. */
.imob-campo input[aria-invalid='true'],
.imob-campo textarea[aria-invalid='true'] {
	border-color: var(--imob-alerta-texto);
	background: var(--imob-alerta-bg);
}

.imob-erro {
	display: block;
	font-size: var(--imob-small);
	color: var(--imob-alerta-texto);
}

.imob-aviso {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	padding: var(--imob-space-12) var(--imob-space-md);
	border-radius: var(--imob-radius-md);
	margin-bottom: var(--imob-space-md);
	font-size: var(--imob-small);
	max-width: 46rem;
}

.imob-aviso--leaf {
	background: var(--imob-verde-bg);
	color: var(--imob-verde-texto);
}

.imob-aviso--coral {
	background: var(--imob-alerta-bg);
	color: var(--imob-alerta-texto);
}

/* --------------------------------------------------------------------------
 * Paginação
 * -------------------------------------------------------------------------- */

.imob-paginacao {
	display: flex;
	justify-content: center;
	gap: var(--imob-space-sm);
	margin-top: var(--imob-space-48);
}

.imob-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 56px;
	padding: 0 var(--imob-space-12);
	border-radius: var(--imob-radius-md);
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	color: var(--imob-tinta);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--imob-transicao-rapida);
}

.imob-paginacao .page-numbers:hover {
	background: var(--imob-azul-palido);
	color: var(--imob-acao-hover);
}

.imob-paginacao .page-numbers.current {
	background: var(--imob-acao);
	border-color: var(--imob-acao);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
 * Bloco de contato do shortcode
 * -------------------------------------------------------------------------- */

.imob-contato-bloco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imob-space-md);
}

.imob-contato-bloco__link {
	display: inline-flex;
	align-items: center;
	gap: var(--imob-space-sm);
	min-height: 56px;
	color: var(--imob-acao-hover);
	font-weight: 700;
	text-decoration: none;
}

.imob-contato-bloco__link:hover {
	text-decoration: underline;
}

/* Utilitário de leitor de tela */
.imob-oculto-visual {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}