/**
 * Casca comum do site: barra de cima, cabeçalho, menu, gaveta do celular, painel da conta,
 * busca do cabeçalho, migalha, rodapé, barra de abas e cores do mapa.
 *
 * Handoff de design de 14/09/2026 (design_handoff_morro_guia). Fonte Inter por decisão do
 * dono; as cores vêm do manual da marca. Tudo aqui usa classe própria (mg-*) porque o Tailwind
 * do site é pré-compilado: classe que não entrou no build não estiliza e não avisa.
 *
 * @package GuiaWP
 * @since 2.5.450 - Valoar - 2026-09-14
 * @modified 2.5.450 - Valoar - 2026-09-14 - Correção da auditoria, etapa 2: tokens fixos, menu,
 *           gaveta e conta vindos do header.php, migalha, Leaflet, estados e item ativo.
 */

/*
 * --mg-azul é o valor da paleta, e não var(--gcep-color-primary).
 *
 * O tailwind.css compilado traz `:root{--gcep-color-primary:#0052cc}` (de tailwind-input.css) e
 * é carregado DEPOIS do <style> em que o tema injeta a cor do painel (#1266d6, wp_head 5). Mesma
 * especificidade, ganha o último: a variável vale #0052cc em toda tela pública, e tudo que lia
 * `var(--gcep-color-primary)` saía no azul errado (Anunciar, aba ativa). A casca não depende mais
 * dela. Quem usa `bg-primary` continua certo: o Tailwind lê `--gcep-color-primary-rgb`, que ele
 * não redefine.
 */
:root {
	--mg-azul: #1266d6;
	--mg-azul-hover: #0d47a6;
	--mg-azul-suave: #e4eefc;
	--mg-marinho: #0d2b5c;
	--mg-verde: #22b573;
	--mg-texto: #33496b;
	--mg-texto-2: #52678a;
	--mg-borda: #e6ecf4;
	--mg-borda-campo: #e1e8f2;
	--mg-borda-hover: #b9cfee;
	--mg-suave: #f1f5fa;
	/* Etapa 5 da correção: fundo e borda do card azul-claro (newsletter clara, sumário). */
	--mg-fundo-azul: #eef5fe;
	--mg-borda-azul: #dce8f8;
	--mg-fundo: #f6f8fb;
	--mg-erro: #b42318;
	--mg-erro-fundo: #fef3f2;
	--mg-separador: #98a7bc;
	--mg-fonte: Inter, system-ui, sans-serif;
	--mg-sombra-card: 0 1px 3px rgba(13, 43, 92, .05);
	--mg-sombra-elevada: 0 6px 20px rgba(13, 43, 92, .12);
	--mg-raio-card: 14px;
	--mg-raio-botao: 10px;
	/* Estado de toque (:active): o botão afunda um pouco; superfície clara ganha o azul suave. */
	--mg-ativo-escala: .97;
	--mg-ativo-fundo: var(--mg-azul-suave);
}

/* Home #12: o fundo da página no token. A classe bg-background-light do Tailwind dava #f5f7f8. */
body.gcep-public-frontend.bg-background-light { background-color: var(--mg-fundo); }

.mg-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: 16px;
}
@media (min-width: 768px) { .mg-wrap { padding-inline: 24px; } }
@media (min-width: 1440px) { .mg-wrap { padding-inline: 44px; } }

.mg-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ── Cabeçalho fixo ─────────────────────────────────────────────────────── */

.mg-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1200;
	background: #fff;
	box-shadow: 0 1px 0 var(--mg-borda);
	font-family: var(--mg-fonte);
}

