/* Tela cheia em 3D ao entardecer; painéis de vidro escuro presos às bordas,
   como a sinalização de um prédio: marca no alto, painel de andares à direita
   (feito um elevador), horário embaixo. Visual único, sempre escuro. */
:root {
  --noite: #0b0e13;
  --vidro: rgba(12, 16, 22, 0.62);
  --vidro-forte: rgba(12, 16, 22, 0.86);
  --linho: #f1ebe1;
  --nevoa: #a9a397;
  --latao: #d3a45e;
  --luz: #ffc677;
  --vendido: #5a636f;
  --fio: rgba(241, 235, 225, 0.14);

  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-num: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gx: max(16px, env(safe-area-inset-left, 0px));
  --gxr: max(16px, env(safe-area-inset-right, 0px));
  --gt: calc(env(safe-area-inset-top, 0px) + 16px);
  --gb: calc(env(safe-area-inset-bottom, 0px) + 16px);
  --raio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--noite);
  color: var(--linho);
  font: 400 15px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }
[hidden] { display: none !important; }

#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.vidro, .painel, .trilho, .relogio, .dica, .ficha, .btn-tour, .btn-voltar, .aviso {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--fio);
}

/* ---------------------------------------------------------- carregando */
.carregando {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 18px;
  background: var(--noite); text-align: center; transition: opacity 0.8s ease;
}
.carregando.saindo { opacity: 0; pointer-events: none; }
.carregando-marca { font: 300 clamp(30px, 6vw, 46px)/1 var(--f-display); letter-spacing: 0.01em; }
.carregando-marca em, .marca-nome em { font-style: italic; color: var(--latao); }
.barra { --p: 0; width: min(260px, 70vw); height: 2px; background: var(--fio); margin-inline: auto; overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: var(--latao); transform-origin: left; transform: scaleX(var(--p)); transition: transform 0.2s; }
.carregando p { margin: 0; color: var(--nevoa); font-size: 13px; letter-spacing: 0.04em; }

/* ---------------------------------------------------------- topo */
.topo {
  position: fixed; z-index: 5; top: 0; left: 0; right: 0;
  padding: var(--gt) var(--gxr) 0 var(--gx);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }
.marca { display: grid; text-decoration: none; color: inherit; line-height: 1; }
.marca-nome { font: 400 26px/1 var(--f-display); letter-spacing: 0.005em; }
.marca-sub { font: 500 10.5px/1 var(--f-texto); letter-spacing: 0.32em; text-transform: uppercase; color: var(--nevoa); margin-top: 6px; }
.btn-tour {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
}
.btn-tour svg { width: 14px; height: 14px; color: var(--latao); }
.btn-tour:hover { border-color: rgba(211, 164, 94, 0.6); }
.em-tour .btn-tour span::after { content: " · parar"; color: var(--nevoa); }

