:root {
  --forest: #062a22;
  --river: #07546a;
  --mist: #e4ece7;
  --limestone: #c6d2cb;
  --light: #f7fbf8;
  --ink: #07110f;
  --whatsapp: #25d366;
  --whatsapp-hover: #1fbb59;
  --whatsapp-ink: #053d2b;
  --display: "Gloock", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --utility: "IBM Plex Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(6rem, 12vw, 11rem);
  /* Escala tipografica (revisao de design, 21/08). Antes: 6 regras de h2 com 6
     clamps diferentes e 2 familias; h3 de capitulo maior que h2 de secao. */
  --type-display: clamp(4rem, 9.4vw, 9rem);
  /* Os minimos importam tanto quanto os maximos: com 3.2/2.2/1.9rem os tres
     degraus colidiam em 375px (h1 58 vs h2 51 = 1,14x, contra 1,56x no desktop). */
  --type-section: clamp(2.4rem, 6vw, 6.5rem);
  --type-chapter: clamp(1.85rem, 3.8vw, 3.6rem);
  --type-card: clamp(1.55rem, 3vw, 3rem);
  /* Sombra da copa: quebra o limite clube->bosque, que eram dois forest seguidos. */
  --canopy: #04211b;
  /* Fase D: raio unico, duas familias (midia + cards). CTA fica em 999px. */
  --radius: 4px;
  /* Face utilitaria: eram 6 papeis com 6 tamanhos (9,6-12,6px) e 6 tracking
     diferentes. Tres papeis, tres tamanhos. */
  --util-label: 0.78rem;
  --util-note: 0.8rem;
  --util-caption: 0.875rem;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
h1,
h2,
p,
figure,
blockquote {
  margin-top: 0;
}
:focus-visible {
  outline: 3px solid var(--focus-color, var(--forest));
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1rem;
  background: var(--light);
  color: var(--forest);
  font: 500 var(--util-label) var(--utility);
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}
.eyebrow {
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow--dark {
  color: var(--forest);
}
.site-header,
.hero,
.club,
.location,
.final-cta,
footer {
  --focus-color: var(--light);
}
.is-disabled {
  cursor: not-allowed;
  opacity: 0.56;
}
.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 2rem;
  padding: 1.35rem var(--gutter);
  color: var(--light);
  transition:
    background 0.35s,
    padding 0.35s;
}
.site-header.is-solid {
  background: rgba(6, 42, 34, 0.96);
  padding-block: 0.85rem;
  backdrop-filter: blur(12px);
}
.brand {
  display: block;
  text-decoration: none;
}
.brand img {
  width: clamp(6.5rem, 9vw, 9rem);
  height: auto;
}
.site-header nav {
  display: flex;
  gap: 1.8rem;
  margin-left: auto;
}
.site-header nav a,
.header-cta {
  font-size: var(--util-caption);
  text-decoration: none;
}
.site-header nav a {
  opacity: 0.78;
}
.site-header nav a:hover {
  opacity: 1;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid currentColor;
  padding: 0.4rem 0;
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  color: inherit;
  width: 2.75rem;
  height: 2.75rem;
}
.menu-toggle i {
  display: block;
  width: 1.4rem;
  border-top: 1px solid;
  margin: 0.35rem auto;
}
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--forest);
  color: var(--light);
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(3, 22, 18, 0.8) 0%,
      rgba(3, 22, 18, 0.25) 58%,
      rgba(3, 22, 18, 0.08)
    ),
    linear-gradient(0deg, rgba(3, 22, 18, 0.72), transparent 48%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  padding: 9rem var(--gutter) 8rem;
}
.hero h1 {
  max-width: 9.7ch;
  margin: 0.8rem 0 2rem;
  font-size: clamp(4rem, 9.4vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.82;
}
.hero-bottom {
  display: flex;
  max-width: 58rem;
  align-items: end;
  gap: 4rem;
}
.hero-bottom > p {
  max-width: 29rem;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.horizon-rail {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(247, 251, 248, 0.55);
  padding-top: 0.65rem;
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
}
/* Task 10: era a menor coisa da secao, sendo a unica que deveria governar. */
.facts-intro {
  font: 400 var(--type-chapter) / 1.05 var(--display);
  letter-spacing: -0.03em;
}
.proof dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 18rem));
  margin: 0;
}
.proof dl div {
  border-left: 1px solid var(--limestone);
  padding-left: clamp(1rem, 3vw, 2.5rem);
}
.proof dt {
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proof dd {
  margin: 1.1rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.06em;
}
.proof dl small {
  display: block;
  font: 500 var(--util-note) var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-cta h2 {
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.055em;
}
.essence-copy > p:not(.eyebrow) {
  max-width: 31rem;
  margin-top: 2rem;
  font-size: 1.1rem;
}
.territory {
  padding: 4rem var(--gutter) var(--section);
}
.club {
  background: var(--forest);
  color: var(--light);
}
.club-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  padding: clamp(5rem, 9vw, 8rem) 0 3rem;
}
.club h2 {
  max-width: 10ch;
  margin: 0;
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.055em;
}
/* Task 13, reducao 1: a abertura do clube era o maior bloco de #vida. */
.club-opening img {
  max-height: clamp(20rem, 46vh, 34rem);
  object-fit: cover;
}
.club-scene {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr;
  align-items: end;
  gap: 2rem;
}
.club-scene img {
  height: clamp(24rem, 48vw, 44rem);
  object-fit: cover;
  object-position: center 60%;
}
.club-scene p {
  max-width: 18rem;
  font-size: 1rem;
}
.lots {
  display: block;
  background: var(--limestone);
}
.lots-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.lots-copy,
.lots-media {
  min-width: 0;
}
.lots-media {
  width: 100%;
  max-width: 36rem;
  justify-self: end;
}
/* V7: a prova nasce de #agora + .address-access + #realizacao. */
.proof {
  background: var(--light);
}
.horizon-rail--dark {
  border-color: rgba(7, 17, 15, 0.35);
}
.lots-card {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--forest);
}
.lots-card .data-value {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  letter-spacing: -0.06em;
}
.lots-card .data-value small {
  font-size: 0.42em;
  letter-spacing: 0;
}
.lots-decision {
  padding-top: 0;
  max-width: 64ch;
}
.lots-decision h2 {
  max-width: 16ch;
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.055em;
}
.lots-decision p {
  margin: 2rem 0;
  max-width: 28rem;
}
.location {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  column-gap: clamp(3rem, 8vw, 9rem);
  background: var(--river);
  color: var(--light);
}
.location > .horizon-rail {
  grid-column: 1/-1;
}
.location-copy p:not(.eyebrow) {
  max-width: 29rem;
  margin-top: 2rem;
}
.final-cta {
  position: relative;
  min-height: 72svh;
  background: var(--forest);
  color: var(--light);
}
.final-cta > .eyebrow {
  margin-top: clamp(5rem, 9vw, 8rem);
}
.final-cta h2 {
  max-width: 10ch;
}
.cta-note {
  font: 500 var(--util-note) var(--utility);
  letter-spacing: 0.05em;
  opacity: 0.62;
  text-transform: uppercase;
}
.lots-decision .cta-note {
  margin: 0.75rem 0 0;
}
.sticky-cta {
  position: fixed;
  z-index: 15;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: var(--light);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  color: var(--forest);
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(150%);
  transition: transform 0.3s;
}
.sticky-cta.is-visible {
  transform: translateY(0);
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--gutter);
  background: #031c17;
  color: var(--light);
  font: 400 var(--util-note) var(--utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
footer span {
  opacity: 0.72;
}
@media (max-width: 56rem) {
  .site-header nav {
    display: none;
    position: absolute;
    top: 4.8rem;
    right: 1rem;
    left: 1rem;
    flex-direction: column;
    gap: 0;
    padding: 1rem;
    background: var(--forest);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22);
  }
  .site-header nav.is-open {
    display: flex;
  }
  .site-header nav a {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .menu-toggle i {
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded="true"] i:first-of-type {
    transform: translateY(0.18rem) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] i:last-of-type {
    transform: translateY(-0.18rem) rotate(-45deg);
  }
  .header-cta {
    display: none;
  }
  .hero-copy {
    padding-bottom: 8rem;
  }
  .hero h1 {
    font-size: clamp(3.8rem, 17vw, 6rem);
  }
  .hero-bottom {
    display: block;
  }
  .hero-bottom > p {
    max-width: 21rem;
  }
  .hero-bottom .round-action {
    margin-top: 2rem;
  }
  .proof dl {
    overflow-x: auto;
  }
  .proof dl div {
    min-width: 9rem;
  }
  .club-heading,
  .club-scene {
    grid-template-columns: 1fr;
  }
  .club-heading {
    gap: 1rem;
  }
  .club-scene p {
    max-width: 30rem;
  }
      .location {
    grid-template-columns: 1fr;
  }
  .final-cta {
    min-height: auto;
    padding-bottom: 7rem;
  }
  .sticky-cta {
    display: flex;
  }
  footer {
    flex-direction: column;
  }
}
@media (max-width: 34rem) {
  .hero-copy {
    padding-inline: 1.1rem;
  }
  .hero h1 {
    font-size: 3.65rem;
  }
  .horizon-rail span:last-child {
    display: none;
  }
  .proof dl {
    margin-right: calc(var(--gutter) * -1);
  }
  .location h2,
  .final-cta h2 {
    font-size: 3.4rem;
  }
  .club-scene img {
    height: 28rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.club-scene img {
  object-position: center;
}
.lots {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* V2.2 real hero + preserved sunset artwork */
.hero-image--real {
  object-position: center 52%;
}
.address-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.address-video {
  margin: 0 0 clamp(3rem, 7vw, 6rem);
  aspect-ratio: 16/7;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--forest);
}
/* V8: a hero passou a ser foto noturna (mediana 18). O sombreado antigo, calibrado
   para foto diurna, deixava so 2,9% da imagem visivel na zona do texto e entregava
   17,4:1 de contraste, quase 4x o exigido. Aliviado: sobram 35,8% da foto e o
   contraste segue em 13,6:1. */
.hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(3, 22, 18, 0.45) 0%,
      rgba(3, 22, 18, 0.22) 52%,
      rgba(3, 22, 18, 0.08)
    ),
    linear-gradient(0deg, rgba(3, 22, 18, 0.35), transparent 52%);
}
@media (max-width: 56rem) {
  .hero-image--real {
    object-position: 54% center;
  }
}

/* V2.3 direct-response: sistema de CTA WhatsApp, ênfase no hero, facts empilhado no mobile, notas legíveis */
.hero-bottom strong {
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--whatsapp);
  padding-bottom: 0.12rem;
}
.hero-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.hero-reassure {
  margin: 0;
  font: 500 var(--util-note) var(--utility);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.82;
}
.wa-button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.55rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: var(--whatsapp-ink);
  font: 600 0.84rem var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.wa-button:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 0.95rem 2.1rem rgba(0, 0, 0, 0.36);
}
.wa-glyph {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  fill: currentColor;
}
.sticky-cta {
  background: var(--whatsapp);
  color: var(--whatsapp-ink);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.cta-note,
.lots-decision .cta-note {
  opacity: 0.72;
}
footer {
  font-size: var(--util-note);
}
@media (max-width: 56rem) {
  .lots-layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-top: 4rem;
  }
  .lots-media {
    max-width: none;
    justify-self: stretch;
  }
  .proof dl {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible;
    margin-right: 0;
  }
  .proof dl div {
    min-width: 0;
    border-left: 0;
    border-top: 1px solid var(--limestone);
    padding: 1.1rem 0 0;
  }
  .proof dl div:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .hero-actions {
    margin-top: 2rem;
  }
}
@media (max-width: 34rem) {
  .proof dl {
    margin-right: 0;
  }
  .hero-actions {
    align-self: stretch;
  }
  .wa-button {
    width: 100%;
    justify-content: center;
  }
}

