/* =====================================================================
   Mapa do Haras Rio São José — estilos
   Página de vendas + mapa ilustrado. Mobile-first.
   Identidade: Verde São José, Marfim, Dourado, Oliva, Madeira, Terracota.
   Status no mapa: VERDE = disponível · VERMELHO = vendido · AZUL = reservado.
   ===================================================================== */

:root {
  --verde: #183827;
  --verde-medio: #24513A;
  --marfim: #FDFAF2;
  --dourado: #C8A86B;
  --dourado-forte: #b8944f;
  --dourado-claro: #E9D8B4;
  --oliva: #A6A27A;
  --madeira: #6A3C25;
  --terracota: #A74726;

  --disp: #3A9D5D;       --disp-hover: #2F8A4E;
  --vend: #B84A3A;       --vend-hover: #A33D2E;
  --resv: #3B6EA8;       --resv-hover: #2F5C8F;

  --mapa-bg: #F6F2E8;
  --via-fill: #E9DEC6;
  --via-borda: #D9CBAA;
  --lago: #BFD9E6;
  --lago-borda: #8FB6C9;

  --texto: #1f2f27;
  --texto-suave: #5f6f66;
  --linha: rgba(24, 56, 39, .12);
  --papel: #fff;

  --radius: 12px;
  --radius-g: 18px;
  --sombra: 0 4px 20px rgba(24, 56, 39, .10);
  --sombra-forte: 0 12px 38px rgba(24, 56, 39, .20);
  --header-h: 64px; /* recalculado em JS conforme a altura real do cabeçalho */

  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* variáveis atualizadas pelo JS conforme o zoom */
  --gleba-fs: 16px;
  --lote-sw: .6px;
  --gleba-sw: 1.6px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  background: var(--marfim);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.01em; color: var(--verde); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.is-hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }
