/* ============================================================
   LUME Imobiliária — implementação de "LUME Landing Page.dc.html"
   (Claude Design · projeto "Site landing page kickoff")

   Os valores são transcritos 1:1 do protótipo. O que o protótipo
   anota mas o runtime x-dc não executa — `style-hover`, `style-focus`
   e responsividade — está implementado aqui como CSS real.
   ============================================================ */

:root {
	--cream:      #F4EEE3;
	--ivory:      #FBF7F0;
	--graphite:   #23252A;
	--champagne:  #B99763;
	--gold-light: #D8C49A;
	--taupe:      #AEA18E;
	--stone:      #6F6455;

	/* Sobre grafite, #6F6455 fica em ~2:1. Este é o mesmo papel visual
	   (texto terciário) num valor que passa em WCAG AA. */
	--dim-on-dark: rgba(174, 161, 142, 0.82);

	--f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--f-text: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono: ui-monospace, Menlo, Consolas, monospace;

	--pad-x: clamp(24px, 5vw, 90px);
	--maxw: 1560px;

	/* Movimento — uma curva só, a do próprio protótipo. Desacelera, nunca ultrapassa. */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--t-micro: 240ms;
	--t-reveal: 700ms;
	--t-janela: 1200ms;
	--t-cerimonia: 2400ms;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--graphite);
	font-family: var(--f-text);
	font-weight: 300;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--stone); text-decoration: none; transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease; }
a:hover { color: var(--champagne); }

::selection { background: var(--champagne); color: var(--ivory); }

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

h1, h2, h3, p, blockquote, figure { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--graphite);
	color: var(--cream);
	padding: 12px 20px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--cream); }

/* Rótulos e microtextos recorrentes */
.kicker {
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--stone);
}
.slot-note {
	font-family: var(--f-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: var(--stone);
}

/* Filete interrompido da marca (Etapa 03) */
.tick { display: flex; align-items: center; gap: 10px; }
.tick i { display: block; height: 1px; background: var(--taupe); }
.tick i:nth-child(1) { width: 44px; }
.tick i:nth-child(2) { width: 10px; }
.tick i:nth-child(3) { width: 4px; background: var(--champagne); }
.tick--onDark i { background: rgba(251, 247, 240, 0.75); }

.tick--onDark i:nth-child(3) { background: var(--champagne); }

/* ---------- Assinatura ---------- */

.sig { display: flex; align-items: baseline; gap: 14px; }
.sig-word {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0.42em;
	color: var(--graphite);
}
.sig i { width: 24px; height: 1px; background: var(--champagne); display: block; }
.sig span:last-child {
	font-size: 9px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--stone);
}
.sig--onDark { gap: 16px; }
.sig--onDark .sig-word { font-size: clamp(22px, 2vw, 28px); letter-spacing: 0.44em; color: var(--ivory); }
.sig--onDark i { width: 28px; }
.sig--onDark span:last-child { color: rgba(251, 247, 240, 0.72); }

/* ---------- Header (revelado só na rolagem para baixo) ---------- */

.hdr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: rgba(244, 238, 227, 0.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(174, 161, 142, 0.35);
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 620ms var(--ease), opacity 460ms ease;
}
.hdr.is-shown { transform: translateY(0); opacity: 1; pointer-events: auto; }

.hdr-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.hdr-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.hdr-nav a {
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--stone);
}
.hdr-nav .cta {
	border: 1px solid var(--graphite);
	padding: 12px 24px;
	color: var(--graphite);
}
.hdr-nav .cta:hover { background: var(--graphite); color: var(--cream); }

.burger {
	display: none;
	width: 44px;
	height: 44px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 1px solid rgba(174, 161, 142, 0.55);
	cursor: pointer;
	flex: none;
}
.burger i { display: block; width: 17px; height: 1px; background: var(--graphite); transition: transform 300ms ease, opacity 300ms ease; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
	display: none;
	position: fixed;
	inset: 84px 0 auto 0;
	z-index: 49;
	background: var(--graphite);
	padding: 24px var(--pad-x) 34px;
}
.drawer.is-open { display: block; }
.drawer a {
	display: block;
	font-family: var(--f-display);
	font-weight: 300;
	font-size: 26px;
	color: var(--ivory);
	padding: 11px 0;
	border-bottom: 1px solid rgba(251, 247, 240, 0.12);
}
.drawer a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	height: 100vh;
	min-height: 640px;
	background: var(--graphite);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }

