/* ==========================================================================
   Andrade Home Resort — LP teaser
   Design system: editorial calmo · areia + verde petróleo · Playfair Display + Jost
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Marca */
  --petrol-900: #0B1E1F;
  --petrol-800: #142E2F;
  --petrol-700: #1B3A3B;
  --petrol-600: #2A5152;
  --sand-500:   #CEBD9A;
  --sand-400:   #D8CAAC;
  --sand-300:   #E3D8C2;
  --sand-100:   #EFE8DA;
  --paper:      #F7F3EC;
  --white:      #FFFFFF;

  /* Semântica */
  --bg:            var(--paper);
  --text:          var(--petrol-800);
  --text-mute:     #5C6A64;
  --text-on-dark:  var(--paper);
  --text-on-dark-mute: rgba(247, 243, 236, .72);
  --line:          rgba(20, 46, 47, .14);
  --line-on-dark:  rgba(206, 189, 154, .26);
  --accent:        var(--sand-500);   /* acento sobre fundo escuro */
  --accent-ink:    #6E6043;           /* acento sobre fundo claro (5:1, AA) */
  --danger:        #A8412F;
  --danger-on-dark:#F0B4A6;

  /* Tipografia */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui:      'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:    clamp(2.5rem, 8.2vw, 5.25rem);
  --fs-h2:      clamp(1.95rem, 4.6vw, 3.25rem);
  --fs-h3:      clamp(1.2rem, 2.1vw, 1.5rem);
  --fs-quote:   clamp(1.5rem, 3.9vw, 2.5rem);
  --fs-lead:    clamp(1.0625rem, 1.55vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-label:   .75rem;

  /* Espaço (base 8) */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-10: 4rem;   --sp-12: 5.5rem; --sp-14: 7rem;   --sp-16: 9rem;

  /* O piso do respiro entre seções vale para o celular, onde ele se repete
     doze vezes ao longo da rolagem: 4.5rem custava quase uma tela inteira só
     de ar. No desktop, onde a página é lida em blocos largos, o teto continua
     alto. */
  --section-y: clamp(3.25rem, 10vw, 9rem);

  /* Formas */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(11, 30, 31, .05), 0 2px 8px rgba(11, 30, 31, .04);
  --shadow-md: 0 10px 30px -12px rgba(11, 30, 31, .22);
  --shadow-lg: 0 32px 64px -28px rgba(11, 30, 31, .42);

  /* Movimento */
  --ease: cubic-bezier(.22, .8, .28, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 620ms;

  /* Layout */
  --container: 1180px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-h: 72px;

  /* Camadas */
  --z-band: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-consent: 80;
  --z-lightbox: 90;
  --z-skip: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; }
/* A Playfair alterna algarismos de estilo antigo; números de dado pedem
   altura uniforme para não parecerem desalinhados. */
.enquete__num,
.dados__valor,
.marcos__valor,
.eyebrow__num { font-variant-numeric: lining-nums tabular-nums; }
p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a  { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Navegadores sem :focus-visible ainda recebem um anel de foco visível. */
:focus {
  outline: 2px solid var(--sand-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--sand-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.momento :focus-visible,
.obraprima :focus-visible,
.citacao :focus-visible,
.reserva :focus-visible { outline-color: var(--sand-400); }

/* ── Utilitários ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--sand-500); color: var(--petrol-900);
  font-size: var(--fs-small); text-decoration: none;
  border-radius: var(--r-md);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-4); }

.icon {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* As aéreas do meio-dia são as únicas imagens frias da página. Um desvio quente
   leve coloca elas na mesma paleta das fotos de fim de tarde, sem falsear o
   lugar: a curva da praia, a cor da água e o casario continuam os reais. */
.banda img,
.obra__fig img {
  filter: saturate(.86) contrast(1.04) sepia(.08);
}

/* ── Tipografia de apoio ──────────────────────────────────────────────── */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.eyebrow--light { color: var(--sand-400); }

/* Numeração editorial da seção: 01 — O lugar */
.eyebrow__num {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
/* Nas seções escuras o acento volta a ser a areia da marca. */
.eyebrow--light .eyebrow__num { color: var(--accent); }
.eyebrow__num::after {
  content: '';
  width: clamp(28px, 5vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.tag {
  padding: .4em .9em .35em;
  background: var(--sand-500);
  color: var(--petrol-900);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.section__title em { font-style: italic; font-weight: 400; }

.section { padding-block: var(--section-y); }
.section__head {
  margin-bottom: clamp(2rem, 6vw, 4.5rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
/* Os títulos desta fase são frases inteiras, não manchetes curtas: a medida
   larga deixaria a segunda linha órfã e a leitura solta. */
.section__head .section__title { max-width: 22ch; }

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-7);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.btn--sand  { --btn-bg: var(--sand-500); --btn-fg: var(--petrol-900); --btn-border: var(--sand-500); }
.btn--sand:hover  { --btn-bg: var(--sand-300); --btn-border: var(--sand-300); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-border: rgba(247,243,236,.5); }
.btn--ghost:hover { --btn-bg: rgba(247,243,236,.12); --btn-border: var(--paper); }
.btn--petrol { --btn-bg: var(--petrol-800); --btn-fg: var(--paper); --btn-border: var(--petrol-800); }
.btn--petrol:hover { --btn-bg: var(--petrol-700); --btn-border: var(--petrol-700); }
.header__cta { white-space: nowrap; }
.btn--sm    { min-height: 44px; padding-inline: var(--sp-5); font-size: var(--fs-label); }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:not([disabled]):active { transform: translateY(1px); }

.btn__spinner {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn:not(.is-loading) .btn__spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-block: var(--sp-3);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(11, 30, 31, .9);
  border-bottom-color: var(--line-on-dark);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 48px;
}

.header__brand {
  display: flex;
  align-items: center;
  padding-block: var(--sp-2); /* garante os 44px de alvo no logotipo */
  text-decoration: none;
}
.header__logo {
  width: auto;
  height: clamp(26px, 3.6vw, 34px);
  filter: drop-shadow(0 2px 12px rgba(11, 30, 31, .5));
}

.header__nav { display: none; gap: var(--sp-6); }
/* Maiúsculas com tracking, como todo rótulo do site. Em caixa baixa a nav
   era o único elemento fora do sistema tipográfico da página. */
.header__nav a {
  position: relative;
  /* Padding vertical calibrado para o alvo de toque chegar a 44px. */
  padding-block: var(--sp-3);
  color: var(--text-on-dark);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .82;
  text-shadow: 0 1px 10px rgba(9, 26, 27, .5);
  transition: opacity var(--t-fast) var(--ease);
}
.header__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.header__nav a:hover,
.header__nav a.is-current { opacity: 1; }
.header__nav a:hover::after,
.header__nav a.is-current::after { transform: scaleX(1); }

/* Sobre o hero o CTA do header fica discreto, para não competir com o CTA
   principal logo abaixo. Quando o hero sai de vista, ele assume o papel
   de ação primária e ganha o preenchimento sólido. */
.header__cta {
  display: none;
  --btn-bg: transparent;
  --btn-fg: var(--sand-400);
  --btn-border: rgba(206, 189, 154, .45);
}
.header__cta:hover {
  --btn-bg: rgba(206, 189, 154, .14);
  --btn-border: var(--sand-400);
}
.site-header.is-scrolled .header__cta {
  --btn-bg: var(--sand-500);
  --btn-fg: var(--petrol-900);
  --btn-border: var(--sand-500);
}
.site-header.is-scrolled .header__cta:hover {
  --btn-bg: var(--sand-300);
  --btn-border: var(--sand-300);
}

@media (min-width: 900px) {
  .header__cta { display: inline-flex; }
}
/* O menu passou de quatro para cinco itens na fase produto. Em 1024px eles
   quebravam em duas linhas e comiam o botão: entra só a partir de 1180px. */
@media (min-width: 1180px) {
  .header__nav { display: flex; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: 0;
  overflow: hidden;
  color: var(--text-on-dark);
  background: var(--petrol-900);
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Com a fachada no lugar da aérea, o centro geométrico jogava o prédio
     para dentro do véu escuro da base. Subir o enquadramento devolve o
     térreo iluminado para a área limpa da imagem. */
  object-position: 50% 38%;
  /* Deriva lenta, de 1 a 1,05 com um leve passeio lateral. Como em tela
     larga o navegador já baixa o arquivo de 1920 para desenhar ~1600px, os
     5% de escala continuam abaixo da resolução da foto: não reamostra para
     cima, não borra. A versão anterior partia de 1,08 e do arquivo menor,
     por isso abria fora de foco. */
  transform-origin: 55% 45%;
  animation: heroDrift 30s cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes heroDrift {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.05) translateX(-1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}

/* Véu lateral, e não plano: escurece a esquerda, onde cai a chamada, e deixa
   o prédio nítido no meio e à direita. Um véu uniforme lavava a fachada
   inteira e a página abria com cara de foto desfocada. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(9, 26, 27, .84) 0%,
    rgba(9, 26, 27, .62) 34%,
    rgba(9, 26, 27, .16) 58%,
    rgba(9, 26, 27, .10) 78%,
    rgba(9, 26, 27, .30) 100%);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
}
/* Topo: garante leitura do logotipo e da navegação. */
.hero::before {
  top: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(9,26,27,.72) 0%, rgba(9,26,27,.24) 60%, rgba(9,26,27,0) 100%);
}
/* Base: painel escuro sob o bloco de texto. Aliviado na virada para a fase
   produto: com a aérea o véu podia ser opaco, mas agora o que está embaixo
   dele é o térreo iluminado do empreendimento, e ele precisa aparecer. Os
   valores mantêm o texto acima de 7:1 de contraste sobre a fachada. */
.hero::after {
  bottom: 0; height: 42%;
  background: linear-gradient(to top,
    rgba(9,26,27,.86) 0%,
    rgba(9,26,27,.5) 45%,
    rgba(9,26,27,0) 100%);
}

/* O miolo cresce para ocupar a altura da tela e centraliza a grade; a barra
   de rodapé do hero fica no fluxo, logo abaixo, sem sobrepor botão nenhum. */
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--sp-6) var(--sp-10);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
/* A linha cai exatamente sobre a parte mais clara do pôr do sol. O tracking
   largo, que funciona no desktop, deixava o texto rarefeito demais no celular
   para vencer aquele fundo: aqui ele fecha e ganha sombra. */
.hero__eyebrow-text {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 3px rgba(9, 26, 27, .85), 0 0 18px rgba(9, 26, 27, .7);
}
@media (min-width: 768px) {
  .hero__eyebrow-text { letter-spacing: .24em; color: var(--sand-400); }
}

.hero__title {
  /* 22ch e não 15ch: a headline da fase produto é mais longa e, na medida
     antiga, o balanceamento quebrava "home resort" no meio. */
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(9, 26, 27, .5), 0 8px 40px rgba(9, 26, 27, .55);
}
.hero__title em { font-style: italic; font-weight: 400; color: var(--sand-400); }

.hero__lead {
  max-width: 44ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: rgba(247, 243, 236, .84);
  text-shadow: 0 1px 16px rgba(9, 26, 27, .6);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
/* No celular os dois botões ocupam a largura toda: alvos iguais e alinhados. */
@media (max-width: 519px) {
  .hero__actions .btn { flex: 1 1 100%; }
}


/* Barra de rodapé do hero: assinatura, localização, âncora e data de abertura. */
.hero__meta {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(206, 189, 154, .22);
}

/* Assinatura tipográfica espaçada: recurso arquitetônico, não substitui o logotipo. */
.hero__wordmark {
  display: none;
  padding-block: var(--sp-2) var(--sp-4);
  font-size: .625rem;
  letter-spacing: clamp(.5em, 1.6vw, 1.1em);
  text-transform: uppercase;
  text-align: center;
  text-indent: clamp(.5em, 1.6vw, 1.1em);
  color: rgba(206, 189, 154, .5);
}
.hero__meta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .7);
}
@media (min-width: 600px) {
  .hero__meta-item { font-size: var(--fs-label); letter-spacing: .16em; }
}
.hero__meta-item--end { display: none; }
.hero__meta-icon { width: 1rem; height: 1rem; color: var(--sand-500); }
.hero__meta-strong { margin-left: .5em; color: var(--sand-400); }

/* A indicação de rolagem carrega o convite da fase: a persuasão vem antes do
   pedido, então o visitante precisa saber que vale continuar descendo. */
.hero__scroll {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);  /* alvo de toque de 44px de largura */
  color: var(--sand-400);
  text-decoration: none;
}
.hero__scroll-line {
  width: 1px; height: 26px;
  background: linear-gradient(to bottom, rgba(206,189,154,0), var(--sand-400));
}
.hero__scroll-text {
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__scroll-icon { width: 1.125rem; height: 1.125rem; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); opacity: .7; }
  30%           { transform: translateY(4px); opacity: 1; }
}

@media (min-width: 768px) {
  .hero__scroll { display: flex; }
  .hero__meta-item--end { display: flex; }
  .hero__meta { padding-block: var(--sp-2) var(--sp-3); }
}

/* No celular o convite de rolagem também precisa aparecer: é ele que avisa
   que a persuasão continua abaixo da dobra. Vira linha horizontal, acima da
   localização, sem o filete vertical que só faz sentido na coluna. */
@media (max-width: 767px) {
  .hero__meta-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--sp-1);
  }
  .hero__scroll {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    padding-inline: 0;
  }
  .hero__scroll-line { display: none; }
  .hero__scroll-icon { width: 1rem; height: 1rem; }
}

/* Hero em retrato: a fachada inteira, e não uma fatia dela.

   Com a aérea da praia, recortar o hero para 0,45 de proporção não custava
   nada: paisagem recortada continua paisagem. Um render de fachada, não. Em
   qualquer celular o object-fit: cover comia 45% da largura e o que sobrava
   era duas sacadas e um pedaço de céu — o prédio deixava de ser prédio.

   Então, quando a tela é mais alta que larga, o hero deixa de ser painel de
   tela cheia: a fachada ocupa o topo de borda a borda, inteira, e a chamada
   desce para o verde da marca, logo abaixo. É a mesma imagem sem moldura que
   a cliente pediu, só que legível.

   O corte é por proporção, e não por largura, porque o problema é a forma da
   tela: um tablet em retrato sofre o mesmo que um celular, e um notebook de
   1280x1024 também.

   A segunda condição, depois da vírgula, é um OU: tela baixa cai aqui do
   mesmo jeito. Um celular em paisagem tem 430px de altura e proporção 2,17,
   ou seja, passava pela regra de painel de tela cheia — e o título saía
   cortado no meio da palavra, porque o hero recorta o que transborda. */
@media (max-aspect-ratio: 5 / 4), (max-height: 640px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero__media {
    position: relative;
    inset: auto;
  }
  /* Sem proporção fixa: cada recorte entra na dele. Em retrato o navegador
     escolhe o render vertical (4:5, céu estrelado em cima e grama embaixo);
     em tela baixa, o horizontal. Forçar uma proporção aqui recortaria de
     novo justamente o que o render vertical existe para mostrar. */
  .hero__media img { height: auto; }
  /* A deriva lenta existe para dar vida a uma foto que sangra na tela toda.
     Aqui a imagem tem borda definida em cima e embaixo: a escala só faria
     o prédio crescer e ser cortado de novo. */
  .hero__media img { animation: none; }

  /* O véu de baixo era o painel de texto sobre a foto. Sem sobreposição ele
     não tem função, e o degradê passa a ser só a emenda: o pé da fachada
     escurece até encontrar o fundo da seção, sem linha de corte. */
  .hero::after { display: none; }
  .hero__media::after {
    background: linear-gradient(to bottom,
      rgba(9, 26, 27, .10) 0%,
      rgba(9, 26, 27, 0) 42%,
      rgba(9, 26, 27, .55) 86%,
      var(--petrol-900) 100%);
  }
  /* O topo continua escurecido, senão o logotipo claro cai sobre o céu. */
  .hero::before { height: 26%; }

  .hero__inner { padding-block: var(--sp-6) var(--sp-7); }
  .hero__meta { position: static; }
}


/* ── 01 · O destino ───────────────────────────────────────────────────── */
.destino { background: var(--paper); }

/* Faixa larga da enseada: a foto que abre o argumento antes de qualquer texto,
   e o lugar reservado para o vídeo institucional de Castelhanos. */
.banda { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.banda__quadro { position: relative; }
.banda img,
.banda video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--petrol-900);
}
@media (max-width: 599px) {
  .banda img,
  .banda video { aspect-ratio: 4 / 3; }
}

/* Fachada de vídeo. É um link, não um botão: sem JavaScript ele abre o filme
   no YouTube. O véu radial escurece o miolo, que é onde o rótulo cai, porque
   a aérea é de meio-dia e o centro dela é claro demais para texto branco. */
.banda__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-6);
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%,
      rgba(9, 26, 27, .62) 0%, rgba(9, 26, 27, .38) 62%, rgba(9, 26, 27, .2) 100%),
    linear-gradient(180deg, rgba(9, 26, 27, .14), rgba(9, 26, 27, .34));
  border: 0;
  border-radius: var(--r-lg);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease);
}
.banda__play:hover { background: linear-gradient(180deg, rgba(9, 26, 27, .3), rgba(9, 26, 27, .6)); }

