/* ==========================================================================
   Mirante das Palmeiras — sistema visual
   Linguagem: prancha de levantamento. Filetes dourados, cotas, geometria.
   Verde = o lugar (fotográfico).  Creme = o documento (dados, desenhos).
   ========================================================================== */

:root{
  --verde:        #052F2D;
  --verde-alto:   #063836;
  --ouro:         #D8A623;
  --ouro-suave:   #C5A46A;
  --creme:        #F3EFE6;
  --grafite:      #39423F;

  --creme-70: rgba(243,239,230,.70);
  --creme-45: rgba(243,239,230,.45);
  --creme-16: rgba(243,239,230,.16);
  --grafite-60: rgba(57,66,63,.60);
  --verde-12: rgba(5,47,45,.12);

  --display: "Jost", "Avenir Next", Avenir, system-ui, sans-serif;
  --prosa:   "Newsreader", Georgia, "Times New Roman", serif;

  --limite: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ar:     clamp(4rem, 9vw, 7.5rem);   /* respiro vertical de seção */
  --filete: 1px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--creme);
  color:var(--grafite);
  font-family:var(--prosa);
  font-size:1.0625rem;
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; border-radius:2px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ouro); color:var(--verde);
  padding:.75rem 1.25rem; font-family:var(--display); font-weight:500;
}
.pular:focus{ left:1rem; top:1rem; }

.limite{ max-width:var(--limite); margin-inline:auto; padding-inline:var(--gutter); }

/* --------------------------------------------------- tipografia compartilhada */
.titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 4vw, 3.05rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--verde);
  margin:0 0 1.4rem;
  max-width:19ch;
}
.titulo--claro{ color:var(--creme); }

.prosa{ margin:0 0 1.15rem; max-width:62ch; }
.prosa--clara{ color:var(--creme-70); }
.prosa--larga{ max-width:68ch; margin-bottom:2.75rem; }

/* --------------------------------------------------- botões */
.botao{
  display:inline-block;
  font-family:var(--display);
  font-weight:500;
  letter-spacing:.015em;
  text-decoration:none;
  background:var(--ouro);
  color:var(--verde);
  padding:.95rem 1.9rem;
  border:var(--filete) solid var(--ouro);
  transition:background .18s ease, color .18s ease;
}
.botao:hover{ background:transparent; color:var(--ouro); }
.botao--compacto{ padding:.6rem 1.15rem; font-size:.9rem; }
.botao--grande{ font-size:1.0625rem; padding:1.05rem 2.35rem; }

.link-externo{
  font-family:var(--display); font-weight:500; font-size:.95rem;
  color:var(--ouro); text-decoration:none;
  border-bottom:var(--filete) solid var(--ouro-suave);
  padding-bottom:2px;
}
.link-externo:hover{ border-bottom-color:var(--ouro); }

/* --------------------------------------------------- cabeçalho */
.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s ease, border-color .3s ease;
  border-bottom:var(--filete) solid transparent;
}
.cabecalho__interno{
  max-width:var(--limite); margin-inline:auto;
  padding:.85rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.cabecalho__marca{ display:block; line-height:0; }
.cabecalho__marca img{ width:auto; height:clamp(44px, 6vw, 58px); }

.cabecalho.is-colado{
  background:var(--verde);
  border-bottom-color:var(--creme-16);
}

/* --------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--verde);
  overflow:hidden;
}
.hero__fundo{ position:absolute; inset:0; }
.hero__fundo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--verde) 2%, rgba(5,47,45,.93) 20%, rgba(5,47,45,.52) 54%, rgba(5,47,45,.38) 100%),
    linear-gradient(to right, rgba(5,47,45,.78) 0%, rgba(5,47,45,.46) 38%, rgba(5,47,45,.06) 78%, rgba(5,47,45,0) 100%);
}
.hero__conteudo{
  position:relative; z-index:2;
  max-width:var(--limite); margin-inline:auto; width:100%;
  padding:0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}

.selo{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  margin:0 0 1.6rem;
  font-family:var(--display); font-weight:500;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro);
}
.selo span + span{ padding-left:.9rem; border-left:var(--filete) solid var(--ouro-suave); }

.hero__titulo{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.6rem, 8.2vw, 6rem);
  line-height:.98; letter-spacing:-.03em;
  color:var(--creme);
  margin:0 0 1.5rem;
}
.hero__texto{
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  color:var(--creme-70);
  max-width:40ch; margin:0 0 2.2rem;
}

.cotas{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  margin:3rem 0 0;
  border-top:var(--filete) solid var(--creme-16);
}
.cotas__item{
  padding:1.15rem 1.25rem 0 0;
  border-top:2px solid var(--ouro);
  margin-top:-1px;
}
.cotas dt{
  font-family:var(--display); font-weight:400;
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--creme-45);
  margin-bottom:.35rem;
}
.cotas dd{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:1.08rem; color:var(--creme);
}

/* --------------------------------------------------- régua de pilares */
.regua{ background:var(--verde-alto); border-block:var(--filete) solid rgba(197,164,106,.28); }
.regua__interna{
  max-width:var(--limite); margin-inline:auto;
  padding:1.05rem var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,6vw,5rem);
  font-family:var(--display); font-weight:400;
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ouro-suave);
}

