/*
 * ImobiCore: moldura da página. Cabeçalho fixo, herói de largura total, barra
 * de busca, rodapé e movimento.
 *
 * As durações e curvas de movimento saem dos presets da skill ui-ux-pro-max,
 * traduzidas para CSS. Nenhuma biblioteca externa, e só transform e opacity,
 * que são as duas propriedades que o navegador anima sem recalcular layout.
 */

/* ==========================================================================
 * SAIR DA JAULA DE LARGURA DO TEMA PAI
 *
 * O Hello Elementor limita `.site-main` a 1140px com 10px de padding, através de
 * `body:not([class*=elementor-page-]) .site-main`. Enquanto isso valia, nenhuma
 * seção podia sangrar a largura toda, e o nosso container de 1280px ficava mais
 * largo que o pai: a barra de busca vazava para fora da tela e levava o botão
 * embora.
 *
 * O seletor abaixo tem especificidade (0,2,2) contra os (0,2,1) do tema, então
 * vence sem depender de ordem de carregamento.
 * ========================================================================== */

body.imob-escopo main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
	overflow-x: clip;
}

body.imob-escopo .page-content {
	max-width: none;
	width: 100%;
}

/*
 * O `.page-content` carrega 64px de padding embaixo. Quando a última coisa da
 * página é uma seção nossa, esse padding é respiro duplicado — a seção já tem o
 * dela — e, pior, abre uma faixa branca entre o fundo tingido da seção e o navy
 * do rodapé. Era o vão que aparecia embaixo de "Onde temos imóveis".
 *
 * Não dá para zerar sem condição: em /sobre/ e /contato/ o último bloco termina
 * com padding zero, então ali esses 64px são o único respiro antes do rodapé, e
 * removê-los colaria o texto no rodapé. O `:has()` separa exatamente os dois
 * casos, perguntando se quem fecha a página é uma seção que cuida do próprio
 * espaçamento.
 */
body.imob-escopo .page-content:has( > .imob-secao:last-child ) {
	padding-bottom: 0;
}

/* ==========================================================================
 * BLINDAGEM CONTRA O ESTILO DE LINK DO TEMA PAI
 *
 * O Hello declara `a { color: #c36 }` e `.page-content a { text-decoration:
 * underline }`. Como os nossos blocos entram na home por shortcode, eles vivem
 * dentro de `.page-content`: qualquer link nosso sem cor declarada herda o
 * rosa do tema, e todo link nosso ganha sublinhado de prosa. Foi essa a origem
 * dos "links vermelhos", e era ela que ainda sublinhava o controle segmentado
 * e os links de cidade.
 *
 * A correção é escopada aos nossos componentes, e não à página inteira, porque
 * na prosa institucional o sublinhado é o comportamento correto: link em meio a
 * texto corrido precisa de mais de um sinal além da cor.
 *
 * Especificidade: .imob-escopo + .page-content + :is(classe) + a = (0,3,1),
 * contra os (0,2,1) do tema. Vence por cálculo, não por ordem de arquivo.
 *
 * Sublinhado e cor recebem tratamentos diferentes de propósito. Qualquer
 * seletor que vença os (0,2,1) do `.page-content a` também vence os (0,1,0) de
 * uma classe de componente, então um `color` aqui apagaria as cores que os
 * próprios componentes declaram — o branco do segmento sobre o herói, entre
 * outras. Sublinhado não tem esse conflito: nenhum bloco nosso depende de
 * herdar sublinhado, e quem quer sublinhar no hover declara no hover.
 * ========================================================================== */

.imob-escopo .page-content :is(
	.imob-hero, .imob-segmento, .imob-barra, .imob-card, .imob-grade,
	.imob-cidades, .imob-topo, .imob-contato, .imob-galeria,
	.imob-paginacao, .imob-chips, .imob-secao
) a {
	text-decoration: none;
}

/*
 * A cor, então, só nos links que cairiam no rosa por não terem cor declarada:
 * os sem atributo de classe. O logo do rodapé é um deles, e hoje escapa apenas
 * porque só contém imagem. `:not([class])` acerta exatamente esse conjunto e
 * deixa em paz todo link que tem estilo próprio.
 */
.imob-escopo :is(
	.imob-hero, .imob-rodape, .imob-card, .imob-topo, .imob-secao, .imob-contato
) a:not([class]) {
	color: inherit;
}

/* ==========================================================================
 * CABEÇALHO FIXO
 * ========================================================================== */

.imob-escopo .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--imob-navy-fim);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: background-color var(--imob-transicao-rapida),
		box-shadow var(--imob-transicao-rapida);
}

.imob-escopo .site-header .header-inner {
	width: 100%;
	max-width: var(--imob-container);
	margin-inline: auto;
	padding-inline: var(--imob-gutter);
	display: flex;
	align-items: center;
	gap: var(--imob-space-lg);
	/*
	 * O token é a altura TOTAL do cabeçalho, então o miolo desconta o padding que
	 * o tema pai põe em cima e embaixo. A subtração é explícita para a conta ficar
	 * visível: mudar o token move o cabeçalho inteiro sem mexer aqui.
	 */
	min-height: calc(var(--imob-header-h) - 2 * var(--imob-space-md));
}

/* A barra de admin do WordPress também é fixa; sem isto ela cobriria o menu. */
body.admin-bar.imob-escopo .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.imob-escopo .site-header {
		top: 46px;
	}
}

/* Páginas sem herói recebem o deslocamento da altura do cabeçalho. */
.imob-escopo:not(.imob-tem-hero) {
	padding-top: var(--imob-header-h);
}

/*
 * Sobre o herói o cabeçalho é transparente, e um véu escuro no topo garante que
 * o menu continue legível sobre qualquer parte clara da foto. Ao rolar ele
 * assume o navy da marca, sólido: um fundo translúcido sobre conteúdo branco
 * lava a cor e o cabeçalho deixa de parecer da identidade.
 */