/* Quando o player entra, a fachada e o pôster saem de cena. */
.banda__quadro.is-tocando .banda__play,
.banda__quadro.is-tocando .banda__poster { display: none; }
.banda__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--petrol-900);
}
@media (max-width: 599px) { .banda__frame { aspect-ratio: 16 / 9; } }

.banda__play-icone {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border: 1px solid rgba(247, 243, 236, .6);
  border-radius: 50%;
  background: rgba(11, 30, 31, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.banda__play-icone svg {
  width: 28px; height: 28px;
  /* deslocado para a direita: o triângulo tem o peso visual à esquerda e
     centralizado no eixo geométrico parece torto dentro do círculo */
  margin-left: 4px;
  fill: var(--paper);
  stroke: none;
}
.banda__play:hover .banda__play-icone {
  background: var(--sand-500);
  border-color: var(--sand-500);
  transform: scale(1.06);
}
.banda__play:hover .banda__play-icone svg { fill: var(--petrol-900); }

.banda__play-texto {
  max-width: 100%;
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(9, 26, 27, .8);
}
@media (min-width: 600px) {
  .banda__play-texto { font-size: var(--fs-label); letter-spacing: .2em; }
}
.banda__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  padding-inline: var(--sp-2);
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--text);
}
@media (min-width: 600px) {
  .banda__cap { font-size: var(--fs-label); letter-spacing: .16em; }
}
/* O letter-spacing também é aplicado depois do último caractere. Sem esta
   compensação, a nota alinhada à direita parece transbordar a moldura. */
