/**
 * Página mãe (hub) de um assunto, como /turismo/ (GCEP_Pagina_Mae).
 *
 * Desenho do mockup "pagina de turismo.png" (dono, 19/09/2026): herói de foto inteira com três
 * destaques, bloco de busca, seis cartões de experiência, cinco atrativos, o bloco "qual experiência
 * combina com você", a linha de roteiros + agenda + planejamento, o Centro de Atendimento ao Turista
 * e a faixa final. Substitui o desenho de 17/09 (herói de texto à esquerda e foto à direita).
 *
 * Paleta, Inter e container (.mg-wrap) da casca (gcep-casca.css); a frase manuscrita usa a Caveat
 * que o blog já carrega. Os blocos .mg-hubp / .mg-hube / .mg-hub-galeria / .mg-hub-faq continuam
 * aqui porque os shortcodes mg_hub_destaques, mg_post, mg_posts e mg_hub_eventos (variante cards)
 * seguem existindo para outras páginas mãe.
 *
 * @author Valoar
 * @since 2.5.450 - 2026-09-17
 * @modified 2.5.452 - 2026-09-19 - Desenho novo da /turismo/.
 */

.mg-hub {
	--hub-azul: var(--mg-azul, #1266d6);
	--hub-azul-h: var(--mg-azul-hover, #0d47a6);
	--hub-verde: var(--mg-verde, #22b573);
	--hub-verde-f: #158a58;
	--hub-marinho: var(--mg-marinho, #0d2b5c);
	--hub-laranja: #ff7a00;
	--hub-vinho: #8c2f52;
	--hub-texto: var(--mg-texto, #33496b);
	--hub-texto-2: var(--mg-texto-2, #52678a);
	--hub-borda: var(--mg-borda, #e6ecf4);
	--hub-fundo: #f5f8fc;
	--hub-raio: 14px;
	--hub-sombra: 0 1px 2px rgba(13, 43, 92, .05), 0 4px 14px rgba(13, 43, 92, .05);
	background: var(--hub-fundo);
	font-family: var(--mg-fonte, Inter, system-ui, sans-serif);
	color: var(--hub-texto);
	overflow-x: clip;
}
.mg-hub *, .mg-hub *::before, .mg-hub *::after { box-sizing: border-box; }
.mg-hub h1, .mg-hub h2, .mg-hub h3, .mg-hub p, .mg-hub ul, .mg-hub ol, .mg-hub figure { margin: 0; }
.mg-hub ul, .mg-hub ol { padding: 0; list-style: none; }
.mg-hub img { display: block; max-width: 100%; }
.mg-hub svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Glifo de marca (WhatsApp): é desenho cheio, não traço. */
.mg-hub svg.mg-hub-ico--cheio { fill: currentColor; stroke: none; }
.mg-hub a:focus-visible, .mg-hub button:focus-visible, .mg-hub input:focus-visible, .mg-hub summary:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; border-radius: 8px; }

/* O hub respira num container um pouco mais estreito que o do resto do site. */
.mg-hub .mg-wrap { max-width: 1320px; }

/* Cores dos ícones: a paleta da marca e tons suaves dela. */
.mg-hub-cor--azul { color: var(--hub-azul); background: #e8f1fd; }
.mg-hub-cor--verde { color: var(--hub-verde-f); background: #e5f6ee; }
.mg-hub-cor--laranja { color: #e56d00; background: #fff1e5; }
.mg-hub-cor--roxo { color: #6d4bd8; background: #efeafd; }
.mg-hub-cor--cinza { color: #4a5f7e; background: #eceff4; }
.mg-hub-cor--vinho { color: var(--hub-vinho); background: #fbeaf1; }

/* Ícone em disco cheio (o do mockup): fundo na cor, traço branco. */
.mg-hub-disco { display: grid; place-items: center; flex: none; border-radius: 99px; color: #fff; }
.mg-hub-disco--azul { background: var(--hub-azul); }
.mg-hub-disco--verde { background: var(--hub-verde-f); }
.mg-hub-disco--marinho { background: var(--hub-marinho); }
.mg-hub-disco--vinho { background: var(--hub-vinho); }

/* Botões. */
.mg-hub-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
	border: 0; border-radius: 10px; font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2; text-decoration: none;
	cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.mg-hub-btn svg { font-size: 18px; stroke-width: 2.2; }
.mg-hub .mg-hub-btn--cheio { background: var(--hub-azul); color: #fff; box-shadow: 0 6px 16px rgba(18, 102, 214, .22); }
.mg-hub .mg-hub-btn--cheio:hover { background: var(--hub-azul-h); color: #fff; }
.mg-hub .mg-hub-btn--linha { border: 1.5px solid #cfdcee; background: #fff; color: var(--hub-azul); }
.mg-hub .mg-hub-btn--linha:hover { border-color: var(--hub-azul); color: var(--hub-azul-h); }
.mg-hub .mg-hub-btn--laranja { background: var(--hub-laranja); color: #fff; border-radius: 99px; box-shadow: 0 8px 22px rgba(255, 122, 0, .3); }
.mg-hub .mg-hub-btn--laranja:hover { background: #e56d00; color: #fff; }
.mg-hub .mg-hub-btn--branco { background: #fff; color: var(--hub-azul); border-radius: 99px; box-shadow: 0 8px 22px rgba(13, 43, 92, .22); }
.mg-hub .mg-hub-btn--branco:hover { background: #f2f7ff; color: var(--hub-azul-h); }
.mg-hub .mg-hub-btn--bloco { width: 100%; min-height: 42px; font-size: 14.5px; }

.mg-hub .mg-hub-vermais {
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--hub-azul);
	text-decoration: none; white-space: nowrap;
}
.mg-hub .mg-hub-vermais:hover { color: var(--hub-azul-h); text-decoration: underline; text-underline-offset: 3px; }
.mg-hub-vermais svg { font-size: 16px; stroke-width: 2.2; }
.mg-hub-vermais--miudo { font-size: 12.5px; }

/* Frase manuscrita (decorativa). */
.mg-hub-escrita {
	font: 700 clamp(26px, 3vw, 42px)/1.04 Caveat, "Segoe Script", "Bradley Hand", cursive;
	color: #fff; text-shadow: 0 2px 14px rgba(13, 43, 92, .45); transform: rotate(-7deg); pointer-events: none;
}
.mg-hub-escrita svg { display: block; width: 84%; height: 13px; margin: 2px 0 0 auto; stroke: var(--hub-laranja); stroke-width: 4; }

/* ================================================================== *
 * 1. HERÓI                                                            *
 * ================================================================== */
.mg-hub-hero { position: relative; display: flex; align-items: flex-end; min-height: 420px; overflow: hidden; background: var(--hub-marinho); }
.mg-hub-hero__foto { position: absolute; inset: 0; margin: 0; }
.mg-hub-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
/*
 * A sombra é VERTICAL no celular e DIAGONAL no desktop. Numa tela estreita o degradê diagonal
 * deixava metade do título em cima do céu claro, sem contraste para ler.
 */
.mg-hub-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6, 20, 40, .58) 0%, rgba(6, 20, 40, .5) 30%, rgba(6, 20, 40, .66) 70%, rgba(6, 20, 40, .82) 100%);
}
@media (min-width: 1024px) {
	.mg-hub-hero::after {
		background: linear-gradient(101deg, rgba(6, 20, 40, .88) 0%, rgba(6, 20, 40, .72) 30%, rgba(6, 20, 40, .28) 58%, rgba(6, 20, 40, .14) 78%, rgba(6, 20, 40, .34) 100%);
	}
}
.mg-hub-hero__grade { position: relative; z-index: 1; width: 100%; padding-top: 34px; padding-bottom: 28px; }
.mg-hub-hero__selo { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.mg-hub-hero__h1 {
	max-width: 15ch; margin-top: 12px; font-size: clamp(32px, 5.6vw, 56px); font-weight: 800; line-height: 1.04;
	letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 18px rgba(6, 20, 40, .35);
}
.mg-hub-hero__sub {
	max-width: 44ch; margin-top: 14px; font-size: clamp(15.5px, 1.5vw, 19px); font-weight: 500; line-height: 1.45;
	color: rgba(255, 255, 255, .94); text-shadow: 0 1px 12px rgba(6, 20, 40, .35);
}
.mg-hub-hero__destaques { display: grid; gap: 14px; margin-top: 26px; }
.mg-hub-hero__destaques li { display: flex; align-items: flex-start; gap: 11px; }
.mg-hub-hero__destaques .mg-hub-disco { width: 42px; height: 42px; font-size: 21px; margin-top: 1px; }
.mg-hub-hero__dtexto { min-width: 0; }
.mg-hub-hero__destaques strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: #fff; }
.mg-hub-hero__dtexto span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
/* No celular a frase encosta na direita em vez de esticar o risco laranja pela largura toda. */
.mg-hub-hero__assinatura { width: max-content; margin: 20px 0 0 auto; text-align: right; font-size: 26px; }

@media (min-width: 640px) {
	.mg-hub-hero { min-height: 500px; }
	.mg-hub-hero__grade { padding-top: 44px; padding-bottom: 34px; }
	.mg-hub-hero__destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 780px; }
}
@media (max-width: 639.98px) {
	.mg-hub-hero__destaques { gap: 12px; margin-top: 20px; }
	.mg-hub-hero__destaques .mg-hub-disco { width: 36px; height: 36px; font-size: 18px; }
	.mg-hub-hero__destaques strong { font-size: 14px; }
	.mg-hub-hero__dtexto span { font-size: 12.5px; }
}
@media (min-width: 1024px) {
	.mg-hub-hero { min-height: 560px; }
	.mg-hub-hero__grade { position: relative; padding-top: 58px; padding-bottom: 46px; }
	.mg-hub-hero__destaques { margin-top: 38px; gap: 26px; }
	.mg-hub-hero__assinatura { position: absolute; right: 44px; bottom: 34px; width: auto; margin: 0; font-size: 40px; }
}

/* ================================================================== *
 * 2. BUSCA                                                            *
 * ================================================================== */
.mg-hub-secao--busca { padding: 22px 0 10px; }
.mg-hub-busca {
	display: grid; gap: 22px; padding: 22px 20px; border: 1px solid #e2ebf6; border-radius: 20px;
	background: linear-gradient(115deg, #f2f7fd 0%, #eef6fb 60%, #edf7f2 100%);
}
.mg-hub-busca__titulo { font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hub-marinho); }
.mg-hub-busca__texto { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub-busca__form { display: grid; gap: 10px; margin-top: 16px; }
.mg-hub-busca__campo { position: relative; }
.mg-hub-busca__campo svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--hub-azul); stroke-width: 2.2; pointer-events: none; }
.mg-hub .mg-hub-busca__campo input {
	width: 100%; min-height: 50px; padding: 0 16px 0 46px; border: 1px solid #dde7f4; border-radius: 10px; background: #fff;
	font-family: inherit; font-size: 15px; color: var(--hub-texto); box-shadow: 0 1px 2px rgba(13, 43, 92, .04);
}
.mg-hub .mg-hub-busca__campo input::placeholder { color: #8698b4; }
.mg-hub .mg-hub-busca__campo input:focus { border-color: var(--hub-azul); outline: none; box-shadow: 0 0 0 3px rgba(18, 102, 214, .16); }
.mg-hub-busca__rotulo { font-size: 13px; font-weight: 700; color: var(--hub-verde-f); }
.mg-hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mg-hub .mg-hub-chips a {
	display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #cfe1f7; border-radius: 99px;
	background: #eef5fd; font-size: 13.5px; font-weight: 600; color: var(--hub-azul); text-decoration: none;
	transition: background-color .16s, border-color .16s, color .16s;
}
.mg-hub .mg-hub-chips a:hover { background: #ddebfc; border-color: var(--hub-azul); color: var(--hub-azul-h); }

@media (min-width: 560px) { .mg-hub-busca__form { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1024px) {
	.mg-hub-secao--busca { padding: 30px 0 6px; }
	.mg-hub-busca { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 40px; padding: 28px 32px; }
	.mg-hub-busca__lado { align-self: center; }
}

/* ================================================================== *
 * seções e cabeçalhos                                                 *
 * ================================================================== */
.mg-hub-secao { padding: 34px 0; }
@media (min-width: 1024px) { .mg-hub-secao { padding: 44px 0; } }
.mg-hub-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.mg-hub-cab h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--hub-marinho); }
.mg-hub-cab p { flex-basis: 100%; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub-cab--miuda { margin-bottom: 14px; }
.mg-hub-cab--miuda h2 { font-size: clamp(18px, 1.7vw, 21px); }
.mg-hub-vazio { padding: 20px; border: 1px dashed #cfdcee; border-radius: var(--hub-raio); background: #fff; font-size: 14.5px; line-height: 1.55; color: var(--hub-texto-2); }

/* ================================================================== *
 * 3. ESCOLHA SUA EXPERIÊNCIA                                          *
 * ================================================================== */
.mg-hub-exps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 700px) { .mg-hub-exps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .mg-hub-exps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }

.mg-hub-exp {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mg-hub-exp:hover { transform: translateY(-3px); border-color: #c7dcf5; box-shadow: 0 12px 26px rgba(13, 43, 92, .1); }
.mg-hub-exp__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dde7f3; }
.mg-hub-exp__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hub-exp:hover .mg-hub-exp__foto img { transform: scale(1.05); }
/* Cartão sem fotografia da região: fundo na cor da experiência, nunca uma foto que não é daqui. */
.mg-hub-exp__foto--cor { display: grid; place-items: center; color: #fff; }
.mg-hub-exp__foto--cor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%); }
.mg-hub-exp__foto--cor > svg { width: 58px; height: 58px; opacity: .5; stroke-width: 1.5; }
.mg-hub-exp__foto--azul { background: linear-gradient(140deg, #1d64c8 0%, #0d2b5c 100%); }
.mg-hub-exp__foto--vinho { background: linear-gradient(140deg, #a23c62 0%, #5d1b36 100%); }
.mg-hub-exp__foto--verde { background: linear-gradient(140deg, #23a26c 0%, #0f5f3d 100%); }
.mg-hub-exp__foto--noite { background: linear-gradient(140deg, #23407a 0%, #0a1834 100%); }
/* O ícone mora no corpo, não na foto: dentro da foto o overflow:hidden cortava o disco ao meio. */
.mg-hub-exp__corpo { position: relative; display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 30px 14px 16px; }
.mg-hub-exp__ico { position: absolute; left: 14px; top: -20px; width: 40px; height: 40px; font-size: 20px; box-shadow: 0 4px 12px rgba(13, 43, 92, .28); border: 2px solid #fff; }
.mg-hub-exp__titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 15.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.mg-hub .mg-hub-exp__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hub-exp__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-hub-exp:hover .mg-hub-exp__titulo a { color: var(--hub-azul); }
.mg-hub-exp__titulo svg { margin-top: 3px; font-size: 15px; color: #8698b4; }
.mg-hub-exp__texto { font-size: 13px; line-height: 1.45; color: var(--hub-texto-2); }

/* ================================================================== *
 * 4. ATRATIVOS                                                        *
 * ================================================================== */
.mg-hub-atrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
@media (min-width: 1180px) { .mg-hub-atrs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.mg-hub-atr {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s;
}
.mg-hub-atr:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 43, 92, .1); }
.mg-hub-atr__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dde7f3; }
.mg-hub-atr__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hub-atr:hover .mg-hub-atr__foto img { transform: scale(1.05); }
.mg-hub-atr__foto--cor { display: grid; place-items: center; background: linear-gradient(140deg, #2a4f86 0%, #0d2b5c 100%); color: #fff; }
.mg-hub-atr__foto--cor > svg { width: 54px; height: 54px; opacity: .45; stroke-width: 1.5; }
.mg-hub-atr__selo {
	position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 11px; border-radius: 99px; background: var(--hub-verde-f);
	color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.2;
}
.mg-hub-atr__salvar { position: absolute; right: 10px; top: 10px; z-index: 2; }
.mg-hub-atr__corpo { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 14px 14px 16px; }
.mg-hub-atr__titulo { font-size: 15.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.mg-hub .mg-hub-atr__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hub-atr:hover .mg-hub-atr__titulo a { color: var(--hub-azul); }
.mg-hub-atr__local { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--hub-texto-2); }
.mg-hub-atr__local svg { font-size: 14px; color: var(--hub-azul); }
.mg-hub-atr__texto { font-size: 13.5px; line-height: 1.5; color: var(--hub-texto-2); }
/* O rodapé desce sozinho: cartão sem os dados de distância mantém o botão na mesma linha dos outros. */
.mg-hub-atr__rodape { margin-top: auto; padding-top: 10px; }
.mg-hub-atr__dados { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mg-hub-atr__dados li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--hub-texto-2); }
.mg-hub-atr__dados svg { font-size: 14px; color: var(--hub-marinho); }
.mg-hub-atr__rodape .mg-hub-btn { margin-top: 12px; }

/* O coração é o salvar de verdade (GCEP_Salvos); aqui ele só ganha o disco branco do mockup. */
.mg-hub-atr__salvar .mg-salvar { width: 34px; height: 34px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(13, 43, 92, .22); }

/* ================================================================== *
 * 5. QUAL EXPERIÊNCIA COMBINA COM VOCÊ                                *
 * ================================================================== */
.mg-hub-secao--combina { background: #e9f5f0; }
.mg-hub-combina { display: grid; gap: 16px; }
@media (min-width: 1024px) { .mg-hub-combina { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 20px; } }

.mg-hub-combina__foto { position: relative; display: flex; align-items: center; min-height: 250px; overflow: hidden; border-radius: 16px; background: var(--hub-marinho); }
.mg-hub-combina__img { position: absolute; inset: 0; margin: 0; }
.mg-hub-combina__img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.mg-hub-combina__foto::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(96deg, rgba(6, 20, 40, .86) 0%, rgba(6, 20, 40, .66) 38%, rgba(6, 20, 40, .12) 72%);
}
.mg-hub-combina__texto { position: relative; z-index: 1; max-width: 26ch; padding: 26px 22px; }
.mg-hub-combina__texto h2 { font-size: clamp(21px, 2.1vw, 27px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; color: #fff; }
.mg-hub-combina__texto p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.mg-hub-combina__texto .mg-hub-btn { margin-top: 18px; }

.mg-hub-opcoes { display: grid; gap: 14px; align-content: start; }
@media (min-width: 620px) { .mg-hub-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mg-hub-opcao {
	position: relative; display: flex; align-items: flex-start; gap: 13px; height: 100%; padding: 16px 14px;
	border: 1px solid #e0ece7; border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s;
}
.mg-hub-opcao:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 43, 92, .1); }
.mg-hub-opcao .mg-hub-disco { width: 46px; height: 46px; font-size: 23px; }
.mg-hub-opcao__corpo { flex: 1; min-width: 0; }
.mg-hub-opcao__titulo { font-size: 15px; font-weight: 800; line-height: 1.25; }
.mg-hub .mg-hub-opcao__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hub-opcao__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-hub-opcao:hover .mg-hub-opcao__titulo a { color: var(--hub-azul); }
.mg-hub-opcao__texto { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--hub-texto-2); }
.mg-hub-opcao__seta { align-self: center; font-size: 16px; color: #8698b4; }

/* No mockup a faixa é curta e os quatro cartões medem juntos o mesmo que a foto.
 * Sem o stretch, as duas fileiras ficavam menores que a foto e sobrava um vazio verde embaixo. */
@media (min-width: 1024px) {
	.mg-hub-secao--combina { padding: 30px 0; }
	.mg-hub-opcoes { grid-auto-rows: 1fr; align-content: stretch; }
	.mg-hub-opcao { align-items: center; }
}

/* ================================================================== *
 * 6. ROTEIROS + AGENDA + PLANEJAMENTO                                 *
 * ================================================================== */
.mg-hub-trio { display: grid; gap: 30px; }
@media (min-width: 1280px) {
	/* Proporção do mockup: roteiros e agenda ganham largura, o planejamento devolve.
	 * O respiro entre colunas caiu de 26 para 18 px porque eram 104 px que faltavam ao texto. */
	.mg-hub-trio { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.13fr); gap: 0 18px; }
	.mg-hub-trio__col + .mg-hub-trio__col { padding-left: 18px; border-left: 1px solid var(--hub-borda); }
	/* Os três títulos ocupam a mesma altura, então as três listas começam na mesma linha. */
	.mg-hub-cab--miuda { min-height: 46px; gap: 4px 14px; align-items: flex-start; }
	.mg-hub-cab--miuda h2 { font-size: 17px; }
	.mg-hub-cab--miuda .mg-hub-vermais--miudo { padding-top: 2px; font-size: 12px; }
}

/* Roteiros */
.mg-hub-rots { display: grid; gap: 12px; }
/* Três colunas só quando cabem: com repeat(3) fixo, entre 480 e 560 px o cartão ficava com ~145 px
 * e o título quebrava em duas linhas. O auto-fit cai para duas colunas ali e volta a três depois. */
@media (min-width: 480px) { .mg-hub-rots { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.mg-hub-rot {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--hub-borda); border-radius: 12px; background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s;
}
.mg-hub-rot:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(13, 43, 92, .1); }
.mg-hub-rot__foto { aspect-ratio: 16 / 11; overflow: hidden; background: #dde7f3; }
.mg-hub-rot__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hub-rot:hover .mg-hub-rot__foto img { transform: scale(1.05); }
.mg-hub-rot__corpo { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 11px 12px 13px; }
.mg-hub-rot__tempo { font-size: 13px; font-weight: 800; color: var(--hub-azul); }
.mg-hub-rot__titulo { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.mg-hub .mg-hub-rot__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hub-rot__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-hub-rot:hover .mg-hub-rot__titulo a { color: var(--hub-azul); }
.mg-hub-rot__lugares { margin-top: auto; padding-top: 10px; font-size: 12px; line-height: 1.4; color: var(--hub-texto-2); }
/* Ao lado da agenda e do planejamento a coluna tem ~419 px. Em três cartões lado a lado sobram
 * 110 px de texto por cartão: "Morro do Chapéu por inteiro" e os lugares quebravam em três e
 * quatro linhas, e só caberiam com fonte abaixo de 12 px — abaixo do piso de leitura.
 * Então no desktop os três viram linhas: miniatura à esquerda, texto em uma linha cada.
 * Abaixo de 1280 px a coluna é inteira e os três cartões lado a lado continuam valendo. */
@media (min-width: 1280px) {
	.mg-hub-rots { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.mg-hub-rot { flex-direction: row; }
	.mg-hub-rot__foto { flex: none; width: 112px; aspect-ratio: 4 / 3; }
	.mg-hub-rot__corpo { justify-content: center; gap: 2px; padding: 10px 12px; }
	.mg-hub-rot__tempo { font-size: 12px; }
	.mg-hub-rot__titulo { font-size: 14px; text-wrap: balance; }
	.mg-hub-rot__lugares { margin-top: 2px; padding-top: 0; font-size: 12.5px; }
}

/* Agenda (mg_hub_eventos variante="agenda") */
.mg-hub-agenda-lista { display: grid; }
.mg-hubev { position: relative; display: flex; gap: 14px; padding: 13px 0; }
.mg-hubev + .mg-hubev { border-top: 1px solid var(--hub-borda); }
.mg-hubev__data {
	display: grid; place-items: center; align-content: center; flex: none; width: 54px; padding: 7px 0; border-radius: 11px;
	background: #eaf2fd; color: var(--hub-marinho);
}
.mg-hubev__data strong { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mg-hubev__data span { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--hub-texto-2); }
.mg-hubev__corpo { min-width: 0; }
.mg-hubev__titulo { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.mg-hub .mg-hubev__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hubev:hover .mg-hubev__titulo a { color: var(--hub-azul); }
.mg-hubev__desc { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--hub-texto-2); }
.mg-hubev__local { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--hub-texto-2); }

/* Planejamento */
.mg-hub-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) and (max-width: 1279.98px) { .mg-hub-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Três colunas só a partir de 1330 px: abaixo disso a caixa fica com menos de 124 px
 * e "Onde comer" e "Como chegar" quebram em duas linhas. Entre 1280 e 1330 valem as duas do topo. */
@media (min-width: 1330px) { .mg-hub-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-hub-plan__item {
	position: relative; display: flex; align-items: flex-start; gap: 8px; height: 100%; padding: 11px 10px;
	border: 1px solid var(--hub-borda); border-radius: 12px; background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mg-hub-plan__item:hover { transform: translateY(-2px); border-color: #c7e4d6; box-shadow: 0 10px 22px rgba(13, 43, 92, .09); }
.mg-hub-plan__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #e5f6ee; color: var(--hub-verde-f); font-size: 16px; }
.mg-hub-plan__item > div { min-width: 0; }
.mg-hub-plan__titulo { font-size: 13px; font-weight: 800; line-height: 1.25; }
.mg-hub .mg-hub-plan__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-hub-plan__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-hub-plan__item:hover .mg-hub-plan__titulo a { color: var(--hub-azul); }
.mg-hub-plan__texto { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--hub-texto-2); }
/* Em três colunas a caixa tem ~124 px: o ícone e a fonte encolhem para "Onde comer"
 * e "Como chegar" caberem em uma linha, como no mockup. Vem depois das regras acima de propósito. */
@media (min-width: 1330px) {
	.mg-hub-plan__item { gap: 5px; padding: 10px 7px; }
	.mg-hub-plan__ico { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
	.mg-hub-plan__titulo { font-size: 12px; }
	.mg-hub-plan__texto { font-size: 10.5px; }
}

/* ================================================================== *
 * 7. CENTRO DE ATENDIMENTO AO TURISTA                                 *
 * ================================================================== */
.mg-hub-secao--cat { padding-top: 6px; }
.mg-hub-cat { display: grid; gap: 18px; padding: 20px 22px; border: 1px solid #cfe9dc; border-radius: 18px; background: #e9f5ef; }
.mg-hub-cat__cab { display: flex; align-items: flex-start; gap: 15px; }
.mg-hub-cat__ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 99px; background: #fff; color: var(--hub-verde-f); font-size: 26px; }
.mg-hub-cat__selo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hub-verde-f); }
.mg-hub-cat__cab h2 { margin-top: 4px; font-size: clamp(18px, 1.9vw, 23px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hub-marinho); }
.mg-hub-cat__cab p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub-cat__fone { display: flex; align-items: center; gap: 12px; }
.mg-hub-cat__fone svg { font-size: 22px; color: var(--hub-verde-f); }
.mg-hub .mg-hub-cat__numero { display: block; font-size: clamp(19px, 1.9vw, 23px); font-weight: 800; letter-spacing: -.02em; color: var(--hub-marinho); text-decoration: none; }
.mg-hub .mg-hub-cat__numero:hover { color: var(--hub-azul); }
.mg-hub-cat__hora { margin-top: 2px; font-size: 12.5px; color: var(--hub-texto-2); }
.mg-hub .mg-hub-cat__zap { min-height: 46px; border: 1.5px solid #bfe3d1; border-radius: 99px; background: #fff; color: var(--hub-verde-f); }
.mg-hub .mg-hub-cat__zap:hover { border-color: var(--hub-verde-f); background: #f2fbf7; color: #0f6f45; }
@media (min-width: 1024px) {
	.mg-hub-cat { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 30px; padding: 22px 28px; }
	.mg-hub-cat__fone { padding-left: 30px; border-left: 1px solid #cfe9dc; }
}

/* ================================================================== *
 * 8. FAIXA FINAL                                                      *
 * ================================================================== */
.mg-hub-cta { position: relative; display: flex; align-items: center; min-height: 270px; overflow: hidden; background: var(--hub-marinho); }
.mg-hub-cta__img { position: absolute; inset: 0; margin: 0; }
.mg-hub-cta__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.mg-hub-cta::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(98deg, rgba(6, 20, 40, .9) 0%, rgba(6, 20, 40, .68) 34%, rgba(6, 20, 40, .2) 60%, rgba(6, 20, 40, .42) 100%);
}
.mg-hub-cta__grade { position: relative; z-index: 1; display: grid; gap: 22px; width: 100%; padding-top: 38px; padding-bottom: 38px; }
.mg-hub-cta__texto h2 { max-width: 16ch; font-size: clamp(25px, 3.2vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.mg-hub-cta__texto p { max-width: 40ch; margin-top: 12px; font-size: clamp(14.5px, 1.5vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, .92); }
.mg-hub-cta__btn { justify-self: start; }
@media (min-width: 900px) {
	.mg-hub-cta__grade { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; }
	.mg-hub-cta__btn { justify-self: end; }
}

/* ================================================================== *
 * blocos genéricos de outras páginas mãe                              *
 * ================================================================== */

/* ---------- destaques (posts) ---------- */
.mg-hub-dest { display: grid; gap: 16px; }
.mg-hub-dest__lado { display: grid; gap: 16px; }
@media (min-width: 640px) { .mg-hub-dest__lado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.mg-hub-dest { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
	.mg-hub-dest--sem-principal { grid-template-columns: 1fr; }
}
.mg-hub-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.mg-hubp {
	position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
	border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .2s, box-shadow .2s;
}
.mg-hubp:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 43, 92, .1); }
.mg-hubp__foto { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #e8eef6; }
.mg-hubp__img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hubp__img--vazia { display: block; }
.mg-hubp:hover .mg-hubp__img { transform: scale(1.04); }
.mg-hubp__selo {
	position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 6px; background: var(--hub-marinho);
	color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.mg-hubp__corpo { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 16px 16px; }
.mg-hubp__titulo { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.mg-hub .mg-hubp__link { color: var(--hub-marinho); text-decoration: none; }
.mg-hubp__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-hub .mg-hubp:hover .mg-hubp__link, .mg-hub .mg-hube:hover .mg-hubp__link { color: var(--hub-azul); }
.mg-hubp__resumo { font-size: 15px; line-height: 1.55; color: var(--hub-texto-2); }
.mg-hubp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--hub-texto-2); }
.mg-hubp__meta svg { font-size: 14px; }
.mg-hubp__meta time { margin-right: 8px; }
.mg-hubp__ir {
	position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 10px; background: var(--hub-azul); color: #fff; font-size: 19px;
}
.mg-hubp--grande .mg-hubp__foto { aspect-ratio: 16 / 10; }
.mg-hubp--grande .mg-hubp__corpo { flex: none; gap: 12px; padding: 22px; }
.mg-hubp--grande .mg-hubp__titulo { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }
.mg-hubp--grande .mg-hubp__meta { padding-right: 56px; font-size: 13px; }
@media (min-width: 1024px) { .mg-hubp--grande .mg-hubp__foto { aspect-ratio: auto; flex: 1; min-height: 300px; } }

/* ---------- eventos em cartão (variante cards) ---------- */
.mg-hub-eventos { display: grid; gap: 14px; }
@media (min-width: 640px) { .mg-hub-eventos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-hube {
	position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hub-borda); border-radius: var(--hub-raio);
	background: #fff; box-shadow: var(--hub-sombra); transition: transform .2s, box-shadow .2s;
}
.mg-hube:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 43, 92, .1); }
.mg-hube__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef6; }
.mg-hube__img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hube__img--vazia { display: block; }
.mg-hube:hover .mg-hube__img { transform: scale(1.04); }
.mg-hube__corpo { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.mg-hube__titulo { font-size: 15px; font-weight: 800; line-height: 1.3; }
.mg-hube__info { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--hub-texto-2); }
.mg-hube__info svg { margin-top: 1px; font-size: 14px; color: var(--hub-verde); }

/* ---------- clima ---------- */
.mg-hub-lateral { display: flex; gap: 16px; padding: 20px; border: 1px solid transparent; border-radius: var(--hub-raio); }
.mg-hub-lateral--clima { background: #eaf2fd; border-color: #d6e6fb; }
.mg-hub-lateral__ico { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 99px; background: #fff; font-size: 28px; }
.mg-hub-lateral--clima .mg-hub-lateral__ico { color: #f2a100; }
.mg-hub .mg-hub-lateral__titulo { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--hub-marinho); }
.mg-hub .mg-hub-lateral__texto { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub-clima__agora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; color: var(--hub-marinho); }
.mg-hub-clima__agora strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.mg-hub-clima__agora span { font-size: 14px; color: var(--hub-texto-2); }

/* ---------- galeria ---------- */
.mg-hub-galeria {
	display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; padding-bottom: 6px;
	scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.mg-hub-galeria li { scroll-snap-align: start; overflow: hidden; border-radius: var(--hub-raio); aspect-ratio: 4 / 3; background: #e8eef6; }
.mg-hub-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.mg-hub-galeria li:hover img { transform: scale(1.04); }
@media (min-width: 640px) { .mg-hub-galeria { grid-auto-columns: 40%; } }
@media (min-width: 1024px) { .mg-hub-galeria { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: 14px; } }

/* ---------- perguntas ---------- */
.mg-hub-faq { display: grid; gap: 10px; }
.mg-hub-faq details { border: 1px solid var(--hub-borda); border-radius: 12px; background: #fff; box-shadow: var(--hub-sombra); }
.mg-hub-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px;
	cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--hub-marinho);
}
.mg-hub-faq summary::-webkit-details-marker { display: none; }
.mg-hub-faq summary::after {
	content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--hub-texto-2); border-bottom: 2px solid var(--hub-texto-2);
	transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.mg-hub-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mg-hub-faq details p { padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: var(--hub-texto); }
.mg-hub .mg-hub-faq details p a { color: var(--hub-azul); text-underline-offset: 3px; }

/* ================================================================== *
 * 10. CACHOEIRAS (/turismo/cachoeiras/)                               *
 * ================================================================== *
 * A página reaproveita o herói, os cartões de atrativo, a grade do blog, os botões e a faixa
 * final do hub. Aqui ficam só as peças que o mockup das cachoeiras traz de novo: a migalha
 * sobre a foto, a dupla texto + dica, os cartões miúdos e a grade de três.
 */
.mg-hub-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hub-azul); }
.mg-hub-cab__eyebrow { flex-basis: 100%; margin-bottom: -8px; }

/* Migalha branca em cima da foto do herói (o tema não imprime migalha em página). */
.mg-cach-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.mg-hub .mg-cach-migalha a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.mg-hub .mg-cach-migalha a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mg-cach-migalha [aria-current] { color: #fff; font-weight: 700; }
/* O herói das cachoeiras não leva a assinatura "Viva Morro do Chapéu" (pedido do dono, 21/09):
 * ela caía em cima do paredão e disputava a leitura com o título. Sem ela sobra respiro, e o
 * subtítulo e os três destaques deixam de ficar colados. */
.mg-cach-hero .mg-hub-hero__sub { max-width: 40ch; margin-top: 16px; }
.mg-cach-hero .mg-hub-hero__destaques { margin-top: 30px; }
@media (min-width: 640px) {
	.mg-cach-hero .mg-hub-hero__destaques { margin-top: 38px; gap: 24px; }
	.mg-cach-hero .mg-hub-hero__grade { padding-bottom: 44px; }
}
/* A migalha desta página é a branca por cima da foto; a do tema ficaria repetida logo acima. */
body:has(.mg-cach-migalha) .gcep-migalha { display: none; }

/* Descubra (texto) + Dica do Morro Guia (cartão) */
.mg-cach-intro { display: grid; gap: 18px; }
@media (min-width: 900px) { .mg-cach-intro { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; align-items: start; } }
.mg-cach-intro__texto h2 {
	margin-top: 10px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; line-height: 1.15;
	letter-spacing: -.025em; color: var(--hub-marinho);
}
.mg-cach-intro__texto p { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--hub-texto); max-width: 62ch; }

.mg-cach-dica { display: flex; gap: 14px; padding: 22px; border: 1px solid #cfe8dc; border-radius: var(--hub-raio); background: #eef8f3; }
.mg-cach-dica__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 99px; background: var(--hub-verde-f); color: #fff; font-size: 21px; }
.mg-hub .mg-cach-dica__titulo { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--hub-marinho); }
.mg-cach-dica__forte { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--hub-verde-f); }
.mg-cach-dica__texto { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--hub-texto-2); }

/* Três cartões de cachoeira: o hub desenha cinco atrativos, aqui são três e mais largos. */
@media (min-width: 820px) { .mg-hub-atrs--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1180px) { .mg-hub-atrs--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-hub-atrs--tres .mg-hub-atr__foto { aspect-ratio: 16 / 9; }

/* Outras cachoeiras: faixa clara e cartões miúdos deitados. */
.mg-cach-secao--outras { background: #eef6f2; }
.mg-cach-minis { display: grid; gap: 12px; }
@media (min-width: 560px) { .mg-cach-minis { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.mg-cach-mini {
	position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 14px 10px 10px;
	border: 1px solid #dceae3; border-radius: 14px; background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s;
}
.mg-cach-mini:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(13, 43, 92, .1); }
.mg-cach-mini__foto { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 11px; background: #dde7f3; }
.mg-cach-mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-cach-mini__foto--cor { display: grid; place-items: center; background: linear-gradient(140deg, #2a4f86 0%, #0d2b5c 100%); color: #fff; }
.mg-cach-mini__foto--cor > svg { width: 28px; height: 28px; opacity: .5; stroke-width: 1.5; }
.mg-cach-mini__corpo { min-width: 0; flex: 1; }
.mg-cach-mini__titulo { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.mg-hub .mg-cach-mini__titulo a { color: var(--hub-marinho); text-decoration: none; }
.mg-cach-mini__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-cach-mini:hover .mg-cach-mini__titulo a { color: var(--hub-azul); }
.mg-cach-mini__dado { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--hub-texto-2); }
.mg-cach-mini__dado svg { font-size: 14px; color: var(--hub-verde-f); }
.mg-cach-mini__seta { flex: none; font-size: 16px; color: #8698b4; }
.mg-cach-minis__nota { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub .mg-cach-minis__nota a { color: var(--hub-azul); text-underline-offset: 3px; }

/*
 * Perguntas frequentes: a MESMA sanfona da home (um cartão por pergunta, seta que gira), porque
 * é assim que o dono quer em toda página. Os <details> são irmãos do H2 de propósito: é assim
 * que GCEP_FAQ::do_texto acha as perguntas e monta o FAQPage.
 */
.mg-cach-faq h2 { font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--hub-marinho); }
.mg-cach-faq__sub { margin-top: 8px; margin-bottom: 20px; font-size: 15px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-hub-faq__item {
	margin-top: 11px; border: 1px solid var(--hub-borda); border-radius: 12px; background: #fff;
	box-shadow: 0 1px 3px rgba(13, 43, 92, .05); transition: border-color .15s ease;
}
.mg-hub-faq__item:hover { border-color: #b9cfee; }
.mg-hub-faq__pergunta {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 20px;
	border-radius: 12px; cursor: pointer; list-style: none;
	font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--hub-marinho);
}
.mg-hub-faq__pergunta::-webkit-details-marker { display: none; }
.mg-hub-faq__pergunta:hover { color: var(--hub-azul); }
.mg-hub-faq__pergunta:active { background: #e4eefc; }
.mg-hub-faq__pergunta:focus-visible { outline: 2px solid var(--hub-azul); outline-offset: -2px; }
/* A seta é feita de borda, como a da home: sem ícone novo e sem peso de fonte. */
.mg-hub-faq__pergunta::after {
	content: ""; flex: none; width: 9px; height: 9px; margin-top: 5px;
	border-right: 2px solid var(--hub-texto-2); border-bottom: 2px solid var(--hub-texto-2);
	transform: rotate(45deg); transition: transform .2s ease;
}
.mg-hub-faq__item[open] .mg-hub-faq__pergunta::after { margin-top: 9px; transform: rotate(-135deg); }
.mg-hub-faq__resposta { padding: 0 20px 18px; }
.mg-hub-faq__resposta p { max-width: 78ch; font-size: 15.5px; line-height: 1.65; color: var(--hub-texto); }
.mg-hub .mg-hub-faq__resposta a { color: var(--hub-azul); text-underline-offset: 3px; }

/* Guias e dicas: a grade do blog travada em três colunas, como no mockup. */
@media (min-width: 900px) { .mg-hub-grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (prefers-reduced-motion: reduce) {
	.mg-hub *, .mg-hub *::after { transition: none !important; }
	.mg-hub-exp:hover, .mg-hub-atr:hover, .mg-hub-rot:hover, .mg-hub-opcao:hover, .mg-hub-plan__item:hover, .mg-hubp:hover, .mg-hube:hover,
	.mg-cach-mini:hover { transform: none; }
	.mg-hub-exp:hover .mg-hub-exp__foto img, .mg-hub-atr:hover .mg-hub-atr__foto img, .mg-hub-rot:hover .mg-hub-rot__foto img,
	.mg-hubp:hover .mg-hubp__img, .mg-hube:hover .mg-hube__img, .mg-hub-galeria li:hover img { transform: none; }
}

/* O tema dá height:auto às imagens do conteúdo da página; aqui a foto preenche o quadro. */
.mg-hub .mg-hub-hero__foto img, .mg-hub .mg-hub-exp__foto img, .mg-hub .mg-hub-atr__foto img, .mg-hub .mg-hub-rot__foto img,
.mg-hub .mg-hub-combina__img img, .mg-hub .mg-hub-cta__img img, .mg-hub .mg-hubp__img, .mg-hub .mg-hube__img, .mg-hub .mg-hub-galeria img {
	width: 100%; height: 100%; max-width: none; object-fit: cover;
}