/**
 * O que é só do HUB de /imoveis. O resto vem de mg-hub.css (a mesma casca da /turismo/).
 *
 * Desenho do mockup `Pagina de imoveis.jpg` (dono, 21/09/2026). Cores, Inter e container são os
 * do manual da marca, pela casca — nenhuma cor nova nasce aqui.
 *
 * @author Valoar
 * @since  1.25.0 - 2026-09-21
 */

/* Rótulo que só o leitor de tela ouve. */
.igw-hub-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A migalha desta tela é a branca sobre a foto; a do tema ficaria repetida logo acima. */
body:has(.igw-hub-migalha) .gcep-migalha { display: none; }

/* ================= 1. HERÓI ================= */
.igw-hub-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.mg-hub .igw-hub-migalha a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.mg-hub .igw-hub-migalha a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.igw-hub-migalha [aria-current] { color: #fff; }

/* O mockup traz QUATRO indicadores, não três: a casca abre em três, e aqui vira quatro onde cabe. */
/* Duas colunas desde o celular: quatro linhas empilhadas comiam meia tela de altura. */
.igw-hub-hero__destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (min-width: 640px) { .igw-hub-hero__destaques { max-width: 680px; gap: 16px 18px; } }
@media (min-width: 1024px) { .igw-hub-hero__destaques { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 980px; } }
@media (min-width: 1024px) { .igw-hub-hero .mg-hub-hero__h1 { max-width: 13ch; } }

/* ================= 2. BUSCA ================= */
.igw-hub-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.mg-hub .igw-hub-aba {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 1px solid #d8e6f8; border-radius: 9px;
	background: #eaf4ee; font-size: 14.5px; font-weight: 700; color: #3d4a43; text-decoration: none;
	transition: background-color .16s, border-color .16s, color .16s;
}
.mg-hub .igw-hub-aba:hover { border-color: var(--hub-azul); color: var(--hub-azul); }
.mg-hub .igw-hub-aba.is-ativa { background: var(--hub-azul); border-color: var(--hub-azul); color: #fff; }

.igw-hub-form { margin-top: 14px; }
.igw-hub-form__linha { display: grid; gap: 10px; }
@media (min-width: 560px) { .igw-hub-form__linha { grid-template-columns: minmax(0, 1fr) auto; } }
.igw-hub-form__linha .mg-hub-btn { min-height: 50px; }

.igw-hub-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 900px) { .igw-hub-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.igw-hub-campo { position: relative; margin: 0; }
.igw-hub-campo label:not(.igw-hub-sr) { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 700; color: var(--hub-texto-2); }
.mg-hub .igw-hub-campo select,
.mg-hub .igw-hub-mais {
	width: 100%; min-height: 44px; padding: 0 34px 0 14px; border: 1px solid #dde7f4; border-radius: 10px; background: #fff;
	font-family: inherit; font-size: 14px; font-weight: 600; color: var(--hub-texto); text-align: left; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352678A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.mg-hub .igw-hub-mais { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; }
.mg-hub .igw-hub-mais svg { font-size: 16px; color: var(--hub-azul); }
.mg-hub .igw-hub-campo select:focus,
.mg-hub .igw-hub-mais:focus-visible { border-color: var(--hub-azul); outline: none; box-shadow: 0 0 0 3px rgba(15, 81, 50, .16); }

.igw-hub-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d8e4f2; }
.igw-hub-extra[hidden] { display: none; }
@media (min-width: 900px) { .igw-hub-extra { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Card "Anuncie seu imóvel" ---- */
.igw-hub-anuncie { padding: 22px 20px; border: 1px solid #cfe9dc; border-radius: 16px; background: #e9f5ef; }
.igw-hub-anuncie__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--hub-verde-f); font-size: 27px; }
.igw-hub-anuncie__ico svg { width: 1em; height: 1em; }
.igw-hub-anuncie__titulo { margin-top: 14px; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hub-marinho); }
.igw-hub-anuncie__texto { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub .igw-hub-anuncie__btn { width: 100%; margin-top: 16px; background: var(--hub-verde-f); color: #fff; box-shadow: 0 6px 16px rgba(21, 138, 88, .22); }
.mg-hub .igw-hub-anuncie__btn:hover { background: #0f6f45; color: #fff; }
.igw-hub-anuncie__bens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding: 0; list-style: none; }
.igw-hub-anuncie__bens li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--hub-verde-f); }
.igw-hub-anuncie__bens svg { font-size: 14px; stroke-width: 2.6; }

/* ================= 3. CATEGORIAS ================= */
/* No mockup o ícone fica NA LINHA do nome, dentro da faixa branca do cartão. */
.igw-hub-cat__corpo { flex-direction: row; align-items: center; gap: 10px; padding: 12px 13px 13px; }
.igw-hub-cat__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 17px; }
.igw-hub-cat__ico svg { width: 1em; height: 1em; }
.igw-hub-cat .mg-hub-exp__titulo { font-size: 14.5px; }


/* ================= 4. DESTAQUES ================= */
.igw-hub-imovel__preco { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--hub-marinho); }
.igw-hub-imovel .mg-hub-atr__titulo { font-size: 15px; }
.igw-hub-imovel__semfoto { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(140deg, #22a06b 0%, #0b3a25 100%); color: #fff; }
.igw-hub-imovel__semfoto svg { width: 54px; height: 54px; opacity: .45; stroke-width: 1.5; }
.igw-hub-imovel .mg-hub-atr__dados li { font-weight: 600; }
.igw-hub-imovel .mg-hub-atr__local { margin-top: auto; padding-top: 8px; }

/* Estado vazio: diz o que está acontecendo e oferece a saída, sem cartão de mentira. */
.igw-hub-vazio { padding: 26px 22px; border: 1px dashed #cfe3d6; border-radius: var(--hub-raio); background: #fff; text-align: center; }
.igw-hub-vazio h3 { font-size: 18px; font-weight: 800; color: var(--hub-marinho); }
.igw-hub-vazio p { max-width: 52ch; margin: 8px auto 0; font-size: 14.5px; line-height: 1.55; color: var(--hub-texto-2); }
.igw-hub-vazio .mg-hub-btn { margin-top: 16px; }

/* ================= 6. BAIRROS + POR QUE INVESTIR ================= */
.igw-hub-duo { display: grid; gap: 16px; }
@media (min-width: 900px) { .igw-hub-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.igw-hub-caixa { display: flex; align-items: flex-start; gap: 15px; height: 100%; padding: 20px; border-radius: 16px; }
.igw-hub-caixa--azul { border: 1px solid #d5e5fa; background: #eef5fd; }
.igw-hub-caixa--claro { border: 1px solid #dde7f4; background: #faf8f3; }
.igw-hub-caixa > div { min-width: 0; }
.igw-hub-caixa__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--hub-azul); font-size: 23px; }
.igw-hub-caixa__ico svg { width: 1em; height: 1em; }
.igw-hub-caixa h2 { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hub-marinho); }
.igw-hub-caixa p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--hub-texto-2); }

.igw-hub-bairros { margin-top: 12px; }
.mg-hub .igw-hub-bairros a { gap: 7px; }
.igw-hub-bairros a span { font-size: 11.5px; font-weight: 700; color: #6d84a8; }
.mg-hub .igw-hub-bairros__todos { background: var(--hub-azul); border-color: var(--hub-azul); color: #fff; }
.mg-hub .igw-hub-bairros__todos:hover { background: var(--hub-azul-h); border-color: var(--hub-azul-h); color: #fff; }

.igw-hub-motivos { display: grid; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.igw-hub-motivos li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--hub-texto); }
.igw-hub-motivos svg { flex: none; margin-top: 2px; font-size: 16px; stroke-width: 2.6; color: var(--hub-verde-f); }

/* ================= 7. ARTIGOS ================= */
@media (min-width: 900px) { .igw-hub-artigos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.igw-hub-artigos .mg-hubp__titulo { font-size: 15.5px; }

/* ================= responsivo ================= */
@media (max-width: 559.98px) {
	.igw-hub-abas { gap: 6px; }
	.mg-hub .igw-hub-aba { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
	.igw-hub-anuncie { padding: 18px 16px; }
}

/* ================= a armadilha do respiro ================= *
 * A casca zera a margem de `ul`, `p` e `h2` com `.mg-hub ul { margin: 0 }` — seletor de classe
 * MAIS elemento, que vence qualquer regra de classe sozinha, não importa a ordem. Todo respiro
 * daqui precisa da mesma força, e é por isso que estas regras repetem `.mg-hub` na frente.
 * Fica no fim do arquivo de propósito, junto, para não se perder no meio do desenho. */
.mg-hub ul.igw-hub-hero__destaques { margin-top: 26px; }
@media (min-width: 1024px) { .mg-hub ul.igw-hub-hero__destaques { margin-top: 34px; } }
.mg-hub ul.igw-hub-abas { margin-top: 16px; }
.mg-hub .igw-hub-anuncie__titulo { margin-top: 14px; }
.mg-hub p.igw-hub-anuncie__texto { margin-top: 8px; }
.mg-hub ul.igw-hub-anuncie__bens { margin-top: 14px; }
.mg-hub ul.igw-hub-bairros { margin-top: 12px; }
.mg-hub ul.igw-hub-motivos { margin-top: 12px; }
.mg-hub .igw-hub-caixa p { margin-top: 6px; }
.mg-hub .igw-hub-vazio p { margin: 8px auto 0; }

/* Com quatro indicadores e o subtítulo de três linhas, 560px cortavam a última linha. */
@media (min-width: 1024px) {
	.igw-hub-hero { min-height: 648px; }
	.igw-hub-hero .mg-hub-hero__grade { padding-bottom: 52px; }
}

/* O subtítulo cai na mesma armadilha (`.mg-hub p { margin: 0 }`): sem isso ele encosta no H1. */
.mg-hub .igw-hub-hero p.mg-hub-hero__sub { margin-top: 14px; }

/* Com o sol na foto da praça, o degrade diagonal deixava o quarto indicador em cima do verde
   claro, sem contraste para ler. Um véu extra no rodapé do herói resolve sem escurecer o céu. */
.igw-hub-hero::after {
	background:
		linear-gradient(180deg, rgba(6, 20, 40, 0) 52%, rgba(6, 20, 40, .55) 82%, rgba(6, 20, 40, .72) 100%),
		linear-gradient(180deg, rgba(6, 20, 40, .58) 0%, rgba(6, 20, 40, .5) 30%, rgba(6, 20, 40, .66) 70%, rgba(6, 20, 40, .82) 100%);
}
@media (min-width: 1024px) {
	.igw-hub-hero::after {
		background:
			linear-gradient(180deg, rgba(6, 20, 40, 0) 48%, rgba(6, 20, 40, .5) 80%, rgba(6, 20, 40, .68) 100%),
			linear-gradient(101deg, rgba(6, 20, 40, .88) 0%, rgba(6, 20, 40, .72) 30%, rgba(6, 20, 40, .28) 58%, rgba(6, 20, 40, .14) 78%, rgba(6, 20, 40, .34) 100%);
	}
}