button, input { font: inherit; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primario { background: var(--verde); color: var(--marfim); }
.btn--primario:hover { background: var(--verde-medio); }
.btn--secundario { background: #fff; border-color: rgba(24, 56, 39, .28); color: var(--verde); }
.btn--secundario:hover { background: #faf8f1; }
.btn--dourado { background: var(--dourado); color: var(--verde); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.btn--dourado:hover { background: var(--dourado-forte); transform: translateY(-1px); }
.btn--grande { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--verde); color: var(--marfim);
  padding: 8px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.topo__marca { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.topo__logo {
  width: 42px; height: 42px; object-fit: contain; flex: none;
  border-radius: 10px; background: rgba(253, 250, 242, .08);
}
.topo__titulos { min-width: 0; display: flex; flex-direction: column; }
.topo__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.08rem; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo__subtitulo { margin-top: 3px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado); }
.topo__nav { display: none; gap: 22px; font-size: .92rem; font-weight: 500; }
.topo__nav a { color: rgba(253, 250, 242, .85); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.topo__nav a:hover { color: #fff; border-bottom-color: var(--dourado); }
.topo__cta {
  flex: none; background: var(--dourado); color: var(--verde); text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: 9px 16px; border-radius: 999px;
}
.topo__cta:hover { background: var(--dourado-forte); }

@media (min-width: 900px) {
  .topo { padding: 10px 32px; gap: 28px; }
  .topo__titulo { font-size: 1.2rem; }
  .topo__nav { display: flex; }
}

/* ---------- Seções (padrão) ---------- */
.secao { padding: 52px 16px; }
.secao__inner { max-width: 1240px; margin: 0 auto; }
.secao__sobre { margin: 0 0 6px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--madeira); font-weight: 600; }
.secao__sobre--claro { color: var(--dourado); }
.secao__titulo { margin: 0 0 8px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; }
.secao__texto { margin: 0 0 22px; color: var(--texto-suave); max-width: 62ch; }
@media (min-width: 900px) { .secao { padding: 72px 32px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88dvh, 720px); display: grid; align-items: end;
  background: var(--verde); color: var(--marfim);
  padding: 72px 16px 40px;
}
.hero__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24, 56, 39, .28) 0%, rgba(24, 56, 39, .62) 55%, rgba(24, 56, 39, .94) 100%);
}
.hero__conteudo { max-width: 1240px; margin: 0 auto; width: 100%; }
.hero__sobre { margin: 0 0 12px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado); font-weight: 600; }
.hero__titulo { margin: 0; color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.1; max-width: 22ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.hero__sub { margin: 16px 0 24px; font-size: clamp(1.02rem, 1.8vw, 1.28rem); color: rgba(253, 250, 242, .92); max-width: 40ch; }

.numeros { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(253, 250, 242, .22); }
.numeros__item { display: flex; flex-direction: column; min-width: 120px; }
.numeros dd { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; color: var(--dourado-claro); }
.numeros dt { margin-top: 4px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(253, 250, 242, .78); }

@media (min-width: 900px) { .hero { padding: 96px 32px 56px; } }

/* ---------- Veja do alto (placeholder do vídeo 360°) ---------- */
.video { background: var(--marfim); }
.video__quadro {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
  background: var(--verde); border-radius: var(--radius-g); overflow: hidden; box-shadow: var(--sombra-forte);
  display: grid; place-items: center; isolation: isolate;
}
.video__fundo {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; z-index: -1;
  filter: blur(9px) saturate(.9) brightness(.6);
}
.video__centro { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--marfim); text-align: center; padding: 16px; }
.video__icone {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(253, 250, 242, .12); border: 1.5px solid rgba(253, 250, 242, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.video__icone svg { width: 34px; height: 34px; color: var(--dourado-claro); }
.video__msg { font-family: var(--fonte-titulo); font-size: clamp(1.3rem, 3vw, 2rem); text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }

/* ---------- Seção do mapa ---------- */
.mapa-secao { background: #fbf9f3; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.mapa-secao__cabeca { margin-bottom: 18px; }
.mapa-grade { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1100px) {
  .mapa-grade { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
}

.mapa {
  position: relative;
  height: calc(100dvh - var(--header-h) - 120px); min-height: 460px; max-height: 720px;
  background: var(--mapa-bg);
  border-radius: var(--radius-g); overflow: hidden; isolation: isolate;
  box-shadow: var(--sombra-forte); border: 1px solid rgba(24, 56, 39, .14);
}
@media (min-width: 1100px) { .mapa { height: min(calc(100dvh - var(--header-h) - 130px), 760px); max-height: none; } }

.mapa__svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;             /* o app cuida de pan/zoom por toque */
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mapa__svg.is-arrastando { cursor: grabbing; }
.mapa__fundo { pointer-events: none; }

/* ----- Camadas do mundo ----- */
.imovel-sombra { fill: var(--verde); fill-opacity: .22; pointer-events: none; }
.imovel { fill: #F3EEE1; stroke: var(--verde); stroke-width: 2px; stroke-opacity: .85; stroke-linejoin: round; pointer-events: none; }

.area { pointer-events: none; stroke-linejoin: round; }
.area--reserva { fill: url(#mata); stroke: #7FA47A; stroke-width: 1.2px; }
.area--lago { fill: var(--lago); stroke: var(--lago-borda); stroke-width: 1.2px; }
.area--clube, .area--lazer { fill: url(#lazer); stroke: #9FB48A; stroke-width: 1.1px; }
.area--area_comum { fill: #EEE9DA; stroke: #C9BFA4; stroke-width: 1px; }

.via { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.via--borda { stroke: var(--via-borda); }
.via--pista { stroke: var(--via-fill); }
.via--eixo { stroke: rgba(255, 255, 255, .55); stroke-dasharray: 6 5; }
.nome-via {
  font-family: var(--fonte-texto); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  fill: #7A6A48; pointer-events: none; dominant-baseline: central;
}

.gleba { fill: none; stroke: var(--verde); stroke-width: var(--gleba-sw); stroke-linejoin: round; pointer-events: none; }

.lote { stroke: var(--marfim); stroke-width: var(--lote-sw); stroke-linejoin: round; cursor: pointer; transition: fill .15s ease, opacity .2s ease; }
.lote--disponivel { fill: var(--disp); }
.lote--disponivel:hover { fill: var(--disp-hover); }
.lote--vendido { fill: var(--vend); }
.lote--vendido:hover { fill: var(--vend-hover); }
.lote--reservado { fill: var(--resv); }
.lote--reservado:hover { fill: var(--resv-hover); }

/* Filtro "Só disponíveis": esmaece o que não está disponível */
.so-disponiveis .lote--vendido, .so-disponiveis .lote--reservado { opacity: .22; }
.so-disponiveis .rotulo--vendido, .so-disponiveis .rotulo--reservado { opacity: .3; }

/* Rótulos dos lotes (tamanho em unidades do mundo; escondidos quando o zoom é baixo) */
.rotulo {
  font-family: var(--fonte-texto); font-weight: 700; fill: #fff;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: rgba(24, 56, 39, .35); stroke-width: .35px; stroke-linejoin: round;
}

/* Rótulos das glebas e áreas: tamanho em px constante (JS ajusta --gleba-fs = 16px / zoom) */
.rotulo-gleba, .rotulo-area {
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke-linejoin: round;
}
.rotulo-gleba {
  font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .02em;
  fill: var(--verde);
  stroke: rgba(253, 250, 242, .95);
  font-size: var(--gleba-fs); stroke-width: calc(var(--gleba-fs) * .28);
}
.rotulo-area {
  font-family: var(--fonte-titulo); font-weight: 600; fill: #3E5C43; font-style: italic;
  stroke: rgba(253, 250, 242, .85);
  font-size: calc(var(--gleba-fs) * .85); stroke-width: calc(var(--gleba-fs) * .18);
}
.rotulo-area--lago { fill: #2F5C8F; }

/* Destaque do lote selecionado */
#halo { fill: none; stroke: var(--dourado); stroke-width: 12px; stroke-opacity: .6; stroke-linejoin: round; pointer-events: none; }
#contorno { fill: none; stroke: var(--marfim); stroke-width: 2.6px; stroke-linejoin: round; pointer-events: none; }

/* Marcadores das áreas comuns (tamanho constante em px; o JS aplica scale(1/k)) */
.ponto { cursor: pointer; filter: url(#sombra-pin); }
.ponto__pe { fill: var(--verde); fill-opacity: .35; }
.ponto__haste { stroke: var(--marfim); stroke-width: 2.2px; stroke-linecap: round; }
.ponto__circulo { fill: var(--dourado); stroke: var(--marfim); stroke-width: 2.2px; transition: fill .15s; }
.ponto__n { font-family: var(--fonte-texto); font-weight: 700; font-size: 12.5px; fill: var(--verde); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ponto:hover .ponto__circulo, .ponto.is-ativo .ponto__circulo { fill: var(--dourado-forte); }
.ponto:focus { outline: none; }
.ponto.is-ativo .ponto__anel, .ponto:focus-visible .ponto__anel { display: block; }
.ponto__anel { display: none; fill: none; stroke: var(--dourado); stroke-width: 2px; stroke-opacity: .7; }
.nome-via--rua, .nome-via--acesso { letter-spacing: .08em; }
.rotulo-area--reserva { fill: #3E5C43; }
.rotulo-area--clube { fill: #5A6E3F; }

/* Elementos fixos: rosa dos ventos e escala */
.rosa { pointer-events: none; }
.rosa__fundo { fill: rgba(255, 255, 255, .88); stroke: var(--linha); }
.rosa__n { fill: var(--terracota); }
.rosa__eo { fill: #C9C0A8; }
.rosa__texto { font-family: var(--fonte-titulo); font-weight: 700; font-size: 10px; fill: var(--verde); text-anchor: middle; }
.escala { pointer-events: none; }
.escala__fundo { fill: rgba(255, 255, 255, .88); stroke: var(--linha); }
.escala__linha { stroke: var(--verde); stroke-width: 2.5px; }
.escala__texto { font-family: var(--fonte-texto); font-weight: 600; font-size: 11px; fill: var(--verde); }

/* ---------- Busca sobre o mapa ---------- */
.busca {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  width: min(260px, calc(100% - 82px));
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--linha); border-radius: 999px; box-shadow: var(--sombra);
  padding: 4px 4px 4px 12px;
}
.busca:focus-within { border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(200, 168, 107, .35); }
.busca__icone { width: 18px; height: 18px; color: var(--texto-suave); flex: none; }
.busca__input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--verde); padding: 8px 0; font-size: .95rem; -webkit-appearance: none; appearance: none; }
.busca__input::placeholder { color: #8b978f; }
.busca__input:focus { outline: none; }
.busca__btn {
  background: var(--verde); color: var(--marfim); border: 0; border-radius: 999px; padding: 0 14px; height: 34px;
  font-weight: 600; font-size: .85rem; cursor: pointer; flex: none;
}
.busca__btn:hover { background: var(--verde-medio); }

/* ---------- Controles flutuantes ---------- */
.controles { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.ctrl {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linha); background: #fff; color: var(--verde);
  box-shadow: var(--sombra); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.ctrl:hover { background: #faf8f1; }
.ctrl:active { transform: translateY(1px); }
.ctrl svg { width: 22px; height: 22px; }

/* ---------- Legenda + filtro ---------- */
.legenda {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius); border: 1px solid var(--linha); box-shadow: var(--sombra);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: .84rem;
}
.legenda__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legenda__item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.legenda__cor { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }
.legenda__cor--disponivel { background: var(--disp); }
.legenda__cor--reservado { background: var(--resv); }
.legenda__cor--vendido { background: var(--vend); }
.legenda__n { font-weight: 700; color: var(--verde); }

.alternar { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-weight: 500; }
.alternar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alternar__trilho {
  position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cfcabc; flex: none;
  transition: background .2s;
}
.alternar__trilho::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.alternar input:checked + .alternar__trilho { background: var(--disp); }
.alternar input:checked + .alternar__trilho::before { transform: translateX(16px); }
.alternar input:focus-visible + .alternar__trilho { outline: 3px solid var(--dourado); outline-offset: 2px; }

/* ---------- Toast ---------- */
.toast {
  position: absolute; top: 66px; left: 50%; z-index: 40;
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); text-align: center;
  background: var(--verde); color: #fff; font-size: .9rem; padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--sombra-forte); transition: opacity .25s, transform .25s;
}
.toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }
.toast--erro { background: var(--terracota); }

/* ---------- Chips de situação ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--pronto { background: #E3F1E7; color: #23683B; }
.chip--em_obra { background: #F6ECD6; color: #7A5A1E; }
.chip--previsto { background: #E4ECF5; color: #2F5C8F; }

/* ---------- Popover das áreas comuns ---------- */
.popover {
  position: absolute; z-index: 22; width: 280px; max-width: calc(100% - 24px);
  background: #fff; border-radius: var(--radius); box-shadow: var(--sombra-forte); border: 1px solid var(--linha);
  padding: 14px 40px 14px 14px;
  transform: translate(-50%, calc(-100% - 40px));
}
.popover::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
  background: #fff; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  transform: translateX(-50%) rotate(45deg);
}
.popover.is-abaixo { transform: translate(-50%, 16px); }
.popover.is-abaixo::after { bottom: auto; top: -8px; transform: translateX(-50%) rotate(-135deg); }
.popover__fechar {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: #f1efe6; color: var(--verde); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.popover__fechar svg { width: 16px; height: 16px; }
.popover__topo { display: flex; align-items: center; gap: 10px; }
.popover__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--dourado); color: var(--verde);
  font-weight: 700; font-size: .9rem; display: grid; place-items: center; border: 2px solid var(--marfim); box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.popover__icone { flex: none; width: 26px; height: 26px; color: var(--verde-medio); display: grid; place-items: center; }
.popover__icone svg { width: 24px; height: 24px; }
.popover__titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.popover__nome { font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--verde); line-height: 1.15; }
.popover__desc { margin: 10px 0 0; font-size: .86rem; color: var(--texto-suave); }

/* ---------- Painel do lote (bottom sheet no mobile) ---------- */
.painel {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  max-height: min(78%, 560px); overflow: auto; -webkit-overflow-scrolling: touch;
  background: #fff; color: var(--verde);
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 34px rgba(24, 56, 39, .22);
  padding: 4px 20px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
}
.painel.is-aberto { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.painel.is-arrastando { transition: none; }

.painel__alca { display: flex; justify-content: center; padding: 8px 0 10px; touch-action: none; cursor: grab; }
.painel__alca span { width: 44px; height: 5px; border-radius: 999px; background: #d7d3c6; }

.painel__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.painel__sobre { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--madeira); font-weight: 600; }
.painel__titulo { margin: 2px 0 0; font-size: 1.9rem; line-height: 1.1; outline: none; }
.painel__fechar {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1efe6; color: var(--verde);
  cursor: pointer; flex: none; display: grid; place-items: center; padding: 0;
}
.painel__fechar:hover { background: #e7e4d8; }
.painel__fechar svg { width: 20px; height: 20px; }

.status {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0;
  padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .88rem;
}
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status--disponivel { background: #E3F1E7; color: #23683B; }
.status--vendido { background: #F5E4E1; color: #8A3325; }
.status--reservado { background: #E4ECF5; color: #2F5C8F; }

.medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 18px 0 0; padding: 0; }
.medidas > div { background: #f8f6ef; border: 1px solid rgba(24, 56, 39, .06); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.medidas__area { grid-column: 1 / -1; background: linear-gradient(135deg, #f8f6ef, #f1ecdd) !important; }
.medidas dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.medidas dd { margin: 2px 0 0; font-weight: 600; font-size: 1.05rem; }
.medidas__area dd { font-family: var(--fonte-titulo); font-size: 1.6rem; }

.painel__valor {
  margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--dourado); border-radius: var(--radius); background: #fffdf7;
  display: flex; flex-direction: column; gap: 2px;
}
.painel__valor-rotulo { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.painel__valor strong { font-family: var(--fonte-titulo); font-size: 1.4rem; }
.painel__valor small { color: var(--texto-suave); font-size: .78rem; }

.painel__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.painel__acoes .btn { padding: 0 12px; }
.painel--sem-whats .painel__acoes { grid-template-columns: 1fr; }
.painel__nota { margin: 16px 0 0; font-size: .76rem; color: var(--texto-suave); }

/* Desktop: painel vira cartão lateral à direita dentro do quadro do mapa */
@media (min-width: 900px) {
  .painel {
    top: 16px; right: 16px; bottom: 16px; left: auto; width: 360px; max-height: none;
    border-radius: var(--radius-g); box-shadow: var(--sombra-forte);
    padding: 22px 24px 24px;
    transform: translateX(calc(100% + 40px));
  }
  .painel.is-aberto { transform: none; }
  .painel__alca { display: none; }
  .legenda { left: 16px; bottom: 16px; }
  .busca { top: 16px; left: 16px; width: 300px; }
  .controles { top: 16px; right: 16px; }
  .mapa.is-painel-aberto .controles { right: 400px; }
}

/* ---------- Estado (carregando / erro) ---------- */
.estado {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: var(--mapa-bg); padding: 24px; text-align: center;
}
.estado__caixa { max-width: 380px; }
.spinner {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid rgba(24, 56, 39, .15); border-top-color: var(--dourado);
  animation: girar .9s linear infinite;
}
.estado--erro .spinner { display: none; }
.estado__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 1.3rem; }
.estado--erro .estado__titulo { color: var(--terracota); }
.estado__texto { margin: 6px 0 16px; color: var(--texto-suave); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Coluna lateral ---------- */
.lateral { display: flex; flex-direction: column; gap: 18px; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-g); box-shadow: var(--sombra); padding: 18px; }
.cartao__titulo { margin: 0 0 4px; font-size: 1.2rem; }
.cartao__texto { margin: 0 0 12px; font-size: .86rem; color: var(--texto-suave); }

.orientacao__svg svg { width: 100%; height: auto; display: block; }
.ori__fundo { fill: #F6F2E8; }
.ori__via { fill: none; stroke: var(--via-borda); stroke-linecap: round; stroke-linejoin: round; }
.ori__via--pista { stroke: var(--via-fill); }
.ori__rua { fill: none; stroke: #CDB98F; stroke-linecap: round; }
.ori__nome { font-family: var(--fonte-texto); font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; fill: #7A6A48; text-anchor: middle; }
.ori__rua-n { font-family: var(--fonte-texto); font-weight: 600; font-size: 8.5px; fill: #7A6A48; text-anchor: middle; }
.ori__seta { fill: #7A6A48; }
.ori__pin { fill: var(--dourado); stroke: var(--marfim); stroke-width: 1.5px; }
.ori__pin-t { font-family: var(--fonte-texto); font-weight: 700; font-size: 8px; fill: var(--verde); text-anchor: middle; dominant-baseline: central; }
.ori__mata { fill: url(#ori-mata); stroke: #7FA47A; }
.ori__rot { font-family: var(--fonte-texto); font-weight: 600; font-size: 8.5px; fill: var(--verde); text-anchor: middle; }
.ori__gleba { fill: #E7EFE4; stroke: #B6C7B6; stroke-width: .8px; }

.comuns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comuns__item {
  display: grid; grid-template-columns: 30px 26px 1fr; gap: 6px 10px; align-items: start;
  width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linha);
  padding: 10px 6px; cursor: pointer; border-radius: 8px; color: inherit; font: inherit;
}
.comuns__item:first-child { border-top: 0; }
.comuns__item:hover, .comuns__item.is-ativo { background: #faf7ee; }
.comuns__item.is-ativo { box-shadow: inset 3px 0 0 var(--dourado); }
.comuns__item--sem-mapa { cursor: default; }
.comuns__item--sem-mapa:hover { background: none; }
.comuns__item--sem-mapa .comuns__n { background: #E9DEC6; }
.comuns__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--dourado); color: var(--verde);
  font-weight: 700; font-size: .82rem; display: grid; place-items: center; border: 2px solid var(--marfim); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.comuns__icone { width: 26px; height: 26px; color: var(--verde-medio); display: grid; place-items: center; margin-top: 1px; }
.comuns__icone svg { width: 22px; height: 22px; }
.comuns__corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.comuns__nome { font-weight: 600; color: var(--verde); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.comuns__desc { font-size: .82rem; color: var(--texto-suave); margin: 0; }

@media (min-width: 1100px) {
  .lateral { max-height: 600px; overflow: auto; padding-right: 2px; }
}

/* ---------- Galeria de fotos ---------- */
.fotos { background: var(--marfim); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card-foto {
  position: relative; margin: 0; background: #fff; border-radius: var(--radius-g); overflow: hidden;
  box-shadow: var(--sombra); border: 1px solid var(--linha);
}
.card-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e8e4d8; }
.card-foto--vertical img { object-position: center 30%; }
.card-foto figcaption { padding: 12px 14px 14px; font-size: .88rem; font-weight: 500; color: var(--verde); }
.tarja {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(24, 56, 39, .88); color: var(--dourado-claro); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px;
}
.subgaleria { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linha); }
.subgaleria__titulo { margin: 0 0 6px; font-size: 1.35rem; }

/* ---------- Como chegar ---------- */
.chegar { background: var(--verde); color: var(--marfim); }
.chegar .secao__titulo { color: #fff; }
.chegar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.chegar__endereco { margin: 6px 0 4px; display: flex; align-items: flex-start; gap: 10px; font-size: 1.05rem; font-weight: 500; }
.chegar__endereco svg { width: 22px; height: 22px; flex: none; color: var(--dourado); margin-top: 2px; }
.chegar__texto { margin: 0; color: rgba(253, 250, 242, .8); }

/* ---------- Rodapé ---------- */
.rodape {
  background: #112a1d; color: rgba(253, 250, 242, .8); font-size: .86rem;
  padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
}
.rodape__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.rodape p { margin: 0; }
.rodape__marca { font-family: var(--fonte-titulo); font-size: 1.05rem; color: #fff; margin-bottom: 6px !important; }
.rodape__legal { margin-top: 12px !important; color: rgba(253, 250, 242, .6); font-size: .78rem; max-width: 76ch; }
@media (min-width: 900px) { .rodape { padding-left: 32px; padding-right: 32px; } }

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Rodada 3 — mapa logo de cara, placas de vias, pinos com nome, mapa-guia
   ===================================================================== */

/* ---------- Faixa da headline (substitui o hero) ---------- */
.faixa { background: var(--verde); color: var(--marfim); padding: 22px 16px 24px; border-bottom: 1px solid rgba(200, 168, 107, .35); }
.faixa__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.faixa__texto { min-width: 0; flex: 1 1 520px; }
.faixa__sobre { margin: 0 0 6px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado); font-weight: 600; }
.faixa__titulo { margin: 0; color: #fff; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.2; max-width: 34ch; text-wrap: balance; }
.faixa__sub { margin: 8px 0 0; font-size: clamp(.95rem, 1.4vw, 1.08rem); color: rgba(253, 250, 242, .88); }
.numeros--faixa { margin: 0; padding: 0; border: 0; gap: 8px 28px; flex: 0 0 auto; }
.numeros--faixa .numeros__item { min-width: 0; }
.numeros--faixa dd { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.numeros--faixa dt { font-size: .68rem; }
@media (min-width: 900px) { .faixa { padding: 22px 32px 24px; } }

/* ---------- Seção do mapa mais enxuta ---------- */
.mapa-secao { padding: 18px 16px 34px; }
@media (min-width: 900px) { .mapa-secao { padding: 22px 32px 40px; } }
.mapa-secao__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; margin-bottom: 12px; }
.mapa-secao__cabeca .secao__sobre { margin-bottom: 2px; }
.mapa-secao__cabeca .secao__titulo { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.mapa-secao__dica { margin: 0; color: var(--texto-suave); font-size: .9rem; max-width: 60ch; }

/* ---------- Placas de avenidas e ruas (tamanho fixo em px) ---------- */
.placa { pointer-events: none; }
.placa__haste { stroke: var(--madeira); stroke-width: 2px; }
.placa--avenida .placa__fundo { fill: var(--verde); stroke: var(--dourado); stroke-width: 1.2px; filter: url(#sombra-pin); }
.placa--avenida .placa__texto { fill: #fff; font-weight: 700; letter-spacing: .08em; }
.placa--rua .placa__fundo { fill: #fff; stroke: var(--verde); stroke-width: 1px; }
.placa--rua .placa__texto { fill: var(--verde); font-weight: 700; letter-spacing: .04em; }
.placa__texto { font-family: var(--fonte-texto); text-anchor: middle; dominant-baseline: central; }

/* ---------- Marcadores com nome (pílula) ---------- */
.ponto__pill { fill: var(--dourado); stroke: var(--marfim); stroke-width: 2px; transition: fill .15s; }
.ponto__icone { color: var(--verde); }
.ponto__rotulo { font-family: var(--fonte-texto); font-weight: 700; font-size: 12.5px; fill: var(--verde); dominant-baseline: central; pointer-events: none; }
.ponto:hover .ponto__pill, .ponto.is-ativo .ponto__pill { fill: var(--dourado-forte); }
.ponto.is-ativo .ponto__anel, .ponto:focus-visible .ponto__anel { display: block; }
.ponto__anel { display: none; fill: none; stroke: var(--dourado); stroke-width: 2px; stroke-opacity: .7; }
.popover { padding-right: 40px; }

/* ---------- Mapa-guia ilustrado ---------- */
.guia { background: var(--marfim); }
.guia__quadro { margin: 0; }
.guia__link { display: block; border-radius: var(--radius-g); overflow: hidden; box-shadow: var(--sombra-forte); border: 1px solid var(--linha); background: #fff; }
.guia__link:hover { box-shadow: 0 16px 44px rgba(24, 56, 39, .26); }
.guia__img { display: block; width: 100%; height: auto; background: #fff; }
.guia__quadro figcaption { margin-top: 10px; font-size: .82rem; color: var(--texto-suave); }
@media (max-width: 720px) {
  .guia__link { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .guia__img { width: 1100px; max-width: none; }
}

/* =====================================================================
   Rodada 4 — mapa ilustrado 2,5D: relevo, mata, estrada, área de lazer
   ===================================================================== */
.mapa__fundo { fill: #F7F2E4; }
.imovel { fill: #A9CF88; stroke: #5E8A44; stroke-width: 2px; stroke-opacity: 1; }
.relevo-lado { fill: #587A3B; pointer-events: none; }
.relevo-sombra { fill: #2b3d1f; fill-opacity: .16; pointer-events: none; }
.area--reserva { fill: #7BAD5C; stroke: #5E8A44; stroke-width: 1.4px; }
.area--clube, .area--lazer { fill: #F0E4C3; stroke: #D8C69A; stroke-width: 1.4px; }
.area--area_comum { fill: #B6D896; stroke: #5E8A44; stroke-width: 1px; }
.via--borda { stroke: #CDB98F; }
.via--pista { stroke: #EFE2BF; }
.lote { stroke: #fff; stroke-opacity: .85; }
.estrada { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.estrada--borda { stroke: #B9B4A8; stroke-width: 17px; }
.estrada--pista { stroke: #D9D5CB; stroke-width: 13px; }
.estrada--eixo { stroke: #fff; stroke-width: 1.4px; stroke-dasharray: 9 8; }
.portal { pointer-events: none; }
.lazer { cursor: pointer; }
.lazer:focus { outline: none; }
.lazer__nome {
  font-family: var(--fonte-texto); font-weight: 700; font-size: 6.5px; fill: var(--verde); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 2px; stroke-linejoin: round;
}
.lazer.is-ativo .lazer__nome { fill: var(--madeira); }
.rotulo-area--reserva { fill: #1f3d24; stroke: rgba(255, 255, 255, .9); }
.placa--destino .placa__fundo { fill: #2F5C8F; stroke: #fff; stroke-width: 1.2px; filter: url(#sombra-pin); }
.placa--destino .placa__texto { fill: #fff; font-weight: 700; letter-spacing: .06em; }

/* ---------- Barra de áreas comuns sob o mapa ---------- */
.comuns-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.comuns-barra__titulo { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--madeira); font-weight: 600; margin-right: 4px; }
.comuns-barra__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-comum {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; color: var(--verde); font-weight: 600; font-size: .84rem; cursor: pointer;
  box-shadow: 0 1px 4px rgba(24, 56, 39, .08);
}
.chip-comum svg { width: 16px; height: 16px; color: var(--verde-medio); }
.chip-comum:hover, .chip-comum.is-ativo { background: var(--dourado-claro); border-color: var(--dourado); }
.comuns-barra__link { margin-left: auto; font-size: .84rem; color: var(--verde); font-weight: 600; }

/* Selo da gleba (círculo no ponto do número; some junto com os números) */
.gleba-selo { fill: #FDFAF2; stroke: var(--verde); stroke-width: 1.4px; stroke-opacity: .85; pointer-events: none; }
.glebas-ocultas .gleba-selo { display: none; }

/* ---------- Rodada 5: reserva técnica na simbologia; legenda sem números ---------- */
:root { --rtec: #7C8A99; --rtec-hover: #66737F; }
.lote--reserva_tecnica { fill: var(--rtec); }
.lote--reserva_tecnica:hover { fill: var(--rtec-hover); }
.so-disponiveis .lote--reserva_tecnica { opacity: .22; }
.so-disponiveis .rotulo--reserva_tecnica { opacity: .3; }
.legenda__cor--reserva_tecnica { background: var(--rtec); }
.status--reserva_tecnica { background: #E8ECF0; color: #4A5560; }
.legenda__itens { gap: 6px 12px; }

/* ---------- Vídeo 360° (player real) ---------- */
.video__quadro { aspect-ratio: 16 / 9; background: #000; }
.video__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.video__play {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; border: 0; padding: 16px; cursor: pointer; color: var(--marfim); text-align: center;
  background: linear-gradient(180deg, rgba(24, 56, 39, .10), rgba(24, 56, 39, .55));
}
.video__play .video__icone { transition: transform .15s, background .15s; }
.video__play:hover .video__icone { transform: scale(1.06); background: rgba(253, 250, 242, .22); }
.video__quadro.is-tocando .video__play { display: none; }
.video__nota { margin: 10px 0 0; font-size: .8rem; color: var(--texto-suave); }

/* =====================================================================
   PLANTA HUMANIZADA EM 3D (js/mapa3d.js)
   ===================================================================== */
.tem-3d .mapa__svg { display: none; }
.mapa3d { position: absolute; inset: 0; z-index: 0; background: #DCE7EE; }
.mapa3d__canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.is-mexendo .mapa3d__canvas { cursor: grabbing; }
.popover.is-fora { visibility: hidden; }

.rotulos3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.r3 {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  white-space: nowrap; font-family: var(--fonte-texto); will-change: transform; line-height: 1;
}
.r3-gleba {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(253, 250, 242, .94); color: var(--verde); border: 1.5px solid var(--verde);
  font-weight: 700; font-size: 11.5px; box-shadow: 0 2px 6px rgba(24, 56, 39, .28);
}
.r3-via { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.r3-via--avenida { background: var(--verde); color: #fff; font-size: 10.5px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .5); }
.r3-via--rua { background: #fff; color: var(--verde); font-size: 9.5px; padding: 4px 7px; border: 1px solid rgba(24, 56, 39, .35); }
.r3-via--estrada { background: #FDFAF2; color: #6A3C25; font-size: 9.5px; padding: 4px 8px; border: 1px solid #C9B58C; }
.r3-via--destino { background: #2F5C8F; color: #fff; font-size: 10.5px; padding: 5px 9px; }

.r3-marca {
  translate: -50% -100%; margin-top: -14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--marfim); color: var(--verde); border: 2px solid var(--dourado);
  font-weight: 700; font-size: 13px; box-shadow: 0 6px 16px rgba(24, 56, 39, .28);
}
.r3-marca::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px;
  background: var(--dourado);
}
.r3-marca svg { width: 18px; height: 18px; flex: none; }
button.r3-marca { pointer-events: auto; cursor: pointer; font-family: var(--fonte-texto); }
button.r3-marca:hover { background: #fff; border-color: var(--dourado-forte); }
.r3-marca--reserva, .r3-marca--lago { background: rgba(253, 250, 242, .88); border-color: #8FB08A; font-weight: 600; font-style: italic; font-family: var(--fonte-titulo); }
.r3-marca--lago::after { background: #8FB6C9; }
.r3-marca--reserva::after { background: #8FB08A; }

.r3-item {
  pointer-events: auto; cursor: pointer;
  padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(24, 56, 39, .25);
  background: rgba(255, 255, 255, .93); color: var(--verde); font: 600 11px var(--fonte-texto);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.r3-item:hover { background: #fff; border-color: var(--dourado); }

.r3-lote {
  font-weight: 700; font-size: 11px; color: #13261B; letter-spacing: .01em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
.r3-lote--vendido { color: #5A1B10; }
.r3-lote--reservado, .r3-lote--reserva_tecnica { color: #10304F; }
.r3-lote.is-apagado { opacity: .35; }

.r3-sel {
  translate: -50% -100%; margin-top: -16px;
  padding: 6px 12px; border-radius: 8px; background: var(--dourado); color: var(--verde);
  font-weight: 800; font-size: 13px; box-shadow: 0 6px 16px rgba(24, 56, 39, .35);
}
.r3-sel::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--dourado);
}

.ctrl--texto { font: 800 .78rem var(--fonte-texto); letter-spacing: .04em; }
.ctrl--norte svg { width: 26px; height: 26px; transition: transform .08s linear; }
@media (max-width: 600px) {
  .r3-marca { font-size: 12px; padding: 5px 10px 5px 7px; gap: 5px; }
  .r3-marca svg { width: 16px; height: 16px; }
  .r3-gleba { width: 23px; height: 23px; font-size: 10.5px; }
}

/* Imagens 3D de "Como vai ficar" (16:9, com link para a versão grande) */
.card-foto > a { display: block; }
.galeria--projeto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.galeria--projeto .card-foto img { aspect-ratio: 16 / 9; height: auto; }

/* ---- Maquete humanizada (24/09/2026): mesma leitura do mapa ilustrado ---- */
.mapa3d { background: #EFE9DA; }
.is-entorno .mapa3d { background: #CFDDE8; }
/* números das glebas em serifa, como no mapa ilustrado */
.r3-gleba {
  width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 700 21px var(--fonte-titulo); color: var(--verde); letter-spacing: -.01em;
  text-shadow: 0 0 3px #FDFAF2, 0 0 3px #FDFAF2, 0 0 6px #FDFAF2, 0 1px 1px rgba(253, 250, 242, .9);
}
@media (max-width: 600px) { .r3-gleba { width: auto; height: auto; font-size: 17px; } }
/* medidas do lote selecionado (memorial descritivo) */
.r3-medida {
  padding: 3px 7px; border-radius: 6px; background: rgba(24, 56, 39, .9); color: #fff;
  font: 700 11px var(--fonte-texto); border: 1px solid var(--dourado); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* escala gráfica */
.escala3d {
  position: absolute; right: 12px; bottom: 12px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px 5px; border-radius: 8px; background: rgba(253, 250, 242, .92); border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
.escala3d__barra { display: block; height: 6px; border: 2px solid var(--verde); border-top: 0; min-width: 20px; }
.escala3d__texto { font: 700 11px var(--fonte-texto); color: var(--verde); }
.ctrl--entorno svg { width: 22px; height: 22px; }
.ctrl[aria-pressed="true"] { background: var(--verde); color: var(--marfim); }
@media (max-width: 600px) { .escala3d { bottom: auto; top: 64px; right: auto; left: 12px; } }
.r3-sel { margin-top: -34px; }

/* =====================================================================
   Vendas — botão grande do WhatsApp sob o vídeo + botão flutuante no celular
   ===================================================================== */
:root { --whats: #1FA855; --whats-forte: #178C46; }
.btn--whats { background: var(--whats); color: #fff; box-shadow: 0 10px 28px rgba(23, 140, 70, .35); }
.btn--whats:hover { background: var(--whats-forte); transform: translateY(-1px); }
.btn--enorme { min-height: 72px; padding: 12px 34px; gap: 16px; font-size: 1.1rem; border-radius: 18px; }
.btn--enorme svg { width: 34px; height: 34px; }
.cta-whats { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cta-whats .btn { width: 100%; max-width: 520px; }
.cta-whats__textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.cta-whats__titulo { font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.cta-whats__num { font-size: .92rem; font-weight: 500; opacity: .92; }
.cta-whats__apoio { margin: 0; max-width: 520px; font-size: .9rem; color: var(--texto-suave); }

.whats-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 60px; height: 60px; border-radius: 50%; display: none; place-items: center;
  background: var(--whats); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); text-decoration: none;
  transition: transform .2s, opacity .2s;
}
.whats-flutuante svg { width: 32px; height: 32px; }
.whats-flutuante.is-oculto { opacity: 0; transform: scale(.6); pointer-events: none; }
@media (max-width: 720px) {
  .whats-flutuante { display: grid; }
  .btn--enorme { padding: 12px 20px; }
  .cta-whats__titulo { font-size: 1.15rem; }
}

.so-cel { display: none; }
@media (max-width: 720px) {
  .so-pc { display: none; }
  .so-cel { display: inline; }
  .rodape { padding-bottom: 96px; }
}

/* =====================================================================
   Mapa no celular: horizontal, girar, tela cheia (24/09/2026)
   ===================================================================== */
.ctrl--cheia[aria-pressed="true"] { background: var(--verde); color: var(--marfim); }
.mapa.is-cheia {
  position: fixed; inset: 0; z-index: 200; width: 100vw; height: 100dvh; min-height: 0; max-height: none;
  border-radius: 0; border: 0;
}
.mapa.is-cheia .controles { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
html.mapa-cheia, html.mapa-cheia body { overflow: hidden; }
html.mapa-cheia .whats-flutuante { display: none; }
@media (max-width: 720px) {
  .mapa { height: clamp(380px, 56vh, 470px); min-height: 0; }
  .ctrl { width: 48px; height: 48px; }
  .ctrl svg { width: 24px; height: 24px; }
  .controles { gap: 10px; }
  .controles .ctrl--texto, .controles .ctrl--entorno, .controles .ctrl--norte { display: none; }
}

.aviso-toque {
  position: absolute; left: 50%; bottom: 76px; z-index: 12; transform: translate(-50%, 8px);
  background: rgba(24, 56, 39, .92); color: #fff; font-weight: 600; font-size: .88rem; padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s;
}
.aviso-toque.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* Entrada para a experiência virtual (tour/) */
.faixa__tour { margin-top: 16px; min-height: 50px; padding: 0 22px; }
.faixa__tour svg { width: 18px; height: 18px; }

/* Rosa dos ventos do mapa 3D (N, L, S, O) */
.rosa3d { position: absolute; z-index: 6; right: 14px; bottom: 14px; width: 74px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 10px rgba(24, 56, 39, .28)); }
.rosa3d svg { width: 100%; height: 100%; display: block; transition: transform .08s linear; }
.painel.is-aberto ~ .rosa3d { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .rosa3d { width: 58px; height: 58px; right: auto; bottom: auto; left: 12px; top: 112px; } }
@media (min-width: 900px) { .mapa:has(.painel.is-aberto) .rosa3d { right: 392px; } }


/* =====================================================================
   Celular: o mapa é o protagonista (29/09/2026)
   - mapa logo no topo da página, largura total e quase a tela inteira
   - legenda e "Só disponíveis" numa faixa fina logo abaixo do mapa (fora da imagem)
   - áreas comuns numa única linha deslizante, discreta
   - menos rótulos na visão geral (uma placa por avenida, marcadores só com ícone)
   ===================================================================== */
#mapa, #guia, #veja-do-alto, #pronto, #como-chegar { scroll-margin-top: calc(var(--header-h) + 4px); }
@media (max-width: 720px) {
  main#inicio { display: flex; flex-direction: column; }
  .mapa-secao { order: -1; padding: 12px 0 16px; border-top: 0; }
  .faixa { border-top: 1px solid rgba(200, 168, 107, .35); }
  .mapa-secao .secao__inner { max-width: none; }
  .mapa-secao__cabeca { padding: 0 16px; margin-bottom: 10px; gap: 2px; }
  .mapa-secao__cabeca .secao__sobre { font-size: .64rem; letter-spacing: .12em; }
  .mapa-secao__cabeca .secao__titulo { font-size: 1.4rem; }
  .mapa-secao__dica { font-size: .88rem; }

  .mapa { height: calc(100svh - var(--header-h) - 190px); min-height: 430px; max-height: 700px;
          border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .busca { top: 10px; left: 10px; width: calc(100% - 76px); padding: 3px 3px 3px 11px; }
  .busca__input { font-size: 16px; padding: 7px 0; }
  .busca__btn { height: 34px; }
  .controles { top: 10px; right: 10px; gap: 8px; }
  .ctrl { width: 44px; height: 44px; }
  .ctrl svg { width: 22px; height: 22px; }
  .escala3d { display: none; }
  .rosa3d { width: 48px; height: 48px; left: 10px; top: auto; bottom: 10px; right: auto; }

  /* legenda fora do mapa (o app.js move o elemento para depois do quadro no celular) */
  .mapa + .legenda {
    position: static; max-width: none; margin: 0; padding: 10px 16px; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--linha); box-shadow: none; background: #fff;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: .8rem;
  }
  .mapa + .legenda .legenda__itens { gap: 4px 10px; }
  .mapa + .legenda .legenda__cor { width: 12px; height: 12px; }
  .mapa + .legenda .alternar { font-size: .82rem; }

  /* áreas comuns: uma linha deslizante, pequena */
  .comuns-barra { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; }
  .comuns-barra__titulo { padding: 0 16px; font-size: .64rem; }
  .comuns-barra__titulo .so-cel { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto-suave); }
  .comuns-barra__chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .comuns-barra__chips::-webkit-scrollbar { display: none; }
  .chip-comum { flex: none; padding: 5px 10px; font-size: .76rem; gap: 5px; box-shadow: none; background: #f6f3ea; }
  .chip-comum svg { width: 13px; height: 13px; }
  .comuns-barra__link { margin: 0 16px; font-size: .78rem; }

  /* visão geral: rótulos enxutos */
  .rotulos3d.is-longe .r3-marca span { display: none; }
  .rotulos3d.is-longe .r3-marca { padding: 6px; }
  .r3-via--avenida { font-size: 9.5px; padding: 4px 7px; }
}

.so-cel-flex { display: none; }
@media (max-width: 720px) {
  .so-pc-flex { display: none; }
  .so-cel-flex { display: inline-flex; }
  .topo__cta { font-size: .84rem; padding: 8px 14px; }
  .mapa + .legenda { padding-right: 88px; }
}
.painel__consulta { margin: 14px 0 0; font-size: .86rem; color: var(--texto-suave); }
/* celular: painel do lote compacto — medidas numa linha e o WhatsApp à vista sem rolar */
@media (max-width: 720px) {
  .painel { max-height: 86%; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
  .painel__alca { padding: 7px 0 6px; }
  .painel__titulo { font-size: 1.5rem; }
  .painel__fechar { width: 36px; height: 36px; }
  .status { margin-top: 8px; padding: 4px 10px; font-size: .8rem; }
  .medidas { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
  .medidas > div { padding: 7px 8px; }
  .medidas dt { font-size: .6rem; letter-spacing: .06em; }
  .medidas dd { font-size: .86rem; white-space: nowrap; }
  .medidas__area dd { font-size: 1.3rem; }
  .painel__consulta { margin-top: 10px; font-size: .8rem; }
  .painel__acoes { grid-template-columns: 1.4fr 1fr; margin-top: 10px; }
  .painel__nota { display: none; }
}
@media (max-width: 720px) {
  .painel__consulta { display: none; }
  .medidas__area { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px !important; }
  .medidas__area dd { font-size: 1.2rem; margin: 0; }
  .painel__acoes .btn { min-height: 46px; font-size: .88rem; }
}
@media (max-width: 720px) {
  .painel .status { position: absolute; top: 50px; right: 62px; margin: 0; }
  .painel__acoes .btn { white-space: nowrap; }
}

/* =====================================================================
   ?embed=1 — só o mapa, dentro do passeio virtual (tour/), 01/10/2026
   ===================================================================== */
html.embed, html.embed body { height: 100%; overflow: hidden; background: #EFE9DA; }
html.embed .topo, html.embed .faixa, html.embed main > section:not(#mapa), html.embed .rodape, html.embed footer,
html.embed .mapa-secao__cabeca, html.embed .comuns-barra, html.embed .whats-flutuante, html.embed .ctrl--cheia { display: none !important; }
html.embed .mapa-secao { padding: 0; border: 0; background: none; }
html.embed .mapa { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
html.embed .legenda { left: 8px; bottom: 8px; padding: 6px 9px; gap: 5px; font-size: .74rem; max-width: calc(100% - 70px); }
html.embed .legenda__itens { gap: 3px 9px; }
html.embed .legenda__cor { width: 11px; height: 11px; }
html.embed .rosa3d { left: auto; right: 8px; bottom: 8px; top: auto; width: 48px; height: 48px; }
html.embed .busca { top: 8px; left: 8px; }
html.embed .controles { top: 8px; right: 8px; }