/* V2.4 — profundidade comercial sem alterar a composição-base */
.realization {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(3rem, 10vw, 10rem);
  align-items: start;
  background: var(--mist);
}
.realization h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--forest);
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.06em;
}
.realization div p {
  max-width: 29rem;
  margin: 2rem 0 0;
  font-size: 1.05rem;
}
@media (max-width: 56rem) {
  .realization {
    grid-template-columns: 1fr;
  }
  .realization {
    gap: 2rem;
  }
}

/* V2.4 (2026-07-13): marco de entrega + distâncias reais + condições com incorporadora */
.facts-lead {
  /* Task 10: o status vem ao lado da manchete, nao embaixo. */
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .facts-lead {
    grid-template-columns: 1fr;
  }
}
/* A marca nao e foto: precisa escapar do arquetipo do split, que impoe
   aspect-ratio 4/5 e object-fit cover em qualquer img filha da figure. */
.realizacao > figure {
  overflow: visible;
  background: none;
}
.realizacao > figure img.realizacao-mark {
  width: min(100%, 15rem);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.facts-milestone {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  border-top: 1px solid var(--limestone);
  padding-top: 1.1rem;
}
.facts-milestone span {
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.facts-milestone strong {
  font: 400 clamp(1.3rem, 2.2vw, 1.9rem) var(--display);
  letter-spacing: -0.02em;
}
.lots-decision p strong {
  font-weight: 600;
  border-bottom: 1px solid var(--forest);
  padding-bottom: 0.05rem;
}

/* V2.5 — revisão final: clube orientado a benefício, endereço integrado e conversão consistente */
[id] {
  scroll-margin-top: 5rem;
}
.hero-copy {
  padding-bottom: 4.5rem;
}
.facts-milestone small {
  max-width: 28rem;
  margin-top: 0.35rem;
  font-size: var(--util-note);
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.72;
}
.experiences .experience-list {
  max-width: 29rem;
  margin: 0;
  font-size: var(--util-caption);
  line-height: 1.7;
  opacity: 0.68;
}
/* Pedido de 04/09: os botoes flutuavam a direita enquanto todo o texto e
   alinhado a esquerda, entao ficavam desligados do que concluem. Passam a
   sentar no mesmo eixo de leitura. */
.section-conversion {
  display: flex;
  justify-content: flex-start;
  padding-top: clamp(2rem, 4vw, 3rem);
}
.address {
  background: var(--river);
  color: var(--light);
  --focus-color: var(--light);
}
.address-intro {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 1.5rem clamp(3rem, 8vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.address-intro .eyebrow {
  grid-column: 1;
}
.address-intro h2 {
  grid-column: 2;
  max-width: 12ch;
  margin: 0;
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.055em;
}
.address-intro > p:last-child {
  grid-column: 2;
  max-width: 38rem;
  margin: 1rem 0 0;
  font-size: 1.05rem;
}
.address-chapter {
  border-top: 1px solid rgba(247, 251, 248, 0.45);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.chapter-label {
  margin: 0;
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}
.address-location {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(3rem, 8vw, 9rem);
}
.address-location dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
}
.address-location dl div {
  border-left: 1px solid rgba(247, 251, 248, 0.25);
  padding-left: 1.25rem;
}
.address-location dt {
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}
.address-location dd {
  margin: 0.7rem 0 0;
  font: 400 clamp(2.5rem, 5vw, 5rem)/1 var(--display);
}
.address-location small {
  font: 500 var(--util-note) var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.address-access {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 8vw, 9rem);
}
.address-access h3 {
  max-width: 18ch;
  margin: 1.2rem 0 0;
  font: 400 var(--type-chapter)/1.05 var(--display);
  letter-spacing: -0.04em;
}
.address-access ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.address-access li {
  border-top: 1px solid rgba(247, 251, 248, 0.28);
  padding: 1.25rem 1rem 1.25rem 0;
  font-size: 0.92rem;
}
.access-photo {
  grid-column: 1/-1;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.access-photo img {
  width: 100%;
  height: auto;
}
.access .access-photo {
  aspect-ratio: 3/1;
}
.access .access-photo img {
  height: 100%;
  object-fit: cover;
  object-position: center 85%;
  filter: brightness(0.9) contrast(1.08) saturate(1.02);
}
.address > .section-conversion {
  border-top: 1px solid rgba(247, 251, 248, 0.45);
}
.realization {
  padding-block: clamp(5rem, 8vw, 7rem);
}
.final-cta {
  min-height: auto;
  padding-block: clamp(5rem, 9vw, 8rem);
}
.final-cta > .eyebrow {
  margin-top: 0;
}
.final-cta h2 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
}
.final-cta-copy {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  font-size: 1.08rem;
}
.final-cta .wa-button {
  position: static;
}
footer a {
  text-underline-offset: 0.25rem;
  opacity: 0.78;
}
footer a:hover {
  opacity: 1;
}
.privacy-page {
  background: var(--light);
}
.privacy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  background: var(--forest);
  color: var(--light);
}
.privacy-header a {
  text-decoration: none;
}
.privacy-header .text-action {
  width: auto;
  border: 0;
  padding: 0;
}
.privacy-content {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}
.privacy-content h1 {
  max-width: 12ch;
  margin: 0.8rem 0 2rem;
  font: 400 clamp(3.2rem, 7vw, 6.5rem)/0.95 var(--display);
  letter-spacing: -0.06em;
}
.privacy-content > .privacy-lead {
  max-width: 42rem;
  margin-bottom: 4rem;
  font-size: 1.08rem;
}
.privacy-content section {
  border-top: 1px solid var(--limestone);
  padding: 2rem 0;
}
.privacy-content h2 {
  margin: 0 0 1rem;
  font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--display);
}
.privacy-content p,
.privacy-content li {
  max-width: 45rem;
}
.privacy-content li + li {
  margin-top: 0.5rem;
}
@media (max-width: 56rem) {
  .access .access-photo {
    aspect-ratio: 5/2;
  }
  body {
    padding-bottom: 4.6rem;
  }
  .hero-copy {
    padding-bottom: 4.5rem;
  }
      .address-intro,
  .address-location,
  .address-access {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .address-intro .eyebrow,
  .address-intro h2,
  .address-intro > p:last-child {
    grid-column: 1;
  }
  .address-location dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .privacy-page {
    padding-bottom: 0;
  }
}
@media (max-width: 34rem) {
  .hero-copy {
    padding-bottom: 3rem;
  }
      .address-intro h2 {
    font-size: 3.35rem;
  }
  .address-location dl,
  .address-access ul {
    grid-template-columns: 1fr;
  }
  .address-location dl div {
    border-top: 1px solid rgba(247, 251, 248, 0.25);
    border-left: 0;
    padding: 1rem 0;
  }
  .address-location dl div:first-child {
    border-top: 0;
  }
  .section-conversion .wa-button {
    width: 100%;
  }
  .privacy-header {
    gap: 1rem;
  }
}

/* V2.6 — Clube sem sobreposição e galeria ampliável */
.experiences .experience-list {
  max-width: 34rem;
}
.gallery-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.gallery-trigger:focus-visible {
  outline-color: var(--light);
}
.gallery-trigger img {
  width: 100%;
  height: clamp(12rem, 22vw, 22rem);
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery-trigger:hover img {
  transform: scale(1.025);
}
.gallery-lightbox {
  width: min(92vw, 78rem);
  height: min(90vh, 58rem);
  padding: 3.5rem 1rem 1rem;
  border: 0;
  background: #020b09;
  color: var(--light);
}
.gallery-lightbox::backdrop {
  background: rgba(1, 9, 7, 0.9);
  backdrop-filter: blur(5px);
}
.gallery-lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: transparent;
  color: var(--light);
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
body.lightbox-open {
  overflow: hidden;
}
.cookie-consent {
  position: fixed;
  z-index: 30;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1.25rem;
  background: var(--light);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  color: var(--ink);
}
.cookie-consent[hidden] {
  display: none;
}
.cookie-consent strong {
  display: block;
  font-size: 0.88rem;
}
.cookie-consent p {
  max-width: 52rem;
  margin: 0.3rem 0 0;
  font-size: var(--util-caption);
  line-height: 1.45;
}
.cookie-consent a {
  text-underline-offset: 0.2em;
}
.cookie-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
}
.cookie-consent button {
  min-width: 7rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font: 600 var(--util-caption) var(--sans);
  cursor: pointer;
}
.cookie-consent button[data-cookie-choice="accept"] {
  background: var(--forest);
  color: var(--light);
}
@media (max-width: 56rem) {
  .club-scene {
    display: block;
  }
  .club-scene p {
    margin: 1.25rem 0 0;
  }
  .experience-media .gallery-trigger {
    min-width: 0;
  }
  .experience-media .gallery-trigger img {
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  .gallery-lightbox {
    width: 94vw;
    height: 82vh;
    padding: 3.5rem 0.65rem 0.65rem;
  }
}
@media (max-width: 56rem) {
  .cookie-consent {
    right: 0.75rem;
    bottom: 5.75rem;
    left: 0.75rem;
    display: block;
    padding: 1rem;
  }
  .cookie-consent__actions {
    margin-top: 0.8rem;
  }
  .cookie-consent button {
    flex: 1;
  }
  .cookie-consent p {
    font-size: var(--util-caption);
  }
}

/* V2.9 — Clube em territórios com foto (C2) + Essência com natureza (E3) */
.territory-card h3 {
  margin: 0 0 0.75rem;
  font: 400 var(--type-card)/1 var(--display);
  letter-spacing: -0.02em;
}
.territory-card .experience-promise {
  max-width: 26rem;
  margin: 0 0 0.6rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  opacity: 1;
}
.territory-card .experience-list {
  max-width: 30rem;
  margin: 0;
  font-size: var(--util-caption);
  line-height: 1.7;
  opacity: 0.68;
}
@media (max-width: 56rem) {
  }

/* Toda midia fotografica compartilha o mesmo acabamento. */
.club-scene img,
.club-band-media img,
.access-photo img,
.hero-image--real {
  filter: saturate(1.02) contrast(1.01);
}

/* Grade dos territorios: caixa de midia identica tenha 1 ou 2 fotos. */
.territory-media--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.address-video {
  aspect-ratio: 16/9;
}

@media (max-width: 56rem) {
  .territory-media,
  .territory-media--pair {
    aspect-ratio: 3/2;
  }
    .address-video {
    aspect-ratio: 4/3;
  }
}

/* V7: o canopy deixa de separar duas secoes e passa a separar dois capitulos
   dentro de #vida. A quebra visual que ele resolvia continua necessaria. */
/* Reordenacao de 05/09 · o bosque saiu de dentro de #vida e virou secao propria
   (#bosque). O campo da copa continua o mesmo, agora aplicado na secao. */
.nature {
  background: var(--canopy);
  color: var(--light);
  --focus-color: var(--light);
  /* Clube e bosque sao um movimento escuro continuo, e a sombra da copa ja faz a
     transicao. Dividir em duas secoes cobrou padding cheio nos dois lados da
     emenda; aqui ela volta a ser uma passagem, nao um vao. */
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.club {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.bosque-video {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  /* Task 13: a aerea do bosque era o maior elemento de #vida (654px a 1280).
     16/7 e a proporcao original de .address-video, e a cena e panoramica:
     letterbox aqui nao corta assunto, so devolve altura a secao. */
  aspect-ratio: 16/7;
}
.bosque-copy {
  max-width: 38rem;
}
.bosque-copy h2 {
  margin: 0.8rem 0 1.5rem;
  max-width: 12ch;
  font: 400 var(--type-section)/0.98 var(--display);
  letter-spacing: -0.055em;
}
.bosque-copy > p:not(.eyebrow) {
  font-size: 1.05rem;
}
.bosque-copy > .cta-note {
  display: block;
  margin-top: 0.6rem;
}
@media (max-width: 56rem) {
  .bosque-copy {
    max-width: none;
  }
}
.argos-figure {
  max-width: min(100%, 460px);
  justify-self: center;
  filter: drop-shadow(0 26px 22px rgba(3, 17, 13, 0.55));
}
.argos-mark {
  width: clamp(56px, 7vw, 96px);
  height: auto;
  margin-top: 1.5rem;
  opacity: 0.85;
}


/* A aerea noturna deixou de ser lavagem de fundo do #lotes e virou figura contida:
   em 1400px ela e nitida, e o texto ao lado diz por que ela esta ali. */
.lots-proof {
  grid-column: 1/-1;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.lots-proof img {
  width: 100%;
  height: auto;
}
.lots-proof-note {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  /* Unico utilitario em caixa baixa: e uma frase, nao um rotulo. */
  font: 500 var(--util-caption) var(--utility);
  letter-spacing: 0.02em;
  opacity: 0.72;
}
.club-opening {
  display: block;
  grid-column: 1/-1;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  background: none;
  cursor: zoom-in;
}

/* V6 Task 8 — programa de marca. DECISAO 5: a hero nao recebe marca;
   a do header basta. O simbolo carrega a repeticao, o lockup so assina. */
.site-header .brand img {
  height: clamp(30px, 3.4vw, 44px);
  width: auto;
}
.lots-mark {
  position: absolute;
  right: var(--gutter);
  top: clamp(2rem, 6vw, 5rem);
  z-index: 1;
  width: clamp(64px, 9vw, 132px);
  height: auto;
  opacity: 0.12;
  pointer-events: none;
}
.footer-mark {
  width: clamp(96px, 12vw, 132px);
  height: auto;
}

/* V6 rev.2 — logo na hero (Matheus reverteu a DECISAO 5 em 20/08). */
.hero-lockup {
  width: clamp(132px, 15vw, 208px);
  height: auto;
  margin: 0 0 1.1rem;
  opacity: 0.95;
}

/* Argos voltou para dentro do #bosque como painel de fechamento — a separacao
   em secao propria resolvia o efeito adesivo mas fragmentava o capitulo.
   O campo grafico chapado (que era a correcao real) vem junto. */
.argos-panel {
  display: grid;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: radial-gradient(120% 140% at 22% 60%, #0b3a2f 0%, var(--forest) 62%);
}
.argos-panel h3 {
  margin: 0.4rem 0 0.85rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--type-card);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.argos-panel p {
  max-width: 32rem;
}

/* V8 · direcao de arte da hero por largura.
   Medido: com um unico recorte de 1920x912, o object-fit cover numa caixa de
   375x812 deixava visiveis apenas 21,9% da largura da foto. O infinito, que e o
   assunto inteiro da imagem, virava uma tira vertical irreconhecivel justamente
   no celular, que e onde o trafego pago cai. Solucao: recorte 4:3 proprio para
   mobile (o simbolo cabe inteiro) e a hero deixa de ser texto sobre foto para
   ser faixa de imagem seguida de copy em fundo solido. Ganha legibilidade,
   ganha o simbolo, e o CTA sobe para dentro da primeira tela. */
.hero picture {
  display: block;
}
@media (max-width: 56rem) {
  .hero {
    min-height: auto;
  }
  .hero-image {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .hero-shade {
    display: none;
  }
  .hero-copy {
    position: static;
    min-height: auto;
    padding: 2.25rem var(--gutter) 2.75rem;
    background: var(--forest);
  }
}

/* V8 · hero: so a IMAGEM fica presa; a copy verde rola por cima dela e leva o
   resto da pagina junto (correcao do Matheus, 28/08).

   Por que nao prender a secao inteira: a hero presa no topo nunca deixa de
   intersectar a viewport, e o IntersectionObserver da pagina usa exatamente isso
   para `header.is-solid` (`!heroVisible`) e para o CTA fixo do WhatsApp
   (`!heroVisible && !finalVisible`). Prendendo a secao, os dois morrem em
   silencio: cabecalho branco sobre secoes claras e CTA fixo que nunca aparece.
   Prendendo so a imagem, a hero sai da tela na hora certa e o JS segue intacto.

   `overflow: visible` e obrigatorio aqui: o `overflow: hidden` da regra base
   transforma a hero em contexto de rolagem e a imagem sticky nunca se solta.
   Nada precisa ser cortado nessa largura, entao e seguro. */
@media (max-width: 56rem) {
  .hero {
    overflow: visible;
  }
  .hero picture {
    position: sticky;
    top: 0;
    z-index: 0;
  }
  .hero-copy {
    position: relative;
    z-index: 1;
  }
}

/* V8 Task 8 · os tres arquetipos de bloco.
   Antes existia um so, repetido seis vezes (eyebrow + h2 + paragrafo, alinhado a
   esquerda, largura cheia). Funciona duas vezes e vira ruido na sexta: e a causa
   medida do "tudo solto e sem nexo". Nenhum arquetipo aparece duas vezes seguidas
   dentro da mesma secao. */
.chapter-full {
  position: relative;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: var(--radius);
}
/* Pedido de 04/09: a altura fixa com object-fit cover recortava a foto. A 1280
   a caixa dava ratio 2,81 contra 2,11 do arquivo (corte em cima e embaixo); a
   375 dava 0,90, cortando as laterais. A imagem passa a aparecer inteira. */
.chapter-full img {
  display: block;
  width: 100%;
  height: auto;
}
.chapter-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.chapter-split > figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.chapter-split > figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Alternancia por modificador explicito: :nth-of-type nao alterna entre secoes
   diferentes, porque conta irmaos do mesmo tipo dentro do mesmo pai. */
/* O render do bosque e 16:9. O arquetipo padrao do split e retrato 4/5, que
   cortaria a trilha inteira, entao este capitulo declara a propria proporcao. */
.bosque-chapter > figure img {
  /* height: auto e obrigatorio: .gallery-trigger img fixa
     height: clamp(12rem, 22vw, 22rem), e altura explicita vence aspect-ratio. */
  height: auto;
  aspect-ratio: 16 / 9;
}
.bosque-chapter > figure .gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.chapter-split--reverse > figure {
  order: 2;
}
.data-card {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.4rem;
  border-top: 2px solid currentColor;
}
.data-card .data-label {
  margin: 0;
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.data-card .data-value {
  margin: 0;
  font: 400 var(--type-chapter) / 0.95 var(--display);
  letter-spacing: -0.04em;
}
@media (max-width: 56rem) {
  .chapter-split {
    grid-template-columns: 1fr;
  }
.chapter-split--reverse > figure {
    order: 0;
  }
}


/* Reorg 04/09 · #prova em duas faixas.
   Era block com cinco filhos e quatro grids internos diferentes. E os filetes
   vinham de #lugar, que tem fundo escuro: rgba(247,251,248,...) sobre var(--light)
   e invisivel. Aqui eles precisam da cor do fundo claro. */
.proof-ficha {
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.proof-ficha .proof dl,
.proof-ficha dl {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.proof-capitulo {
  border-top: 1px solid var(--limestone);
}
.access .address-chapter {
  border-top-color: var(--limestone);
}
.access .address-access li {
  border-top-color: var(--limestone);
}
/* A assinatura herda o mesmo par de colunas do capitulo da portaria, para a
   faixa ter um ritmo so em vez de 1fr/1fr contra 0.8fr/1.2fr. */
.signature .realizacao {
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  margin-bottom: 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--limestone);
}

/* Pedido de 04/09: o "Gerenciar cookies" competia com os links do rodape.
   Vira contorno, menor e mais discreto, sem perder alvo de toque. */
footer [data-cookie-reopen] {
  align-self: center;
  border: 1px solid rgba(247, 251, 248, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--util-label);
  letter-spacing: 0.08em;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
footer [data-cookie-reopen]:hover,
footer [data-cookie-reopen]:focus-visible {
  border-color: rgba(247, 251, 248, 0.7);
  opacity: 1;
}

.lots-projeto {
  margin: 0;
}
.lots-projeto-nota {
  margin: 0.9rem 0 0;
  color: var(--forest);
}

/* Percurso noturno (04/09) · o clube deixou de ser grade de 4 cards e virou seis
   faixas, uma por espaco. A ordem e espacial e apoiada no que a foto comprova:
   a academia aparece envidracada para o deck, o gourmet olha para as quadras.
   Nunca afirma hora do dia, que foi o remendo que esta direcao veio desfazer. */
.club-percurso {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.club-band {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  isolation: isolate;
}
.club-band-media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* .gallery-trigger img trava height em clamp(12rem,22vw,22rem). Sem isto a faixa
   full-bleed vira uma tira. */
.club-band-media img {
  width: 100%;
  height: auto;
  /* Altura fixa de 486px sobre arquivos de 1,33 a 1,60 dava caixa de 2,60:1 e
     descartava de 39% a 49% de cada foto, cortada em topo e base. Proporcao
     moderada no lugar: a perda cai para 14% a 28%. */
  aspect-ratio: 1.85;
  object-fit: cover;
}
@media (max-width: 56rem) {
  .club-band-media img {
    /* 1,85 a 375px daria 203px de altura, uma tira. */
    aspect-ratio: 1.35;
  }
  /* A aerea de abertura e 2,13 nativo: na caixa das outras ela perdia 41% das
     laterais. Com proporcao propria a perda cai para 11%. */
  .club-band:first-of-type .club-band-media img {
    aspect-ratio: 1.9;
  }
}
.club-band-copy {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  /* Piso de leitura sobre foto: o degrade e o que garante o contraste. */
  /* Calibrado no pior caso, nao na media: a foto do spa tem luminancia 0,63
     contra 0,07 da academia. Com o degrade antigo a linha de infraestrutura
     caia para 3,75 ali, abaixo do minimo de 4,5. */
  background: linear-gradient(to top, rgba(4, 33, 27, 0.97) 0%, rgba(4, 33, 27, 0.88) 54%, rgba(4, 33, 27, 0) 100%);
  pointer-events: none;
}
.club-band-copy > div {
  max-width: 34ch;
}
/* Alternancia pela posicao do bloco, nao pelo alinhamento do texto: texto
   alinhado a direita e pior de ler e nao ganha nada aqui. */
.club-band:nth-of-type(even) .club-band-copy {
  justify-items: end;
}
.club-band h3 {
  margin: 0 0 0.5rem;
  font: 500 clamp(1.6rem, 3.2vw, 2.6rem) / 1.05 var(--sans);
  letter-spacing: -0.02em;
}
.club-band-copy p {
  margin: 0;
  max-width: 32ch;
  font-size: 1rem;
}
@media (max-width: 56rem) {
  .club-band:nth-of-type(even) .club-band-copy {
    justify-items: start;
  }
}

/* Ficha de infraestrutura (05/09) · o resto do clube nao tem foto que aguente
   faixa full-bleed, entao e declarado em vez de ilustrado. Mesmo vocabulario do
   <dl> de #prova, virado para fundo escuro. */
.club-ficha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(3rem, 7vw, 5rem) 0 0;
}
.club-ficha > div {
  border-top: 1px solid rgba(247, 251, 248, 0.28);
  padding-top: 1.1rem;
}
.club-ficha dt {
  font: 500 var(--util-label) var(--utility);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0bc72;
}
.club-ficha dd {
  margin: 0.85rem 0 0;
  max-width: 26ch;
  font-size: 1rem;
}
@media (max-width: 56rem) {
  .club-ficha {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .club-ficha > div {
    margin-top: 1.25rem;
  }
}

/* #acesso e #realizacao saem de dentro de #prova e viram secoes proprias.
   Ficam CLARAS por obrigacao, nao por gosto: o lockup da MJS e tinta escura
   (#c4161c e #231f20) e desaparece em fundo escuro. As duas juntas formam a
   faixa clara de credibilidade entre o bloco escuro de desejo e o fecho. */
.access,
.signature {
  background: var(--light);
}
/* As duas dividem o mesmo fundo e sao vizinhas: com o padding cheio de .territory
   sobravam 217px de vazio entre elas, e a faixa clara lia como uma secao furada
   em vez de duas. O par e um movimento so, separado por filete, nao por vao. */
.access {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.signature {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
.signature > .realizacao {
  border-top: 1px solid var(--limestone);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Pedido de 05/09 · a hero fica presa tambem no desktop, e #lotes rola por cima.
   Mesmo mecanismo que ja existia abaixo de 56rem, agora sem limite de largura.

   overflow: visible e obrigatorio: o overflow: hidden da regra base transforma a
   hero em contexto de rolagem e o sticky nunca solta.

   A secao inteira fica sticky, nao so a imagem, porque no desktop a copy vive
   dentro da foto e as duas precisam ficar juntas. Isso quebraria o
   IntersectionObserver da hero, que nunca mais deixaria de intersectar: por isso
   o landing.js passou a ler heroVisible da posicao de rolagem. */
@media (min-width: 56.01rem) {
  .hero {
    position: sticky;
    top: 0;
    z-index: 0;
    overflow: visible;
  }
  /* TODAS as secoes seguintes precisam pintar por cima, nao so #lotes. Elemento
     posicionado com z-index pinta acima de estatico: com a hero sticky em z-index 0
     e as demais secoes em position static, a hero presa cobria lugar, bosque e
     companhia. Conferido por elementFromPoint, nao por retangulo: comparar
     retangulos nao ve ordem de pintura. */
  main > section:not(.hero) {
    position: relative;
    z-index: 1;
  }
}

/* O letreiro saiu da abertura de #lugar e virou o fecho de #contato, menor:
   la ele abria a secao em largura cheia, aqui ele assina o fim. */
/* Fecho: no desktop o letreiro senta ao LADO do titulo; no mobile ele cai
   logo ABAIXO do titulo, antes da copy e do CTA. A ordem no DOM ja e a do
   mobile (eyebrow, titulo, marca, acao), e o desktop reposiciona por area. */
.final-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "sobrelinha marca"
    "titulo     marca"
    ".          acao";
  align-items: center;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.final-layout > .eyebrow { grid-area: sobrelinha; }
.final-layout > h2 { grid-area: titulo; }
.final-layout > .final-acao { grid-area: acao; }
.final-mark {
  grid-area: marca;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 30rem;
  overflow: hidden;
  border-radius: var(--radius);
}
@media (max-width: 56rem) {
  .final-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sobrelinha"
      "titulo"
      "marca"
      "acao";
    row-gap: clamp(1.5rem, 4vw, 2.25rem);
  }
  .final-mark {
    justify-self: stretch;
    max-width: none;
  }
}
.final-mark img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* 05/09 · o capitulo do bosque deixa de ser split. A foto entra ACIMA da linha
   de infraestrutura, empilhada, e o painel do Argos passa a ter a imagem ABAIXO
   da descricao, nao ao lado. Os dois viram coluna unica, entao as regras de duas
   colunas sairam em vez de ficarem sobrescritas. */
.bosque-chapter {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.bosque-chapter > figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.bosque-chapter .gallery-trigger {
  display: block;
  width: 100%;
}
.bosque-chapter .gallery-trigger img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bosque-chapter > .experience-list {
  margin: 0;
}
/* 05/09 · o Argos volta para a direita no desktop, menor. Empilhado, o painel
   virava quadrado; em duas colunas com a imagem estreita ele volta a ser
   retangulo, que e a proporcao que o bloco pede. O DOM ja tem o texto primeiro,
   entao a imagem cai naturalmente na segunda coluna. */
@media (min-width: 56.01rem) {
  /* Colunas iguais e imagem centralizada: com 1.3fr/0.7fr a coluna da direita
     comecava em 806 e o Argos encostava na margem (866 a 1166). O texto termina
     em 611, entao o vao real vai de 611 a 1166 e o centro dele e ~888. Colunas
     iguais aproximam a imagem desse centro em vez de joga-la no canto. */
  .argos-panel {
    /* Colunas iguais. Tentei 0.92/1.08 para fechar os 21px que faltavam ao
       centro do vao, mas estreitar a coluna 1 reflowa o texto: o fim dele foi
       de 611 para 572 e o centro do vao andou junto, entao o desvio ficou em
       19px, praticamente igual, e o painel subiu de 323 para 365px de altura.
       Menos retangular por 2px de ganho nao compensa. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .argos-panel .argos-figure {
    justify-self: center;
    margin-top: 0;
    max-width: min(100%, 300px);
  }
}
@media (max-width: 56rem) {
  .argos-panel .argos-figure {
    justify-self: center;
    margin-top: clamp(1.25rem, 3vw, 2rem);
  }
}

/* 05/09 · reposicionamento dos CTAs no desktop, a pedido do Matheus. Cada botao
   passa a sentar no vao da propria secao em vez de fechar a coluna de texto.
   Abaixo de 56rem nada muda: as grades viram coluna unica e o DOM ja esta na
   ordem de leitura do mobile. */
@media (min-width: 56.01rem) {
  /* #lotes: abaixo da imagem, na coluna da direita. */
  .lots-layout > .section-conversion {
    grid-column: 2;
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
  }
  /* #lugar: no espaco vazio sob a palavra Localizacao. */
  .address-location {
    align-items: start;
  }
  .address-location > .section-conversion {
    grid-column: 1;
    grid-row: 2;
  }
  /* #prova: sob o status do empreendimento, na coluna da direita. */
  .facts-lead > .section-conversion {
    grid-column: 2;
    grid-row: 2;
  }
  /* #contato: a acao herda a mesma caixa da imagem, senao o botao comeca 42px a
     esquerda dela (a marca e justify-self: end, a area da acao ocupa a coluna). */
  .final-layout > .final-acao {
    justify-self: end;
    width: 100%;
    max-width: 30rem;
  }
}