/* Fontes servidas do próprio domínio: nada de terceiro no caminho crítico.
   Ubuntu é a família da identidade da Cury (cury.net serve 300/400/500/700).
   Aqui ficam três pesos: 300 custaria 90 KB para um uso que 400 já resolve. */
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:400;font-display:swap;
  src:url('/fontes/ubuntu-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:400;font-display:swap;
  src:url('/fontes/ubuntu-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:500;font-display:swap;
  src:url('/fontes/ubuntu-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:500;font-display:swap;
  src:url('/fontes/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:700;font-display:swap;
  src:url('/fontes/ubuntu-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Ubuntu";font-style:normal;font-weight:700;font-display:swap;
  src:url('/fontes/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Playfair Display 600, só nos títulos: é a serifa que dá o tom de hotel
   à identidade (briefing, bloco 6). Um peso só, latin e latin-ext — 36 KB.
   Licença OFL, em docs/licencas/. */
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url('/fontes/playfair-display-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url('/fontes/playfair-display-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════
   Cury Carioca — sistema visual
   "Cury, versão concierge" (briefing, bloco 6): parte da paleta da Cury —
   o azul-marinho da Cury continua sendo a âncora — e sobe o tom para quem
   compra de fora. O branco frio das seções alternadas vira marfim quente,
   o latão sai do detalhe e vira a cor de assinatura, e os títulos ganham
   uma serifa de display. O corpo segue em Ubuntu, a família da Cury.
   O verde continua sendo só a cor da ação: onde há verde, há conversa.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TEMA ────────────────────────────────────────────────────────────
   A porta aberta para a cliente mudar de ideia: toda cor de marca e as
   duas famílias de letra moram só neste bloco. Trocar a paleta é editar
   estas linhas — nenhum componente abaixo cita uma cor de marca direto.
   Cores de selo e o verde do WhatsApp ficam fora: são código, não gosto.

   Duas alternativas prontas para mostrar, se a primeira não agradar —
   basta trocar os valores correspondentes:

   B) "Orla"  — mais leve e solar
      --mare:#174A63; --mare-media:#2B7A9B; --mare-clara:#4FA3C2;
      --breu:#0E3346; --areia:#F4F7F6; --latao:#C8794A; --latao-fraco:#F8EDE4;
      --linha:#DCE6E6;

   C) "Noite carioca" — mais sóbria, quase preto e ouro
      --mare:#1B2430; --mare-media:#3B5168; --mare-clara:#6B8299;
      --breu:#0D1218; --areia:#F5F2EE; --latao:#A8853F; --latao-fraco:#F1EADB;
      --linha:#E3DDD3;
   ─────────────────────────────────────────────────────────────────── */
:root {
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto: Ubuntu, "Segoe UI", system-ui, sans-serif;

  /* fundos */
  --papel: #FFFFFF;
  --superficie: #FFFFFF;
  --areia: #F8F4ED;
  --breu: #0F2536;

  /* texto */
  --tinta: #1F262D;
  --secundario: #66707A;
  --papel-texto: #F1ECE3;

  /* a escada de azuis da Cury */
  --mare: #1A374D;
  --mare-media: #2D719F;
  --mare-clara: #3E92CC;
  --ceu: #79BEDF;
  --ceu-fraco: #EEF4F8;

  /* a assinatura: latão */
  --latao-fraco: #F3EBDC;

  /* os quatro estados de um empreendimento */
  --lancamento: #1E9E63;
  --vendido: #C8102E;
  --em-obras: #2D719F;
  --pronto: #D8A62A;

  /* ação */
  --agua: #2D719F;
  --agua-clara: #EAF4FA;
  --zap: #25D366;
  --zap-escuro: #1EA952;
  --latao: #B08A3E;
  --linha: #E6DFD3;

  --medida: 68ch;
  --raio: 5px;
  --raio-pilula: 98px;
  --sombra: 0 1px 2px rgba(26, 55, 77, .05), 0 10px 26px -14px rgba(26, 55, 77, .22);
  --sombra-alta: 0 2px 6px rgba(26, 55, 77, .09), 0 22px 46px -18px rgba(26, 55, 77, .34);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.62 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

picture img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

img { max-width: 100%; height: auto; display: block }
picture { display: block }
a { color: var(--agua); text-underline-offset: 3px }
:focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; border-radius: 4px }

/* ── tipografia ─────────────────────────────────────────────── */

h1, h2, h3 { text-wrap: balance; margin: 0 }

h1 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--mare);
}

h2 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--mare);
}

h3 {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 26px 0 6px;
  color: var(--mare);
}

p { max-width: var(--medida); margin: 0 0 14px }

.rotulo {
  font-family: var(--fonte-texto);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mare-media);
  margin: 0 0 12px;
}
.rotulo a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor }
.rotulo a:hover { color: var(--agua) }

.chamada {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.48;
  color: var(--secundario);
}

/* ── selos de estágio e situação ────────────────────────────── */

.selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; max-width: none }

.selo {
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--areia);
  color: var(--mare);
  white-space: nowrap;
}
/* Quatro estados, quatro cores, sem repetir nenhuma: verde é o que acabou de
   entrar, vermelho é o que acabou, azul é o que está sendo construído e dourado
   é o que já dá para morar. */