/* Barra de cima: onde fica o guia e como falar com ele. */
.mg-topbar { background: var(--mg-marinho); color: #fff; }
.mg-topbar__in {
	height: 34px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	line-height: 1;
}
.mg-topbar__local {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mg-topbar__local svg { width: 13px; height: 13px; fill: #fff; flex: none; }
.mg-topbar__lema { display: none; color: #c7d8ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-topbar__dir { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mg-topbar a { color: #fff; text-decoration: none; }
.mg-topbar__contato { display: none; font-weight: 500; color: #dde8f5 !important; margin-right: 8px; }
.mg-topbar__contato:hover { color: #fff !important; text-decoration: underline !important; }
.mg-topbar__contato:active { opacity: .8; }
.mg-topbar__rede {
	position: relative;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	transition: background .15s ease;
}
.mg-topbar__rede:hover { background: rgba(255, 255, 255, .16); }
.mg-topbar__rede:active { background: rgba(255, 255, 255, .24); }
.mg-topbar__rede svg { position: relative; width: 16px; height: 16px; fill: #fff; display: block; }
.mg-topbar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/*
 * H4: no celular cada rede ganha 44px de largura e uma área de toque de 44px de altura por um
 * pseudo-elemento, sem a barra passar de 34px. O ícone continua 16px e o fundo do hover 30px.
 * A área de 44px começa 5px acima e termina 5px abaixo da barra; em cima é a borda da tela, embaixo
 * é o respiro da barra principal, onde não há outro alvo.
 */
@media (max-width: 767px) {
	.mg-topbar__in { gap: 8px; }
	.mg-topbar__dir { gap: 0; margin-right: -7px; }
	.mg-topbar__rede { width: 44px; height: 34px; border-radius: 0; background: none !important; }
	.mg-topbar__rede::before {
		content: "";
		position: absolute;
		top: 2px; left: 7px;
		width: 30px; height: 30px;
		border-radius: 8px;
		transition: background .15s ease;
	}
	.mg-topbar__rede::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
	.mg-topbar__rede:hover::before { background: rgba(255, 255, 255, .16); }
	.mg-topbar__rede:active::before { background: rgba(255, 255, 255, .24); }
	.mg-topbar a.mg-topbar__rede:focus-visible { outline: 0; }
	.mg-topbar a.mg-topbar__rede:focus-visible::before { outline: 2px solid #fff; outline-offset: 0; }
}

@media (min-width: 480px) { .mg-topbar__contato { display: inline; } }
@media (min-width: 768px) {
	.mg-topbar__in { height: 38px; gap: 20px; font-size: 12px; }
	.mg-topbar__lema { display: inline; }
}

/* Barra principal: logo, menu e ações. */
.mg-mainbar__in {
	height: 64px;
	display: flex;
	align-items: center;
	gap: 12px;
}
@media (min-width: 768px) { .mg-mainbar__in { height: 72px; } }

.mg-header .gcep-logo-link {
	display: inline-flex; align-items: center; flex: none; margin-right: 0;
	border-radius: 6px;
	transition: opacity .15s ease;
}
.mg-header .gcep-logo-link:hover { opacity: .88; }
.mg-header .gcep-logo-link:active { opacity: .75; }
.mg-header .gcep-logo-link:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 4px; }
.mg-header .gcep-logo-img { height: auto; display: block; }
/* No celular a barra tem logo, lupa, Anunciar e menu numa linha só. Em 390px a soma passava da
   tela e o botão de menu ficava cortado: o logo limita em 34% da largura. Abaixo de 380px o
   Anunciar vira só ícone, e o nome continua lá para o leitor de tela. */
@media (max-width: 767px) {
	.mg-header .gcep-logo-img {
		width: min(calc(var(--gcep-logo-w, 150px) - 30px), 34vw) !important;
		max-width: min(calc(var(--gcep-logo-w, 150px) - 30px), 34vw) !important;
	}
	.mg-mainbar__in { gap: 8px; }
	.mg-acoes { gap: 2px; }
	.mg-cta { padding: 0 12px; margin-inline: 2px; }
}
@media (max-width: 379px) {
	.mg-cta { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
	.mg-cta__curto {
		position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
	}
}
.mg-logo-texto { font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--mg-marinho); }

/* ── Menu do desktop e mega menu ────────────────────────────────────────────
   Vieram do <style> do header.php (2.5.197/2.5.297), com as cores trocadas pelos tokens. */

.mg-header .gcep-main-nav {
	display: none;
	align-items: center;
	gap: 20px;
	margin-left: 34px;
	min-width: 0;
}
.gcep-navlink,
.gcep-navdrop__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mg-texto);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease;
}
.gcep-navlink:hover,
.gcep-navdrop__toggle:hover,
.gcep-navdrop:focus-within > .gcep-navdrop__toggle { color: var(--mg-azul); }
.gcep-navlink:active,
.gcep-navdrop__toggle:active { color: var(--mg-azul-hover); }
.gcep-navlink:focus-visible,
.gcep-navdrop__toggle:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 4px; border-radius: 4px; }
.gcep-navlink__ico { width: 16px; height: 16px; flex: none; }

/* H2: a página em que a pessoa está. Azul, peso 700 e um traço de 2px embaixo. */
.gcep-navlink.current-menu-item,
.gcep-navlink.current-menu-ancestor,
.gcep-navlink[aria-current="page"],
.gcep-navdrop__toggle.current-menu-item,
.gcep-navdrop__toggle.current-menu-ancestor,
.gcep-navdrop__toggle[aria-current="page"] { color: var(--mg-azul); font-weight: 700; }
.gcep-navlink.current-menu-item::after,
.gcep-navlink.current-menu-ancestor::after,
.gcep-navlink[aria-current="page"]::after,
.gcep-navdrop__toggle.current-menu-item::after,
.gcep-navdrop__toggle.current-menu-ancestor::after,
.gcep-navdrop__toggle[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -8px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.gcep-navdrop { position: relative; display: inline-flex; }
.gcep-navdrop__chev { width: 16px; height: 16px; flex: none; color: var(--mg-texto-2); transition: transform .18s ease; }
.gcep-navdrop__toggle:hover .gcep-navdrop__chev,
.gcep-navdrop__toggle.current-menu-item .gcep-navdrop__chev,
.gcep-navdrop__toggle.current-menu-ancestor .gcep-navdrop__chev { color: currentColor; }
.gcep-navdrop:hover .gcep-navdrop__chev,
.gcep-navdrop:focus-within .gcep-navdrop__chev { transform: rotate(180deg); }
/* A faixa de 10px entre a barra e o painel é o que deixa o mouse atravessar sem o painel fechar
   no meio do caminho. padding-top no wrapper, não margin no box: margem cria buraco. */
.gcep-navdrop__panel { position: absolute; left: 0; top: 100%; padding-top: 10px; z-index: 60; display: none; }
.gcep-navdrop:hover .gcep-navdrop__panel,
.gcep-navdrop:focus-within .gcep-navdrop__panel { display: block; }
.gcep-navdrop__box {
	min-width: 200px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: var(--mg-raio-card);
	box-shadow: var(--mg-sombra-elevada);
}
.gcep-navdrop__item {
	display: block;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--mg-texto);
	text-decoration: none;
	white-space: nowrap;
}
.gcep-navdrop__item:hover { background: var(--mg-suave); color: var(--mg-azul); }
.gcep-navdrop__item:active { background: var(--mg-ativo-fundo); }

/* Mega menu. Duas colunas só a partir de 6 itens. */
.gcep-mega { padding: 8px; min-width: 300px; max-width: min(92vw, 560px); font-family: var(--mg-fonte); }
.gcep-mega:has(.gcep-mega__item:nth-child(6)) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 520px; }
.gcep-mega__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--mg-raio-botao);
	text-decoration: none;
	transition: background .15s ease;
}
.gcep-mega__item:hover { background: var(--mg-suave); }
.gcep-mega__item:active { background: var(--mg-ativo-fundo); }
.gcep-mega__item:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: -2px; }
/* Ícone escolhido pelo dono (classe icon-* do item) ou pela rota: continua na fonte de ícones. */
.gcep-mega__ico {
	flex: 0 0 auto;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--mg-raio-botao);
	background: var(--mg-suave);
	color: var(--mg-texto-2);
	font-size: 20px;
	transition: background .15s ease, color .15s ease;
}
.gcep-mega__ico svg { width: 20px; height: 20px; }
.gcep-mega__item:hover .gcep-mega__ico { background: var(--mg-azul-suave); color: var(--mg-azul); }
.gcep-mega__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gcep-mega__ttl { font-size: 14px; font-weight: 600; color: var(--mg-marinho); line-height: 1.3; }
.gcep-mega__sub { font-size: 12px; font-weight: 400; color: var(--mg-texto-2); line-height: 1.35; }
/* A porta da frente da seção ganha o verde da marca: o único destaque do menu, de propósito. */
.gcep-mega__item:first-child .gcep-mega__ico { background: rgba(34, 181, 115, .12); color: var(--mg-verde); }
.gcep-mega__item:first-child:hover .gcep-mega__ico { background: var(--mg-verde); color: #fff; }
.gcep-mega__item.current-menu-item { background: var(--mg-suave); }
.gcep-mega__item.current-menu-item .gcep-mega__ttl { color: var(--mg-azul); font-weight: 700; }

/* ── Ações do cabeçalho ───────────────────────────────────────────────── */

.mg-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.mg-icone-btn {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 99px;
	background: transparent;
	color: var(--mg-texto);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mg-icone-btn svg { width: 18px; height: 18px; display: block; }
.mg-icone-btn:hover, .mg-icone-btn[aria-expanded="true"] { background: var(--mg-suave); color: var(--mg-azul); }
.mg-icone-btn:active { background: var(--mg-ativo-fundo); color: var(--mg-azul); transform: scale(var(--mg-ativo-escala)); }
.mg-icone-btn:focus-visible,
.mg-cta:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-icone-btn--conta { display: none; }
.mg-icone-btn--menu { display: inline-flex; }

.mg-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: var(--mg-raio-botao);
	background: var(--mg-azul);
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease, transform .1s ease;
}
.mg-cta:hover { background: var(--mg-azul-hover); }
.mg-cta:active { background: var(--mg-azul-hover); transform: scale(var(--mg-ativo-escala)); }
.mg-cta svg { width: 15px; height: 15px; flex: none; }
.mg-cta__longo { display: none; }

@media (min-width: 768px) {
	.mg-acoes { gap: 10px; }
	.mg-icone-btn { width: 40px; height: 40px; background: var(--mg-suave); }
	.mg-icone-btn--conta { display: inline-flex; }
	.mg-cta { min-height: 44px; padding: 0 20px; }
	.mg-cta__curto { display: none; }
	.mg-cta__longo { display: inline; }
}
@media (min-width: 1280px) {
	.mg-header .gcep-main-nav { display: flex; }
	.mg-icone-btn--menu { display: none; }
}

/* Painel da conta (logado): Admin e Sair atrás do ícone. z acima da etiqueta de clima (9990). */
.mg-conta { position: relative; }
.gcep-account__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 9995;
	min-width: 180px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--mg-borda-campo);
	border-radius: 12px;
	box-shadow: var(--mg-sombra-elevada);
	font-family: var(--mg-fonte);
}
.gcep-account__panel[hidden] { display: none; }
.gcep-account__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mg-texto);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}
.gcep-account__item svg { width: 18px; height: 18px; flex: none; }
.gcep-account__item:hover { background: var(--mg-suave); color: var(--mg-azul); }
.gcep-account__item:active { background: var(--mg-ativo-fundo); }
.gcep-account__item:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: -2px; }
.gcep-account__item--danger { color: var(--mg-erro); }
.gcep-account__item--danger:hover { background: var(--mg-erro-fundo); color: var(--mg-erro); }
.gcep-account__item--danger:active { background: var(--mg-erro-fundo); }
.gcep-account__item--danger:focus-visible { outline-color: var(--mg-erro); }

