/**
 * Home (etapa 6 do redesign): herói com busca, categorias, blocos em cartão e o Descubra.
 *
 * Tela: design_handoff_morro_guia/telas/Home Morro Guia v2.dc.html (desktop) e o bloco HOME de
 * Mobile Morro Guia.dc.html. Fonte Inter (decisão do dono), cores do manual. Classes mg-* porque o
 * Tailwind do site é pré-compilado. Carregado só na home (GCEP_Home::enqueue).
 *
 * Contraste: metadado #5a6660; verde com texto branco #13804f (o #22a06b fica abaixo de 4,5:1);
 * botão laranja com texto marinho (branco no #ff7a00 fica em 2,9:1); selo Táxi #8a4200 em #fff0e0.
 *
 * @package GuiaWP
 * @since 2.5.450 - Valoar - 2026-09-14
 */

.mg-home {
	display: block;
	font-family: Poppins, system-ui, sans-serif;
	color: var(--mg-texto);
	/* Correção da auditoria, etapa 8: o mesmo token do body (#f9f6f1), sem emenda. */
	background: var(--mg-fundo);
	padding-bottom: 0;
}

.mg-hsvg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* O link do título estica por cima do card inteiro. */
.mg-hlink { color: inherit; text-decoration: none; }
.mg-hlink::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mg-hlink:focus-visible { outline: none; }

/* ── Herói ──────────────────────────────────────────────────────────────── */

.mg-hhero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--mg-marinho); /* T2: sem foto, marinho liso (o véu sobre a foto fica). */
	color: #fff;
}
.mg-hhero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mg-hhero__veu { position: absolute; inset: 0; z-index: -1; }
/*
 * Escurecimento do protótipo: só o lado do texto (58% da largura, de .85 a zero), a foto aparece
 * inteira do outro lado. No celular o texto ocupa a largura toda, então o véu desce por cima dela.
 */
.mg-hhero--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 28, 50, .62) 0%, rgba(8, 28, 50, .78) 100%);
	pointer-events: none;
}
@media (min-width: 768px) {
	/*
	 * 2026-09-16: véu SIMÉTRICO, porque o conteúdo passou a ser centralizado.
	 *
	 * Era o do protótipo: escuro só nos 58% da esquerda, clareando até sumir. Fazia sentido com o
	 * texto à esquerda; com ele no meio, a metade direita da frase cairia na parte clara da foto.
	 * Agora escurece as pontas e o centro por igual, um pouco menos no meio para a foto respirar.
	 */
	.mg-hhero--foto::after {
		background: linear-gradient(180deg, rgba(8, 28, 50, .44) 0%, rgba(8, 28, 50, .64) 100%);
	}
}
/*
 * 2026-09-16 - Valoar: sobrancelha, título e apoio À ESQUERDA, como no handoff. Só a BUSCA e a
 * fileira de chips são centralizadas — foi isso que o dono pediu, e o recorte que ele mandou era
 * exatamente essas duas.
 *
 * Eu tinha centralizado o herói inteiro e estava errado: no handoff (linhas 71-80) o texto é todo
 * alinhado à esquerda, com a foto respirando do lado direito.
 */
.mg-hhero__in { padding-block: 24px 22px; }
@media (min-width: 1024px) {
	.mg-hhero__in { box-sizing: border-box; min-height: 436px; }
}

/* Sobrancelha do handoff (linhas 71-74): traço verde de 38px, versalete espaçado, verde da marca. */
.mg-hhero__selo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #22a06b;
	/* Verde claro e letra pequena somem no céu da foto; a sombra é a mesma linguagem do h1. */
	text-shadow: 0 1px 10px rgba(8, 20, 36, .8);
}
.mg-hhero__tracinho { display: block; flex: none; width: 38px; height: 4px; border-radius: 99px; background: #22a06b; }

.mg-hhero__h1 {
	margin: 0 0 16px;
	max-width: 560px;
	font-size: clamp(26px, 3.4vw + 12px, 46px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.025em;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(8, 20, 36, .45);
}
/* Home #11: 25px no celular (o clamp dava 26px). */
@media (max-width: 767.98px) {
	.mg-hhero__h1 { font-size: 25px; }
}
.mg-hhero__destaque { white-space: nowrap; }
.mg-hhero__sub {
	margin: 0 0 18px;
	max-width: 520px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	text-shadow: 0 1px 10px rgba(8, 20, 36, .5);
}

/* Busca: empilhada no celular, uma barra no desktop. */
.mg-hbusca {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* 920px é a medida do handoff; o `auto` é o que centraliza a barra no herói. */
	max-width: 920px;
	margin-inline: auto;
	text-align: start;
	padding: 12px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(11, 58, 37, .28); /* T13: tom da paleta. */
}
.mg-hbusca__campo {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	background: var(--mg-fundo);
	border-radius: 9px;
}
.mg-hbusca__campo:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 1px; }
.mg-hbusca__lupa { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--mg-marinho); pointer-events: none; }
.mg-hbusca__campo input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 12px 0 40px;
	border: 0;
	background: transparent;
	font: 400 15px/1 Poppins, system-ui, sans-serif;
	color: var(--mg-marinho);
	-webkit-appearance: none;
	appearance: none;
}
.mg-hbusca__campo input::placeholder { color: var(--mg-texto-2); opacity: 1; }
.mg-hbusca__campo input:focus { outline: none; box-shadow: none; }
.mg-hbusca__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mg-hbusca__cidade {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 0 13px;
	background: var(--mg-fundo);
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mg-texto);
	white-space: nowrap;
}
.mg-hbusca__cidade .mg-hsvg { color: var(--mg-azul); }
.mg-hbusca__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 9px;
	background: var(--mg-azul);
	color: #fff;
	font: 700 14.5px/1 Poppins, system-ui, sans-serif;
	cursor: pointer;
}
.mg-hbusca__botao:hover { background: var(--mg-azul-hover); }
.mg-hbusca__botao:focus-visible { outline: 3px solid var(--mg-marinho); outline-offset: 2px; }

@media (min-width: 768px) {
	.mg-hhero__in { padding-block: 44px 40px; }
	.mg-hhero__sub { margin-bottom: 26px; font-size: 15px; }
	.mg-hbusca { flex-direction: row; align-items: center; gap: 14px; padding: 7px 7px 7px 6px; }
	.mg-hbusca__campo { flex: 1 1 auto; background: transparent; }
	.mg-hbusca__campo input { height: 50px; }
	.mg-hbusca__cidade { position: relative; min-height: 44px; padding: 0 6px 0 18px; background: transparent; }
	.mg-hbusca__cidade::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--mg-borda); }
	.mg-hbusca__botao { min-height: 50px; padding: 0 28px; }
}

/* Centralizado, e a cápsula do clima deixou de ser empurrada para a ponta (ver .mg-hclima). */
.mg-hhero__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 16px; }