.banda__nota {
  margin-right: -.16em;
  letter-spacing: .12em;
  color: var(--text-mute);
}

/* Coluna de leitura. Medida curta de propósito: o texto é longo e precisa
   convidar, não intimidar. */
.prosa { display: grid; gap: var(--sp-5); }
.prosa p {
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--text-mute);
  text-wrap: pretty;
}
.prosa strong { color: var(--text); font-weight: 500; }
.prosa--light p { color: var(--text-on-dark-mute); }
.prosa--light strong { color: var(--paper); }
.prosa--centro p { margin-inline: auto; text-align: center; }

.destino__corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .destino__corpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-10); }
}

/* O dado da enquete é a prova social mais forte da seção: ganha peso de
   número, não de frase perdida no meio do parágrafo. */
.enquete {
  padding: var(--sp-6);
  background: var(--sand-100);
  border-left: 2px solid var(--sand-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.enquete__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--petrol-800);
}
.enquete__pct { font-size: .5em; }
.enquete__texto {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* Referência às notas do rodapé. Alvo pequeno por natureza, então recebe
   área de toque estendida via padding. */
.nota-ref {
  display: inline-block;
  padding: 0 .3em;
  font-size: .85em;
  vertical-align: super;
  line-height: 1;
  color: var(--accent-ink);
  text-decoration: none;
}
.nota-ref:hover { text-decoration: underline; }
.on-dark .nota-ref,
.momento .nota-ref,
.obraprima .nota-ref { color: var(--sand-400); }

/* Três cenas da praia, fotografia real. */
.cenas {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.25rem, 7vw, 5rem);
}
@media (min-width: 600px) {
  .cenas { grid-template-columns: repeat(2, 1fr); }
  .cena__fig img { aspect-ratio: 4 / 5; }
}
@media (min-width: 900px) { .cenas { grid-template-columns: repeat(3, 1fr); } }
/* Três cenas na mesma régua. O degrau alternado foi testado e tirado: com
   fotografia real de assuntos diferentes, o alinhamento lê como catálogo e
   o desalinho lê como acidente. */

.cena__fig { margin: 0 0 var(--sp-5); overflow: hidden; border-radius: var(--r-lg); }
/* Retrato 4:5 vale quando as três cenas ficam lado a lado. Empilhadas no
   celular, cada foto ocupava 487px de altura e as três sozinhas passavam de
   uma tela e meia. Em 4:3 o assunto continua inteiro e a seção encolhe. */
.cena__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.96);
  transition: transform var(--t-slow) var(--ease);
}
.cena:hover .cena__fig img { transform: scale(1.04); }
.cena__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
/* Reserva a altura de duas linhas: com um título de uma linha e outro de
   duas, as legendas começavam em alturas diferentes e a régua se perdia. */
@media (min-width: 900px) { .cena__title { min-height: 2.4em; } }
.cena__text { color: var(--text-mute); font-size: var(--fs-small); text-wrap: pretty; }

/* Etiquetas de fecho da seção: leitura de varredura, para quem só rola. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: clamp(2.25rem, 7vw, 5rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.chip {
  position: relative;
  padding: .55rem 1.05rem .55rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-mute);
}
/* Ponto de areia antes de cada etiqueta: dá ritmo à varredura e amarra a
   linha inteira à paleta da marca, sem virar ícone nem emoji.
   Absoluto, e não item de flex: com flex a chamada de nota virava um item
   irmão e ia parar no fim da pílula, longe da palavra que ela qualifica. */
.chip::before {
  content: '';
  position: absolute;
  left: .9rem; top: 1.15em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sand-500);
}
.chips--light { border-top-color: var(--line-on-dark); }
.chips--light .chip {
  border-color: var(--line-on-dark);
  color: rgba(247, 243, 236, .82);
}

/* ── 02 · O momento ───────────────────────────────────────────────────── */
.momento {
  background: var(--petrol-800);
  color: var(--text-on-dark);
}
.momento .section__head { border-top-color: var(--line-on-dark); }

.momento__corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .momento__corpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-10); }
}

.dados { display: grid; gap: var(--sp-5); }
.dados__item {
  padding: var(--sp-5);
  background: rgba(247, 243, 236, .05);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
}
.dados__label {
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(247, 243, 236, .74);
}
.dados__valor {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sand-400);
}
.dados__suf { font-size: .6em; }

