/* ==========================================================================
   CURY ERÊ — Porto Maravilha  ·  cury021.com.br
   Folha de estilo única do site.

   COMO MEXER AQUI (para quem não é programador):
   - As cores estão todas no bloco ":root" logo abaixo. Troque o código de
     cor (ex.: #C79A5A) e ele muda no site inteiro.
   - Os tamanhos de texto também estão lá.
   - Cada bloco tem um comentário em português dizendo a que parte do site
     ele pertence.
   ========================================================================== */


/* ==========================================================================
   1. VARIÁVEIS — cores, fontes e espaçamentos do site inteiro
   ========================================================================== */
:root {
  /* ---- PALETA (troque aqui para mudar as cores do site todo) ---- */
  --noite:      #14110D;   /* fundo principal, quase preto           */
  --noite-2:    #1A1611;   /* fundo alternado das seções             */
  --noite-3:    #221D16;   /* fundo dos cards                        */
  --ouro:       #C79A5A;   /* dourado dos detalhes e botões          */
  --ouro-claro: #DBB57C;   /* dourado no hover                       */
  --bone:       #F4ECDD;   /* cor dos textos                         */
  --areia:      #D8C9AD;   /* textos de apoio                        */
  /* Cinza quente das legendas e das linhas de fonte.
     Clareado de propósito: no tom anterior (#8A7D68) o contraste era de
     4,47:1, abaixo do mínimo de 4,5:1 exigido para texto pequeno.
     Neste tom o contraste é de 7,85:1 sobre o fundo escuro. */
  --pedra:      #B3A68E;   /* textos discretos, legendas, fontes     */
  --whatsapp:   #25D366;   /* verde do botão flutuante               */

  /* ---- TIPOGRAFIA ---- */
  --fonte-titulo: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- MEDIDAS ---- */
  --largura-max: 1240px;   /* largura máxima do conteúdo             */
  --respiro:     clamp(64px, 10vw, 140px); /* espaço entre as seções */
  --raio:        2px;      /* arredondamento das bordas (quase reto) */
  --transicao:   .5s cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* para o menu fixo não cobrir o título */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--bone);
  font-family: var(--fonte-texto);
  font-size: 17px;
  /* Peso 400 em vez de 300: sobre fundo escuro a fonte fina "some",
     e o texto parece ter menos contraste do que realmente tem. */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0 0 1em; }

::selection { background: var(--ouro); color: var(--noite); }

/* Contorno visível ao navegar pelo teclado (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* Link "pular para o conteúdo" — só aparece para quem usa teclado */
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ouro); color: var(--noite);
  padding: 12px 20px; font-size: 15px;
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}


/* ==========================================================================
   3. ELEMENTOS DE TEXTO REUTILIZADOS
   ========================================================================== */

/* "Olho": a etiqueta pequena em ouro acima dos títulos */
.olho {
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.olho::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--ouro);
  opacity: .7;
  flex: none;
}

.titulo    { font-size: clamp(30px, 5vw, 52px); }
.titulo--m { font-size: clamp(26px, 4vw, 38px); }
.titulo--g { font-size: clamp(34px, 6vw, 64px); }

/* Parágrafo de apoio, logo abaixo do título */
.chamada {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--areia);
  max-width: 62ch;
  margin-top: 22px;
}

/* Textinho legal / observações */
.nota {
  font-size: 13px;
  line-height: 1.6;
  color: var(--pedra);
  max-width: 70ch;
}
.nota--centro { text-align: center; margin: 40px auto 0; }


/* ==========================================================================
   4. BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 700;          /* CTAs em negrito */
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;       /* nunca quebra o texto do botão em duas linhas */
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--transicao), background-color var(--transicao),
              border-color var(--transicao), transform .3s ease, box-shadow var(--transicao);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Botão principal, dourado */
.btn--ouro {
  background: var(--ouro);
  color: var(--noite);
  box-shadow: 0 10px 30px -14px rgba(199,154,90,.9);
}
.btn--ouro:hover {
  background: var(--ouro-claro);
  box-shadow: 0 16px 40px -14px rgba(199,154,90,1);
}

