/**

 * Blocos de texto corrido (h2 + paragrafo longo) das paginas de produto.

 * Carregado depois do typography.css (que usa !important em h2/p, por isso este arquivo tambem usa).

 *

 * Seletor: section.xp-block. A classe e posta por js/content-blocks.js apenas em

 *   section > .container.text-center > h2 + p  (modulo "chamada") com paragrafo >= 180 caracteres.

 * Paragrafo curto (subtitulo de "Fale conosco", comparativo...) nao recebe a classe e continua centralizado.

 *

 * Parti pris editorial: duas colunas (marcador + titulo a esquerda, texto a direita), regua fina,

 * numero grande, traco de acento roxo sob o titulo, fundo alternado quase imperceptivel.

 * Largura = .container do Tailwind (1280px / 1536px); texto alinhado a esquerda, ~64 caracteres por linha.

 */



main section.xp-block {

	--xp-purple: #812990;

	--xp-ink: #2a2230;

	--xp-rule: #e4d6e8;

	--xp-tint: #faf6fb;

	padding-block: clamp(2.5rem, 5vw, 4.5rem);

	background-color: #fff;

}



/* fundo alternado (so quando o editor deixou o fundo branco; ver JS) */

main section.xp-block[data-xp-alt] {

	background-color: var(--xp-tint) !important;

}



/* regua fina no topo, na largura do conteudo (so nos numerados) */

main section.xp-block[data-xp="num"] {

	background-image: linear-gradient(var(--xp-rule), var(--xp-rule));

	background-repeat: no-repeat;

	background-position: center top;

	background-size: min(calc(100% - 2rem), 1248px) 1px;

}



/* o container passa a ser uma grade; no mobile, uma coluna */

main section.xp-block > .container {

	display: grid;

	grid-template-columns: minmax(0, 1fr);

	row-gap: 1rem;

	margin-block: 0;

	padding-inline: 1rem;

	text-align: left;

}



/* numero grande (01, 02...) lido de data-xp-n do container - decorativo, sem texto alternativo */

main section.xp-block[data-xp="num"] > .container::before {

	content: attr(data-xp-n);

	content: attr(data-xp-n) / "";

	display: block;

	font-family: var(--font-bold);

	font-size: clamp(2.75rem, 6vw, 5rem);

	line-height: 1;

	letter-spacing: -0.03em;

	color: var(--xp-purple);

}

main section.xp-block > .container > h2 {

	margin: 0;

	padding: 0;

	text-align: left;

	color: var(--xp-purple) !important;

	font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.125rem) !important;

	line-height: 1.2 !important;

	text-wrap: balance;

}



/* traco de acento curto sob o titulo */

main section.xp-block > .container > h2::after {

	content: "";

	display: block;

	width: 3rem;

	height: 3px;

	margin-top: 1rem;

	border-radius: 4px;

	background: var(--xp-purple);

}



main section.xp-block > .container > p {

	margin: 0;

	padding: 0;

	max-width: 64ch;

	text-align: left;

	color: var(--xp-ink);

	font-size: 1.125rem !important;

	line-height: 1.75 !important;

	text-wrap: pretty;

}



/* intro: titulo maior e texto em corpo de destaque */

main section.xp-block[data-xp="intro"] > .container > h2 {

	font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem) !important;

	line-height: 1.15 !important;

}

main section.xp-block[data-xp="intro"] > .container > p {

	font-size: 1.25rem !important;

	line-height: 1.7 !important;

	max-width: 60ch;

}



@media (min-width: 1024px) {

	main section.xp-block > .container {

		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);

		column-gap: clamp(3rem, 6vw, 6rem);

		row-gap: 1.25rem;

		align-items: start;

		grid-template-rows: auto 1fr;

	}



	/* esquerda: numero e titulo; direita: texto ocupando as linhas */

	main section.xp-block[data-xp="num"] > .container::before { grid-column: 1; grid-row: 1; }

	main section.xp-block[data-xp="num"] > .container > h2 { grid-column: 1; grid-row: 2; }

	main section.xp-block[data-xp="intro"] > .container > h2 { grid-column: 1; grid-row: 1 / span 2; }

	main section.xp-block > .container > p {

		grid-column: 2;

		grid-row: 1 / span 2;

		padding-top: 0.5rem;

	}

	main section.xp-block[data-xp="num"] > .container > p { padding-top: 1.1rem; }

}



/* entrada discreta ao rolar; o estado oculto so existe com JS e sem prefers-reduced-motion */

@media (prefers-reduced-motion: no-preference) {

	main section.xp-reveal {

		opacity: 0;

		transform: translateY(14px);

		transition: opacity 0.5s ease, transform 0.5s ease;

	}

	main section.xp-reveal.is-in {

		opacity: 1;

		transform: none;

	}

}


/* Cards informativos lado a lado (ex.: High School "País, região e escola"): mesma altura.
   O contêiner centralizava na vertical e cada card ficava com a altura do próprio texto. */
.flex:has(> .lg\:max-w-\[280px\].shadow-md) {
	align-items: stretch !important;
}