.selo.lancamento { background: var(--lancamento); color: #fff }
.selo.vendido { background: var(--vendido); color: #fff }
.selo.obras { background: var(--em-obras); color: #fff }
.selo.pronto { background: var(--pronto); color: #3A2A06 }

/* ── estrutura ──────────────────────────────────────────────── */

.envoltorio { max-width: 1220px; margin: 0 auto; padding: 0 20px }
.secao { padding-block: clamp(38px, 6vw, 72px); border-top: 1px solid var(--linha) }
.secao > h2 { margin-bottom: 18px }
main > .envoltorio > .secao:first-child { border-top: 0 }

/* ── hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  /* a imagem respira até 1.12: sem isto ela empurra a página de lado no celular */
  overflow: hidden;
  background: var(--breu);
  min-height: clamp(440px, 76vh, 720px);
  display: flex;
  align-items: flex-end;
}

.hero picture,
.hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A foto é mais alta que a moldura e fica centrada nela. Essa folga é o que o
   deslocamento de parallax consome ao rolar: sem ela, a imagem desliza para
   dentro da própria borda e abre uma faixa vazia no topo ou no pé do hero. */
.hero picture { top: -10%; height: 120%; will-change: transform }
.hero picture img { animation: respirar 32s ease-in-out infinite alternate }

@keyframes respirar {
  from { transform: scale(1.03) }
  to   { transform: scale(1.12) }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 9, 12, .62) 0%, rgba(7, 9, 12, .10) 26%, rgba(7, 9, 12, .78) 62%, rgba(7, 9, 12, .97) 100%);
}

.hero-texto {
  position: relative;
  z-index: 2;
  width: 100%;
  color: var(--papel-texto);
  padding-top: clamp(120px, 22vw, 220px);
  padding-bottom: clamp(34px, 4.5vw, 58px);
  text-shadow: 0 1px 24px rgba(7, 9, 12, .7);
  animation: subir .7s cubic-bezier(.2, .7, .3, 1) both;
}
.hero-texto h1 { color: #fff }
.hero-texto .chamada { color: #D6D1C6; max-width: 52ch; margin-bottom: 22px }
.hero-texto .rotulo { color: var(--ceu) }
.hero-texto .selo { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(4px) }
/* O código de cores vale na abertura também: azul-claro é lançamento e coral é
   obra. Sem estas linhas a regra translúcida acima, que vem depois na folha e
   tem a mesma força, apagaria a informação que a cor carrega. */
.hero-texto .selo.lancamento { background: var(--lancamento); color: #fff; backdrop-filter: none }
.hero-texto .selo.vendido { background: var(--vendido); color: #fff; backdrop-filter: none }
.hero-texto .selo.obras { background: var(--em-obras); color: #fff; backdrop-filter: none }
.hero-texto .selo.pronto { background: var(--pronto); color: #3A2A06; backdrop-filter: none }

@keyframes subir {
  from { opacity: .001; transform: translateY(18px) }
  to   { opacity: 1; transform: none }
}

/* ── botões ─────────────────────────────────────────────────── */

.cta,
.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 15px 28px;
  border-radius: var(--raio-pilula);
  background: var(--mare);
  color: #fff;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(26, 55, 77, .5);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.cta::after,
.botao::after { content: "→"; font-size: 17px; transition: transform .18s ease }
.cta:hover,
.botao:hover { background: var(--mare-media); transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(26,55,77,.6) }
.cta:hover::after,
.botao:hover::after { transform: translateX(4px) }
.cta:active,
.botao:active { transform: translateY(0) }

.hero-texto .cta { box-shadow: 0 14px 34px -14px rgba(0,0,0,.55) }

/* ── grade de cards ─────────────────────────────────────────── */

.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.card {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.card:hover { box-shadow: var(--sombra-alta); border-color: var(--ceu) }

.card a { text-decoration: none; color: inherit }

.card picture { overflow: hidden; aspect-ratio: 3 / 2; background: var(--areia) }
.card picture img { width: 100%; height: 100%; object-fit: cover }


/* faixa horizontal dos vendidos */
.faixa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Folga para a sombra dos cards, que o overflow cortaria rente. */
  padding: 4px 4px 22px;
  margin-inline: -4px;
  scroll-snap-type: x mandatory;
  /* Sem isto o encaixe pararia o primeiro card a 4px da borda, e a seta
     da esquerda apareceria antes de haver o que voltar. */
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
}
.faixa .card { scroll-snap-align: start }

/* Com as setas (o script da faixa põe a moldura), a barra nativa sai. */
.faixa-moldura { position: relative }
.com-setas .faixa { scrollbar-width: none }
.com-setas .faixa::-webkit-scrollbar { display: none }
.faixa-seta {
  position: absolute;
  top: calc(50% - 34px);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--mare);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--sombra-alta);
  transition: opacity .25s, transform .25s;
}
.faixa-seta:hover:not(:disabled) { transform: scale(1.06) }
.faixa-seta:focus-visible { outline: 2px solid var(--ceu); outline-offset: 2px }
.faixa-seta:disabled { opacity: 0; pointer-events: none }
.faixa-antes { left: -14px }
.faixa-depois { right: -14px }
.sem-rolagem .faixa-seta { display: none }
@media (max-width: 720px) {
  /* No toque o dedo rola a faixa; as setas só cobririam os cards. */
  .faixa-seta { display: none }
}

/* ── galeria de imagens ─────────────────────────────────────── */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.grade picture {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--areia);
  box-shadow: var(--sombra);
}
.grade picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.3,1) }
.grade picture:hover img { transform: scale(1.05) }
.galeria .grade picture:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 3 }

/* ── ficha ──────────────────────────────────────────────────── */

.ficha dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--linha);
}
.ficha dt {
  grid-row: 1;
  background: var(--superficie);
  padding: 16px 18px 4px;
  font-family: var(--fonte-texto);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--secundario);
}
.ficha dd {
  grid-row: 2;
  background: var(--superficie);
  margin: 0;
  padding: 0 18px 18px;
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 16px;
  color: var(--mare);
}

