@charset "UTF-8";
/* =========================================================
   AURA PAIVA — estilos da landing page
   ---------------------------------------------------------
   O layout aprovado tem 1920 px de largura. Todas as medidas
   do desktop estão em "px de projeto": a variável --u vale
   1 px quando a tela tem 1920 px e encolhe junto com ela.
   Assim a página é uma redução exata do PSD em qualquer
   monitor. No celular (< 900 px) o layout é remontado em
   coluna, na seção "CELULAR" no fim do arquivo.
========================================================= */

/* ---------- 1. FONTES ---------- */
@font-face {
	font-family: "Jedira";
	src: url("../fonts/jedira-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Arboria";
	src: url("../fonts/arboria-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Arboria";
	src: url("../fonts/arboria-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Arboria";
	src: url("../fonts/arboria-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- 2. TOKENS ---------- */
:root {
	--navy: #032136;
	--navy-rgb: 3, 33, 54;
	--creme: #f3f1e5;
	--creme-rgb: 243, 241, 229;
	--areia: #e3e0cd;
	--ocre: #c18d4f;
	--fundo: #e6e3d1;
	--fundo-2: #edebde;

	/* 1 px do projeto */
	--u: 1px;
	--canvas: 1920;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-suave: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 900px) {
        :root {
		/* O arquivo de arte foi desenhado para 1920 px: cada palco acompanha
		   a largura real do navegador, sem teto de 1280 px ou corte por altura. */
                --u: calc(100vw / 1920);
        }

        /* Preserva toda a composição da primeira dobra em notebooks e
           monitores baixos, sem reduzir a largura da imagem de fundo. */
        .pal--hero {
                --u: min(calc(100vw / 1920), calc(100svh / 1058));
                width: 100%;
        }
}

/* ---------- 3. BASE ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--navy);
	font-family: "Arboria", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Textura animada aprovada para a landing. Não intercepta nenhum clique. */
.noise {
	display: block;
	width: 100vw;
	height: 100vh;
	opacity: .08;
	background-image: url("https://highbusinessschool.com/wp-content/uploads/2025/08/ruido-animado.gif");
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 99;
	mix-blend-mode: plus-lighter;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #ddd; }
::-webkit-scrollbar-thumb { border-radius: 12px; background: #032136; }

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Dentro do palco, a foto preenche exatamente a caixa posicionada. */
.pal figure > img {
	width: 100%;
}

figure {
	margin: 0;
}

p,
h1,
h2,
h3,
ul,
ol,
dl,
dd {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

b,
strong {
	font-weight: 500;
}

.pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--navy);
	color: var(--creme);
	padding: 12px 18px;
}
.pular:focus {
	left: 8px;
	top: 8px;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ocre);
	outline-offset: 3px;
}

/* ---------- 4. FUNDO DA PÁGINA ---------- */
.lp {
	position: relative;
	width: 100%;
	background:
		linear-gradient(175deg, var(--fundo-2) 0%, var(--fundo) 28%, var(--fundo-2) 55%, var(--fundo) 78%, var(--fundo-2) 100%);
	overflow: hidden;
}

/* Grão de papel: textura tileável de ~18 KB. O filtro de ruído por SVG
   (feTurbulence) que usávamos antes nem sempre pinta de forma confiável
   em todos os navegadores — uma imagem real resolve isso de vez. */
.lp--grao::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: .6;
	mix-blend-mode: multiply;
	background-image: url("../img/grao.webp");
	background-size: 128px 128px;
	background-repeat: repeat;
}

/* ---------- 5. PALCO DAS SEÇÕES ---------- */
.sec {
	position: relative;
}

.pal {
	position: relative;
	width: calc(var(--canvas) * var(--u));
	margin-inline: auto;
	height: calc(var(--h) * var(--u));
}

.pal > * {
	position: absolute;
}

/* ---------- SANGRIA ----------
   Em telas mais largas que --maxw o palco fica centralizado. As fotos que
   no layout encostam na borda da tela precisam continuar encostando: elas
   saem do palco e vão até a borda da janela. A altura fica travada na medida
   do projeto e a foto preenche com object-fit, então nada desalinha embaixo. */
.sangra {
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	width: auto;
}

.sangra > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blocos de texto posicionados pelo topo da letra, como no PSD.
   --x/--y = coordenadas do projeto; --fs/--lh = corpo e entrelinha. */
.tx {
	left: calc(var(--x) * var(--u));
	width: calc(var(--w, 900) * var(--u));
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: var(--ls, 0);
	white-space: pre-wrap;
}

/* Arboria: entre o topo da caixa de linha e o topo da maiúscula. */
.tx--ar {
	top: calc((var(--y) - (var(--lh) - var(--fs)) / 2 - .154 * var(--fs)) * var(--u));
}

/* Jedira tem ascendente alto: o desconto é maior. */
.tx--jd {
	top: calc((var(--y) - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
}

/* Texto centralizado com entreletras: o recuo compensa o espaço
   que o navegador acrescenta depois da última letra. */
.tx--centro {
	text-align: center;
	text-indent: var(--ls, 0);
}

.tx--dir {
	text-align: right;
}

/* ---------- 6. TIPOGRAFIA ---------- */
.jd {
	font-family: "Jedira", "Times New Roman", serif;
	font-weight: 400;
	/* No PSD esses títulos estão em "All Caps". */
	text-transform: uppercase;
}

.jd .ln {
	display: block;
	padding-left: calc(var(--sp, 0) * var(--sp-w, .33em));
}

.lig {
	font-weight: 300;
}

/* ---------- 7. BOTÃO ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--bw, 292) * var(--u));
	height: calc(var(--bh, 75) * var(--u));
	border: calc(1.4 * var(--u)) solid currentColor;
	border-radius: 999px;
	color: var(--navy);
	text-decoration: none;
	font-size: calc(var(--bfs, 16.1) * var(--u));
	letter-spacing: .3em;
	text-indent: .3em;
	white-space: nowrap;
	text-transform: lowercase;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .5s var(--ease);
}

.btn > span {
	position: relative;
	z-index: 2;
}

/* O preenchimento sobe de baixo no hover. */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: currentColor;
	transform: translateY(101%);
	transition: transform .55s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: translateY(0);
}

.btn:hover,
.btn:focus-visible {
	color: var(--navy);
}

.btn:hover > span,
.btn:focus-visible > span {
	color: var(--creme);
}

.btn--claro {
	color: var(--creme);
	--bw: 331;
	--bfs: 18.2;
	text-transform: lowercase;
}
.btn--claro:hover > span,
.btn--claro:focus-visible > span {
	color: var(--creme);
}

.btn--solido {
	background: var(--navy);
	color: var(--creme);
	border-color: var(--navy);
}

/* ---------- 8. GRAFISMO DE LINHAS ---------- */
.grafismo {
	pointer-events: none;
	z-index: 0;
	opacity: .95;
}

.grafismo__img {
	width: 100%;
	height: auto;
}

/* ---------- 9. FILEIRA DE ÍCONES ---------- */
.icones {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: calc(var(--gap, 112) * var(--u));
}

.icones__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--gapy, 47) * var(--u));
	color: var(--navy);
}

.icones__ico {
	width: auto;
	height: calc(var(--ih, 100) * var(--u));
	color: var(--ocre);
	object-fit: contain;
	object-position: center;
	display: block;
}

.icones__txt {
	font-size: calc(22.2 * var(--u));
	line-height: 1;
	letter-spacing: .1em;
	text-indent: .1em;
	white-space: nowrap;
}

/* Coluna (mirante): ícone à esquerda, texto à direita. */
.icones--col {
	display: grid;
	grid-auto-rows: calc(87.5 * var(--u));
	align-items: center;
	gap: 0;
}

.icones--col .icones__item {
	display: grid;
	grid-template-columns: calc(164 * var(--u)) auto;
	align-items: center;
	gap: 0;
}

.icones--col .icones__ico {
	width: calc(123 * var(--u));
	height: calc(74 * var(--u));
	object-fit: contain;
}

/* ---------- 10. INDICAÇÕES SOBRE AS FOTOS ---------- */
.pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--fh: 810;
}

.pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	/* Sem "baixo", o traço sai por cima do texto. */
	flex-direction: column-reverse;
	align-items: center;
	transform: translate(-50%, -100%);
	color: var(--areia);
	font-size: calc(22.2 * var(--u));
	line-height: 1.22;
	letter-spacing: .1em;
	text-indent: .1em;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .35);
}

.pin--baixo {
	flex-direction: column;
	transform: translate(-50%, 0);
}

/* Pins perto da borda esquerda ou direita da foto: o texto cresce para
   dentro em vez de vazar para fora (a linha continua exatamente no ponto). */
.pin--borda-dir {
	align-items: flex-end;
	text-align: right;
	transform: translate(-100%, -100%);
}

.pin--borda-dir.pin--baixo {
	transform: translate(-100%, 0);
}

.pin--borda-esq {
	align-items: flex-start;
	text-align: left;
	transform: translate(0, -100%);
}

.pin--borda-esq.pin--baixo {
	transform: translate(0, 0);
}

.pin__linha {
	display: block;
	width: calc(4 * var(--u));
	/* --traco é a % da altura da foto; --fh é essa altura no projeto. */
	height: calc(var(--traco) / 100 * var(--fh, 800) * var(--u));
	margin-bottom: calc(10 * var(--u));
	background: currentColor;
	transform-origin: bottom center;
	box-shadow: 0 0 calc(6 * var(--u)) rgba(0, 0, 0, .3);
}

.pin--baixo .pin__linha {
	margin-bottom: 0;
	margin-top: calc(10 * var(--u));
	transform-origin: top center;
}

/* Pins numerados do mapa. */
.pins--num .pin {
	font-size: calc(17 * var(--u));
	font-weight: 500;
	letter-spacing: .05em;
}
.pins--num .pin__linha {
	width: calc(2.6 * var(--u));
	margin-top: calc(7 * var(--u));
}

/* ---------- 11. CARROSSEL ---------- */
.carrossel {
	position: relative;
}

