/* =========================================================
   HABITARE WS — estilos
   As três cores da marca vêm do Personalizar (variáveis
   injetadas em inc/setup.php). Tudo o mais é derivado delas.
========================================================= */

/* ---------------------------------------------------------
   1. FONTE
--------------------------------------------------------- */
@font-face {
	font-family: "Audrey";
	src: url("../fonts/audrey-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Audrey";
	src: url("../fonts/audrey-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Audrey";
	src: url("../fonts/audrey-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Audrey é uma fonte de display: bonita em títulos, cansativa em texto
   corrido. O corpo da página roda em Archivo, que tem m² e os ordinais. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------
   2. TOKENS
--------------------------------------------------------- */
:root {
	--verde: #444412;
	--verde-rgb: 68, 68, 18;
	--verde-fundo: #2d2d0c;
	--dourado: #a4814d;
	--dourado-rgb: 164, 129, 77;
	--areia: #f7eee2;
	--areia-rgb: 247, 238, 226;
	--areia-clara: #fbf5ee;

	--erro: #9b2c22;
	--ok: #4f7a3f;

	--ff-titulo: "Audrey", "Optima", "Gill Sans", "Palatino", serif;
	--ff: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Audrey nasce com entressilhas muito largas: sem isso, os títulos
	   parecem escritos com espaço entre as letras. */
	--tracking-titulo: -.04em;
	--gutter: clamp(20px, 5vw, 76px);
	--topo-h: 88px;
	--r: 2px;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-suave: cubic-bezier(.4, 0, .2, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--topo-h) + 12px);
}

body {
	margin: 0;
	background: var(--areia);
	color: var(--verde);
	font-family: var(--ff);
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.66;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 700; }

:focus-visible {
	outline: 2px solid var(--dourado);
	outline-offset: 4px;
	border-radius: 1px;
}

::selection { background: rgba(var(--dourado-rgb), .28); }

.skip-link {
	position: absolute;
	left: 12px;
	top: -80px;
	z-index: 1000;
	padding: 12px 22px;
	background: var(--verde);
	color: var(--areia);
	font-weight: 500;
	letter-spacing: .06em;
}
.skip-link:focus { top: 12px; }

/* Texto que só os leitores de tela leem. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.container {
	width: min(100% - 2 * var(--gutter), 1180px);
	margin-inline: auto;
}
.container--largo { width: min(100% - 2 * var(--gutter), 1420px); }

/* ---------------------------------------------------------
   4. TIPOGRAFIA
--------------------------------------------------------- */
.eyebrow {
	margin-bottom: 22px;
	color: var(--dourado);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1.4;
	text-transform: uppercase;
}
.eyebrow--claro { color: rgba(var(--areia-rgb), .88); }
.eyebrow--dourado { color: var(--dourado); }

.titulo {
	font-family: var(--ff-titulo);
	font-size: clamp(2rem, 1.15rem + 2.7vw, 3.35rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: var(--tracking-titulo);
	text-wrap: balance;
	max-width: 19ch;
}
.titulo--display {
	font-size: clamp(2.25rem, 1.1rem + 3.7vw, 4.2rem);
	line-height: 1.06;
	max-width: 17ch;
}
.titulo--claro { color: var(--areia); }

.texto {
	margin-top: 22px;
	max-width: 58ch;
	color: rgba(var(--verde-rgb), .82);
	text-wrap: balance;
}
.texto + .texto { margin-top: .85em; }
.texto--claro { color: rgba(var(--areia-rgb), .8); }
.texto--grande { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); }
.texto--apoio {
	margin-top: 18px;
	color: var(--dourado);
	font-weight: 500;
	letter-spacing: .01em;
}

/* ---------------------------------------------------------
   5. BOTÕES
--------------------------------------------------------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: var(--r);
	font-size: .74rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: color .45s var(--ease-suave), border-color .45s var(--ease-suave), transform .5s var(--ease);
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 19px; height: 19px; flex: none; transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn--largo { width: 100%; }

.btn--dourado {
	background: var(--dourado);
	border-color: var(--dourado);
	color: #fff;
}
.btn--dourado::before { background: var(--verde); }
.btn--dourado:hover { color: var(--areia); border-color: var(--verde); }

.btn--verde {
	background: var(--verde);
	border-color: var(--verde);
	color: var(--areia);
}
.btn--verde::before { background: var(--dourado); }
.btn--verde:hover { color: #fff; border-color: var(--dourado); }

.btn--linha {
	border-color: rgba(var(--verde-rgb), .35);
	color: var(--verde);
}
.btn--linha::before { background: var(--verde); }
.btn--linha:hover { color: var(--areia); border-color: var(--verde); }

.btn--linha-claro {
	border-color: rgba(var(--areia-rgb), .5);
	color: var(--areia);
}
.btn--linha-claro::before { background: var(--areia); }
.btn--linha-claro:hover { color: var(--verde); border-color: var(--areia); }

/* Setas redondas do carrossel. */
.seta {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(var(--verde-rgb), .3);
	border-radius: 50%;
	color: var(--verde);
	transition: background-color .4s var(--ease-suave), color .4s var(--ease-suave), border-color .4s, opacity .3s;
}
.seta .ico { width: 20px; height: 20px; }
.seta:hover { background: var(--verde); border-color: var(--verde); color: var(--areia); }
.seta[disabled] { opacity: .28; pointer-events: none; }

/* ---------------------------------------------------------
   6. BARRA DE PROGRESSO E TOPO
--------------------------------------------------------- */
.progresso {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: 2px;
	pointer-events: none;
}
.progresso span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--dourado);
	transform: scaleX(0);
	transform-origin: left;
}

.topo {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	/* Fundo areia desde o topo: sobre a foto da primeira dobra o menu
	   disputava atenção com o título. */
	background: var(--areia);
	transition: transform .55s var(--ease), box-shadow .45s;
}
.topo__inner {
	/* O menu do celular é irmão deste bloco dentro do <header>: sem um
	   empilhamento próprio, o painel passaria por cima das logos. */
	position: relative;
	z-index: 1;
	height: var(--topo-h);
	display: flex;
	align-items: center;
	gap: clamp(16px, 4vw, 48px);
	padding-inline: var(--gutter);
	transition: height .45s var(--ease);
}

.topo__marca { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex: none; }
.topo__logo { display: block; }
.topo__logo img { height: clamp(30px, 4.4vw, 42px); width: auto; }

/* Logo da incorporadora primeiro, separada da do empreendimento por um fio. */
.topo__idibra {
	display: flex;
	align-items: center;
	padding-right: clamp(14px, 2vw, 26px);
	border-right: 1px solid rgba(var(--verde-rgb), .22);
}
.topo__idibra img { height: clamp(20px, 2.8vw, 28px); width: auto; }

.topo__nav {
	display: none;
	margin-left: auto;
	gap: clamp(18px, 2.4vw, 36px);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(var(--verde-rgb), .8);
}
.topo__nav a { position: relative; padding-block: 6px; }
.topo__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--ease);
}
.topo__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.topo__btn {
	display: none;
	margin-left: auto;
	min-height: 46px;
	padding-inline: 22px;
	border-color: rgba(var(--verde-rgb), .35);
	color: var(--verde);
	font-size: .72rem;
}
.topo__btn::before { background: var(--verde); }
.topo__btn:hover { color: var(--areia); border-color: var(--verde); }