/* --------------------------------------------------- seções */
.secao{ padding-block:var(--ar); }
.secao--claro{ background:var(--creme); color:var(--grafite); }
.secao--escuro{ background:var(--verde); color:var(--creme-70); }

/* --------------------------------------------------- conceito */
.conceito{
  display:grid; gap:clamp(2.5rem, 6vw, 5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){ .conceito{ grid-template-columns:1.05fr .95fr; } }

.regras{ list-style:none; margin:2.5rem 0 0; padding:0; }
.regras li{
  padding:1rem 0 1rem 1.6rem;
  border-top:var(--filete) solid var(--verde-12);
  position:relative;
  max-width:52ch;
}
.regras li::before{
  content:""; position:absolute; left:0; top:1.75rem;
  width:.7rem; height:var(--filete); background:var(--ouro-suave);
}
.regras strong{ font-family:var(--display); font-weight:500; color:var(--verde); }

.conceito__desenho{ margin:0; position:sticky; top:6rem; }
.lote{ width:100%; height:auto; display:block; }
.lote__rua{ fill:rgba(57,66,63,.07); }
.lote__area{ fill:rgba(216,166,35,.10); }
.lote__casa{ fill:rgba(5,47,45,.07); }
.lote__divisa{ fill:none; stroke:var(--verde); stroke-width:.35; }
.lote__frente{ fill:none; stroke:var(--ouro); stroke-width:.5; stroke-dasharray:1.6 1.3; }
.lote__cota path{ fill:none; stroke:var(--ouro-suave); stroke-width:.18; }
.lote__cota text{ font-family:var(--display); font-size:1.75px; fill:var(--grafite-60); letter-spacing:.04em; }
.lote__rotulo{ font-family:var(--display); font-size:1.9px; fill:var(--grafite-60); letter-spacing:.14em; text-transform:uppercase; }
.lote__rotulo--casa{ font-size:1.7px; }
.lote__nota{ font-family:var(--display); font-size:1.85px; fill:var(--ouro); letter-spacing:.14em; text-transform:uppercase; }
.conceito__desenho figcaption{
  margin-top:1.2rem; font-size:.9rem; color:var(--grafite-60);
  max-width:40ch; line-height:1.55;
}

/* --------------------------------------------------- blocos duplos */
.dupla{
  display:grid; gap:clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .dupla{ grid-template-columns:1fr 1fr; }
  .dupla--invertida .dupla__texto{ order:2; }
}
.dupla__figura{ margin:0; }
.dupla__figura img{ width:100%; aspect-ratio:1200/724; object-fit:cover; border:var(--filete) solid var(--creme-16); }

.distancias{ margin:2.25rem 0; }
.distancias > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:.85rem 0;
  border-top:var(--filete) solid var(--creme-16);
}
.distancias dt{ color:var(--creme-70); font-size:.98rem; }
.distancias dd{
  margin:0; font-family:var(--display); font-weight:400;
  color:var(--ouro); font-size:1.05rem; white-space:nowrap;
}