/* As duas linhas fixas acima só cabem lado a lado em tela larga. No celular a
   ficha vira lista corrida — senão as quatro colunas estouram os 375px. */
@media (max-width: 700px) {
  .ficha dl { grid-template-columns: 1fr }
  .ficha dt { grid-row: auto; padding-top: 14px }
  .ficha dd { grid-row: auto }
}

/* ── listas que viram chips ─────────────────────────────────── */

.lazer, .pontos, .secao > ul:not([class]) { list-style: none; padding: 0; margin: 0 }

.lazer { display: flex; flex-wrap: wrap; gap: 9px }
.lazer li {
  background: var(--agua-clara);
  color: var(--agua);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 15px;
  border-radius: 100px;
  transition: transform .16s ease;
}
.lazer li:hover { transform: translateY(-2px) }

.pontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 22px }
.pontos li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--agua);
  border-radius: 0 8px 8px 0;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--secundario);
}
.pontos li strong { display: block; color: var(--mare); font-family: var(--fonte-texto); font-size: 15px }

.secao > ul:not([class]) { display: grid; gap: 10px }
.secao > ul:not([class]) > li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 14px 18px;
}
/* item de lista que é só um link de navegação vira botão */
.secao > ul:not([class]) > li > a:only-child,
.irmas li a { text-decoration: none; font-weight: 700 }

/* ── fechamento ─────────────────────────────────────────────── */

/* O último botão da página. Quem chega aqui leu a ficha, a galeria, as
   plantas e o FAQ inteiros — é o visitante mais perto de comprar, e até
   agora ele não tinha onde clicar sem voltar ao topo.

   Painel tingido de leve, não faixa colorida: o bloco precisa se separar do
   corpo sem gritar. Repare que padding entra pelas duas propriedades longas,
   nunca pela abreviada — `padding` aqui zeraria a margem lateral que vem do
   .envoltorio, que é exatamente o defeito que já espremeu as seções deste
   site contra a borda do celular. */
.fechamento {
  background: var(--ceu-fraco);
  border-top: 0;
  border-radius: var(--raio);
  padding-block: clamp(28px, 4vw, 44px);
  padding-inline: clamp(20px, 3vw, 40px);
  margin-block: clamp(38px, 6vw, 72px);
}
.fechamento > h2 { margin-bottom: 10px }
.fechamento p { max-width: 56ch; color: var(--secundario) }

/* ── irmãs e vizinhos ───────────────────────────────────────── */

.irmas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px }
.irmas li {
  background: var(--agua-clara);
  border: 1px solid #CBE3D9;
  border-radius: var(--raio);
  padding: 16px 20px;
  font-size: 15px;
  color: var(--secundario);
  transition: transform .18s ease, box-shadow .18s ease;
}
.irmas li:hover { transform: translateX(4px); box-shadow: var(--sombra) }
.irmas li a {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 18px;
  color: var(--agua);
  margin-bottom: 2px;
}

/* ── regiões, na home ───────────────────────────────────────── */

.regioes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px }
.regioes a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--mare);
  color: #fff;
  text-decoration: none;
  border-radius: var(--raio);
  padding: 24px 22px;
  min-height: 118px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.regioes a::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(15,122,92,.5), transparent 68%);
  transition: transform .4s ease;
}
.regioes a:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta) }
.regioes a:hover::before { transform: scale(1.5) }
.regioes strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; letter-spacing: -.005em; position: relative }
.regioes span { font-size: 14px; color: #A6C3CC; position: relative }

/* ── bloco da operação, na home ─────────────────────────────── */

/* ── quem responde pela operação ───────────────────────────── */

/* Duas colunas: a identificação à esquerda — retrato redondo, nome e cargo,
   tudo centrado na própria coluna — e o texto à direita. A coluna da esquerda
   tem a largura do retrato, então nome e cargo se alinham ao círculo por
   construção, e não por tentativa. */
.operacao-bloco {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--sombra);
}

.operacao-retrato {
  width: clamp(132px, 15vw, 184px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.operacao-retrato picture {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--areia);
  /* O anel é desenhado por fora da borda, com box-shadow, para não entrar na
     conta do tamanho: o círculo continua com a largura que a coluna define. */
  box-shadow: 0 0 0 4px var(--superficie), 0 0 0 6px var(--ceu), var(--sombra);
}
.operacao-retrato img { width: 100%; height: 100%; object-fit: cover; display: block }

.operacao-nome {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mare);
}
.operacao-cargo {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--secundario);
}

.operacao-texto { min-width: 0 }
.operacao-texto .chamada {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: var(--tinta);
  margin: 0 0 16px;
}
.ficha-discreta { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--secundario) }
.ficha-discreta a { color: var(--mare-media) }

/* No celular a composição empilha: a identificação inteira centrada, e o texto
   embaixo alinhado à esquerda — prosa centrada é difícil de ler. */
@media (max-width: 720px) {
  .operacao-bloco { grid-template-columns: 1fr; justify-items: center; gap: 22px }
  .operacao-retrato { width: 148px }
  .operacao-texto { text-align: left }
}

/* ── perguntas frequentes ───────────────────────────────────── */


/* ── prosa das páginas institucionais ───────────────────────── */

.prosa h2 { font-size: 24px; margin-top: 32px }
.prosa ul { padding-left: 20px }
.prosa li { margin-bottom: 8px; max-width: var(--medida) }

/* ── botão flutuante do WhatsApp ────────────────────────────── */