.mg-hchips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
.mg-hchips__t { margin: 0 3px 0 0; font-size: 12.5px; font-weight: 600; color: #fff; }
.mg-hchips ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mg-hchips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 99px;
	background: rgba(11, 58, 37, .75);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
/* Com mouse o chip tem a altura do protótipo; no toque continua com 44px. */
@media (min-width: 1024px) and (pointer: fine) {
	.mg-hchips a { min-height: 32px; }
}
.mg-hchips a:hover { background: var(--mg-marinho); border-color: rgba(255, 255, 255, .5); color: #fff; }
.mg-hchips a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767.98px) {
	.mg-hchips__t { flex-basis: 100%; }
	.mg-hchips li:nth-child(n+5) { display: none; }
}

/* Clima e data: discretos, depois da busca. O widget é o de sempre (gcep-weather), restilizado. */
/* Cápsula do protótipo: ícone, temperatura e a data numa linha. Sem chave do OpenWeather, só a data. */
.mg-hclima {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 9px;
	min-height: 32px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 99px;
	background: rgba(11, 58, 37, .6);
	color: var(--mg-borda-azul);
	font-size: 11.5px;
	line-height: 1.3;
}
/* Sem `margin-left: auto`: com a fileira centralizada, empurrar a cápsula para a ponta direita
   deixaria os chips encostados na esquerda e a cápsula sozinha do outro lado. */
@media (min-width: 1024px) { .mg-hclima { flex-wrap: nowrap; white-space: nowrap; } }
.mg-hclima__data { margin: 0; font-size: 11.5px; font-weight: 500; color: var(--mg-borda-azul); }
.mg-hclima .gcep-wx-hero-inline + .mg-hclima__data::before { content: "· "; }
.mg-hclima .gcep-wx-hero-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.3;
	text-shadow: none;
}
.mg-hclima .gcep-wx-hero-inline::after { content: none; display: none; }
.mg-hclima .gcep-wx-hero-inline__icon { font-size: 18px !important; color: #ffc86b; }
.mg-hclima .gcep-wx-hero-inline__temp,
.mg-hclima .gcep-wx-hero-inline__city-line { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: 12.5px; color: var(--mg-borda-azul); }
.mg-hclima .gcep-wx-hero-inline__temp strong,
.mg-hclima .gcep-wx-hero-inline__city { font-weight: 700; color: #fff; }
.mg-hclima .gcep-wx-hero-inline .gcep-wx-hero-inline__more,
.mg-hclima button.gcep-wx-hero-inline__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 20px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mg-hclima .gcep-wx-hero-inline__more:hover { background: rgba(255, 255, 255, .12); }
.mg-hclima .gcep-wx-hero-inline__more:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mg-hclima .gcep-wx-hero-inline__more .material-symbols-outlined { font-size: 15px !important; }

/* ── Seções e linhas ────────────────────────────────────────────────────── */

.mg-hsec { padding-top: 20px; }
.mg-hlinha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1024px) {
	/*
	 * 2026-09-16 - Valoar (pedido do dono): os dois blocos da linha têm a MESMA ALTURA.
	 *
	 * Era `align-items: start`, e cada caixa parava onde o conteúdo dela acabava — Vagas com
	 * quatro linhas ficava bem mais alta que Eventos com três cards, e as duas bordas brancas
	 * terminando em alturas diferentes liam como defeito. Ele viu, e pediu igual sabendo que
	 * sobra branco dentro da caixa mais curta: "deixa o tamanho do bloco igual para não ficar
	 * essa discrepância".
	 *
	 * Vale dizer que o mockup NÃO faz isso (lá as duas caixas param no conteúdo). É decisão dele,
	 * contra o protótipo, e consciente.
	 */
	.mg-hlinha--par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}

/* ── Categorias ─────────────────────────────────────────────────────────── */

.mg-hcats { padding-top: 18px; }
/*
 * Home #6 (correção da auditoria, etapa 8): no celular, grade de 4 colunas com 7 categorias e o
 * "Mais categorias" (sempre o último item), como no protótipo. As outras ficam no HTML e aparecem a
 * partir de 768px; no celular o caminho para elas é o "Mais categorias".
 */
.mg-hcats__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 767.98px) {
	.mg-hcats__grade > li:nth-child(n+8):not(:last-child) { display: none; }
}
.mg-hcat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 100%;
	min-height: 76px;
	padding: 12px 4px;
	background: #fff;
	border: 1px solid var(--mg-borda);
	border-radius: 12px;
	box-shadow: var(--mg-sombra-card); /* T13 */
	color: var(--mg-marinho);
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mg-hcat:hover { border-color: var(--mg-borda-hover); box-shadow: 0 6px 20px rgba(11, 58, 37, .1); color: var(--mg-marinho); }
.mg-hcat:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hcat__ico { font-size: 24px !important; line-height: 1; color: var(--mg-azul); }
.mg-hcat__img { width: 36px; height: 36px; border-radius: 99px; object-fit: cover; }
.mg-hcat__svg { width: 23px; height: 23px; stroke-width: 1.9; color: var(--mg-texto); }
.mg-hcat__nome {
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 768px) {
	.mg-hcats { padding-top: 26px; }
	.mg-hcats__grade { gap: 12px; }
	.mg-hcat { min-height: 96px; padding: 16px 8px; }
	.mg-hcat__nome { font-size: 12px; }
}
/* Protótipo: oito por linha, duas linhas (15 categorias + "Mais categorias"). Com seis por linha
   a partir de 1024 sobrava uma terceira linha pela metade. */
@media (min-width: 1024px) {
	.mg-hcats__grade { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.mg-hcat { min-height: 0; padding: 16px 8px; gap: 9px; }
	.mg-hcat__nome { font-size: 11.5px; }
}

/* ── Cartão de bloco ────────────────────────────────────────────────────── */

/*
 * 2026-09-16 - Valoar: a CAIXA BRANCA voltou no DESKTOP, pedido do dono com o mockup ao lado.
 *
 * Em 14/09 (commit 53fd089) ele tinha pedido o contrário, também numa comparação com este mesmo
 * mockup — e no mockup de desktop a caixa sempre esteve lá: `background:#fff;border:1px solid
 * #eae5db;border-radius:16px;padding:22px`, e 26px no de destaques. É ela que separa uma
 * prateleira da outra quando duas ficam lado a lado; sem ela, Imóveis e Veículos viram uma
 * mancha só de cards.
 *
 * NO CELULAR NÃO TEM CAIXA, e isso também é o mockup (Mobile Morro Guia.dc.html): lá o bloco é
 * `padding:20px 0 0`, com título e chips recuados 16px e os cards sangrando até a borda da tela.
 * Não é só gosto — o carrossel do celular é `margin: 0 -16px`, feito para encostar na borda. Com
 * a caixa, ele vazaria por cima do canto arredondado dela.
 *
 * O CTA não entra: tem desenho próprio (mg-hcta), faixa azul, e nunca teve caixa.
 */
.mg-hbloco { min-width: 0; }
.mg-hbloco__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-bottom: 8px; }
/* Título longo com "Ver todas as hospedagens" ao lado: o link desce em vez de espremer o título. */
.mg-hbloco__tit { display: flex; flex: 1 1 200px; align-items: center; gap: 9px; min-width: 0; }
.mg-hbloco__ico { width: 20px; height: 20px; stroke-width: 1.9; color: var(--mg-azul); }
.mg-hbloco__h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-hbloco__sub { margin: -4px 0 12px; font-size: 13px; line-height: 1.6; color: var(--mg-texto-2); }
.mg-hver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	min-height: 44px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mg-azul);
	text-decoration: none;
	white-space: nowrap;
}
.mg-hver .mg-hsvg { width: 14px; height: 14px; stroke-width: 2.4; }
.mg-hver:hover { color: var(--mg-azul-hover); text-decoration: underline; text-underline-offset: 3px; }
.mg-hver:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; border-radius: 6px; }

