/* ============================================================
   LOCALIZAÇÃO 3D — Fase 1 (fundação e abertura)
   O mapa ocupa 100% da tela: sem moldura, sem cabeçalho, sem barra de módulos.
   Controles em vidro quente, mínimos, flutuando sobre o território.
   ============================================================ */

.loc3d {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-0);
}

/* O palco do mapa para ACIMA da barra de seções. Não é capricho de layout:
   os créditos do Google (logo e "Dados do mapa") são renderizados pela API na
   base do próprio elemento e os termos do Maps Platform proíbem escondê-los.
   Com o mapa full-bleed a barra os cobria; assim eles ficam visíveis, no lugar
   discreto que a spec da C3 pede — reposicionar com elegância, nunca ocultar. */
.loc3d__stage {
  position: absolute;
  inset: 0;
  /* [C3-R 9.1/9.2] O mapa é quem trata os gestos: pinça para zoom, dois dedos
     para inclinar, um dedo para arrastar. `touch-action: none` impede o
     browser de sequestrar o gesto (rolagem, zoom de página, duplo-toque) antes
     de o Map3D vê-lo. O zoom de PÁGINA já está bloqueado no viewport do
     index.html (user-scalable=no) e o duplo-toque no touch-action do body. */
  touch-action: none;
}
/* Com a barra em cena o palco recua a altura dela: é o que mantém os créditos
   do Google visíveis (nunca cobertos). Durante o voo, sem barra, o mapa ocupa
   a tela inteira — nada de tarja morta no rodapé. */
.loc3d.is-barra .loc3d__stage { inset: 0 0 var(--bar-h) 0; }
.loc3d__stage gmp-map-3d,
.loc3d__stage > * { width: 100%; height: 100%; display: block; direction: rtl; }

/* ------------------------------------------------------------------
   ABERTURA "LENTE ÓPTICA" — zero tela preta (C3).
   O mapa já está VOANDO por trás; o que se vê é um véu bege desfocando a
   cena, como uma lente fora de foco. Quando o terreno desenha, o desfoque
   dissipa num focus pull e a paisagem "entra em foco" com a câmera em
   movimento. O preto de antes anunciava carregamento; isto anuncia cinema.
   ------------------------------------------------------------------ */
.loc3d__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 46%,
                    var(--loc-lente-centro) 0%,
                    var(--loc-lente) 58%,
                    #C4BAA8 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 2400ms ease-out;
}
.loc3d__veil.is-clearing {
  opacity: 0;
}
/* Reentrada na mesma sessão (C3-R 1.2): 1s de fade, sem ritual */
.loc3d__veil.is-rapido { transition-duration: 1000ms; }
/* Aos 6s o véu não existe mais — nem como camada morta sobre o mapa */
.loc3d__veil.is-fim { display: none; }

/* Abertura: os LOGOTIPOS no lugar do nome escrito (spec 15/08). O par FBR
   (monograma sobre o wordmark) é lido como UM logo só; a Thera vem ao lado,
   separada por um fio. Sobre o véu bege da C3 as marcas são CARVÃO — em creme
   elas sumiriam no claro (a cor é aplicada no JS, junto da máscara). */
.loc3d__brand {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.8rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 1800ms ease-out;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.12));
}
.loc3d__brand.is-in { opacity: 0.92; }
/* Saída: as marcas desaparecem totalmente em 1.8 segundos */
.loc3d__brand.is-out { opacity: 0; transition: opacity 1800ms ease-out; }
.loc3d__brand-img {
  max-width: 58rem;
  height: auto;
  object-fit: contain;
}