/* Botão secundário, só contorno */
.btn--contorno {
  border-color: rgba(216,201,173,.45);
  color: var(--bone);
  background: transparent;
}
.btn--contorno:hover {
  border-color: var(--ouro);
  color: var(--ouro);
  background: rgba(199,154,90,.06);
}

.btn--grande  { padding: 19px 40px; font-size: 15px; }
.btn--pequeno { padding: 12px 22px; font-size: 12px; }

/* Ícone do WhatsApp dentro dos botões */
.ico-wa { width: 19px; height: 19px; fill: currentColor; flex: none; }


/* ==========================================================================
   5. CABEÇALHO E MENU
   ========================================================================== */
.cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding .4s ease, background-color .4s ease,
              backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}

/* Estado "rolado": fica menor e ganha fundo escuro */
.cabecalho.rolado {
  padding: 12px 0;
  background: rgba(20,17,13,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(199,154,90,.18);
}

.cabecalho__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* O logo do topo fica ESCONDIDO enquanto a página está lá em cima, porque o
   logo grande já aparece no hero (senão apareceriam dois logos juntos).
   Assim que a pessoa rola e o hero sai de vista, ele aparece suavemente. */
.cabecalho__logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .45s ease, transform .45s ease, height .4s ease;
  pointer-events: none;
}
/* 40px (e não 32px) porque o logotipo tem a palavra "RESIDENCIAL" em letra
   miúda acima do "erê" — abaixo disso a marca vira um borrão. */
.cabecalho.rolado .cabecalho__logo {
  height: 40px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu { margin-left: auto; }
.menu__lista {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.menu__lista a {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--areia);
  position: relative;
  /* altura de toque confortável — tablets grandes (iPad Pro, 1024px) usam
     este menu e ainda são telas de dedo, não de mouse */
  padding: 12px 0;
  display: inline-block;
  transition: color .3s ease;
}
.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.menu__lista a:hover { color: var(--bone); }
.menu__lista a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Botão "sanduíche" do menu no celular */
.hamburguer {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(216,201,173,.3);
  border-radius: var(--raio);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburguer span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--bone);
  transition: transform .35s ease, opacity .25s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ==========================================================================
   6. HERO — primeira tela
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 90px;
}

/* Imagem de fundo com zoom lento (efeito "Ken Burns") */
.hero__fundo { position: absolute; inset: 0; z-index: 0; }
.hero__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(0, -1.5%, 0); }
}

/* Véu escuro por cima da foto, para o texto ficar legível */
.hero__veu {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,17,13,.72) 0%, rgba(20,17,13,.30) 35%, rgba(20,17,13,.86) 100%),
    linear-gradient(90deg, rgba(20,17,13,.75) 0%, rgba(20,17,13,.05) 70%);
}

.hero__conteudo { position: relative; z-index: 2; }

/* Logo do hero — versão compacta.
   Mantido DISCRETO de propósito: o arquivo de origem é arte de linha muito
   fina e, ampliado, denuncia a baixa resolução. Em tamanho contido fica
   nítido. Quando chegar o logotipo em alta (ou em vetor/SVG), dá para
   aumentar este valor com folga. */
.hero__logo {
  width: clamp(120px, 17vw, 170px);
  height: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.6));
}

.hero__titulo {
  margin: 0 0 18px;
  font-weight: 300;
}