/* ---------------------------------------------------------- painel */
.painel {
  position: fixed; z-index: 4; left: var(--gx); top: calc(var(--gt) + 64px);
  width: min(360px, calc(100vw - var(--gx) - var(--gxr) - 84px));
  padding: 22px 22px 18px; border-radius: var(--raio);
  display: grid; gap: 14px;
  transition: opacity 0.5s, transform 0.5s;
}
.sobrelinha { margin: 0; font: 500 11px/1.3 var(--f-texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--latao); }
.painel h1 {
  margin: 0; font: 300 clamp(34px, 4.2vw, 46px)/1.02 var(--f-display); letter-spacing: -0.01em; text-wrap: balance;
  font-variation-settings: "opsz" 120;
}
.painel h1 em { font-style: italic; font-weight: 300; }
.lead { margin: 0; color: #d9d3c8; font-size: 14.5px; max-width: 34ch; }
.numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--fio); }
.numeros div { display: flex; flex-direction: column-reverse; gap: 2px; }
.numeros dt { font-size: 11.5px; color: var(--nevoa); }
.numeros dd { margin: 0; font: 400 20px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.numeros div:first-child dd { color: var(--luz); }

.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--fio); font-size: 13px; color: #ddd6ca;
}
.chip b { font: 500 11px/1 var(--f-num); color: var(--nevoa); }
.chip:hover { border-color: rgba(241, 235, 225, 0.35); }
.chip[aria-pressed="true"] { background: var(--linho); color: var(--noite); border-color: var(--linho); }
.chip[aria-pressed="true"] b { color: #6b5a3c; }

.legenda { display: flex; gap: 16px; font-size: 12.5px; color: var(--nevoa); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 18px; height: 11px; border-radius: 2px; display: inline-block; }
.sw.aceso { background: linear-gradient(180deg, #fff1d0, #f0a95e); box-shadow: 0 0 10px rgba(255, 190, 110, 0.7); }
.sw.apagado { background: linear-gradient(160deg, #2f3d4a, #10161d); border: 1px solid #3a4652; }
.nota { margin: 0; font-size: 11.5px; color: #8a857c; }

/* ---------------------------------------------------------- trilho de andares */
.trilho {
  position: fixed; z-index: 4; right: var(--gxr); top: 50%; transform: translateY(-50%);
  border-radius: var(--raio); padding: 12px 8px; width: 74px;
  display: grid; gap: 10px; justify-items: center;
}
.leitura { display: grid; justify-items: center; text-align: center; gap: 2px; }
.leitura-rot { font: 500 9.5px/1 var(--f-texto); letter-spacing: 0.24em; text-transform: uppercase; color: var(--nevoa); }
.leitura strong { font: 400 28px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--linho); }
#andar-info { font-size: 10px; line-height: 1.25; color: var(--nevoa); min-height: 2.5em; }
.trilho ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; width: 100%; }
.trilho li button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--nevoa);
  font: 400 10.5px/1.3 var(--f-num); font-variant-numeric: tabular-nums;
}
.trilho li button:hover { background: rgba(241, 235, 225, 0.08); color: var(--linho); }
.trilho li.ativo button { background: rgba(211, 164, 94, 0.2); color: var(--linho); }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 4px; height: 6px; border-radius: 1px; background: var(--vendido); opacity: 0.6; }
.pips i.livre { background: var(--luz); opacity: 1; box-shadow: 0 0 4px rgba(255, 198, 119, 0.8); }

/* ---------------------------------------------------------- horário */
.relogio {
  position: fixed; z-index: 4; left: 50%; bottom: var(--gb); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 999px;
  width: min(460px, calc(100vw - var(--gx) - var(--gxr)));
}
.relogio label { font: 500 10.5px/1 var(--f-texto); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nevoa); }
.relogio-faixa { flex: 1; min-width: 0; display: grid; gap: 2px; }
.relogio output { font: 400 15px/1 var(--f-num); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; color: var(--luz); }
.marcas { display: flex; justify-content: space-between; font: 400 9.5px/1 var(--f-num); color: #7d786f; padding-inline: 2px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8fb6dc, #f4a46e 50%, #2a3466 78%, #121a3a); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8fb6dc, #f4a46e 50%, #2a3466 78%, #121a3a); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--linho); border: 3px solid var(--latao); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--linho); border: 3px solid var(--latao); }

/* ---------------------------------------------------------- contador de andar (voo e tour) */
.contador {
  position: fixed; z-index: 4; right: calc(var(--gxr) + 96px); bottom: var(--gb);
  display: grid; justify-items: end; line-height: 1; opacity: 0; transition: opacity 0.4s; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.contador span { font: 500 11px/1 var(--f-texto); letter-spacing: 0.3em; text-transform: uppercase; color: var(--nevoa); }
.contador strong { font: 300 clamp(56px, 9vw, 96px)/0.95 var(--f-display); font-variant-numeric: tabular-nums; }
.em-voo .contador { opacity: 1; }
.em-voo .painel { opacity: 0; transform: translateX(-12px); pointer-events: none; }
.em-voo .relogio { opacity: 0; pointer-events: none; }
.relogio { transition: opacity 0.4s; }

.legenda-tour {
  position: fixed; z-index: 4; left: var(--gx); bottom: calc(var(--gb) + 8px); margin: 0; max-width: min(520px, 70vw);
  font: 300 clamp(22px, 3vw, 34px)/1.15 var(--f-display); text-wrap: balance;
  opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.6s; pointer-events: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}
.legenda-tour.visivel { opacity: 1; transform: none; }

/* ---------------------------------------------------------- dica e aviso */
.dica {
  position: fixed; z-index: 6; left: 0; top: 0; display: grid; gap: 2px; padding: 10px 13px; border-radius: 10px;
  min-width: 190px; pointer-events: none; background: var(--vidro-forte);
}
.dica-apto { font: 400 18px/1.15 var(--f-display); }
.dica-tip { font-size: 12.5px; color: #d6cfc3; }
.dica-preco { font: 400 13.5px/1.4 var(--f-num); color: var(--luz); }
.dica-status { font-size: 11.5px; color: var(--nevoa); }
.dica.vendida .dica-apto { color: #c3c0ba; }
.dica.vendida .dica-status { color: #d88c7a; }
.aviso {
  position: fixed; z-index: 7; left: 50%; top: calc(var(--gt) + 64px); transform: translate(-50%, -8px);
  padding: 10px 16px; border-radius: 999px; font-size: 13.5px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s; background: var(--vidro-forte); max-width: calc(100vw - 32px); text-align: center;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------- interior */
.interior { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.interior > * { pointer-events: auto; }
.interior-topo {
  position: absolute; top: 0; left: 0; right: 0; padding: var(--gt) var(--gxr) 0 var(--gx);
  display: flex; align-items: center; gap: 14px; pointer-events: none;
}
.interior-topo > * { pointer-events: auto; }
.btn-voltar { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.btn-voltar svg { width: 15px; height: 15px; }
.interior-titulo { font: 400 20px/1 var(--f-display); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.interior-dica { margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #e6dfd3; background: rgba(12, 16, 22, 0.55); border: 1px solid var(--fio); }

.pontos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ponto { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s; white-space: nowrap; }
.ponto-marca { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--linho); box-shadow: 0 0 0 4px rgba(241, 235, 225, 0.25); }
.ponto.esq { flex-direction: row-reverse; }
.ponto.esq .ponto-marca { margin: -5px -5px 0 0; }
.ponto.esq { translate: -100% 0; }
.ponto-texto {
  margin-top: -5px; padding: 4px 9px; border-radius: 6px; font: 500 10.5px/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(12, 16, 22, 0.55); border: 1px solid rgba(241, 235, 225, 0.22);
}

.ficha {
  position: absolute; left: var(--gx); bottom: var(--gb); width: min(380px, calc(100vw - var(--gx) - var(--gxr)));
  max-height: calc(100% - var(--gt) - var(--gb) - 60px); overflow: auto;
  border-radius: var(--raio); padding: 16px 20px 20px; background: var(--vidro-forte);
}
.ficha-recolher { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.ficha-recolher:focus-visible { outline: 2px solid var(--latao); outline-offset: 4px; border-radius: 4px; }
.ficha-recolher svg { width: 16px; height: 16px; color: var(--nevoa); transition: transform 0.3s; }
.ficha.recolhida .ficha-recolher svg { transform: rotate(180deg); }
.ficha.recolhida #ficha-corpo > :not(h2, .acoes) { display: none; }
#ficha-corpo { display: grid; gap: 12px; margin-top: 8px; }
.ficha h2 { margin: 0; font: 300 30px/1.08 var(--f-display); text-wrap: balance; }
.ficha p { margin: 0; color: #d6cfc3; font-size: 14px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin: 0; padding-block: 12px; border-block: 1px solid var(--fio); }
.specs .largo { grid-column: 1 / -1; }
.specs dt { font-size: 11px; color: var(--nevoa); }
.specs dd { margin: 0; font: 400 15px/1.3 var(--f-num); }
.specs .largo dd { font: 400 14px/1.35 var(--f-texto); }
.destaques { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.destaques li { display: flex; gap: 9px; align-items: baseline; }
.destaques li::before { content: ""; width: 10px; height: 1px; background: var(--latao); transform: translateY(-4px); flex: none; }
.preco { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.preco span { font-size: 11.5px; color: var(--nevoa); }
.preco strong { font: 400 22px/1 var(--f-num); color: var(--luz); font-variant-numeric: tabular-nums; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-principal { padding: 10px 18px; border-radius: 999px; border: 0; background: var(--latao); color: #1b140b; font-weight: 600; font-size: 14px; }
.btn-principal:hover { background: #e0b472; }
.btn-secundario { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--fio); background: transparent; font-size: 14px; }
.btn-secundario:hover { border-color: rgba(241, 235, 225, 0.4); }
.interesse { display: grid; gap: 6px; }
.interesse label { font-size: 12px; color: var(--nevoa); }
.interesse input { padding: 9px 11px; border-radius: 8px; border: 1px solid var(--fio); background: rgba(0, 0, 0, 0.25); }
.interesse button { justify-self: start; margin-top: 6px; }
.interesse-ok { font-size: 13px !important; color: var(--luz) !important; }

.no-interior .topo, .no-interior .painel, .no-interior .trilho, .no-interior .relogio,
.no-interior .contador, .no-interior .dica { visibility: hidden; }

.veu { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(circle at 50% 55%, #fff3dd 0%, #f2d3a4 45%, #b58552 100%); }
.veu.on { opacity: 1; }

/* ---------------------------------------------------------- visita 3D (apartamento T3) */
.visita { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.visita > * { pointer-events: auto; }
.visita-ambientes {
  position: absolute; top: calc(var(--gt) + 50px); left: var(--gx); right: var(--gxr);
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 28px 4px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.visita-ambientes::-webkit-scrollbar { display: none; }
.visita-ambientes .chip {
  flex: none; background: var(--vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 7px 12px; color: var(--linho);
}
.visita-rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rotulo-3d {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0;
  background: none; white-space: nowrap; pointer-events: auto; transition: opacity 0.3s; translate: -5px -50%;
}
.rotulo-3d i { width: 10px; height: 10px; border-radius: 50%; background: var(--linho); box-shadow: 0 0 0 4px rgba(241, 235, 225, 0.25); flex: none; }
.rotulo-3d .r-nome {
  padding: 4px 9px; border-radius: 6px 0 0 6px; font: 500 10.5px/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(12, 16, 22, 0.58); border: 1px solid rgba(241, 235, 225, 0.22); border-right: 0;
}
.rotulo-3d .r-area {
  margin-left: -8px; padding: 4px 8px; border-radius: 0 6px 6px 0; font: 400 10.5px/1.2 var(--f-num); color: var(--luz);
  background: rgba(12, 16, 22, 0.58); border: 1px solid rgba(241, 235, 225, 0.22);
}
.rotulo-3d:hover .r-nome, .rotulo-3d:focus-visible .r-nome { background: rgba(12, 16, 22, 0.85); }
.rotulo-3d.oculto { opacity: 0; pointer-events: none; transition-duration: 0.1s; } /* some rápido, aparece suave */
.rotulo-3d .r-curto { display: none; }
.apto3d-cima .rotulo-3d .r-area, .apto3d-cima .rotulo-3d .r-nome { display: none; }
.apto3d-cima .rotulo-3d .r-curto {
  display: block; padding: 4px 9px; border-radius: 6px; font: 500 10.5px/1.2 var(--f-texto); letter-spacing: 0.16em;
  text-transform: uppercase; background: rgba(12, 16, 22, 0.62); border: 1px solid rgba(241, 235, 225, 0.22);
}

.btn-visita {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; background: var(--vidro); border: 1px solid var(--fio);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.btn-visita svg { width: 16px; height: 16px; color: var(--latao); flex: none; }
.btn-visita:hover { border-color: rgba(211, 164, 94, 0.6); }
.btn-visita[aria-pressed="true"] { background: var(--linho); color: var(--noite); border-color: var(--linho); }
.btn-visita[aria-pressed="true"] svg { color: #8a6a3a; }
.visita-acoes { position: absolute; right: var(--gxr); bottom: calc(var(--gb) + var(--mini-h, 300px) + 10px); display: flex; gap: 8px; }
.btn-voltar3d { position: fixed; z-index: 9; right: var(--gxr); bottom: var(--gb); }

.visita-mini {
  position: absolute; right: var(--gxr); bottom: var(--gb); width: 232px; padding: 10px 10px 8px;
  border-radius: var(--raio); background: var(--vidro-forte); border: 1px solid var(--fio);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mini-titulo { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 6px; }
.mini-titulo span { font: 500 10px/1 var(--f-texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--latao); }
.mini-titulo em { font: 400 11px/1 var(--f-texto); font-style: normal; color: var(--nevoa); }
.mini-fechar { display: none; margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; padding: 0 4px; color: var(--nevoa); }
.mini-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mp-amb { fill: rgba(241, 235, 225, 0.07); cursor: pointer; transition: fill 0.25s; }
.mp-amb:hover { fill: rgba(241, 235, 225, 0.17); }
.mp-varanda { fill: rgba(211, 164, 94, 0.1); }
.mp-amb.mp-atual { fill: rgba(211, 164, 94, 0.32); }
.mp-paredes line { stroke: #ebe4d8; stroke-linecap: square; }
.mp-pilar { fill: #ebe4d8; }
.mp-janelas line { stroke: #8fb6dc; stroke-width: 0.07; }
.mp-portas path { fill: none; stroke: rgba(241, 235, 225, 0.5); stroke-width: 0.03; }
.mp-nomes text { font: 500 0.34px var(--f-texto); fill: #ddd6ca; text-anchor: middle; pointer-events: none; }
.mp-nomes .mp-pequeno { font-size: 0.24px; }
.mp-cone { fill: rgba(255, 198, 119, 0.4); }
.mp-ponto { fill: var(--luz); stroke: #1b140b; stroke-width: 0.07; }
.mp-eu { pointer-events: none; }

.visita-passos { display: none; position: absolute; right: var(--gxr); gap: 8px; }
.visita-passos button {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--vidro);
  border: 1px solid var(--fio); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.visita-passos button:active { background: rgba(211, 164, 94, 0.35); }
.visita-passos svg { width: 20px; height: 20px; }
@media (pointer: coarse) { .visita-passos { display: grid; } }
.apto3d-cima .visita-passos { display: none; }
.apto3d-foto .visita { display: none; }

.visita-carga {
  position: fixed; z-index: 9; left: 50%; bottom: calc(var(--gb) + 72px); transform: translateX(-50%); margin: 0;
  padding: 9px 16px; border-radius: 999px; font-size: 13.5px; background: var(--vidro-forte); border: 1px solid var(--fio);
}
.visita-carga span { font-family: var(--f-num); color: var(--luz); }
.visita-fade { position: fixed; inset: 0; z-index: 19; background: #07090c; opacity: 0; pointer-events: none; transition: opacity 0.26s ease; }
.visita-fade.on { opacity: 1; }

/* ---------------------------------------------------------- telas menores */
@media (max-width: 760px) {
  .marca-nome { font-size: 21px; }
  .btn-tour span { display: none; }
  .btn-tour { padding: 10px; }
  .painel { top: calc(var(--gt) + 52px); padding: 14px 16px; gap: 10px; width: calc(100vw - var(--gx) - var(--gxr) - 70px); }
  .painel h1 { font-size: 27px; }
  .lead, .nota, .numeros { display: none; }
  .legenda { font-size: 11.5px; }
  .trilho { width: 56px; padding: 8px 4px; top: calc(var(--gt) + 52px); transform: none; }
  .trilho li button { justify-content: center; padding: 0 2px; font-size: 9.5px; }
  .pips { display: none; }
  .leitura strong { font-size: 22px; }
  #andar-info { display: none; }
  .relogio { gap: 10px; padding: 8px 14px; }
  .relogio label { display: none; }
  .contador { right: var(--gxr); bottom: calc(var(--gb) + 8px); }
  .interior-dica { display: none; }
  .ficha { padding: 12px 16px 16px; }
  .ficha h2 { font-size: 24px; }
  .specs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .visita-ambientes { top: calc(var(--gt) + 46px); }
  .visita-ambientes .chip { padding: 6px 11px; font-size: 12.5px; }
  .visita-mini { top: calc(var(--gt) + 90px); bottom: auto; width: 112px; padding: 6px; transition: width 0.3s; }
  .visita-mini .mini-titulo, .visita-mini .mp-nomes, .visita-mini .mp-portas { display: none; }
  .visita-mini.aberta { width: min(340px, calc(100vw - var(--gx) - var(--gxr))); padding: 10px; }
  .visita-mini.aberta .mini-titulo, .visita-mini.aberta .mp-nomes, .visita-mini.aberta .mp-portas { display: flex; }
  .visita-mini.aberta .mp-nomes, .visita-mini.aberta .mp-portas { display: inline; }
  .visita-mini.aberta .mini-fechar { display: block; }
  .visita-acoes { left: var(--gx); right: auto; bottom: calc(var(--gb) + var(--ficha-h, 130px) + 10px); }
  .btn-visita { padding: 8px 12px 8px 10px; font-size: 12.5px; }
  .visita-passos { bottom: calc(var(--gb) + var(--ficha-h, 130px) + 10px); }
  .btn-voltar3d { bottom: calc(var(--gb) + var(--ficha-h, 130px) + 10px); }
  .rotulo-3d .r-nome, .rotulo-3d .r-area { font-size: 9.5px; padding: 3px 7px; }
  .no-apto3d .aviso { top: 42%; z-index: 9; } /* no topo ficaria sob os botões e a mini planta */
}
@media (max-height: 640px) and (min-width: 761px) {
  .lead { display: none; }
  .trilho li button { padding-block: 0; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------- arredores (js/arredores.js) */
.btn-arredores { margin-left: auto; }
.btn-arredores[hidden] { display: none; }
.btn-arredores svg { width: 15px; height: 15px; }
.btn-arredores[aria-pressed="true"] { background: var(--vidro-forte); border-color: rgba(211, 164, 94, 0.55); }
/* durante o tour o botão some (e não herda o "· parar" do botão do tour) */
.em-tour .btn-arredores { opacity: 0; visibility: hidden; pointer-events: none; }
.em-tour .btn-arredores span::after { content: none; }
.credito-osm {
  position: fixed; z-index: 3; right: var(--gxr); bottom: calc(var(--gb) + 2px); margin: 0;
  font-size: 10.5px; color: rgba(241, 235, 225, 0.62); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.credito-osm a { color: inherit; }
.em-voo .credito-osm, .no-interior .credito-osm, .em-arredores .credito-osm { display: none; }

.em-arredores .painel, .em-arredores .trilho, .em-arredores .relogio, .em-arredores .contador,
.em-arredores #btn-tour, .em-arredores .legenda-tour, .em-arredores .dica { opacity: 0; visibility: hidden; pointer-events: none; }
.em-arredores.em-voo .contador { opacity: 0; }

.arr-mapa { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.arr-camada { position: absolute; inset: 0; }
.arr-camada > * { position: absolute; left: 0; top: 0; will-change: transform; }
.arr-raio {
  margin: -10px 0 0 6px; padding: 2px 7px; border-radius: 999px; font: 500 11px/1.3 var(--f-num);
  color: var(--noite); background: rgba(241, 235, 225, 0.88); white-space: nowrap;
}
.arr-rua {
  font: 500 10.5px/1 var(--f-texto); letter-spacing: 0.03em; color: #f4efe6; white-space: nowrap;
  transform-origin: 0 0; text-shadow: 0 0 3px #0b0e13, 0 0 6px #0b0e13; opacity: 0.85;
}
.arr-camada.longe .arr-rua { display: none; }
/* pino: o botão fica no ponto exato; a gota e o nome se desenham em volta dele */
.arr-pino { pointer-events: auto; width: 0; height: 0; padding: 0; border: 0; background: none; }
.arr-gota {
  position: absolute; left: -14px; top: -38px; width: 28px; height: 28px; border-radius: 50% 50% 50% 4px;
  rotate: -45deg; display: grid; place-items: center; background: var(--cor); border: 2px solid #0b0e13;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); color: #0b0e13; transition: scale 0.15s;
}
.arr-gota > svg { width: 15px; height: 15px; rotate: 45deg; }
.arr-pino-nome {
  position: absolute; left: 18px; top: -40px; padding: 4px 9px; border-radius: 7px; background: var(--vidro-forte);
  border: 1px solid var(--fio); color: var(--linho); font: 500 12px/1.25 var(--f-texto); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.arr-pino:hover, .arr-pino:focus-visible, .arr-pino.sel { z-index: 2; }
.arr-pino:hover .arr-gota, .arr-pino:focus-visible .arr-gota, .arr-pino.sel .arr-gota { scale: 1.22; }
.arr-pino:hover .arr-pino-nome, .arr-pino:focus-visible .arr-pino-nome, .arr-pino.sel .arr-pino-nome { opacity: 1; }
.arr-pino:focus-visible { outline: none; }
.arr-pino:focus-visible .arr-gota { outline: 2px solid var(--latao); outline-offset: 2px; }
.arr-pino.sel .arr-gota { border-color: var(--linho); }
.arr-ponto {
  pointer-events: auto; width: 10px; height: 10px; margin: -5px 0 0 -5px; padding: 0; border-radius: 50%;
  background: var(--cor); border: 1.5px solid #0b0e13; opacity: 0.85;
}
.arr-ponto.sel { scale: 1.6; border-color: var(--linho); }
/* pino em cima de outro: vira um ponto (js/arredores.js, a cada quadro) */
.arr-pino.junto .arr-gota, .arr-pino.junto .arr-pino-nome { display: none; }
.arr-pino.junto::after {
  content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cor); border: 1.5px solid #0b0e13; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.arr-pino.junto:hover::after, .arr-pino.junto:focus-visible::after { scale: 1.5; }
/* atalhos 500 m / 1 km / 2 km */
.arr-raios {
  position: fixed; z-index: 4; left: var(--gx); top: calc(var(--gt) + 136px); display: flex; padding: 3px; gap: 2px;
  border-radius: 999px; background: var(--vidro); border: 1px solid var(--fio);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.arr-raios[hidden] { display: none; }
.arr-raio-btn {
  padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; color: #ddd6ca;
  font: 500 11.5px/1.2 var(--f-num); white-space: nowrap;
}
.arr-raio-btn:hover { background: rgba(241, 235, 225, 0.08); }
.arr-raio-btn[aria-pressed="true"] { background: var(--linho); color: var(--noite); }
.arr-pino.oculto, .arr-ponto.oculto { display: none; }
.arr-torre {
  display: flex; align-items: center; gap: 6px; margin: -15px 0 0 -15px; padding: 4px 10px 4px 5px; border-radius: 999px;
  background: var(--latao); color: #1b140b; font: 600 12px/1 var(--f-texto); white-space: nowrap;
  box-shadow: 0 0 0 4px rgba(211, 164, 94, 0.28), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.arr-torre svg { width: 20px; height: 20px; }
/* perto da borda direita, o rótulo da torre e o nome do lugar saem para a esquerda do ponto */
.arr-torre.esq { translate: calc(-100% + 30px) 0; flex-direction: row-reverse; padding: 4px 5px 4px 10px; }
.arr-pino.esq .arr-pino-nome { left: auto; right: 18px; }

.arr-bussola {
  position: fixed; z-index: 4; left: var(--gx); top: calc(var(--gt) + 60px); width: 66px; height: 66px;
  border-radius: 50%; background: var(--vidro); border: 1px solid var(--fio);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.arr-bussola svg { width: 100%; height: 100%; display: block; }
.b-aro { fill: none; stroke: rgba(241, 235, 225, 0.18); }
.b-norte { fill: var(--latao); }
.b-sul { fill: rgba(241, 235, 225, 0.35); }
.arr-bussola text { fill: var(--nevoa); font: 600 13px var(--f-texto); text-anchor: middle; }
.arr-bussola text.b-n { fill: var(--linho); }

.arr-painel {
  position: fixed; z-index: 6; right: var(--gxr); top: calc(var(--gt) + 60px); bottom: var(--gb);
  width: min(380px, calc(100vw - var(--gx) - var(--gxr))); display: flex; flex-direction: column;
  border-radius: var(--raio); background: var(--vidro-forte); border: 1px solid var(--fio); overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.arr-alca { display: none; }
.arr-cab { padding: 18px 20px 10px; display: grid; gap: 4px; }
.arr-cab h2 { margin: 0; font: 300 24px/1.1 var(--f-display); text-wrap: balance; }
.arr-sub { margin: 0; font-size: 12.5px; color: var(--nevoa); }
.arr-resumo { margin: 6px 0 0; font-size: 12.5px; color: #d6cfc3; }
.arr-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 20px 12px; border-bottom: 1px solid var(--fio); }
.arr-chip { font-size: 12px; padding: 5px 9px; gap: 6px; }
.arr-chip i, .arr-grupo i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }
.arr-corpo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.arr-lista { list-style: none; margin: 0; padding: 6px 10px 12px; display: grid; gap: 1px; }
.arr-grupo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.arr-grupo small { margin-left: auto; font-weight: 400; color: var(--nevoa); letter-spacing: 0; }
.arr-item {
  width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 1px 10px; align-items: center; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 9px; background: transparent;
}
.arr-item:hover, .arr-item:focus-visible { background: rgba(241, 235, 225, 0.07); }
.arr-ic { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: #0b0e13; }
.arr-ic svg { width: 15px; height: 15px; }
.arr-nome { font-size: 13.5px; line-height: 1.25; }
.arr-meta { font: 400 11.5px/1.3 var(--f-num); color: var(--nevoa); font-variant-numeric: tabular-nums; }
.arr-mais { margin: 2px 0 4px 48px; padding: 3px 0; border: 0; background: none; color: var(--latao); font-size: 12.5px; }
.arr-mais:hover { text-decoration: underline; }
.arr-nota-lista { padding: 8px 10px; font-size: 12px; color: var(--nevoa); }
.arr-cartao { padding: 16px 20px 18px; display: grid; gap: 10px; }
.arr-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.arr-cartao .sobrelinha { color: var(--cor); }
.arr-fechar { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--fio); background: transparent; font-size: 12.5px; }
.arr-fechar svg { width: 15px; height: 15px; }
.arr-cartao h3 { margin: 0; font: 300 23px/1.15 var(--f-display); text-wrap: balance; }
.arr-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.arr-modos button {
  display: grid; justify-items: start; gap: 1px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--fio); background: transparent; text-align: left;
}
.arr-modos button span { font-size: 11.5px; color: var(--nevoa); }
.arr-modos button b { font: 400 22px/1.1 var(--f-num); color: var(--linho); }
.arr-modos button small { font: 400 11.5px/1.2 var(--f-num); color: var(--nevoa); }
.arr-modos button[aria-pressed="true"] { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
.arr-reta, .arr-nota { margin: 0; font-size: 12px; color: var(--nevoa); }
.arr-rodape { padding: 10px 20px 12px; border-top: 1px solid var(--fio); font-size: 10.5px; line-height: 1.45; color: #8a857c; }
.arr-rodape a { color: #b9b2a6; }

@media (max-width: 760px) {
  .btn-arredores { padding: 9px 13px 9px 10px; }
  .btn-arredores span { display: inline; font-size: 13px; }
  .credito-osm { bottom: calc(var(--gb) + 50px); font-size: 9.5px; }
  .arr-bussola { left: auto; right: var(--gxr); top: calc(var(--gt) + 52px); width: 54px; height: 54px; }
  .arr-raios { top: calc(var(--gt) + 60px); }
  .arr-pino-nome { max-width: 58vw; white-space: normal; width: max-content; }
  .arr-raio-btn { padding: 6px 10px; }
  .arr-painel {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 50vh; border-radius: 18px 18px 0 0;
    border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); transition: max-height 0.3s ease;
  }
  .arr-painel.recolhido { max-height: 158px; }
  .arr-painel.recolhido .arr-corpo, .arr-painel.recolhido .arr-resumo { display: none; }
  .arr-alca { display: grid; place-items: center; height: 22px; border: 0; background: transparent; padding: 0; flex: none; }
  .arr-alca i { width: 40px; height: 4px; border-radius: 4px; background: rgba(241, 235, 225, 0.35); }
  .arr-cab { padding: 0 16px 6px; }
  .arr-cab .sobrelinha { display: none; }
  .arr-cab h2 { font-size: 19px; }
  .arr-resumo { display: none; }
  .arr-chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; }
  .arr-chips::-webkit-scrollbar { display: none; }
  .arr-chip { flex: none; }
  .arr-lista { padding: 4px 6px 10px; }
  .arr-cartao { padding: 12px 16px 14px; gap: 8px; }
  .arr-cartao h3 { font-size: 20px; }
  .arr-rodape { padding: 6px 16px 8px; font-size: 9.5px; }
}