/* Frase Única de Abertura: SANTA CATARINA - BRASIL (50% do tempo até 70%, 50% do tempo até 0%, zero dureza) */
.loc3d__title-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 18;
  opacity: 0;
}
.loc3d__title-overlay.is-in {
  animation: loc3dTitleSymmetric 5000ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.loc3d__title-overlay.is-out {
  opacity: 0;
  animation: none;
  transition: opacity 800ms ease;
}

@keyframes loc3dTitleSymmetric {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
.loc3d__title-text {
  font-family: var(--font-body, "Archivo FBR", sans-serif);
  font-weight: 700;
  font-size: 3.8rem;
  letter-spacing: 0.75em;
  text-indent: 0.75em;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
}

/* [C3-R 7.3 — SUPERA o PDF] FECHAR no estilo do CTA da capa: contorno fino,
   peso 300, entreletra larga, flutuante com margem da borda. O bloco
   retangular carvão do PDF está anulado.
   A "proteção de contraste" é um halo escuro difuso, calibrado para
   desaparecer sobre fundo escuro e segurar a leitura sobre véu bege, campo
   seco ou neve — não é caixa, é sombra. */
.loc3d__close {
  position: absolute;
  top: 3.2rem;
  right: 3.2rem;
  z-index: 30;
  color: var(--cream);
  border: 1px solid rgba(229, 224, 211, 0.5);
  border-radius: var(--radius-btn);
  background: rgba(27, 25, 23, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(20, 18, 16, 0.30);
  text-shadow: 0 1px 10px rgba(20, 18, 16, 0.75);
  transition: background var(--t-touch) ease, opacity 600ms ease;
  opacity: 0;
  pointer-events: none;
}
.loc3d__close.is-in { opacity: 1; pointer-events: auto; }
.loc3d__close:active { background: rgba(27, 25, 23, 0.5); }

/* ------------------------------------------------------------------
   [C3-R 8.x] CONTROLES — coluna vertical estreita, encostada à direita e
   acima da barra de seções. NENHUM TEXTO VISÍVEL: os rótulos viraram
   aria-label/title. O painel quadrado e pesado da Fase B saiu; o que ficou
   é a rosa (que absorveu o "redefinir para norte"), o slider fino de
   inclinação e três botões redondos.
   Alvo de toque real ≥48px em cada item, mesmo com o desenho menor —
   dedo não é cursor.
   ------------------------------------------------------------------ */
.nav3d {
  position: absolute;
  right: 2.4rem;
  bottom: calc(var(--bar-h) + 6.4rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: var(--loc-col-w);
  padding: 1.2rem 0;
  background: rgba(27, 25, 23, 0.42);
  -webkit-backdrop-filter: blur(var(--loc-glass-blur));
  backdrop-filter: blur(var(--loc-glass-blur));
  border: 1px solid var(--loc-glass-borda);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 600ms ease, transform 600ms ease;
}
.nav3d.is-in { opacity: 1; transform: none; }
/* `display:flex` de autor vence o [hidden] da folha do browser */
.nav3d[hidden] { display: none; }

/* Rosa dos ventos: tocar redefine o norte, arrastar gira (convenção Earth) */
.nav3d__dial {
  position: relative;
  width: var(--loc-col-alvo);
  height: var(--loc-col-alvo);
  touch-action: none;
  cursor: grab;
}
.nav3d__dial:active { cursor: grabbing; }
.nav3d__rose {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 120ms linear;
}
.nav3d__ring { fill: rgba(229, 224, 211, 0.05); stroke: rgba(229, 224, 211, 0.22); stroke-width: 1; }
.nav3d__ticks { stroke: rgba(229, 224, 211, 0.3); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.nav3d__needle { fill: var(--accent-bright); }
.nav3d__needle-s { fill: rgba(229, 224, 211, 0.35); }
.nav3d__n {
  fill: var(--cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-anchor: middle;
  dominant-baseline: hanging;
}

/* Inclinar — traço fino; a área de toque é a coluna inteira, não o traço */
.nav3d__tilt {
  position: relative;
  width: var(--loc-col-alvo);
  height: 9.6rem;
  touch-action: none;
  cursor: ns-resize;
}
.nav3d__track {
  position: absolute;
  left: 50%;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 0.2rem;
  transform: translateX(-50%);
  background: rgba(229, 224, 211, 0.18);
  border-radius: 999px;
}
.nav3d__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--accent-bright);
  border-radius: 999px;
}
.nav3d__thumb {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.2rem;
  height: 0.6rem;
  transform: translate(-50%, 50%);
  background: var(--cream);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Zoom e recentrar: círculos discretos, alvo cheio */
.nav3d__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--loc-col-alvo);
  height: var(--loc-col-alvo);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  transition: background var(--t-touch) ease;
}
.nav3d__btn:hover { background: rgba(229, 224, 211, 0.08); }
.nav3d__btn:active { background: rgba(229, 224, 211, 0.16); }
.nav3d__btn .icon { width: 2.2rem; height: 2.2rem; color: var(--cream); }

/* ------------------------------------------------------------------
   BARRA DE SEÇÕES — rodapé, largura total, carvão, ativo em creme.
   É a navegação inteira da tela: substituiu os chips soltos do mapa 2D.
   ------------------------------------------------------------------ */
/* [C3-R 7.4] A paleta desta barra virou a REFERÊNCIA DEFINITIVA e mora em
   tokens.css (--bar-*), porque a barra da Home vai herdá-la numa rodada
   futura. Aqui só se consome token. Acrescentado nesta rodada: entrada de
   baixo para cima (1.5) e magnificação estilo dock do Mac, CONTIDA — 1.06 no
   item e 1.02 nos vizinhos, o suficiente para responder ao dedo sem virar
   brinquedo. */
.secbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: stretch;
  height: var(--bar-h);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.1);
  backdrop-filter: blur(var(--bar-blur)) saturate(1.1);
  border-top: none;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  /* entra de baixo para cima quando a câmera assenta */
  transform: translateY(100%);
  transition: transform var(--bar-entrada-ms) var(--ease-map);
}
.secbar.is-in { transform: none; }
.secbar[hidden] { display: none; }

/* Emblema à esquerda: é só a marca — e é o GATILHO DISCRETO do modo interno
   (toque longo de 1,5s). Sem texto, sem affordance: quem não sabe, não
   descobre; quem sabe, não precisa de atalho de teclado (proibido no kiosk).
   O aro de progresso é desenhado durante o toque. */
.secbar__marca {
  position: relative;
  width: var(--bar-selo-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-right: 1px solid var(--hairline);
  background: var(--bar-selo-bg);
  touch-action: none;
}
.secbar__marca i {
  width: 3.2rem;
  height: 3.6rem;
  background-color: rgba(229, 224, 211, 0.45);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 400ms ease;
}
.secbar__marca.is-armado i,
.secbar__marca.is-interno i { background-color: var(--accent-bright); }
/* aro que cresce enquanto o dedo segura — feedback sem palavra escrita */
.secbar__marca::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6rem;
  height: 6rem;
  margin: -3rem 0 0 -3rem;
  border-radius: 50%;
  border: 1px solid var(--accent-bright);
  opacity: 0;
  transform: scale(0.4);
}
.secbar__marca.is-armado::after {
  opacity: 0.9;
  transform: scale(1);
  transition: transform 1500ms linear, opacity 300ms ease;
}

.secbar__item {
  flex: 1;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  border: none;
  border-right: 1px solid rgba(244, 241, 233, 0.15);
  background: transparent;
  color: #EDE9DE;
  opacity: 0.72;
  font-family: 'Archivo FBR', 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform-origin: center bottom;
  transition: background var(--t-touch) ease, color var(--t-touch) ease, opacity var(--t-touch) ease,
              transform 220ms var(--ease-map);
}
.secbar__item:last-child { border-right: none; }
.secbar__item:active { background: rgba(229, 224, 211, 0.08); }
/* Dock CONTIDO: o item sob o dedo cresce um pouco e os vizinhos acompanham
   de leve. Só no ponteiro fino (mouse/trackpad) e no toque ativo — num totem
   sem hover isso nunca dispara sozinho. */
@media (hover: hover) {
  .secbar:has(.secbar__item:hover) .secbar__item:hover { transform: scale(var(--bar-dock-escala)); opacity: 1; }
  .secbar:has(.secbar__item:hover) .secbar__item:hover + .secbar__item,
  .secbar__item:has(+ .secbar__item:hover) { transform: scale(var(--bar-dock-vizinho)); }
}
.secbar__item:active { transform: scale(var(--bar-dock-escala)); opacity: 1; }
/* Ativo: o creme continua sendo o sinal (PDF), agora como bloco luminoso
   dentro do vidro em vez de um retângulo opaco. */
.secbar__item.is-active {
  background: var(--bar-ativo-bg);
  color: #2A2622;
  opacity: 1;
  box-shadow: inset 0 2px 0 #A98F63;
}

/* ------------------------------------------------------------------
   DRAWER LATERAL — altura inteira, ~1/3 da largura. Direita nas seções do
   território e dos projetos; esquerda no Residencial (PDF).
   C3: deixou de ser um bloco creme opaco e virou VIDRO — mas vidro com
   CAMADA DE PROTEÇÃO: fundo escuro acetinado + blur alto. É o que garante
   contraste absoluto da tipografia contra um terreno 3D que muda de cor a
   cada voo (neve, rocha clara, lago, mata). Translucide. */
.docked {
  position: absolute;
  top: 0;
  bottom: var(--loc-secbar-h, 8.8rem);
  width: var(--loc-painel-w, 42rem);
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 8.4rem 4.4rem 4rem 4.4rem;
  overflow-y: auto;
  background: #E2DED4;
  color: #272523;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
  transition: transform 360ms var(--ease-map), opacity 260ms ease;
}
.docked--dir { right: 0; transform: translateX(100%); border-left: 1px solid rgba(39, 37, 35, 0.15); }
.docked--esq { left: 0; transform: translateX(-100%); border-right: 1px solid rgba(39, 37, 35, 0.15); }
.docked.is-open { transform: none; }
.docked[hidden] { display: none; }

.docked__gal {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}
.docked__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #CFC9BC;
}
.docked__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #FFFFFF;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}
.docked__seta--prev { left: 0.8rem; }
.docked__seta--next { right: 0.8rem; }

