@font-face { font-family: "Archivo"; src: url(../fontes/archivo-bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fontes/figtree-regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fontes/figtree-semibold.ttf) format("truetype"); font-weight: 600; font-display: swap; }

/* Mesmas cores da visita 360: vidro escuro sobre a imagem, igual nos dois temas. */
:root {
  --ink: #15263F;
  --vidro: rgba(15, 26, 44, 0.72);
  --texto: #F4F3EF;
  --texto-suave: rgba(244, 243, 239, 0.72);
  --texto-fraco: rgba(244, 243, 239, 0.5);
  --linha: rgba(244, 243, 239, 0.16);
  --laranja: #EC8123;
  --fundo: #0E1623;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fundo: #0B121D; } }
:root[data-theme="dark"] { --fundo: #0B121D; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--texto);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; color: inherit; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#gl.a-arrastar { cursor: grabbing; }
#gl.pode-ir:not(.a-arrastar) { cursor: pointer; }

/* planta pequena: onde se está, para onde se olha e os pontos (toque para ir) */
.mapa { position: fixed; left: max(16px, env(safe-area-inset-left)); top: calc(66px + env(safe-area-inset-top));
  z-index: 4; padding: 8px; border-radius: 14px; background: var(--vidro); border: 1px solid var(--linha);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); line-height: 0; }
.mapa svg { display: block; overflow: hidden; }
.m-chao polygon { fill: rgba(244, 243, 239, 0.07); stroke: none; }
.m-paredes path { fill: rgba(244, 243, 239, 0.55); fill-rule: evenodd; stroke: none; }
.m-cone { fill: rgba(236, 129, 35, 0.28); stroke: rgba(236, 129, 35, 0.75); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.m-ponto { fill: rgba(244, 243, 239, 0.75); stroke: rgba(15, 26, 44, 0.9); stroke-width: 1px; vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill 0.15s; }
.m-ponto:hover { fill: #fff; }
.m-ponto.aqui { fill: #EC8123; stroke: #fff; stroke-width: 1.5px; }

/* véu curto para os saltos pela planta (pontos sem linha de vista) */
.veu { position: fixed; inset: 0; z-index: 2; background: #0B121D; opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
.veu.ativo { opacity: 1; transition-duration: 0.2s; }

.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 14px max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left));
  background: linear-gradient(rgba(8, 14, 24, 0.62), rgba(8, 14, 24, 0)); pointer-events: none; }
.topo > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca-t { display: flex; flex-direction: column; line-height: 1.15; }
.marca-t b { font-family: "Archivo"; font-size: 15px; letter-spacing: 0.01em; }
.marca-t span { font-size: 12px; color: var(--texto-suave); }
.acoes { display: flex; gap: 8px; }
.alterna, .icone { border: 1px solid var(--linha); background: var(--vidro); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--texto); text-decoration: none; }
.icone { padding: 7px; display: grid; place-items: center; }
.icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* marca no chão para onde se vai */
.alvo { position: fixed; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); transform: scaleY(0.45);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); display: grid; place-items: center; transition: opacity 0.2s; }
.alvo i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.alvo.proibido { border-color: rgba(255, 140, 120, 0.9); }
.alvo.proibido i { background: rgba(255, 140, 120, 0.95); }

/* joystick (ecrãs táteis) */
.joystick { position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: max(58px, calc(env(safe-area-inset-bottom) + 46px));
  z-index: 4; width: 112px; height: 112px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(15, 26, 44, 0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: none; }
.joystick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(244, 243, 239, 0.85); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

.rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-between; gap: 18px;
  align-items: center; padding: 26px max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(rgba(8, 14, 24, 0), rgba(8, 14, 24, 0.6)); pointer-events: none; font-size: 12.5px; }
#dica { color: var(--texto); font-weight: 600; }
.nota { color: var(--texto-fraco); text-align: right; }

.carregar { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--fundo); transition: opacity 0.6s; }
.carregar img { width: 56px; height: 56px; object-fit: contain; }
.carregar p { margin: 0; color: var(--texto-suave); font-size: 14px; letter-spacing: 0.02em; }
.carregar .barra { width: 160px; height: 2px; border-radius: 2px; background: var(--linha); overflow: hidden; }
.carregar i { display: block; height: 100%; width: 0; background: var(--laranja); transition: width 0.25s; }
.carregar.fora { opacity: 0; pointer-events: none; }
.aviso { position: fixed; inset: auto 20px 50% 20px; z-index: 11; text-align: center; font-size: 16px; }

@media (max-width: 760px) {
  .marca-t span { display: none; }
  .mapa { padding: 6px; top: calc(60px + env(safe-area-inset-top)); }
  .nota { display: none; }
  #dica { font-size: 12px; font-weight: 500; }
}

/* versão do site: marca de água, menu de direitos e bloqueio fora de casa (o mesmo desenho da visita 360) */
.protegida #gl, .protegida img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.marca-agua { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: 50px; z-index: 4; display: flex;
  align-items: center; gap: 8px; pointer-events: none; user-select: none; opacity: 0.62; color: #fff;
  font-family: "Archivo", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.22em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.marca-agua img { width: 21px; height: auto; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); }
.menu-direitos { position: fixed; z-index: 12; width: 290px; padding: 14px 16px 15px; border-radius: 12px; color: #F4F3EF;
  background: rgba(12, 20, 34, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 1.45; }
.menu-direitos[hidden] { display: none; }
.md-marca { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.md-marca img { width: 20px; height: auto; }
.md-texto { margin: 0 0 10px; color: rgba(244, 243, 239, 0.72); }
.md-link { color: #EC8123; font-weight: 600; text-decoration: none; }
.bloqueio { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center; background: #0B121D; color: #F4F3EF; }
.bloqueio img { width: 60px; height: auto; }
.bloqueio h1 { margin: 6px 0 0; font-size: 24px; letter-spacing: -0.01em; }
.bloqueio p { margin: 0; color: rgba(244, 243, 239, 0.72); font-size: 15px; }
.bloqueio a { margin-top: 10px; padding: 11px 20px; border-radius: 999px; background: #EC8123; color: #fff;
  font-weight: 600; font-size: 14px; text-decoration: none; }
@media (max-width: 760px) {
  .marca-agua { bottom: auto; top: calc(78px + env(safe-area-inset-top)); right: 16px; font-size: 10px; }
  .marca-agua img { width: 17px; }
}