/* Busca que abre embaixo do cabeçalho. */
.mg-busca {
	border-top: 1px solid var(--mg-borda);
	background: #fff;
	box-shadow: var(--mg-sombra-elevada);
}
.mg-busca__form {
	display: flex;
	gap: 8px;
	padding-block: 12px;
}
.mg-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: var(--mg-raio-botao);
	font: 500 15px/1 var(--mg-fonte);
	color: var(--mg-marinho);
	background: #fff;
}
.mg-busca__campo:hover { border-color: var(--mg-borda-hover); }
.mg-busca__campo::placeholder { color: var(--mg-texto-2); opacity: 1; }
.mg-busca__campo:focus { outline: 2px solid var(--mg-azul); outline-offset: 0; border-color: transparent; }
.mg-busca__botao {
	flex: none;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--mg-raio-botao);
	background: var(--mg-azul);
	color: #fff;
	font: 700 14px/1 var(--mg-fonte);
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.mg-busca__botao:hover { background: var(--mg-azul-hover); }
.mg-busca__botao:active { background: var(--mg-azul-hover); transform: scale(var(--mg-ativo-escala)); }
.mg-busca__botao:focus-visible { outline: 2px solid var(--mg-marinho); outline-offset: 2px; }

/* Espaço reservado embaixo do cabeçalho fixo. Alturas medidas no navegador. */
.gcep-header-offset { padding-top: 98px; }
.gcep-header-offset.mg-sem-topbar { padding-top: 64px; }
@media (min-width: 768px) {
	.gcep-header-offset { padding-top: 110px; }
	.gcep-header-offset.mg-sem-topbar { padding-top: 72px; }
}