/* A frase do gabarito é o argumento decisivo da seção: fica sozinha,
   entre filetes, para ninguém passar batido. */
.momento__gabarito {
  max-width: 68ch;
  margin: clamp(2rem, 6vw, 4.5rem) 0;
  padding: var(--sp-6) 0;
  border-block: 1px solid var(--line-on-dark);
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}
.momento__gabarito strong { color: var(--sand-400); font-weight: 400; }

.leituras { display: grid; gap: var(--sp-4); }
@media (min-width: 780px) { .leituras { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }

/* As duas leituras do mesmo lugar. São a mesma praia contada de dois jeitos,
   então os cards são gêmeos: mesma superfície, mesma régua, só a marca muda. */
.leitura {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6);
  background: rgba(247, 243, 236, .05);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.leitura:hover {
  background: rgba(247, 243, 236, .08);
  border-color: rgba(206, 189, 154, .5);
}
.leitura__top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-on-dark);
}
.leitura__icon { width: 1.75rem; height: 1.75rem; color: var(--sand-400); }
.leitura__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--paper);
}
.leitura__text {
  color: rgba(247, 243, 236, .86);
  font-size: var(--fs-small);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ── 03 · A assinatura (Egecon) ───────────────────────────────────────── */
.assinatura { background: var(--sand-100); padding-bottom: 0; }

.assinatura__corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .assinatura__corpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-10); }
}

.marcos { display: grid; gap: var(--sp-5); }
.marcos__item { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.marcos__label {
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-mute);
}
.marcos__valor {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--petrol-800);
}
.marcos__suf { font-family: var(--font-ui); font-size: .95rem; letter-spacing: 0; color: var(--text-mute); }

/* A coleção como índice de catálogo. Cada linha é uma edição entregue;
   a última fica em aberto porque o Andrade ainda não foi revelado. */
.colecao { margin-top: clamp(2.25rem, 7vw, 5rem); }
.colecao__titulo {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-label);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.colecao__lista { list-style: none; border-top: 1px solid var(--line); }
.colecao__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 600px) {
  .colecao__item { grid-template-columns: 3rem minmax(0, 1fr) auto; }
}
.colecao__num {
  font-family: var(--font-display);
  font-size: .9375rem;
  letter-spacing: .1em;
  color: var(--accent-ink);
}
.colecao__nome {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  color: var(--petrol-800);
}
.colecao__estado {
  grid-column: 2;
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
@media (min-width: 600px) { .colecao__estado { grid-column: 3; margin-top: 0; } }

/* O sexto quadro: nome em itálico, filete de acento e luz de fundo. */
.colecao__item--aberto {
  margin-top: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 0;
  border-left: 2px solid var(--sand-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(100deg, rgba(206, 189, 154, .38), rgba(206, 189, 154, 0) 78%);
}
@media (min-width: 600px) {
  .colecao__item--aberto { grid-template-columns: calc(3rem - var(--sp-4)) minmax(0, 1fr) auto; }
}
.colecao__nome--aberto { font-style: italic; font-weight: 400; }
.colecao__estado--aberto { color: var(--accent-ink); }

/* Obras entregues: fotografia real, sem render nenhum. */
.obras {
  display: grid;
  /* Duas colunas já no celular: seis fotos empilhadas somavam mais de duas
     telas, e como são quadros de catálogo elas se leem bem pequenas. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 7vw, 5rem);
}
/* Cinco edições mais o quadro em aberto: seis quadros, dois por três no
   desktop. Estética de catálogo, todos na mesma régua. */
@media (min-width: 780px) { .obras { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (min-width: 900px) { .obras { grid-template-columns: repeat(3, 1fr); } }
/* Quando a galeria tem só dois quadros, três colunas deixam um vão. */
@media (min-width: 780px) { .obras--duo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .obras--duo { grid-template-columns: repeat(2, 1fr); } }
/* Os quatro ambientes do apartamento leem melhor como faixa contínua. */
@media (min-width: 900px) { .obras--quatro { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

/* O filete da legenda acompanha a base da foto, sempre à mesma distância.
   Já tentei o contrário aqui, empurrando a legenda para o pé da célula para
   alinhar a base dos textos: aí quem desencontra é o filete, porque legenda
   de uma linha e de duas passam a começar em alturas diferentes. Como as
   fotos têm todas a mesma proporção, alinhar pelo topo é o que devolve a
   régua do catálogo. */
.obra__fig { margin: 0 0 var(--sp-3); overflow: hidden; border-radius: var(--r-md); }
.obra__fig img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.obra:hover .obra__fig img { transform: scale(1.03); }
.obra__cap {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  /* Em duas colunas no celular a legenda tem uns 160px de largura: caixa alta
     com tracking largo viraria quatro linhas. Aqui ela fecha e diminui. */
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--text-mute);
}
@media (min-width: 600px) {
  .obra__cap { font-size: var(--fs-label); letter-spacing: .12em; line-height: 1.6; }
}

/* O sexto quadro. Sem fotografia, só o vinco de luz atravessando a moldura:
   o projeto existe, a imagem ainda não. */
.obra__vazio {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #E7DDC7 0%, #DCD1B8 45%, #CFC3A8 100%);
}
.obra__luz {
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, .78) 50%,
    rgba(255, 255, 255, 0) 64%);
  animation: luzQuadro 9s var(--ease) infinite;
}
@keyframes luzQuadro {
  0%, 100% { transform: translateX(-14%); opacity: .55; }
  50%      { transform: translateX(14%);  opacity: 1; }
}
/* O algarismo amarra o quadro ao índice da coleção logo acima, onde o Andrade
   também é o VI. Discreto: quem repara, entende; quem não repara, vê só a luz. */
.obra__marca {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .22em;
  text-indent: .22em;
  color: rgba(20, 46, 47, .34);
}
.obra--aberta .obra__vazio { margin-bottom: 0; }

.atributos {
  display: grid;
  gap: var(--sp-4);
  margin-top: clamp(2.25rem, 6vw, 4rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 780px) { .atributos { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-8); } }
.atributo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-mute);
  text-wrap: pretty;
}
.atributo__icon { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .15em; color: var(--accent-ink); }

/* A frase institucional aprovada, sobre a pedra que a maresia testa. */
.citacao {
  position: relative;
  margin: clamp(2.5rem, 8vw, 6rem) 0 0;
  isolation: isolate;
  overflow: hidden;
}
.citacao__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Véu forte o bastante para a frase ter 12:1 de contraste, leve o bastante
   para a pedra e o mar ao fundo continuarem visíveis. A 90% a fotografia
   sumia e a faixa virava um retângulo verde chapado. */
.citacao::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(11, 30, 31, .92) 0%, rgba(11, 30, 31, .78) 48%, rgba(11, 30, 31, .58) 100%),
    linear-gradient(180deg, rgba(11, 30, 31, .35), rgba(11, 30, 31, .55));
}
.citacao__inner {
  padding-block: clamp(2.75rem, 9vw, 6.5rem);
  color: var(--text-on-dark);
}
.citacao__texto {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.01em;
  text-wrap: balance;
}
@media (min-width: 780px) { .citacao__texto { max-width: 30ch; } }
.citacao__fonte {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-small);
  color: var(--paper);
}
.citacao__marca {
  width: 76px; height: auto;
  padding: var(--sp-3);
  background: var(--white);
  border-radius: var(--r-md);
}
.citacao__papel {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  line-height: 1.9;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .78);
}

/* A ponte entre a prova (Egecon) e o desejo (o lançamento). É a única frase
   da seção que fica sozinha na largura toda, centrada, com um filete curto
   acima: funciona como virada de capítulo, não como legenda. */