.mg-habas { margin: 0 0 14px; }
.mg-habas ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.mg-habas a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mg-borda);
	border-radius: 99px;
	background: #fff;
	color: var(--mg-texto);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.mg-habas a:hover { border-color: var(--mg-azul); color: var(--mg-azul); }
.mg-habas a:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }

/* Daqui para cima é o mockup de desktop, caixa branca inclusive. Abaixo de 768px vale o mockup
   mobile, onde o bloco não tem caixa nenhuma. */
@media (min-width: 768px) {
	.mg-hsec { padding-top: 26px; }
	.mg-hbloco {
		padding: 22px;
		border: 1px solid var(--mg-borda);
		border-radius: 16px;
		background: #fff;
	}
	.mg-hbloco__topo { margin-bottom: 16px; }
	.mg-hbloco__h2 { font-size: 19px; }
	.mg-habas ul { gap: 7px; }
	.mg-hbloco--destaques,
	.mg-hbloco--hospedagem { padding: 26px 26px 28px; }
	.mg-hbloco--destaques .mg-hbloco__h2,
	.mg-hbloco--hospedagem .mg-hbloco__h2 { font-size: 24px; }
	.mg-hbloco--destaques .mg-hbloco__topo { margin-bottom: 20px; }
}

/* ── Cards (grade no desktop, carrossel no celular) ─────────────────────── */