/* ── Gaveta do menu (celular e tablet) ──────────────────────────────────────
   O JS do header.php liga e desliga `translate-x-full` (gaveta) e `hidden` (véu). */

.mg-gaveta-veu { position: fixed; inset: 0; background: rgba(13, 43, 92, .45); }
.mg-gaveta {
	position: fixed;
	top: 0; right: 0;
	width: 384px; max-width: 92vw;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 16px 40px rgba(13, 43, 92, .22);
	font-family: var(--mg-fonte);
	/*
	 * Correção da auditoria, etapa 5 (achado da etapa 4): a gaveta fechada ficava 384px fora da tela
	 * com `translateX(100%)`. Quando o header.php põe `translateZ(0)` no <body> por um quadro (a
	 * repintura depois que as fontes carregam), o body vira o bloco que contém a gaveta fixa e ela
	 * entra na largura rolável: a página ia 384px para o lado. Agora a caixa da gaveta nunca sai da
	 * tela. Fechada, ela é recortada (`clip-path`) e fica `visibility: hidden` (também sai do Tab);
	 * ao abrir, o recorte revela da direita e o conteúdo desliza DENTRO dela, que recorta o que passa.
	 * `translate-x-full` continua sendo o estado que o JS liga e desliga.
	 */
	overflow-x: hidden;
	clip-path: inset(0 0 0 -60px);
	visibility: visible;
	transition: clip-path .3s ease-in-out, visibility 0s linear 0s;
}
.mg-gaveta > * { transition: transform .3s ease-in-out; }
.mg-gaveta.translate-x-full {
	transform: none;
	clip-path: inset(0 0 0 100%);
	visibility: hidden;
	transition: clip-path .3s ease-in-out, visibility 0s linear .3s;
}
.mg-gaveta.translate-x-full > * { transform: translateX(100%); }
.mg-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	padding: 12px 12px 12px 20px;
	border-bottom: 1px solid var(--mg-borda);
}
.mg-gaveta__marca { display: flex; align-items: center; min-width: 0; border-radius: 6px; }
.mg-gaveta__marca:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 4px; }
.mg-gaveta__marca .gcep-mmenu__logo { height: 36px; width: auto; max-width: 200px; object-fit: contain; }
.mg-gaveta__nome { font-size: 18px; font-weight: 800; color: var(--mg-marinho); }
.mg-gaveta__fechar {
	width: 44px; height: 44px;
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: var(--mg-raio-botao);
	background: transparent;
	color: var(--mg-texto-2);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mg-gaveta__fechar svg { width: 22px; height: 22px; }
.mg-gaveta__fechar:hover { background: var(--mg-suave); color: var(--mg-marinho); }
.mg-gaveta__fechar:active { background: var(--mg-ativo-fundo); transform: scale(var(--mg-ativo-escala)); }
.mg-gaveta__fechar:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-gaveta__lista { padding: 16px; display: grid; gap: 4px; }

/* Itens: 44px no mínimo, com ou sem ícone. */
.gcep-mnav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 7px 12px;
	border-radius: var(--mg-raio-botao);
	font-size: 14px;
	font-weight: 600;
	color: var(--mg-texto);
	text-decoration: none;
	transition: background .15s ease;
}
.gcep-mnav__item .gcep-mega__ttl { color: var(--mg-marinho); }
.gcep-mnav__item:hover,
.gcep-mnav__group[open] > .gcep-mnav__item { background: var(--mg-suave); }
.gcep-mnav__item:active { background: var(--mg-ativo-fundo); }
.gcep-mnav__item:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: -2px; }
summary.gcep-mnav__item { cursor: pointer; list-style: none; }
summary.gcep-mnav__item::-webkit-details-marker { display: none; }
.gcep-mnav__ttl { flex: 1 1 auto; }
.gcep-mnav__chev { width: 20px; height: 20px; flex: none; color: var(--mg-texto-2); transition: transform .18s ease; }
.gcep-mnav__group[open] .gcep-mnav__chev { transform: rotate(180deg); }
.gcep-mnav__sub { padding: 2px 0 6px 14px; margin-left: 12px; border-left: 2px solid var(--mg-borda-campo); }
.gcep-mega__item--sub { padding: 7px 10px; }
.gcep-mega__item--sub .gcep-mega__ico { width: 30px; height: 30px; font-size: 20px; border-radius: 8px; }
.gcep-mega__item--sub .gcep-mega__ttl { font-size: 13.5px; }
.gcep-mnav__item.current-menu-item,
.gcep-mnav__item.current-menu-ancestor,
.gcep-mnav__item[aria-current="page"] { color: var(--mg-azul); font-weight: 700; box-shadow: inset 3px 0 0 var(--mg-azul); }
.gcep-mnav__item.current-menu-item .gcep-mega__ttl,
.gcep-mnav__item[aria-current="page"] .gcep-mega__ttl,
.gcep-mega__item--sub[aria-current="page"] .gcep-mega__ttl { color: var(--mg-azul); font-weight: 700; }