.imob-escopo.imob-tem-hero .site-header {
	background: linear-gradient(180deg, rgba(8, 17, 39, 0.72) 0%, rgba(8, 17, 39, 0) 100%);
	box-shadow: none;
}

.imob-escopo.imob-tem-hero .site-header.imob-rolado {
	background: var(--imob-navy-fim);
	box-shadow: 0 6px 24px rgba(8, 17, 39, 0.35);
}

/*
 * A logo é a versão branca. A neon tem o "Imobi" em navy escuro, que sobre o
 * navy do cabeçalho mede 2,4:1 e some: era isso que fazia a marca "quebrar".
 * A altura é fixa nos dois estados, porque encolher a logo na rolagem move o
 * conteúdo do cabeçalho e chama atenção para o lugar errado.
 */
.imob-escopo .site-header .site-logo img,
.imob-escopo .site-header .custom-logo {
	display: block;
	width: auto;
	height: 38px;
	max-width: none;
}

@media (max-width: 640px) {
	.imob-escopo .site-header .site-logo img,
	.imob-escopo .site-header .custom-logo {
		height: 30px;
	}
}

/* Fallback textual, se não houver logo definida. */
.imob-escopo .site-header .site-title {
	font-family: var(--imob-fonte);
	font-size: var(--imob-h3);
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.02em;
}

.imob-escopo .site-header .site-title a {
	color: #FFFFFF;
	text-decoration: none;
}

/* Navegação em uma linha no desktop. */
.imob-escopo .site-navigation {
	margin-left: auto;
}

.imob-escopo .site-navigation ul.menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--imob-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.imob-escopo .site-navigation ul.menu li {
	margin: 0;
}

/*
 * Azul pálido, não azul claro: medido, o #60A5FA dá 4,07:1 sobre o navy e não
 * passa. O #DBEAFE dá 14,59:1 sobre o navy-fim.
 */
.imob-escopo .site-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--imob-space-md);
	border-radius: var(--imob-radius-sm);
	font-family: var(--imob-fonte);
	font-size: var(--imob-small);
	font-weight: 600;
	color: var(--imob-azul-palido);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--imob-transicao-rapida), color var(--imob-transicao-rapida);
}

.imob-escopo .site-navigation a:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
}

/* Página atual marcada por fundo e peso, nunca por cor sozinha. */
.imob-escopo .site-navigation .current-menu-item > a,
.imob-escopo .site-navigation .current_page_item > a {
	background: var(--imob-acao);
	color: #FFFFFF;
	font-weight: 700;
}

/* Foco visível contra o navy, onde o anel azul escuro desapareceria. */
.imob-escopo .site-header :focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
}

/* Botão do menu no mobile. */
.imob-escopo .site-navigation-toggle-holder {
	margin-left: auto;
}

.imob-escopo .site-navigation-toggle {
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--imob-radius-sm);
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
	cursor: pointer;
}

/*
 * O suspenso abre sobre branco, então não pode herdar a cor pensada para o
 * navy: azul pálido sobre branco fica invisível.
 */
.imob-escopo .site-navigation-dropdown ul.menu {
	display: block;
	padding: var(--imob-space-sm);
	background: #FFFFFF;
	border-bottom: 1px solid var(--imob-outline);
	box-shadow: var(--imob-shadow-panel);
}

.imob-escopo .site-navigation-dropdown a {
	display: flex;
	min-height: 52px;
	border-radius: var(--imob-radius-sm);
	font-size: var(--imob-body);
	color: var(--imob-tinta);
}

.imob-escopo .site-navigation-dropdown a:hover {
	background: var(--imob-sunken);
	color: var(--imob-acao);
}

.imob-escopo .site-navigation-dropdown .current-menu-item > a,
.imob-escopo .site-navigation-dropdown .current_page_item > a {
	background: var(--imob-azul-palido);
	color: var(--imob-acao);
}

/* ==========================================================================
 * HERÓI
 *
 * Desktop: a imagem inteira, sangrando a largura toda.
 * Celular: recorte da casa com o texto em HTML por cima, porque a chamada
 * gravada no bitmap ficaria com poucos pixels de altura numa tela estreita.
 * ========================================================================== */

.imob-hero {
	position: relative;
	background: var(--imob-navy-fim);
	padding-bottom: var(--imob-space-xl);
}

/* O H1 existe sempre; no desktop ele é lido, não visto. */
.imob-hero__h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.imob-hero__banner {
	display: block;
	position: relative;
	line-height: 0;
}

.imob-hero__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Véu na base da imagem. Resolve duas coisas de uma vez: apaga o fio duro entre
 * a foto e o bloco navy abaixo, e garante que a busca montada por cima continue
 * legível seja qual for a foto que o cliente coloque no lugar desta.
 */
.imob-hero__banner::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 42%;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(11, 23, 48, 0) 0%,
		rgba(11, 23, 48, 0.35) 45%,
		rgba(11, 23, 48, 0.82) 78%,
		var(--imob-navy-fim) 100%
	);
}

.imob-hero__movel {
	display: none;
}

/*
 * A busca sobe sobre o banner: a peça branca fica a cavalo na borda de baixo da
 * imagem, metade sobre a foto e metade sobre o navy.
 *
 * O valor da subida é fixo em px, mas a altura do banner acompanha a largura da
 * tela (proporção 1920:768). A imagem tem a fileira de ícones gravada no
 * bitmap terminando a 75,5% da altura dela, então o espaço livre embaixo vale
 * 24,5% dessa altura. Como o bloco que sobe mede 102px até a linha média da
 * barra, a conta 102 ≤ 0,245 × altura só fecha a partir de 416px de banner, ou
 * seja 1040px de viewport. Abaixo disso a barra encostaria nos ícones, então lá
 * ela volta a ficar embaixo da imagem.
 */
.imob-hero__busca {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--imob-space-lg) * -1);
}

@media (min-width: 1040px) {
	.imob-hero__busca {
		margin-top: calc(var(--imob-hero-monta) * -1);
	}

	/* A barra flutua sobre a foto, então precisa de sombra que a descole dela. */
	.imob-hero .imob-barra {
		box-shadow: var(--imob-shadow-panel);
	}
}

