/**
 * Página individual do atrativo turístico (/turismo/<categoria>/<slug>/).
 *
 * Desenho do mockup "Pagina cachoeira do ferro doido.png" (dono, 21/09/2026). Só mora aqui o que é
 * desta página: o selo da categoria, os quatro indicadores do topo, a barra de seções, a dupla
 * conteúdo + lateral, o mosaico da galeria e os cartões da lateral. Herói, botões, cartões de post,
 * cabeçalhos e faixa final são os do hub (mg-hub.css), que esta página também carrega.
 *
 * @author Valoar
 * @since  2.5.453 - 2026-09-21
 */

/*
 * Ícone CHEIO. O mg-hub.css manda todo svg do hub ser traço (fill:none, stroke:currentColor),
 * e num tamanho de 18 a 22 px o traço fino vira um risco cinza — foi o que o dono viu como
 * "estranho" ao lado do mockup. A classe mg-ico inverte: silhueta cheia na cor do texto.
 */
.mg-hub svg.mg-ico { fill: currentColor; stroke: none; }

/* A migalha desta página é a branca por cima da foto; a do tema ficaria repetida logo acima. */
body:has(.mg-atr-hero) .gcep-migalha { display: none; }

/* ============================== HERÓI ============================== */
.mg-atr-hero { min-height: 460px; }
@media (min-width: 640px) { .mg-atr-hero { min-height: 520px; } }

.mg-hub .mg-atr-selo {
	display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 99px;
	background: var(--hub-verde-f); color: #fff;
	font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.mg-atr-hero .mg-hub-hero__h1 { max-width: 16ch; margin-top: 12px; }
.mg-atr-hero .mg-hub-hero__sub { max-width: 46ch; margin-top: 16px; }

/* Sem respiro o subtítulo encosta nos indicadores — o dono apontou isso na página das cachoeiras. */
.mg-hub .mg-atr-indicadores { display: grid; gap: 14px; margin-top: 30px; }
.mg-atr-indicadores li { display: flex; align-items: center; gap: 13px; }
.mg-atr-indicadores .mg-hub-disco { width: 46px; height: 46px; font-size: 22px; }
.mg-atr-indicadores__texto { min-width: 0; }
.mg-atr-indicadores strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: #fff; }
.mg-atr-indicadores__texto span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .86); }

/* ========================= BARRA DE SEÇÕES ========================= */
/*
 * No celular a barra rola de lado em vez de quebrar em duas linhas (é o que o mockup pede e o que
 * o prompt do dono manda: "não quebrar os itens").
 */