.docked__title {
  margin: 1rem 0 0 0;
  font-family: var(--font-title), "Archivo FBR", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #272523;
}
.docked__text {
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--text-2);
}
/* Selo do que ainda é projeto — oliva, nunca verde de semáforo. Sobre o vidro
   escuro o oliva puro afunda; entra clareado, mantendo a família. */
.docked__selo {
  align-self: flex-start;
  margin: 0;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(138, 143, 99, 0.7);
  color: #8A8F63;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* CTAs do drawer. A disponibilidade saiu daqui na C3 (virou modo interno por
   toque longo); o que sobra são ações de conteúdo, em botão fantasma sobre o
   vidro. */
.docked__ctas { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.6rem; }
.docked__cta {
  min-height: 6.4rem;
  padding: 0 2.4rem;
  border: 1px solid var(--loc-glass-borda);
  background: rgba(229, 224, 211, 0.06);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--t-touch) ease, color var(--t-touch) ease;
}
.docked__cta.is-active {
  background: var(--accent-bright);   /* disponibilidade é SEMPRE bronze */
  border-color: var(--accent-bright);
  color: #1B1917;
}

/* Setas do rodapé do painel: passeiam pelos pins DA MESMA seção */
.docked__nav {
  margin-top: auto;
  padding-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: 3.6rem;
}
.docked__round {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: none;
  background: #272523;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-touch) ease, background 200ms ease;
}
.docked__round:active { transform: scale(0.92); background: #1B1917; }

/* ------------------------------------------------------------------
   BALÕES CREME (PopoverElement da maps3d).
   O :host da API define background-color/padding/border-radius com a MENOR
   especificidade possível — estas regras vencem, e o rabicho, que herda o
   background-color, fica creme junto. Não mexer no `dialog` interno: ele
   está no shadow DOM e é quem posiciona o balão sobre o terreno.
   ------------------------------------------------------------------ */
gmp-popover.balao {
  background-color: var(--loc-superficie);
  border-radius: 0;
  padding: var(--loc-balao-pad);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  color: var(--loc-tinta);
  direction: ltr;
  --gmp-popover-max-width: var(--loc-balao-max, 36rem);
  --gmp-popover-min-width: 12rem;
  transition: opacity 320ms ease;
}
/* ARMADILHA (medida em 15/08): o host <gmp-popover> nasce com
   `display: contents` — ele NÃO gera caixa. Logo, `opacity`, `transform` e
   `filter` no host não fazem absolutamente nada (o que a gente vê é a caixa
   interna, no shadow DOM fechado). Só valem propriedades HERDADAS (cor) ou as
   que a caixa interna copia (background-color) — e `display`, que decide se o
   conteúdo é renderizado. Por isso:
   · sumir com um balão = display: none;
   · esmaecer = mexer em COR, nunca em opacidade;
   · animar entrada = animar um filho nosso (.balao__logos), não o host. */

/* Cidade não selecionada nas Distâncias: esmaece MUITO sutilmente. Sem
   opacidade disponível, o esmaecimento é de cor — creme mais apagado e texto
   um tom acima do fundo. */
gmp-popover.balao.is-apagado {
  background-color: var(--loc-superficie); /* 100% opaco — elimina fantasmas e vazamentos por tras */
  color: rgba(85, 80, 74, 0.55);
}
gmp-popover.balao.is-apagado .balao__nome,
gmp-popover.balao.is-apagado .balao__linha { color: rgba(85, 80, 74, 0.55); }
/* Abertura: a marca do mapa espera os logos saírem antes de acender (C3) */
gmp-popover.balao.is-late { display: none; }
/* Câmera alta ou rótulo coberto por outro: o balão se recolhe e sobra o
   marcador (ver baloesPorAltura/projetar) */
gmp-popover.balao.is-longe { display: none; }
/* A marca da fazenda não pode simplesmente aparecer: os logos entram em fade
   pelo filho, já que o host não aceita opacidade. */
gmp-popover.balao--marca .balao__logos { animation: balaoEntra 900ms ease both; }
@keyframes balaoEntra { from { opacity: 0; } to { opacity: 1; } }
/* O popover é focável e o browser desenha um anel azul de foco nele — azul é
   proibido no projeto e o anel aparecia sozinho no último balão criado. */
gmp-popover.balao:focus,
gmp-popover.balao:focus-visible,
gmp-popover.balao:focus-within { outline: none; }
/* Pins mestres do Residencial: um pouco mais presentes que os balões de lugar
   — são os dois únicos gestos daquela tela. */
gmp-popover.balao--mestre { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45); }
gmp-popover.balao--mestre .balao__nome { font-size: 1.7rem; }