/*
 * A contagem de imóveis desce para baixo da barra. Em cima ela disputava
 * atenção com a chamada gravada na foto e ficava sobre a parte clara dela; em
 * baixo ocupa a faixa navy que estava vazia e lê como selo de confiança.
 * Só a ordem visual muda: na marcação ela continua antes dos controles, que é a
 * ordem correta para quem navega por leitor de tela.
 */
/*
 * `align-items: flex-start` não é decoração: sem ele o padrão `stretch` estica
 * os filhos à largura toda, e o controle segmentado, que é `inline-flex` para
 * abraçar o conteúdo, virava uma faixa clara atravessando a foto.
 */
.imob-hero .imob-busca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* A barra, ao contrário do segmento, ocupa a linha inteira. */
.imob-hero .imob-busca .imob-barra {
	align-self: stretch;
}

.imob-hero .imob-busca__titulo {
	order: 3;
	margin-block: var(--imob-space-md) 0;
}

/*
 * Abaixo de 700px a imagem inteira deixa a chamada ilegível, então ela sai e
 * entra o recorte com texto de verdade.
 */
@media (max-width: 700px) {
	.imob-hero__banner {
		display: none;
	}

	.imob-hero__movel {
		display: block;
		position: relative;
		padding-top: calc(var(--imob-header-h) + var(--imob-space-lg));
		padding-bottom: var(--imob-space-lg);
	}

	.imob-hero__movel-foto {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.imob-hero__movel-foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/*
	 * Véu sobre a foto do celular. Estava em 90–95% de opacidade, o que apagava
	 * a casa por completo: sobrava um retângulo navy e a foto não pagava o
	 * download. Aqui ele abre no topo para a foto aparecer e fecha embaixo, onde
	 * a barra branca encosta.
	 *
	 * Os valores não são estimados: com texto sobre foto, o fundo efetivo é a
	 * mistura dos dois e varia por pixel, então nenhuma conta a partir do CSS
	 * responde. Foram medidos com contraste-real.js, que esconde a tinta,
	 * fotografa o fundo composto e amostra os pixels sob cada linha.
	 */
	.imob-hero__movel-foto::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(8, 17, 39, 0.62) 0%,
			rgba(8, 17, 39, 0.78) 46%,
			rgba(8, 17, 39, 0.93) 82%,
			var(--imob-navy-fim) 100%
		);
	}

	.imob-hero__movel-texto {
		position: relative;
		z-index: 1;
	}

	.imob-hero__busca {
		margin-top: var(--imob-space-md);
	}
}

.imob-hero__titulo {
	font-family: var(--imob-fonte);
	font-size: var(--imob-h1);
	line-height: var(--imob-h1-lh);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #FFFFFF;
}

.imob-hero__destaque {
	color: var(--imob-azul-claro);
}

.imob-hero__chamada {
	margin-top: var(--imob-space-12);
	font-size: var(--imob-body);
	line-height: 1.5;
	color: var(--imob-azul-palido);
}

.imob-hero__diferenciais {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--imob-space-12);
	margin-top: var(--imob-space-24);
}

.imob-hero__diferencial {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	font-size: var(--imob-caption);
	line-height: 1.3;
	color: #FFFFFF;
}

.imob-hero__diferencial-icone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--imob-azul-claro);
}

/* ==========================================================================
 * BARRA DE BUSCA
 * ========================================================================== */

.imob-busca {
	position: relative;
}

.imob-busca__titulo {
	font-size: var(--imob-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--imob-space-sm);
	color: var(--imob-apoio);
}

.imob-hero .imob-busca__titulo {
	color: var(--imob-azul-palido);
}

.imob-segmento {
	display: inline-flex;
	gap: var(--imob-space-xs);
	padding: var(--imob-space-xs);
	background: var(--imob-sunken);
	border-radius: var(--imob-radius-md);
	margin-bottom: var(--imob-space-12);
}

.imob-hero .imob-segmento {
	background: rgba(255, 255, 255, 0.16);
}

.imob-segmento__opcao {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--imob-space-md);
	border-radius: var(--imob-radius-sm);
	font-weight: 700;
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
	text-decoration: none;
	transition: background var(--imob-transicao-rapida), color var(--imob-transicao-rapida);
}

.imob-hero .imob-segmento__opcao {
	color: #FFFFFF;
}

.imob-segmento__opcao:hover {
	background: #FFFFFF;
	color: var(--imob-acao);
}

.imob-hero .imob-segmento__opcao:hover {
	background: rgba(255, 255, 255, 0.26);
	color: #FFFFFF;
}

.imob-segmento__opcao[aria-current='true'] {
	background: #FFFFFF;
	color: var(--imob-acao);
	box-shadow: var(--imob-shadow-card);
}

/* A peça branca. */
.imob-barra {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-xl);
	box-shadow: var(--imob-shadow-panel);
	padding: var(--imob-space-sm);
	gap: var(--imob-space-xs);
}

.imob-barra__campo {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	flex: 1 1 0;
	min-width: 0;
	padding: 0 var(--imob-space-12);
	border-right: 1px solid var(--imob-outline);
}

.imob-barra__campo--busca {
	flex: 1.8 1 0;
}

.imob-barra__campo:last-of-type {
	border-right: 0;
}

.imob-barra__icone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--imob-acao);
}

.imob-barra__campo input,
.imob-barra__campo select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 52px;
	border: 0;
	background: transparent;
	font-family: var(--imob-fonte);
	font-size: var(--imob-small);
	font-weight: 500;
	color: var(--imob-tinta);
	appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

.imob-barra__campo input {
	cursor: text;
}

.imob-barra__campo input::placeholder {
	color: var(--imob-apoio-claro);
	font-weight: 400;
}

.imob-barra__campo select {
	padding-right: var(--imob-space-24);
}

.imob-barra__chevron {
	position: absolute;
	right: var(--imob-space-12);
	display: grid;
	place-items: center;
	pointer-events: none;
	color: var(--imob-apoio);
}

