/*
 * Paginas de destino (pais) e indice de destinos.
 * Escopo: .xp-destino. Carregado depois de cards.css (sobrescreve o hero antigo).
 * Ritmo vertical em multiplos de 8px; container = 1280px (1536px acima de 1536px).
 */

.xp-destino {
	--xp-roxo: #812990;
	--xp-roxo-esc: #5e1a69;
	--xp-tinta: #1f1a24;
	--xp-texto: #3d3745;
	--xp-suave: #f7f3f8;
	--xp-linha: #e6dce9;
	--xp-raio: 4px;
	color: var(--xp-texto);
	overflow-x: clip;
}

.xp-wrap {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

@media (min-width: 1536px) {
	.xp-wrap { max-width: 1536px; }
}

/* ---------- secoes ---------- */
.xp-destino .xp-sec {
	padding: 64px 0;
	background: #fff;
}

.xp-destino .xp-sec.is-alt { background: var(--xp-suave); }

.xp-destino .xp-sec--stats { padding: 24px 0 0; }

@media (max-width: 767px) {
	.xp-destino .xp-sec { padding: 48px 0; }
	.xp-destino .xp-sec--stats { padding: 16px 0 0; }
}

.xp-destino .xp-title {
	margin: 0 0 32px;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
	color: var(--xp-roxo);
	text-align: left;
}

.xp-destino .xp-eyebrow {
	margin: 0 0 8px;
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--xp-roxo);
}

.xp-destino .xp-eyebrow--claro { color: rgba(255, 255, 255, .8); }

.xp-destino .xp-lead {
	margin: 0;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.5;
	color: var(--xp-tinta);
}

.xp-destino .xp-prose { font-size: 1.0625rem; line-height: 1.7; text-align: left; }
.xp-destino .xp-prose > *:first-child { margin-top: 0; }
.xp-destino .xp-prose > *:last-child { margin-bottom: 0; }
.xp-destino .xp-prose p { margin: 0 0 16px; }
.xp-destino .xp-prose h2,
.xp-destino .xp-prose h3 { margin: 24px 0 8px; font-size: 1.25rem; line-height: 1.3; color: var(--xp-roxo); }

/* modulos compartilhados: mantem o ritmo, sem margens extras duplicadas */
.xp-destino .xp-mod { padding: 16px 0; }
.xp-destino .xp-mod .my-10,
.xp-destino .xp-mod .my-5 { margin-top: 0; margin-bottom: 0; }

/* ---------- hero ---------- */
.xp-destino .xp-hero-destino {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	min-height: 560px;
	padding: 160px 0 56px;
	background-color: #2b0d33;
	background-size: cover;
	background-position: 50% 22%;
	overflow: hidden;
}

.xp-destino .xp-hero-destino--sem-foto {
	background-image: linear-gradient(135deg, #5e1a69 0%, #812990 55%, #b04bbd 100%);
}

.xp-destino .xp-hero-destino::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(24, 7, 30, .78) 0%, rgba(24, 7, 30, .44) 46%, rgba(24, 7, 30, 0) 78%),
		linear-gradient(0deg, rgba(24, 7, 30, .62) 0%, rgba(24, 7, 30, 0) 55%);
	pointer-events: none;
}

.xp-destino .xp-hero-destino > * { position: relative; }

.xp-destino .xp-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

.xp-destino .xp-hero__flag {
	width: 44px;
	height: 30px;
	object-fit: cover;
	border-radius: var(--xp-raio);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	margin-bottom: 16px;
}

.xp-destino .xp-hero-destino h1 {
	max-width: 720px !important;
	margin: 0 0 16px !important;
	font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -.01em;
	color: #fff !important;
	text-align: left;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.xp-destino .xp-hero__sub {
	max-width: 560px;
	margin: 0 0 24px;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.xp-destino .xp-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	margin-bottom: 24px;
	border-radius: var(--xp-raio);
	background: #fff;
	color: var(--xp-roxo);
	font-weight: 700;
	text-decoration: none;
}

.xp-destino .xp-hero__programs { max-width: 800px; margin-top: 8px; }

.xp-destino .xp-hero__label {
	margin: 0 0 8px !important;
	font-size: .75rem !important;
	line-height: 1 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78) !important;
}