.zap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--zap);
  color: #06301A;
  text-decoration: none;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  width: 60px;
  height: 60px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px rgba(37, 211, 102, .55), 0 18px 44px -18px rgba(0, 0, 0, .6);
  animation: entrar-zap .5s .5s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease;
}

/* o ícone é desenhado em CSS: nada de requisição extra por um glifo */
.zap::before {
  content: "";
  width: 30px; height: 30px;
  flex: 0 0 30px;
  background: #06301A;
  mask: var(--icone-zap) center / contain no-repeat;
  -webkit-mask: var(--icone-zap) center / contain no-repeat;
}

:root {
  --icone-zap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.18 8.18 0 0 1 5.82 2.42 8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.86.84-.86 2.05s.88 2.38 1 2.54c.12.17 1.73 2.64 4.2 3.7.59.26 1.04.41 1.4.52.59.19 1.12.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29z'/></svg>");
}

@keyframes entrar-zap {
  from { opacity: .001; transform: translateY(24px) scale(.85) }
  to   { opacity: 1; transform: none }
}

/* anel que pulsa, para o olho achar o botão sem que ele grite */
.zap::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  border: 2px solid var(--zap);
  animation: pulsar 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes pulsar {
  0%   { opacity: .7; transform: scale(1) }
  70%  { opacity: 0; transform: scale(1.22) }
  100% { opacity: 0; transform: scale(1.22) }
}

.zap:hover { background: var(--zap-escuro); color: #fff; transform: translateY(-3px) scale(1.03) }
.zap:hover::before { background: #fff }
.zap:active { transform: translateY(0) scale(1) }

/* ── rodapés ────────────────────────────────────────────────── */

.legal, .rodape {
  border-top: 1px solid var(--linha);
  padding: 26px 0;
  color: var(--secundario);
  font-size: 13px;
}
.legal p, .rodape p { max-width: none; margin: 0 0 6px }
.legal { font-size: 12px; color: #8C9299 }
/* O mapa do site em três colunas que viram uma no celular. */
.rodape-mapa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 26px 32px;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linha);
}
.rodape-titulo {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mare-media);
}
.rodape-mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.rodape-mapa a {
  font-size: 14.5px;
  color: var(--mare);
  text-decoration: none;
  transition: color .2s ease;
}
.rodape-mapa a:hover { color: var(--mare-media); text-decoration: underline }
.aviso { font-style: italic }
.creci-site { font-family: var(--fonte-texto); font-weight: 500; color: var(--mare) }

/* ── movimento ─────────────────────────────────────────────── */

/* O padrão é o mesmo do cury021.com.br, que o cliente aprovou: transição em
   vez de animação, deslocamento de 26px e uma curva de saída longa.
   
   A diferença que importa está em quem esconde. O estado invisível mora sob
   `.anim`, uma classe que só o script põe na raiz — e ele só a põe depois de
   confirmar que consegue revelar. Sem JavaScript, com o observer indisponível
   ou com redução de movimento ligada, a classe nunca entra e a página nasce
   inteira. Esconder primeiro e torcer para revelar depois é como se perde
   conteúdo em produção. */

:root {
  --saida: cubic-bezier(.22, .61, .36, 1);
  --distancia: 26px;
}

.anim [data-revelar] {
  opacity: 0;
  transform: translate3d(0, var(--distancia), 0);
  transition: opacity .9s var(--saida), transform .9s var(--saida);
}
.anim [data-revelar].revelado { opacity: 1; transform: none }

/* Peças pequenas — chips, atalhos de região — andam menos que um bloco
   inteiro: deslocá-las 26px faria a seção tremer em vez de assentar. */
.anim .lazer > li[data-revelar],
.anim .regioes > li[data-revelar],
.anim .mini[data-revelar] { --distancia: 10px }

/* O filete sob o título de seção se desenha da esquerda quando a seção entra.
   É o único ornamento, e serve para marcar onde um assunto começa. */
.secao > h2 { position: relative; padding-bottom: 13px }
.secao > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 48px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mare-media), var(--ceu));
  transform-origin: left;
  transition: transform .8s .15s var(--saida);
}
.anim .secao > h2::after { transform: scaleX(0) }
.anim .secao [data-revelar].revelado ~ h2::after,
.anim .secao > h2[data-revelar].revelado::after { transform: scaleX(1) }

/* O cabeçalho ganha sombra depois que a página rola: parado no topo ele é
   parte da página; rolando, vira uma camada por cima dela. */
.topo { transition: box-shadow .3s ease, background .3s ease }
.topo.rolou {
  box-shadow: 0 1px 0 var(--linha), 0 14px 30px -24px rgba(26, 55, 77, .6);
  background: rgba(255, 255, 255, .96);
}

/* A abertura entra em tempos, conduzindo o olho do rótulo ao botão. É o único
   lugar do site com sequência; repetida em cada seção viraria vício. */
.hero-texto > * { animation: subir .85s var(--saida) both }
.hero-texto > *:nth-child(1) { animation-delay: .08s }
.hero-texto > *:nth-child(2) { animation-delay: .17s }
.hero-texto > *:nth-child(3) { animation-delay: .26s }
.hero-texto > *:nth-child(4) { animation-delay: .34s }
.hero-texto > *:nth-child(5) { animation-delay: .41s }

/* O card responde ao ponteiro como objeto: sobe, a sombra se abre embaixo e a
   foto avança mais devagar que a moldura. Essa diferença de velocidade entre
   os dois é o que dá a impressão de profundidade. */