/* Arco Lume — fragmento, entra pela borda e nunca fecha em cena */
.hero-arc {
	position: absolute;
	left: -14%;
	bottom: -46%;
	width: 70%;
	aspect-ratio: 1 / 1;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}
.hero-arc circle {
	fill: none;
	stroke: rgba(185, 151, 99, 0.4);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(24, 22, 19, 0.5) 0%, rgba(24, 22, 19, 0) 26%),
		linear-gradient(to top, rgba(24, 22, 19, 0.84) 0%, rgba(24, 22, 19, 0.34) 46%, rgba(24, 22, 19, 0.1) 100%);
}
.hero-top {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	padding: clamp(28px, 3.4vw, 44px) var(--pad-x);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
}
.hero-place {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(251, 247, 240, 0.6);
}
.hero-body {
	position: relative;
	z-index: 3;
	max-width: var(--maxw);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--pad-x) clamp(52px, 6vw, 86px);
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 5vw, 90px);
	align-items: end;
}
.hero h1 {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(44px, 6vw, 102px);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: var(--ivory);
	text-wrap: pretty;
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero .tick { margin-top: clamp(28px, 3vw, 44px); }
.hero-sub {
	max-width: 40ch;
	font-size: 15.5px;
	line-height: 1.85;
	color: rgba(251, 247, 240, 0.8);
	text-wrap: pretty;
}
.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-top: clamp(28px, 3vw, 40px);
}

/* ---------- Botões ---------- */

.btn-fill {
	background: var(--cream);
	color: var(--graphite);
	padding: 18px 38px;
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}
.btn-fill:hover { background: var(--champagne); color: var(--graphite); }

.btn-underline {
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(251, 247, 240, 0.8);
	border-bottom: 1px solid rgba(251, 247, 240, 0.35);
	padding-bottom: 6px;
}
.btn-underline:hover { border-color: var(--champagne); color: var(--gold-light); }

.btn-outline-gold {
	display: inline-block;
	border: 1px solid var(--champagne);
	color: var(--champagne);
	padding: 18px 38px;
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}
.btn-outline-gold:hover { background: var(--champagne); color: var(--graphite); }


/* ---------- Seções ---------- */

.sec { padding: clamp(90px, 11vw, 170px) 0; }
.sec--tall { padding: clamp(90px, 11vw, 180px) 0; }
.sec--rule { border-top: 1px solid rgba(174, 161, 142, 0.35); }
.sec--ivory { background: var(--ivory); }
.sec--dark { background: var(--graphite); color: var(--ivory); }

.split { display: grid; grid-template-columns: 0.32fr 0.68fr; gap: clamp(40px, 6vw, 100px); }

h2.display {
	font-family: var(--f-display);
	font-weight: 300;
	line-height: 1.12;
	text-wrap: pretty;
}

/* Manifesto */
/* Sem .split aqui: rótulo, título e colunas partem da mesma margem esquerda.
   O vazio fica à direita do título, onde o texto já é irregular. */
.manifesto-head .kicker { display: block; margin-bottom: clamp(22px, 2.6vw, 34px); }
.manifesto h2 { max-width: 30ch; font-size: clamp(32px, 3.9vw, 60px); }
.manifesto-head .tick { margin: clamp(30px, 3.4vw, 44px) 0 0; }
.manifesto-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(32px, 4vw, 72px);
	margin-top: clamp(52px, 6vw, 84px);
}
.manifesto-cols h3 {
	font-family: var(--f-text);
	font-weight: 300;
	font-size: 9.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--champagne);
	margin-bottom: 16px;
}
.manifesto-cols p { font-size: 15px; line-height: 1.85; color: var(--stone); max-width: 34ch; }