/* Só ganha sombra depois que a página começa a rolar. */
.topo.is-solido {
	box-shadow: 0 1px 0 rgba(var(--verde-rgb), .12), 0 18px 40px -34px rgba(var(--verde-rgb), .6);
}
.topo.is-solido .topo__inner { height: 72px; }

.topo.is-oculto { transform: translateY(-100%); }

.admin-bar .topo { top: 32px; }
.admin-bar .progresso { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .topo,
	.admin-bar .progresso { top: 46px; }
}

@media (min-width: 1080px) {
	.topo__nav { display: flex; }
	.topo__btn { margin-left: 0; display: inline-flex; }
}

/* ---------------------------------------------------------
   6b. MENU DO CELULAR
--------------------------------------------------------- */
.topo__hamburguer {
	display: grid;
	gap: 6px;
	margin-left: auto;
	padding: 12px 4px;
	flex: none;
}
.topo__hamburguer-traco {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--verde);
	transition: transform .45s var(--ease), opacity .3s;
}
/* Os dois traços viram um X. */
.topo__hamburguer[aria-expanded="true"] .topo__hamburguer-traco:first-child {
	transform: translateY(4px) rotate(45deg);
}
.topo__hamburguer[aria-expanded="true"] .topo__hamburguer-traco:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

.menu {
	position: fixed;
	inset: 0;
	/* Fica atrás da barra (que é irmã dele) e à frente da página, porque o
	   <header> inteiro já está num z-index alto. */
	z-index: 0;
	display: grid;
	align-content: start;
	gap: clamp(28px, 5vw, 44px);
	padding: calc(var(--topo-h) + clamp(32px, 7vw, 56px)) var(--gutter) 48px;
	background: var(--areia);
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity .4s var(--ease-suave), transform .5s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-aberto { opacity: 1; transform: none; }

.menu__nav {
	display: grid;
	gap: clamp(14px, 3vw, 22px);
}
.menu__nav a {
	font-family: var(--ff-titulo);
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.2rem);
	letter-spacing: var(--tracking-titulo);
	line-height: 1.1;
	color: var(--verde);
	padding-bottom: clamp(14px, 3vw, 22px);
	border-bottom: 1px solid rgba(var(--verde-rgb), .14);
}
.menu__btn { justify-self: start; }

/* Enquanto o menu está aberto, a página atrás não rola. */
body.menu-aberto { overflow: hidden; }

@media (min-width: 1080px) {
	.topo__hamburguer { display: none; }
	.menu { display: none; }
}

/* ---------------------------------------------------------
   7. SEÇÕES E TEXTURAS
--------------------------------------------------------- */
.secao {
	position: relative;
	padding-block: clamp(78px, 9vw, 150px);
	overflow: hidden;
}
.secao--areia { background: var(--areia); color: var(--verde); }
.secao--verde { background: var(--verde-fundo); color: var(--areia); }

.secao__cabecalho { margin-bottom: clamp(44px, 5vw, 76px); }
.secao__cabecalho--centro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.secao__cabecalho--centro .titulo { max-width: 22ch; }

/* Folhagem da identidade: máscara em cima da cor do texto, então acompanha
   qualquer paleta. Fica só nas seções escuras e bem no limite do perceptível —
   é textura de papel, não estampa. */
.tem-textura .secao--verde::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: currentColor;
	opacity: .013;
	-webkit-mask: url("../img/tex-ramos.png") repeat;
	mask: url("../img/tex-ramos.png") repeat;
	-webkit-mask-size: 560px auto;
	mask-size: 560px auto;
}

/* Nas seções claras, um único ramo discreto na lateral, com as pontas
   dissolvendo — sem virar papel de parede atrás do conteúdo. */