/* Rodapé da gaveta: Painel Admin, Painel, Sair / Entrar, Quero Anunciar. */
.mg-gaveta__rodape { display: grid; gap: 8px; flex: none; padding: 16px; border-top: 1px solid var(--mg-borda); }
.mg-gaveta__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--mg-borda-campo);
	border-radius: var(--mg-raio-botao);
	background: #fff;
	color: var(--mg-texto);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.mg-gaveta__botao svg { width: 18px; height: 18px; flex: none; }
.mg-gaveta__botao:hover { background: var(--mg-suave); border-color: var(--mg-borda-hover); }
.mg-gaveta__botao:active { background: var(--mg-ativo-fundo); transform: scale(var(--mg-ativo-escala)); }
.mg-gaveta__botao:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.mg-gaveta__botao--primario { border-color: var(--mg-azul); background: var(--mg-azul); color: #fff; }
.mg-gaveta__botao--primario:hover,
.mg-gaveta__botao--primario:active { border-color: var(--mg-azul-hover); background: var(--mg-azul-hover); }
.mg-gaveta__botao--sair { border-color: var(--mg-erro-fundo); background: var(--mg-erro-fundo); color: var(--mg-erro); }
.mg-gaveta__botao--sair:hover,
.mg-gaveta__botao--sair:active { border-color: #fbd4d0; background: #fde4e1; }
.mg-gaveta__botao--sair:focus-visible { outline-color: var(--mg-erro); }

/* ── Migalha ─────────────────────────────────────────────────────────────
   Veio do <style> do header.php (2.5.429/2.5.434). Uma linha só; o último degrau corta com
   reticências (o título inteiro está no H1 e no BreadcrumbList). */

.gcep-migalha { max-width: 1280px; margin: 0 auto; padding: 14px 16px 0; font-family: var(--mg-fonte); }
.gcep-migalha ol { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gcep-migalha li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--mg-texto-2); white-space: nowrap; }
.gcep-migalha li:not(:last-child) { flex: 0 0 auto; }
.gcep-migalha li:last-child { flex: 0 1 auto; overflow: hidden; }
.gcep-migalha li:last-child > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcep-migalha li + li::before { flex: none; content: "/"; color: var(--mg-separador); font-size: 13px; }
.gcep-migalha a { color: var(--mg-texto-2); text-decoration: none; border-radius: 2px; transition: color .15s ease; }
.gcep-migalha a:hover { color: var(--mg-azul); text-decoration: underline; }
.gcep-migalha a:active { color: var(--mg-azul-hover); }
.gcep-migalha a:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: 2px; }
.gcep-migalha [aria-current="page"] { color: var(--mg-marinho); font-weight: 600; }
@media (max-width: 640px) { .gcep-migalha { padding: 10px 16px 0; } .gcep-migalha li { font-size: 12px; } }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.mg-rodape {
	padding: 40px 0 20px;
	font-family: var(--mg-fonte);
	color: var(--mg-rodape-texto, #9fb4d2);
}
/* Celular: marca e Fale conosco em largura cheia, colunas de links em duas. */
.mg-rodape__grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
}
.mg-rodape__marca { grid-column: 1 / -1; }
.mg-rodape__contato { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.mg-rodape { padding-top: 48px; }
	.mg-rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mg-rodape__contato { grid-column: auto; }
}
@media (min-width: 1024px) {
	.mg-rodape__grade {
		grid-template-columns: minmax(250px, 1.4fr) repeat(var(--mg-colunas, 4), minmax(0, 1fr));
		gap: 28px;
	}
	.mg-rodape__marca { grid-column: auto; }
}

