:root{--navy:#34363a;--navy2:#46494e;--gold:#ffd100;--gold-soft:#e9c74a;--ink:#1c2a35;--muted:#8a97a1;
    --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;}
  *{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-weight:300}
  a{text-decoration:none;color:inherit}
  .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#b99400;margin-bottom:16px}
  .serif-h{font-family:var(--serif);font-weight:500;line-height:1.08}
  .btn{display:inline-block;padding:15px 40px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--navy);color:var(--navy);transition:.35s;cursor:pointer}
  .btn:hover{background:var(--navy);color:#fff}

  /* NAV */
  header{position:sticky;top:0;left:0;right:0;z-index:60;transition:.4s;background:var(--navy);box-shadow:0 4px 18px rgba(0,0,0,.16)}
  .nav{display:flex;align-items:center;justify-content:center;gap:40px;padding:12px 44px;position:relative}
  .nav .left,.nav .right{display:flex;align-items:center;gap:34px;flex:1 1 0;min-width:0}
  /* Os dois lados ocupam metade cada, e o conteúdo de cada um encosta na
     logo: é o que deixa os links agrupados no meio E a logo no centro
     exato. Só centralizar o conjunto (justify-content:center no .nav)
     empurrava a logo 85px para o lado do bloco menor. */
  .nav .left{justify-content:flex-end}
  .nav .right{justify-content:flex-start}
  .nav a.link{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:400;position:relative;padding:6px 0}
  .nav a.link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.35s}
  .nav a.link:hover::after,.nav a.link.active::after{width:100%}
  .nav .logo img{height:44px;display:block;transition:.4s}
  .nav .search{position:absolute;right:44px;top:50%;transform:translateY(-50%);color:#fff;font-size:19px;opacity:.85}
  header.scrolled{background:var(--navy);box-shadow:0 6px 30px rgba(0,0,0,.28)}
  header.scrolled .nav{padding:12px 44px}header.scrolled .nav .logo img{height:44px}

  /* HERO DO EMPREENDIMENTO */
  .dhero{position:relative;height:82vh;min-height:560px;overflow:hidden}
  .dhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .dhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,26,42,.4),rgba(9,26,42,.2) 40%,rgba(9,26,42,.85))}
  .dhero-in{position:absolute;left:0;right:0;bottom:96px;z-index:2;text-align:center;color:#fff;padding:0 44px}
  /* o topo nao mostra mais estagio; a regra fica para o invalucro vazio que a
     previa cria, e para nao quebrar se algum selo voltar um dia */
  .dhero-in .badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
  .dhero-in .badges:empty{display:none}
  /* no topo da pagina o carimbo e maior e fica no canto de cima, a direita --
     onde nao disputa espaco com o nome nem com a chamada de rolagem */
  /* inset:auto antes de tudo: o selo tambem e um <img> dentro do .dhero, entao
     pegava o inset:0 da imagem de fundo (linha 25) -- e com left:0 valendo, o
     right:44px nao tinha efeito e o carimbo colava na esquerda. */
  .dhero .selo-vendido--hero{position:absolute;inset:auto;top:56px;right:44px;z-index:4;
    width:132px;height:auto;object-fit:contain;pointer-events:none;
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}
  @media(max-width:860px){
    .dhero .selo-vendido--hero{top:40px;right:18px;width:88px}
  }
  .dhero-in .badge{background:var(--gold);color:var(--navy);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:7px 16px}
  .dhero-in h1{font-family:var(--serif);font-weight:500;font-size:clamp(48px,7vw,96px);line-height:1}
  .dhero-in .loc{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:14px}

  /* FICHA / SPECS */
  /* auto-fit, nao repeat(5,1fr): com 5 colunas fixas, uma ficha de tres campos
     deixava um vao vazio no canto. Agora as colunas existentes se distribuem
     pela largura toda, quantas forem. */
  .specs{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .specs>div{padding:34px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
  .specs>div:last-child{border-right:0}
  .specs span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  /* Crimson Pro, e nao a Cormorant Garamond do resto do site: a Cormorant tem
     contraste altissimo entre os tracos grossos e os finos, e aqui -- 26px,
     texto claro sobre o azul escuro -- as hastes finas quase somem. Ela
     continua no h1 do topo, em 96px, onde esse contraste e justamente a graca.
     A Crimson e da mesma familia de desenho (old-style), sem o extremo. */
  .specs b{font-family:'Crimson Pro',Georgia,serif;font-size:28px;font-weight:600;letter-spacing:.005em}

  /* SOBRE */
  .block{padding:110px 44px}
  .about{max-width:820px;margin:0 auto;text-align:center}
  .about h2{font-size:clamp(30px,4vw,50px);margin-bottom:24px}
  .about p{font-size:17px;line-height:1.85;color:#42505c;font-weight:300;margin-bottom:22px}
  /* Seção "O empreendimento" — coluna de texto com a altura da imagem:
     título no topo, botão na base, corpo do texto limitado (não passa da imagem). */
  .empi-sobre{padding-top:64px;padding-bottom:64px}
  .empi-sobre .es-wrap{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start}
  .empi-sobre .es-text{display:flex;flex-direction:column;gap:24px;min-height:0}
  .empi-sobre .es-text h2{font-size:clamp(28px,3vw,42px);margin:0;color:#1c2a35}
  .empi-sobre .es-desc{flex:1;min-height:0;overflow:hidden;font-size:15.5px;line-height:1.85;color:#42505c;font-weight:300;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
  .empi-sobre .es-desc p{margin:0 0 14px}
  .empi-sobre .es-text .btn{align-self:flex-start;margin:0}
  .empi-sobre .es-img{background-size:cover;background-position:center;aspect-ratio:16/11;min-height:360px;background-color:#eef1f3;border-radius:16px}
  /* DETALHES DO PROJETO — ícones de infraestrutura, sempre centralizados */
  .empi-detalhes{padding-top:64px;padding-bottom:64px}
  .empi-detalhes .dp-head,.empi-galeria .dp-head,.empi-rel .dp-head{text-align:center;margin-bottom:44px}
  .empi-detalhes .dp-head h2,.empi-galeria .dp-head h2,.empi-rel .dp-head h2{font-size:clamp(24px,2.6vw,34px);margin:0}
  .empi-detalhes .dp-rule,.empi-galeria .dp-rule,.empi-rel .dp-rule{width:52px;height:2px;background:var(--gold);margin:18px auto 0}
  /* o titulo de cada grupo dentro de "Detalhes do projeto" */
  .empi-grupo{max-width:1240px;margin:0 auto 26px;text-align:center;font-family:var(--sans);
    font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold)}
  .empi-carac + .empi-grupo{margin-top:56px}
  .empi-carac{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:34px 22px} /* cabe até 8 itens/linha (134+22); o 9º quebra p/ baixo */
  .empicarac-item{width:134px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px}
  .empicarac-icone{width:80px;height:80px;border-radius:50%;background:rgba(52,54,58,.055);display:flex;align-items:center;justify-content:center}
  .empicarac-icone svg{width:40px;height:40px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .empicarac-icone img{width:46px;height:46px;object-fit:contain}
  .empicarac-text{font-size:13px;line-height:1.45;color:#42505c;font-weight:400}
  @media(max-width:600px){.empicarac-item{width:104px}.empicarac-icone{width:68px;height:68px}.empicarac-icone svg{width:34px;height:34px}}
  @media(max-width:920px){
    .empi-sobre .es-wrap{grid-template-columns:1fr;gap:30px}
    .empi-sobre .es-text{gap:20px}
    .empi-sobre .es-desc{flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
    .empi-sobre .es-img{aspect-ratio:16/10;min-height:220px}
  }

  /* DIFERENCIAIS */
  .feat{background:#f7f8f9}
  .feat .head{text-align:center;max-width:600px;margin:0 auto 54px}
  .feat .head h2{font-size:clamp(28px,3.6vw,44px)}
  .feat .rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}
  .fgrid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px}
  .fitem{text-align:center;padding:10px}
  .fitem .ic{font-size:24px;color:var(--gold);margin-bottom:12px}
  .fitem span{font-size:14px;letter-spacing:.04em;color:var(--ink)}

  /* GALERIA — abas Fotos/Vídeos + carrossel central (foco + vizinhas) + lightbox */
  .empi-galeria{padding-top:64px;padding-bottom:64px;overflow:hidden}
  .eg-tabs{display:flex;justify-content:center;gap:8px;margin:-6px 0 34px}
  .eg-tab{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);background:none;border:0;padding:10px 24px;border-radius:100px;cursor:pointer;transition:.2s}
  .eg-tab:hover{color:var(--navy)}
  .eg-tab.active{color:#fff;background:var(--navy)}
  .eg-panel{display:none}
  .eg-panel.active{display:block}
  .eg-carousel{position:relative;max-width:1280px;margin:0 auto;padding:0 6px}
  .eg-viewport{overflow:hidden;width:100%}
  .eg-track{display:flex;gap:18px;will-change:transform;transition:transform .5s cubic-bezier(.4,0,.2,1)}
  .eg-slide{position:relative;flex:0 0 76%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#eef1f3;border-radius:14px;cursor:zoom-in;opacity:.38;transform:scale(.94);transition:opacity .5s,transform .5s}
  .eg-slide.active{opacity:1;transform:scale(1)}
  /* vídeos: overlay + botão play */
  .eg-video::before{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(9,20,32,.34);transition:.3s}
  .eg-video.active::before{background:rgba(9,20,32,.14)}
  .eg-video{cursor:pointer}
  .eg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.3);transition:.25s}
  .eg-video.active:hover .eg-play{transform:translate(-50%,-50%) scale(1.08)}
  .eg-play::after{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--navy)}
  .eg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:26px;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(52,54,58,.2);transition:.25s}
  .eg-arrow:hover{background:var(--navy);color:#fff}
  .eg-prev{left:2%}.eg-next{right:2%}
  .eg-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
  .eg-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#cdd5dd;cursor:pointer;transition:.25s}
  .eg-dot.active{background:var(--gold);width:24px;border-radius:6px}
  /* lightbox */
  .eg-lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,20,32,.92);display:none;align-items:center;justify-content:center;padding:30px}
  .eg-lightbox.open{display:flex}
  .eg-lb-inner{display:flex;align-items:center;justify-content:center}
  .eg-lb-inner img{max-width:92vw;max-height:88vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .eg-lb-video{width:min(92vw,1100px);aspect-ratio:16/9;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .eg-lb-video iframe{width:100%;height:100%;border:0;border-radius:6px}
  .eg-lb-close{position:absolute;top:20px;right:26px;z-index:2;background:transparent;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer}
  @media(max-width:860px){
    .empi-galeria{padding-bottom:52px}
    .eg-slide{flex:0 0 88%}
    .eg-arrow{display:none}
  }

  /* PLANTA + LOCALIZAÇÃO */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  /* justify-self:start, nao end: o texto acompanha a coluna do mapa em vez de
     ficar preso a borda direita da tela. Com end, o vao entre os dois crescia
     com a largura -- 34px em 1280, 354px em 1920, 674px em 2560 -- e o texto
     parecia de outra secao. Agora a distancia e so o padding, sempre a mesma. */
  .split .txt{padding:90px 60px;align-self:center;max-width:600px;justify-self:start}
  .split .visual{position:relative;min-height:440px;background:#eef1f3;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .split .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .split .visual iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .split .visual .ph{font-size:13px;letter-spacing:.14em;text-transform:uppercase;z-index:2}
  .loc-sec{background:var(--navy);color:#fff}
  .loc-sec .txt .eyebrow{color:var(--gold)}
  .loc-sec .txt h2{color:#fff;font-size:clamp(28px,3.6vw,44px);margin-bottom:18px}
  .loc-sec .txt p{color:rgba(255,255,255,.75);line-height:1.8;font-weight:300;margin-bottom:24px}
  .loc-sec .txt .addr{font-size:14px;letter-spacing:.05em;color:#fff;margin-bottom:26px}
  .loc-btn{display:inline-flex;align-items:center;gap:9px}
  .loc-btn svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* EMPREENDIMENTOS RELACIONADOS */
  .empi-rel{background:#f6f7f8;padding-top:64px;padding-bottom:64px}
  .rel-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .rel-card{position:relative;display:block;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 30px rgba(52,54,58,.08);transition:transform .35s,box-shadow .35s}
  .rel-card:hover{transform:translateY(-6px);box-shadow:0 16px 44px rgba(52,54,58,.16)}
  .rel-img{position:relative;aspect-ratio:3/4;background-size:cover;background-position:center;background-color:#eef1f3}
  .rel-badges{position:absolute;top:14px;left:14px;display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 28px)}
  .rel-badge{background:var(--gold);color:var(--navy);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:100px}
  .rel-badge:empty,.rel-badges:empty{display:none}
  .rel-img .selo-vendido{position:absolute;right:12px;bottom:12px;z-index:3;width:70px;height:auto;pointer-events:none;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .rel-meta{padding:20px 22px 24px}
  .rel-meta h3{font-family:var(--serif);font-size:23px;font-weight:500;color:var(--ink);margin:0 0 6px;line-height:1.18}
  .rel-loc{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:900px){.rel-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.rel-grid{grid-template-columns:1fr;max-width:400px}}

  /* FORM DE INTERESSE */
  .interest{background:#fff;padding:64px 44px}
  .iwrap{max-width:720px;margin:0 auto;text-align:center}
  .iwrap h2{font-size:clamp(30px,4vw,48px);margin-bottom:14px}
  .iwrap p{color:#5a6672;font-size:16px;margin-bottom:40px}
  .iform{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
  .iform .full{grid-column:1 / -1}
  .iform input,.iform textarea{width:100%;border:1px solid #dde3e7;padding:15px 18px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:.3s}
  .iform input:focus,.iform textarea:focus{border-color:var(--navy)}
  .iform textarea{min-height:120px;resize:vertical}
  .iform button{grid-column:1 / -1;justify-self:center;background:var(--navy);color:#fff;border:0;padding:16px 54px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:.3s}
  .iform button:hover{background:var(--gold);color:var(--navy)}

  /* NEWSLETTER / FOOTER / CALLBAR */
  .newsletter{background:var(--navy2);color:#fff;text-align:center;padding:64px 44px}
  .newsletter h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);font-weight:600;margin-bottom:10px}
  .newsletter p{font-size:15px;margin-bottom:28px;color:rgba(255,255,255,.72)}
  .newsletter form{display:inline-flex;max-width:520px;width:100%;border:1px solid rgba(255,255,255,.4)}
  .newsletter input{flex:1;border:0;background:transparent;padding:16px 20px;font-size:15px;font-family:var(--sans);color:#fff;outline:none}
  .newsletter input::placeholder{color:rgba(255,255,255,.5)}
  .newsletter button{background:var(--gold);color:var(--navy);border:0;padding:0 34px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(52,54,58,.92);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);text-align:center;padding:15px 20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
  .callbar b{color:#fff;font-weight:500}.callbar a{color:var(--gold)}
  footer{background:#26282b;color:rgba(255,255,255,.6);padding:64px 44px;font-size:13px}
  .foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:26px;margin-bottom:22px}
  .foot-top img{height:56px}.foot-top nav a{margin-left:26px;color:rgba(255,255,255,.72);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
  footer .copy{text-align:center}

  /* ESTÁGIO DA OBRA */
  .obra{padding-top:64px;padding-bottom:64px}
  .obra .head{text-align:center;max-width:600px;margin:0 auto 20px}
  .obra .head h2{font-size:clamp(28px,3.6vw,44px)}
  .obra .rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}
  .obra .meta{text-align:center;font-size:13px;letter-spacing:.06em;color:var(--muted);margin-bottom:50px}
  .obra .meta b{color:var(--ink);font-weight:600}
  /* círculos de progresso (animam ao entrar na tela) */
  .rings{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:42px 56px}
  .ring-item{display:flex;flex-direction:column;align-items:center;gap:16px;width:150px}
  .ring-name{font-size:13.5px;line-height:1.35;color:#42505c;font-weight:500;text-align:center;min-height:2.7em;display:flex;align-items:flex-end}
  .ring{position:relative;width:130px;height:130px}
  .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .ring circle{fill:none;stroke-width:9}
  .ring-bg{stroke:#e7ebee}
  .ring-fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.33,0,.2,1)}
  .ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:26px;font-weight:600;color:var(--navy)}
  .ring-val{font-variant-numeric:tabular-nums}
  @media(max-width:600px){.rings{gap:34px 30px}.ring-item{width:120px}.ring{width:108px;height:108px}.ring-num{font-size:22px}}
  .timeline{display:flex;gap:12px;overflow-x:auto;max-width:1160px;margin:56px auto 0;padding-bottom:10px}
  .timeline .tl{flex:0 0 210px}
  .timeline .tl img{width:100%;height:135px;object-fit:cover}
  .timeline .tl span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px;text-align:center}

  /* preferências no form */
  .pref{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
  .pref .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:6px}
  .pref label{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap}
  .iform select{width:100%;border:1px solid #dde3e7;padding:15px 18px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;outline:none}

  @media(max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}.bars{grid-template-columns:1fr}}
  @media(max-width:860px){
    .nav{gap:0}   /* a logo fica centralizada pelo justify-content:center da regra base */.nav .left,.nav .right{display:none}
    .specs{grid-template-columns:repeat(2,1fr)}.block{padding:64px 20px}
    .split{grid-template-columns:1fr}.split .txt{padding:56px 22px;justify-self:stretch}
    .iform{grid-template-columns:1fr}
    footer{padding-bottom:96px} /* folga p/ a barra fixa "Ligue agora" (2 linhas no mobile) */
  }