/* Sem contorno o campo dentro da peça branca não daria sinal de foco nenhum. */
.imob-barra__campo:focus-within {
	background: var(--imob-azul-palido);
	border-radius: var(--imob-radius-md);
}

.imob-barra__campo input:focus-visible,
.imob-barra__campo select:focus-visible {
	outline: none;
}

/*
 * O botão nunca encolhe nem sai da peça: `flex: 0 0 auto` mais `white-space:
 * nowrap` garantem isso mesmo quando os campos disputam espaço.
 */
.imob-barra__acao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--imob-space-sm);
	flex: 0 0 auto;
	min-height: 52px;
	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-small);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--imob-transicao-rapida), transform var(--imob-transicao-rapida);
}

.imob-barra__acao:hover {
	background: var(--imob-acao-hover);
}

.imob-barra__acao:active {
	transform: scale(0.98);
}

.imob-barra__acao-icone {
	display: grid;
	place-items: center;
}

/* Entre 700 e 1024px o rótulo do botão encurta para o ícone. */
@media (max-width: 1024px) and (min-width: 701px) {
	.imob-barra__acao {
		padding: 0 var(--imob-space-md);
		font-size: 0;
		gap: 0;
	}

	.imob-barra__acao-icone {
		font-size: initial;
	}
}

@media (max-width: 700px) {
	.imob-barra {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--imob-radius-lg);
		padding: var(--imob-space-12);
		gap: 0;
	}

	.imob-barra__campo {
		border-right: 0;
		border-bottom: 1px solid var(--imob-outline);
		padding: 0 var(--imob-space-sm);
	}

	.imob-barra__campo:last-of-type {
		border-bottom: 0;
	}

	.imob-barra__acao {
		width: 100%;
		margin-top: var(--imob-space-12);
	}
}

/* ==========================================================================
 * CONSEQUÊNCIAS DO CABEÇALHO FIXO
 *
 * Um cabeçalho fixo cria dois problemas que não aparecem no CSS dele mesmo.
 * ========================================================================== */

/* O painel grudento da ficha pararia por baixo do cabeçalho. */
.imob-escopo .imob-contato {
	top: calc(var(--imob-header-h) + var(--imob-space-md));
}

/*
 * Âncora sem margem de rolagem para o alvo debaixo do cabeçalho: quem clica em
 * "Agendar uma visita" ou em "Pular para os resultados" ia cair num título
 * escondido.
 */
.imob-escopo [id] {
	scroll-margin-top: calc(var(--imob-header-h) + var(--imob-space-md));
}

/* ==========================================================================
 * PÁGINAS INSTITUCIONAIS
 *
 * O tema imprime o título num cabeçalho próprio. Onde ele aparece (Sobre,
 * Contato), alinha com o nosso container e a nossa escala, e o texto ganha a
 * mesma medida de leitura da descrição do imóvel.
 * ========================================================================== */

.imob-escopo .page-header {
	width: 100%;
	max-width: var(--imob-container);
	margin-inline: auto;
	padding: var(--imob-space-xl) var(--imob-gutter) 0;
}

.imob-escopo .page-header .entry-title {
	font-size: var(--imob-h1);
	line-height: var(--imob-h1-lh);
	margin: 0;
}

.imob-escopo .page-content > :where(p, h2, h3, ul, ol, .imob-contato-bloco) {
	max-width: var(--imob-medida);
	margin-inline: auto;
	padding-inline: var(--imob-gutter);
}

.imob-escopo .page-content > p {
	margin-block: var(--imob-space-md);
}

.imob-escopo .page-content > h2 {
	font-size: var(--imob-h2);
	line-height: var(--imob-h2-lh);
	margin-top: var(--imob-space-lg);
}

.imob-escopo .page-content > .imob-contato-bloco {
	margin-block: var(--imob-space-lg);
}

/*
 * Uma página institucional termina no rodapé, e sem respiro o último parágrafo
 * encosta na faixa navy.
 */
.imob-escopo .page-content {
	padding-bottom: var(--imob-space-xl);
}

/* ==========================================================================
 * RESPIRO DAS SEÇÕES
 * ========================================================================== */

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

.imob-escopo .imob-secao:first-of-type {
	padding-top: var(--imob-space-xl);
}

.imob-escopo .imob-secao__cabecalho {
	margin-bottom: var(--imob-space-lg);
	max-width: 46rem;
}

/* ==========================================================================
 * BLOCO DE CIDADES
 *
 * Grade de links, na cor da marca. Antes herdava a cor de link do tema, que num
 * fundo claro saía vermelha e sem relação com a identidade.
 * ========================================================================== */

.imob-cidades {
	background: var(--imob-surface);
	border-top: 1px solid var(--imob-outline);
}

.imob-cidades__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--imob-space-12) var(--imob-space-lg);
}

.imob-cidades__item {
	border-bottom: 1px solid var(--imob-outline);
}

.imob-cidades__link {
	display: flex;
	align-items: center;
	gap: var(--imob-space-12);
	min-height: 56px;
	padding: var(--imob-space-12) 0;
	color: var(--imob-tinta);
	text-decoration: none;
	transition: color var(--imob-transicao-rapida), padding-left var(--imob-transicao-rapida);
}

.imob-cidades__link:hover {
	color: var(--imob-acao);
	padding-left: var(--imob-space-sm);
}

.imob-cidades__nome {
	font-family: var(--imob-fonte);
	font-size: var(--imob-h4);
	font-weight: 700;
}

.imob-cidades__conta {
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.imob-cidades__link .imob-icone {
	color: var(--imob-acao);
	flex: 0 0 auto;
}

/* ==========================================================================
 * RODAPÉ
 * ========================================================================== */

.imob-rodape {
	background: var(--imob-navy-fim);
	color: #FFFFFF;
	margin-top: 0;
}

.imob-rodape__topo {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--imob-space-lg) var(--imob-space-xl);
	padding-block: var(--imob-space-xl);
}