.mg-hcards {
	display: flex;
	gap: 12px;
	margin: 0 -16px;
	padding: 2px 16px 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	scrollbar-width: none;
}
.mg-hcards::-webkit-scrollbar { display: none; }
.mg-hcards > li { flex: 0 0 min(76%, 290px); min-width: 0; scroll-snap-align: start; }
.mg-hcards--3 > li { flex-basis: min(62%, 220px); }
@media (min-width: 768px) {
	.mg-hcards { display: grid; gap: 14px; margin: 0; padding: 0; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mg-hcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.mg-hcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
/*
 * Home #2 (correção da auditoria, etapa 8): a grade mostra 4 destaques (uma linha no desktop, 2×2 no
 * tablet) e o "Ver todos os anúncios" leva ao resto. O carrossel do celular continua com o pool inteiro
 * (até 8): ali só um card aparece por vez, e cortar esconderia anunciantes pagos sem ganho de espaço.
 * A consulta não mudou; os itens 5 a 8 saem da vista com display:none (foto lazy não baixa).
 */
@media (min-width: 768px) {
	.mg-hbloco--destaques .mg-hcards > li:nth-child(n+6) { display: none; }
}

/* O card da busca em pé, com a foto em cima. */
.mg-hcards .mg-rcard { flex-direction: column; gap: 10px; height: 100%; padding: 0 0 13px; overflow: hidden; }
.mg-hcards .mg-rcard__foto { width: 100%; height: auto; max-height: 190px; aspect-ratio: 16 / 10; border-radius: 0; }
.mg-hcards .mg-rcard__foto--vazia { aspect-ratio: 16 / 10; }
.mg-hcards .mg-rcard__corpo { padding: 0 13px; }
.mg-hcards .mg-rtipo { display: none; }
.mg-hcards .mg-rcard__titulo { font-size: 14.5px; color: var(--mg-marinho); }
.mg-hcards .mg-rcard__link { color: var(--mg-marinho); }
.mg-hcards .mg-rcard:hover .mg-rcard__link { color: var(--mg-azul); }
.mg-hcards .mg-rcard__preco { color: var(--mg-azul); font-size: 14.5px; }
.mg-hcards--3 .mg-rcard__meta { font-size: 12px; gap: 4px 10px; }

/* Destaques e "Onde ficar": o card, o Salvar por cima e os contatos embaixo. */
.mg-hdest {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(11, 58, 37, .05);
}
.mg-hdest:hover { border-color: var(--mg-borda-hover); box-shadow: 0 6px 20px rgba(11, 58, 37, .12); }
.mg-hdest .mg-rcard { flex: 1 1 auto; border: 0; border-radius: 0; box-shadow: none; }
.mg-hdest .mg-rcard:hover { box-shadow: none; }
.mg-hdest .mg-rcard:focus-within { outline-offset: -3px; }
.mg-hdest__salvar { position: absolute; top: 8px; right: 8px; z-index: 2; }
.mg-hdest__acoes { position: relative; z-index: 2; display: flex; gap: 8px; padding: 0 13px 13px; }
.mg-hacao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 10px;
	background: #fff;
	color: var(--mg-texto);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.mg-hacao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mg-hacao:hover { border-color: var(--mg-azul); color: var(--mg-azul); }
.mg-hacao:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hacao--zap { flex: 1 1 auto; border-color: #13804f; background: #13804f; color: #fff; }
.mg-hacao--zap svg { stroke: none; }
.mg-hacao--zap:hover { border-color: #0a6b42; background: #0a6b42; color: #fff; }

/* Card de anúncio do protótipo (GCEP_Home::card_anuncio). */
.mg-hacard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mg-borda);
	border-radius: 13px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mg-hacard:hover { border-color: var(--mg-borda-hover); box-shadow: 0 6px 20px rgba(11, 58, 37, .12); }
.mg-hacard:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hacard__foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 2;
	background: var(--mg-suave);
	color: var(--mg-separador);
}
.mg-hacard__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hacard__vazio { width: 28px; height: 28px; stroke-width: 1.6; }
/*
 * No DESKTOP nada mudou de aparência: `display: contents` faz a linha de pills não criar caixa
 * nenhuma, o selo continua flutuando sobre a foto (o card é `position: relative`) e o "Destaque"
 * não aparece — lá o bloco inteiro já se chama "Anúncios em Destaque".
 */
.mg-hacard__pills { display: contents; }
.mg-hacard__destaque { display: none; }
.mg-hacard__selo {
	position: absolute;
	top: 9px;
	left: 9px;
	max-width: calc(100% - 64px);
	padding: 6px 9px;
	border-radius: 99px;
	background: var(--mg-azul);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
 * Coração de 24px como no protótipo, dentro de uma área de toque de 44px.
 *
 * 2026-09-16 - Valoar: no DESKTOP ele não aparece, decisão do dono ("não faz sentido esse botão,
 * só faz sentido no celular"). O protótipo tem o coração nos dois tamanhos; isto é escolha dele,
 * contra o protótipo, e o motivo é bom: no computador quem quer guardar um anúncio abre a ficha,
 * e no celular, onde a pessoa passa o polegar pela lista, salvar sem abrir é o que vale.
 *
 * `display:none` e não sumir com o markup: o botão continua na página para quem navega por
 * teclado ou leitor de tela chegar nele? NÃO — display:none tira dos dois. É proposital: função
 * escondida na tela e presente para o leitor de tela seria pior, porque a pessoa ouviria um
 * "Salvar" que ninguém mais tem ali.
 */
.mg-hacard__salvar { position: absolute; top: 0; right: 0; z-index: 2; }
@media (min-width: 768px) {
	.mg-hacard__salvar { display: none; }
}
.mg-hacard__salvar .mg-salvar--icone {
	position: relative;
	isolation: isolate;
	width: 44px;
	height: 44px;
	min-height: 44px;
	background: transparent;
	box-shadow: none;
	color: var(--mg-texto);
}
.mg-hacard__salvar .mg-salvar--icone::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 9px;
	z-index: -1;
	width: 26px;
	height: 26px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .92);
}
.mg-hacard__salvar .mg-salvar--icone:hover { background: transparent; color: #c42f3b; }
.mg-hacard__salvar .mg-salvar__svg { width: 13px; height: 13px; margin: -6px -8px 0 0; }
/* Os contatos rápidos do card. No desktop não aparecem: o card é vertical e estreito, e três
   botões embaixo do nome roubariam a linha do bairro. */
.mg-hacard__acoes { display: none; }
.mg-hacao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--mg-suave, #f1efe8);
	color: var(--mg-azul);
	text-decoration: none;
}
.mg-hacao svg { width: 18px; height: 18px; fill: currentColor; }
.mg-hacao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.mg-hacao--zap { background: #e6f7ef; color: #128c7e; }
.mg-hacao--zap:hover, .mg-hacao--zap:focus-visible { background: #128c7e; color: #fff; }
.mg-hacao:hover, .mg-hacao:focus-visible { background: var(--mg-azul); color: #fff; }

.mg-hacard__corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px; }
.mg-hacard__t { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-hacard:hover .mg-hacard__t { color: var(--mg-azul); }
.mg-hacard__sub { margin: 6px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--mg-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nota e status do horário na mesma linha (Home #3). */
.mg-hacard__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; }
.mg-hacard__nota { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; line-height: 1; color: var(--mg-marinho); }
/* "Aberto agora" / "Fechado" do gcep-hours.js, discreto como no protótipo do celular. A linha reserva a altura antes do script. */
.mg-hacard__hora { display: flex; align-items: center; min-height: 12px; margin: 0; }
.mg-hacard__hora .gcep-hours-tag { display: inline-flex; }
.mg-hacard__hora .gcep-hours-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 10.5px; font-weight: 600; line-height: 1.1; color: var(--mg-texto-2); }
.mg-hacard__hora .gcep-hours-chip.is-open { background: none; color: #0a6b42; }
.mg-hacard__hora .gcep-hours-chip.is-closed { background: none; color: var(--mg-texto-2); }
.mg-hacard__hora .gcep-hours-dot { width: 5px; height: 5px; margin: 0; border-radius: 99px; background: var(--mg-separador); }
.mg-hacard__hora .gcep-hours-chip.is-open .gcep-hours-dot { background: var(--mg-verde); }
.mg-hacard__hora .gcep-hours-extra { display: none; }
.mg-hacard__nota b { font-weight: 700; }
.mg-hacard__nota span:not(.mg-sr) { font-size: 11px; color: var(--mg-texto-2); }
.mg-hacard__estrela { width: 13px; height: 13px; fill: #f5a524; stroke: none; }
.mg-hacard__local { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--mg-texto-2); }
.mg-hacard__local .mg-hsvg { width: 11px; height: 11px; }
.mg-hacard__linha + .mg-hacard__local { margin-top: 8px; }
.mg-hacard__sub + .mg-hacard__local { margin-top: 10px; }
@media (min-width: 1024px) {
	.mg-hcards--anuncios.mg-hcards--4 { gap: 18px; }
	/* Home #3: foto de 112px no desktop, como no protótipo (antes 5:2, 127–129px). */
	.mg-hacard__foto { aspect-ratio: auto; height: 112px; }
}
@media (prefers-reduced-motion: reduce) { .mg-hacard { transition: none; } }

/* ── CTA anunciante ─────────────────────────────────────────────────────── */

.mg-hcta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: 14px;
	background: var(--mg-marinho); /* T2: marinho liso, sem o degradê decorativo. */
	color: #fff;
}
.mg-hcta__txt { padding: 18px; }
.mg-hcta__h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.mg-hcta__p { margin: 0 0 14px; max-width: 460px; font-size: 13px; line-height: 1.6; color: var(--mg-borda-azul); }
.mg-hcta__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 9px;
	background: #ff7a00;
	color: var(--mg-marinho);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}
.mg-hcta__botao .mg-hsvg { width: 15px; height: 15px; stroke-width: 2.4; }
.mg-hcta__botao:hover { background: #ff7a00; filter: brightness(1.06); color: var(--mg-marinho); }
.mg-hcta__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-hcta__foto { display: none; }
@media (min-width: 768px) {
	.mg-hcta { border-radius: 16px; min-height: 150px; }
	.mg-hcta--foto { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.mg-hcta__txt { align-self: center; padding: 26px 30px; }
	.mg-hcta__h2 { font-size: 22px; }
	.mg-hcta__botao { display: inline-flex; }
	.mg-hcta__foto { display: block; position: relative; }
	.mg-hcta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.mg-hcta__foto::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 40%; background: linear-gradient(90deg, var(--mg-marinho), rgba(11, 58, 37, 0)); } /* véu sobre a foto: fica, no marinho do fundo liso. */
}

/* ── Vagas ──────────────────────────────────────────────────────────────── */

.mg-hvagas { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mg-hvaga {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--mg-borda);
	border-radius: 12px;
}
.mg-hvaga:hover { border-color: var(--mg-borda-hover); }
.mg-hvaga:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hvaga__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--mg-azul-suave); color: var(--mg-azul); }
.mg-hvaga__ico .mg-hsvg { width: 19px; height: 19px; stroke-width: 1.8; }
.mg-hvaga__txt { min-width: 0; }
.mg-hvaga__t { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-hvaga:hover .mg-hvaga__t { color: var(--mg-azul); }
.mg-hvaga__m { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--mg-texto-2); overflow-wrap: anywhere; }

/* ── Eventos ────────────────────────────────────────────────────────────── */

.mg-hevento {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mg-borda);
	border-radius: 12px;
}
.mg-hevento:hover { border-color: var(--mg-borda-hover); box-shadow: 0 6px 20px rgba(11, 58, 37, .1); }
.mg-hevento:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hevento__foto { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--mg-marinho); color: #9cb3d4; }
.mg-hevento__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hevento__vazio { width: 28px; height: 28px; stroke-width: 1.6; }
.mg-hevento__data {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 38px;
	padding: 5px 7px;
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(11, 58, 37, .18);
	color: #0b3f27;
	line-height: 1;
}
.mg-hevento__data b { font-size: 14px; font-weight: 800; }
.mg-hevento__data small { margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.mg-hevento__corpo { display: flex; flex-direction: column; gap: 8px; padding: 11px; }
.mg-hevento__t { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-hevento:hover .mg-hevento__t { color: var(--mg-azul); }
.mg-hevento__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.mg-hchip { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: var(--mg-suave); color: var(--mg-texto); font-size: 11px; font-weight: 600; line-height: 1.1; }

/* ── Quem vai viajar? ───────────────────────────────────────────────────── */

.mg-hviagens {
	display: flex;
	gap: 12px;
	margin: 0 -16px;
	padding: 2px 16px 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	scrollbar-width: none;
}
.mg-hviagens::-webkit-scrollbar { display: none; }
.mg-hviagem {
	position: relative;
	display: flex;
	flex: 0 0 min(80%, 262px);
	flex-direction: column;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--mg-borda);
	border-radius: 13px;
	scroll-snap-align: start;
}
.mg-hviagem:hover { border-color: var(--mg-borda-hover); box-shadow: 0 6px 20px rgba(11, 58, 37, .1); }
.mg-hviagem:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hviagem p { margin: 0; }
.mg-hviagem__origem { margin-bottom: 6px !important; font-size: 12px; font-weight: 500; color: var(--mg-texto-2); overflow-wrap: anywhere; }
.mg-hviagem__destino { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-hviagem__destino .mg-hsvg { color: var(--mg-azul); }
.mg-hviagem:hover .mg-hviagem__destino a { color: var(--mg-azul); }
.mg-hviagem__quando { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--mg-texto); }
.mg-hviagem__quando .mg-hsvg { width: 15px; height: 15px; color: var(--mg-texto-2); }
.mg-hviagem__data { margin-top: 3px !important; padding-left: 22px; font-size: 12px; color: var(--mg-texto-2); }
.mg-hviagem__tipo { margin-top: 12px !important; }
.mg-hselo { display: inline-flex; padding: 6px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.1; }
.mg-hselo--carona { background: var(--mg-azul-suave); color: var(--mg-marinho); }
.mg-hselo--taxi { background: #fff0e0; color: #8a4200; }
.mg-hviagem__lugares { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; padding: 9px 11px; border-radius: 8px; background: #e9f7f0; font-size: 12.5px; font-weight: 700; color: #0a6b42; }
.mg-hviagem__lugares span { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--mg-verde); }
.mg-hviagem__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--mg-borda); font-size: 12.5px; font-weight: 600; color: var(--mg-texto-2); }
.mg-hviagem__lugares + .mg-hviagem__rodape,
.mg-hviagem__tipo + .mg-hviagem__rodape { margin-top: 12px !important; }
.mg-hviagem__rodape .mg-hsvg { color: var(--mg-azul); }
@media (min-width: 768px) {
	.mg-hviagens { margin: 0; padding: 0 0 6px; }
}
@media (min-width: 1280px) {
	/* Sozinho na linha, as cinco viagens cabem lado a lado. */
	.mg-hlinha:not(.mg-hlinha--par) .mg-hviagens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding: 0; }
}

.mg-hvazio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border: 1px dashed var(--mg-borda-hover); border-radius: 12px; background: var(--mg-fundo); }
.mg-hvazio p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mg-texto); }
.mg-hvazio__botao { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 9px; background: var(--mg-azul); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.mg-hvazio__botao:hover { background: var(--mg-azul-hover); color: #fff; }
.mg-hvazio__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }

/* ── Loterias ───────────────────────────────────────────────────────────── */

.mg-hlots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mg-hlot { position: relative; padding: 13px 14px; background: #fff; border: 1px solid var(--mg-borda); border-radius: 12px; }
.mg-hlot:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-hlot p { margin: 0; }
.mg-hlot__nome { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--mg-marinho); }
.mg-hlot__cor { flex: none; width: 9px; height: 9px; border-radius: 99px; }
.mg-hlot__sub { margin-top: 3px !important; font-size: 12px; color: var(--mg-texto-2); }
.mg-hlot__nums { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px !important; }
.mg-hlot__nums span { min-width: 26px; padding: 6px 5px; border-radius: 6px; background: var(--mg-suave); color: var(--mg-marinho); font-size: 11.5px; font-weight: 700; line-height: 1; text-align: center; }
.mg-hlots__aviso { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--mg-texto-2); }
@media (min-width: 768px) {
	.mg-hlinha:not(.mg-hlinha--par) .mg-hlots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Onde ficar ─────────────────────────────────────────────────────────── */

.mg-hficar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--mg-borda-hover); border-radius: 12px; background: var(--mg-fundo); }
.mg-hficar p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mg-texto); }
.mg-hficar strong { color: var(--mg-marinho); }
.mg-hficar__botao { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 9px; background: var(--mg-azul); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mg-hficar__botao:hover { background: var(--mg-azul-hover); color: #fff; }
.mg-hficar__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }

/* ── Perguntas frequentes (bloco do GCEP_Home_AEO): mesma largura e margem dos outros blocos ── */

.mg-home .gcep-home-faq { margin-top: 20px; background: transparent; border-block: 0; }
.mg-home .gcep-home-faq__w { max-width: 1440px; padding-inline: 16px; }
@media (min-width: 768px) { .mg-home .gcep-home-faq__w { padding-inline: 24px; } }
@media (min-width: 1440px) { .mg-home .gcep-home-faq__w { padding-inline: 44px; } }
.mg-home .gcep-home-faq__h { color: var(--mg-marinho); }
.mg-home .gcep-home-faq__sub { color: var(--mg-texto-2); }
.mg-home .gcep-home-faq__cta { min-height: 44px; }

/* ── Newsletter (faixa) ─────────────────────────────────────────────────── */

.mg-hsec--news { padding-bottom: 4px; }

/* ── Descubra ───────────────────────────────────────────────────────────── */

.mg-hdesc {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: 24px;
	/* T2 (correção da auditoria, etapa 8): marinho liso. A linha clara de baixo separa a faixa do rodapé. */
	background: var(--mg-marinho);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
}
.mg-hdesc__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mg-hdesc--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 28, 50, .55), rgba(8, 28, 50, .82)); }
.mg-hdesc__in { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.mg-hdesc__h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
/* A promessa da CIDADE, embaixo do título. #dbe6f5 em cima do véu escuro passa de 7:1. */
.mg-hdesc__sub { margin: 0 0 16px; max-width: 34ch; font-size: 13.5px; line-height: 1.55; color: #dbe6f5; }
.mg-hdesc__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 9px;
	background: #13804f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.mg-hdesc__botao:hover { background: #0a6b42; color: #fff; }
.mg-hdesc__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-hdesc__atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.mg-hdesc__atalhos a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 72px;
	padding: 14px 12px;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(11, 58, 37, .2); /* T13: tom da paleta. */
	color: var(--mg-marinho);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
/*
 * 2026-09-16 - Valoar: cada atalho com a SUA cor, pedido do dono ("umas cores só").
 *
 * As três saem do manual: verde do botão (#13804f), azul da marca e o laranja do CTA. A cor é o
 * que deixa achar "Onde comer" na fileira sem ler as quatro legendas — e a legenda continua
 * embaixo de cada ícone, então quem não distingue cor não perde nada.
 */
.mg-hdesc__atalhos .mg-hsvg { width: 22px; height: 22px; stroke-width: 1.9; color: var(--mg-atalho, var(--mg-azul)); }
/* Os três hex são os da arte: #22a06b, #0f5132 e #FF7A00. Em ícone o verde e o laranja claros
   não têm problema de contraste — quem carrega o significado é a legenda embaixo. */
.mg-hdesc__atalho--verde { --mg-atalho: #22a06b; }
.mg-hdesc__atalho--azul { --mg-atalho: #0f5132; }
.mg-hdesc__atalho--laranja { --mg-atalho: #ff7a00; }
.mg-hdesc__atalhos a:hover { color: var(--mg-atalho, var(--mg-azul)); }
.mg-hdesc__atalhos a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 768px) {
	.mg-hdesc { margin-top: 32px; }
	.mg-hdesc--foto::before { background: linear-gradient(90deg, rgba(8, 28, 50, .8), rgba(8, 28, 50, .3)); }
	.mg-hdesc__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; min-height: 196px; padding-block: 36px; }
	.mg-hdesc__h2 { font-size: 26px; }
	.mg-hdesc__botao { display: inline-flex; }
	.mg-hdesc__atalhos { display: flex; gap: 13px; }
	.mg-hdesc__atalhos a { min-width: 112px; padding: 17px 20px; }
}

/* ── Card compacto do blog (Home #4, correção da auditoria, etapa 8) ────── */
/* Com .mg-home na frente: o mg-blog.css carrega depois (fora do caminho crítico) e a caixa do card de grade ganharia. */

.mg-home .mg-pcard--compacto {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
}
.mg-home .mg-pcard--compacto:hover { box-shadow: none; }
.mg-home .mg-pcard--compacto .mg-pcard__foto {
	position: relative;
	display: block;
	height: 132px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--mg-fundo-azul);
}
.mg-home .mg-pcard--compacto .mg-pcard__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-home .mg-pcard--compacto .mg-foto-vazia { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--mg-separador); }
.mg-home .mg-pcard--compacto .mg-foto-vazia svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mg-home .mg-pcard__selo {
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--mg-azul);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mg-home .mg-pcard--compacto .mg-pcard__corpo { display: flex; flex-direction: column; padding: 0; }
.mg-home .mg-pcard__data { margin: 11px 0 7px; font-size: 10.5px; font-weight: 500; line-height: 1.2; color: var(--mg-texto-2); }
.mg-home .mg-pcard--compacto .mg-pcard__titulo { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--mg-marinho); overflow-wrap: anywhere; }
.mg-home .mg-pcard--compacto .mg-pcard__link { color: inherit; text-decoration: none; }
.mg-home .mg-pcard--compacto .mg-pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.mg-home .mg-pcard--compacto .mg-pcard__link:focus-visible { outline: none; }
.mg-home .mg-pcard--compacto:hover .mg-pcard__link { color: var(--mg-azul); }
.mg-home .mg-pcard--compacto:focus-within { outline: 2px solid var(--mg-azul); outline-offset: 4px; }
@media (min-width: 1024px) {
	.mg-home .mg-pcard--compacto .mg-pcard__foto { height: 104px; }
	.mg-home .mg-pcard--compacto .mg-pcard__titulo { font-size: 12.5px; }
}
/* No celular os cards do blog passam no carrossel mais estreitos: a foto baixa pede menos largura. */
.mg-hcards--blog > li { flex-basis: min(62%, 230px); }