/* Lançamento */
.launch { position: relative; overflow: hidden; }
.launch-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 110px);
	align-items: center;
}
.launch-shot { aspect-ratio: 3 / 4; overflow: hidden; }
.launch-shot img { width: 100%; height: 100%; object-fit: cover; }
.launch-kicker {
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--champagne);
	margin-bottom: clamp(30px, 4vw, 52px);
}
.launch h2 { font-size: clamp(38px, 4.6vw, 74px); line-height: 1.04; }
.launch-lead { margin-top: 30px; max-width: 40ch; font-size: 16px; line-height: 1.85; color: var(--taupe); text-wrap: pretty; }

.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: rgba(174, 161, 142, 0.28);
	margin-top: clamp(40px, 5vw, 64px);
}
.fact { background: var(--graphite); padding-top: 26px; }
.fact:nth-child(odd) { padding-right: 26px; }
.fact:nth-child(even) { padding-left: 26px; }
.fact dt { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; }
.fact dd { margin: 0; font-family: var(--f-display); font-size: 30px; font-weight: 300; }
.launch .btn-outline-gold { margin-top: clamp(40px, 5vw, 60px); }

/* Método */
.method h2 { max-width: 22ch; font-size: clamp(32px, 3.9vw, 58px); }
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: rgba(174, 161, 142, 0.4);
	margin-top: clamp(56px, 6vw, 96px);
}
.step { background: var(--cream); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px) clamp(36px, 4vw, 56px); }
.step .n { font-family: var(--f-display); font-size: 38px; font-weight: 300; color: var(--champagne); }
.step h3 { margin: 26px 0 12px; font-family: var(--f-text); font-weight: 300; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
.step p { font-size: 14px; line-height: 1.8; color: var(--stone); }

/* Regiões */
.regions-intro p { max-width: 30ch; font-size: 15px; line-height: 1.85; color: var(--stone); }
.regions-intro .kicker { display: block; margin-bottom: clamp(24px, 3vw, 40px); }
.region {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: clamp(16px, 3vw, 48px);
	align-items: baseline;
	padding: clamp(22px, 2.4vw, 32px) 0;
	border-top: 1px solid rgba(174, 161, 142, 0.45);
	color: var(--graphite);
}
.region:hover { color: var(--champagne); }
.region .name { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 38px); }
.region .note { font-size: 11px; letter-spacing: 0.18em; color: var(--stone); }
.region .count { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); }

/* Contato */
.contact-grid { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(48px, 7vw, 120px); }
.contact-grid .kicker { display: block; margin-bottom: clamp(28px, 3.5vw, 48px); }
.contact-grid h2 { max-width: 18ch; font-size: clamp(34px, 4vw, 62px); line-height: 1.08; }
.contact-lead { margin-top: 32px; max-width: 38ch; font-size: 15px; line-height: 1.85; color: var(--stone); }
.contact-facts {
	margin-top: clamp(40px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 13.5px;
	letter-spacing: 0.06em;
	color: var(--stone);
}

.form { display: grid; gap: clamp(24px, 2.6vw, 34px); }
.field { display: grid; gap: 10px; }
.field > span,
.field-label { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--stone); }
.field input,
.field textarea {
	border: 0;
	border-bottom: 1px solid rgba(174, 161, 142, 0.6);
	background: transparent;
	padding: 12px 0;
	font-family: var(--f-text);
	font-size: 15px;
	font-weight: 300;
	color: var(--graphite);
	outline: none;
	transition: border-color 240ms ease;
	width: 100%;
}
.field textarea { resize: none; }
.field input:focus,
.field textarea:focus { border-color: var(--champagne); }
.field input::placeholder,
.field textarea::placeholder { color: var(--taupe); }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
	font-family: var(--f-text);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 13px 22px;
	cursor: pointer;
	transition: all 240ms ease;
	background: transparent;
	color: var(--stone);
	border: 1px solid rgba(174, 161, 142, 0.6);
}
.chip:hover { border-color: var(--champagne); color: var(--champagne); }
.chip[aria-pressed="true"] { background: var(--graphite); color: var(--cream); border-color: var(--graphite); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 8px; }
.submit {
	background: var(--graphite);
	color: var(--cream);
	border: 0;
	padding: 19px 40px;
	font-family: var(--f-text);
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 240ms ease;
}
.submit:hover { background: var(--stone); }
.form-note { font-size: 11px; letter-spacing: 0.1em; color: var(--taupe); }