.imob-rodape__marca img {
	height: 36px;
	width: auto;
	display: block;
}

.imob-rodape__tagline {
	margin-top: var(--imob-space-md);
	color: var(--imob-azul-palido);
	font-size: var(--imob-small);
	line-height: 1.6;
	max-width: 30ch;
}

/*
 * Título de coluna em branco, não no azul claro: medido, o #60A5FA dá 4,07:1
 * sobre o navy da marca. A hierarquia contra os links vem de peso, caixa e
 * entreletra, que é hierarquia melhor que matiz de qualquer forma.
 */
.imob-rodape__titulo {
	font-size: var(--imob-caption);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #FFFFFF;
	margin-bottom: var(--imob-space-md);
}

.imob-rodape__lista {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

.imob-rodape__lista li {
	margin: 0;
}

.imob-rodape__lista a,
.imob-rodape__contato a {
	color: var(--imob-azul-palido);
	text-decoration: none;
	font-size: var(--imob-small);
	transition: color var(--imob-transicao-rapida);
}

.imob-rodape__lista a:hover,
.imob-rodape__contato a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.imob-rodape__contato {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-12);
}

.imob-rodape__contato a,
.imob-rodape__contato span {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	color: var(--imob-azul-palido);
	font-size: var(--imob-small);
	line-height: 1.4;
}

.imob-rodape__whats {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--imob-space-sm);
	min-height: 52px;
	padding: 0 var(--imob-space-24);
	border-radius: var(--imob-radius-md);
	background: var(--imob-verde);
	color: #FFFFFF !important;
	font-weight: 700;
	text-decoration: none !important;
	margin-top: var(--imob-space-sm);
	transition: background var(--imob-transicao-rapida);
}

.imob-rodape__whats:hover {
	background: var(--imob-verde-hover);
}

.imob-rodape__base {
	border-top: 1px solid rgba(219, 234, 254, 0.2);
	padding-block: var(--imob-space-24);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--imob-space-12);
	font-size: var(--imob-caption);
	color: var(--imob-azul-palido);
}

.imob-rodape__base p {
	margin: 0;
}

@media (max-width: 900px) {
	.imob-rodape__topo {
		grid-template-columns: 1fr 1fr;
		gap: var(--imob-space-lg);
		padding-block: var(--imob-space-lg);
	}

	.imob-rodape__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.imob-rodape__topo {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
 * MOVIMENTO
 *
 * O estado escondido só existe depois que o JS põe `imob-js` no <html>: sem
 * script, em impressão e para o rastreador de busca o conteúdo é visível.
 * ========================================================================== */

.imob-js [data-imob-revela] {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity var(--imob-revela-dur) var(--imob-ease-suave),
		transform var(--imob-revela-dur) var(--imob-ease-suave);
	transition-delay: calc(var(--imob-atraso, 0) * var(--imob-revela-passo));
	will-change: opacity, transform;
}

.imob-js [data-imob-revela].imob-visivel {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.imob-js [data-imob-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 460ms var(--imob-ease-suave),
		transform 460ms var(--imob-ease-suave);
}

.imob-js [data-imob-stagger].imob-visivel > * {
	opacity: 1;
	transform: none;
}

.imob-js [data-imob-stagger].imob-visivel > *:nth-child(1) { transition-delay: 0ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(2) { transition-delay: 70ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(3) { transition-delay: 140ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(4) { transition-delay: 210ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(5) { transition-delay: 280ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(6) { transition-delay: 350ms; }
.imob-js [data-imob-stagger].imob-visivel > *:nth-child(n+7) { transition-delay: 420ms; }

/*
 * Sem negociação: quem pediu menos movimento recebe a página pronta, não uma
 * versão mais lenta da animação.
 */
@media (prefers-reduced-motion: reduce) {
	.imob-js [data-imob-revela],
	.imob-js [data-imob-revela].imob-visivel,
	.imob-js [data-imob-stagger] > *,
	.imob-js [data-imob-stagger].imob-visivel > * {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0ms;
	}

	.imob-escopo .site-header {
		transition: none;
	}
}

/* ==========================================================================
 * BANNER DE PÁGINA INSTITUCIONAL
 *
 * Mesma família do herói da home, e pelo mesmo motivo: a imagem inteira no
 * desktop, o recorte com texto de verdade no celular. O que muda é a proporção,
 * 1640:656 em vez de 1920:768, e a ausência da barra de busca por baixo.
 * ========================================================================== */

.imob-banner {
	position: relative;
	background: var(--imob-navy-fim);
}

/* O H1 existe sempre; no desktop ele é lido, não visto. */
.imob-banner__h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.imob-banner__imagem {
	display: block;
	position: relative;
	line-height: 0;
}

.imob-banner__imagem img {
	display: block;
	width: 100%;
	height: auto;
}

.imob-banner__movel {
	display: none;
}

@media (max-width: 700px) {
	.imob-banner__imagem {
		display: none;
	}

	.imob-banner__movel {
		display: block;
		position: relative;
		padding-top: calc(var(--imob-header-h) + var(--imob-space-lg));
		padding-bottom: var(--imob-space-lg);
	}

	.imob-banner__movel-foto {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.imob-banner__movel-foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center right;
		display: block;
	}

	/*
	 * Véu medido, não estimado: o texto fica sobre a foto, então o fundo efetivo
	 * é a mistura dos dois e varia por pixel. Conferido com contraste-real.js.
	 */
	.imob-banner__movel-foto::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(8, 17, 39, 0.72) 0%,
			rgba(8, 17, 39, 0.84) 55%,
			rgba(8, 17, 39, 0.94) 100%
		);
	}

	.imob-banner__movel-texto {
		position: relative;
		z-index: 1;
	}
}

.imob-banner__titulo {
	font-family: var(--imob-fonte);
	font-size: var(--imob-h1);
	line-height: var(--imob-h1-lh);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #FFFFFF;
}

.imob-banner__chamada {
	margin-top: var(--imob-space-12);
	font-size: var(--imob-body);
	line-height: 1.5;
	color: var(--imob-azul-palido);
}

/* ==========================================================================
 * PÁGINA DE CONTATO: FORMULÁRIO E MAPA
 * ========================================================================== */

.imob-contato-grade {
	display: grid;
	/*
	 * `minmax(0, ...)` nas duas colunas. Sem o piso em zero, o mínimo da trilha
	 * vira o min-content do conteúdo, e um iframe de mapa não encolhe sozinho —
	 * foi assim que a ficha do imóvel transbordou a tela do celular.
	 */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--imob-space-48);
	align-items: start;
}

@media (max-width: 900px) {
	.imob-contato-grade {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--imob-space-lg);
	}
}

.imob-contato-grade__forma .imob-formulario {
	margin-top: var(--imob-space-24);
}

/* Nome e telefone lado a lado; o resto ocupa a linha inteira. */
.imob-contato-pagina .imob-formulario__linha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--imob-space-md);
}

.imob-contato-pagina .imob-campo--largo {
	margin-top: var(--imob-space-md);
}

.imob-contato-pagina .imob-formulario button {
	margin-top: var(--imob-space-md);
}

/* ---- Mapa ---- */

.imob-mapa {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--imob-radius-lg);
	overflow: hidden;
	border: 1px solid var(--imob-outline);
	background: var(--imob-sunken);
}

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

.imob-mapa__legenda {
	margin-top: var(--imob-space-md);
}

.imob-mapa__endereco {
	display: flex;
	align-items: center;
	gap: var(--imob-space-sm);
	font-weight: 700;
	color: var(--imob-tinta);
}

.imob-mapa__icone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--imob-acao);
}