.tem-textura .secao--areia::after {
	content: "";
	position: absolute;
	top: 6%;
	right: calc(var(--gutter) * -.4);
	width: clamp(90px, 12vw, 170px);
	height: 62%;
	pointer-events: none;
	background: var(--dourado);
	opacity: .1;
	-webkit-mask:
		url("../img/vinha.png") no-repeat center / contain,
		linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
	mask:
		url("../img/vinha.png") no-repeat center / contain,
		linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
@media (max-width: 900px) {
	.tem-textura .secao--areia::after { display: none; }
}

/* ---------------------------------------------------------
   8. ANIMAÇÕES DE ENTRADA
--------------------------------------------------------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1.05s var(--ease) var(--atraso, 0ms),
		transform 1.05s var(--ease) var(--atraso, 0ms);
}
.js [data-reveal].is-visivel {
	opacity: 1;
	transform: none;
}

/* Título entra palavra por palavra, saindo de dentro da linha. */
.palavra {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .12em;
	margin-bottom: -.12em;
}
.js [data-titulo] .palavra > i {
	display: inline-block;
	font-style: inherit;
	transform: translateY(110%);
	transition: transform 1.1s var(--ease) calc(var(--i, 0) * 55ms);
}
.js [data-titulo].is-visivel .palavra > i { transform: none; }

/* Enquanto o JS não separa as palavras, o título fica invisível por um
   instante; sem JS ele aparece normalmente. */
.js [data-titulo]:not(.is-pronto) { opacity: 0; }
.js [data-titulo].is-pronto { opacity: 1; }

/* ---------------------------------------------------------
   9. HERO
--------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100svh - var(--topo-h));
	margin-top: var(--topo-h);
	padding-top: 40px;
	padding-bottom: clamp(24px, 4vw, 44px);
	background: var(--verde-fundo);
	color: var(--areia);
	overflow: hidden;
}

.hero__fundo {
	position: absolute;
	inset: -6% 0;
	z-index: 0;
	will-change: transform;
}
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(1.15);
	animation: hero-zoom 2.6s var(--ease) both;
}
@keyframes hero-zoom {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}

/* Três camadas: escurece a base (onde fica o texto), o topo (onde fica o
   menu) e o lado esquerdo, deixando o miolo da imagem limpo. */
.hero__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(20, 20, 6, .92) 0%, rgba(20, 20, 6, .78) 26%, rgba(20, 20, 6, .48) 50%, rgba(20, 20, 6, .14) 72%, rgba(20, 20, 6, 0) 88%),
		linear-gradient(to bottom, rgba(20, 20, 6, .6) 0%, rgba(20, 20, 6, .16) 16%, rgba(20, 20, 6, 0) 30%),
		linear-gradient(to right, rgba(20, 20, 6, .6) 0%, rgba(20, 20, 6, .3) 40%, rgba(20, 20, 6, 0) 78%);
}

.hero__conteudo {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-bottom: clamp(32px, 5vw, 56px);
}

.hero__titulo {
	max-width: 16ch;
	font-family: var(--ff-titulo);
	font-size: clamp(2.35rem, 1.1rem + 4.3vw, 4.6rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: var(--tracking-titulo);
	text-wrap: balance;
}

.hero__subtitulo {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: 20px;
	max-width: 30ch;
	color: var(--areia);
	font-family: var(--ff-titulo);
	font-size: clamp(1.15rem, .95rem + .85vw, 1.6rem);
	line-height: 1.22;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.hero__subtitulo::before {
	content: "";
	flex: none;
	width: clamp(26px, 4vw, 52px);
	height: 1px;
	background: var(--dourado);
	transform: translateY(-.4em);
}

/* Lista, não frase corrida: cada argumento quebra inteiro. */
.hero__apoio {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin-top: 26px;
	max-width: min(54rem, 100%);
	color: rgba(var(--areia-rgb), .88);
	font-size: clamp(.95rem, .92rem + .3vw, 1.05rem);
	line-height: 1.45;
}
.hero__apoio li { display: flex; align-items: baseline; }

/* O ponto fica DEPOIS do argumento: quando a lista quebra de linha, um ponto
   antes deixaria a linha de baixo começando com o separador. */
.hero__apoio li:not(:last-child)::after {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	margin-inline: 16px;
	border-radius: 50%;
	background: var(--dourado);
	transform: translateY(-.3em);
}

/* No celular a linha vira lista empilhada, com um traço à esquerda de cada
   argumento — inclusive do primeiro. */
@media (max-width: 720px) {
	.hero__apoio { display: grid; gap: 7px; }
	.hero__apoio li:not(:last-child)::after { display: none; }
	.hero__apoio li::before {
		content: "";
		flex: none;
		width: 10px;
		height: 1px;
		margin-right: 12px;
		background: var(--dourado);
		transform: translateY(-.35em);
	}
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.hero__rodape {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(var(--areia-rgb), .18);
}

.hero__rolar {
	display: flex;
	align-items: center;
	gap: 14px;
	color: rgba(var(--areia-rgb), .72);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: color .4s;
}
.hero__rolar:hover { color: var(--areia); }
.hero__rolar-linha {
	position: relative;
	display: block;
	width: 46px;
	height: 1px;
	background: rgba(var(--areia-rgb), .3);
	overflow: hidden;
}
.hero__rolar-linha::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dourado);
	animation: correr 2.4s var(--ease-suave) infinite;
}
@keyframes correr {
	0% { transform: translateX(-100%); }
	60%, 100% { transform: translateX(100%); }
}

.hero__realizacao {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(var(--areia-rgb), .6);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: right;
}
.hero__realizacao strong { color: var(--areia); font-weight: 500; letter-spacing: .2em; }
.hero__realizacao img { height: 26px; width: auto; }

@media (max-width: 640px) {
	.hero__rolar-texto { display: none; }
	.hero__realizacao { font-size: .64rem; }
}

/* ---------------------------------------------------------
   10. BARRA DE NÚMEROS
--------------------------------------------------------- */
.numeros {
	position: relative;
	z-index: 3;
	padding-block: clamp(44px, 5vw, 76px);
	background: var(--verde);
	color: var(--areia);
}
.numeros__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(28px, 4vw, 44px) 0;
}
.numeros__item {
	padding-inline: clamp(6px, 2.4vw, 32px);
	text-align: center;
}
.numeros__item + .numeros__item { border-left: 1px solid rgba(var(--areia-rgb), .18); }
.numeros__item:nth-child(3) { border-left: 0; }