.mg-atr-abas { position: relative; z-index: 2; border-bottom: 1px solid var(--hub-borda); background: #fff; }
.mg-atr-abas__grade { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mg-atr-abas ul {
	display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mg-atr-abas ul::-webkit-scrollbar { display: none; }
.mg-hub .mg-atr-abas a {
	display: inline-flex; align-items: center; gap: 8px; padding: 16px 14px; white-space: nowrap;
	border-bottom: 2px solid transparent; color: var(--hub-texto-2); font-size: 14.5px; font-weight: 600; text-decoration: none;
	transition: color .15s, border-color .15s;
}
.mg-hub .mg-atr-abas a:hover { color: var(--hub-azul); border-bottom-color: #b9cfee; }
.mg-atr-abas a svg { font-size: 16px; }

/* ===================== CONTEÚDO + LATERAL ===================== */
.mg-atr-corpo { padding-top: 30px; }
.mg-atr-grade { display: grid; gap: 30px; }
@media (min-width: 1024px) { .mg-atr-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; } }

.mg-atr-principal > section + section { margin-top: 46px; }
.mg-atr-principal h2 {
	display: flex; align-items: center; gap: 12px;
	font-size: clamp(21px, 2.2vw, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--hub-marinho);
}
.mg-atr-bloco__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #e8f1fd; color: var(--hub-azul); font-size: 21px; }
.mg-atr-bloco > p, .mg-atr-texto p { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--hub-texto); max-width: 68ch; }
.mg-hub .mg-atr-texto a { color: var(--hub-azul); text-underline-offset: 3px; }

/* ----------------------------- galeria ----------------------------- */
.mg-atr-galeria { display: grid; gap: 12px; }
@media (min-width: 700px) { .mg-atr-galeria { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.mg-atr-galeria__capa { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #dde7f3; aspect-ratio: 4 / 3; }
.mg-atr-galeria__capa img { width: 100%; height: 100%; object-fit: cover; }
.mg-atr-galeria__capa figcaption {
	position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 15px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(13, 43, 92, .18);
	color: var(--hub-marinho); font-size: 13.5px; font-weight: 700;
}
.mg-atr-galeria__resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-atr-galeria__resto li { position: relative; overflow: hidden; border-radius: 12px; background: #dde7f3; aspect-ratio: 4 / 3; }
.mg-atr-galeria__resto img { width: 100%; height: 100%; object-fit: cover; }
.mg-atr-galeria__mais {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(6, 20, 40, .58); color: #fff; font-size: 22px; font-weight: 800;
}

/* ------------------- o que torna especial ------------------- */
.mg-atr-especial ul { display: grid; gap: 26px; margin-top: 24px; }
@media (min-width: 700px) { .mg-atr-especial ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* No mockup o ícone é um glifo colorido solto, sem caixa. */
.mg-atr-especial__ico { display: block; color: var(--hub-verde-f); font-size: 24px; line-height: 1; }
.mg-atr-especial li:nth-child(2) .mg-atr-especial__ico { color: var(--hub-azul); }
.mg-atr-especial h3 { margin-top: 12px; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--hub-marinho); }
.mg-atr-especial p { margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--hub-texto-2); max-width: 34ch; }

/* ------------------- listas de levar e dicas ------------------- */
.mg-hub .mg-atr-lista { display: grid; gap: 12px; margin-top: 20px; }
.mg-atr-lista li {
	position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.6; color: var(--hub-texto);
}
/* O visto é desenhado na borda: sem ícone novo e sem emoji. */
.mg-atr-lista li::before {
	content: ""; position: absolute; left: 4px; top: 5px; width: 13px; height: 7px;
	border-left: 2.5px solid var(--hub-verde-f); border-bottom: 2.5px solid var(--hub-verde-f);
	transform: rotate(-45deg);
}
.mg-atr-btn--claro { min-height: 46px; margin-top: 18px; border: 1px solid #cfe0f6; background: #eaf2fd; color: var(--hub-azul); }
.mg-atr-btn--claro:hover { background: #dbe9fc; }

/* =========================== A LATERAL =========================== */
.mg-atr-lado { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1024px) { .mg-atr-lado { position: sticky; top: 92px; } }
.mg-atr-card { padding: 22px; border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra); }
.mg-hub .mg-atr-card__titulo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--hub-marinho); }
.mg-atr-card__titulo span { flex: none; color: var(--hub-verde-f); font-size: 20px; line-height: 1; }

.mg-hub .mg-atr-info { display: grid; gap: 20px; margin-top: 20px; }
.mg-atr-info li { display: flex; align-items: flex-start; gap: 13px; }
/* Sem caixa: no mockup é o glifo verde direto, e o texto começa na mesma linha do rótulo. */
.mg-atr-info__ico { flex: none; margin-top: 1px; color: var(--hub-verde-f); font-size: 21px; line-height: 1; }
.mg-atr-info strong { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; color: var(--hub-marinho); }
.mg-atr-info span span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--hub-texto-2); }

.mg-atr-card--mapa { padding: 14px; }
.mg-atr-mapa { display: block; width: 100%; height: 190px; border: 0; border-radius: 12px; background: #e8eef6; }
.mg-hub .mg-atr-mapa__nome { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--hub-marinho); }
.mg-atr-mapa__nome svg { flex: none; font-size: 16px; color: var(--hub-verde-f); }
.mg-atr-card--mapa .mg-atr-btn--claro { width: 100%; margin-top: 12px; }

.mg-atr-card--preserve { border-color: #cfe8dc; background: #eef8f3; }
.mg-atr-card--preserve p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--hub-texto-2); }

.mg-atr-card--clima { border-color: #d6e6fb; background: #eaf2fd; }
.mg-atr-clima { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.mg-atr-clima__sol { flex: none; color: #f2a100; font-size: 38px; line-height: 1; }
.mg-atr-clima__agora { flex: 1; min-width: 0; }
.mg-atr-clima__agora strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--hub-marinho); }
.mg-atr-clima__agora span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--hub-texto-2); }
.mg-hub .mg-atr-clima__extremos { flex: none; display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid #cfe0f6; font-size: 13.5px; color: var(--hub-texto-2); }
.mg-hub .mg-atr-clima__vazio { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--hub-texto-2); }
/* O link abre o painel de previsão que o addon de clima já põe no rodapé de toda página. */
.mg-hub .mg-atr-clima__link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0;
	border: 0; background: none; cursor: pointer; color: var(--hub-azul); font-family: inherit; font-size: 14px; font-weight: 700;
}
.mg-hub .mg-atr-clima__link:hover { color: var(--hub-azul-h); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.mg-atr-abas a, .mg-atr-btn--claro { transition: none; }
}