.mg-rodape__logo { display: inline-flex; margin-bottom: 16px; }
.mg-rodape__logo img { height: auto; display: block; }
.mg-rodape__nome { font-size: 21px; font-weight: 800; color: var(--mg-rodape-titulo, #fff); }
.mg-rodape__desc { margin: 0 0 18px; max-width: 320px; font-size: 13px; line-height: 1.7; }

.mg-rodape__redes { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-rodape__rede {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--mg-raio-botao);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transition: background .15s ease, transform .1s ease;
}
.mg-rodape__rede:hover { background: rgba(255, 255, 255, .2); }
.mg-rodape__rede:active { background: rgba(255, 255, 255, .26); transform: scale(var(--mg-ativo-escala)); }
.mg-rodape__rede svg { width: 17px; height: 17px; color: #fff; }

.mg-rodape__titulo {
	margin: 0 0 14px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mg-rodape-titulo, #fff);
}
.mg-rodape__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mg-rodape__lista a,
.mg-rodape__lista button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	font: 400 13px/1.35 var(--mg-fonte);
	color: var(--mg-rodape-link, #c3d2e6);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}
.mg-rodape__lista a:hover,
.mg-rodape__lista button:hover { color: var(--mg-rodape-link-hover, #fff); text-decoration: underline; }
.mg-rodape__lista a:active,
.mg-rodape__lista button:active,
.mg-rodape__base a:active { color: var(--mg-rodape-link-hover, #fff); opacity: .75; }
.mg-rodape__lista svg { width: 15px; height: 15px; flex: none; }
/* O e-mail do guia é uma palavra só e passava 5px da coluna "Fale conosco" em 1280, criando rolagem
   lateral em toda página. Ele quebra onde precisar. */
.mg-rodape__grade > * { min-width: 0; }
.mg-rodape__lista a, .mg-rodape__lista span.mg-rodape__texto { overflow-wrap: anywhere; }
.mg-rodape__lista span.mg-rodape__texto {
	display: inline-flex; align-items: center; gap: 9px;
	min-height: 32px; font-size: 13px; line-height: 1.35;
}
.mg-rodape a:focus-visible,
.mg-rodape button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.mg-rodape__base {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 12px;
	line-height: 1.5;
}
.mg-rodape__base p { margin: 0; }
.mg-rodape__feito { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mg-rodape__coracao { width: 13px; height: 13px; fill: #c42f3b; vertical-align: -2px; }
.mg-rodape__sep { opacity: .55; }
.mg-rodape__base a { color: var(--mg-rodape-link, #c3d2e6); font-weight: 600; text-decoration: none; }
.mg-rodape__base a:hover { color: var(--mg-rodape-link-hover, #fff); text-decoration: underline; }

/* ── Barra de abas do celular (MobileTabBar) ────────────────────────────────
   Uma barra só para o site e o aplicativo instalado. A pilha do rodapé do celular, de cima para
   baixo: aviso LGPD (z 99998, por cima de tudo enquanto aberto), faixa de ação da tela (z 900,
   logo acima das abas) e as abas (z 1100). O menu lateral (1290/1300) e os modais ficam acima. */

.mg-abas { display: none; }

@media (max-width: 767px) {
	:root { --mg-abas-h: 64px; }

	.mg-abas {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 1100;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		height: calc(var(--mg-abas-h) + env(safe-area-inset-bottom, 0px));
		padding: 0 4px env(safe-area-inset-bottom, 0px);
		background: #fff;
		box-shadow: 0 -1px 0 var(--mg-borda), 0 -2px 14px rgba(13, 43, 92, .08);
		font-family: var(--mg-fonte);
	}
	.mg-abas__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		min-height: 44px;
		color: var(--mg-texto-2);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: color .15s ease;
	}
	.mg-abas__item svg { width: 22px; height: 22px; flex: none; transition: transform .1s ease; }
	.mg-abas__rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mg-abas__item[aria-current="page"] { color: var(--mg-azul); font-weight: 700; }
	.mg-abas__item:active { color: var(--mg-azul); }
	.mg-abas__item:active svg { transform: scale(.9); }
	.mg-abas__item:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: -3px; border-radius: 10px; }

	/* Anunciar: botão redondo azul, subindo acima da barra. */
	.mg-abas__item--anunciar { color: var(--mg-azul); }
	.mg-abas__circulo {
		width: 46px; height: 46px;
		/* Ocupa na linha os mesmos 22px dos outros ícones: o rótulo fica alinhado. */
		margin-top: -24px;
		display: flex; align-items: center; justify-content: center;
		border-radius: 99px;
		background: var(--mg-azul);
		color: #fff;
		box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(18, 102, 214, .32);
		transition: background .15s ease, transform .1s ease;
	}
	.mg-abas__circulo svg { width: 20px; height: 20px; }
	.mg-abas__item--anunciar:active .mg-abas__circulo { background: var(--mg-azul-hover); transform: scale(var(--mg-ativo-escala)); }
	.mg-abas__item--anunciar:active svg { transform: none; }
	.mg-abas__item--anunciar:focus-visible { outline: 0; }
	.mg-abas__item--anunciar:focus-visible .mg-abas__circulo { outline: 2px solid var(--mg-marinho); outline-offset: 3px; }

	/* Com faixa de ação logo acima, o botão não sobe: cobriria a borda dos botões dela
	   (é assim também nas telas de evento e anúncio do protótipo). */
	body:has(.mg-barra, .mg-ev-barra, .mg-an-barra:not([hidden])) .mg-abas__circulo {
		width: 32px; height: 32px; margin-block: -5px; box-shadow: none;
	}

	/* O conteúdo e o rodapé terminam acima da barra. */
	body.mg-com-abas { padding-bottom: calc(var(--mg-abas-h) + env(safe-area-inset-bottom, 0px)); }

	/*
	 * 2026-09-16 - Valoar: o CTA VOLTA para o cabeçalho no celular, decisão do dono.
	 *
	 * A regra antiga escondia ele porque a barra de baixo tinha "Anunciar". A barra virou Início ·
	 * Buscar · Categorias · Favoritos · Mais (referência de aplicativo), e o botão que traz
	 * dinheiro não podia ficar sem lugar nenhum. No topo ele aparece em toda tela, como na
	 * referência que ele mandou.
	 */
	body.mg-com-abas .mg-acoes .mg-cta { display: inline-flex; }
	body.mg-com-abas .mg-header .gcep-logo-img {
		width: min(calc(var(--gcep-logo-w, 150px) - 20px), 52vw) !important;
		max-width: min(calc(var(--gcep-logo-w, 150px) - 20px), 52vw) !important;
	}
}
@media (max-width: 767px) and (hover: hover) {
	.mg-abas__item:hover { color: var(--mg-azul); }
}

@media print { .mg-abas { display: none !important; } }

/* ── Mapa (Leaflet) ─────────────────────────────────────────────────────────
   A12/E1: os controles do Leaflet vinham em preto, #333 e o azul #0078a8 do próprio Leaflet.
   O leaflet.css entra depois da casca (e pelo unpkg), então cada regra aqui leva uma classe a mais
   que a dele. Só cor, borda e fonte: tamanho e posição dos controles ficam os do Leaflet. */

.leaflet-container.leaflet-container { font-family: var(--mg-fonte); }
.leaflet-container .leaflet-control-zoom.leaflet-bar {
	border: 1px solid var(--mg-borda-campo);
	border-radius: var(--mg-raio-botao);
	box-shadow: var(--mg-sombra-elevada);
	overflow: hidden;
}
.leaflet-container .leaflet-control-zoom.leaflet-bar a {
	background: #fff;
	color: var(--mg-marinho);
	border-bottom-color: var(--mg-borda);
	font-family: var(--mg-fonte);
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.leaflet-container .leaflet-control-zoom.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover { background: var(--mg-suave); color: var(--mg-azul); }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:active { background: var(--mg-ativo-fundo); color: var(--mg-azul-hover); }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:focus-visible { outline: 2px solid var(--mg-azul); outline-offset: -2px; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { background: #fff; color: var(--mg-separador); }
.leaflet-container .leaflet-control-attribution.leaflet-control {
	background: rgba(255, 255, 255, .9);
	color: var(--mg-texto-2);
	font-family: var(--mg-fonte);
}
.leaflet-container .leaflet-control-attribution.leaflet-control a,
.leaflet-container .leaflet-popup-content a { color: var(--mg-azul); }
.leaflet-container .leaflet-control-attribution.leaflet-control a:hover,
.leaflet-container .leaflet-popup-content a:hover { color: var(--mg-azul-hover); }
.leaflet-container .leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; color: var(--mg-marinho); box-shadow: var(--mg-sombra-elevada); }
.leaflet-container .leaflet-popup a.leaflet-popup-close-button { color: var(--mg-texto-2); }
.leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover { color: var(--mg-marinho); }

@media (prefers-reduced-motion: reduce) {
	.mg-icone-btn, .mg-cta, .mg-rodape__rede, .mg-busca__botao, .mg-gaveta, .mg-gaveta > *, .mg-gaveta__botao, .mg-gaveta__fechar,
	.gcep-navdrop__chev, .gcep-mnav__chev, .gcep-mega__item, .gcep-mega__ico, .mg-abas__item, .mg-abas__circulo,
	.mg-abas__item svg, .mg-topbar__rede, .mg-topbar__rede::before { transition: none; }
	.mg-icone-btn:active, .mg-cta:active, .mg-busca__botao:active, .mg-rodape__rede:active, .mg-gaveta__botao:active,
	.mg-gaveta__fechar:active, .mg-abas__item:active svg, .mg-abas__item--anunciar:active .mg-abas__circulo { transform: none; }
}

/* ── Página encaixotada em 1440px (2.5.457, 16/09/2026) ─────────────────────────────────────────
   Pedido do dono com o `Home Morro Guia v2.dc.html` aberto: no HTML a página inteira é uma CAIXA de
   1440px (linha 18: `width:1440px; margin:0 auto; background:#F5F8FC`) sobre um fundo mais escuro
   (`body{background:#e9ecf1}`, linha 14). Cabeçalho, herói, conteúdo e rodapé ficam dentro dela, e a
   borda da foto do herói coincide com a borda da caixa — "como se estivesse tudo encaixotado".
   Só acima de 1440px: até essa largura a caixa É a tela e nada muda. Vale para toda tela pública,
   para a navegação não alternar entre página encaixotada e página solta. */
@media (min-width: 1441px) {
	body.gcep-public-frontend,
	body.gcep-public-frontend.bg-background-light { background: #e9ecf1; }
	body.gcep-public-frontend .mg-header { max-width: 1440px; margin-inline: auto; }
	body.gcep-public-frontend #gcep-conteudo {
		max-width: 1440px;
		margin-inline: auto;
		background: #f5f8fc;
	}
	body.gcep-public-frontend .mg-rodape { max-width: 1440px; margin-inline: auto; }
}

/* ── Área segura do topo no iPhone (trazido da produção, 15/09/2026) ─────────────────────────────
   Ajuste feito direto na produção para o aplicativo (casca iOS/WKWebView) e para o guia aberto da
   tela inicial, onde a página ocupa a tela física inteira e o conteúdo passava por baixo do relógio.
   O header.php põe `viewport-fit=cover` e a classe `gcep-em-app` só nesses casos. Sem essa meta,
   env(safe-area-inset-top) vale zero: nada muda no navegador, no Android nem no desktop. Quem cresce
   é a barra de cima (opaca); sem ela, o próprio cabeçalho. */
.mg-topbar { padding-top: env(safe-area-inset-top, 0px); }
.mg-header:not(:has(.mg-topbar)) { padding-top: env(safe-area-inset-top, 0px); }
.gcep-header-offset { padding-top: calc(98px + env(safe-area-inset-top, 0px)); }
.gcep-header-offset.mg-sem-topbar { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
@media (min-width: 768px) {
	.gcep-header-offset { padding-top: calc(110px + env(safe-area-inset-top, 0px)); }
	.gcep-header-offset.mg-sem-topbar { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
}
.gcep-em-app #gcep-theme-mobile-menu { padding-top: env(safe-area-inset-top, 0px); }
/* Convidar a instalar quem já está dentro do aplicativo não faz sentido, e o convite tapa o rodapé. */
.gcep-em-app #pwa-convite,
.gcep-em-app #pwa-guia { display: none !important; }

/* ── Clima na barra de cima (17/09/2026) ────────────────────────────────────────────────────────
   Pedido do dono: "Hoje · ícone · 19° Máx. 19° Mín. · hoje em Morro do Chapéu" no lugar de
   "Morro do Chapéu - BA". No celular a linha não cabe ao lado das redes: sai o "Hoje" e o
   "hoje em", fica ícone, máxima, mínima e a cidade. */
.mg-topbar__clima {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-weight: 500;
	color: #c7d8ee;
	white-space: nowrap;
	overflow: hidden;
}
.mg-topbar__clima strong { font-weight: 700; color: #fff; }
.mg-topbar__hoje { color: #c7d8ee; }
.mg-topbar__clima-ico.material-symbols-outlined { font-size: 16px; color: #ffc86b; }
.mg-topbar__em { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
	.mg-topbar__hoje, .mg-topbar__rot { display: none; }
	.mg-topbar__min { margin-left: -2px; }
	.mg-topbar__min::before { content: "/"; margin-right: 4px; font-weight: 500; color: #c7d8ee; }
	.mg-topbar__clima { gap: 5px; }
	.mg-topbar__em { font-size: 0; }
	.mg-topbar__em strong { font-size: 12px; font-weight: 600; }
	.mg-topbar__em strong::before { content: "· "; color: #c7d8ee; font-weight: 500; }
}

/* ── Cabeçalho do celular: o menu não pode encostar na borda (21/09/2026) ──
 * O dono mandou o print: "o menu hambúrguer tá muito para o lado direito".
 * A causa não era margem, era ESTOURO: a linha (logo + lupa + Painel + menu) somava mais que a
 * largura da tela, e o grupo da direita saía pela borda levando o botão junto — metade dele
 * ficava fora em 390px. Como nada podia encolher, o excedente vazava.
 *
 * Agora o LOGO é quem cede: ele é o único item flexível da linha, e os botões mantêm os 44px de
 * alvo de toque. Com a linha cabendo, o menu volta para dentro do respiro de 16px do container.
 */
@media (max-width: 767px) {
	.mg-mainbar__in { flex-wrap: nowrap; min-width: 0; }
	/* O logo encolhe; os botões, não. */
	.mg-header .gcep-logo-link { flex: 0 1 auto; min-width: 0; }
	/* E o logo encolhe JUNTO com o espaço que sobrou, em vez de ser cortado ao meio. O max-width
	   vence o width fixo do redesenho do celular (body.mg-com-abas) pela especificidade. */
	body .mg-header .gcep-logo-link .gcep-logo-img { max-width: 100% !important; height: auto; }
	.mg-acoes { flex: none; }
	.mg-header .gcep-logo-img {
		width: min(calc(var(--gcep-logo-w, 150px) - 30px), 30vw) !important;
		max-width: min(calc(var(--gcep-logo-w, 150px) - 30px), 30vw) !important;
	}
}