.numeros__valor {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	color: var(--areia);
	font-family: var(--ff-titulo);
	font-size: clamp(1.5rem, .85rem + 2.6vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.02em;
}
.numeros__valor em {
	font-style: normal;
	font-size: .46em;
	color: var(--dourado);
}
.numeros__texto {
	margin-top: 12px;
	color: rgba(var(--areia-rgb), .72);
	font-size: clamp(.7rem, .62rem + .3vw, .82rem);
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	text-wrap: balance;
}

@media (min-width: 820px) {
	.numeros__lista { grid-template-columns: repeat(4, 1fr); }
	.numeros__item:nth-child(3) { border-left: 1px solid rgba(var(--areia-rgb), .18); }
}

/* ---------------------------------------------------------
   11. MOLDURAS DE IMAGEM
--------------------------------------------------------- */
.moldura {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 4 / 3;
	background: rgba(var(--verde-rgb), .08);
}
/* Mesma proporção da foto da recepção da Idibra: nada é cortado. */
.moldura--alta { aspect-ratio: 3 / 4; }
.moldura--sangra { aspect-ratio: 5 / 4; }
.moldura--esquerda { aspect-ratio: 5 / 4; }
@media (min-width: 1000px) {
	.moldura--sangra { aspect-ratio: 4 / 5; }
	.moldura--esquerda { aspect-ratio: 5 / 5.4; }
}
.moldura__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}


/* Cortina que revela a imagem quando ela entra na tela. */
.js [data-reveal] .moldura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--areia);
	transform-origin: bottom;
	transition: transform 1.2s var(--ease) 120ms;
}
.js .secao--verde [data-reveal] .moldura::before,
.js [data-reveal] .moldura::before { background: var(--dourado); }
.js [data-reveal].is-visivel .moldura::before { transform: scaleY(0); }

/* ---------------------------------------------------------
   12. LOCALIZAÇÃO
--------------------------------------------------------- */
.localizacao__cabecalho {
	display: grid;
	gap: clamp(20px, 3vw, 44px);
	margin-bottom: clamp(36px, 4.5vw, 60px);
}
.localizacao__cabecalho .texto { margin-top: 0; max-width: 46ch; }

/* O mapa tem os nomes dos pontos escritos em corpo pequeno: entra inteiro,
   na largura toda e sem recorte — numa coluna estreita ficaria ilegível. */
.localizacao__mapa {
	border-radius: var(--r);
	overflow: hidden;
	background: rgba(var(--verde-rgb), .06);
}
.localizacao__mapa-botao {
	position: relative;
	display: block;
	width: 100%;
}
.localizacao__mapa-img {
	display: block;
	width: 100%;
	height: auto;
}
.localizacao__mapa-lupa {
	position: absolute;
	right: clamp(12px, 2vw, 20px);
	bottom: clamp(12px, 2vw, 20px);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border-radius: var(--r);
	background: rgba(var(--verde-rgb), .9);
	color: var(--areia);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .4s var(--ease-suave);
}
.localizacao__mapa-lupa .ico { width: 16px; height: 16px; }
.localizacao__mapa-botao:hover .localizacao__mapa-lupa { background: var(--verde); }

.localizacao__rodape {
	display: grid;
	gap: clamp(32px, 4vw, 52px);
	margin-top: clamp(36px, 4.5vw, 56px);
}

.distancias {
	display: grid;
	column-gap: clamp(26px, 3.4vw, 52px);
	border-top: 1px solid rgba(var(--verde-rgb), .18);
}
.distancias__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding-block: 12px;
	border-bottom: 1px solid rgba(var(--verde-rgb), .18);
}
.distancias__nome {
	font-size: .96rem;
	color: rgba(var(--verde-rgb), .88);
}
.distancias__valor {
	flex: none;
	color: var(--dourado);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}
.localizacao__acao { justify-self: start; }

@media (min-width: 620px) {
	.distancias { grid-template-columns: 1fr 1fr; }
	/* Com duas colunas, a primeira linha da segunda também precisa de borda. */
	.distancias__item:nth-child(2) { border-top: 0; }
}

@media (min-width: 1000px) {
	.localizacao__cabecalho {
		grid-template-columns: 1.1fr 1fr;
		align-items: end;
	}
	.localizacao__rodape {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.distancias { grid-template-columns: repeat(3, 1fr); }
	.localizacao__acao { justify-self: end; }
}

/* ---------------------------------------------------------
   13. CONCEITO
--------------------------------------------------------- */
.conceito {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(92svh, 820px);
	padding-block: clamp(90px, 12vw, 170px);
	background: var(--verde-fundo);
	color: var(--areia);
	overflow: hidden;
}
.conceito__fundo { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.conceito__img { width: 100%; height: 100%; object-fit: cover; }

/* Escurece de baixo para cima e pela esquerda, o suficiente para o texto ler
   sem apagar a foto — o cliente pediu a sombra mais leve que a primeira versão. */
.conceito__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(16, 16, 5, .72) 0%, rgba(16, 16, 5, .36) 32%, rgba(16, 16, 5, .02) 70%),
		linear-gradient(to right, rgba(16, 16, 5, .7) 0%, rgba(16, 16, 5, .5) 24%, rgba(16, 16, 5, .14) 50%, rgba(16, 16, 5, 0) 72%);
}

