/**
 * Busca única (/busca): etapa 5 do redesign. Também os cards de resultado (GCEP_Busca_Cards) e a
 * seção "Alertas de busca" de /salvos.
 *
 * Tela: design_handoff_morro_guia/telas/Resultados de Busca Morro Guia.dc.html e os blocos BUSCA e
 * ESTADOS de Mobile Telas Morro Guia.dc.html. Fonte Inter, cores do manual. Classes mg-* porque o
 * Tailwind do site é pré-compilado.
 *
 * Correção da auditoria, etapa 4 (14/09/2026): cores pelos tokens da casca (`--mg-*` em
 * gcep-casca.css), estados de hover/foco/toque, textos de apoio em 1.6, sem gradiente decorativo e
 * sem laranja fora da chamada comercial e do selo "Destaque". O desenho novo do card (B2/B9) vale
 * só dentro de `.mg-busca-tela`; a home e os relacionados da ficha usam o card como estava.
 *
 * Contraste: título do card em #1266d6 (5:1 no branco); selo azul em fundo claro #0d4fa8; selo
 * "Destaque" em laranja #ff7a00 com texto marinho (5,3:1), porque branco no laranja fica em 2,9:1;
 * botão laranja da chamada com texto marinho pelo mesmo motivo. Título do alerta em #0d4fa8 sobre
 * #eef5fe, porque o #1266d6 ali fica no limite de 4,5:1.
 *
 * @package GuiaWP
 * @since 2.5.450 - Valoar - 2026-09-14
 */

.mg-busca-tela {
	font-family: var(--mg-fonte);
	color: var(--mg-texto);
	background: var(--mg-fundo);
	padding-bottom: 48px;
}

/* A migalha acompanha a largura da casca nesta tela. */
body.mg-busca-pagina .gcep-migalha { max-width: 1440px; padding: 12px 16px; }
@media (min-width: 768px) { body.mg-busca-pagina .gcep-migalha { padding-inline: 24px; } }
@media (min-width: 1440px) { body.mg-busca-pagina .gcep-migalha { padding-inline: 44px; } }

.mg-rsvg {
	width: 14px;
	height: 14px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Topo: título, contagem e banners ───────────────────────────────────── */

.mg-rtopo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
.mg-rtopo__txt { min-width: 0; }
@media (min-width: 1024px) {
	.mg-rtopo { padding-top: 28px; }
	.mg-rtopo--banner { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); align-items: center; gap: 40px; }
}

.mg-rh1 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--mg-marinho);
	overflow-wrap: anywhere;
}
.mg-rh1 span { color: var(--mg-azul); }
@media (min-width: 768px) { .mg-rh1 { font-size: 30px; line-height: 1.2; } }
@media (min-width: 1280px) { .mg-rh1 { font-size: 36px; } }

.mg-rconta { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mg-texto-2); }

/* ── Campo de busca (B4): linha própria, largura do container ───────────── */

.mg-rcampo-linha { padding-top: 14px; }
@media (min-width: 1024px) { .mg-rcampo-linha { padding-top: 22px; } }