/* Nome do empreendimento em linha pequena (o logo acima já é a marca) */
.hero__marca {
  display: block;
  font-family: var(--fonte-texto);
  font-size: clamp(11px, 2.2vw, 13px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 16px;
}

/* A frase grande — é ela que vende */
.hero__proposta {
  display: block;
  font-size: clamp(38px, 7.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero__local {
  font-family: var(--fonte-texto);
  font-size: clamp(11px, 2.2vw, 13.5px);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--areia);
  margin: 0 0 22px;
}

.hero__texto {
  font-size: clamp(16px, 2.2vw, 21px);
  color: var(--bone);
  max-width: 46ch;
  margin-bottom: 38px;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero__texto strong { font-weight: 500; color: var(--ouro-claro); }

/* Seta animada no rodapé do hero */
.hero__seta {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 40px; height: 64px;
  display: flex;
  justify-content: center;
}
.hero__seta-linha {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--ouro));
  animation: desce 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes desce {
  0%, 100% { transform: scaleY(.3); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1; }
}


/* ==========================================================================
   7. SEÇÕES GERAIS
   ========================================================================== */
.secao {
  padding: var(--respiro) 0;
  position: relative;
}
.secao--escura { background: var(--noite-2); }

.secao__cabecalho { margin-bottom: clamp(44px, 6vw, 72px); max-width: 900px; }

/* Seção com foto ao fundo (usada em "Investir") */
.secao--fundo { overflow: hidden; }
.secao--fundo > .container { position: relative; z-index: 2; }
.secao__imagem-fundo { position: absolute; inset: 0; z-index: 0; }
.secao__imagem-fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
}
.secao--fundo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--noite-2) 0%, rgba(26,22,17,.72) 45%, var(--noite-2) 100%);
}


/* ==========================================================================
   8. CARDS DE DESTAQUE (O empreendimento)
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: rgba(216,201,173,.13); /* cria as linhas finas entre os cards */
  border: 1px solid rgba(216,201,173,.13);
}

.card {
  background: var(--noite);
  padding: 42px 32px 46px;
  transition: background-color var(--transicao), transform var(--transicao);
}
.card:hover { background: var(--noite-3); transform: translateY(-4px); }

.card__ico {
  display: block;
  width: 40px; height: 40px;
  margin-bottom: 26px;
  color: var(--ouro);
}
.card__ico svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  font-size: 21px;
  margin-bottom: 12px;
  line-height: 1.25;
}
.card p {
  font-size: 15px;
  color: var(--areia);
  margin: 0;
  line-height: 1.65;
}


/* ==========================================================================
   9. TIPOLOGIAS (foto + texto)
   ========================================================================== */
.tipologias {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 100px);
}
.tipologias__foto { margin: 0; overflow: hidden; }
.tipologias__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
/* Variante para foto em pé (a fachada da torre) */
.tipologias__foto--alta img { aspect-ratio: 3 / 4; }

/* Lista de itens de lazer, em duas colunas */
.lazer__lista {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
}
.lazer__lista li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--areia);
  line-height: 1.45;
}
.lazer__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 1px;
  background: var(--ouro);
}
.tipologias__foto:hover img { transform: scale(1.05); }

.tipologias__texto p { color: var(--areia); max-width: 52ch; }
.tipologias__texto .btn { margin-top: 14px; }
.tipologias__texto .titulo--m { margin-bottom: 18px; }


/* ==========================================================================
   10. GALERIA + LIGHTBOX
   ========================================================================== */
/* Grade de 3 colunas com TODAS as fotos no mesmo formato (3:2).
   As fotos oficiais do empreendimento são quase todas deitadas em 3:2,
   então a célula tem exatamente essa proporção e a imagem quase não é
   cortada. Como não há foto ocupando duas colunas, basta manter o total
   de fotos em múltiplo de 3 para as linhas fecharem certinho. */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.galeria__item {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--noite-3);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
}

.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s ease;
  filter: saturate(.92);
}
.galeria__item:hover img { transform: scale(1.06); filter: saturate(1.05); }