.flex > .lg\:max-w-\[280px\].shadow-md {
	justify-content: flex-start;
}

/* ---------- politica de privacidade (conteudo da pagina) ---------- */
.xp-politica { max-width: 880px; margin: 0 auto; padding: 32px 20px 64px; font-size: 1rem; line-height: 1.7; color: #1f1f2b; }
.xp-politica h2 { margin: 40px 0 12px; font-size: 1.5rem; line-height: 1.25; color: #812990; }
.xp-politica h2:first-child { margin-top: 0; }
.xp-politica h3 { margin: 24px 0 8px; font-size: 1.125rem; line-height: 1.3; color: #3b2a45; }
.xp-politica h4 { margin: 16px 0 6px; font-size: 1rem; font-weight: 700; color: #3b2a45; }
.xp-politica p { margin: 0 0 12px; }
.xp-politica ul, .xp-politica ol { margin: 0 0 14px 1.25rem; padding: 0; }
.xp-politica ul { list-style: disc; }
.xp-politica ol { list-style: none; margin-left: 0; }
.xp-politica li { margin: 0 0 6px; }
.xp-politica li > div { display: inline; }
.xp-politica a { color: #812990; text-decoration: underline; }
.xp-politica section { scroll-margin-top: 110px; }
.xp-politica table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .9375rem; display: block; overflow-x: auto; }
.xp-politica th, .xp-politica td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; }
.xp-politica th { background: #f4eaf6; }
@media (max-width: 767.98px) { .xp-politica { padding: 24px 16px 48px; } .xp-politica h2 { font-size: 1.25rem; } }

/* ---------- blog: compartilhar ---------- */
.xp-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.xp-share__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 4px; font-size: .875rem; line-height: 1; cursor: pointer; text-decoration: none; color: #fff; font-family: inherit; }
.xp-share__btn--wa { background: #25d366; }
.xp-share__btn--wa:hover { background: #1ebe5b; }
.xp-share__btn--fb { background: #1877f2; }
.xp-share__btn--fb:hover { background: #1464cc; }
.xp-share__btn--copy { background: #fff; color: #812990; border-color: #812990; }
.xp-share__btn--copy:hover { background: #f7f3f8; }

/* ---------- blog: listagem com o mesmo raio do menu (4px) ---------- */
.xp-blog-card { border-radius: 4px !important; }
.xp-blog-chip { border-radius: 4px !important; padding: 2px 8px !important; line-height: 1.3 !important; } /* badge de categoria: raio do menu, menos alto */

/* ---------- "Jornada do intercambista": titulo e subtitulo com respiro ----------
 * Antes: h2 e p colados e o subtitulo em uma linha de ~1000px encostando nos cards.
 * typography.css usa !important em font-size/line-height de h2 e p, por isso este bloco tambem. */
.xp-jornada-head {
	padding: 2rem 1rem 1.75rem !important;
	text-align: center;
}
.xp-jornada-head h2 {
	margin: 0 0 .75rem !important;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem) !important;
	line-height: 1.15 !important;
}
.xp-jornada-head p {
	max-width: 44rem;
	margin: 0 auto !important;
	font-size: clamp(1rem, .9rem + .5vw, 1.25rem) !important;
	line-height: 1.55 !important;
	color: #4a4452;
	text-wrap: balance;
}

/* ---------- desempenho/acessibilidade (PageSpeed 27/10/2026) ---------- */
/* icones da CloudFront sem width/height: dimensao reservada evita o salto de layout quando carregam (icon1 tem px-4: 62 + 32 de padding) */
img[src*="/22183449/icon1.svg"] { width: 94px; height: 80px; }
img[src*="/22183408/icon2.svg"] { width: 31px; height: 32px; }
img[src*="/22183429/icon3.svg"] { width: 27px; height: 34px; }
img[src*="/22183437/icon4.svg"] { width: 27px; height: 34px; }
img[src$="/images/arrow.svg"] { width: 20px; height: 20px; }
/* area de toque minima dos controles dos carrosseis em telas de toque */
@media (max-width: 1023px) {
	.owl-prev, .owl-next, #prev, #next { min-width: 44px; min-height: 44px; }
}

/* ---------- cards do blog (home, destinos, modulo do blog): raio do menu, badges menores e "Ler artigo" alinhado ---------- */
.xp-blog-home .slider-item { border-radius: 4px; overflow: hidden; }
.xp-blog-home .slider-item img { border-radius: 0 !important; }
/* o bloco de texto ocupa a altura do card (cards da mesma fileira ficam iguais) e o botao desce para o fim */
.xp-blog-home .slider-item > div:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
/* texto longo e cortado com reticencias na mesma altura em todos os cards: titulo em 2 linhas, resumo em 3 */
.xp-blog-home .xp-blog-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4 !important; min-height: 2.8em; }
.xp-blog-home .xp-blog-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.xp-blog-home .xp-blog-readmore { margin-top: auto; align-self: flex-end; }

/* setas dos carrosseis (navText do Owl): o botao interno virou <span>; vertical-align evita a folga de linha do inline-block */
.owl-prev > span, .owl-next > span { vertical-align: top; }