.imob-mapa__canais {
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-sm);
	margin-top: var(--imob-space-md);
	list-style: none;
	padding: 0;
}

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

.imob-mapa__canal:hover {
	text-decoration: underline;
}

.imob-mapa__credito {
	margin-top: var(--imob-space-12);
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
}

.imob-mapa__credito a {
	color: var(--imob-apoio);
}

/* ==========================================================================
 * SOBRE O SISTEMA: BLOCOS DE IMAGEM E TEXTO
 * ========================================================================== */

.imob-olho {
	font-size: var(--imob-caption);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--imob-acao);
	margin-bottom: var(--imob-space-sm);
}

/*
 * Os dois blocos de texto que ocupam a linha inteira sem imagem ao lado ficam
 * centrados: a abertura da seção e o texto do bloco de largura cheia. Alinhados
 * à esquerda, eles deixavam metade da linha vazia à direita e liam como se
 * faltasse alguma coisa ali — o olho procura a imagem que os outros blocos têm.
 *
 * Centrado só a partir de 901px. Numa coluna estreita a linha já ocupa a largura
 * toda, então centrar não reposiciona nada e só piora a leitura: cada linha
 * passa a começar num ponto diferente e o olho precisa caçar o início da
 * seguinte. Por isso a medida também fica curta aqui, com o parágrafo mais
 * estreito que o título.
 */
/*
 * Sem `max-width` aqui de propósito. A abertura é um `.imob-secao__cabecalho`, e
 * a regra `.imob-escopo .imob-secao__cabecalho` já a limita em 46rem com
 * especificidade (0,2,0) — que é a mesma medida deste token. Declarar de novo
 * com (0,1,0) só deixaria uma linha morta no arquivo, do tipo que engana quem
 * for mexer aqui depois achando que está no controle da largura.
 */
@media (min-width: 901px) {
	.imob-sistema__intro {
		margin-inline: auto;
		text-align: center;
	}
}

.imob-sistema__resumo {
	margin-top: var(--imob-space-md);
	font-size: var(--imob-body-lg);
	line-height: 1.6;
	color: var(--imob-apoio);
}

.imob-sistema__bloco {
	display: grid;
	/*
	 * Piso em zero nas duas trilhas. A figura carrega uma imagem larga, e sem o
	 * `minmax(0, ...)` o mínimo da coluna vira o tamanho intrínseco dela.
	 */
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--imob-space-48);
	align-items: center;
	margin-top: var(--imob-space-96);
}

/*
 * Alterna o lado da imagem. Não é enfeite: numa sequência de pares
 * imagem-texto todos no mesmo sentido, o olho desce pela coluna de texto e
 * ignora as imagens. Trocar o lado obriga a leitura em ziguezague.
 *
 * A troca é por `order`, e não reordenando a marcação, para a ordem de leitura
 * de um leitor de tela continuar sendo imagem e depois texto em todos os blocos.
 */
.imob-sistema__bloco--invertido .imob-sistema__figura {
	order: 2;
}

.imob-sistema__figura {
	margin: 0;
	border-radius: var(--imob-radius-lg);
	overflow: hidden;
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	box-shadow: var(--imob-shadow-panel);
	line-height: 0;
}

.imob-sistema__figura img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * A tela de celular não deve ocupar a coluna toda: esticada, vira um retângulo
 * gigante e deixa de parecer um celular. A marcação declara isso por classe, e
 * não por um seletor que espia o nome do arquivo no src — renomear a imagem não
 * pode desmanchar o layout em silêncio.
 */
.imob-sistema__figura--retrato {
	max-width: 300px;
	margin-inline: auto;
	border-radius: var(--imob-radius-xl);
}

/*
 * Bloco de largura cheia: a figura ocupa o container e o texto desce por baixo,
 * numa medida de leitura. Serve para peca larga e baixa, como a barra de busca,
 * que em meia coluna encolhe ate o rotulo dos campos ficar ilegivel.
 */
.imob-sistema__bloco--cheio {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--imob-space-24);
}

.imob-sistema__bloco--cheio .imob-sistema__texto {
	max-width: var(--imob-medida-centro);
}