.carrossel__trilho {
	position: relative;
	display: grid;
	/* Sem isso a única coluna implícita do grid não se estica para
	   preencher o container — ficava um vão em branco à direita nos
	   carrosséis de largura total. */
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	width: 100%;
	height: 100%;
}

.carrossel__foto {
	position: relative;
	overflow: hidden;
}

.carrossel__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease-suave), visibility 0s linear .3s;
}

.carrossel__slide.is-ativo {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s var(--ease-suave);
}

.carrossel__slide.is-ativo img {
	animation: none;
}

@keyframes aura-zoom {
        from { transform: scale(1.045); }
        to   { transform: scale(1); }
}

.carrossel__dots {
        position: absolute;
        left: 50%;
        bottom: calc(26 * var(--u));
        z-index: 4;
        display: flex;
        gap: calc(10 * var(--u));
        transform: translateX(-50%);
}
.carrossel__dot {
        width: calc(8 * var(--u));
        height: calc(8 * var(--u));
        padding: 0;
        border: 1px solid var(--navy);
        border-radius: 50%;
        background: rgba(var(--creme-rgb), .82);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
        transition: transform .3s var(--ease), background .3s var(--ease);
}
.carrossel__dot.is-ativo { background: var(--navy); transform: scale(1.35); }
.carrossel__dot:hover, .carrossel__dot:focus-visible { transform: scale(1.4); }

/* Carrossel de áreas: a imagem fica limpa e cada slide explica seu
   conteúdo abaixo, com número e legenda — sem pins sobre a foto. */
.carrossel--areas .carrossel__trilho { height: auto; }

.carrossel--areas .carrossel__slide {
	display: flex;
	flex-direction: column;
	gap: calc(28 * var(--u));
}

.carrossel--areas .carrossel__dots {
	position: static;
	justify-content: center;
	margin-top: calc(20 * var(--u));
	transform: none;
}

.carrossel--areas .seta { top: calc(405 * var(--u)); }

.ar__legenda {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: calc(18 * var(--u)) calc(32 * var(--u));
	padding: 0 calc(20 * var(--u));
	color: var(--navy);
}

.ar__cabecalho {
	position: relative;
	grid-column: 1 / -1;
	display: block;
	padding-bottom: calc(18 * var(--u));
}

.ar__cabecalho::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(188 * var(--u));
	height: calc(2 * var(--u));
	background: var(--ocre);
}

.ar__legenda-titulo {
	display: block;
	margin: 0;
}