.assinatura__ponte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 32ch;
  margin-inline: auto;
  padding-block: clamp(2.75rem, 8vw, 5.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.32;
  text-align: center;
  color: var(--petrol-800);
  text-wrap: balance;
}
.assinatura__ponte::before {
  content: '';
  width: 56px; height: 1px;
  background: var(--sand-500);
}
.assinatura__ponte em { font-style: italic; font-weight: 400; color: var(--accent-ink); }

/* ── A obra-prima (FORA DA FASE) ──────────────────────────────────────────
   Estilos da seção "O que vem aí", que saiu do HTML em 08/09 na virada para a
   fase produto. Ficam aqui porque a régua da campanha já voltou atrás uma vez
   (revelação -> teaser v2) e refazer isto custa mais que carregar 60 linhas.
   .section__head--centro, no meio do bloco, é utilitário e continua em uso.
   ponytail: CSS órfão mantido de propósito; apagar quando o Dia D passar. */
.obraprima {
  position: relative;
  overflow: hidden;
  background: var(--petrol-900);
  color: var(--text-on-dark);
}
.obraprima__inner { position: relative; z-index: 1; }
.obraprima .section__head { border-top-color: var(--line-on-dark); }

/* Quatro rastros na areia, sempre na mesma direção. Sem legenda. */
.rastros {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(560px, 92%);
  height: clamp(120px, 22vw, 220px);
  transform: translateX(-50%);
  color: var(--sand-500);
  opacity: .16;
  pointer-events: none;
}

.section__head--centro { text-align: center; border-top: 0; padding-top: 0; }
.section__head--centro .eyebrow { justify-content: center; }
.section__head--centro .section__title { margin-inline: auto; }

/* A tartaruga fica menor e emoldurada por um fio de areia: é imagem de
   símbolo, não de produto, e competia com o texto quando ocupava meia tela. */
.obraprima__fig {
  position: relative;
  width: min(330px, 66%);
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
}
.obraprima__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - 6px);
}

.obraprima__assinatura {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--sand-400);
  text-wrap: balance;
}
.obraprima__cta { display: flex; justify-content: center; margin-top: var(--sp-7); }
@media (max-width: 519px) { .obraprima__cta .btn { width: 100%; } }

/* ── 04 · O empreendimento ────────────────────────────────────────────── */
.produto {
  background: var(--petrol-900);
  color: var(--text-on-dark);
}
.produto .section__head { border-top-color: var(--line-on-dark); }
.produto .nota-ref { color: var(--sand-400); }

/* As perspectivas do projeto não levam o desvio quente que corrige as aéreas
   de meio-dia: o render já nasce na luz de fim de tarde, e o sépia por cima
   lavava a pedra e puxava o céu para o cinza. */
.banda--render img,
.obras--render .obra__fig img { filter: none; }

/* Ficha técnica. Dois por linha no celular, porque são números curtos e se
   leem emparelhados; três no desktop, senão a linha estica e os valores
   ficam longe do rótulo que explica cada um. */
.dados--ficha {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: clamp(2rem, 6vw, 3.5rem);
}
.dados--ficha .dados__item { padding: var(--sp-4); }
/* Os valores daqui são mais longos que os da seção 02 ("2 a 4", "64 a 188"):
   no corpo original eles quebravam em duas linhas e desalinhavam a régua. */
.dados--ficha .dados__valor { font-size: clamp(1.6rem, 4.2vw, 2.375rem); }
@media (min-width: 600px) { .dados--ficha { gap: var(--sp-4); } }
@media (min-width: 900px) {
  .dados--ficha { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .dados--ficha .dados__item { padding: var(--sp-5); }
}

/* As três frentes de rua. Fica entre a ficha e os cartões porque é a legenda
   dos cartões: sem ela, "a lateral" e "a terceira face" não dizem de onde. */
.produto__ponte {
  max-width: 62ch;
  margin: clamp(2.5rem, 7vw, 4rem) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}
.produto__ponte strong { font-weight: 400; color: var(--sand-400); }

/* ── 05 · O rooftop ───────────────────────────────────────────────────── */
.rooftop { background: var(--paper); }

/* Prosa e números lado a lado no desktop, empilhados no celular. Mesma
   proporção da seção da Egecon, para as duas lerem como a mesma régua. */
.rooftop__corpo,
.terreo__corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) {
  .rooftop__corpo,
  .terreo__corpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-10); }
}

/* ── 06 · O térreo ────────────────────────────────────────────────────── */
.terreo {
  background: var(--petrol-800);
  color: var(--text-on-dark);
}
.terreo .section__head { border-top-color: var(--line-on-dark); }
.terreo .nota-ref { color: var(--sand-400); }

/* ── 07 · Os apartamentos ─────────────────────────────────────────────── */
.apartamentos { background: var(--sand-100); }

/* As três faixas de tipologia. Uma coluna no celular: são quatro linhas de
   texto cada uma, e em duas colunas a metragem quebrava no meio do número. */
.tipos {
  display: grid;
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  list-style: none;
}
@media (min-width: 720px) { .tipos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.tipo {
  padding: var(--sp-5);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tipo__quartos {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  color: var(--petrol-800);
}
.tipo__suites {
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.tipo__area {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--petrol-800);
}
.tipo__suf { font-family: var(--font-ui); font-size: .5em; letter-spacing: 0; color: var(--text-mute); }
.tipo__nota {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-mute);
}

.apartamentos__legenda {
  max-width: 62ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* Padrão construtivo e sustentabilidade. São duas listas de etiqueta, e cada
   uma precisa do próprio título: juntas viravam um paredão de doze pílulas
   sem hierarquia nenhuma. */
.padrao {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .padrao { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); } }

.padrao__titulo {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* A lista de etiquetas aqui já vem depois de um título e de um filete: o
   respiro e a borda que ela carrega por padrão sobravam. */
.padrao__bloco .chips {
  margin-top: var(--sp-4);
  padding-top: 0;
  border-top: 0;
}

.apartamentos__cta { display: flex; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
@media (max-width: 519px) { .apartamentos__cta .btn { width: 100%; } }

/* ── 08 · A pré-reserva ───────────────────────────────────────────────── */
.reserva {
  background: var(--petrol-800);
  color: var(--text-on-dark);
}
.reserva__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .reserva__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-10); }
}

.reserva__intro { padding-top: var(--sp-6); border-top: 1px solid var(--line-on-dark); }
.reserva__intro .eyebrow { color: var(--sand-400); }
.reserva__intro .eyebrow__num { color: var(--accent); }
.reserva__text {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}

.perks {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
}
.perks__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(247, 243, 236, .86);
}
.perks__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .3em; color: var(--sand-500); }

.reserva__panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(247, 243, 236, .05);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
}

/* Segmentação: cliente, corretor ou imobiliária. Radio nativo escondido,
   pílula desenhada por cima. O controle continua acessível pelo teclado. */