@media (min-width: 901px) {
	.imob-sistema__bloco--cheio .imob-sistema__texto {
		margin-inline: auto;
		text-align: center;
	}

	/*
	 * O parágrafo herda a medida do bloco em vez de ter a sua. Com uma medida
	 * própria e mais estreita, ele encostava à esquerda dentro de um bloco
	 * centrado e o conjunto ficava torto — e a borda dele não batia com a da
	 * abertura da seção, que é justamente o alinhamento que se procura aqui.
	 */
	.imob-sistema__bloco--cheio .imob-sistema__paragrafo {
		max-width: none;
		margin-inline: auto;
	}
}

.imob-sistema__titulo {
	font-size: var(--imob-h3);
	line-height: var(--imob-h3-lh);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--imob-tinta);
}

.imob-sistema__paragrafo {
	margin-top: var(--imob-space-md);
	max-width: 58ch;
	line-height: 1.7;
	color: var(--imob-apoio);
}

@media (max-width: 900px) {
	.imob-sistema__bloco {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--imob-space-24);
		margin-top: var(--imob-space-xl);
	}

	/* Empilhado, a imagem vem sempre antes do texto que a explica. */
	.imob-sistema__bloco--invertido .imob-sistema__figura {
		order: 0;
	}
}

/* ==========================================================================
 * SOBRE O SISTEMA: O QUE ESTÁ POR BAIXO
 * ========================================================================== */

.imob-sistema-recursos {
	background: var(--imob-sunken);
}

.imob-recursos {
	display: grid;
	/*
	 * Tres colunas fixas no desktop, e nao auto-fit: com auto-fit em 280px o
	 * container cabia quatro, e seis cartoes viravam 4+2 com um buraco na
	 * segunda fileira. Tres colunas fecham 3+3.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--imob-space-24);
	margin-top: var(--imob-space-lg);
	list-style: none;
	padding: 0;
}

@media (max-width: 900px) {
	.imob-recursos {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

.imob-recurso {
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-lg);
	box-shadow: var(--imob-shadow-card);
	padding: var(--imob-space-24);
}

.imob-recurso__icone {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--imob-radius-md);
	background: var(--imob-azul-palido);
	color: var(--imob-acao);
	margin-bottom: var(--imob-space-md);
}

.imob-recurso__titulo {
	font-size: var(--imob-h4);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--imob-tinta);
}

.imob-recurso__texto {
	margin-top: var(--imob-space-sm);
	font-size: var(--imob-small);
	line-height: 1.65;
	color: var(--imob-apoio);
}

/* ==========================================================================
 * TOPO DE ARQUIVO COM ARTE PRÓPRIA
 *
 * Mesma composição do herói da home: a imagem começa colada no alto, sob o
 * cabeçalho transparente, e a barra branca monta a cavalo na borda de baixo
 * dela. Reusa o token de subida do herói, então mexer lá move as duas.
 * ========================================================================== */

/*
 * Fundo branco atrás da busca, e não o navy.
 *
 * O navy vinha da época em que a barra montava sobre a foto: ali ele era a
 * continuação da imagem escura. Com a busca virando painel próprio, de gradiente
 * claro e recuada da arte, o navy passou a ser uma terceira faixa de cor entre a
 * foto e o conteúdo — mais um bloco disputando atenção em vez de dar respiro.
 * No branco o painel é a única peça daquela área, que é o que ele deve ser.
 */
.imob-arquivo-topo {
	position: relative;
	background: var(--imob-bg);
}

.imob-arquivo-topo .imob-banner {
	background: transparent;
}

/*
 * A busca fica ABAIXO da imagem, sem montar sobre ela, e solta dela.
 *
 * No herói da home a barra sobe a cavalo na borda de baixo da foto, e ali isso
 * funciona porque o rodapé daquela imagem é piscina e calçada, área vazia. As
 * artes das seções institucionais têm uma faixa de contato gravada no rodapé —
 * telefone, e-mail, WhatsApp — e com a mesma subida o rótulo e o controle
 * segmentado caíam exatamente em cima dela, um texto por cima do outro.
 *
 * Recortar a faixa resolveria, mas a decisão de usar a imagem inteira é do
 * cliente e vale aqui também. Então quem cede é a sobreposição, que era enfeite,
 * e não a legibilidade de duas camadas de texto.
 */
.imob-arquivo-topo__busca {
	position: relative;
	z-index: 2;
	padding-block: var(--imob-space-48) var(--imob-space-xl);
}

/* ==========================================================================
 * A BUSCA DAS TELAS DE IMÓVEL COMO PAINEL
 *
 * Nas telas de imóvel a busca não flutua solta sobre o fundo: ela é uma peça
 * própria, com o gradiente da paleta, cantos arredondados e o chanfro no canto
 * inferior direito.
 *
 * O chanfro aqui é uma extensão consciente da regra. O contrato dizia "só em
 * imagem", e o motivo era impedir que a assinatura virasse maneirismo aparecendo
 * em selo e botão. Este bloco ocupa exatamente o lugar que a faixa de imagem do
 * topo ocupava — mesma largura, mesma posição, mesmo gradiente — então ele herda
 * o papel dela na composição, e não o de um controle solto. A restrição que
 * importa continua de pé: nada de chanfro em selo, pill, botão ou campo.
 * ========================================================================== */

.imob-arquivo-topo .imob-busca,
.imob-topo .imob-busca {
	padding: var(--imob-space-lg);
	border-radius: var(--imob-radius-xl);
	background: linear-gradient(
		160deg,
		var(--imob-azul-palido) 0%,
		var(--imob-azul-claro) 60%,
		var(--imob-acao) 100%
	);
	/*
	 * Chanfro padrão, e não o maior do topo: com 32px de altura por 55 de
	 * largura, o corte passa a 13px acima do canto da barra branca, que está a
	 * 32px da borda. Com o corte maior ele comeria o canto do botão de busca.
	 */
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--imob-chanfro-y)),
		calc(100% - var(--imob-chanfro-x)) 100%,
		0 100%
	);
}

@media (max-width: 700px) {
	.imob-arquivo-topo .imob-busca,
	.imob-topo .imob-busca {
		padding: var(--imob-space-24);
		border-radius: var(--imob-radius-lg);
	}
}