.conceito .container { position: relative; z-index: 2; }

.conceito__conteudo {
	max-width: 30rem;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid rgba(var(--dourado-rgb), .6);
}
.conceito__conteudo .titulo { max-width: 14ch; }
.conceito__conteudo .texto { max-width: 42ch; }
.conceito__conteudo .texto:first-of-type { margin-top: 26px; }

/* ---------------------------------------------------------
   14. PILOTIS
--------------------------------------------------------- */
.pilotis { padding-left: 0; }
.pilotis__grade {
	display: grid;
	gap: clamp(40px, 5vw, 64px);
}
.pilotis__texto { padding-inline: var(--gutter); }
.marcadores { margin-top: 36px; display: grid; gap: 0; }
.marcadores li {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding-block: 15px;
	border-top: 1px solid rgba(var(--areia-rgb), .16);
	font-size: 1.02rem;
	--atraso: calc(var(--ordem, 0) * 90ms);
}
.marcadores li:last-child { border-bottom: 1px solid rgba(var(--areia-rgb), .16); }
.marcadores__n {
	flex: none;
	color: var(--dourado);
	font-family: var(--ff-titulo);
	font-size: .92rem;
	letter-spacing: .04em;
}

/* Espelha a localização: lá a foto sangra à direita, aqui à esquerda.
   É esse vaivém que tira a página do desenho de blocos centralizados. */
@media (min-width: 1000px) {
	.pilotis__grade {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 560px)
			max(var(--gutter), (100vw - 1420px) / 2);
		column-gap: clamp(36px, 4vw, 68px);
		align-items: center;
	}
	.pilotis__figura { grid-column: 1; }
	.pilotis__texto { grid-column: 2; padding-inline: 0; }
}

/* ---------------------------------------------------------
   15. GALERIA DE LAZER
--------------------------------------------------------- */
.galeria { position: relative; }

.galeria__abas {
	position: relative;
	display: flex;
	gap: clamp(18px, 3vw, 40px);
	margin-bottom: clamp(30px, 3.5vw, 46px);
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(var(--verde-rgb), .16);
	overflow-x: auto;
	scrollbar-width: none;
}
.galeria__abas::-webkit-scrollbar { display: none; }

.galeria__aba {
	flex: none;
	color: rgba(var(--verde-rgb), .5);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .4s var(--ease-suave);
}
.galeria__aba:hover { color: rgba(var(--verde-rgb), .8); }
.galeria__aba.is-ativa { color: var(--verde); }

.galeria__abas-marca {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 0;
	background: var(--dourado);
	transition: transform .6s var(--ease), width .6s var(--ease);
}

.galeria__painel[hidden] { display: none; }
.galeria__painel {
	animation: painel-entra .7s var(--ease) both;
}
@keyframes painel-entra {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.galeria__trilho {
	display: flex;
	gap: clamp(14px, 1.6vw, 24px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
	/* A suavidade da rolagem fica só no JS (scrollBy com behavior: "smooth").
	   Declarada aqui, ela também capturaria o arrasto e a rolagem por toque. */
	scroll-behavior: auto;
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__trilho.is-arrastando { cursor: grabbing; }

.cartao {
	flex: 0 0 auto;
	width: clamp(240px, 78vw, 300px);
	scroll-snap-align: start;
}
.cartao__botao { display: block; width: 100%; text-align: left; }
.cartao__moldura {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 4 / 3;
	background: rgba(var(--verde-rgb), .08);
}
.cartao__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease), filter .6s;
}
.cartao__lupa {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(var(--verde-rgb), .42);
	opacity: 0;
	transition: opacity .5s var(--ease-suave);
}
.cartao__lupa .ico {
	width: 34px;
	height: 34px;
	color: var(--areia);
	transform: scale(.82);
	transition: transform .5s var(--ease);
}
.cartao__botao:hover .cartao__img,
.cartao__botao:focus-visible .cartao__img { transform: scale(1.06); }
.cartao__botao:hover .cartao__lupa,
.cartao__botao:focus-visible .cartao__lupa { opacity: 1; }
.cartao__botao:hover .cartao__lupa .ico { transform: none; }

.cartao__titulo {
	display: block;
	margin-top: 16px;
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--verde);
}

.galeria__controles {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(26px, 3vw, 38px);
}
.galeria__barra {
	flex: 1;
	height: 1px;
	background: rgba(var(--verde-rgb), .16);
	overflow: hidden;
}
.galeria__barra span {
	display: block;
	height: 100%;
	width: 30%;
	background: var(--dourado);
	transform-origin: left;
	transition: transform .35s var(--ease-suave), width .35s var(--ease-suave);
}
.galeria__setas { display: flex; gap: 10px; }

@media (min-width: 700px) {
	.cartao { width: clamp(300px, 40vw, 380px); }
}
@media (max-width: 699px) {
	.galeria__setas { display: none; }
}