.card { transition: transform .4s var(--saida), box-shadow .4s ease, border-color .4s ease }
.card:hover { transform: translate3d(0, -6px, 0) }
.card picture img { transition: transform .8s var(--saida) }
.card:hover picture img { transform: scale(1.055) }

/* Os botões afundam um fio ao serem pressionados: o clique tem retorno. */
.cta:active, .botao:active, .zap:active, .topo-zap:active, .mini:active { transform: scale(.97) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anim [data-revelar] { opacity: 1 !important; transform: none !important }
  .secao > h2::after { transform: scaleX(1) !important }
  .hero picture { transform: none !important }
}

/* ── telas pequenas ─────────────────────────────────────────── */

@media (max-width: 720px) {
  .operacao-bloco { grid-template-columns: 1fr; gap: 20px; padding: 20px }
  .operacao-bloco picture { max-width: 200px }
  .galeria .grade picture:first-child { grid-column: span 2; grid-row: auto }
  .zap { right: 14px; bottom: 14px; width: 56px; height: 56px }
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
}

/* ── imagem ampliável ───────────────────────────────────────── */

.amp {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.amp::after {
  content: "⤢";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(14, 27, 32, .62);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(3px);
}
.amp:hover::after,
.amp:focus-visible::after { opacity: 1; transform: none }

/* ── galeria: palco e fita de miniaturas ───────────────────── */

.chamada-galeria { margin: -4px 0 14px; color: var(--secundario); font-size: 15px }
.palco-galeria { margin-top: 6px }

/* .abre-cheia é o que abre a tela cheia — o palco e cada planta. A regra existe
   para dizer isso ao ponteiro: sem ela a classe seria um gancho invisível, e o
   teste de cobertura de estilo pega exatamente esse tipo de classe órfã. */
.abre-cheia { cursor: zoom-in }

.palco {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--areia);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 16 / 10;
}
.palco picture,
.palco img { width: 100%; height: 100%; object-fit: cover; display: block }
.palco .quadro { position: absolute; inset: 0 }

/* A troca é um deslize, não um corte: a foto que entra vem do lado para onde
   a navegação apontou. A que sai desliza junto, no mesmo sentido, para que o
   movimento se leia como uma fita andando. */
.palco .quadro { transition: transform .5s var(--saida), opacity .5s var(--saida) }
.quadro.entra-direita { animation: entra-direita .5s var(--saida) both }
.quadro.entra-esquerda { animation: entra-esquerda .5s var(--saida) both }
.quadro.sai-direita { animation: sai-direita .5s var(--saida) both }
.quadro.sai-esquerda { animation: sai-esquerda .5s var(--saida) both }

@keyframes entra-direita { from { opacity: 0; transform: translate3d(32px,0,0) } to { opacity: 1; transform: none } }
@keyframes entra-esquerda { from { opacity: 0; transform: translate3d(-32px,0,0) } to { opacity: 1; transform: none } }
@keyframes sai-direita { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(-32px,0,0) } }
@keyframes sai-esquerda { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(32px,0,0) } }

/* A lupa só aparece no hover: fora dele a foto não precisa de enfeite em cima. */
.palco-lupa {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18, 40, 58, .72) var(--icone-lupa) center / 20px 20px no-repeat;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(3px);
}
.palco:hover .palco-lupa,
.palco:focus-visible .palco-lupa { opacity: 1; transform: none }
.palco:hover img { transform: scale(1.015) }
.palco img { transition: transform .5s cubic-bezier(.2,.7,.3,1) }

/* A fita rola na horizontal quando há foto demais — e há: alguns
   empreendimentos passam de quarenta. O tamanho é o de uma miniatura que se
   reconhece sem precisar abrir, não o de um marcador de posição. */
.miniaturas {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 2px 8px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ceu) transparent;
}
.miniaturas::-webkit-scrollbar { height: 8px }
.miniaturas::-webkit-scrollbar-track { background: var(--areia); border-radius: 8px }
.miniaturas::-webkit-scrollbar-thumb { background: var(--ceu); border-radius: 8px }
.miniaturas::-webkit-scrollbar-thumb:hover { background: var(--mare-clara) }

.mini {
  flex: 0 0 clamp(124px, 15vw, 168px);
  height: clamp(84px, 10vw, 112px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--areia);
  scroll-snap-align: start;
  cursor: pointer;
  opacity: .62;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity .25s ease, transform .25s var(--saida), outline-color .25s ease;
}
.mini:hover { opacity: 1; transform: translateY(-3px) }
.mini[aria-current="true"] { opacity: 1; outline-color: var(--mare-media) }

/* ── mapa aberto na página ──────────────────────────────────── */

.mapa {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  margin: 22px 0 18px;
  background: var(--areia);
}
.mapa iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 420px);
  border: 0;
}

/* ── botão secundário ───────────────────────────────────────── */

.botao.secundario {
  background: transparent;
  color: var(--agua);
  border: 2px solid var(--agua);
  box-shadow: none;
  padding: 13px 24px;
}
.botao.secundario:hover { background: var(--agua); color: #fff }

/* ── tela cheia ─────────────────────────────────────────────── */

/* o display:grid abaixo vence o [hidden] do navegador, que é seletor de tipo.
   Sem esta linha a tela cheia nasce aberta sobre a página. */
.tela-cheia[hidden] { display: none }

.tela-cheia {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(10, 16, 19, .94);
  backdrop-filter: blur(6px);
  animation: aparecer .2s ease both;
}
@keyframes aparecer { from { opacity: .001 } to { opacity: 1 } }

.tela-cheia figure { margin: 0; display: grid; place-items: center; gap: 12px; min-width: 0 }
.tela-cheia img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  animation: entrar-imagem .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes entrar-imagem { from { opacity: .001; transform: scale(.97) } to { opacity: 1; transform: none } }

.tela-cheia figcaption {
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
  max-width: 62ch;
}
.tc-legenda {
  color: #EDE9E1;
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.45;
}
.tc-conta {
  color: #9AA3A1;
  font-family: var(--fonte-texto);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tc-fechar, .tc-nav {
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-radius: 100px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s ease, transform .18s ease;
}
.tc-nav { width: 48px; height: 48px; font-size: 30px; line-height: 1 }
.tc-fechar {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px; height: 44px;
  font-size: 26px; line-height: 1;
}
.tc-fechar:hover, .tc-nav:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06) }