/* Legenda que sobe ao passar o mouse */
.galeria__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 20px 18px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--bone);
  text-align: left;
  background: linear-gradient(0deg, rgba(20,17,13,.92), transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.galeria__item:hover .galeria__legenda,
.galeria__item:focus-visible .galeria__legenda { opacity: 1; transform: translateY(0); }

/* ---- Lightbox (imagem em tela cheia) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,8,6,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 80px;
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.aberto { opacity: 1; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.97);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.lightbox.aberto .lightbox__img { transform: scale(1); }

.lightbox__legenda {
  position: absolute;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-size: 14px;
  color: var(--areia);
  margin: 0;
  padding: 0 20px;
}

.lightbox__fechar,
.lightbox__nav {
  position: absolute;
  background: rgba(244,236,221,.06);
  border: 1px solid rgba(216,201,173,.22);
  color: var(--bone);
  cursor: pointer;
  width: 48px; height: 48px;
  font-size: 28px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background-color .3s ease, border-color .3s ease;
}
.lightbox__fechar:hover,
.lightbox__nav:hover { background: rgba(199,154,90,.22); border-color: var(--ouro); }

.lightbox__fechar { top: 18px; right: 18px; font-size: 30px; }
.lightbox__nav--ant  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox__nav--prox { right: 18px; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   11. LOCALIZAÇÃO
   ========================================================================== */
.local {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.local__lista {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
.local__lista li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--areia);
  line-height: 1.5;
}
.local__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 1px;
  background: var(--ouro);
}

.local__mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(216,201,173,.16);
  overflow: hidden;
  background: var(--noite-3);
}
.local__mapa iframe {
  width: 100%; height: 100%;
  display: block;
  /* Mapa em cores originais do Google (sem filtro de preto e branco) */
}


/* ==========================================================================
   12. NÚMEROS DO MERCADO (Investir)
   ========================================================================== */
/* São 3 números: um por linha no celular, três lado a lado a partir do tablet. */
.numeros {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
}
@media (min-width: 720px) {
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.numero {
  padding-top: 28px;
  border-top: 1px solid rgba(199,154,90,.35);
}

.numero__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1;
  color: var(--ouro);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.numero__moeda   { font-size: .45em; color: var(--areia); }
.numero__unidade {
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--areia);
}

.numero__rotulo {
  font-size: 16px;
  color: var(--bone);
  margin-bottom: 12px;
  max-width: 32ch;
}

/* A FONTE do dado — obrigatória, em letra pequena */
.numero__fonte {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pedra);
  margin: 0;
  max-width: 38ch;
}

.investir__cta {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}


/* ==========================================================================
   13. CONDIÇÕES DE PAGAMENTO
   ========================================================================== */
.propostas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}

.proposta {
  border: 1px solid rgba(216,201,173,.16);
  background: var(--noite-2);
  padding: 40px 34px 44px;
  position: relative;
  transition: border-color var(--transicao), transform var(--transicao), background-color var(--transicao);
}
.proposta:hover {
  border-color: rgba(199,154,90,.5);
  transform: translateY(-4px);
  background: var(--noite-3);
}
/* Card destacado (Proposta 2) */
.proposta--destaque { border-color: rgba(199,154,90,.42); }

.proposta__tag {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 10px;
}
.proposta__titulo { font-size: 30px; margin-bottom: 28px; }

.proposta__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.proposta__lista li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(216,201,173,.1);
}
.proposta__lista li:last-child { border-bottom: 0; }

.proposta__rot {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pedra);
  flex: none;
}
.proposta__lista strong {
  font-weight: 400;
  font-size: 17px;
  color: var(--bone);
  text-align: right;
}

.proposta__nota {
  font-size: 14px;
  color: var(--areia);
  margin: 0;
  font-style: italic;
}

/* Linha fixa de aviso legal sob os dois cards */
.disclaimer {
  margin: 30px 0 0;
  padding: 18px 22px;
  border-left: 2px solid var(--ouro);
  background: rgba(199,154,90,.06);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--areia);
}

.condicoes__cta { margin-top: 44px; text-align: center; }


/* ==========================================================================
   13b. PERGUNTAS FREQUENTES (sanfona)
   Usa <details>/<summary> do próprio HTML: funciona sem JavaScript e o
   conteúdo fica sempre legível para o Google e para as IAs.
   ========================================================================== */