/* ---------------------------------------------------------
   16. PLANTAS
--------------------------------------------------------- */
.plantas__lista {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
}
.planta {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.4vw, 32px);
	background: rgba(var(--areia-rgb), .05);
	border: 1px solid rgba(var(--areia-rgb), .16);
	border-radius: var(--r);
	transition: background-color .6s var(--ease-suave), border-color .6s var(--ease-suave), transform .7s var(--ease);
}
.planta:hover {
	background: rgba(var(--areia-rgb), .08);
	border-color: rgba(var(--dourado-rgb), .55);
	transform: translateY(-6px);
}

.planta__imagem {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--areia);
}
.planta__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(10px, 1.6vw, 22px);
	transition: transform 1.1s var(--ease);
}
.planta__imagem:hover .planta__img { transform: scale(1.04); }

.planta__ampliar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(100%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	background: rgba(var(--verde-rgb), .92);
	color: var(--areia);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .45s var(--ease-suave), transform .45s var(--ease);
}
.planta__ampliar .ico { width: 15px; height: 15px; }
.planta__imagem:hover .planta__ampliar,
.planta__imagem:focus-visible .planta__ampliar { opacity: 1; transform: none; }

.planta__dados { margin-top: 26px; }
.planta__area {
	color: var(--dourado);
	font-family: var(--ff-titulo);
	font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
	line-height: 1;
	letter-spacing: -.025em;
}
.planta__titulo {
	margin-top: 8px;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--areia);
}
.planta__itens {
	margin-top: 20px;
	display: grid;
	gap: 9px;
	color: rgba(var(--areia-rgb), .8);
	font-size: .98rem;
}
.planta__itens li {
	position: relative;
	padding-left: 20px;
}
.planta__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 8px;
	height: 1px;
	background: var(--dourado);
}

.plantas__rodape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	margin-top: clamp(40px, 5vw, 64px);
	text-align: center;
}
.plantas__apoio { margin-top: 0; max-width: 46ch; text-wrap: balance; }