.ar__legenda-titulo span {
	display: block;
	font-size: calc(15 * var(--u));
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.ar__itens {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: calc(10 * var(--u)) calc(24 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ar__itens li {
	font-size: calc(15 * var(--u));
	line-height: 1.4;
	letter-spacing: .08em;
}

.ar__itens li::before {
	content: "•";
	margin-right: .55em;
	color: var(--ocre);
}

/* A foto da academia é a thumb clicável do vídeo de produto. */
.ac__grande .play {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(90deg, rgba(3, 33, 54, .12), transparent 52%);
}

.ac__grande .play svg {
	width: calc(112 * var(--u));
	height: calc(112 * var(--u));
	filter: drop-shadow(0 3px 13px rgba(0, 0, 0, .28));
}

.ac__grande .play:hover { background: linear-gradient(90deg, rgba(3, 33, 54, .26), transparent 60%); }

.seta {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
	display: grid;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid rgba(var(--creme-rgb), .78);
	border-radius: 50%;
	background: rgba(var(--navy-rgb), .36);
	color: var(--creme);
	transition: transform .4s var(--ease), opacity .3s;
	opacity: .92;
	pointer-events: auto;
}

.seta:hover {
	opacity: 1;
}

.seta__svg {
	width: calc(26 * var(--u));
	height: auto;
}

.seta--ant .seta__svg {
	transform: scaleX(-1);
}

.carrossel .seta__svg {
	display: none;
}

.carrossel .seta::after {
	content: "";
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	border-right: calc(1.5 * var(--u)) solid currentColor;
	border-bottom: calc(1.5 * var(--u)) solid currentColor;
	transform: rotate(-45deg);
	margin-left: calc(-4 * var(--u));
}

.carrossel .seta--ant::after {
	transform: rotate(135deg);
	margin-left: calc(4 * var(--u));
}

.seta--ant:hover {
	transform: translate(calc(-6 * var(--u)), -50%);
}

.seta--prox:hover {
	transform: translate(calc(6 * var(--u)), -50%);
}

/* =========================================================
   SEÇÃO 1 — PRIMEIRA DOBRA
========================================================= */
.pal--hero {
	--h: 1058;
}

.hero__media {
	inset: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	overflow: hidden;
	background: #24303a;
}

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: none;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(1, 15, 25, .52) 0%, rgba(1, 15, 25, .34) 48%, rgba(1, 15, 25, .14) 100%);
}

.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__titulo,
.hero__texto,
.hero__cta,
.hero__logo {
	z-index: 2;
}

@keyframes aura-hero-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

.hero__titulo {
	--x: 328;
	--y: 204;
	--fs: 90.5;
	--lh: 87.11;
	--ls: .14em;
	--sp-w: .42em;
	left: calc(var(--x) * var(--u));
	top: calc((var(--y) - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: var(--ls);
	color: var(--creme);
	font-weight: 400;
}

.hero__texto {
	left: calc(664 * var(--u));
	top: calc((428 - (44.8 - 23.9) / 2 - .154 * 23.9) * var(--u));
	width: calc(400 * var(--u));
	font-size: calc(23.9 * var(--u));
	line-height: calc(44.8 * var(--u));
	letter-spacing: .1em;
	color: var(--creme);
	white-space: pre-wrap;
}

.hero__cta {
	left: calc(323 * var(--u));
	top: calc(694 * var(--u));
}

.hero__logo {
	left: calc(302 * var(--u));
	/* Mantém a assinatura inteiramente dentro da primeira dobra. */
        top: calc(866 * var(--u));
	width: calc(382 * var(--u));
	color: var(--creme);
}

.hero__logo-svg {
	width: 100%;
	height: auto;
}

.hero__scroll {
	left: 50%;
	bottom: calc(34 * var(--u));
	transform: translateX(-50%);
	width: calc(2 * var(--u));
	height: calc(52 * var(--u));
	overflow: hidden;
	background: rgba(var(--creme-rgb), .28);
}

.hero__scroll-linha {
	display: block;
	width: 100%;
	height: 45%;
	background: var(--creme);
	animation: aura-scroll 2.4s var(--ease-suave) infinite;
}

@keyframes aura-scroll {
	0%   { transform: translateY(-110%); }
	60%  { transform: translateY(130%); }
	100% { transform: translateY(130%); }
}

/* =========================================================
   SEÇÃO 2 — APENAS 40 UNIDADES
========================================================= */
.pal--unidades {
	--h: 1837;
}

.grafismo--un {
	/* Ancorado na borda real da tela (não na caixa central, que agora
	   pode ser mais estreita que a tela por causa da largura máxima) —
	   assim o grafismo sempre encosta nas duas laterais. */
	left: calc(50% - 50vw + (-71 * var(--u)));
	top: calc(-81 * var(--u));
	width: calc(2298 * var(--u));
}

.un__chamada {
	left: 0;
	top: calc((159 - (72 - 35.2) / 2 - .154 * 35.2) * var(--u));
	width: 100%;
	text-align: center;
	text-indent: .7em;
	font-size: calc(35.2 * var(--u));
	line-height: calc(72 * var(--u));
	letter-spacing: .7em;
}

.un__foto {
	left: calc(240 * var(--u));
	top: calc(329 * var(--u));
	width: calc(1440 * var(--u));
	z-index: 2;
}

.un__suites {
	left: 0;
	top: calc(1352 * var(--u));
	width: 100%;
	text-align: center;
}

.un__suites-1 {
	font-size: calc(39.6 * var(--u));
	line-height: calc(61.1 * var(--u));
	letter-spacing: .6em;
	text-indent: .6em;
}

.un__suites-2 {
	font-size: calc(29.2 * var(--u));
	line-height: calc(53.2 * var(--u));
	letter-spacing: .14em;
	text-indent: .14em;
}

.un__tipos {
	left: 0;
	top: calc(1556 * var(--u));
	width: 100%;
}

.tipos {
	font-size: calc(25.1 * var(--u));
	line-height: calc(47.9 * var(--u));
	letter-spacing: .12em;
}

/* Coluna 1 termina em 742 px do projeto; a coluna 2 começa logo depois. */
.tipos__linha {
	display: grid;
	grid-template-columns: calc(742 * var(--u)) 1fr;
}

.tipos__nome {
	text-align: right;
	font-weight: 500;
}

.tipos__area {
	position: relative;
	margin: 0;
	padding-left: calc(47 * var(--u));
}

.tipos__area::before {
	content: "";
	position: absolute;
	left: calc(18 * var(--u));
	top: calc(20 * var(--u));
	width: calc(8 * var(--u));
	height: calc(8 * var(--u));
	border-radius: 50%;
	background: var(--ocre);
}

.tipos__nota {
	margin-top: calc(4 * var(--u));
	padding-left: calc(789 * var(--u));
	font-size: calc(14.8 * var(--u));
	line-height: calc(22.8 * var(--u));
	letter-spacing: .12em;
}

/* =========================================================
   SEÇÃO 3 — WELLNESS 360º
========================================================= */
.pal--wellness {
	--h: 1509;
}

.we__bg {
	top: 0;
	height: calc(891 * var(--u));
	overflow: hidden;
}

.we__bg img {
	transform: none;
}

.we__spa {
	left: calc(1145 * var(--u));
	top: calc(-188 * var(--u));
	width: calc(425 * var(--u));
	z-index: 3;
}

.we__titulo {
	--fs: 47.5;
	--lh: 73.2;
	left: calc(813 * var(--u));
	top: calc((548 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	z-index: 3;
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .08em;
	color: var(--areia);
	font-weight: 400;
	text-shadow: 0 calc(2 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .3);
}

.we__massagem {
	left: calc(320 * var(--u));
	top: calc(701 * var(--u));
	width: calc(680 * var(--u));
	z-index: 3;
}

.we__frase {
	left: calc(1096 * var(--u));
	top: calc((967 - (54.5 - 26.7) / 2 - .154 * 26.7) * var(--u));
	width: calc(500 * var(--u));
	font-size: calc(26.7 * var(--u));
	line-height: calc(54.5 * var(--u));
	letter-spacing: .4em;
	white-space: pre-wrap;
}

.we__icones {
	left: 0;
	top: calc(1244 * var(--u));
	width: 100%;
}

.we__icones .icones {
	--gap: 112;
	--ih: 112;
	--gapy: 52;
}

/* =========================================================
   SEÇÃO 4 — ACADEMIA
========================================================= */
.pal--academia {
	--h: 1709;
}

.ac__grande {
	left: calc(242 * var(--u));
	top: calc(6 * var(--u));
	width: calc(1440 * var(--u));
	/* Altura fixa (proporção da foto original) — o <video>, ao contrário
	   do <img>, não define sozinho a altura da figure. */
	height: calc(721 * var(--u));
	overflow: hidden;
	z-index: 2;
}

.ac__grande-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #24303a;
}

.play {
	position: absolute;
	left: calc(663 * var(--u));
	top: calc(308 * var(--u));
	width: calc(117 * var(--u));
	height: calc(117 * var(--u));
	color: rgba(var(--creme-rgb), .92);
	transition: transform .45s var(--ease);
}

.play svg {
	width: 100%;
	height: 100%;
}

.play:hover {
	transform: scale(1.09);
}

.play__aro {
	transform-origin: center;
	animation: aura-pulso 3.2s var(--ease-suave) infinite;
}

@keyframes aura-pulso {
	0%, 100% { opacity: .9; transform: scale(1); }
	50%      { opacity: .45; transform: scale(1.07); }
}

.grafismo--ac {
	left: calc(50% - 50vw + (12 * var(--u)));
	top: calc(557 * var(--u));
	width: calc(2298 * var(--u));
}

.ac__yoga {
	left: calc(907 * var(--u));
	top: calc(801 * var(--u));
	width: calc(773 * var(--u));
	z-index: 2;
}

.ac__esteira {
	left: calc(335 * var(--u));
	top: calc(804 * var(--u));
	width: calc(462 * var(--u));
	z-index: 2;
}

.ac__titulo {
	left: calc(339 * var(--u));
	top: calc((1129 - (41.9 - 24.4) / 2 - .154 * 24.4) * var(--u));
	width: calc(500 * var(--u));
	z-index: 2;
	font-size: calc(24.4 * var(--u));
	line-height: calc(41.9 * var(--u));
	letter-spacing: .6em;
	font-weight: 300;
	white-space: pre-wrap;
}

.ac__titulo b {
	font-weight: 400;
}

.ac__frase {
	left: calc(477 * var(--u));
	top: calc((1249 - (26.4 - 15.4) / 2 - .154 * 15.4) * var(--u));
	width: calc(400 * var(--u));
	z-index: 2;
	font-size: calc(15.4 * var(--u));
	line-height: calc(26.4 * var(--u));
	letter-spacing: .4em;
	font-weight: 500;
	white-space: pre-wrap;
}

/* Traço vertical à esquerda da frase. */
.ac__frase::before {
	content: "";
	position: absolute;
	left: calc(-26 * var(--u));
	top: calc(-6 * var(--u));
	width: calc(2 * var(--u));
	height: calc(64 * var(--u));
	background: var(--ocre);
	transform-origin: top;
}

.ac__cta {
	left: calc(402 * var(--u));
	top: calc(1371 * var(--u));
	z-index: 2;
}

/* =========================================================
   SEÇÃO 5 — QUADRA DE SQUASH
========================================================= */
.pal--squash {
	--h: 751;
}

.sq__quadra {
	top: 0;
	/* começa em x 816 e encosta na direita da tela. */
	left: calc(50% - 144 * var(--u));
	height: calc(664 * var(--u));
	overflow: hidden;
}

.sq__titulo {
	--fs: 39.5;
	--lh: 52.2;
	left: calc(507 * var(--u));
	top: calc((34 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	z-index: 3;
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .1em;
	font-weight: 400;
}

.sq__subtitulo {
	position: absolute;
	right: auto;
	bottom: calc(78 * var(--u));
	left: calc(250 * var(--u));
	top: auto;
	width: auto;
	z-index: 3;
	margin: 0;
	color: var(--creme);
	font-size: calc(17 * var(--u));
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .07em;
	white-space: nowrap;
	text-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .28);
}

.sq__raquete {
	left: calc(501 * var(--u));
	top: calc(194 * var(--u));
	width: calc(498 * var(--u));
	z-index: 2;
}

/* =========================================================
   SEÇÃO 6 — SEGURANÇA
========================================================= */
.pal--seguranca {
	--h: 766;
}

.se__foto {
	top: 0;
	/* encosta na esquerda da tela e termina onde o layout manda (x 1177). */
	right: calc(50% - 217 * var(--u));
	height: calc(664 * var(--u));
	overflow: hidden;
}

.se__titulo {
	--fs: 43;
	--lh: 56.8;
	left: calc(1179 * var(--u));
	top: calc((157 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .1em;
	font-weight: 400;
}

.se__frase {
	left: calc(1257 * var(--u));
	top: calc((242 - (54.5 - 26.7) / 2 - .154 * 26.7) * var(--u));
	width: calc(600 * var(--u));
	font-size: calc(26.7 * var(--u));
	line-height: calc(54.5 * var(--u));
	letter-spacing: .4em;
	white-space: pre-wrap;
}

.se__lista {
	left: calc(1295 * var(--u));
	top: calc((483 - (50.3 - 22.2) / 2 - .154 * 22.2) * var(--u));
	width: calc(560 * var(--u));
	font-size: calc(22.2 * var(--u));
	line-height: calc(50.3 * var(--u));
	letter-spacing: .1em;
}

/* =========================================================
   SEÇÃO 7 — VIDA LEVE AO AR LIVRE
========================================================= */
.pal--lazer {
	--h: 1658;
}

.la__titulo {
	--fs: 54.8;
	--lh: 89.6;
	--sp-w: .3em;
	left: calc(436 * var(--u));
	top: calc((69 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	z-index: 3;
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .08em;
	font-weight: 400;
}

.la__piquenique {
	left: calc(791 * var(--u));
	top: 0;
	width: calc(744 * var(--u));
	z-index: 3;
}

.la__aerea {
	left: calc(239 * var(--u));
	top: calc(378 * var(--u));
	width: calc(1441 * var(--u));
	z-index: 2;
}

.la__icones {
	left: 0;
	top: calc(1245 * var(--u));
	width: 100%;
}

.la__icones .icones {
	--gap: 120;
	--ih: 100;
	--gapy: 42;
}

.la__cta {
	left: calc(805 * var(--u));
	top: calc(1501 * var(--u));
}

/* =========================================================
   SEÇÃO 8 — MIRANTE SUNSET
========================================================= */
.pal--mirante {
	--h: 1727;
}

.mi__foto {
	top: 0;
	height: calc(1088 * var(--u));
	overflow: hidden;
}

.mi__foto img {
	transform: none;
}

.mi__legenda {
	text-transform: uppercase;
	left: 0;
	top: calc(944 * var(--u));
	width: calc(530 * var(--u));
	z-index: 3;
	padding-left: calc(251 * var(--u));
	font-size: calc(27.7 * var(--u));
	line-height: calc(42.8 * var(--u));
	letter-spacing: .12em;
	color: var(--areia);
	white-space: nowrap;
	padding-bottom: calc(22 * var(--u));
}

.mi__legenda::after {
	content: "";
	position: absolute;
	left: calc(251 * var(--u));
	bottom: 0;
	width: calc(238 * var(--u));
	height: calc(3 * var(--u));
	background: var(--ocre);
	transform-origin: left center;
}

.mi__casal {
	left: calc(504 * var(--u));
	top: calc(1031 * var(--u));
	width: calc(559 * var(--u));
	z-index: 3;
}

.mi__icones {
	left: calc(1166 * var(--u));
	top: calc(1150 * var(--u));
	z-index: 3;
}

.grafismo--mi {
	left: calc(50% - 50vw + (-283 * var(--u)));
	top: calc(1294 * var(--u));
	width: calc(2298 * var(--u));
}

/* =========================================================
   SEÇÃO 9 — CARROSSEL DAS ÁREAS COMUNS
========================================================= */
.pal--areas {
	--h: 1245;
}

.carrossel--areas {
	left: calc(244 * var(--u));
	top: 0;
	width: calc(1436 * var(--u));
}

.carrossel--areas .seta--ant {
	left: calc(28 * var(--u));
}

.carrossel--areas .seta--prox {
	right: calc(28 * var(--u));
}

.ar__cta {
	left: calc(814 * var(--u));
	top: calc(1100 * var(--u));
}

/* =========================================================
   SEÇÃO 10 — SALÃO E BRINQUEDOTECA
========================================================= */
.pal--convivencia {
	--h: 1239;
}

.carrossel--cheio {
	top: 0;
}

.co__foto,
.carrossel--cheio .carrossel__slide {
	height: calc(1079 * var(--u));
}

.co__foto {
	position: relative;
	overflow: hidden;
}

.co__foto > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.co__legenda {
	text-transform: uppercase;
	position: absolute;
	left: 0;
	bottom: calc(43 * var(--u));
	width: calc(507 * var(--u));
	padding-left: calc(214 * var(--u));
	font-size: calc(27.7 * var(--u));
	line-height: calc(42.8 * var(--u));
	letter-spacing: .12em;
	color: var(--areia);
}

.co__legenda::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-12 * var(--u));
	width: 100%;
	height: calc(3 * var(--u));
	background: linear-gradient(90deg, rgba(var(--creme-rgb), 0), var(--ocre));
}

.carrossel--cheio .seta {
	color: var(--creme);
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
	background: rgba(var(--navy-rgb), .36);
}

.carrossel--cheio .seta__svg {
	width: calc(34 * var(--u));
}

.carrossel--cheio .seta--ant {
	left: calc(54 * var(--u));
}

.carrossel--cheio .seta--prox {
	right: calc(54 * var(--u));
}

/* =========================================================
   SEÇÃO 11 — VARANDAS
========================================================= */
.pal--varandas {
	--h: 1832;
}

.va__mulher {
	left: calc(453 * var(--u));
	top: 0;
	width: calc(556 * var(--u));
	z-index: 3;
}

.va__titulo {
	--fs: 45.7;
	--lh: 74.9;
	--sp-w: .3em;
	left: calc(1085 * var(--u));
	top: calc((91 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .08em;
	font-weight: 400;
}

.va__frase {
	left: calc(1127 * var(--u));
	top: calc((354 - (49.2 - 24.6) / 2 - .154 * 24.6) * var(--u));
	width: calc(540 * var(--u));
	font-size: calc(24.6 * var(--u));
	line-height: calc(49.2 * var(--u));
	letter-spacing: .1em;
	white-space: pre-wrap;
}

.va__varanda {
	left: calc(340 * var(--u));
	top: calc(529 * var(--u));
	width: calc(1257 * var(--u));
	z-index: 2;
}

.va__poltrona {
	left: calc(730 * var(--u));
	top: calc(1202 * var(--u));
	width: calc(469 * var(--u));
	z-index: 2;
}

.va__lista {
	left: calc(393 * var(--u));
	top: calc((1366 - (33.6 - 24.6) / 2 - .154 * 24.6) * var(--u));
	/* Largura real do texto no PSD (393 a 654) — mais estreita que o espaço
	   disponível de propósito, para sobrar o respiro até a foto. */
	width: calc(261 * var(--u));
	font-size: calc(22.6 * var(--u));
	line-height: calc(31.6 * var(--u));
	letter-spacing: .1em;
	text-align: right;
}

.va__lista li + li {
	margin-top: calc(31.6 * var(--u));
}

.va__frase2 {
	left: calc(1259 * var(--u));
	top: calc((1407 - (33.6 - 24.6) / 2 - .154 * 24.6) * var(--u));
	width: calc(420 * var(--u));
	font-size: calc(24.6 * var(--u));
	line-height: calc(33.6 * var(--u));
	letter-spacing: .2em;
	white-space: pre-wrap;
}

/* =========================================================
   SEÇÃO 12 — TIPOLOGIAS (ABAS)
========================================================= */
.pal--plantas {
	--h: 1277;
}

.abas {
	/* O traço vai de 518 a 1407; os nomes ficam 15 px para dentro. */
	left: calc(518 * var(--u));
	top: calc(-11.6 * var(--u));
	width: calc(889 * var(--u));
	display: flex;
	justify-content: space-between;
	z-index: 4;
	padding: 0 calc(15 * var(--u)) calc(21.5 * var(--u));
}

.abas__btn {
	text-transform: uppercase;
	font-size: calc(27.3 * var(--u));
	line-height: calc(42.1 * var(--u));
	letter-spacing: .12em;
	font-weight: 500;
	color: rgba(var(--navy-rgb), .42);
	transition: color .4s var(--ease);
	white-space: nowrap;
}

.abas__btn:hover,
.abas__btn.is-ativo {
	color: var(--navy);
}

.abas__linha {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(2 * var(--u));
	background: rgba(var(--navy-rgb), .3);
}

.abas__marca {
	position: absolute;
	left: var(--mx, 0);
	bottom: 0;
	width: var(--mw, calc(140 * var(--u)));
	height: calc(4 * var(--u));
	background: var(--ocre);
	transition: left .5s var(--ease), width .5s var(--ease);
}

.pl__palco {
	top: calc(82 * var(--u));
	display: grid;
	height: calc(959 * var(--u));
}

.pl__foto {
	height: 100%;
}

.pl__painel {
	grid-area: 1 / 1;
	position: relative;
}

.pl__painel[hidden] {
	display: none;
}

.pl__foto {
	overflow: hidden;
}

.pl__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pl__painel.is-ativo .pl__foto img {
	animation: aura-zoom 9s var(--ease-suave) both;
}

.pl__itens {
	position: absolute;
	left: calc(232 * var(--u));
	top: calc(107 * var(--u));
	width: calc(420 * var(--u));
	font-size: calc(16.4 * var(--u));
	line-height: calc(31.9 * var(--u));
	letter-spacing: .12em;
	font-weight: 500;
	color: var(--areia);
	text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .3);
}

.pl__ficha {
	position: absolute;
	left: calc(1364 * var(--u));
	bottom: calc(60 * var(--u));
	width: calc(520 * var(--u));
	color: var(--areia);
	text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35);
}

.pl__area {
	font-size: calc(29.2 * var(--u));
	line-height: calc(45.1 * var(--u));
	letter-spacing: .2em;
}

.pl__nota {
	font-size: calc(17.6 * var(--u));
	line-height: calc(27.1 * var(--u));
	letter-spacing: .1em;
}

.pl__suites {
	margin-top: calc(6 * var(--u));
	font-size: calc(21.9 * var(--u));
	line-height: calc(28 * var(--u));
	letter-spacing: .12em;
}

.pl__cta {
	left: calc(815 * var(--u));
	top: calc(1114 * var(--u));
}

/* =========================================================
   SEÇÃO 13 — LOCALIZAÇÃO
========================================================= */
.pal--mapa {
        --h: 1570;
}

.ma__foto .pins {
	--fh: 861;
}

.ma__foto {
	/* Moldura central do layout: a arte respira nas quatro bordas. */
	left: calc(196 * var(--u));
	top: 0;
	width: calc(1537 * var(--u));
	color: var(--areia);
}

.ma__legenda {
	left: calc(196 * var(--u));
	top: calc(920 * var(--u));
	width: calc(1537 * var(--u));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	gap: 0 calc(74 * var(--u));
	margin: 0;
	padding: calc(38 * var(--u)) calc(44 * var(--u));
	border: calc(1 * var(--u)) solid rgba(var(--navy-rgb), .16);
	background:
		radial-gradient(circle at 87% 7%, rgba(193, 141, 79, .18), transparent 28%),
		linear-gradient(135deg, #f8f4e8 0%, #e3dac2 100%);
	box-shadow: 0 calc(24 * var(--u)) calc(44 * var(--u)) rgba(var(--navy-rgb), .12);
	color: var(--navy);
	font-size: calc(17 * var(--u));
	line-height: 1.45;
	letter-spacing: .025em;
	overflow: hidden;
}

.ma__legenda li {
	display: grid;
	grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr);
	align-items: center;
	gap: calc(12 * var(--u));
	min-height: calc(65 * var(--u));
	padding: calc(9 * var(--u)) 0;
	border-bottom: calc(1 * var(--u)) solid rgba(var(--navy-rgb), .15);
}

.ma__legenda li:nth-child(7),
.ma__legenda li:nth-child(14) {
	border-bottom: 0;
}

.ma__legenda-num {
	color: var(--ocre);
	font-family: "Jedira", "Times New Roman", serif;
	font-size: calc(28 * var(--u));
	font-weight: 500;
	line-height: 1;
}

.ma__regiao {
	position: absolute;
	left: calc(80 * var(--u));
	top: calc(110 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	font-size: calc(12.8 * var(--u));
	letter-spacing: .42em;
	text-transform: uppercase;
}

.ma__pin {
	width: calc(20 * var(--u));
	height: calc(26 * var(--u));
}

.ma__marca {
	position: absolute;
	left: calc(730 * var(--u));
	top: calc(184 * var(--u));
	width: calc(148 * var(--u));
	color: var(--creme);
}

.ma__marca-svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35));
}

.ma__marca-linha {
	position: absolute;
	left: calc(73 * var(--u));
	top: calc(93 * var(--u));
	width: calc(3 * var(--u));
	height: calc(213 * var(--u));
	background: var(--creme);
	transform-origin: top;
}

.ma__dist {
	position: absolute;
	left: calc(80 * var(--u));
	top: calc(607 * var(--u));
	font-size: calc(14.1 * var(--u));
	line-height: calc(34 * var(--u));
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ma__dist li {
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
}

.ma__dist-ico {
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	flex: none;
	object-fit: contain;
}

.ma__perto {
	position: absolute;
	left: calc(1169 * var(--u));
	top: calc(510 * var(--u));
	width: calc(318 * var(--u));
	font-size: calc(17.3 * var(--u));
	line-height: calc(30.5 * var(--u));
	letter-spacing: .05em;
}

.ma__perto-det {
	display: block;
	padding-left: calc(22 * var(--u));
	font-size: calc(12.4 * var(--u));
	line-height: calc(18.8 * var(--u));
}

/* =========================================================
   SEÇÃO 14 — FORMULÁRIO
========================================================= */
.pal--contato {
	--h: 1046;
}

.grafismo--fo {
	left: calc(-368 * var(--u));
	top: calc(707 * var(--u));
	width: calc(949 * var(--u));
	color: var(--ocre);
}

.grafismo__svg {
	width: 100%;
	height: auto;
}

.fo__titulo {
	--fs: 45.7;
	--lh: 74.9;
	--sp-w: .3em;
	left: calc(705 * var(--u));
	top: calc((0 - (var(--lh) - 1.77 * var(--fs)) / 2 - .56 * var(--fs)) * var(--u));
	margin: 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	letter-spacing: .08em;
	font-weight: 400;
}

.fo__marca {
	left: calc(379 * var(--u));
	top: calc(388 * var(--u));
	width: calc(525 * var(--u));
	color: var(--navy);
}

.fo__marca-svg {
	width: 100%;
	height: auto;
}

.fo__caixa {
	left: calc(1036 * var(--u));
	top: calc(263 * var(--u));
	width: calc(639 * var(--u));
	z-index: 3;
}

.fo__ok {
	margin-bottom: calc(18 * var(--u));
	padding: calc(18 * var(--u)) calc(28 * var(--u));
	border-radius: calc(44 * var(--u));
	background: rgba(var(--navy-rgb), .07);
	font-size: calc(17 * var(--u));
	line-height: 1.5;
}

.fo__campo {
	position: relative;
	margin-bottom: calc(19 * var(--u));
}

.fo__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fo__input {
	width: 100%;
	height: calc(88 * var(--u));
	padding: 0 calc(38 * var(--u));
	border: calc(1.4 * var(--u)) solid rgba(var(--navy-rgb), .12);
	border-radius: calc(44 * var(--u));
	background: var(--creme);
	color: var(--navy);
	font-family: inherit;
	font-size: calc(19 * var(--u));
	letter-spacing: .04em;
	appearance: none;
	transition: border-color .35s var(--ease), background .35s var(--ease);
}

.fo__input::placeholder {
	color: rgba(var(--navy-rgb), .5);
}

.fo__input:hover {
	border-color: rgba(var(--navy-rgb), .3);
}

.fo__input:focus {
	outline: none;
	border-color: var(--navy);
	background: #fff;
}

.fo__campo--select .fo__input {
	padding-right: calc(66 * var(--u));
	cursor: pointer;
}

.fo__seta {
	position: absolute;
	right: calc(34 * var(--u));
	top: 50%;
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	transform: translateY(-50%);
	pointer-events: none;
	color: rgba(var(--navy-rgb), .6);
}

.fo__campo--erro .fo__input {
	border-color: #a8442f;
}

.fo__aceite {
	display: flex;
	align-items: flex-start;
	gap: calc(14 * var(--u));
	margin: calc(22 * var(--u)) calc(10 * var(--u)) 0;
	font-size: calc(14.5 * var(--u));
	line-height: 1.45;
	color: rgba(var(--navy-rgb), .78);
	cursor: pointer;
}

.fo__aceite input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fo__aceite-caixa {
	flex: none;
	width: calc(19 * var(--u));
	height: calc(19 * var(--u));
	margin-top: calc(2 * var(--u));
	border: calc(1.4 * var(--u)) solid rgba(var(--navy-rgb), .4);
	border-radius: calc(4 * var(--u));
	position: relative;
	transition: background .25s, border-color .25s;
}

.fo__aceite input:checked + .fo__aceite-caixa {
	background: var(--navy);
	border-color: var(--navy);
}

.fo__aceite-caixa::after {
	content: "";
	position: absolute;
	left: calc(5.5 * var(--u));
	top: calc(1.5 * var(--u));
	width: calc(5 * var(--u));
	height: calc(10 * var(--u));
	border: solid var(--creme);
	border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
	transform: rotate(45deg) scale(0);
	transition: transform .25s var(--ease);
}

.fo__aceite input:checked + .fo__aceite-caixa::after {
	transform: rotate(45deg) scale(1);
}

.fo__aceite input:focus-visible + .fo__aceite-caixa {
	outline: 2px solid var(--ocre);
	outline-offset: 2px;
}

.fo__erro {
	min-height: calc(26 * var(--u));
	padding: calc(4 * var(--u)) calc(10 * var(--u)) 0;
	font-size: calc(14.5 * var(--u));
	line-height: 1.4;
	color: #a8442f;
}

.btn--form {
	--bw: 639;
	--bh: 101;
	--bfs: 17;
	width: 100%;
}

.fo__mel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================
   RODAPÉ E FLUTUANTES
========================================================= */
.rodape {
	background: var(--navy);
	color: rgba(var(--creme-rgb), .72);
	text-align: center;
}

.rodape__in {
	max-width: 720px;
	margin-inline: auto;
	padding: 56px 24px 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.rodape__legal {
	font-size: 13px;
	line-height: 1.75;
	letter-spacing: .02em;
	max-width: 900px;
}

.rodape__redes {
	display: flex;
	gap: 14px;
}

.rodape__redes a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--creme);
	color: var(--navy);
	transition: transform .3s var(--ease), opacity .3s;
}

.rodape__redes a:hover {
	transform: translateY(-3px);
	opacity: .85;
}

.rodape__redes svg {
	width: 18px;
	height: 18px;
}

.rodape__disclaimer {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--creme);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--creme-rgb), .4);
	transition: border-color .3s, opacity .3s;
}

.rodape__disclaimer:hover {
	border-color: var(--creme);
	opacity: .85;
}

.rodape__assin {
	font-size: 13px;
	letter-spacing: .04em;
	opacity: .8;
}

.rodape__creci {
	margin-left: 10px;
	opacity: .7;
}

.sticky {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 60;
	transform: translate(-50%, 140%);
	transition: transform .6s var(--ease);
}

.sticky.is-vis {
	transform: translate(-50%, 0);
}

.sticky .btn {
	--bw: 260;
	--bh: 56;
	--bfs: 13;
	--u: 1px;
	box-shadow: 0 12px 34px rgba(var(--navy-rgb), .3);
}

.zap {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--navy);
	color: var(--creme);
	box-shadow: 0 10px 28px rgba(var(--navy-rgb), .32);
	transition: transform .35s var(--ease);
}

.zap:hover {
	transform: scale(1.08);
}

.zap svg {
	width: 28px;
	height: 28px;
}

/* Páginas internas simples. */
.pagina__in {
	max-width: 780px;
	margin-inline: auto;
	padding: 90px 24px 110px;
	line-height: 1.7;
}

.pagina__in h1 {
	font-family: "Jedira", serif;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 400;
	letter-spacing: .04em;
	margin-bottom: 24px;
}

.pagina__in p {
	margin-bottom: 18px;
}

/* =========================================================
   MODAL DE VÍDEO
========================================================= */
.modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 5vw;
	background: rgba(3, 12, 20, .9);
	opacity: 0;
	transition: opacity .4s var(--ease);
}