/* Rodapé */
.foot { background: var(--graphite); color: var(--taupe); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 7vw, 110px) var(--pad-x) clamp(36px, 4vw, 56px); }
.foot-top { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.foot-tag {
	max-width: 22ch;
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.2;
	color: var(--ivory);
}
.news-label { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne); margin-bottom: 16px; }
.news-form {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid rgba(174, 161, 142, 0.4);
	padding-bottom: 12px;
}
.news-form input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--f-text);
	font-size: 14px;
	font-weight: 300;
	color: var(--ivory);
	outline: none;
}
.news-form input::placeholder { color: var(--dim-on-dark); }
.news-form button {
	background: transparent;
	border: 0;
	color: var(--champagne);
	font-family: var(--f-text);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
}
.news-note { margin-top: 14px; font-size: 11px; letter-spacing: 0.08em; color: var(--dim-on-dark); }

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(56px, 6vw, 90px);
	padding-top: 26px;
	border-top: 1px solid rgba(174, 161, 142, 0.22);
	font-size: 9.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.foot-bottom a { color: var(--taupe); }
.foot-bottom a:hover { color: var(--ivory); }
.foot-links { display: flex; flex-wrap: wrap; gap: 28px; }

/* Pílula flutuante do WhatsApp */
.wa {
	position: fixed;
	right: clamp(16px, 3vw, 34px);
	bottom: clamp(16px, 3vw, 34px);
	z-index: 45;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--graphite);
	color: var(--ivory);
	padding: 16px 24px;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 500ms ease, transform 500ms var(--ease);
}
.wa.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wa:hover { color: var(--ivory); }
.wa i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); display: block; flex: none; }
.wa span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }

/* ============================================================
   Movimento — "a luz que revela"

   Etapa 03 proíbe efeito, sombra, degradê e 3D; Etapa 02 proíbe peso.
   Então nada aqui decora: tudo é revelação. Só transform, opacity e
   clip-path — nenhuma propriedade que force layout.

   Os estados iniciais vivem sob .js-anim, adicionado por um script inline
   no <head>. Sem JS, ou com prefers-reduced-motion, a classe nunca entra
   e a página renderiza pronta. Conteúdo nunca depende de animação.
   ============================================================ */

/* Escalonamento: cada item carrega o próprio atraso em --d. */
.js-anim [data-anim] { transition-delay: var(--d, 0ms); }

/* Bloco genérico — sobe e aparece. */
.js-anim [data-anim="up"] {
	opacity: 0;
	transform: translateY(22px);
	transition-property: opacity, transform;
	transition-duration: var(--t-reveal);
	transition-timing-function: var(--ease);
}
.js-anim [data-anim="up"].is-in { opacity: 1; transform: none; }

/* Título display — a máscara desce sobre o Cormorant, por bloco (não por letra:
   letra a letra é o oposto de luxo silencioso). */
.js-anim [data-anim="head"] {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transform: translateY(16px);
	transition-property: opacity, clip-path, transform;
	transition-duration: 900ms;
	transition-timing-function: var(--ease);
}
.js-anim [data-anim="head"].is-in { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

/* Linha interrompida se desenhando — a interrupção "simboliza a passagem
   da luz", então ela passa da esquerda para a direita. */
.js-anim [data-anim="tick"] i {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--t-reveal) var(--ease);
}
.js-anim [data-anim="tick"].is-in i { transform: none; }
.js-anim [data-anim="tick"].is-in i:nth-child(1) { transition-delay: calc(var(--d, 0ms)); }
.js-anim [data-anim="tick"].is-in i:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 130ms); }
.js-anim [data-anim="tick"].is-in i:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 260ms); }

/* Janela Lume abrindo sobre a fotografia. */
.js-anim [data-anim="janela"] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--t-janela) var(--ease);
}
.js-anim [data-anim="janela"].is-in { clip-path: inset(0 0 0 0); }
.js-anim [data-anim="janela"] img {
	transform: scale(1.05);
	transition: transform 1800ms var(--ease);
}
.js-anim [data-anim="janela"].is-in img { transform: none; }

/* ---- Hero: acontece na carga, não na rolagem ---- */