@media (max-width: 620px) {
  .tela-cheia { grid-template-columns: 1fr; grid-template-rows: 1fr auto }
  .tela-cheia figure { grid-row: 1 }
  .tc-nav { position: absolute; bottom: 18px }
  .tc-ant { left: 22% }
  .tc-prox { right: 22% }
}

/* plantas pedem proporção mais alta e fundo claro: são desenho, não foto */
/* As 230 plantas do acervo são todas 16:10 deitadas — medido, não suposto.
   A caixa em retrato que estava aqui abria um vão enorme acima e abaixo de
   cada uma. Com duas colunas cada planta sai grande o bastante para se ler. */
.grade.plantas { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) }
.grade.plantas picture { aspect-ratio: 16 / 10; background: #fff }
.grade.plantas picture img { object-fit: contain; padding: 6px; background-size: contain }
.grade.plantas .amp { border: 1px solid var(--linha) }

/* ── cabeçalho fixo ────────────────────────────────────────── */

/* Branco, fixo e baixo, como o da Cury: 66px de altura útil. */
.topo {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-interno {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
}

.marca {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--mare);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.marca span { color: var(--latao) }
.marca:hover span { color: var(--mare-media) }

.navegacao {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.navegacao a {
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 500;
  color: var(--mare);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--raio);
  position: relative;
  transition: color .18s ease, background .18s ease;
}
/* O sublinhado cresce do centro no hover — um sinal de que ali se clica,
   sem mexer no espaço que o link ocupa. */
.navegacao a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  background: var(--mare-clara);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.navegacao a:hover { color: var(--mare-media) }
.navegacao a:hover::after { transform: scaleX(1) }
.navegacao a[aria-current="page"] { color: var(--mare); background: var(--latao-fraco) }
.navegacao a[aria-current="page"]::after { transform: scaleX(1); background: var(--latao) }

.topo-zap {
  flex: 0 0 auto;
  background: var(--zap);
  color: #fff;
  font-family: var(--fonte-texto);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: var(--raio-pilula);
  transition: background .18s ease, transform .18s ease;
}
.topo-zap:hover { background: var(--zap-escuro); transform: translateY(-1px) }

/* O link do menu só existe na versão celular; no desktop quem cumpre esse
   papel é o .topo-zap, e repetir os dois lado a lado seria ruído. */
.menu-zap { display: none }

/* ── menu hamburger (celular) ───────────────────────────────── */

.menu-botao {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.menu-traco {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--mare);
  border-radius: 2px;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
  transform-origin: center;
}
/* Os três traços viram um X: a própria animação diz que o botão agora fecha. */
.menu-botao[aria-expanded="true"] .menu-traco:nth-child(1) { transform: translateY(9px) rotate(45deg) }
.menu-botao[aria-expanded="true"] .menu-traco:nth-child(2) { opacity: 0 }
.menu-botao[aria-expanded="true"] .menu-traco:nth-child(3) { transform: translateY(-9px) rotate(-45deg) }

@media (max-width: 860px) {
  .topo-zap { display: none }
  .topo-interno { gap: 10px; padding: 0 16px; flex-wrap: wrap }
  .menu-botao { display: flex }

  .navegacao {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding-bottom: 10px;
  }
  /* Fechado, o painel tem altura zero e fica inerte ao toque; aberto, desliza.
     A transição é de altura máxima e opacidade, sem mexer em display, para
     que o movimento exista de verdade em vez de piscar. */
  .menu-botao[aria-expanded="false"] + .navegacao {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-bottom: 0;
    pointer-events: none;
  }
  .menu-botao[aria-expanded="true"] + .navegacao {
    max-height: 60vh;
    opacity: 1;
    overflow-y: auto;
  }
  .navegacao {
    transition: max-height .3s cubic-bezier(.2,.7,.3,1), opacity .22s ease, padding .3s ease;
  }
  .navegacao a {
    padding: 13px 14px;
    font-size: 16px;
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
  }
  .navegacao a::after { display: none }
  .navegacao a[aria-current="page"] { background: var(--ceu-fraco) }

  /* .navegacao a também pinta cor e tem a mesma força: sem o seletor composto
     o texto do botão verde voltava a ficar azul-marinho. */
  .navegacao a.menu-zap {
    display: block;
    margin-top: 10px;
    text-align: center;
    background: var(--zap);
    color: #fff;
    font-weight: 700;
    border-radius: var(--raio-pilula);
    border-bottom: 0;
  }
  .navegacao a.menu-zap:hover { background: var(--zap-escuro); color: #fff }
}

/* ── ícone da lupa, desenhado em CSS ────────────────────────── */

:root {
  --icone-lupa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.2-4.2M11 8v6M8 11h6'/></svg>");
}

/* ── perguntas frequentes ──────────────────────────────────── */

/* Mesma organização do cury021.com.br: só um filete entre as perguntas, sem
   caixa nem fundo; a pergunta grande, do tamanho de um subtítulo; a resposta
   com medida de leitura e entrelinha larga.
   
   O sinal é feito de dois traços cruzados. Ao abrir, o traço vertical gira
   para a horizontal e some — o "+" vira "−" sem trocar de ícone. */

.faq { margin-top: 4px }

.pergunta { border-bottom: 1px solid var(--linha) }
.pergunta:first-child { border-top: 1px solid var(--linha) }

.pergunta summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 24px 48px 24px 0;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--mare);
  transition: color .3s ease;
}
.pergunta summary::-webkit-details-marker { display: none }
.pergunta summary:hover { color: var(--mare-media) }

.pergunta summary::before,
.pergunta summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--mare-media);
  transition: transform .35s var(--saida), opacity .35s ease;
}
.pergunta summary::before { transform: translateY(-50%) }
.pergunta summary::after { transform: translateY(-50%) rotate(90deg) }
.pergunta[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0 }