.field--perfil { border: 0; padding: 0; margin: 0; }
.field--perfil .field__label { padding: 0; }
.segmento { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.segmento__op { flex: 1 1 7rem; }
.segmento__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.segmento__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: rgba(247, 243, 236, .82);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.segmento__op:hover .segmento__pill { border-color: rgba(206, 189, 154, .55); }
.segmento__input:checked + .segmento__pill {
  background: var(--sand-500);
  border-color: var(--sand-500);
  color: var(--petrol-900);
}
/* O anel de foco acompanha a pílula, já que o input está fora de vista. */
.segmento__input:focus-visible + .segmento__pill,
.segmento__input:focus + .segmento__pill {
  outline: 2px solid var(--sand-400);
  outline-offset: 3px;
}

/* ── Formulário ───────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand-400);
}
.field__req { color: var(--sand-500); }

.field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(11, 30, 31, .5);
  color: var(--paper);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.field__input::placeholder { color: rgba(247, 243, 236, .38); }
.field__input:hover { border-color: rgba(206, 189, 154, .45); }
.field__input:focus {
  background: rgba(11, 30, 31, .78);
  border-color: var(--sand-500);
}
.field__input[aria-invalid='true'] { border-color: var(--danger-on-dark); }

.field__help  { font-size: .8125rem; color: rgba(247, 243, 236, .55); line-height: 1.5; }
.field__error {
  display: none;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--danger-on-dark);
}
.field__error.is-visible { display: block; }

/* Armadilha de robô: fora da tela, fora do fluxo de foco e fora do leitor
   de tela. Não usar display:none, que alguns bots detectam. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.field--check { gap: var(--sp-3); }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}
/* Caixa desenhada à mão: a nativa vem branca e brilha demais sobre o painel
   escuro. Continua sendo um <input type="checkbox"> de verdade, então
   teclado, leitor de tela e validação seguem funcionando. */
.check__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 24px; height: 24px;
  margin: .18em 0 0;
  flex-shrink: 0;
  background: rgba(11, 30, 31, .55);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.check__input:hover { border-color: rgba(206, 189, 154, .55); }
.check__input:checked {
  background: var(--sand-500);
  border-color: var(--sand-500);
}
/* Marca de confirmação desenhada em CSS, sem depender de fonte ou imagem. */
.check__input:checked::after {
  content: '';
  position: absolute;
  left: 8px; top: 3.5px;
  width: 6px; height: 12px;
  border: solid var(--petrol-900);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check__input[aria-invalid='true'] { border-color: var(--danger-on-dark); }

/* Navegadores sem appearance:none caem no controle nativo, ainda utilizável. */
@supports not (appearance: none) {
  .check__input { accent-color: var(--sand-500); }
}
.check__label {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-on-dark-mute);
  cursor: pointer;
}
.check__label a { color: var(--sand-400); text-underline-offset: 3px; }

.form__status { font-size: var(--fs-small); color: var(--danger-on-dark); }
.form__status:empty { display: none; }
.form__legal {
  font-size: .8125rem;
  color: rgba(247, 243, 236, .45);
  text-align: center;
}

/* Sem JavaScript (ou com o script bloqueado) o envio não acontece:
   o formulário sai de cena e entra a orientação manual. */
.form-fallback { display: none; }
.no-js .form,
.js-failed .form { display: none; }
.no-js .form-fallback,
.js-failed .form-fallback {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  text-align: center;
}
.form-fallback__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--text-on-dark);
}
.form-fallback__text {
  font-size: var(--fs-small);
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}

.form-success {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  text-align: center;
}
/* O atributo hidden precisa vencer o display: grid acima. */
.form-success[hidden] { display: none; }
.form-success__icon {
  width: 56px; height: 56px;
  fill: none; stroke: var(--sand-500);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.form-success__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); }
.form-success__text {
  max-width: 42ch;
  color: var(--text-on-dark-mute);
  font-size: var(--fs-small);
  text-wrap: pretty;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  /* Folga extra embaixo no celular: mesmo com o CTA fixo escondendo-se no
     rodapé, o texto legal nunca deve encostar na borda da tela. */
  padding-block: var(--sp-10) var(--sp-10);
  background: var(--petrol-800);
  color: var(--text-on-dark-mute);
  font-size: var(--fs-small);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); } }

.footer__logo { width: clamp(150px, 22vw, 190px); height: auto; }
.footer__assinatura {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-on-dark-mute);
}

.footer__title {
  margin-bottom: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand-400);
}
.footer__text { font-style: normal; line-height: 1.75; }
.footer__pin { width: 1rem; height: 1rem; display: inline-block; vertical-align: -.15em; margin-right: .35em; color: var(--sand-500); }

.footer__marcas { display: grid; gap: var(--sp-5); }
.footer__marca { display: grid; gap: var(--sp-3); justify-items: start; }
.footer__marca-papel {
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(247, 243, 236, .6);
}

.footer__egecon { width: 150px; height: auto; }
/* A Urbax já vem branca e recortada: placa aqui só criaria um retângulo
   branco no rodapé sem motivo nenhum. */
.footer__urbax { width: 104px; height: auto; }

.footer__links { display: grid; gap: var(--sp-1); }
.footer__links a {
  display: inline-block;
  /* Alvo de toque confortável: os links do rodapé tinham 25px de altura. */
  padding-block: var(--sp-3) calc(var(--sp-3) - 2px);
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-dark);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__links a:hover { color: var(--sand-400); border-bottom-color: var(--sand-500); }

/* A linha de fecho é a semente da tagline. Ainda não é assinatura de marca,
   por isso fica no rodapé e não no hero. */
.footer__fecho {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.875rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  color: var(--sand-400);
  text-wrap: balance;
}

/* Atribuições das fontes citadas no corpo da página. Corpo pequeno por ser
   nota de rodapé, mas com contraste suficiente para ser lido de fato. */
.footer__notas {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-on-dark);
  font-size: .75rem;
  line-height: 1.7;
  color: rgba(247, 243, 236, .6);
}
@media (min-width: 780px) { .footer__notas { grid-column: 1 / -1; } }
.footer__notas:target,
.footer__notas li:target { color: var(--sand-400); }

.footer__legal {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  font-size: .75rem;
  line-height: 1.7;
  color: rgba(247, 243, 236, .45);
}
@media (min-width: 780px) {
  .footer__legal { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-6); }
  .footer__credit { text-align: right; }
}
.footer__credit span { color: rgba(247, 243, 236, .32); }

/* ── CTA fixo (mobile) ────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(11, 30, 31, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-on-dark);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 900px) { .sticky-cta { display: none; } }
/* Enquanto o banner de cookies decide, o CTA fixo sai do caminho. */
.consent-aberto .sticky-cta { transform: translateY(110%); }

/* ── Consentimento de cookies ─────────────────────────────────────────── */
.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-consent);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: rgba(11, 30, 31, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-on-dark);
  color: var(--text-on-dark);
}
.consent[hidden] { display: none; }

.consent__inner {
  display: grid;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 780px) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-8); }
}

.consent__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand-400);
}
.consent__text {
  max-width: 68ch;
  font-size: var(--fs-small);
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}
.consent__text a { color: var(--sand-400); text-underline-offset: 3px; }

.consent__actions { display: flex; gap: var(--sp-3); }
.consent__actions .btn { flex: 1 1 auto; }
@media (min-width: 780px) { .consent__actions .btn { flex: 0 0 auto; } }

/* ── Ampliar foto ─────────────────────────────────────────────────────── */
/* O botão só existe quando o script sobe: sem JavaScript não há lupa nem
   cursor de zoom, e a foto continua sendo uma foto comum. */
.foto-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: inherit;
  text-align: inherit;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-5);
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: rgba(9, 26, 27, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-on-dark);
}
.lightbox[hidden] { display: none; }

.lightbox__palco { display: grid; place-items: center; min-height: 0; }
.lightbox__img {
  /* Nunca passa da largura real do arquivo: ampliar além disso só entrega
     uma foto borrada, que é pior que uma foto menor e nítida. */
  max-width: min(92vw, 864px);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
}

.lightbox__cap {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-small);
  line-height: 1.6;
  text-align: center;
  color: rgba(247, 243, 236, .82);
  text-wrap: pretty;
}
.lightbox__conta {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  color: var(--sand-400);
  font-variant-numeric: tabular-nums;
}