.mg-rcampo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 40px;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 12px;
	box-shadow: var(--mg-sombra-card);
}
.mg-rcampo:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 1px; }
.mg-rcampo__lupa {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--mg-marinho);
	stroke-width: 2.2;
	stroke-linecap: round;
	pointer-events: none;
}
.mg-rcampo input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0;
	background: transparent;
	font: 500 15px/1 var(--mg-fonte);
	color: var(--mg-marinho);
}
.mg-rcampo input::placeholder { color: var(--mg-texto-2); opacity: 1; }
.mg-rcampo input:focus { outline: none; }
.mg-rcampo button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 9px;
	background: var(--mg-azul);
	color: #fff;
	font: 700 14px/1 var(--mg-fonte);
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rcampo button svg { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mg-rcampo button:hover { background: var(--mg-azul-hover); }
.mg-rcampo button:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-rcampo button:active { transform: scale(var(--mg-ativo-escala)); }
@media (min-width: 768px) {
	.mg-rcampo { padding: 7px 7px 7px 50px; }
	.mg-rcampo__lupa { left: 20px; width: 19px; height: 19px; }
	.mg-rcampo input { height: 48px; }
	.mg-rcampo button { height: 48px; padding: 0 34px; font-size: 14.5px; }
	.mg-rcampo button svg { display: block; }
}

/* Carrossel de banners. Sem JS: rola de lado com o dedo ou a barra. */
.mg-rtopo__ban { min-width: 0; }
.mg-rban { position: relative; min-width: 0; }
.mg-rban__trilho {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 14px;
}
.mg-rban__trilho::-webkit-scrollbar { display: none; }
.mg-rban__slide {
	position: relative;
	isolation: isolate;
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 12px;
	padding: 18px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--mg-marinho);
	color: #fff;
}
.mg-rban__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Véu funcional sobre a foto (legibilidade do texto branco), não é gradiente decorativo. */
.mg-rban__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(8, 20, 36, .9) 0%, rgba(8, 20, 36, .66) 55%, rgba(8, 20, 36, .3) 100%);
}
.mg-rban__txt { max-width: 440px; }
.mg-rban__titulo { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.mg-rban__texto { margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; color: #fff; }
.mg-rban__botao {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 9px;
	background: #ff7a00;
	color: var(--mg-marinho);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rban__botao:hover { background: #ff8f26; color: var(--mg-marinho); }
.mg-rban__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-rban__botao:active { transform: scale(var(--mg-ativo-escala)); }
.mg-rban__nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.mg-rban__nav[hidden] { display: none; }
.mg-rban__seta {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 99px;
	background: #fff;
	color: var(--mg-marinho);
	cursor: pointer;
}
.mg-rban__seta:hover { border-color: var(--mg-azul); color: var(--mg-azul); }
.mg-rban__seta:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-rban__seta:active { background: var(--mg-ativo-fundo); transform: scale(var(--mg-ativo-escala)); }
.mg-rban__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-rban__pos { min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; color: var(--mg-texto-2); }
@media (min-width: 768px) {
	.mg-rban__slide { min-height: 180px; padding: 22px 24px; }
	.mg-rban__titulo { font-size: 19px; }
}

/* ── Abas: pílula no celular; raio 11 e ícone a partir de 1024 (B5) ──────── */

.mg-rabas { padding-top: 16px; }
.mg-rabas ul {
	display: flex;
	gap: 8px;
	margin: 0 -16px;
	padding: 4px 16px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 16px;
}
.mg-rabas ul::-webkit-scrollbar { display: none; }
.mg-rabas li { flex: none; }
.mg-rabas a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 99px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--mg-texto);
	white-space: nowrap;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.mg-rabas a .mg-rsvg { display: none; width: 16px; height: 16px; stroke-width: 1.8; color: var(--mg-azul); }
.mg-rabas a span { font-weight: 500; color: var(--mg-texto-2); }
.mg-rabas a:hover { border-color: var(--mg-borda-hover); color: var(--mg-marinho); }
.mg-rabas a:active { background: var(--mg-ativo-fundo); }
.mg-rabas a[aria-current="page"] { background: var(--mg-azul); border-color: var(--mg-azul); color: #fff; font-weight: 700; }
.mg-rabas a[aria-current="page"] span,
.mg-rabas a[aria-current="page"] .mg-rsvg { color: #fff; }
.mg-rabas a[aria-current="page"]:hover { background: var(--mg-azul-hover); border-color: var(--mg-azul-hover); }
.mg-rabas a:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
@media (min-width: 768px) {
	.mg-rabas ul { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1024px) {
	.mg-rabas { padding-top: 18px; }
	.mg-rabas ul { gap: 12px; }
	.mg-rabas a { gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 11px; font-size: 13px; }
	.mg-rabas a .mg-rsvg { display: block; }
}

/* ── Grade: filtros, resultados e alerta ─────────────────────────────────── */

.mg-rgrade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "filtros" "main" "alerta";
	gap: 20px;
	padding-top: 20px;
	align-items: start;
}
.mg-rfiltros { grid-area: filtros; min-width: 0; }
.mg-rmain { grid-area: main; min-width: 0; }
.mg-ralerta-casa { grid-area: alerta; min-width: 0; }

/* Com JS, abaixo de 1024px o formulário mora no modal (botão Filtrar). */
.mg-js .mg-rfiltros { display: none; }

@media (min-width: 1024px) {
	.mg-rgrade {
		grid-template-columns: 290px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "filtros main" "alerta main";
		gap: 16px 26px;
		padding-top: 24px;
	}
	.mg-js .mg-rfiltros { display: block; }
}

/* Formulário de filtros. */
.mg-rform {
	display: grid;
	gap: 16px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: var(--mg-raio-card);
}
.mg-rform__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.mg-rform__h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 800; color: var(--mg-marinho); }
.mg-rform__h2 svg { width: 19px; height: 19px; fill: none; stroke: var(--mg-azul); stroke-width: 2; stroke-linecap: round; }
.mg-rform__limpar {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mg-azul);
	text-decoration: none;
}
.mg-rform__limpar:hover { color: var(--mg-azul-hover); text-decoration: underline; }
.mg-rform__limpar:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; border-radius: 4px; }
.mg-rform__limpar:active { color: var(--mg-marinho); }
.mg-rform fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mg-rform__rot { display: block; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 700; color: var(--mg-marinho); }
.mg-rform__rot--leve { margin-bottom: 6px; font-size: 12.5px; color: var(--mg-texto); }
.mg-rform__nota { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--mg-texto-2); }
.mg-rform__nota--campo { margin-top: 6px; font-size: 12px; }

/* 2.5.452: seção própria de quem incluiu a busca, abaixo dos resultados (taxistas na /mobilidade). */
.mg-rdepois { margin-top: 28px; }
.mg-rdepois__aviso { margin: 0 0 28px; padding: 14px 16px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 11px; font-size: 13.5px; line-height: 1.6; color: #78350f; }

/* 2.5.451: Localização do handoff (linhas 125-127): rótulo com alfinete, a cidade fixa e o bairro. */
.mg-rlocal__rot { display: flex; align-items: center; gap: 7px; }
.mg-rlocal__rot svg,
.mg-rlocal__cidade svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--mg-azul); stroke-width: 1.9; stroke-linecap: round; }
.mg-rlocal__cidade {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	margin: 0 0 9px;
	padding: 0 12px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 9px;
	font: 500 14px/1.2 var(--mg-fonte);
	color: var(--mg-marinho);
}

.mg-rtipos { display: grid; gap: 0; }
.mg-rtipo-op {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 13.5px;
	color: var(--mg-texto);
	cursor: pointer;
}
.mg-rtipo-op input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--mg-azul); }
.mg-rtipo-op__n { color: var(--mg-texto-2); }
.mg-rtipo-op input:checked + span { font-weight: 700; color: var(--mg-marinho); }
.mg-rtipo-op:hover > span { color: var(--mg-marinho); }

.mg-rsel {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 9px;
	background: #fff;
	font: 500 14px/1.2 var(--mg-fonte);
	color: var(--mg-marinho);
}
.mg-rsel:hover { border-color: var(--mg-borda-hover); }
.mg-rsel:focus { outline: 2px solid var(--mg-azul); outline-offset: 0; border-color: transparent; }
.mg-rsim { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--mg-marinho); cursor: pointer; }
.mg-rsim input { width: 18px; height: 18px; margin: 0; accent-color: var(--mg-azul); }

.mg-rform fieldset.mg-rform__bloco {
	display: grid;
	gap: 12px;
	padding: 14px;
	background: var(--mg-fundo);
	border: 1px solid var(--mg-borda-campo);
	border-radius: 11px;
}
.mg-rform__bloco legend { float: left; width: 100%; margin-bottom: 2px; }
.mg-rform__bloco legend + * { clear: both; }

/* Chips (B8 no bloco da aba; B13 no tipo de resultado dentro do modal). Rádios de verdade, só
   escondidos da vista: o foco e a escolha continuam do navegador. */
.mg-rchips { display: flex; flex-wrap: wrap; gap: 0 6px; }
.mg-rchip,
.mg-rmodal .mg-rtipo-op {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	min-height: 44px;
	cursor: pointer;
}
.mg-rchip input,
.mg-rmodal .mg-rtipo-op input {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.mg-rchip > span,
.mg-rmodal .mg-rtipo-op > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 99px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--mg-borda-campo);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mg-texto);
	transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.mg-rmodal .mg-rtipo-op > span { min-height: 36px; padding: 0 13px; background: var(--mg-suave); box-shadow: none; }