.modal.is-vis {
	opacity: 1;
}

.modal__quadro {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	transform: scale(.96);
	transition: transform .5s var(--ease);
}

.modal.is-vis .modal__quadro {
	transform: scale(1);
}

.modal__quadro iframe,
.modal__quadro video {
	width: 100%;
	height: 100%;
	border: 0;
}

.modal__fechar {
	position: absolute;
	top: 3vh;
	right: 4vw;
	width: 46px;
	height: 46px;
	color: var(--creme);
	font-size: 34px;
	line-height: 1;
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
========================================================= */
.js .lp--anim .rv {
	/* A página permanece íntegra mesmo se o observador falhar. */
	opacity: 1;
	transform: none;
	transition:
		opacity .9s var(--ease) var(--d, 0s),
		transform 1.05s var(--ease) var(--d, 0s);
}

/* .rv--mask usava um "wipe" por clip-path na foto. Em páginas muito longas
   isso se mostrou frágil (a foto podia ficar presa no estado inicial, ou
   uma ferramenta de captura por rolagem podia registrar um quadro no meio
   da transição, criando um efeito fantasma). Simplificado para o mesmo
   fade + leve subida do .rv — mais robusto, sem perder a suavidade. */
.js .lp--anim .rv--mask {
	transform: none;
}

.js .lp--anim .rv.is-vis,
.js .lp--anim .rv--mask.is-vis {
	opacity: 1;
	transform: none;
}

/* Títulos: cada linha sobe por trás de uma máscara. */
.js .lp--anim .jd .ln {
	overflow: hidden;
}

.js .lp--anim .jd .ln > i {
	display: inline-block;
	font-style: inherit;
	transform: none;
	transition: transform 1.1s var(--ease) calc(var(--i, 0) * .11s);
}

.js .lp--anim .jd.is-vis .ln > i {
	transform: translateY(0);
}

/* Listas e ícones entram em cascata. */
.js .lp--anim .icones__item,
.js .lp--anim .se__lista li,
.js .lp--anim .va__lista li,
.js .lp--anim .tipos__linha > *,
.js .lp--anim .ma__dist li,
.js .lp--anim .ma__perto li {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s var(--ease) calc(var(--i, 0) * .09s),
		transform .8s var(--ease) calc(var(--i, 0) * .09s);
}

.js .lp--anim .is-vis .icones__item,
.js .lp--anim .se__lista.is-vis li,
.js .lp--anim .va__lista.is-vis li,
.js .lp--anim .un__tipos.is-vis .tipos__linha > *,
.js .lp--anim .ma__foto.is-vis .ma__dist li,
.js .lp--anim .ma__foto.is-vis .ma__perto li {
	opacity: 1;
	transform: none;
}

/* Traços que "crescem". */
.js .lp--anim .ac__frase::before,
.js .lp--anim .mi__legenda::after,
.js .lp--anim .ma__marca-linha {
	transform: scaleY(1);
	transition: transform 1s var(--ease) .25s;
}

.js .lp--anim .mi__legenda::after {
	transform: scaleX(1);
}

.js .lp--anim .ac__frase.is-vis::before,
.js .lp--anim .ma__foto.is-vis .ma__marca-linha {
	transform: scaleY(1);
}

.js .lp--anim .mi__legenda.is-vis::after {
	transform: scaleX(1);
}

/* Indicações sobre as fotos: o traço desce e o texto aparece. */
.js .lp--anim .pin {
	opacity: 1;
	transition: opacity .6s var(--ease) calc(.25s + var(--i, 0) * .1s);
}

.js .lp--anim .pin__linha {
	transform: scaleY(1);
	transition: transform .7s var(--ease) calc(.3s + var(--i, 0) * .1s);
}

.js .lp--anim .is-vis .pin {
	opacity: 1;
}

.js .lp--anim .is-vis .pin__linha {
	transform: scaleY(1);
}

.js .lp--anim .carrossel__slide:not(.is-ativo) .pin {
	transition: none;
}

/* Movimento de entrada sem estado invisível: as mídias nunca somem. */
@keyframes aura-entrada-segura {
	from { opacity: .55; transform: translateY(calc(24 * var(--u))) scale(.987); filter: blur(2px); }
	to { opacity: 1; transform: none; filter: none; }
}
.js .lp--anim .rv.is-vis,
.js .lp--anim .jd.is-vis,
.js .lp--anim .se__lista.is-vis,
.js .lp--anim .va__lista.is-vis,
.js .lp--anim .un__tipos.is-vis,
.js .lp--anim .ma__foto.is-vis,
.js .lp--anim .icones.is-vis,
.js .lp--anim .pins.is-vis {
	animation: aura-entrada-segura 1s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.js .lp--anim .rv,
	.js .lp--anim .jd .ln > i,
	.js .lp--anim .icones__item,
	.js .lp--anim li,
	.js .lp--anim .pin,
	.js .lp--anim .pin__linha,
	.js .lp--anim .tipos__linha > * {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.hero__media img,
	.hero__media video,
	.carrossel__slide.is-ativo img,
	.play__aro,
	.hero__scroll-linha {
		animation: none !important;
	}
}

/* =========================================================
   CELULAR E TABLET (< 900 px)
   O palco vira uma coluna: tudo que estava posicionado
   passa a fluir na ordem do HTML.
========================================================= */
@media (max-width: 899px) {

	.lp {
		max-width: none;
	}

	.pal {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		padding: 56px 22px 60px;
		gap: 26px;
	}

	.pal > * {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		transform: none;
	}

	.tx,
	.pal p,
	.pal h1,
	.pal h2,
	.pal ul,
	.pal dl {
		width: 100%;
	}

	/* Corpo de texto no celular. */
	.pal p,
	.pal li,
	.pal dd,
	.pal dt {
		font-size: 15px;
		line-height: 1.75;
		letter-spacing: .06em;
	}

	/* Títulos que não usam a Jedira. */
	.pal h2:not(.jd),
	.pal h1:not(.jd) {
		font-size: 17px;
		line-height: 1.6;
		letter-spacing: .24em;
	}

	/* As entreletras largas do layout não cabem numa tela estreita. */
	.we__frase,
	.se__frase,
	.ac__frase,
	.va__frase2,
	.hero__texto {
		letter-spacing: .12em;
	}

	.jd {
		font-size: 30px;
		line-height: 1.16;
		letter-spacing: .05em;
	}

	.jd .ln {
		padding-left: 0;
	}

	.btn {
		--u: 1px;
		width: 100%;
		max-width: 320px;
		height: 54px;
		font-size: 12px;
		letter-spacing: .26em;
		text-indent: .26em;
	}

	.grafismo {
		display: none;
	}

	/* No celular as fotos voltam a ter altura pela proporção da imagem. */
	.we__bg,
	.mi__foto,
	.se__foto,
	.sq__quadra,
	.pl__palco,
	.pl__foto,
	.co__foto,
	.ac__grande,
	.carrossel--cheio .carrossel__slide {
		height: auto;
	}

	.sangra > img,
	.pl__foto img,
	.co__foto > img,
	.ac__grande-video {
		height: auto;
	}

	/* --- hero --- */
	.pal--hero {
		min-height: 100svh;
		justify-content: flex-end;
		padding: 0 22px 42px;
		gap: 20px;
	}

	.hero__media {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(1, 15, 25, .48) 0%, rgba(1, 15, 25, .2) 38%, rgba(1, 15, 25, .68) 100%);
	}

	.hero__media img,
	.hero__media video {
		height: 100%;
		object-position: 68% center;
	}

	.hero__titulo {
		position: relative;
		font-size: 44px;
		line-height: 1.02;
		letter-spacing: .1em;
		margin-top: auto;
		padding-top: 120px;
	}

	.hero__texto {
		position: relative;
		font-size: 15px;
		line-height: 1.85;
		letter-spacing: .08em;
	}

	.hero__cta,
	.hero__logo {
		position: relative;
	}

	.hero__logo {
		width: 220px;
	}

	.hero__scroll {
		display: none;
	}

	/* --- unidades --- */
	.un__chamada {
		font-size: 15px;
		line-height: 1.5;
		letter-spacing: .38em;
		text-indent: .38em;
		text-align: center;
	}

	.un__suites {
		text-align: center;
	}

	.un__suites-1 {
		font-size: 22px;
		line-height: 1.4;
		letter-spacing: .3em;
		text-indent: .3em;
	}

	.un__suites-2 {
		font-size: 15px;
		line-height: 1.6;
		letter-spacing: .1em;
		text-indent: .1em;
	}

	.tipos {
		font-size: 13.5px;
		line-height: 1.9;
		letter-spacing: .05em;
	}

	.tipos__linha {
		grid-template-columns: 1fr 1fr;
	}

	.tipos__area {
		padding-left: 22px;
	}

	.tipos__area::before {
		left: 7px;
		top: .78em;
		width: 5px;
		height: 5px;
	}

	.tipos__nota {
		padding-left: 0;
		font-size: 12px;
		text-align: center;
	}

	/* --- fotos que sangram até a borda --- */
	.we__bg,
	.mi__foto,
	.la__aerea,
	.se__foto,
	.sq__quadra,
	.ac__grande,
	.va__varanda,
	.carrossel--cheio,
	.ma__foto,
	.carrossel--areas {
		width: calc(100% + 44px);
		margin-inline: -22px;
	}

	.we__bg img,
	.mi__foto img {
		transform: none;
	}

	.we__spa,
	.we__massagem,
	.ac__esteira,
	.ac__yoga,
	.sq__raquete,
	.la__piquenique,
	.mi__casal,
	.va__mulher,
	.va__poltrona {
		width: 78%;
		align-self: center;
	}

	.we__titulo {
		text-align: center;
		color: var(--navy);
		text-shadow: none;
	}

	.icones {
		flex-wrap: wrap;
		gap: 30px 24px;
	}

	.icones__item {
		flex: 0 0 calc(50% - 12px);
		gap: 14px;
	}

	.icones__ico {
		height: 58px;
	}

	.icones__txt {
		font-size: 13px;
		letter-spacing: .06em;
		text-align: center;
		white-space: normal;
	}

	.icones--col {
		gap: 20px;
	}

	.icones--col .icones__item {
		grid-template-columns: 62px 1fr;
		gap: 0;
	}

	.icones--col .icones__ico {
		width: 46px;
		height: 30px;
	}

	.icones--col .icones__txt {
		text-align: left;
	}

	.ac__frase::before,
	.play {
		display: none;
	}

	.mi__legenda,
	.co__legenda {
		position: static;
		width: 100%;
		padding-left: 0;
		font-size: 14px;
		letter-spacing: .18em;
		color: var(--navy);
	}

	.co__legenda {
		position: absolute;
		left: 22px;
		bottom: 16px;
		width: auto;
		color: var(--areia);
	}

	.mi__legenda::after,
	.co__legenda::after {
		display: none;
	}

	/* --- indicações sobre a foto no celular --- */
	/* No celular as indicações ficam presas dentro da foto. */
	.pin {
		left: clamp(15%, var(--x), 85%);
		font-size: 9px;
		letter-spacing: .02em;
		text-indent: 0;
		max-width: 28vw;
		white-space: normal;
		line-height: 1.15;
	}

	.pin__linha {
		width: 1px;
		margin-top: 3px;
	}

	.pins--num .pin {
		font-size: 10px;
	}

	.seta {
		--u: 1px;
		width: 42px;
		height: 42px;
		background: rgba(var(--creme-rgb), .85);
		border-radius: 50%;
		color: var(--navy);
	}

	.seta__svg {
		width: 16px;
	}

	.carrossel--areas .seta--ant,
	.carrossel--cheio .seta--ant {
		left: 10px;
	}

	.carrossel--areas .seta--prox,
	.carrossel--cheio .seta--prox {
		right: 10px;
	}

	.carrossel--cheio .seta {
		width: 32px;
		height: 32px;
		opacity: .72;
		background: rgba(var(--creme-rgb), .68);
	}

	.carrossel--cheio .seta__svg {
		width: 13px;
	}

	/* --- abas das tipologias --- */
	.abas {
		gap: 6px;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 12px;
		scrollbar-width: none;
	}

	.abas::-webkit-scrollbar {
		display: none;
	}

	.abas__btn {
		font-size: 13px;
		letter-spacing: .1em;
		padding: 0 10px;
	}

	.abas__marca {
		height: 2px;
	}

	.pl__palco {
		width: calc(100% + 44px);
		margin-inline: -22px;
	}

	.pl__itens,
	.pl__ficha {
		position: static;
		width: 100%;
		padding: 0 22px;
		color: var(--navy);
		text-shadow: none;
	}

	.pl__itens {
		margin-top: 18px;
		font-size: 14px;
		line-height: 1.9;
		letter-spacing: .06em;
	}

	.pl__ficha {
		margin-top: 14px;
	}

	.pl__area {
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: .12em;
	}

	.pl__nota,
	.pl__suites {
		font-size: 13px;
		line-height: 1.6;
	}

	/* --- mapa --- */
	.ma__foto {
		position: relative;
	}

	.ma__regiao,
	.ma__marca {
		position: absolute;
	}

	.ma__regiao {
		left: 16px;
		top: 14px;
		font-size: 9px;
		letter-spacing: .24em;
		gap: 6px;
	}

	.ma__pin {
		width: 12px;
		height: 15px;
	}

	.ma__marca {
		left: 42%;
		top: 20%;
		width: 88px;
	}

	.ma__marca-linha {
		display: none;
	}

	.ma__dist,
	.ma__perto {
		position: static;
		width: 100%;
		margin-top: 22px;
		padding: 0 22px;
		color: var(--navy);
	}

	.ma__dist {
		font-size: 11px;
		line-height: 2.2;
		letter-spacing: .12em;
	}

	.ma__dist-ico {
		width: 16px;
		height: 16px;
	}

	.ma__perto {
		font-size: 14px;
		line-height: 1.7;
		letter-spacing: .02em;
	}

	.ma__perto-det {
		font-size: 11.5px;
		line-height: 1.5;
		padding-left: 14px;
	}

	.ma__perto li + li {
		margin-top: 6px;
	}

	/* --- formulário --- */
	.pal--contato {
		gap: 22px;
	}

	.fo__titulo {
		text-align: center;
	}

	.fo__marca {
		width: 240px;
		align-self: center;
	}

	.fo__input {
		height: 56px;
		padding: 0 22px;
		border-radius: 28px;
		font-size: 15px;
	}

	.fo__campo {
		margin-bottom: 12px;
	}

	.fo__seta {
		right: 20px;
		width: 16px;
		height: 16px;
	}

	.fo__aceite {
		font-size: 12.5px;
		gap: 10px;
		margin: 14px 4px 0;
	}

	.fo__aceite-caixa {
		width: 17px;
		height: 17px;
	}

	.fo__aceite-caixa::after {
		left: 5px;
		top: 1px;
		width: 5px;
		height: 9px;
		border-width: 0 2px 2px 0;
	}

	.fo__erro {
		font-size: 12.5px;
		min-height: 20px;
	}

	.btn--form {
		height: 56px;
		max-width: none;
	}

	.rodape__in {
		padding: 40px 22px 34px;
	}

	/* Acabamento da composição móvel: mesma linguagem visual do desktop,
	   mas com leitura natural em coluna e sem coordenadas do canvas fixo. */
	.sec { overflow: hidden; }
	.pal {
		padding: 50px 22px 56px;
		gap: 24px;
	}
	.pal--hero {
		min-height: 100svh;
		padding: 0 22px 38px;
		gap: 18px;
	}
	.pal .jd {
		font-size: clamp(34px, 10vw, 50px);
		line-height: 1.04;
		letter-spacing: .045em;
	}
	.pal .btn {
		align-self: center;
		width: min(100%, 320px);
	}
	.hero__titulo,
	.hero__texto,
	.hero__cta,
	.hero__logo { align-self: flex-start; }
	.hero__logo { width: min(220px, 62vw); }
	.we__bg,
	.mi__foto,
	.la__aerea,
	.se__foto,
	.sq__quadra,
	.ac__grande,
	.va__varanda,
	.carrossel--cheio,
	.carrossel--areas,
	.pl__palco,
	.ma__foto {
		width: calc(100% + 44px);
		margin-inline: -22px;
	}
	.we__spa,
	.we__massagem,
	.ac__esteira,
	.ac__yoga,
	.sq__raquete,
	.la__piquenique,
	.mi__casal,
	.va__mulher,
	.va__poltrona {
		width: min(100%, 420px);
		align-self: center;
	}
	.icones { gap: 28px 16px; }
	.icones__item { gap: 12px; }
	.co__foto img,
	.pl__foto img,
	.carrossel__foto img,
	.ma__foto > img { width: 100%; }

	/* Seções de conteúdo: ritmo compacto e leitura em blocos no celular. */
	.pal--wellness { gap: 24px; padding-block: 54px 62px; }
	.we__spa { margin-bottom: 10px; }
	.we__massagem { margin-top: 8px; }
	.pal--mirante { gap: 22px; padding-bottom: 48px; }
	.mi__icones { width: 100%; }
	.icones--col { display: flex; flex-direction: column; gap: 16px; }
	.icones--col .icones__item { width: 100%; grid-template-columns: 54px 1fr; min-height: 42px; }
	.icones--col .icones__ico { width: 42px; height: 30px; }
	.pal--areas { gap: 18px; padding: 30px 22px 38px; }
	.pal--areas .ar__cta,
	.pal--lazer .la__cta,
	.pal--plantas .pl__cta { display: flex; justify-content: center; }
	.pal--varandas { gap: 22px; padding-bottom: 54px; }
	.va__lista { display: grid; gap: 10px; padding: 18px 20px; border-left: 2px solid var(--ocre); background: rgba(var(--creme-rgb), .36); }
	.va__lista li { font-size: 14px; line-height: 1.5; letter-spacing: .06em; }
	.va__frase2 { padding: 0; font-size: 15px; line-height: 1.7; letter-spacing: .08em; }
	.pal--mapa { gap: 20px; padding-block: 48px 56px; }
	.ma__dist, .ma__perto { margin-top: 12px; }
}

/* Faixa intermediária: tablets em pé com o layout de coluna mais largo. */
@media (min-width: 620px) and (max-width: 899px) {
	.pal {
		padding-inline: 40px;
	}

	.we__bg,
	.mi__foto,
	.la__aerea,
	.se__foto,
	.sq__quadra,
	.ac__grande,
	.va__varanda,
	.carrossel--cheio,
	.ma__foto,
	.carrossel--areas,
	.pl__palco {
		width: calc(100% + 80px);
		margin-inline: -40px;
	}

	.jd {
		font-size: 40px;
	}

	.hero__titulo {
		font-size: 60px;
	}

	.icones__item {
		flex: 0 0 calc(25% - 18px);
	}

	.pin {
		font-size: 12px;
	}
}

/* =========================================================
   CELULAR ESTREITO (< 620 px)
   As fotos muito panorâmicas ficariam com 150 px de altura;
   aqui elas viram um recorte 3:2. E as indicações escritas
   sobre a foto passam a ser uma lista logo abaixo dela.
========================================================= */
@media (max-width: 619px) {

	.pl__foto img,
	.co__foto img,
	.mi__foto img,
	.we__bg img,
	.la__aerea img,
	.se__foto img,
	.carrossel--areas .carrossel__foto img,
	.ma__foto > img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	.ma__foto > img {
		aspect-ratio: 4 / 3;
	}

	/* Indicações viram legenda abaixo da foto. */
	.pins {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 16px;
		margin-top: 12px;
		padding: 0 4px;
	}

	.pin,
	.pin--baixo {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		flex-direction: row;
		align-items: center;
		max-width: none;
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: .04em;
		color: var(--navy);
		text-shadow: none;
		white-space: normal;
		text-align: left;
	}

	.pin::before {
		content: "";
		width: 5px;
		height: 5px;
		margin-right: 7px;
		border-radius: 50%;
		background: var(--ocre);
		flex: none;
	}

	.pin__linha {
		display: none;
	}

	/* Os números do mapa somem: a legenda numerada logo abaixo já explica. */
	.pins--num {
		display: none;
	}

	.ma__regiao {
		font-size: 8px;
	}
}

/* =========================================================
   COMPOSIÇÃO MOBILE FINAL
   A página de desktop usa um palco com coordenadas. Em telas
   estreitas, cada bloco abaixo ganha uma composição editorial
   própria: leitura em coluna, ritmo constante e fotos integrais.
========================================================= */
@media (max-width: 899px) {
	body { overflow-x: hidden; }

	.sec:not(.sec--hero) .pal {
		height: auto !important;
		min-height: 0 !important;
		padding: 52px 20px 60px !important;
		gap: 22px !important;
	}

	.sec:not(.sec--hero) .pal > * {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		max-width: none !important;
	}

	.sec:not(.sec--hero) figure,
	.sec:not(.sec--hero) .carrossel,
	.sec:not(.sec--hero) .pl__palco {
		margin: 0 !important;
	}

	/* Fotografias: borda a borda quando são a imagem principal; as
	   complementares ficam alinhadas ao grid interno. */
	.sangra,
	.we__bg,
	.mi__foto,
	.la__aerea,
	.se__foto,
	.sq__quadra,
	.ac__grande,
	.va__varanda,
	.carrossel--areas,
	.carrossel--cheio,
	.pl__palco,
	.ma__foto {
		width: calc(100% + 40px) !important;
		margin-inline: -20px !important;
	}

	.we__spa,
	.we__massagem,
	.ac__yoga,
	.ac__esteira,
	.sq__raquete,
	.la__piquenique,
	.mi__casal,
	.va__mulher,
	.va__poltrona {
		width: 100% !important;
		max-width: 420px !important;
		align-self: center;
	}

	.we__bg img,
	.mi__foto img,
	.la__aerea img,
	.se__foto img,
	.sq__quadra img,
	.ac__grande img,
	.ac__grande-video,
	.va__varanda img,
	.carrossel__foto img,
	.co__foto img,
	.pl__foto img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	/* Wellness: sequência curta, títulos entre as imagens e ícones em grade. */
	.pal--wellness { padding-top: 0 !important; gap: 20px !important; }
	.pal--wellness .we__bg { height: auto !important; }
	.pal--wellness .we__titulo { text-align: left; color: var(--navy); text-shadow: none; }
	.pal--wellness .we__frase { width: 100% !important; font-size: 15px; line-height: 1.7; letter-spacing: .09em; color: var(--navy); }
	.pal--wellness .we__icones,
	.pal--lazer .la__icones { width: 100% !important; }
	.pal--wellness .icones,
	.pal--lazer .icones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.pal--wellness .icones__item,
	.pal--lazer .icones__item { width: auto; min-width: 0; }

	/* Academia, squash e lazer: elimina áreas vazias e preserva respiro. */
	.pal--academia { gap: 24px !important; }
	.pal--academia .ac__grande { height: auto !important; }
	.pal--academia .ac__titulo { width: 100% !important; font-size: 17px; line-height: 1.55; letter-spacing: .18em; }
	.pal--academia .ac__frase { width: 100% !important; padding-left: 14px; font-size: 14px; line-height: 1.7; letter-spacing: .08em; }
	.pal--academia .ac__frase::before { display: block; left: 0; top: .3em; width: 2px; height: 3.3em; }
	.pal--squash { gap: 24px !important; }
	.pal--squash .sq__titulo { width: 100% !important; text-align: center; }
	.pal--squash .sq__subtitulo { width: 100% !important; margin: -8px 0 2px; color: var(--navy); font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: .07em; text-align: center; white-space: normal; text-shadow: none; }
	.pal--lazer { gap: 24px !important; }
	.pal--lazer .la__titulo { width: 100% !important; text-align: left; }
	.pal--lazer .la__cta,
	.pal--academia .ac__cta,
	.pal--areas .ar__cta,
	.pal--plantas .pl__cta { width: 100% !important; display: flex; justify-content: center; }

	/* Mirante e segurança com bloco de texto legível, sem coordenadas. */
	.pal--mirante { gap: 22px !important; }
	.pal--mirante .mi__legenda { position: relative; width: 100% !important; padding: 0 0 10px; font-size: 14px; line-height: 1.5; letter-spacing: .12em; color: var(--navy); }
	.pal--mirante .mi__legenda::after { display: block; left: 0; bottom: 0; width: 76px; height: 2px; background: var(--ocre); }
	.pal--mirante .mi__icones { width: 100% !important; }
	.pal--mirante .icones--col { display: grid; gap: 12px; }
	.pal--mirante .icones--col .icones__item { width: 100%; grid-template-columns: 48px 1fr; min-height: 38px; }
	.pal--seguranca { gap: 20px !important; }
	.pal--seguranca .se__titulo,
	.pal--seguranca .se__frase,
	.pal--seguranca .se__lista { width: 100% !important; }
	.pal--seguranca .se__titulo { text-align: left; }
	.pal--seguranca .se__frase { font-size: 15px; line-height: 1.65; letter-spacing: .1em; }
	.pal--seguranca .se__lista { display: grid; gap: 7px; padding: 18px; background: rgba(var(--creme-rgb), .42); border-left: 2px solid var(--ocre); font-size: 14px; line-height: 1.55; letter-spacing: .06em; }

	/* Carrosséis: foto limpa, navegação pequena e os pontos ficam no rodapé. */
	.carrossel--areas,
	.carrossel--cheio { overflow: hidden; }
	.carrossel--areas .carrossel__slide,
	.carrossel--cheio .carrossel__slide,
	.carrossel--cheio .co__foto { height: auto !important; }
	.carrossel--areas .carrossel__foto img,
	.carrossel--cheio .co__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
	.carrossel--areas .seta,
	.carrossel--cheio .seta {
		position: absolute !important;
		top: 50% !important;
		bottom: auto !important;
		width: 28px !important;
		height: 28px !important;
		padding: 0 !important;
		border: 1px solid rgba(var(--creme-rgb), .8);
		border-radius: 50%;
		background: rgba(3, 33, 54, .38) !important;
		color: var(--creme) !important;
		opacity: .82;
		transform: translateY(-50%) !important;
	}
	.carrossel--areas .seta--ant,
	.carrossel--cheio .seta--ant { left: 10px !important; }
	.carrossel--areas .seta--prox,
	.carrossel--cheio .seta--prox { right: 10px !important; }
	.carrossel--areas .seta__svg,
	.carrossel--cheio .seta__svg { width: 11px !important; }
	.carrossel__dots { bottom: 10px !important; gap: 6px; }
	.carrossel__dot { width: 6px !important; height: 6px !important; border-color: rgba(var(--creme-rgb), .9); background: rgba(3, 33, 54, .38); }
	.carrossel__dot.is-ativo { background: var(--creme); transform: scale(1.1); }
	.co__legenda { left: 16px; bottom: 28px; font-size: 11px; letter-spacing: .14em; }

	/* Varandas e tipologias: textos em cartões discretos, sem dispersão lateral. */
	.pal--varandas { gap: 22px !important; }
	.pal--varandas .va__titulo,
	.pal--varandas .va__frase,
	.pal--varandas .va__frase2,
	.pal--varandas .va__lista { width: 100% !important; }
	.pal--varandas .va__titulo { text-align: left; }
	.pal--varandas .va__frase,
	.pal--varandas .va__frase2 { font-size: 15px; line-height: 1.65; letter-spacing: .08em; }
	.pal--varandas .va__lista { display: grid; gap: 8px; padding: 18px; text-align: left; background: rgba(var(--creme-rgb), .42); border-left: 2px solid var(--ocre); }
	.pal--varandas .va__lista li { margin: 0 !important; font-size: 14px; line-height: 1.45; }
	.pal--plantas { gap: 22px !important; }
	.pal--plantas .abas { width: 100% !important; margin: 0 !important; padding: 0 0 12px; }
	.pal--plantas .pl__palco { height: auto !important; display: block; }
	.pal--plantas .pl__painel { display: block; position: relative; }
	.pal--plantas .pl__foto { height: auto; }
	.pal--plantas .pl__itens,
	.pal--plantas .pl__ficha { position: static !important; width: 100% !important; padding: 18px 20px !important; color: var(--navy); text-shadow: none; background: rgba(var(--creme-rgb), .5); }
	.pal--plantas .pl__itens { font-size: 14px; line-height: 1.6; letter-spacing: .06em; }
	.pal--plantas .pl__ficha { border-top: 1px solid rgba(3, 33, 54, .16); }
	.pal--plantas .pl__area { font-size: 19px; line-height: 1.35; letter-spacing: .1em; }
	.pal--plantas .pl__nota,
	.pal--plantas .pl__suites { font-size: 13px; line-height: 1.55; letter-spacing: .06em; }

	/* A nova arte do mapa traz todas as legendas: nunca a recortamos. */
	.pal--mapa { padding: 0 !important; gap: 0 !important; }
	.pal--mapa .ma__foto { width: 100% !important; margin: 0 !important; }
	.pal--mapa .ma__foto > img { display: block; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }

	/* No celular, o índice fica abaixo da foto e a thumb do vídeo segue clicável. */
	.carrossel--areas .carrossel__slide { gap: 16px; }
	.carrossel--areas .carrossel__dots { position: static; justify-content: center; margin-top: 14px; transform: none; }
	.ar__legenda { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 0; }
	.ar__cabecalho { padding-bottom: 11px; }
	.ar__cabecalho::after { width: 94px; height: 2px; }
	.ar__legenda-titulo span { font-size: 12px; line-height: 1.35; letter-spacing: .11em; }
	.ar__itens { justify-content: flex-start; gap: 7px 14px; }
	.ar__itens li { font-size: 14px; line-height: 1.45; letter-spacing: .045em; }
	.pal--areas .ar__cta { margin-top: 8px !important; }
	.pal--academia .play { display: grid !important; }
	.pal--academia .play svg { width: 66px; height: 66px; }
}

/* =========================================================
   ACABAMENTO MOBILE — MARGENS E MIRANTE
   O conteúdo nunca toca só uma lateral: todas as dobras usam
   o mesmo grid interno, inclusive fotos e carrosséis.
========================================================= */
@media (max-width: 899px) {
	html,
	body,
	.lp,
	.sec {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
	}

	.sec:not(.sec--hero) .pal {
		width: 100% !important;
		max-width: 100% !important;
		padding-inline: 20px !important;
	}

	/* No celular, a imagem principal acompanha o grid de 20 px nas
	   duas laterais. A hero continua sendo a única dobra integral. */
	.sec:not(.sec--hero) .pal > .sangra,
	.sec:not(.sec--hero) .pal > .we__bg,
	.sec:not(.sec--hero) .pal > .mi__foto,
	.sec:not(.sec--hero) .pal > .la__aerea,
	.sec:not(.sec--hero) .pal > .se__foto,
	.sec:not(.sec--hero) .pal > .sq__quadra,
	.sec:not(.sec--hero) .pal > .ac__grande,
	.sec:not(.sec--hero) .pal > .va__varanda,
	.sec:not(.sec--hero) .pal > .carrossel--areas,
	.sec:not(.sec--hero) .pal > .carrossel--cheio,
	.sec:not(.sec--hero) .pal > .pl__palco,
	.sec:not(.sec--hero) .pal > .ma__foto {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
	}

	.pal--mapa {
		gap: 20px !important;
		padding: 44px 20px 52px !important;
	}

	.pal--mapa .ma__legenda {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 0;
		width: 100% !important;
		margin: 0;
		padding: 20px 18px;
		border: 1px solid rgba(var(--navy-rgb), .16);
		background:
			radial-gradient(circle at 92% 4%, rgba(193, 141, 79, .17), transparent 30%),
			linear-gradient(135deg, #f8f4e8 0%, #e3dac2 100%);
		box-shadow: 0 16px 30px rgba(var(--navy-rgb), .1);
		color: var(--navy);
		font-size: 14px;
		line-height: 1.48;
		letter-spacing: .025em;
	}

	.pal--mapa .ma__legenda li {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 10px;
		min-height: 54px;
		padding: 10px 0;
		border-bottom: 1px solid rgba(var(--navy-rgb), .15);
	}

	.pal--mapa .ma__legenda li:nth-child(7) {
		border-bottom: 1px solid rgba(var(--navy-rgb), .15);
	}

	.pal--mapa .ma__legenda li:last-child {
		border-bottom: 0;
	}

	.pal--mapa .ma__legenda-num {
		font-size: 21px;
		line-height: 1;
	}

	/* Mirante Sunset: os três diferenciais viram cartões de leitura
	   imediata, com ícones grandes e sem o vazio entre os itens. */
	.pal--mirante {
		gap: 20px !important;
		padding-block: 42px 52px !important;
	}

	.pal--squash .sq__subtitulo {
		position: absolute !important;
		right: 14px !important;
		bottom: 14px !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		margin: 0;
		color: var(--creme);
		font-size: 12px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: .07em;
		text-align: right;
		white-space: nowrap;
		text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
	}

	.sec:not(.sec--hero) .pal--squash > .sq__quadra { position: relative !important; }

	.pal--mirante .mi__foto,
	.pal--mirante .mi__casal {
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch;
	}

	.pal--mirante .mi__legenda {
		margin-top: 2px;
		position: relative;
		padding-bottom: 10px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.pal--mirante .mi__legenda::after {
		display: block;
		left: 0;
		bottom: 0;
		width: 76px;
		height: 2px;
		background: var(--ocre);
	}

	.pal--mirante .mi__icones {
		width: 100% !important;
		margin-top: 4px;
	}

	.pal--mirante .icones--col {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 8px;
		width: 100%;
	}

	.pal--mirante .icones--col .icones__item {
		display: grid;
		grid-template-columns: 66px minmax(0, 1fr);
		align-items: center;
		gap: 14px;
		width: 100%;
		min-height: 66px;
		padding: 10px 14px;
		border: 1px solid rgba(var(--navy-rgb), .14);
		border-left: 2px solid var(--ocre);
		background: rgba(var(--creme-rgb), .38);
	}

	.pal--mirante .icones--col .icones__ico {
		width: 56px;
		height: 46px;
		color: var(--ocre);
		object-fit: contain;
		object-position: center;
	}

	.pal--mirante .icones--col .icones__txt {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: .045em;
		text-align: left;
		white-space: normal;
	}

	/* Títulos em Jedira: um pouco menores e com entrelinha mais generosa
	   para preservar a elegância das quebras no celular. */
	.pal .jd {
		font-size: clamp(30px, 8.8vw, 42px);
		line-height: 1.14;
		letter-spacing: .04em;
	}

	/* O painel inativo precisa continuar oculto no celular. A regra de
	   layout em coluna vinha sobrepondo o atributo [hidden]. */
	.pal--plantas .pl__painel[hidden] {
		display: none !important;
	}

	.pal--plantas .pl__painel:not([hidden]) {
		display: block !important;
	}
}