/*
 * Rótulo em tinta cheia, e não no cinza de apoio.
 *
 * Medido no pixel composto, o cinza de apoio sobre a parte clara do gradiente
 * dava 4,74:1 — passa, mas com 0,24 de margem sobre o mínimo. Texto sobre
 * gradiente não tem um fundo só: o ponto exato onde a letra cai muda com a
 * largura da tela, e uma folga dessa ordem não sobrevive a essa variação. Com a
 * tinta cheia a medida vai para perto de 9:1 e para de depender do acaso.
 */
.imob-arquivo-topo .imob-busca__titulo,
.imob-topo .imob-busca__titulo {
	color: var(--imob-tinta);
}

@media (max-width: 700px) {
	.imob-arquivo-topo__busca {
		padding-block: var(--imob-space-md) var(--imob-space-lg);
	}
}

/* ==========================================================================
 * CHAMADA PARA CONTRATAR O SISTEMA
 *
 * Fecho da página Sobre. Faixa navy porque ela precisa se separar das seções de
 * explicação que vêm antes: em fundo claro, mais um bloco de texto branco leria
 * como continuação e passaria despercebido por quem já rolou a página inteira.
 * ========================================================================== */

.imob-chamada-sistema {
	background: var(--imob-bg);
}

.imob-chamada-sistema__caixa {
	background: linear-gradient(135deg, var(--imob-navy) 0%, var(--imob-navy-fim) 100%);
	border-radius: var(--imob-radius-xl);
	padding: var(--imob-space-96) var(--imob-space-48);
	text-align: center;
	/* Mesma assinatura da busca das telas de imóvel, no mesmo canto. */
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--imob-chanfro-y)),
		calc(100% - var(--imob-chanfro-x)) 100%,
		0 100%
	);
}

.imob-olho--claro {
	color: var(--imob-azul-claro);
}

.imob-chamada-sistema__titulo {
	font-size: var(--imob-h2);
	line-height: var(--imob-h2-lh);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	max-width: 24ch;
	margin-inline: auto;
}

.imob-chamada-sistema__texto {
	margin-top: var(--imob-space-md);
	margin-inline: auto;
	max-width: 56ch;
	font-size: var(--imob-body-lg);
	line-height: 1.6;
	color: var(--imob-azul-palido);
}

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

/* Ação clara sobre o navy: o azul de ação sumiria contra ele. */
.imob-botao--claro {
	background: #FFFFFF;
	color: var(--imob-acao);
}

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

@media (max-width: 700px) {
	.imob-chamada-sistema__caixa {
		padding: var(--imob-space-48) var(--imob-space-24);
		border-radius: var(--imob-radius-lg);
	}
}

/* ==========================================================================
 * PÁGINA DE PROPOSTA
 * ========================================================================== */

.imob-proposta__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--imob-space-48);
	align-items: start;
}

@media (max-width: 900px) {
	.imob-proposta__grade {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--imob-space-lg);
	}
}

.imob-proposta__forma .imob-formulario {
	margin-top: var(--imob-space-24);
}

/*
 * Os campos vêm agrupados em `fieldset`, e não numa lista corrida. Onze campos
 * seguidos leem como formulário de cadastro de banco; separados em "a
 * imobiliária" e "quem vamos procurar", cada bloco tem três ou quatro e a
 * pessoa vê onde está.
 */
.imob-formulario__bloco {
	border: 0;
	padding: 0;
	margin: 0 0 var(--imob-space-lg);
}

.imob-formulario__legenda {
	padding: 0;
	margin-bottom: var(--imob-space-12);
	font-size: var(--imob-caption);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--imob-acao);
}

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

.imob-proposta .imob-campo--largo {
	margin-top: var(--imob-space-md);
}

.imob-proposta .imob-formulario button {
	margin-top: var(--imob-space-md);
}

/*
 * "opcional" no rótulo, e não asterisco nos obrigatórios. Num formulário em que
 * a maioria é obrigatória, marcar a maioria é ruído: marca-se a exceção.
 */
.imob-campo__opcional {
	margin-left: 6px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--imob-apoio-claro);
}

.imob-proposta__nota {
	margin-top: var(--imob-space-12);
	font-size: var(--imob-caption);
	color: var(--imob-apoio);
}

/* ---- Cartão lateral ---- */

.imob-proposta__cartao {
	background: var(--imob-surface);
	border: 1px solid var(--imob-outline);
	border-radius: var(--imob-radius-lg);
	box-shadow: var(--imob-shadow-card);
	padding: var(--imob-space-24);
	position: sticky;
	top: calc(var(--imob-header-h) + var(--imob-space-md));
}

@media (max-width: 900px) {
	.imob-proposta__cartao {
		position: static;
	}
}

.imob-proposta__cartao-titulo {
	font-size: var(--imob-h4);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--imob-tinta);
}

.imob-proposta__passos {
	margin-top: var(--imob-space-md);
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: var(--imob-space-12);
	font-size: var(--imob-small);
	line-height: 1.6;
	color: var(--imob-apoio);
}

.imob-proposta__passos li {
	list-style: decimal;
}

.imob-proposta__passos strong {
	color: var(--imob-tinta);
}

.imob-proposta__atalho {
	margin-top: var(--imob-space-lg);
	font-size: var(--imob-small);
	color: var(--imob-apoio);
}

.imob-proposta__cartao .imob-botao--largo {
	margin-top: var(--imob-space-sm);
	width: 100%;
}

/* Cabeçalho da página de proposta, que não tem arte própria. */
.imob-proposta__topo {
	background: var(--imob-bg);
	padding-top: var(--imob-space-xl);
}

.imob-proposta__h1 {
	font-size: var(--imob-hero);
	line-height: var(--imob-hero-lh);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--imob-tinta);
	max-width: 20ch;
}

.imob-proposta__linha {
	margin-top: var(--imob-space-md);
	max-width: 52ch;
	font-size: var(--imob-body-lg);
	line-height: 1.6;
	color: var(--imob-apoio);
}

.imob-proposta {
	padding-top: var(--imob-space-lg);
}