/* Alvos de 48px, com folga das bordas e da área de gesto do celular. */
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  background: rgba(11, 30, 31, .55);
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.lightbox__btn:hover {
  background: var(--sand-500);
  border-color: var(--sand-500);
  color: var(--petrol-900);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__fechar { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lightbox__ant    { left: clamp(.5rem, 2vw, 1.5rem);  top: 50%; transform: translateY(-50%); }
.lightbox__prox   { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

/* Trava a rolagem do fundo enquanto a foto está aberta. */
.lightbox-aberta body { overflow: hidden; }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
/* O padrão é VISÍVEL. A opacidade zero só entra quando o script confirma,
   antes da primeira pintura, que vai animar. Assim nenhuma falha de JS
   consegue deixar a página em branco. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ── Preferências do sistema ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
}

/* ==========================================================================
   Pré-lançamento v2 (10/09/2026): estrutura do modelo da Térri sobre o
   mesmo design system. Formulário no hero, filme conceito, plantas por
   tipologia, localização, Egecon e loja conceito.
   ========================================================================== */

/* ── Seções escuras: os tokens de texto e filete trocam de escopo ──────────
   Antes, legenda de foto (.banda__cap, .obra__cap) e etiqueta (.chip) usavam
   a cor de texto do fundo claro mesmo sobre o verde: ficavam quase invisíveis.
   Redefinir os tokens aqui corrige todas de uma vez, sem override por classe. */
.produto, .terreo, .localizacao, .egecon {
  --text: var(--text-on-dark);
  --text-mute: var(--text-on-dark-mute);
  --line: var(--line-on-dark);
  --accent-ink: var(--sand-400);
}

/* ── Hero: chamada à esquerda, pré-reserva à direita ─────────────────────── */
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: 100%;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: var(--sp-10); }
}

/* Os três números do produto, em linha, logo abaixo da chamada. */
.hero__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(206, 189, 154, .3);
}
@media (max-width: 519px) {
  .hero__features { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero__feature { display: flex; align-items: baseline; gap: var(--sp-3); }
}
.hero__feature-valor {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--sand-400);
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 12px rgba(9, 26, 27, .6);
}
.hero__feature-label {
  margin-top: var(--sp-1);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(247, 243, 236, .78);
  text-shadow: 0 1px 10px rgba(9, 26, 27, .7);
}

/* O painel do formulário sobre a fotografia: mais opaco que o painel da
   seção antiga, senão a fachada iluminada atravessa os campos. */
.hero__form {
  /* Painel quase opaco, sem desfoque: o vidro fosco borrava a fachada atrás
     dele e o hero inteiro parecia fora de foco. */
  background: rgba(11, 30, 31, .86);
  border-color: rgba(206, 189, 154, .34);
  box-shadow: var(--shadow-lg);
}
.hero__form .eyebrow { margin-bottom: var(--sp-3); color: var(--sand-400); }
.hero__form-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__form-title em { font-style: italic; font-weight: 400; color: var(--sand-400); }
.hero__form-text {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-on-dark-mute);
  text-wrap: pretty;
}
/* Em retrato a foto fica em cima e o painel desce para o verde: sem foto
   atrás dele, o vidro fosco não tem o que desfocar. */
@media (max-aspect-ratio: 5 / 4), (max-height: 640px) {
  .hero__form { background: rgba(247, 243, 236, .05); box-shadow: none; }
  .hero__media::after {
    background: linear-gradient(to bottom,
      rgba(9, 26, 27, .10) 0%,
      rgba(9, 26, 27, 0) 42%,
      rgba(9, 26, 27, .55) 86%,
      var(--petrol-900) 100%);
  }
}

/* ── A poesia do tempo: texto e filme, lado a lado ──────────────────────── */
.poesia { background: var(--paper); }
.poesia__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .poesia__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--sp-10); }
}
.poesia__texto .section__title { max-width: 16ch; margin-bottom: var(--sp-6); }
.poesia .banda { margin: 0; }

/* O player de vídeo local entra no lugar do pôster, na mesma moldura. */
.banda__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--petrol-900);
}

/* Frase de fecho da seção: uma linha em display, entre filetes. */
.frase {
  max-width: 30ch;
  margin: clamp(2.5rem, 7vw, 4.5rem) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.frase em { font-style: italic; font-weight: 400; color: var(--accent-ink); }
.frase--light em { color: var(--sand-400); }

/* CTA de fecho, comum às seções: a persuasão termina em pedido. */
.section__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-8);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
@media (max-width: 519px) { .section__cta .btn { width: 100%; } }

/* ── Plantas por tipologia ──────────────────────────────────────────────── */
.plantas {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.plantas__head { max-width: 62ch; }
.plantas__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.plantas__texto { margin-top: var(--sp-3); color: var(--text-mute); text-wrap: pretty; }

/* Abas como pílulas: mesma família do seletor de perfil do formulário. */
.plantas__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.plantas__tab {
  flex: 1 1 8rem;
  min-height: 46px;
  padding: 0 var(--sp-5);
  border: 1px solid rgba(20, 46, 47, .3);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  color: var(--petrol-800);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.plantas__tab:hover { border-color: var(--petrol-800); }
.plantas__tab[aria-selected='true'] {
  background: var(--petrol-800);
  border-color: var(--petrol-800);
  color: var(--paper);
}
@media (min-width: 600px) { .plantas__tab { flex: 0 1 auto; } }

.plantas__panel {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  align-items: start;
}
.plantas__panel[hidden] { display: none; }
@media (min-width: 900px) {
  .plantas__panel { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-8); }
}
/* A planta é desenho técnico sobre branco: fundo branco de verdade, sem
   recorte, para o desenho aparecer inteiro em qualquer proporção. */
.planta__fig {
  margin: 0;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.planta__fig img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;
}
.planta__info { padding-top: var(--sp-2); }
.planta__kicker {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.planta__area {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--petrol-800);
  font-variant-numeric: lining-nums tabular-nums;
}
.planta__suf { font-family: var(--font-ui); font-size: .95rem; letter-spacing: 0; color: var(--text-mute); }
.planta__titulo {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.planta__detalhe { margin-top: var(--sp-2); color: var(--text-mute); }
.planta__cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--accent-ink);
}
.planta__nota { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.6; color: var(--text-mute); text-wrap: pretty; }
.plantas__aviso { margin-top: var(--sp-5); font-size: .8125rem; line-height: 1.6; color: var(--text-mute); }

/* ── Localização ────────────────────────────────────────────────────────── */
.localizacao { background: var(--petrol-700); color: var(--text-on-dark); }
.localizacao .banda { margin-top: clamp(2rem, 5vw, 3rem); }