.faq {
  border-top: 1px solid rgba(216,201,173,.16);
  max-width: 900px;
}

.faq__item {
  border-bottom: 1px solid rgba(216,201,173,.16);
}

.faq__pergunta {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--fonte-titulo);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.35;
  color: var(--bone);
  transition: color .3s ease;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--ouro); }

/* sinal de + que vira − quando abre */
.faq__pergunta::after,
.faq__pergunta::before {
  content: "";
  position: absolute;
  right: 6px;
  background: var(--ouro);
  transition: transform .35s ease, opacity .35s ease;
}
.faq__pergunta::before {
  top: 50%; width: 15px; height: 1px;
  transform: translateY(-50%);
}
.faq__pergunta::after {
  top: 50%; width: 15px; height: 1px;
  transform: translateY(-50%) rotate(90deg);
}
.faq__item[open] .faq__pergunta::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq__resposta {
  padding: 0 44px 26px 0;
}
.faq__resposta p {
  margin: 0;
  color: var(--areia);
  font-size: 16px;
  line-height: 1.75;
  max-width: 68ch;
}

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


/* ==========================================================================
   14. A CORRETORA
   ========================================================================== */
/* Retrato compacto e discreto — não é uma foto grande, é um selo de confiança */
.corretora {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.corretora__foto {
  margin: 0;
  width: clamp(132px, 18vw, 190px);
  flex: none;
}
.corretora__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  /* aro fino dourado em volta do retrato */
  border: 1px solid rgba(199,154,90,.5);
  padding: 5px;
  background: var(--noite-3);
}

/* Linha "Corretores de imóveis" sob o título do bloco de atendimento */
.corretora__cargo {
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 14px 0 0;
}

.corretora__texto .chamada { margin-bottom: 26px; }

/* Lista de "o que você recebe no atendimento" */
.atendimento__lista {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.atendimento__lista li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--areia);
  line-height: 1.5;
}
.atendimento__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 11px; height: 1px;
  background: var(--ouro);
}


/* ==========================================================================
   15. CTA FINAL
   ========================================================================== */
.final {
  position: relative;
  padding: clamp(88px, 12vw, 160px) 0;
  overflow: hidden;
  text-align: center;
}
.final__fundo { position: absolute; inset: 0; z-index: 0; }
.final__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.final::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--noite) 0%, rgba(20,17,13,.55) 50%, var(--noite) 100%);
}
.final__conteudo { position: relative; z-index: 2; }
.final .olho { justify-content: center; }
.final .chamada { margin: 22px auto 38px; text-align: center; }


/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
.rodape {
  background: var(--noite);
  border-top: 1px solid rgba(216,201,173,.12);
  padding: 56px 0 110px; /* espaço extra embaixo por causa do botão flutuante */
  text-align: center;
}
.rodape__logo {
  width: 130px; height: auto;
  margin: 0 auto 26px;
  opacity: .75;
}
.rodape__legal {
  font-size: 12px;
  line-height: 1.7;
  color: var(--pedra);
  max-width: 76ch;
  margin: 0 auto 22px;
}
.rodape__credito {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--areia);
  margin: 0;
}


/* ==========================================================================
   17. BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================================== */
.wa-flutuante {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 16px;
  background: var(--whatsapp);
  color: #06301A;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.65);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wa-flutuante svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wa-flutuante:hover { transform: scale(1.05); box-shadow: 0 16px 44px -8px rgba(0,0,0,.75); }

/* Anel que pulsa em volta do botão */
.wa-flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--whatsapp);
  animation: pulsa 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes pulsa {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}


/* ==========================================================================
   18. ANIMAÇÕES DE ENTRADA (scroll-reveal)
   Só valem quando o JavaScript está ativo (classe "anim" no <html>).
   ========================================================================== */