@media (min-width: 800px) {
	.plantas__lista { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   17. DIFERENCIAIS
--------------------------------------------------------- */
.diferenciais__lista { display: grid; gap: 0; }
.diferencial {
	border-top: 1px solid rgba(var(--verde-rgb), .16);
	--atraso: calc(var(--ordem, 0) * 110ms);
}
.diferencial:last-child { border-bottom: 1px solid rgba(var(--verde-rgb), .16); }

.diferencial__topo {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding-block: 22px;
	text-align: left;
}
.diferencial__icone { flex: none; color: var(--dourado); }
.diferencial__icone .ico { width: 28px; height: 28px; }
.diferencial__titulo {
	flex: 1;
	font-size: 1.12rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.diferencial__mais {
	display: none;
	flex: none;
	color: var(--dourado);
	transition: transform .5s var(--ease);
}
.js .diferencial__mais { display: block; }
.diferencial__mais .ico { width: 22px; height: 22px; }
.diferencial.is-aberto .diferencial__mais { transform: rotate(45deg); }

.diferencial__corpo {
	display: grid;
	grid-template-rows: 1fr;
}
/* Fechado só quando há JavaScript para reabrir. */
.js .diferencial__corpo {
	grid-template-rows: 0fr;
	transition: grid-template-rows .6s var(--ease);
}
.js .diferencial.is-aberto .diferencial__corpo { grid-template-rows: 1fr; }
.diferencial__itens { overflow: hidden; }
.diferencial__itens li {
	position: relative;
	padding: 0 0 12px 22px;
	color: rgba(var(--verde-rgb), .82);
	text-wrap: balance;
}
.diferencial__itens li:first-child { padding-top: 2px; }
.diferencial__itens li:last-child { padding-bottom: 26px; }
.diferencial__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 9px;
	height: 1px;
	background: var(--dourado);
}

/* No computador as três colunas ficam abertas, sem acordeão. */
@media (min-width: 900px) {
	.diferenciais__lista {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(28px, 3.4vw, 56px);
	}
	.diferencial {
		border-top: 0;
		border-bottom: 0 !important;
		padding-top: 30px;
		border-top: 1px solid rgba(var(--verde-rgb), .2);
	}
	.diferencial__topo { padding-top: 0; cursor: default; }
	.js .diferencial__mais { display: none; }
	.js .diferencial__corpo { grid-template-rows: 1fr; }
	.diferencial__itens li:last-child { padding-bottom: 0; }
}

/* ---------------------------------------------------------
   18. QUEM CONSTRÓI
--------------------------------------------------------- */
.construtora__grade {
	display: grid;
	gap: clamp(40px, 5vw, 76px);
	align-items: center;
}
.construtora__logo img { height: clamp(34px, 5vw, 48px); width: auto; margin-bottom: 24px; }

.construtora__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid rgba(var(--verde-rgb), .16);
}
.construtora__marcas li { --atraso: calc(var(--ordem, 0) * 120ms); }
.construtora__numero {
	color: var(--dourado);
	font-family: var(--ff-titulo);
	font-size: clamp(2.2rem, 1.4rem + 2.3vw, 3.2rem);
	line-height: 1;
	letter-spacing: -.025em;
}
.construtora__legenda {
	margin-top: 10px;
	font-size: .8rem;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(var(--verde-rgb), .7);
}
.construtora__selos { margin-top: 34px; }
.construtora__selos img { max-height: 64px; width: auto; }

@media (min-width: 900px) {
	.construtora__grade { grid-template-columns: 1.05fr .85fr; }
}

/* ---------------------------------------------------------
   19. FORMULÁRIO
--------------------------------------------------------- */
.formulario__caixa {
	display: grid;
	gap: clamp(36px, 4.5vw, 64px);
	align-items: start;
}
.formulario__cabecalho .texto { max-width: 42ch; }

.form { display: grid; gap: 18px; }
.form__armadilha {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.campo { position: relative; }
.campo input,
.campo select {
	width: 100%;
	height: 58px;
	padding: 22px 16px 8px;
	border: 0;
	border-bottom: 1px solid rgba(var(--areia-rgb), .32);
	border-radius: 0;
	background: rgba(var(--areia-rgb), .05);
	color: var(--areia);
	font-size: 1rem;
	transition: border-color .4s, background-color .4s;
}
.campo select { padding-top: 8px; appearance: none; }
.campo input:focus,
.campo select:focus {
	outline: none;
	border-bottom-color: var(--dourado);
	background: rgba(var(--areia-rgb), .09);
}
.campo label {
	position: absolute;
	left: 16px;
	top: 18px;
	color: rgba(var(--areia-rgb), .78);
	font-size: 1rem;
	pointer-events: none;
	transition: transform .35s var(--ease), font-size .35s var(--ease), color .35s;
	transform-origin: left top;
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label {
	transform: translateY(-12px) scale(.74);
	color: var(--dourado);
}
.campo__seta {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	color: var(--dourado);
	pointer-events: none;
}
.campo select option { color: #222; }

.campo.is-invalido input,
.campo.is-invalido select { border-bottom-color: var(--erro); }

/* Pergunta "cliente ou corretor?": duas opções lado a lado, no mesmo peso
   visual dos outros campos. */
.form__perfil {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
}
.form__perfil legend {
	padding: 0 0 12px;
	color: rgba(var(--areia-rgb), .78);
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.form__opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao { display: flex; }
.opcao input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.opcao label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border: 1px solid rgba(var(--areia-rgb), .3);
	border-radius: var(--r);
	background: rgba(var(--areia-rgb), .05);
	color: rgba(var(--areia-rgb), .82);
	font-size: .92rem;
	cursor: pointer;
	transition: border-color .35s, background-color .35s, color .35s;
}
.opcao label::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: box-shadow .3s, border-color .3s;
}
.opcao input:checked + label {
	border-color: var(--dourado);
	background: rgba(var(--dourado-rgb), .16);
	color: var(--areia);
}
.opcao input:checked + label::before {
	border-color: var(--dourado);
	box-shadow: inset 0 0 0 4px var(--dourado);
}
.opcao input:focus-visible + label { outline: 2px solid var(--dourado); outline-offset: 3px; }

.form__aceite { display: flex; margin-top: 4px; }
.form__aceite label {
	display: flex;
	gap: 14px;
	cursor: pointer;
	font-size: .82rem;
	line-height: 1.55;
	color: rgba(var(--areia-rgb), .82);
	text-wrap: pretty;
}
.form__aceite input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.form__caixa {
	flex: none;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1px solid rgba(var(--areia-rgb), .45);
	transition: background-color .3s, border-color .3s;
}
.form__caixa::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--verde);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .3s var(--ease);
}
.form__aceite input:checked + label .form__caixa {
	background: var(--dourado);
	border-color: var(--dourado);
}
.form__aceite input:checked + label .form__caixa::after { transform: rotate(45deg) scale(1); }
.form__aceite input:focus-visible + label .form__caixa { outline: 2px solid var(--dourado); outline-offset: 3px; }
.form__aceite strong { display: block; color: var(--areia); font-weight: 500; }
.form__lgpd { display: block; margin-top: 5px; font-size: .78rem; line-height: 1.6; opacity: .72; }
.form__aceite.is-invalido .form__caixa { border-color: var(--erro); }

.form.is-enviando { opacity: .72; pointer-events: none; }

.form__feedback {
	min-height: 1.4em;
	font-size: .9rem;
	line-height: 1.5;
	text-wrap: pretty;
}
.form__feedback.is-erro { color: #e6a99c; }
.form__feedback.is-ok { color: #bcd8a8; }

.form__whats {
	padding-top: 6px;
	border-top: 1px solid rgba(var(--areia-rgb), .16);
	text-align: center;
}
.form__whats a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	color: rgba(var(--areia-rgb), .78);
	font-size: .84rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .4s;
}
.form__whats a:hover { color: var(--dourado); }
.form__whats .ico { width: 20px; height: 20px; }

@media (min-width: 880px) {
	.formulario__caixa { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
	.formulario__cabecalho { position: sticky; top: calc(var(--topo-h) + 40px); align-self: start; }
}

/* ---------------------------------------------------------
   20. RODAPÉ
--------------------------------------------------------- */
.rodape {
	position: relative;
	padding-block: clamp(56px, 6vw, 90px) 34px;
	background: var(--verde-fundo);
	color: rgba(var(--areia-rgb), .72);
	font-size: .9rem;
}
/* Um fio dourado separa o rodapé da última seção, que tem o mesmo fundo. */
.rodape::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(var(--dourado-rgb), .55) 22%, rgba(var(--dourado-rgb), .55) 78%, transparent);
}
.rodape__topo {
	display: grid;
	gap: clamp(36px, 4vw, 64px);
	padding-bottom: clamp(36px, 4vw, 56px);
	border-bottom: 1px solid rgba(var(--areia-rgb), .16);
}
.rodape__logo { height: 46px; width: auto; }
.rodape__realizacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 22px;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .78;
}
.rodape__idibra { height: 22px; width: auto; }

.rodape__colunas {
	display: grid;
	gap: clamp(28px, 3.5vw, 48px);
}
.rodape__titulo {
	margin-bottom: 16px;
	color: var(--areia);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.rodape__texto { line-height: 1.7; }
.rodape__links { display: grid; gap: 11px; }
.rodape__links a,
.rodape__links span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: color .35s;
}
.rodape__links a:hover { color: var(--dourado); }
.rodape__links .ico { width: 18px; height: 18px; flex: none; color: var(--dourado); }
.rodape__legal { display: grid; gap: 10px; font-size: .84rem; line-height: 1.6; }
.rodape__legal a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__legal a:hover { color: var(--dourado); }