/* ── Estados de toque (T5) ─────────────────────────────────────────────── */

.mg-hbusca__botao:active,
.mg-hcta__botao:active,
.mg-hdesc__botao:active,
.mg-hvazio__botao:active,
.mg-hficar__botao:active { transform: scale(var(--mg-ativo-escala)); }
.mg-hcat:active,
.mg-hdesc__atalhos a:active,
.mg-habas a:active { background: var(--mg-ativo-fundo); }
.mg-hchips a:active { background: var(--mg-marinho); border-color: #fff; }
.mg-hacard:active,
.mg-hvaga:active,
.mg-hevento:active,
.mg-hviagem:active,
.mg-home .mg-pcard--compacto:active { transform: scale(.99); }
.mg-hver:active { opacity: .8; }
.mg-hcards__item .mg-hacard:focus-within,
.mg-hcat:focus-visible { outline-color: var(--mg-azul); }

@media (prefers-reduced-motion: reduce) {
	.mg-hbusca__botao:active,
	.mg-hcta__botao:active,
	.mg-hdesc__botao:active,
	.mg-hvazio__botao:active,
	.mg-hficar__botao:active,
	.mg-hacard:active,
	.mg-hvaga:active,
	.mg-hevento:active,
	.mg-hviagem:active,
	.mg-home .mg-pcard--compacto:active { transform: none; }
	.mg-hcats__grade,
	.mg-hcards,
	.mg-hviagens { scroll-behavior: auto; }
	.mg-hcat,
	.mg-hdest,
	.mg-hevento,
	.mg-hviagem { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * CELULAR: LISTA, não carrossel. Pedido do dono em 16/09, com a tela do
 * aplicativo ao lado: "isso vira lista, card embaixo do outro, sem carrossel".
 *
 * Por que isto é um bloco só, no fim do arquivo, em vez de mexer em cada família:
 * a home tem CINCO formatos de card (anúncio, resultado de busca, evento, vaga e
 * viagem), cada um com o seu markup. Reescrever os cinco seria muito mais código e
 * muito mais risco do que virar a chave aqui — o markup continua o mesmo, e o que
 * muda é só a forma no celular. No desktop nada disto vale.
 *
 * O formato é o da tela do app: miniatura quadrada à esquerda, pills e título à
 * direita, uma linha de status embaixo, e os contatos na ponta.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	/*
	 * 0. O HERÓI no celular é só a busca e o cartão de hoje — "sem banner, sem nada", palavras
	 * dele. Foto, sobrancelha, título, apoio e chips saem.
	 *
	 * O H1 NÃO é `display:none`: vira texto de leitor de tela. Escondido de verdade, a página
	 * ficaria sem título nenhum para quem usa leitor e para o buscador, e este é o H1 da home.
	 */
	.mg-hhero { background: var(--mg-fundo); }
	.mg-hhero__img,
	.mg-hhero--foto::after,
	.mg-hhero__selo,
	.mg-hhero__sub,
	.mg-hchips { display: none; }
	.mg-hhero__h1 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.mg-hhero__in { padding-block: 14px 4px; }
	.mg-hbusca { box-shadow: none; border: 1px solid var(--mg-borda); }
	.mg-hhero__rodape { margin-top: 10px; }

	/* O cartão de hoje: rótulo, dia e cidade à esquerda; o clima na ponta direita. */
	.mg-hclima {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid var(--mg-borda);
		border-radius: 12px;
		background: #fff;
	}
	.mg-hclima__hoje {
		grid-column: 1;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--mg-texto-2);
	}
	.mg-hclima__data {
		grid-column: 1;
		font-size: 14.5px;
		font-weight: 700;
		color: var(--mg-marinho);
	}
	.mg-hclima__cidade {
		grid-column: 1;
		margin: 0;
		font-size: 12.5px;
		color: var(--mg-texto-2);
	}
	.mg-hclima .gcep-wx-hero-inline { grid-column: 2; grid-row: 1 / span 3; }
	.mg-hclima .gcep-wx-hero-inline + .mg-hclima__data::before { content: none; }

	/* 1. A trilha deixa de deslizar e vira uma coluna. */
	.mg-hcards,
	.mg-hviagens {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.mg-hcards > li,
	.mg-hviagens > li { flex: initial; scroll-snap-align: none; }

	/*
	 * 2. O card de anúncio vira linha.
	 *
	 * As MEDIDAS aqui são o conserto de 16/09 à tarde. Na primeira versão a miniatura tinha 72px e
	 * a coluna dos contatos era `auto` com TRÊS botões de 38px — sobravam ~166px para o texto num
	 * telefone de 414px, e o título quebrava letra por letra ("Arquitetu / ra / Equestre"), com a
	 * pill da categoria cortada em "CONST...". O dono mandou o print e estava certo.
	 *
	 * Agora: miniatura de 56px como na referência, contatos numa COLUNA de 34px, e o resto todo
	 * para o texto — cerca de 250px, que é onde "Construção e Reformas" cabe inteiro.
	 */
	.mg-hacard {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		padding: 11px;
	}
	.mg-hacard__foto {
		width: 56px;
		height: 56px;
		border-radius: 10px;
		overflow: hidden;
	}
	.mg-hacard__foto img { width: 100%; height: 100%; object-fit: cover; }

	/* Nome de anúncio não se quebra no meio da palavra: com a coluna estreita o `anywhere` do
	   desktop picava "Arquitetura" em três linhas. */
	.mg-hacard__t { overflow-wrap: normal; word-break: normal; }

	/* A dupla de pills, como na referência: categoria com contorno, Destaque em verde. */
	.mg-hacard__pills {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin: 0 0 6px;
	}
	.mg-hacard__destaque { display: inline-block; }
	.mg-hacard__destaque {
		padding: 5px 9px;
		border-radius: 99px;
		background: #e4f6ec;
		color: #0a6b42;
		font-size: 9.5px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .06em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	/* O selo da categoria vira a pill em cima do título, como na tela do aplicativo: contorno
	   claro em vez de azul chapado, para não brigar com o nome do anúncio ao lado. */
	.mg-hacard__selo {
		position: static;
		align-self: start;
		max-width: 100%;
		margin-bottom: 6px;
		padding: 5px 9px;
		border: 1px solid var(--mg-borda);
		background: #fff;
		color: var(--mg-texto-2);
		font-size: 9.5px;
		letter-spacing: .06em;
		text-transform: uppercase;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mg-hacard__corpo { padding: 0; gap: 4px; }
	.mg-hacard__t { font-size: 14px; }
	/* Descrição fora: na linha estreita ela empurra o status para fora da tela. */
	.mg-hacard__sub { display: none; }
	.mg-hacard__linha { flex-wrap: wrap; gap: 4px 10px; }

	/*
	 * Contatos: WhatsApp e telefone, os DOIS que o dono pediu. O "como chegar" sai — ele fazia
	 * três botões numa tela de 414px, e no anúncio sem telefone a rota tomava o lugar dele, o que
	 * deixava cada card com uma dupla diferente.
	 */
	/* `acoes_do_anuncio()` devolve os botões dentro de um `.mg-hdest__acoes` próprio — quem tem
	   que virar coluna é ele, não o nosso invólucro. */
	.mg-hacard__acoes { display: block; }
	.mg-hacard__acoes .mg-hdest__acoes {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 0;
	}
	.mg-hacard__acoes [data-gcep-click="maps"] { display: none; }
	.mg-hacard__acoes .mg-hacao { width: 34px; height: 34px; border-radius: 9px; }
	.mg-hacard__acoes .mg-hacao svg { width: 16px; height: 16px; }

	/*
	 * A BUSCA em uma linha só, como na referência. Eram três: campo, cidade e botão, empilhados —
	 * um terço da primeira tela gasto antes de qualquer conteúdo.
	 *
	 * A cidade sai porque é fixa (o guia é de uma cidade só) e já está escrita no cartão de hoje,
	 * logo abaixo. O botão vira quadrado com a lupa; o rótulo continua para leitor de tela.
	 */
	.mg-hbusca {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 7px;
	}
	.mg-hbusca__cidade { display: none; }
	.mg-hbusca__campo { flex: 1 1 auto; min-width: 0; }
	.mg-hbusca__botao {
		flex: none;
		width: 46px;
		min-width: 46px;
		padding: 0;
		gap: 0;
	}
	.mg-hbusca__botao span:not(.mg-sr) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	/*
	 * 2b. Imóvel, veículo, evento e post usam o card da BUSCA (`mg-rcard`), que já nasce em linha
	 * com a foto de 76px. Quem o deixava vertical na home era o override daqui de cima (.mg-hcards
	 * .mg-rcard), feito para o carrossel. Sem carrossel, ele volta ao formato original.
	 */
	.mg-hcards .mg-rcard {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		height: auto;
		padding: 11px;
	}
	.mg-hcards .mg-rcard__foto,
	.mg-hcards .mg-rcard__foto--vazia {
		width: 72px;
		height: 72px;
		max-height: none;
		aspect-ratio: auto;
		border-radius: 10px;
	}
	.mg-hcards .mg-rcard__corpo { padding: 0; }

	/* 3. Evento segue a mesma linha. */
	.mg-hevento {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		width: auto;
		min-width: 0;
		padding: 11px;
	}

	/*
	 * 4. BLOG no mesmo padrão dos outros, pedido do dono. O card compacto do post é vertical, com
	 * a foto ocupando a largura toda — duas matérias já enchiam a tela. Vira linha como o resto.
	 */
	.mg-home .mg-pcard--compacto {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		padding: 11px;
		background: #fff;
		border: 1px solid var(--mg-borda);
		border-radius: 13px;
	}
	.mg-home .mg-pcard--compacto .mg-pcard__foto {
		width: 56px;
		height: 56px;
		aspect-ratio: auto;
		border-radius: 10px;
		overflow: hidden;
	}
	.mg-home .mg-pcard--compacto .mg-pcard__corpo { padding: 0; min-width: 0; }

	/*
	 * 5. CARONA E TÁXI no mesmo padrão, pedido do dono. O card tinha origem, destino, dia, hora,
	 * data, tipo, lugares e preço em blocos empilhados — ficava mais alto que a tela. Aqui sobra o
	 * que decide se a pessoa clica: para onde vai, quando sai e se tem lugar.
	 */
	.mg-hviagem {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 10px;
		width: auto;
		min-width: 0;
		padding: 11px 13px;
	}
	.mg-hviagem__origem { grid-column: 1 / -1; font-size: 11px; }
	.mg-hviagem__destino { grid-column: 1 / -1; font-size: 14.5px; }
	.mg-hviagem__quando { grid-column: 1; }
	.mg-hviagem__tipo { grid-column: 2; grid-row: 3; margin: 0; }
	.mg-hviagem__lugares { grid-column: 1 / -1; padding: 7px 10px; font-size: 12px; }
	/* O rodapé de preço some: ele repete o que já está na ficha e é a linha que mais alonga. */
	.mg-hviagem__rodape { display: none; }
}


/* 2.5.456 (16/09/2026): o herói não é de ponta a ponta da tela. No `Home Morro Guia v2.dc.html`
   (linha 18) a página inteira tem 1440px e o herói ocupa essa largura, não a do monitor. Em tela
   mais larga que 1440 a foto parava de acompanhar o resto da página e virava faixa de 2000px —
   o dono viu num monitor grande. Até 1440 nada muda. */
@media (min-width: 1441px) {
	.mg-hhero { max-width: 1440px; margin-inline: auto; }
}

/* 16/09/2026 - Valoar: a página encaixotada do protótipo. O dono comparou lado a lado: lá a foto e
   tudo que vem embaixo moram numa caixa de 1440px com fundo próprio (#f8f6f1), e a borda da foto
   continua descendo até o fim. Aqui a foto parava sozinha. A caixa é a <main> inteira; fora dela o
   fundo fica um tom mais escuro e um fio de 1px marca a borda dos dois lados. */
@media (min-width: 1441px) {
	body.home.gcep-public-frontend.bg-background-light { background: #e9eef5; }
	.mg-home {
		max-width: 1440px;
		margin-inline: auto;
		background: #f8f6f1;
		box-shadow: -1px 0 0 #e0dcd2, 1px 0 0 #e0dcd2;
	}
}

/* 16/09/2026 - Valoar: ícone da loteria em laranja, como no `Home Morro Guia v2.dc.html` (bloco
   "Loterias — Resultados") e na imagem que o dono mandou. */
.mg-hbloco--resultados_loteria .mg-hbloco__ico { color: var(--mg-laranja, #ff7a00); }

/* 16/09/2026 - Valoar: miniaturas do celular sem nada por cima. A categoria do post e a data do
   evento saem da foto (56px, o selo tapava a imagem inteira) e entram no texto: no post, categoria
   acima da data; no evento, o nome primeiro e a data embaixo. No desktop os dois continuam sobre a
   foto, como no protótipo, e o texto novo fica escondido. */
.mg-pcard__cat,
.mg-hevento__quando { display: none; }
@media (max-width: 767.98px) {
	.mg-home .mg-pcard--compacto .mg-pcard__selo,
	.mg-hevento .mg-hevento__data { display: none; }
	.mg-home .mg-pcard--compacto .mg-pcard__cat {
		display: block;
		margin: 0 0 2px;
		font-size: 10.5px; font-weight: 700; line-height: 1.2;
		letter-spacing: .04em; text-transform: uppercase;
		color: var(--mg-azul, #0f5132);
	}
	.mg-hevento .mg-hevento__quando {
		display: flex; align-items: center; gap: 5px;
		margin: 0;
		font-size: 12px; font-weight: 600; line-height: 1.2;
		color: var(--mg-texto-2, #5a6660);
	}
	.mg-hevento__quando .mg-hsvg { width: 13px; height: 13px; }
	.mg-hevento .mg-hevento__corpo { gap: 4px; }
}
@media (max-width: 767.98px) {
	/* A foto do evento vinha em 16:9 dentro da coluna de 56px e ficava uma tira; quadrada como as outras. */
	.mg-hevento .mg-hevento__foto { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 10px; overflow: hidden; }
	.mg-hevento .mg-hevento__foto img { width: 100%; height: 100%; object-fit: cover; }
	.mg-home .mg-pcard--compacto .mg-pcard__data { margin: 0 0 3px; }
}

/* 17/09/2026 - Valoar: o clima dentro do cartão "HOJE" no celular. No local não há chave do
   OpenWeather e o cartão só tinha sido visto sem o clima; na produção o widget entrou com as regras
   da cápsula do desktop (texto branco em fundo branco) e as do gcep-weather.css para <=640px, e
   espremeu a data numa coluna de uma palavra. Aqui: data à esquerda; ícone e máxima à direita, a
   mínima embaixo e "Saiba mais" como link. "hoje em Cidade" sai, porque o cartão já diz a cidade. */
@media (max-width: 767.98px) {
	.mg-hclima .gcep-wx-hero-inline {
		grid-column: 2;
		grid-row: 1 / span 3;
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		justify-items: end;
		column-gap: 8px;
		row-gap: 2px;
		width: auto;
		margin: 0;
		padding: 0;
		font-size: 13px;
		text-align: right;
		color: var(--mg-marinho);
	}
	.mg-hclima .gcep-wx-hero-inline::after { content: none; display: none; }
	.mg-hclima .gcep-wx-hero-inline__icon { order: 0; grid-column: 1; grid-row: 1; font-size: 28px !important; color: #f5a524; }
	.mg-hclima .gcep-wx-hero-inline__temp {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		font-size: 11.5px;
		line-height: 1.2;
		color: var(--mg-texto-2);
	}
	.mg-hclima .gcep-wx-hero-inline__temp strong { font-weight: 600; color: var(--mg-texto-2); white-space: nowrap; }
	.mg-hclima .gcep-wx-hero-inline__temp strong:first-child { font-size: 18px; font-weight: 800; color: var(--mg-marinho); }
	.mg-hclima .gcep-wx-hero-inline__city-line { display: none; }
	.mg-hclima .gcep-wx-hero-inline .gcep-wx-hero-inline__more,
	.mg-hclima button.gcep-wx-hero-inline__more {
		order: 0;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: end;
		min-height: 32px;
		padding: 0;
		border-radius: 6px;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none;
		color: var(--mg-azul) !important;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0;
		text-decoration: none;
	}
	.mg-hclima .gcep-wx-hero-inline__more .material-symbols-outlined { font-size: 14px !important; }
}

/* 17/09/2026 - Valoar: bloco do blog da home. No computador, o card das "Últimas postagens" do blog
   (mg-blog.css, .mg-pcard--grade); no celular, a lista compacta. O front-page.php imprime os dois. */
.mg-hcards--blog .mg-pcard--grade { display: none; }
@media (min-width: 768px) {
	.mg-hcards--blog .mg-pcard--compacto { display: none; }
	.mg-hcards--blog .mg-pcard--grade { display: flex; height: 100%; }
	.mg-hcards--blog > li { display: flex; }
	.mg-hcards--blog > li > .mg-pcard--grade { flex: 1; min-width: 0; }
}

/* 17/09/2026 - Valoar: 5 destaques numa linha no computador (pedido do dono). No tablet ficam 2 por
   linha e o 5º ocupa a linha inteira não fica bonito, então lá continuam 4. */
@media (min-width: 1024px) {
	.mg-hbloco--destaques .mg-hcards--4 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.mg-hbloco--destaques .mg-hcards > li:nth-child(5) { display: none; }
}

/* 17/09/2026: em 360px "Hospedagem" quebrava como "Hospedage / m". Divide pela sílaba. */
@media (max-width: 767.98px) {
	.mg-hcat__nome { -webkit-hyphens: auto; hyphens: auto; }
}