/* ===================== O VISOR DA GALERIA ===================== *
 * Abre em tela cheia ao clicar em qualquer foto do mosaico. É do próprio guia (mg-atrativo.js),
 * sem biblioteca de terceiro. O <dialog> nativo ficou de fora porque o tema ainda precisa rodar em
 * navegador antigo do celular do anunciante.
 */
.mg-atr-galeria__abrir {
	display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
}
.mg-atr-galeria__abrir img { transition: transform .45s ease; }
.mg-atr-galeria__abrir:hover img { transform: scale(1.04); }
.mg-atr-galeria__abrir:focus-visible { outline: 3px solid #93c5fd; outline-offset: -3px; }
.mg-atr-galeria__rotulo {
	position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 15px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(13, 43, 92, .18);
	color: var(--hub-marinho); font-size: 13.5px; font-weight: 700;
}
.mg-atr-galeria__abrir:hover .mg-atr-galeria__rotulo { background: #fff; }

body.mg-atr-travado { overflow: hidden; }
.mg-atr-visor { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.mg-atr-visor[hidden] { display: none; }
.mg-atr-visor__fundo { position: absolute; inset: 0; background: rgba(6, 20, 40, .92); }
.mg-atr-visor__quadro { position: relative; margin: 0; max-width: min(1100px, 92vw); max-height: 82vh; }
.mg-atr-visor__quadro img { display: block; max-width: 100%; max-height: 74vh; border-radius: 10px; object-fit: contain; }
.mg-atr-visor__quadro figcaption { margin-top: 12px; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.45; text-align: center; }
.mg-atr-visor__btn {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
	transition: background-color .15s;
}
.mg-atr-visor__btn:hover { background: rgba(255, 255, 255, .26); }
.mg-atr-visor__btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.mg-atr-visor__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-atr-visor__btn--fechar { top: 18px; right: 18px; }
.mg-atr-visor__btn--ante { left: 14px; top: 50%; transform: translateY(-50%); }
.mg-atr-visor__btn--prox { right: 14px; top: 50%; transform: translateY(-50%); }
.mg-atr-visor__conta { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 13.5px; }
@media (max-width: 639.98px) {
	.mg-atr-visor__btn { width: 42px; height: 42px; }
	.mg-atr-visor__btn--ante { left: 8px; }
	.mg-atr-visor__btn--prox { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-atr-galeria__abrir img, .mg-atr-visor__btn { transition: none; }
	.mg-atr-galeria__abrir:hover img { transform: none; }
}

/* ============ ONDE CADA BLOCO FICA (pedido do dono, 21/09) ============ *
 * No celular a lateral não pode ficar no fim da página: quem abre a página de uma cachoeira quer
 * distância, nível e mapa LOGO depois do texto e das fotos. Por isso a ordem no HTML é
 * topo → lateral → resto, que é a ordem certa no celular, e no computador a grade recoloca a
 * lateral na coluna da direita, atravessando as duas linhas.
 */
@media (min-width: 1024px) {
	.mg-atr-grade {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas:
			"topo  lado"
			"resto lado";
		gap: 40px;
		align-items: start;
	}
	.mg-atr-topo { grid-area: topo; }
	.mg-atr-lado { grid-area: lado; }
	.mg-atr-resto { grid-area: resto; }
}

/* Dois indicadores por linha já no celular: quatro linhas empurravam o herói para baixo. */
.mg-hub .mg-atr-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 380px) { .mg-hub .mg-atr-indicadores { grid-template-columns: minmax(0, 1fr); } }

/*
 * Destaque no celular: o título vai AO LADO do ícone (o dono pediu), e o texto desce inteiro.
 * No computador volta a ser o empilhado do mockup.
 */
.mg-atr-especial li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: center; }
.mg-atr-especial li .mg-atr-especial__ico { grid-column: 1; }
.mg-hub .mg-atr-especial h3 { grid-column: 2; margin-top: 0; }
.mg-hub .mg-atr-especial p { grid-column: 1 / -1; margin-top: 8px; max-width: none; }
/* 21/09: o dono conferiu contra o mockup — o título fica ao lado do ícone TAMBÉM no computador. */
@media (min-width: 700px) {
	.mg-hub .mg-atr-especial p { margin-top: 9px; max-width: 34ch; }
}

/* Os quatro indicadores voltam a caber em uma linha no computador (vem depois da regra de duas
 * colunas de propósito: mesma especificidade, quem fala por último manda). */
@media (min-width: 900px) {
	.mg-hub .mg-atr-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 880px; gap: 18px; }
}