.pergunta .resposta { padding: 0 48px 26px 0 }
.pergunta .resposta p {
  margin: 0;
  max-width: 68ch;
  color: var(--secundario);
  font-size: 16px;
  line-height: 1.75;
}

@media (prefers-reduced-motion: no-preference) {
  .pergunta[open] .resposta { animation: abrir-resposta .35s ease both }
}
@keyframes abrir-resposta {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: none }
}

/* ── corpo do card ─────────────────────────────────────────── */

/* O card é uma coluna de altura inteira. O trecho de texto é a peça elástica:
   é ele que absorve a diferença entre um empreendimento de descrição curta e
   um de descrição longa, para que a pílula "Veja mais" pouse na mesma altura
   em todos os cards da mesma linha. */
.card { display: flex }
.card > a { display: flex; flex-direction: column; flex: 1; min-width: 0 }
.card picture { flex: 0 0 auto }

.card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.card-corpo .selos { padding: 0; margin: 0 0 11px }
.card-corpo h3 { margin: 0 0 3px; font-size: 19px; line-height: 1.22 }
.card-corpo .bairro { margin: 0; color: var(--secundario); font-size: 13.5px }

/* A linha das tipologias é dado seco: fica pequena, em maiúsculas espaçadas, e
   separada do nome por um filete — é etiqueta, não frase. */
.tipos-card {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--linha);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mare-media);
}

.resumo-card {
  flex: 1;
  margin: 9px 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--secundario);
  max-width: none;
}

/* Pílula, não link solto: o card inteiro já é o link, então isto é um <span>
   com cara de botão. Dois <a> aninhados seriam HTML inválido. */
.veja-mais {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--raio-pilula);
  background: var(--ceu-fraco);
  color: var(--mare);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px var(--ceu);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.veja-mais::after { content: "→"; transition: transform .22s cubic-bezier(.2,.7,.3,1) }
.card:hover .veja-mais,
.card:focus-within .veja-mais {
  background: var(--mare);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--mare);
  transform: translateY(-1px);
}
.card:hover .veja-mais::after { transform: translateX(3px) }

.mais { margin-top: 26px }

.cabeca-lista { border-top: 0 }


/* ── respiro no celular ────────────────────────────────────── */

/* A margem de 20px vinha do desktop e, num aparelho de 375px, deixava título e
   texto colados na borda. Aqui ela sobe, e o hero — que sangra de propósito —
   recebe a sua por dentro, para que a chamada não encoste no canto da tela. */
@media (max-width: 640px) {
  .envoltorio { padding: 0 22px }
  .hero-texto { padding-left: 22px; padding-right: 22px }
  .secao { padding-block: clamp(32px, 9vw, 52px) }
  .secao > h2 { padding-bottom: 11px }
  .palco { aspect-ratio: 3 / 2 }
  .mini { flex-basis: 132px; height: 88px }
  .pergunta summary { padding: 20px 42px 20px 0; font-size: 16.5px }
  .pergunta .resposta { padding: 0 8px 22px 0 }
  .grade.plantas { grid-template-columns: 1fr }
  .card-corpo { padding: 15px 16px 17px }
}

/* Abaixo de 380px a margem lateral volta a apertar: aqui ela é o último
   recurso de legibilidade, e o texto vem antes da largura da foto. */
@media (max-width: 380px) {
  .envoltorio { padding: 0 18px }
  .hero-texto { padding-left: 18px; padding-right: 18px }
}

/* ── aviso de cookies ──────────────────────────────────────── */

/* Fica no rodapé da tela, acima do botão do WhatsApp mas abaixo da tela cheia.
   Não cobre o conteúdo nem bloqueia a navegação: quem quiser ignorar, ignora e
   continua lendo — o que a LGPD pede é informação e escolha, não sequestro. */
/* O display abaixo vence o [hidden] do navegador, que é seletor de atributo
   sem classe. Sem esta linha o aviso não some ao ser respondido, nem fica
   escondido para quem já respondeu numa visita anterior. É o mesmo defeito que
   a tela cheia teve, pela mesma razão. */
.consentimento[hidden] { display: none }

.consentimento {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 34px);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -12px 34px -24px rgba(26, 55, 77, .55);
  animation: subir-aviso .45s var(--saida) both;
}
@keyframes subir-aviso {
  from { opacity: 0; transform: translateY(100%) }
  to   { opacity: 1; transform: none }
}

.consentimento-texto { flex: 1 1 380px; min-width: 0 }
.consentimento-texto p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 74ch }
.consentimento-texto strong { color: var(--mare) }
.consentimento-link { margin-top: 6px !important }
.consentimento-link a { color: var(--mare-media); font-size: 13.5px }