.rodape__base {
	display: grid;
	gap: 22px;
	padding-top: 26px;
	font-size: .76rem;
	line-height: 1.68;
	opacity: .66;
	text-wrap: pretty;
}

/* O texto legal é longo e precisa ocupar a largura toda — numa coluna
   estreita sobrava metade do rodapé vazio. Em várias colunas ficou pior:
   partia frases no meio ("Parcelas a partir de R$" numa, o valor na outra).
   Bloco único, linha larga: é texto de compliance, lido em bloco. */
.rodape__disclaimer { max-width: none; }

.rodape__assinatura { justify-self: end; }
@media (max-width: 759px) {
	.rodape__assinatura { justify-self: start; }
}
.rodape__credito a:hover { color: var(--dourado); }

@media (min-width: 760px) {
	.rodape__colunas { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
	.rodape__topo { grid-template-columns: .8fr 2fr; align-items: start; }
}

/* ---------------------------------------------------------
   21. BOTÃO FLUTUANTE
--------------------------------------------------------- */
.flutuante {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
	border-radius: 999px;
	background: var(--verde);
	color: var(--areia);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateY(20px) scale(.92);
	pointer-events: none;
	transition: opacity .6s var(--ease), transform .6s var(--ease), background-color .4s;
}
.flutuante .ico { width: 22px; height: 22px; flex: none; }
.flutuante.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.flutuante:hover { background: var(--dourado); }

@media (max-width: 560px) {
	.flutuante span { display: none; }
	.flutuante { padding: 15px; }
}

/* ---------------------------------------------------------
   22. LIGHTBOX
--------------------------------------------------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	/* minmax(0,...) impede a coluna de crescer junto com a imagem ampliada:
	   sem isso o quadro fica mais largo que a tela no celular. */
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(20, 20, 6, .94);
	opacity: 0;
	transition: opacity .4s var(--ease-suave);
}
.lightbox[hidden] { display: none; }
.lightbox.is-aberto { opacity: 1; }

.lightbox__figura {
	width: min(100%, 1100px);
	max-width: 100%;
	min-width: 0;
	transform: scale(.96);
	transition: transform .5s var(--ease);
}
.lightbox.is-aberto .lightbox__figura { transform: none; }

/* A imagem é limitada pela ALTURA, não pela largura: assim o mapa do entorno
   abre grande o bastante para ler os nomes dos pontos no celular, e quem
   precisa rola na horizontal. Em tela grande ela cabe inteira e nada rola. */
.lightbox__rolagem {
	max-width: 100%;
	min-width: 0;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.lightbox__figura img {
	max-width: 100%;
	max-height: 78svh;
	width: auto;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--r);
	background: var(--areia-clara);
}
/* O mapa é a exceção: abre pela altura e rola na horizontal. */
.lightbox.is-ampliado .lightbox__figura img { max-width: none; }
.lightbox__figura figcaption {
	margin-top: 20px;
	color: rgba(var(--areia-rgb), .82);
	font-size: .84rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
}
/* Setas de navegação, nas laterais. */
.lightbox__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	transform: translateY(-50%);
	border: 1px solid rgba(var(--areia-rgb), .3);
	border-radius: 50%;
	color: var(--areia);
	transition: background-color .4s, color .4s, border-color .4s;
}
.lightbox__seta[hidden] { display: none; }
.lightbox__seta:hover { background: var(--areia); border-color: var(--areia); color: var(--verde); }
.lightbox__seta .ico { width: 20px; height: 20px; }
.lightbox__seta--ant { left: clamp(8px, 2.5vw, 28px); }
.lightbox__seta--prox { right: clamp(8px, 2.5vw, 28px); }

.lightbox__legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 8px 16px;
}
.lightbox__contador {
	color: var(--dourado);
	font-variant-numeric: tabular-nums;
}

/* No celular as setas desceriam em cima da imagem: vão para a base. */
@media (max-width: 640px) {
	.lightbox__seta {
		top: auto;
		bottom: clamp(10px, 3vw, 20px);
		transform: none;
		width: 46px;
		height: 46px;
		background: rgba(20, 20, 6, .6);
	}
}

.lightbox__fechar {
	position: absolute;
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(var(--areia-rgb), .3);
	border-radius: 50%;
	color: var(--areia);
	transition: background-color .4s, color .4s;
}
.lightbox__fechar:hover { background: var(--areia); color: var(--verde); }
.lightbox__fechar .ico { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   23. PÁGINAS INTERNAS
--------------------------------------------------------- */
.pagina { padding-top: calc(var(--topo-h) + clamp(56px, 7vw, 100px)); }
.pagina__artigo + .pagina__artigo { margin-top: 48px; }
.pagina__conteudo { margin-top: 26px; max-width: 68ch; }
.pagina__conteudo > * + * { margin-top: 1.1em; }
.pagina__conteudo h2 { margin-top: 1.8em; font-size: 1.4rem; font-weight: 500; }
.pagina__conteudo a { color: var(--dourado); text-decoration: underline; text-underline-offset: 3px; }
.pagina__conteudo ul { list-style: disc; padding-left: 1.3em; }

/* ---------------------------------------------------------
   24. MOVIMENTO REDUZIDO
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.js [data-titulo] .palavra > i { transform: none; }
	.hero__img { animation: none; }
}