.xp-destino .xp-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.xp-destino .xp-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--xp-raio);
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .34);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: .9375rem;
	line-height: 1.2;
}

.xp-destino .xp-hero__chip-img { width: 24px; height: 24px; object-fit: cover; border-radius: var(--xp-raio); }

/* chip com link: o <a> ocupa o chip inteiro (mesmo visual), com hover e foco visiveis */
.xp-destino .xp-hero__chip--link { padding: 0; transition: background .18s ease, border-color .18s ease; }
.xp-destino .xp-hero__chip-a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--xp-raio);
	color: inherit;
	text-decoration: none;
}
.xp-destino .xp-hero__chip--link:hover { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .6); }
.xp-destino .xp-hero__chip-a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .55); }

@media (max-width: 767px) {
	.xp-destino .xp-hero-destino { min-height: 520px; padding: 128px 0 40px; background-position: 60% 22%; }
}

/* ---------- breadcrumb ---------- */
.xp-destino .xp-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 16px;
	padding-bottom: 0;
	font-size: .8125rem;
	color: #5a5365;
}

.xp-destino .xp-crumb a { color: var(--xp-roxo); text-decoration: none; }
.xp-destino .xp-crumb a:hover { text-decoration: underline; }
.xp-destino .xp-crumb .xp-crumb__seta { width: .75rem; height: auto; display: inline-block; vertical-align: middle; } /* mesma seta dos demais breadcrumbs (modules/breadcrumb.php) */
.xp-destino .xp-crumb [aria-current] { color: #4B5563; }
/* breadcrumb padrao (modules/breadcrumb.php) alinhado ao texto do hero */
.xp-destino main > .container.my-3 { padding-inline: 24px; }
.xp-destino main > .container.my-3 p { color: #4B5563; }

/* ---------- dados rapidos ---------- */
.xp-destino .xp-stats {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xp-destino .xp-stats--1 { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
.xp-destino .xp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.xp-destino .xp-stat {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-areas: "ico lab" "ico val";
	column-gap: 16px;
	align-items: center;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--xp-linha);
	border-radius: var(--xp-raio);
	box-shadow: 0 8px 24px rgba(129, 41, 144, .07);
}

.xp-destino .xp-stat__icon { grid-area: ico; width: 40px; height: 40px; object-fit: contain; }
.xp-destino .xp-stat__label { grid-area: lab; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #5a5365; }
.xp-destino .xp-stat__valor { grid-area: val; font-size: 1.375rem; line-height: 1.25; color: var(--xp-tinta); overflow-wrap: anywhere; }

@media (max-width: 767px) {
	.xp-destino .xp-stats,
	.xp-destino .xp-stats--2 { grid-template-columns: minmax(0, 1fr); }
	.xp-destino .xp-stat { padding: 16px 24px; }
}

/* ---------- apresentacao ---------- */
/* Uma coluna: titulo, destaque e texto empilhados, na mesma largura legivel (sem coluna lateral vazia). */
.xp-destino .xp-intro {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* o limite de largura vai nos textos (e nao no contêiner), para o bloco ficar alinhado a esquerda como as outras secoes */
.xp-destino .xp-intro__lead,
.xp-destino .xp-intro__texto { max-width: 960px; }
.xp-destino .xp-intro .xp-title { margin-bottom: 20px; }
.xp-destino .xp-intro .xp-lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
.xp-destino .xp-intro__texto {
	padding-top: 28px;
	border-top: 1px solid var(--xp-linha);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* ---------- galeria em mosaico ---------- */
.xp-destino .xp-mosaico {
	display: grid;
	gap: 16px;
	grid-auto-flow: dense;
}

.xp-destino .xp-mosaico__item { margin: 0; overflow: hidden; border-radius: var(--xp-raio); background: #e9dfec; aspect-ratio: 4 / 3; }
.xp-destino .xp-mosaico__item.is-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.xp-destino .xp-mosaico__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.xp-destino .xp-mosaico__item:hover img { transform: scale(1.04); }

/* desktop: combinacoes que fecham a grade sem buracos */
.xp-destino .xp-mosaico--3 { grid-template-columns: repeat(3, 1fr); }
.xp-destino .xp-mosaico--4 { grid-template-columns: repeat(2, 1fr); }
.xp-destino .xp-mosaico--4 .is-grande { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.xp-destino .xp-mosaico--5 { grid-template-columns: repeat(4, 1fr); }
.xp-destino .xp-mosaico--6 { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 900px) {
	.xp-destino .xp-mosaico--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.xp-destino .xp-mosaico { gap: 8px; grid-template-columns: repeat(2, 1fr) !important; }
	.xp-destino .xp-mosaico--4 .is-grande { grid-column: auto; grid-row: auto; }
	.xp-destino .xp-mosaico--6 .xp-mosaico__item:last-child { grid-column: span 2; aspect-ratio: 8 / 3; }
}

.xp-destino .xp-credito { margin: 16px 0 0; font-size: .75rem; color: #5a5365; }

/* ---------- cidades ---------- */
.xp-destino .xp-cidades {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.xp-destino .xp-cidade {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--xp-linha);
	border-radius: var(--xp-raio);
}

.xp-destino .xp-cidade__foto { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #5e1a69, #812990 60%, #b04bbd); overflow: hidden; }
.xp-destino .xp-cidade__foto.is-vazia { aspect-ratio: auto; height: 8px; }
.xp-destino .xp-cidade__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-destino .xp-cidade__corpo { display: flex; flex-direction: column; gap: 8px; padding: 24px; flex: 1; }
.xp-destino .xp-cidade__corpo h3 { margin: 0; font-size: 1.375rem; line-height: 1.2; color: var(--xp-roxo); text-align: left; }
.xp-destino .xp-cidade__corpo p { margin: 0; font-size: .9375rem; line-height: 1.6; text-align: left; }

/* ---------- programas ---------- */
.xp-destino .xp-programas {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.xp-destino .xp-programa { display: flex; }

.xp-destino .xp-programa__in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 152px;
	padding: 24px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--xp-linha);
	border-radius: var(--xp-raio);
	color: var(--xp-tinta);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.xp-destino a.xp-programa__in:hover { border-color: var(--xp-roxo); box-shadow: 0 10px 28px rgba(129, 41, 144, .14); transform: translateY(-2px); }
.xp-destino .xp-programa__icon { width: 48px; height: 48px; object-fit: cover; border-radius: var(--xp-raio); }
.xp-destino .xp-programa__nome { font-size: 1.1875rem; line-height: 1.25; }
.xp-destino .xp-programa__cta { margin-top: auto; font-size: .9375rem; color: var(--xp-roxo); }

/* ---------- indice ---------- */
.xp-destino .xp-indice-hero {
	padding: 168px 0 64px;
	background: linear-gradient(135deg, #4a1454 0%, #812990 58%, #a542b3 100%);
	color: #fff;
}

.xp-destino .xp-indice-hero h1 {
	margin: 0 0 24px;
	max-width: 880px;
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 1.05;
	color: #fff;
	text-align: left;
}

.xp-destino .xp-indice-hero__texto { max-width: 760px; color: rgba(255, 255, 255, .92); }
.xp-destino .xp-indice-hero__texto h2 { color: #fff !important; }

@media (max-width: 767px) {
	.xp-destino .xp-indice-hero { padding: 136px 0 48px; }
}

.xp-destino .xp-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

.xp-destino .xp-filtro__item {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--xp-roxo);
	border-radius: var(--xp-raio);
	color: var(--xp-roxo);
	font-size: .9375rem;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.xp-destino .xp-filtro__item:hover,
.xp-destino .xp-filtro__item.is-ativo { background: var(--xp-roxo); color: #fff; }

.xp-destino .xp-paises {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) { .xp-destino .xp-paises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px) { .xp-destino .xp-paises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 479px) { .xp-destino .xp-paises { grid-template-columns: minmax(0, 1fr); } }

.xp-destino .xp-pais { display: flex; }

.xp-destino .xp-pais__link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--xp-linha);
	border-radius: var(--xp-raio);
	color: var(--xp-tinta);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.xp-destino .xp-pais__link:hover { box-shadow: 0 14px 32px rgba(129, 41, 144, .18); transform: translateY(-3px); }
.xp-destino .xp-pais__foto { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #5e1a69, #812990 60%, #b04bbd); overflow: hidden; }
.xp-destino .xp-pais__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.xp-destino .xp-pais__link:hover .xp-pais__foto img { transform: scale(1.05); }
.xp-destino .xp-pais__corpo { display: flex; flex-direction: column; gap: 4px; padding: 16px 56px 24px 24px; flex: 1; }
.xp-destino .xp-pais__nome { font-size: 1.375rem; line-height: 1.2; color: var(--xp-roxo); }
.xp-destino .xp-pais__chamada { font-size: .875rem; line-height: 1.5; }

.xp-destino .xp-pais__seta {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--xp-raio);
	background: var(--xp-roxo);
	color: #fff;
	transition: transform .2s ease;
}

.xp-destino .xp-pais__link:hover .xp-pais__seta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.xp-destino * { transition: none !important; }
}

/* ---------- comparativo de programas ---------- */
.xp-destino .xp-compara-intro { padding-top: 8px; padding-bottom: 8px; }
.xp-destino .xp-compara-intro p { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.6; }
.xp-destino .xp-compara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.xp-destino .xp-compara__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--xp-linha); border-radius: var(--xp-raio); overflow: hidden; }
.xp-destino .xp-compara__foto { aspect-ratio: 16 / 9; background: #e9dfec; overflow: hidden; }
.xp-destino .xp-compara__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.xp-destino .xp-compara__corpo { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.xp-destino .xp-compara__corpo h2 { margin: 0; font-size: 1.375rem; line-height: 1.2; color: var(--xp-roxo); text-align: left; }
.xp-destino .xp-compara__desc { margin: 0; font-size: .9375rem; line-height: 1.6; text-align: left; }
.xp-destino .xp-compara__fatos { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: 16px; border-top: 1px solid var(--xp-linha); }
.xp-destino .xp-compara__fatos > div { min-width: 0; }
.xp-destino .xp-compara__fatos dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--xp-roxo); }
.xp-destino .xp-compara__fatos dd { margin: 2px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--xp-tinta); overflow-wrap: anywhere; }
.xp-destino .xp-compara__cta { margin-top: auto; align-self: flex-start; display: inline-block; padding: 12px 20px; border-radius: var(--xp-raio); background: var(--xp-roxo); color: #fff; text-decoration: none; font-size: .9375rem; }
.xp-destino .xp-compara__cta:hover { background: var(--xp-roxo-esc); }
@media (max-width: 575.98px) { .xp-destino .xp-compara__fatos { grid-template-columns: 1fr; } .xp-destino .xp-compara__corpo { padding: 20px; } }

/* ---------- creditos das fotos das cidades ---------- */
.xp-destino .xp-creditos { margin-top: 20px; font-size: .8125rem; color: var(--xp-texto); }
.xp-destino .xp-creditos summary { cursor: pointer; color: var(--xp-roxo); }
.xp-destino .xp-creditos ul { margin: 8px 0 0; padding-left: 1.1rem; list-style: disc; columns: 2 280px; }
.xp-destino .xp-creditos li { margin: 0 0 4px; break-inside: avoid; }
.xp-destino .xp-creditos a { color: var(--xp-roxo); text-decoration: underline; }