.balao__nome {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--loc-tinta);
  white-space: nowrap;
}
.balao__linha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.9rem 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--loc-tinta-2);
  white-space: nowrap;
}
.balao__linha .icon, .balao__nome .icon { color: var(--loc-tinta); }
.balao__selo {
  margin: 0.8rem 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.balao__cta {
  margin-top: 1.4rem;
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.8rem;
  border: none;
  background: var(--loc-carvao);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Balão de lugar é só um nome: estreito, ele briga menos com o vizinho
   (o desconflito por distância cuida do resto). */
.balao--lugar {
  --gmp-popover-min-width: 0;
  --gmp-popover-max-width: 32rem;
}
.balao--lugar .balao__nome {
  font-size: 1.35rem;
  white-space: nowrap;
}
.balao--marca { --gmp-popover-min-width: 0; }
.balao__logos { display: flex; align-items: center; gap: 2.4rem; }
.balao__logo {
  display: inline-block;
  background-color: var(--loc-tinta);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.balao__logo--fbr { width: 12rem; height: 0.58rem; }   /* PNG 1459×70 */
.balao__logo--thera { width: 5.6rem; height: 3.6rem; } /* PNG 1279×818 */

/* ------------------------------------------------------------------
   [C3-R bloco 2] SELETOR DE VISUALIZAÇÃO — grupos e itens.
   Referência FUNCIONAL: o "Conteúdo do mapa" do Earth. Referência ESTÉTICA:
   a nossa. Por isso NÃO existe aqui ícone de pasta, menu de três pontos,
   olhinho nem alça de arrastar: nome de grupo, um fio fino separando, itens
   recuados, e o estado dito pelo PESO e pela OPACIDADE do próprio nome —
   quem está apagado, apaga. Cada linha tem ≥48px de alvo real no 1920.
   ------------------------------------------------------------------ */
.switch3d {
  position: absolute;
  left: 3.6rem;
  right: auto;
  top: 3.6rem;
  z-index: 24;
  display: flex;
  flex-direction: column;
  width: 28.4rem;
  max-height: calc(100% - var(--bar-h) - 16rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;          /* rolagem suave quando um grupo abre */
  padding: 0.8rem 0;
  background: var(--loc-glass-bg);
  -webkit-backdrop-filter: blur(var(--loc-glass-blur));
  backdrop-filter: blur(var(--loc-glass-blur));
  border: 1px solid var(--loc-glass-borda);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-0.8rem);
  transition: opacity 400ms ease, transform 400ms var(--ease-map);
}
.switch3d.is-in { opacity: 1; transform: none; }
.switch3d[hidden] { display: none; }

/* Grupo: nome + itens. O fio fino separa um do outro — é a única moldura. */
.switch3d__grupo + .switch3d__grupo {
  border-top: 1px solid rgba(229, 224, 211, 0.12);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}
.switch3d__nome {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 5.2rem;
  padding: 0 2rem;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  /* desligado: leve e apagado. ligado: mais peso, creme cheio. */
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(229, 224, 211, 0.42);
  transition: color 240ms ease, font-weight 240ms ease;
}
.switch3d__grupo.is-on .switch3d__nome {
  font-weight: 600;
  color: var(--cream);
}

/* Itens: recuados, e só existem enquanto o grupo está aberto (= ligado).
   O max-height animado dá a abertura suave sem depender de JS. */
.switch3d__itens {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms var(--ease-map), opacity 280ms ease;
  opacity: 0;
}
.switch3d__grupo.is-on .switch3d__itens { max-height: 68rem; opacity: 1; }
.switch3d__item {
  display: flex;
  align-items: center;
  /* 5,2rem = 52px no canvas 1920: folga sobre o mínimo de 48 do item 12.5.
     Em 4,8rem a linha dava exatamente 48 e qualquer arredondamento derrubava. */
  min-height: 5.2rem;
  padding: 0 2rem 0 3.6rem;        /* recuo: o item pertence ao grupo */
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: rgba(229, 224, 211, 0.34);   /* oculto: apagado */
  transition: color 200ms ease, font-weight 200ms ease;
}
.switch3d__item.is-on {
  font-weight: 500;
  color: rgba(229, 224, 211, 0.92);
}
.switch3d__item:active { color: var(--accent-bright); }

/* Chip do MODO INTERNO — a única coisa escrita sobre o gatilho secreto, e só
   depois de ligado. Toque nele desliga; nada de sair pelo caminho de entrada. */
.modo-int {
  position: absolute;
  left: 50%;
  bottom: calc(var(--loc-secbar-h) + 2.4rem);
  transform: translateX(-50%);
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 0 2.4rem;
  border: 1px solid var(--accent-bright);
  border-radius: 999px;
  background: rgba(27, 25, 23, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--accent-bright);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.modo-int[hidden] { display: none; }
.modo-int .icon { width: 1.8rem; height: 1.8rem; }

/* Aviso discreto (sem jargão técnico para o cliente) */
.loc3d__fallback {
  position: absolute;
  left: 3.2rem;
  bottom: calc(var(--loc-secbar-h) + 1.2rem);
  z-index: 20;
  margin: 0;
  color: rgba(229, 224, 211, 0.6);
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* O FAB de contato fica no canto oposto aos controles (inferior esquerdo) e
   precisa subir acima da barra de seções, que nasceu na C2. */
/* O FAB é filho do <body> (não da tela), daí o :has() no chrome. */
/* Sobe o bastante para NÃO cobrir os créditos do Google, que a API desenha no
   canto inferior esquerdo do mapa (ocultá-los fere os termos do Maps
   Platform). O FAB continua no canto oposto aos controles de câmera. */
body:has(.chrome[data-screen="localizacao"]) .contact-fab,
body:has(.chrome[data-screen="localizacao"]) .contact-fab.on-map,
.contact-fab.on-map {
  position: absolute !important;
  bottom: 12.5rem !important;
  left: 3.6rem !important;
  width: var(--loc-coluna-w, 28.4rem) !important;
  box-sizing: border-box !important;
  top: auto !important;
  right: auto !important;
  z-index: 35 !important;
  height: 4.8rem !important;
  padding: 0 2.4rem !important;
  border: 1px solid rgba(229, 224, 211, 0.5) !important;
  border-radius: var(--radius-btn, 4px) !important;
  background: rgba(27, 25, 23, 0.16) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 20px rgba(20, 18, 16, 0.30) !important;
  text-shadow: 0 1px 10px rgba(20, 18, 16, 0.75) !important;
  color: var(--cream) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.1rem !important;
}
.contact-fab.on-map:hover,
.contact-fab.on-map:active {
  background: rgba(229, 224, 211, 0.16) !important;
  border-color: rgba(229, 224, 211, 0.85) !important;
  transform: scale(0.975) !important;
}

.loc3d.is-drawer-esq .switch3d { left: calc(var(--loc-painel-w) + 3.2rem); }
body:has(.loc3d.is-drawer-dir) .contact-fab.on-map { right: calc(var(--loc-painel-w) + 3.2rem) !important; }

/* Fechar próprio do drawer (C3-R 7.2) — mesmo desenho do FECHAR da seção,
   já que só um dos dois aparece por vez. */
.docked__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  background: #272523;
  padding: 1.8rem 2.8rem;
  font-family: var(--font-title), "Archivo FBR", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.docked--esq .docked__close { left: 0; right: auto; }
.docked__close:active { background: #1B1917; }

gmp-popover.is-aberto,
gmp-popover.balao.is-aberto,
gmp-popover.balao--cidade.is-aberto {
  z-index: 999999 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
  border-top: 2px solid var(--accent-bright);
}
gmp-popover.is-aberto *,
gmp-popover.balao.is-aberto * {
  z-index: 999999 !important;
}

gmp-popover.is-apagado,
gmp-popover.balao.is-apagado,
gmp-popover.balao--cidade.is-apagado {
  z-index: 1 !important;
  opacity: 0.65;
}
/* Cidades do caminho (C3-R 3.5): subordinadas — menores, sem tempos, sem
   botão e sem clique. Elas contam o percurso, não competem com as pontas. */
gmp-popover.balao--via {
  --gmp-popover-min-width: 0;
  --gmp-popover-max-width: 24rem;
  background-color: rgba(229, 224, 211, 0.72);
  padding: 0.6rem 1.2rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
gmp-popover.balao--via .balao__nome {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: rgba(44, 41, 39, 0.85);
}

/* [C3-R 1.4] Durante o voo de abertura NADA da interface aparece — o FAB de
   contato inclusive. Ele é filho do <body>, daí a classe lá. */
body.loc-voando .contact-fab { opacity: 0; pointer-events: none; }
body .contact-fab { transition: opacity 500ms ease, bottom 300ms ease, left 420ms var(--ease-map); }

/* Blocos de conteúdo do drawer (C3-R 6.1) */
.docked__bloco { display: flex; flex-direction: column; gap: 1rem; }
.docked__sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.docked__lista {
  margin: 0;
  padding: 0 0 0 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text-2);
}
.docked__lista b { color: var(--cream); font-weight: 500; }

/* ==========================================================================
   BLOCO 3 (17/08) · MÓDULO DE VENDAS, CONSULTOR & GAVETA DE MEIA PÁGINA
   ========================================================================== */

/* Gaveta Lateral de Meia Página (.drawer-consultor) */
.drawer-consultor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--bar-h);
  width: 50vw;
  max-width: 50vw;
  min-width: 44rem;
  z-index: 40;
  background: rgba(18, 16, 14, 0.95);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border-left: 1px solid rgba(229, 224, 211, 0.14);
  box-shadow: -12px 0 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  color: var(--loc-superficie);
  transform: translateX(100%);
  transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1), opacity 440ms ease;
  pointer-events: none;
  opacity: 0;
}
.drawer-consultor.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Moldura e Fluxo da Lâmina em Scroll (Largura Total 100%) */
.drawer-consultor__lamina-stream {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}
.drawer-consultor__page-frame {
  width: 100%;
  border-top: 1px solid rgba(229, 224, 211, 0.08);
  border-bottom: 1px solid rgba(229, 224, 211, 0.08);
  background: transparent;
  overflow: hidden;
}
.drawer-consultor__pagina {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Cabeçalho da Gaveta */
.drawer-consultor__header {
  padding: 3.2rem 3.6rem 2rem 3.6rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(229, 224, 211, 0.08);
}
.drawer-consultor__tag {
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.6rem;
}
.drawer-consultor__title {
  font-family: var(--font-brand);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
}
.drawer-consultor__close {
  background: transparent;
  border: 1px solid rgba(229, 224, 211, 0.2);
  color: var(--cream);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 240ms ease, border-color 240ms ease;
}
.drawer-consultor__close:hover {
  background: rgba(229, 224, 211, 0.15);
  border-color: var(--cream);
}

/* Corpo e Conteúdo Comercial */
.drawer-consultor__body {
  padding: 0 0 4rem 0;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.drawer-consultor__sec-title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  padding: 2.4rem 3.6rem 0.8rem 3.6rem;
  margin: 0;
}
.drawer-consultor__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.drawer-consultor__card {
  background: rgba(229, 224, 211, 0.04);
  border: 1px solid rgba(229, 224, 211, 0.08);
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.drawer-consultor__label {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: rgba(229, 224, 211, 0.6);
  text-transform: uppercase;
}
.drawer-consultor__val {
  font-family: var(--font-brand);
  font-size: 1.8rem;
  color: var(--cream);
}

/* Legenda Minimalista de Produtos & Botão Ver Coleções */
.legenda-produtos {
  position: absolute;
  bottom: var(--bar-h, 9.6rem);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 2.8rem 6.4rem;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0) 0%, rgba(18, 16, 14, 0.82) 40%, rgba(18, 16, 14, 0.95) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
  pointer-events: none;
  animation: fbrUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.legenda-produtos__left {
  display: flex;
  align-items: flex-start;
  gap: 5.6rem;
  pointer-events: auto;
}
.legenda-produtos__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legenda-produtos__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.legenda-produtos__square {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}
.legenda-produtos__square--lote {
  background-color: #383431;
  border: 1px solid rgba(244, 241, 233, 0.4);
}
.legenda-produtos__square--lago {
  background-color: #F4F1E9;
  border: 1px solid #F4F1E9;
}
.legenda-produtos__square--bosque {
  background-color: #A98F63;
  border: 1px solid #A98F63;
}

.legenda-produtos__title {
  font-family: 'Archivo FBR', 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F4F1E9;
  white-space: nowrap;
}
.legenda-produtos__sub {
  font-family: 'Mundial', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: rgba(244, 241, 233, 0.72);
  white-space: nowrap;
}

.legenda-produtos__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  pointer-events: auto;
}

.legenda-produtos__btn-colecoes,
.legenda-produtos__btn-fechar-consultor {
  pointer-events: auto;
  appearance: none;
  cursor: pointer;
  background: #A98F63;
  border: 0;
  color: #1A1715;
  font-family: 'Archivo FBR', 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
  border-radius: 0px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 16px rgba(169,143,99,.4);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.legenda-produtos__btn-fechar-consultor {
  background: #383431;
  color: #F4F1E9;
  border: 1px solid rgba(244, 241, 233, 0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.legenda-produtos__btn-colecoes:hover {
  background: #C5AB7F;
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 24px rgba(169,143,99,.6);
}

.legenda-produtos__btn-fechar-consultor:hover {
  background: #4A4541;
  border-color: rgba(244, 241, 233, 0.4);
  transform: scale(1.03);
}

.legenda-produtos__btn-colecoes:active,
.legenda-produtos__btn-fechar-consultor:active {
  transform: scale(0.99);
}

/* Overlay de Numeração dos Lotes (Modo Consultor) — Armadilha do display:contents prevenida */
gmp-popover.pin-lote-numero {
  background-color: var(--loc-superficie);
  color: var(--loc-tinta);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
gmp-popover.pin-lote-numero:hover,
gmp-popover.pin-lote-numero.is-active {
  background-color: var(--cream);
  color: var(--loc-tinta);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 0 2px var(--accent-bright);
}

/* 1. Lâmina de Produto dentro da Gaveta (Largura Total 100% Borda a Borda) */
.drawer-consultor__pagina {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block !important;
}

/* 2. Barrinha de Progresso do Carrossel do Clubhouse */
.docked__prog {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1.2rem 0 1.6rem 0;
  width: 100%;
}
.docked__prog-passo {
  height: 3px;
  flex: 1;
  background: rgba(229, 224, 211, 0.2);
  border-radius: 2px;
  transition: background 300ms ease, height 300ms ease;
  display: block;
}
.docked__prog-passo.is-on {
  background: var(--accent-bright);
  height: 4px;
}

/* 3. Drawer em Modo Apresentação Carrossel */
.docked--carrossel {
  border-left: 2px solid var(--accent-bright);
  transition: border-color 300ms ease;
}

/* 4. Item do Seletor que abre Galeria (Cavalgadas, Piquenique, Caminhadas) */
.switch3d__item--galeria {
  position: relative;
}
.switch3d__item--galeria::after {
  content: "• galeria";
  font-size: 0.95rem;
  opacity: 0.55;
  margin-left: 0.6rem;
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* 5. Seta do Carrossel Desabilitada (primeiro/último slide) */
.docked__round[disabled] {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
  border-color: rgba(229, 224, 211, 0.1);
}

/* Pilha de Botões Transparentes no Canto Superior Direito (FECHAR · SOLICITAR CONTATO · DISTÂNCIAS) */
.loc3d__action-stack {
  position: absolute;
  top: 3.6rem;
  right: 3.6rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
  pointer-events: auto;
}

.loc3d__action-stack button,
.loc3d__action-stack #loc3d-close,
.loc3d__action-stack #loc3d-contact,
.loc3d__action-stack #btn-ver-distancias,
.loc3d__close,
.legenda-perimetro__btn-distancias {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 24.8rem !important;
  height: 4.2rem !important;
  min-height: 4.2rem !important;
  max-height: 4.2rem !important;
  line-height: 4.2rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 2.0rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.0rem !important;
  border: 1px solid rgba(229, 224, 211, 0.5) !important;
  border-radius: var(--radius-btn, 4px) !important;
  background: rgba(27, 25, 23, 0.16) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 20px rgba(20, 18, 16, 0.30) !important;
  text-shadow: 0 1px 10px rgba(20, 18, 16, 0.75) !important;
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background var(--t-touch) ease, border-color var(--t-touch) ease, transform var(--t-touch) ease !important;
}

.loc3d__action-stack button:hover,
.loc3d__action-stack button:active {
  background: rgba(229, 224, 211, 0.16) !important;
  border-color: rgba(229, 224, 211, 0.85) !important;
  transform: scale(0.975) !important;
}

/* Durante o voo da câmera / véu, só o FECHAR fica visível; os botões adicionais entram no assentamento */
body.loc-voando #loc3d-contact,
body.loc-voando #btn-ver-distancias {
  display: none !important;
}

/* Quando a aba lateral (drawer) estiver aberta, mover os botões de ação (FECHAR e SOLICITAR CONTATO) para a parte superior direita do mapa (ao lado da gaveta) */
.loc3d.is-drawer .loc3d__action-stack,
.loc3d.is-drawer-dir .loc3d__action-stack,
.loc3d:has(#loc3d-panel:not([hidden])) .loc3d__action-stack,
body:has(#loc3d-panel:not([hidden])) .loc3d__action-stack {
  top: 3.6rem !important;
  bottom: auto !important;
  right: calc(var(--loc-painel-w, 38rem) + 3.6rem) !important;
  transition: right 400ms ease, top 400ms ease !important;
}

/* Regra estrita: elementos de legenda e o botão distâncias somem completamente quando tiverem o atributo hidden */
.legenda-perimetro-group[hidden],
#loc3d-legenda-sc[hidden],
#loc3d-legenda-perimetro[hidden],
#btn-ver-distancias[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Legendas do Perímetro & Delimitação (Canto Superior Esquerdo) */
.legenda-perimetro-group {
  position: absolute;
  top: 3.6rem;
  left: 3.6rem;
  bottom: auto;
  right: auto;
  width: 32.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 400ms ease, transform 400ms ease;
}
.loc3d.is-barra .legenda-perimetro-group,
.legenda-perimetro-group.is-in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Quando o seletor de camadas estiver ativo na tela (Projetos em Operação), reposicionar a legenda para o canto inferior esquerdo sem sobreposição */
.loc3d:has(#loc3d-camadas:not([hidden])) .legenda-perimetro-group {
  top: auto !important;
  bottom: 12.5rem !important;
  left: 3.6rem !important;
}
.legenda-perimetro {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(22, 20, 18, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(229, 224, 211, 0.14);
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-btn, 4px);
  white-space: nowrap;
}
.legenda-perimetro__linha--sc {
  background-color: #CCBB87 !important;
  box-shadow: 0 0 8px rgba(204, 187, 135, 0.7) !important;
}
.legenda-perimetro__linha {
  width: 3.2rem;
  height: 3px;
  background-color: var(--accent-bright);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  display: inline-block;
}
.legenda-perimetro__texto {
  font-weight: 500;
  color: var(--cream);
}



/* Toggle Principal Fazenda Bom Retiro (Preenchimento Chumbo com Logo Creme Centralizado) */
gmp-popover.balao--fazenda-dourado {
  --gmp-popover-min-width: 0;
  --gmp-popover-max-width: 24rem;
  background-color: #1B1917;
  padding: 1rem 2.2rem;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(229, 224, 211, 0.3);
  transform: translate(40%, -20%) !important;
}
gmp-popover.balao--fazenda-dourado .balao__logo-fazenda-mask {
  width: 14rem;
  height: 4.5rem;
  background-color: var(--cream, #E5E0D3);
  -webkit-mask: url("../assets/brand/Logo-FBR-3-White.png") no-repeat center / contain;
  mask: url("../assets/brand/Logo-FBR-3-White.png") no-repeat center / contain;
}