/* --------------------------------------------------- galeria */
.galeria{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
}
.galeria__item{ margin:0; position:relative; }
.galeria__item img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border:var(--filete) solid var(--verde-12);
}
.galeria__item--alto{ grid-column:span 2; }
.galeria__item--alto img{ aspect-ratio:16/7; }
@media (max-width:620px){ .galeria__item--alto{ grid-column:span 1; } .galeria__item--alto img{ aspect-ratio:3/2; } }
.galeria__item figcaption{
  margin-top:.6rem;
  font-family:var(--display); font-weight:400;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grafite-60);
}

/* --------------------------------------------------- ficha técnica */
.ficha{
  display:grid; gap:0 clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit, minmax(245px, 1fr));
}
.ficha__grupo{ padding:1.75rem 0; border-top:var(--filete) solid var(--creme-16); }
.ficha__grupo h3{
  font-family:var(--display); font-weight:500;
  font-size:.76rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ouro);
  margin:0 0 1rem;
}
.ficha__grupo ul{ list-style:none; margin:0; padding:0; }
.ficha__grupo li{
  padding:.34rem 0 .34rem 1.1rem; position:relative;
  color:var(--creme-70); font-size:1rem; line-height:1.55;
}
.ficha__grupo li::before{
  content:""; position:absolute; left:0; top:.95rem;
  width:.5rem; height:var(--filete); background:var(--ouro-suave);
}

/* --------------------------------------------------- planta */
.planta{ margin:0; }
.planta__svg{
  display:block; width:100%; height:auto; aspect-ratio:580/421;
  background:rgba(5,47,45,.035);
  border:var(--filete) solid var(--verde-12);
}
.planta figcaption{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  margin-top:1.25rem;
  font-family:var(--display); font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--grafite-60);
}
.legenda{ display:inline-flex; align-items:center; gap:.5rem; }
.chave{ width:.9rem; height:.9rem; display:inline-block; border:var(--filete) solid var(--verde); }
.chave--lote{ background:rgba(216,166,35,.35); }
.chave--verde{ background:rgba(90,140,70,.45); }
.chave--via{ background:transparent; border-style:dashed; }

/* --------------------------------------------------- fechamento */
.fechamento{ background:var(--verde-alto); text-align:center; }
.fechamento__interno{ display:flex; flex-direction:column; align-items:center; }
.fechamento .titulo{ max-width:none; }
.fechamento .prosa{ margin-bottom:2.4rem; }
.fechamento__fone{
  margin:1.5rem 0 0; font-family:var(--display);
  font-size:.95rem; color:var(--creme-45);
}
.fechamento__fone a{ color:var(--creme); text-decoration:none; border-bottom:var(--filete) solid var(--creme-16); }

/* --------------------------------------------------- rodapé */
.rodape{ background:var(--verde); color:var(--creme-45); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.rodape__interno{
  display:grid; gap:2.5rem;
  grid-template-columns:1fr; align-items:center;
  padding-bottom:2.5rem; border-bottom:var(--filete) solid var(--creme-16);
}
@media (min-width:820px){ .rodape__interno{ grid-template-columns:auto 1fr auto; } }
.rodape__marca img{ width:auto; height:60px; opacity:.9; }
.rodape__contato{ font-family:var(--display); font-size:.95rem; line-height:1.9; }
.rodape__contato p{ margin:0; }
.rodape__contato a{ color:var(--creme); text-decoration:none; }
.rodape__incorporacao{ text-align:left; }
@media (min-width:820px){ .rodape__incorporacao{ text-align:right; } }
.rodape__papel{
  margin:0 0 .6rem; font-family:var(--display);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-45);
}
.rodape__incorporacao img{
  width:170px; height:auto; display:inline-block;
  filter:brightness(0) invert(1); opacity:.42;
  transition:opacity .2s ease;
}
.rodape__incorporacao a:hover img{ opacity:.75; }
.rodape__aviso{ padding-top:1.75rem; }
.rodape__aviso p{ margin:0; font-size:.8rem; line-height:1.7; color:rgba(243,239,230,.34); max-width:70ch; }

/* --------------------------------------------------- WhatsApp flutuante */
.flutuante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:45;
  width:54px; height:54px; border-radius:50%;
  background:var(--ouro); color:var(--verde);
  display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(5,47,45,.33);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.flutuante.is-visivel{ opacity:1; visibility:visible; transform:none; }
.flutuante svg{ width:28px; height:28px; fill:currentColor; }

@media (min-width:760px){ .flutuante{ right:1.75rem; bottom:1.75rem; } }