.anim [data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
}
.anim [data-revelar].revelado {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   19. RESPONSIVO — telas menores (celular é a maioria do tráfego)
   ========================================================================== */

/* Tablet */
@media (max-width: 980px) {
  .tipologias,
  .local,
  .corretora { grid-template-columns: 1fr; }

  /* No tablet/celular o retrato vai para cima do texto, centralizado */
  .corretora { justify-items: center; text-align: center; gap: 30px; }
  .corretora__foto { width: 148px; }
  .corretora__texto .olho { justify-content: center; }
  .corretora__texto .chamada { margin-left: auto; margin-right: auto; }
  .atendimento__lista {
    display: inline-grid;
    justify-items: start;
    text-align: left;
  }

  .galeria { grid-template-columns: repeat(2, 1fr); }
}

/* Celular */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }

  /* Menu vira painel deslizante */
  .cabecalho__cta { display: none; }
  .hamburguer { display: flex; margin-left: auto; }

  /* IMPORTANTE — NÃO coloque backdrop-filter no cabeçalho no celular.
     O backdrop-filter cria um "quadro de referência" para elementos com
     position:fixed que estejam dentro dele. Como o menu lateral está dentro
     do cabeçalho, ele deixaria de ocupar a tela inteira e ficaria preso à
     altura da barra do topo (o menu abria curto, com rolagem interna).
     Aqui usamos um fundo quase opaco no lugar do desfoque. */
  .cabecalho.rolado {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 17, 13, .97);
  }

  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    background: var(--noite-2);
    border-left: 1px solid rgba(199,154,90,.2);
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    padding: 110px 32px 40px;
    margin: 0;
    overflow-y: auto;
  }
  .menu.aberto { transform: translateX(0); }
  .menu__lista { flex-direction: column; gap: 4px; }
  .menu__lista a {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    color: var(--bone);
    border-bottom: 1px solid rgba(216,201,173,.1);
  }
  .menu__lista a::after { display: none; }

  /* Trava a rolagem do fundo com o menu aberto */
  body.menu-aberto { overflow: hidden; }

  .hero { min-height: 92svh; padding: 130px 0 110px; }
  .hero__texto { max-width: 100%; }
  .hero__acoes .btn { width: 100%; }

  /* No celular o texto do botão grande precisa caber em UMA linha.
     Diminuímos folga interna, corpo e espaçamento entre letras. */
  .btn--grande {
    padding: 17px 16px;
    font-size: clamp(12px, 3.4vw, 15px);
    letter-spacing: .05em;
    gap: 8px;
  }
  .btn--grande .ico-wa { width: 17px; height: 17px; }

  .card { padding: 32px 24px 36px; }
  .local__lista { grid-template-columns: 1fr; }
  .proposta { padding: 32px 24px 36px; }

  .investir__cta .btn,
  .condicoes__cta .btn { width: 100%; }

  /* No celular o botão flutuante fica só com o ícone */
  .wa-flutuante { padding: 15px; right: 16px; bottom: 16px; }
  .wa-flutuante__texto { display: none; }

  .lightbox { padding: 70px 12px 70px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--ant  { left: 8px; }
  .lightbox__nav--prox { right: 8px; }
}

/* Celulares estreitos (360–414px) */
@media (max-width: 430px) {
  .galeria { grid-template-columns: 1fr; gap: 10px; }
  .galeria__legenda { opacity: 1; transform: none; } /* sem hover no toque */

  .hero__proposta { font-size: clamp(34px, 10.5vw, 46px); }
  .proposta__lista li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .proposta__lista strong { text-align: left; }
  .numero__valor { font-size: 44px; }
}


/* ==========================================================================
   20. ACESSIBILIDADE — desliga o movimento para quem pede
   (Ajuste do sistema: "reduzir movimento")
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__fundo img { animation: none; transform: none; }
  .anim [data-revelar] { opacity: 1 !important; transform: none !important; }
  .wa-flutuante::before { display: none; }
  .btn:hover, .card:hover, .proposta:hover { transform: none; }
}


/* ==========================================================================
   21. IMPRESSÃO (quando alguém imprime a página)
   ========================================================================== */
@media print {
  .cabecalho, .wa-flutuante, .hero__seta, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}