.mg-rchip:hover > span,
.mg-rmodal .mg-rtipo-op:hover > span { box-shadow: inset 0 0 0 1px var(--mg-borda-hover); color: var(--mg-marinho); }
.mg-rchip input:checked + span,
.mg-rmodal .mg-rtipo-op input:checked + span { background: var(--mg-azul); box-shadow: none; color: #fff; font-weight: 700; }
.mg-rmodal .mg-rtipo-op input:checked + span .mg-rtipo-op__n { color: #fff; }
.mg-rchip input:focus-visible + span,
.mg-rmodal .mg-rtipo-op input:focus-visible + span { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-rchip:active > span,
.mg-rmodal .mg-rtipo-op:active > span { transform: scale(var(--mg-ativo-escala)); }
.mg-rmodal .mg-rtipos { display: flex; flex-wrap: wrap; gap: 0 8px; }

/* Rodapé: Aplicar; no modal, Cancelar ao lado (B13). */
.mg-rform__rodape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mg-rform__aplicar,
.mg-rform__cancelar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--mg-raio-botao);
	font: 700 14px/1 var(--mg-fonte);
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rform__aplicar { background: var(--mg-azul); color: #fff; }
.mg-rform__aplicar:hover { background: var(--mg-azul-hover); }
.mg-rform__cancelar { display: none; background: var(--mg-suave); color: var(--mg-texto); }
.mg-rform__cancelar:hover { background: var(--mg-borda); color: var(--mg-marinho); }
.mg-rform__aplicar:focus-visible,
.mg-rform__cancelar:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-rform__aplicar:active,
.mg-rform__cancelar:active { transform: scale(var(--mg-ativo-escala)); }

/* Barra acima dos resultados (B10, B14). */
.mg-rbarra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mg-rbarra__conta { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--mg-marinho); }
@media (min-width: 768px) { .mg-rbarra__conta { font-size: 17px; } }
.mg-rbarra__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-rbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 9px;
	background: #fff;
	font: 600 13px/1 var(--mg-fonte);
	color: var(--mg-texto);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.mg-rbtn[hidden] { display: none; }
.mg-rbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-rbtn:hover { border-color: var(--mg-borda-hover); color: var(--mg-marinho); }
.mg-rbtn:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-rbtn:active { transform: scale(var(--mg-ativo-escala)); }
.mg-rbtn[aria-pressed="true"] { background: var(--mg-azul); border-color: var(--mg-azul); color: #fff; font-weight: 700; }
.mg-rbtn[aria-pressed="true"]:hover { background: var(--mg-azul-hover); border-color: var(--mg-azul-hover); color: #fff; }
.mg-rfiltrar { background: var(--mg-azul); border-color: var(--mg-azul); color: #fff; font-weight: 700; }
.mg-rfiltrar:hover { background: var(--mg-azul-hover); border-color: var(--mg-azul-hover); color: #fff; }
.mg-rfiltrar:focus-visible { outline-color: var(--mg-marinho); }
.mg-rfiltrar__n {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	background: #fff;
	color: #0d4fa8;
	font-size: 11px;
	font-weight: 800;
}
.mg-rlayout { display: inline-flex; gap: 6px; }
.mg-rlayout[hidden] { display: none; }
@media (max-width: 639px) { .mg-rlayout { display: none !important; } }
@media (min-width: 1024px) { .mg-rfiltrar, .mg-rordenar { display: none !important; } }

.mg-raviso {
	margin: 0 0 14px;
	padding: 11px 14px;
	border: 1px solid #bfe6d2;
	border-radius: 10px;
	background: #e9f7f0;
	color: #0a6b42;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.mg-raviso--erro { background: var(--mg-erro-fundo); border-color: var(--mg-erro-fundo); color: var(--mg-erro); }

/* Seções da visão "Tudo". */
.mg-rsecao + .mg-rsecao,
.mg-rcta + .mg-rsecao,
.mg-rsecao + .mg-rcta { margin-top: 28px; }
.mg-rsecao__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mg-rsecao__h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--mg-marinho); }
.mg-rsecao__n { font-size: 13px; font-weight: 600; color: var(--mg-texto-2); }
.mg-rsecao__nota { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--mg-texto-2); }
.mg-rsecao__todos {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mg-azul);
	text-decoration: none;
}
.mg-rsecao__todos:hover { color: var(--mg-azul-hover); text-decoration: underline; }
.mg-rsecao__todos:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; border-radius: 4px; }
.mg-rsecao__todos:active { color: var(--mg-marinho); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.mg-rlista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) {
	.mg-rlista.is-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mg-rlista.is-grade .mg-rcta { grid-column: 1 / -1; }
}
@media (min-width: 768px) { .mg-busca-tela .mg-rlista { gap: 14px; } }
@media (min-width: 1280px) {
	.mg-rlista.is-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mg-rcard {
	position: relative;
	display: flex;
	gap: 12px;
	min-width: 0;
	padding: 13px;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 13px;
	box-shadow: var(--mg-sombra-card);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.mg-rcard:hover { border-color: var(--mg-borda-hover); box-shadow: var(--mg-sombra-elevada); }
.mg-rcard:active { box-shadow: var(--mg-sombra-card); }
.mg-rcard:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }

.mg-rcard__foto {
	flex: none;
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	background: #eef5fe;
	color: var(--mg-texto-2);
}
.mg-rcard__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-rcard__foto--vazia .mg-rsvg { width: 28px; height: 28px; stroke-width: 1.8; }

.mg-rcard__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mg-rcard__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-rcard__seta { display: none; }

.mg-rtipo,
.mg-rselo,
.mg-rdestaque {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}
.mg-rtipo { background: #eaf2fd; color: #0d4fa8; }
.mg-rtipo--empresa { background: #e9f7f0; color: #0a6b42; }
.mg-rtipo--imovel { background: var(--mg-azul-suave); color: #0d4fa8; }
.mg-rtipo--veiculo { background: var(--mg-borda); color: var(--mg-marinho); }
.mg-rtipo--evento { background: #f1ecfd; color: #5b35a8; }
.mg-rtipo--vaga { background: #eaf2fd; color: #0d4fa8; }
.mg-rtipo--viagem { background: #fff; color: #0d4fa8; box-shadow: inset 0 0 0 1px var(--mg-borda-hover); }
.mg-rtipo--noticia,
.mg-rtipo--item { background: var(--mg-suave); color: var(--mg-texto); }
.mg-rselo { font-weight: 600; background: var(--mg-suave); color: var(--mg-texto); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 2.5.452: texto branco, como no handoff (linha 199). Decisão do dono em 16/09 — o texto marinho de antes era por contraste (branco no laranja fica em 2,9:1). */
.mg-rdestaque { margin-left: auto; border-radius: 6px; background: #ff7a00; color: #fff; font-weight: 800; }

.mg-rcard__titulo { margin: 2px 0 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--mg-azul); overflow-wrap: anywhere; }
.mg-rcard__link { color: var(--mg-azul); text-decoration: none; }
.mg-rcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mg-rcard:hover .mg-rcard__link { color: var(--mg-azul-hover); text-decoration: underline; text-underline-offset: 3px; }
.mg-rcard__link:focus-visible { outline: none; }

.mg-rcard__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mg-texto-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mg-rcard__preco { margin: 1px 0 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--mg-marinho); }

.mg-rcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 4px 0 0;
	padding: 8px 0 0;
	list-style: none;
	border-top: 1px solid var(--mg-borda);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--mg-texto-2);
}
.mg-rcard__meta li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mg-rcard__meta .mg-rsvg { color: var(--mg-separador); }
.mg-rforte span { font-weight: 700; color: var(--mg-texto); }
.mg-rnota .mg-rsvg { color: #f5a524; fill: #f5a524; }
.mg-rnota__media { font-weight: 800; color: var(--mg-marinho); }
.mg-rler-li { margin-left: auto; }
.mg-rler { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--mg-azul); }

/* "Aberto agora" / "Fechado", preenchido pelo gcep-hours.js. */
.mg-rhora .gcep-hours-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
}
.mg-rhora .gcep-hours-chip.is-open { background: #e9f7f0; color: #0a6b42; }
.mg-rhora .gcep-hours-chip.is-closed { background: var(--mg-suave); color: var(--mg-texto-2); }
.mg-rhora .gcep-hours-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.mg-rhora .gcep-hours-extra { font-weight: 500; }

@media (min-width: 768px) {
	.mg-rcard { gap: 16px; padding: 16px; }
	.mg-rcard__foto { width: 112px; height: 112px; }
	.mg-rcard__titulo { font-size: 16px; }
}

/*
 * B2 — card da busca no celular: foto 72px e título lado a lado; os metadados descem para uma faixa
 * de largura cheia, com divisória. O corpo vira `display: contents` para as peças entrarem na grade
 * do card sem mudar a marcação; a 3ª linha é 1fr para a sobra da foto cair nela.
 */
@media (max-width: 767px) {
	.mg-busca-tela .mg-rcard {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 12px;
		row-gap: 5px;
		align-items: start;
	}
	.mg-busca-tela .mg-rcard__corpo { display: contents; }
	.mg-busca-tela .mg-rcard__corpo > * { grid-column: 2; }
	.mg-busca-tela .mg-rcard__foto { grid-column: 1; grid-row: 1 / span 3; width: 72px; height: 72px; }
	.mg-busca-tela .mg-rcard__corpo > .mg-rcard__meta { grid-column: 1 / -1; gap: 4px 12px; margin-top: 6px; padding-top: 10px; font-size: 12px; }
}

/* B9 — card da busca a partir de 768: raio 14, foto 118×92, metadados sem divisória, seta ›. */
@media (min-width: 768px) {
	.mg-busca-tela .mg-rcard { align-items: center; gap: 18px; border-radius: var(--mg-raio-card); }
	.mg-busca-tela .mg-rcard__foto { width: 118px; height: 92px; border-radius: 11px; }
	.mg-busca-tela .mg-rcard__meta { gap: 8px 20px; margin-top: 6px; padding-top: 0; border-top: 0; }
	.mg-busca-tela .mg-rcard__seta { display: flex; flex: none; color: var(--mg-azul); }
	.mg-busca-tela .mg-rcard__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}

/* Grade: foto em cima, sem seta. */
@media (min-width: 640px) {
	.mg-rlista.is-grade .mg-rcard { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
	.mg-rlista.is-grade .mg-rcard__corpo { display: flex; }
	.mg-rlista.is-grade .mg-rcard__foto { width: 100%; height: auto; aspect-ratio: 16 / 10; }
	.mg-rlista.is-grade .mg-rcard__foto--vazia { aspect-ratio: 16 / 7; }
	.mg-rlista.is-grade .mg-rcard__seta { display: none; }
}

/* ── Chamada do grupo (B11: fundo liso, sem gradiente decorativo) ───────── */

.mg-rcta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: var(--mg-raio-card);
	background: var(--mg-marinho);
	color: #fff;
}
.mg-rcta__titulo { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; color: #fff; }
.mg-rcta__texto { margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; color: #fff; }
.mg-rcta__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: var(--mg-raio-botao);
	background: #ff7a00;
	color: var(--mg-marinho);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rcta__botao:hover { background: #ff8f26; color: var(--mg-marinho); }
.mg-rcta__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-rcta__botao:active { transform: scale(var(--mg-ativo-escala)); }
@media (min-width: 768px) {
	.mg-rcta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; }
}

/* ── Paginação ──────────────────────────────────────────────────────────── */

.mg-rpag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.mg-rpag__link {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var(--mg-borda-hover);
	border-radius: var(--mg-raio-botao);
	background: #fff;
	color: var(--mg-azul);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rpag__link:hover { background: #eef5fe; color: var(--mg-azul-hover); }
.mg-rpag__link:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-rpag__link:active { transform: scale(var(--mg-ativo-escala)); }
.mg-rpag__link--sec { color: var(--mg-texto); border-color: var(--mg-borda-campo); }
.mg-rpag__info { font-size: 13px; color: var(--mg-texto-2); }

/* ── Estados vazios (B3, B12) ───────────────────────────────────────────── */

.mg-rvazio {
	padding: 32px 20px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 13px;
}
.mg-rvazio__icone {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	background: var(--mg-suave);
	color: var(--mg-separador);
}
.mg-rvazio__icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mg-rvazio__h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-rvazio__h2 span { color: var(--mg-azul); }
.mg-rvazio__texto { margin: 0 auto 18px; max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--mg-texto-2); overflow-wrap: anywhere; }
.mg-rvazio__texto strong { color: var(--mg-marinho); }
.mg-rvazio__acoes { display: flex; flex-direction: column; gap: 9px; max-width: 320px; margin: 0 auto; }
.mg-rvazio__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1.5px solid var(--mg-azul);
	border-radius: 9px;
	background: var(--mg-azul);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rvazio__botao:hover { background: var(--mg-azul-hover); border-color: var(--mg-azul-hover); color: #fff; }
.mg-rvazio__botao--sec { background: #fff; color: var(--mg-azul); border-color: var(--mg-borda-hover); }
.mg-rvazio__botao--sec:hover { background: #eef5fe; color: var(--mg-azul-hover); border-color: var(--mg-borda-hover); }
.mg-rvazio__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-rvazio__botao:active { transform: scale(var(--mg-ativo-escala)); }

/* ── Alerta de busca (B6: azul, sem laranja) ────────────────────────────── */

.mg-ralerta { display: grid; gap: 13px; padding: 18px; background: #eef5fe; border: 1px solid var(--mg-borda-campo); border-radius: var(--mg-raio-card); }
.mg-ralerta__cab { display: flex; align-items: flex-start; gap: 11px; }
.mg-ralerta__icone {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	background: #fff;
	color: var(--mg-azul);
}
.mg-ralerta__icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-ralerta__h2 { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: #0d4fa8; }
.mg-ralerta__texto { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mg-texto-2); }
.mg-ralerta form { margin: 0; }
.mg-ralerta__botao {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--mg-borda-hover);
	border-radius: 9px;
	background: #fff;
	color: var(--mg-azul);
	font: 700 14px/1 var(--mg-fonte);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, transform .1s ease;
}
.mg-ralerta__botao:hover { border-color: var(--mg-azul); color: var(--mg-azul-hover); }
.mg-ralerta__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-ralerta__botao:active { transform: scale(var(--mg-ativo-escala)); }
.mg-ralerta__ok { margin: 0; font-size: 13.5px; font-weight: 600; color: #0a6b42; }
.mg-ralerta__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--mg-azul); text-decoration: none; }
.mg-ralerta__link:hover { color: var(--mg-azul-hover); text-decoration: underline; }
.mg-ralerta__link:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; border-radius: 4px; }
.mg-ralerta__link:active { color: var(--mg-marinho); }

/* ── Modal de filtros (celular, B13) ────────────────────────────────────── */

.mg-rmodal {
	position: fixed;
	width: 100%;
	max-width: 100%;
	max-height: 90vh;
	max-height: 90dvh;
	margin: auto 0 0;
	padding: 0;
	border: 0;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: var(--mg-texto);
	box-shadow: 0 -6px 20px rgba(13, 43, 92, .16);
	overflow: hidden;
}
.mg-rmodal[open] { display: flex; flex-direction: column; }
.mg-rmodal::backdrop { background: rgba(8, 20, 36, .55); }
.mg-rmodal__alca { display: block; flex: none; width: 42px; height: 4px; margin: 12px auto 0; border-radius: 99px; background: var(--mg-borda-campo); }
.mg-rmodal__fechar {
	position: absolute;
	top: 20px;
	right: 10px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 99px;
	background: var(--mg-suave);
	color: var(--mg-marinho);
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rmodal__fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mg-rmodal__fechar:hover { background: var(--mg-borda); }
.mg-rmodal__fechar:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-rmodal__fechar:active { background: var(--mg-ativo-fundo); transform: scale(var(--mg-ativo-escala)); }
.mg-rmodal__corpo { overflow-y: auto; overscroll-behavior: contain; }
.mg-rmodal .mg-rform { border: 0; border-radius: 0; padding: 0 16px; }
.mg-rmodal .mg-rform__cab { margin: 0 -16px; padding: 6px 64px 10px 16px; border-bottom: 1px solid var(--mg-borda); }
.mg-rmodal .mg-rform__rodape {
	position: sticky;
	bottom: 0;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	margin: 0 -16px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--mg-borda);
}
.mg-rmodal .mg-rform__cancelar { display: inline-flex; }
@media (min-width: 640px) {
	.mg-rmodal { max-width: 520px; margin: auto; border-radius: 16px; }
	.mg-rmodal__alca { display: none; }
	.mg-rmodal__fechar { top: 10px; }
	.mg-rmodal .mg-rform__cab { padding-top: 10px; }
}

/* ── /salvos: alertas de busca ──────────────────────────────────────────── */

.mg-salertas { margin: 8px 0 28px; }
.mg-salertas__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mg-salertas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mg-salertas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-salerta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 13px;
	box-shadow: var(--mg-sombra-card);
}
.mg-salerta__titulo { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-salerta__meta { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--mg-texto-2); }
.mg-salerta__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.mg-salerta__acoes form { margin: 0; }
.mg-salerta__ver { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--mg-azul); text-decoration: none; }
.mg-salerta__ver:hover { color: var(--mg-azul-hover); text-decoration: underline; }
.mg-salerta__ver:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; border-radius: 4px; }
.mg-salerta__ver:active { color: var(--mg-marinho); }
.mg-salerta__remover {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 9px;
	background: #fff;
	color: var(--mg-texto-2);
	font: 700 13px/1 var(--mg-fonte);
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-salerta__remover:hover { background: var(--mg-erro-fundo); color: var(--mg-erro); border-color: var(--mg-erro-fundo); }
.mg-salerta__remover:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-salerta__remover:active { transform: scale(var(--mg-ativo-escala)); }

@media (prefers-reduced-motion: reduce) {
	.mg-rcard,
	.mg-rcampo button,
	.mg-rabas a,
	.mg-rbtn,
	.mg-rchip > span,
	.mg-rmodal .mg-rtipo-op > span,
	.mg-rform__aplicar,
	.mg-rform__cancelar,
	.mg-rcta__botao,
	.mg-rban__botao,
	.mg-rpag__link,
	.mg-rvazio__botao,
	.mg-ralerta__botao,
	.mg-rmodal__fechar,
	.mg-salerta__remover { transition: none; }
	.mg-rban__trilho { scroll-behavior: auto; }
}
@media print {
	.mg-rfiltros, .mg-ralerta-casa, .mg-rban, .mg-rcta, .mg-rbarra__acoes, .mg-rmodal { display: none !important; }
}

/* ── Chamadas do topo (2.5.453) ─────────────────────────────────────────────
   `Resultados de Busca Morro Guia.dc.html`, linhas 72-87: caixa #EEF5FE com borda #DCE8F8, raio 14,
   setas redondas nas pontas, ícone em quadrado branco de 48px, botão azul e bolinhas embaixo.
   No celular não aparece: o `Mobile Telas` não tem essa caixa. */
.mg-rchamada {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 18px 28px;
	background: #eef5fe;
	border: 1px solid #dce8f8;
	border-radius: 14px;
}
.mg-rchamada__trilho {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.mg-rchamada__trilho::-webkit-scrollbar { display: none; }
/* Respiro de 6px de cada lado: a fração de pixel da rolagem mostrava a beirada do botão vizinho. */
.mg-rchamada__slide { box-sizing: border-box; flex: 0 0 100%; min-width: 0; display: flex; align-items: center; gap: 18px; padding: 0 6px; scroll-snap-align: start; }
.mg-rchamada__icone { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; }
.mg-rchamada__icone svg { width: 25px; height: 25px; fill: none; stroke: var(--mg-azul); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mg-rchamada__txt { flex: 1 1 auto; min-width: 0; }
.mg-rchamada__titulo { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--mg-marinho); }
.mg-rchamada__texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mg-texto-2); }
.mg-rchamada__botao {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 9px;
	background: var(--mg-azul);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, transform .1s ease;
}
.mg-rchamada__botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-rchamada__botao:hover { background: var(--mg-azul-hover); color: #fff; }
.mg-rchamada__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }
.mg-rchamada__botao:active { transform: scale(var(--mg-ativo-escala)); }
.mg-rchamada__seta {
	flex: none;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #dce8f8;
	border-radius: 99px;
	background: #fff;
	color: var(--mg-marinho);
	cursor: pointer;
}
.mg-rchamada__seta[hidden] { display: none; }
.mg-rchamada__seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-rchamada__seta:hover { border-color: var(--mg-azul); color: var(--mg-azul); }
.mg-rchamada__seta:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-rchamada__pontos { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 2px; }
.mg-rchamada__pontos[hidden] { display: none; }
.mg-rchamada__ponto { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mg-rchamada__ponto::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #c3d6ef; }
.mg-rchamada__ponto[aria-current="true"]::before { background: var(--mg-azul); }
.mg-rchamada__ponto:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 0; border-radius: 99px; }
@media (max-width: 767.98px) { .mg-rtopo__ban--chamada { display: none; } }
@media (prefers-reduced-motion: reduce) { .mg-rchamada__botao { transition: none; } }

/* ── Celular igual ao `Mobile Telas Morro Guia.dc.html` (tela BUSCA, linhas 47-128 e 717-747) ──
   2.5.452, 16/09/2026, pedido do dono: "faz o celular igual HTML mobile". Fica no FIM do arquivo
   de propósito: regra de celular antes das regras gerais perde pela ordem.
   Desvios que ficam: alvo de toque de 40-44px nas abas, botões e chips (a medida do HTML dá 34px,
   abaixo do mínimo de toque da auditoria) e letra de no mínimo 11px. O cabeçalho e a barra de
   baixo são os do redesign mobile, não os do handoff. */

/* "Use os filtros ao lado" só vale onde os filtros estão ao lado. */
@media (max-width: 1023.98px) { .mg-rconta__dica { display: none; } }

@media (max-width: 767.98px) {
	.mg-rtopo { padding-top: 16px; }
	.mg-rh1 { margin-bottom: 8px; font-size: 21px; }
	.mg-rconta { font-size: 13px; line-height: 1.55; }

	/* Campo: raio 11, respiro 6/6/6/14, botão 12x18 só com a palavra. */
	.mg-rcampo { padding: 5px 5px 5px 40px; border-radius: 11px; box-shadow: none; }
	.mg-rcampo input { font-size: 15px; }
	.mg-rcampo button { height: 42px; padding: 0 18px; border-radius: 8px; font-size: 13.5px; }

	/* Abas em pílula, roláveis de lado, encostando nas bordas da tela. */
	.mg-rabas a { min-height: 40px; padding: 0 15px; font-size: 12.5px; }
	.mg-rabas a svg { display: none; }

	/* Abas e barra a 14px uma da outra. Com JS a coluna de filtros fica vazia (foi para o modal) e
	   não pode somar o espaço da grade. */
	.mg-rgrade { padding-top: 14px; }
	.mg-js .mg-rgrade { row-gap: 0; }
	.mg-js .mg-ralerta-casa { margin-top: 20px; }
	.mg-rabas { padding-top: 12px; }

	/* "28 resultados" à esquerda e Filtrar/Ordenar à direita, numa linha só. */
	.mg-rbarra { flex-wrap: nowrap; gap: 8px; margin: 0 0 14px; }
	.mg-rbarra__conta { font-size: 13.5px; white-space: nowrap; }
	.mg-rbarra__extra { display: none; }
	.mg-rbarra__acoes { flex-wrap: nowrap; }
	.mg-rfiltrar, .mg-rordenar { min-height: 40px; padding: 0 14px; font-size: 12.5px; }
	.mg-rordenar svg { display: none; }

	/* Card: 13 de respiro, raio 13, foto 72, rodapé com linha e sem ícones. */
	.mg-busca-tela .mg-rlista { gap: 11px; }
	.mg-busca-tela .mg-rcard__titulo { font-size: 14px; line-height: 1.35; }
	.mg-busca-tela .mg-rcard__sub { font-size: 12px; }
	.mg-busca-tela .mg-rcard__corpo > .mg-rcard__meta { font-size: 12px; gap: 6px 14px; padding-top: 11px; }
	.mg-busca-tela .mg-rcard__meta svg { display: none; }
	.mg-busca-tela .mg-rtipo, .mg-busca-tela .mg-rselo, .mg-busca-tela .mg-rdestaque { padding: 5px 9px; font-size: 11px; }

	.mg-rsecao__h2 { font-size: 16px; }

	/* Modal: "Filtros" e "Limpar" no cabeçalho, sem ícone e sem X — o Cancelar fecha. */
	.mg-rmodal__fechar { display: none; }
	.mg-rmodal .mg-rform__cab { padding: 6px 16px 10px; }
	.mg-rmodal .mg-rform__h2 { font-size: 15px; }
	.mg-rmodal .mg-rform__h2 svg { display: none; }
	.mg-rmodal .mg-rform__limpar { font-size: 12.5px; font-weight: 600; }
	.mg-rmodal .mg-rform__limpar-extra { display: none; }
	.mg-rmodal .mg-rform { gap: 18px; padding-top: 0; }
	.mg-rmodal .mg-rform__rot { font-size: 12.5px; }
	.mg-rmodal .mg-rchip > span { min-height: 36px; padding: 0 12px; font-size: 12px; }
}

/* 16/09/2026 - Valoar: no `Resultados de Busca Morro Guia.dc.html` a caixa da página é BRANCA (linha 18:
   `width:1440px; background:#fff`) sobre o fundo #e9ecf1. Aqui ela herdava o #f6f8fb da casca e, ao
   lado do fundo de fora, a caixa quase sumia. Branca em toda largura; acima de 1440 ganha o fio dos lados. */
@media (min-width: 768px) {
	body.mg-busca-pagina.gcep-public-frontend #gcep-conteudo,
	body.mg-busca-pagina .mg-busca-tela { background: #fff; }
}
@media (min-width: 768px) and (max-width: 1440px) {
	body.mg-busca-pagina.gcep-public-frontend.bg-background-light { background: #fff; }
}
@media (min-width: 1441px) {
	body.mg-busca-pagina.gcep-public-frontend #gcep-conteudo { box-shadow: -1px 0 0 #dbe3ee, 1px 0 0 #dbe3ee; }
}

/* ── Celular, revisão de 16/09/2026 (ui-ux-pro-max + Mobile Telas, bloco BUSCA) ─────────────────
   - Fundo #F6F8FB como no protótipo de celular (linha 30): no branco os cards sumiam. A caixa branca
     é do desktop.
   - A faixa de abas rola de lado; as pontas esmaecem para a pílula cortada parecer continuação, e
     não defeito.
   - Tipo, categoria e "Destaque" numa linha só: a categoria encurta com reticências em vez de jogar
     o "Destaque" para uma terceira linha em 320px. */
@media (max-width: 767.98px) {
	body.mg-busca-pagina .mg-busca-tela { background: var(--mg-fundo); }
	body.mg-busca-pagina .gcep-migalha { padding-block: 10px 0; }
	.mg-rtopo { padding-top: 14px; }

	.mg-rabas ul {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
	}

	.mg-busca-tela .mg-rcard__topo { flex-wrap: nowrap; min-width: 0; }
	.mg-busca-tela .mg-rcard__topo > * { flex: none; }
	.mg-busca-tela .mg-rcard__topo > .mg-rselo { display: block; flex: 0 1 auto; min-width: 0; }
	.mg-busca-tela .mg-rcard__meta li { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* O card inteiro é o link: o toque dá retorno visual. */
	.mg-busca-tela .mg-rcard { -webkit-tap-highlight-color: transparent; }
	.mg-busca-tela .mg-rcard:active { background: var(--mg-ativo-fundo, #f1f5fa); }
}
/* Em 320-374px não sobra lugar para a categoria ao lado de "Destaque": ela sai do card (continua na ficha). */
@media (max-width: 374.98px) {
	.mg-busca-tela .mg-rcard__topo:has(.mg-rdestaque) > .mg-rselo { display: none; }
}

/* 16/09/2026: o select não mostrava a seta (o reset do tema tira a aparência nativa) e parecia campo de
   texto. A borda de foco fica para o teclado; no toque o picker nativo já mostra onde se está. */
select.mg-rsel {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 38px;
	background: #fff 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") no-repeat right 12px center / 16px 16px;
	cursor: pointer;
}
.mg-rsel:focus:not(:focus-visible) { outline: none; border-color: var(--mg-borda-hover); }

/* 16/09/2026: no celular as abas de tipo saem (pedido do dono). Na busca, cada grupo de resultado tem o
   próprio "Ver todos"; nas listagens (/imoveis, /veiculos…) o caminho para outro tipo é o menu. */
@media (max-width: 767.98px) {
	.mg-busca-tela .mg-rabas { display: none; }
}

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

/* ================= HERÓI E FAIXA FINAL (mockup de 21/09/2026) ================= *
 * O mockup "Pagina resultado de busca.jpg" abre com foto, migalha branca e o campo de busca
 * dentro do herói, e fecha com a faixa laranja convidando a continuar. O miolo (abas, filtros e
 * seções) é o que a tela já tinha.
 */
.mg-rhero { position: relative; display: flex; align-items: flex-end; min-height: 300px; overflow: hidden; background: #0d2b5c; }
@media (min-width: 900px) { .mg-rhero { min-height: 340px; } }
.mg-rhero__foto { position: absolute; inset: 0; margin: 0; }
.mg-rhero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.mg-rhero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6, 20, 40, .72) 0%, rgba(6, 20, 40, .52) 42%, rgba(6, 20, 40, .82) 100%);
}
.mg-rhero__grade { position: relative; z-index: 1; width: 100%; padding-top: 26px; padding-bottom: 22px; }
.mg-rhero__migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.mg-rhero__migalha a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.mg-rhero__migalha a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mg-rhero__migalha [aria-current] { color: #fff; font-weight: 700; }
.mg-rhero__h1 {
	max-width: 20ch; margin: 12px 0 0; font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; line-height: 1.08;
	letter-spacing: -.03em; color: #fff;
}
.mg-rhero__sub { max-width: 58ch; margin: 10px 0 0; font-size: clamp(14.5px, 1.4vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, .92); }
/* o campo de busca dentro do herói */
.mg-rhero .mg-rcampo-linha { margin-top: 20px; }
.mg-rhero .mg-rcampo { box-shadow: 0 10px 30px rgba(6, 20, 40, .25); }

.mg-rcta { position: relative; overflow: hidden; margin-top: 40px; background: #0d2b5c; }
.mg-rcta__foto { position: absolute; inset: 0; margin: 0; }
.mg-rcta__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.mg-rcta::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(96deg, rgba(6, 20, 40, .88) 0%, rgba(6, 20, 40, .66) 48%, rgba(6, 20, 40, .28) 100%);
}
.mg-rcta__grade {
	position: relative; z-index: 1; display: grid; gap: 18px; align-items: center;
	padding-top: 38px; padding-bottom: 38px;
}
@media (min-width: 900px) { .mg-rcta__grade { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.mg-rcta h2 { margin: 0; max-width: 20ch; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: #fff; }
.mg-rcta p { margin: 8px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.mg-rcta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px;
	border-radius: 10px; background: #ff7a00; color: #fff; font-size: 15.5px; font-weight: 700; text-decoration: none;
	transition: background-color .18s;
}
.mg-rcta__btn:hover { background: #e56d00; color: #fff; }
.mg-rcta__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .mg-rcta__btn { transition: none; } }

/* ============ LATERAL DO MOCKUP: TIPO, CATEGORIA, ORDEM, AJUDA ============ *
 * "Filtrar resultados" (mockup de 21/09): lista de tipo de conteúdo e de categoria com o número
 * ao lado, ordenação em rádio, "Limpar filtros" e o bloco verde de ajuda. As listas são LINKS
 * desenhados como caixa de marcar: o estado mora na URL, que é o mesmo das abas de cima — dois
 * controles com estados separados acabariam discordando.
 */
.mg-rtipos { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.mg-rtipos__item {
	display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px;
	color: #0d2b5c; font-size: 14.5px; text-decoration: none; transition: background-color .15s;
}
.mg-rtipos__item:hover { background: #f2f7fe; color: #1266d6; }
.mg-rtipos__caixa {
	flex: none; width: 18px; height: 18px; border: 1.8px solid #c3d4ec; border-radius: 5px; background: #fff;
	position: relative;
}
.mg-rtipos__item.is-ativo .mg-rtipos__caixa { border-color: #1266d6; background: #1266d6; }
.mg-rtipos__item.is-ativo .mg-rtipos__caixa::after {
	content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
}
.mg-rtipos__nome { flex: 1; min-width: 0; }
.mg-rtipos__item.is-ativo .mg-rtipos__nome { font-weight: 700; }
.mg-rtipos__n { flex: none; color: #5a6c8a; font-size: 13px; }

.mg-rradio { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 14.5px; color: #0d2b5c; cursor: pointer; }
.mg-rradio input { width: 18px; height: 18px; accent-color: #1266d6; }

.mg-rform__limparbox { margin-top: 14px; }
.mg-rlimpar {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
	border: 1px solid #d7e1f0; border-radius: 10px; background: #fff;
	color: #0d2b5c; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.mg-rlimpar:hover { border-color: #b9cfee; color: #1266d6; }

.mg-rajuda { margin-top: 16px; padding: 20px; border: 1px solid #cfe8dc; border-radius: 16px; background: #eef8f3; }
.mg-rajuda__ico {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 99px;
	background: #158a58; color: #fff;
}
.mg-rajuda__ico svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.mg-rajuda__titulo { margin: 12px 0 0; font-size: 15.5px; font-weight: 800; color: #0d2b5c; }
.mg-rajuda__texto { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #5a6c8a; }
.mg-rajuda__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; min-height: 44px;
	border: 1px solid #1266d6; border-radius: 10px; background: #fff;
	color: #1266d6; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.mg-rajuda__btn:hover { background: #eaf2fd; }
.mg-rajuda__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* paginação numerada */
.mg-rpag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.mg-rpag__n, .mg-rpag__seta {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid #d7e1f0; border-radius: 10px; background: #fff;
	color: #0d2b5c; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.mg-rpag__n:hover, .mg-rpag__seta:hover { border-color: #b9cfee; color: #1266d6; }
.mg-rpag__n.is-ativa { background: #1266d6; border-color: #1266d6; color: #fff; }
.mg-rpag__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-rpag__seta.is-off { opacity: .4; }
.mg-rpag__reticencias { padding: 0 2px; color: #5a6c8a; }

@media (prefers-reduced-motion: reduce) { .mg-rtipos__item { transition: none; } }

/* Botão do cartão: só na grade (na lista quem indica o clique é a seta). */
.mg-rcard__acao { display: none; }
.mg-rlista.is-grade .mg-rcard__acao {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; min-height: 40px;
	border-radius: 9px; background: #1266d6; color: #fff; font-size: 14px; font-weight: 700;
}
.mg-rlista.is-grade .mg-rcard:hover .mg-rcard__acao { background: #0d47a6; }
.mg-rcard__acao svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-rlista.is-grade .mg-rcard__seta { display: none; }

/* Ícone colorido no título de cada seção, como no mockup. */
.mg-rsecao__ico {
	display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 4px; border-radius: 9px;
	background: color-mix(in srgb, var(--sec-cor) 14%, #fff); color: var(--sec-cor); vertical-align: middle;
}
.mg-rsecao__ico svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }

/* Na grade o botão já diz o que fazer; o "Ler artigo" de dentro do card viraria o mesmo comando duas vezes. */
.mg-rlista.is-grade .mg-rler-li { display: none; }

/* ===== O cabeçalho da busca mora na coluna de resultados (mockup de 21/09/2026) =====
 * No desenho do dono, "Resultados para X", a contagem e as pílulas começam ao lado do filtro, na
 * mesma altura dele — e não numa faixa de largura cheia por cima da grade. Fica no fim do arquivo
 * de propósito: regra de mesma força escrita antes perderia para a antiga. */

.mg-rmain > .mg-rtopo { padding-top: 0; }
.mg-rmain > .mg-rtopo + .mg-rabas { padding-top: 14px; }
.mg-rtopo-solo { padding-bottom: 8px; }

/* O título é o da coluna, não o da página: o H1 grande é o do herói, com a foto. */
.mg-rh1 { margin-bottom: 4px; font-size: 21px; }
.mg-rh1 span { color: inherit; }
@media (min-width: 768px) { .mg-rh1 { font-size: 24px; line-height: 1.22; } }
@media (min-width: 1280px) { .mg-rh1 { font-size: 26px; } }
.mg-rconta { font-size: 14px; }

/* Pílulas menores, sem ícone, com a contagem em etiqueta — como no mockup. */
@media (min-width: 1024px) {
	.mg-rabas ul { gap: 10px; }
	.mg-rabas a { gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
	.mg-rabas a .mg-rsvg { display: none; }
}
.mg-rabas a span.mg-raba__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 6px;
	background: #eef2f7;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--mg-texto-2);
}
.mg-rabas a[aria-current="page"] span.mg-raba__n { background: rgba(255, 255, 255, .24); color: #fff; }

/* A contagem já está acima das pílulas; repeti-la na barra seria o mesmo número duas vezes na
   mesma coluna. No celular a barra continua com ela: lá as pílulas não aparecem. */
@media (min-width: 768px) { .mg-rbarra__conta { display: none; } .mg-rbarra { justify-content: flex-end; } }

/* Pílulas à esquerda, Lista/Grade à direita, na mesma linha. */
.mg-rlinha { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; margin-bottom: 14px; }
.mg-rlinha > .mg-rabas { padding-top: 0; }
.mg-rlinha > .mg-rbarra { flex: 1 1 auto; margin: 0; }

/* A contagem também sai da barra no celular: ela já está logo acima, no título da coluna. */
.mg-rbarra__conta { display: none; }
.mg-rbarra { justify-content: flex-end; }

/* Abaixo de 640px o cartão continua deitado mesmo na grade — ali o botão ficaria solto no canto,
   e quem indica o clique é a seta. */
@media (max-width: 639.98px) { .mg-rlista.is-grade .mg-rcard__acao { display: none; } }

/* A faixa final é de ponta a ponta e encosta no rodapé — ela herdava o canto arredondado e o
   respiro da chamada antiga (a caixinha azul dentro dos resultados), que tem o mesmo nome. */
.mg-busca-tela > .mg-rcta { display: block; border-radius: 0; padding: 0; gap: 0; }
.mg-busca-tela:has(> .mg-rcta:last-child) { padding-bottom: 0; }