.consentimento-botoes { display: flex; gap: 10px; flex: 0 0 auto }

/* Recusar e aceitar têm o mesmo tamanho e o mesmo peso de fonte. Um botão
   grande ao lado de um link apagado é consentimento forçado, e consentimento
   forçado não é consentimento. */
.consentimento-botoes button {
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--raio-pilula);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--saida);
}
.consentimento-recusar {
  background: transparent;
  color: var(--mare);
  border: 1px solid var(--linha);
}
.consentimento-recusar:hover { background: var(--areia); border-color: var(--mare-media) }
.consentimento-aceitar {
  background: var(--mare);
  color: #fff;
  border: 1px solid var(--mare);
}
.consentimento-aceitar:hover { background: var(--mare-media); border-color: var(--mare-media) }
.consentimento-botoes button:active { transform: scale(.97) }

/* O botão flutuante sobe para não ficar embaixo do aviso. */
.consentimento:not([hidden]) ~ .zap,
body:has(.consentimento:not([hidden])) .zap { bottom: 104px }

@media (max-width: 600px) {
  .consentimento { flex-direction: column; align-items: stretch; gap: 14px; padding: 15px 16px 16px }
  .consentimento-texto { flex: 0 0 auto }
  .consentimento-texto p { font-size: 13.5px; line-height: 1.5 }
  .consentimento-link { margin-top: 5px !important }
  .consentimento-botoes button { flex: 1; padding: 12px 16px }
  body:has(.consentimento:not([hidden])) .zap { bottom: 172px }
}


/* ═══════════════════════════════════════════════════════════════════
   Componentes deste site
   ═══════════════════════════════════════════════════════════════════ */

/* ── seletor de idioma ──────────────────────────────────────────
   Três siglas lado a lado, sempre visíveis — também no celular, fora do
   menu: quem chega pelo Google em português e lê inglês precisa achar a
   troca sem abrir nada. A língua atual leva o latão. */
.idiomas {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  flex: 0 0 auto;
}
.idiomas a {
  font-family: var(--fonte-texto);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--secundario);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: var(--raio-pilula);
  line-height: 1;
  transition: color .18s ease, background .18s ease;
}
.idiomas a:hover { color: var(--mare) }
.idiomas a[aria-current="true"] { background: var(--latao); color: #fff }

@media (max-width: 860px) {
  /* Na primeira linha do topo: marca, idiomas, botão do menu. O painel do
     menu, que ocupa a linha inteira, desce para a segunda. */
  .idiomas { order: 1; margin-left: auto }
  .menu-botao { order: 2; margin-left: 0 }
  .navegacao { order: 3 }
}
@media (max-width: 380px) {
  .idiomas a { padding: 5px 7px; font-size: 12px }
}

/* ── preço e metragem na ficha ──────────────────────────────── */
.ficha-nota { font-size: 13.5px; color: var(--secundario) }
.aviso-valores {
  font-size: 13px;
  line-height: 1.5;
  color: var(--secundario);
  border-left: 2px solid var(--latao);
  padding-left: 12px;
  margin-top: 18px;
}

/* ── chamada para o guia do comprador estrangeiro ───────────────
   O bloco que fala com o público principal do site (briefing, bloco 5):
   marfim com filete de latão, para se distinguir das vitrines. Mesma
   regra do .fechamento: padding pelas formas longas, para não zerar a
   margem lateral do .envoltorio. */
.guia-chamada {
  background: var(--areia);
  border-top: 0;
  border-left: 3px solid var(--latao);
  border-radius: var(--raio);
  padding-block: clamp(28px, 4vw, 44px);
  padding-inline: clamp(20px, 3vw, 40px);
  margin-block: clamp(20px, 4vw, 40px);
}
.guia-chamada > h2 { margin-bottom: 10px }
.guia-chamada p { max-width: 62ch; text-wrap: pretty }
.guia-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0 }
/* Na tela larga o texto curto deixava meio bloco vazio à direita: os botões
   vão para lá, em coluna, e o bloco fica equilibrado. */
@media (min-width: 980px) {
  .guia-chamada {
    display: grid;
    grid-template-columns: minmax(0, 62ch) auto;
    justify-content: space-between;
    column-gap: 48px;
    align-items: center;
  }
  .guia-chamada > h2,
  .guia-chamada > p:not(.guia-botoes) { grid-column: 1 }
  .guia-chamada > .guia-botoes {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    max-width: none;
  }
}
.guia-botoes .cta { margin-top: 0 }

/* A variante verde do botão: onde há verde, há conversa. */
.cta.cta-zap { background: var(--zap); color: #06301A; box-shadow: 0 10px 24px -12px rgba(30, 169, 82, .55) }
.cta.cta-zap:hover { background: var(--zap-escuro); color: #fff }

/* ── marca de rascunho ──────────────────────────────────────────
   Só aparece em build com RASCUNHO=1, que o portão recusa enviar. Existe
   para que uma captura de tela de revisão nunca seja confundida com o site
   publicado. */
.rascunho {
  position: sticky;
  top: 0;
  z-index: 200;
  margin: 0;
  max-width: none;
  padding: 6px 16px;
  background: repeating-linear-gradient(135deg, #F6D365 0 14px, #F2C14E 14px 28px);
  color: #3A2A06;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ── guia do comprador estrangeiro ───────────────────────────── */
.aviso-guia {
  font-size: 13px;
  color: var(--secundario);
  border-top: 1px solid var(--linha);
  padding-top: 14px;
  margin-top: 28px;
}