/* A foto assenta. Lento o bastante para não virar efeito. */
.js-anim .hero-media img {
	transform: scale(1.06);
	transition: transform var(--t-cerimonia) var(--ease);
}
.js-anim.is-ready .hero-media img { transform: none; }

/* Arco Lume se desenhando. Continua fragmento — o traço só aparece
   onde o círculo cruza a cena. */
.js-anim .hero-arc circle {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
	transition: stroke-dashoffset var(--t-cerimonia) var(--ease);
}
.js-anim.is-ready .hero-arc circle { stroke-dashoffset: 0; }

.js-anim .hero-top,
.js-anim .hero h1,
.js-anim .hero-sub,
.js-anim .hero-ctas {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js-anim .hero h1 { clip-path: inset(0 0 100% 0); transition: opacity 900ms var(--ease), transform 900ms var(--ease), clip-path 900ms var(--ease); }
.js-anim .hero .tick i { transform: scaleX(0); transform-origin: left center; transition: transform var(--t-reveal) var(--ease); }

.js-anim.is-ready .hero-top,
.js-anim.is-ready .hero h1,
.js-anim.is-ready .hero-sub,
.js-anim.is-ready .hero-ctas { opacity: 1; transform: none; }
.js-anim.is-ready .hero h1 { clip-path: inset(0 0 0 0); }
.js-anim.is-ready .hero .tick i { transform: none; }

.js-anim.is-ready .hero h1 { transition-delay: 220ms; }
.js-anim.is-ready .hero .tick i:nth-child(1) { transition-delay: 760ms; }
.js-anim.is-ready .hero .tick i:nth-child(2) { transition-delay: 890ms; }
.js-anim.is-ready .hero .tick i:nth-child(3) { transition-delay: 1020ms; }
.js-anim.is-ready .hero-sub { transition-delay: 500ms; }
.js-anim.is-ready .hero-ctas { transition-delay: 640ms; }
.js-anim.is-ready .hero-top { transition-delay: 120ms; }

/* Rede de segurança: se o main.js não carregar, nada fica invisível. */
.js-anim.anim-fallback [data-anim]:not(.is-in),
.js-anim.anim-fallback .hero-top,
.js-anim.anim-fallback .hero h1,
.js-anim.anim-fallback .hero-sub,
.js-anim.anim-fallback .hero-ctas {
	opacity: 1;
	transform: none;
	clip-path: none;
	transition: none;
}
.js-anim.anim-fallback [data-anim] i,
.js-anim.anim-fallback .hero .tick i { transform: none; }

/* ---------- Responsivo (o artboard é só desktop) ---------- */

@media (max-width: 1000px) {
	.hdr-nav { display: none; }
	.burger { display: flex; }
	.hero-body { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); }
	.split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 48px); }
	.launch-grid { grid-template-columns: 1fr; }
	.launch-shot { aspect-ratio: 4 / 3; }
	.contact-grid { grid-template-columns: 1fr; }
	.foot-top { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
	.hero { height: auto; min-height: 0; padding-top: clamp(150px, 34vh, 260px); }
	.hero-media { position: absolute; }
	/* No telefone o texto cobre o quadro inteiro, inclusive a pedra clara da fachada:
	   scrim mais firme e enquadramento puxado para o gramado. */
	.hero-media img { object-position: 62% 52%; }
	.hero-scrim {
		background:
			linear-gradient(to bottom, rgba(24, 22, 19, 0.62) 0%, rgba(24, 22, 19, 0.22) 30%),
			linear-gradient(to top, rgba(24, 22, 19, 0.88) 0%, rgba(24, 22, 19, 0.62) 55%, rgba(24, 22, 19, 0.42) 100%);
	}
	.hero h1 { font-size: clamp(40px, 12vw, 62px); }
	.hero-ctas { gap: 18px; }
	.hero-ctas .btn-fill { flex: 1 1 100%; text-align: center; }
	.region { grid-template-columns: 1fr; gap: 8px; }
	.field-pair { grid-template-columns: 1fr; }
	.facts { grid-template-columns: 1fr; }
	.fact:nth-child(odd), .fact:nth-child(even) { padding: 22px 0 0; }
	.wa span { display: none; }
	.wa { padding: 18px; }
	.foot-bottom { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}