/* ── Praia de Castelhanos: foto grande e editorial ─────────────────────── */
.destino__split {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .destino__split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-10); }
}
.destino__foto { margin: 0; }
.destino__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.destino__editorial { display: grid; gap: var(--sp-6); }
.enquete__link {
  display: inline-block;
  margin-top: var(--sp-3);
  color: var(--accent-ink);
  text-underline-offset: 3px;
}
@media (min-width: 900px) { .cenas--quatro { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
.banda--fecho { margin: clamp(2.5rem, 7vw, 5rem) 0 0; }

/* ── Egecon ─────────────────────────────────────────────────────────────── */
.egecon { background: var(--petrol-800); color: var(--text-on-dark); }
.egecon__logo { width: clamp(150px, 20vw, 220px); height: auto; margin-bottom: var(--sp-7); }
.egecon__corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) {
  .egecon__corpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-10); }
}
.marcos--light .marcos__valor { color: var(--sand-400); }
@media (min-width: 900px) { .leituras--tres { grid-template-columns: repeat(3, 1fr); } }
.egecon__galeria-titulo {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.egecon__galeria-titulo + .obras { margin-top: var(--sp-5); }
.egecon__convite { max-width: 44ch; color: var(--text-on-dark-mute); text-wrap: pretty; }

/* ── Loja conceito ──────────────────────────────────────────────────────── */
.loja { background: var(--sand-100); }
.loja__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .loja__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-10); }
}
.loja__chamada {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--petrol-800);
}
.loja__acoes { display: flex; margin-top: var(--sp-2); }
@media (max-width: 519px) { .loja__acoes .btn { width: 100%; } }
.loja__card {
  padding: var(--sp-6);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.loja__card-titulo {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.loja__endereco {
  margin-top: var(--sp-4);
  font-style: normal;
  line-height: 1.7;
}
.loja__links { display: grid; gap: var(--sp-1); margin-top: var(--sp-5); }
.loja__links a {
  display: inline-block;
  padding-block: var(--sp-3) calc(var(--sp-3) - 2px);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--accent-ink);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.loja__links a:hover { color: var(--petrol-800); border-bottom-color: var(--petrol-800); }
.footer__stand a { color: inherit; text-underline-offset: 3px; }

/* ── Painel de pré-reserva em fundo claro (pedido da cliente, 10/09) ───────
   Só o fundo do cadastro muda: vira papel, para saltar da fotografia escura.
   Como os campos foram desenhados para o painel escuro, tudo que fica dentro
   dele recebe aqui a versão para fundo claro. */
.hero__form,
.hero__form.reserva__panel {
  background: var(--paper);
  border-color: rgba(206, 189, 154, .6);
  color: var(--petrol-800);
}
@media (max-aspect-ratio: 5 / 4), (max-height: 640px) {
  .hero__form { background: var(--paper); box-shadow: var(--shadow-md); }
}
.hero__form .eyebrow { color: var(--accent-ink); }
.hero__form-title em { color: var(--accent-ink); }
.hero__form-text,
.hero__form .field__help,
.hero__form .check__label,
.hero__form .form__legal { color: var(--text-mute); }
.hero__form .field__label,
.hero__form .field__req,
.hero__form .check__label a { color: var(--accent-ink); }
.hero__form .field__input {
  background: var(--white);
  color: var(--petrol-800);
  border-color: rgba(20, 46, 47, .22);
}
.hero__form .field__input::placeholder { color: rgba(92, 106, 100, .7); }
.hero__form .field__input:hover { border-color: rgba(20, 46, 47, .45); }
.hero__form .field__input:focus { background: var(--white); border-color: var(--petrol-800); }
.hero__form .field__input[aria-invalid='true'],
.hero__form .check__input[aria-invalid='true'] { border-color: var(--danger); }
.hero__form .field__error,
.hero__form .form__status { color: var(--danger); }
.hero__form .check__input {
  background: var(--white);
  border-color: rgba(20, 46, 47, .3);
}
.hero__form .check__input:hover { border-color: var(--petrol-800); }
.hero__form .check__input:checked { background: var(--petrol-800); border-color: var(--petrol-800); }
.hero__form .check__input:checked::after { border-color: var(--paper); }
.hero__form .form-success__icon { stroke: var(--petrol-800); }
.hero__form .form-success__title,
.hero__form .form-fallback__title { color: var(--petrol-800); }
.hero__form .form-success__text,
.hero__form .form-fallback__text { color: var(--text-mute); }
.hero__form :focus-visible { outline-color: var(--petrol-800); }
/* O botão de areia sobre o papel precisa de um degrau a mais de contraste
   com o painel: borda um tom abaixo e hover mais fechado, não mais aberto. */
.hero__form .btn--sand { --btn-border: #BFAC86; }
.hero__form .btn--sand:hover { --btn-bg: #BFAC86; --btn-border: #BFAC86; }
/* "Solicitar apresentação VIP" é mais longo que os outros CTAs: em 390px ele
   quebrava em duas linhas. Tracking mais fechado e corpo um ponto menor. */
.hero__form .btn--block { letter-spacing: .06em; font-size: .875rem; padding-inline: var(--sp-4); }

/* ── Rooftop: números em linha e galeria em carrossel ─────────────────── */
.rooftop .prosa { margin-bottom: clamp(2rem, 5vw, 3rem); }
.marcos--linha {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--sp-6) var(--sp-12);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.marcos--linha .marcos__item { padding-top: 0; border-top: 0; }
.marcos--linha .marcos__label { margin-top: var(--sp-2); }
@media (max-width: 519px) { .marcos--linha { grid-template-columns: 1fr; gap: var(--sp-5); } }

.carrossel { margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.carrossel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.carrossel__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.carrossel__titulo em { font-style: italic; font-weight: 400; color: var(--accent-ink); }
.carrossel__setas { display: flex; gap: var(--sp-2); flex: none; }
.carrossel__seta {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(20, 46, 47, .3);
  border-radius: 50%;
  color: var(--petrol-800);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.carrossel__seta:hover { background: var(--petrol-800); border-color: var(--petrol-800); color: var(--paper); }
.carrossel__seta[disabled] { opacity: .35; cursor: default; }
.carrossel__seta[disabled]:hover { background: transparent; color: var(--petrol-800); border-color: rgba(20, 46, 47, .3); }
.carrossel__seta .icon { width: 1.25rem; height: 1.25rem; }
/* Sem script não há setas: a faixa rola no dedo e na barra do mesmo jeito. */
.no-js .carrossel__setas, .js-failed .carrossel__setas { display: none; }

/* A faixa sangra até a borda da tela no celular, para a próxima foto
   aparecer de canto e avisar que dá para passar o dedo. */
.carrossel__lista {
  display: flex;
  gap: var(--sp-4);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrossel__lista::-webkit-scrollbar { display: none; }
.carrossel__item {
  flex: 0 0 86%;
  scroll-snap-align: start;
}
@media (min-width: 600px) { .carrossel__item { flex-basis: calc((100% - var(--sp-4)) / 2); } }
@media (min-width: 1240px) {
  .carrossel__lista { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; gap: var(--sp-5); }
  .carrossel__item { flex-basis: calc((100% - var(--sp-5)) / 2); }
}
.carrossel__item .obra__fig img { aspect-ratio: 3 / 2; }
@media (max-width: 599px) { .carrossel__item .obra__fig img { aspect-ratio: 4 / 3; } }
.carrossel__item .obra__cap { font-size: var(--fs-label); letter-spacing: .12em; }
.carrossel__nota { margin-top: var(--sp-3); font-size: .8125rem; line-height: 1.6; color: var(--text-mute); }

/* ── Marcas: Andrade abrindo a poesia do tempo; Egecon + Coleção Beira-Mar ── */
/* A marca do Andrade abrindo seções, no mesmo gesto do logo da Egecon:
   petróleo no papel, areia no verde. */
.marca { width: clamp(170px, 22vw, 250px); height: auto; margin-bottom: var(--sp-6); }
.marca--grande { width: clamp(220px, 30vw, 360px); margin: 0 auto; }
.marca-fecho {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-on-dark);
  text-align: center;
}
.marca-fecho + .frase { max-width: none; margin-top: var(--sp-6); padding-top: 0; border-top: 0; text-align: center; margin-inline: auto; max-width: 34ch; }

/* Marca d'água nas perspectivas do projeto: a assinatura do Andrade no
   canto de cada render, como no material impresso. Só nos renders, nunca
   em fotografia real. */
.banda--render .banda__quadro::after {
  content: '';
  position: absolute;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  width: clamp(88px, 12vw, 150px);
  aspect-ratio: 1422 / 352;
  background: url("assets/brand/logo-andrade-light.svg") no-repeat center / contain;
  filter: drop-shadow(0 1px 6px rgba(9, 26, 27, .55));
  opacity: .92;
  pointer-events: none;
}
.egecon__marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-8);
  margin-bottom: var(--sp-7);
}
.egecon__marcas .egecon__logo { margin-bottom: 0; }
.egecon__colecao {
  width: clamp(170px, 22vw, 240px);
  height: auto;
  padding-left: var(--sp-8);
  border-left: 1px solid var(--line-on-dark);
}
@media (max-width: 519px) { .egecon__colecao { padding-left: 0; border-left: 0; } }
.footer__colecao { width: 150px; height: auto; }