@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; }

/* Visita 360 e passeio livre da 1118. Vidro escuro sobre a imagem, navy e laranja das propostas Helplar. */
:root {
  --ink: #15263F;
  --vidro: rgba(15, 26, 44, 0.72);
  --texto: #F4F3EF;
  --texto-suave: rgba(244, 243, 239, 0.74);
  --texto-fraco: rgba(244, 243, 239, 0.5);
  --linha: rgba(244, 243, 239, 0.16);
  --laranja: #EC8123;
  --fundo: #0E1623;
  --raio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
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 { 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 { cursor: pointer; }

/* barra de cima */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 30px max(18px, env(safe-area-inset-left));
  background: linear-gradient(rgba(8, 14, 24, 0.66), rgba(8, 14, 24, 0)); pointer-events: none; }
.topo > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-t b { font-family: "Archivo"; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; }
.marca-t span { font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--vidro);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linha); }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--texto-suave); white-space: nowrap; transition: background .2s, color .2s; }
.seg button:hover { color: var(--texto); }
.seg button[aria-pressed="true"] { background: var(--texto); color: var(--ink); }
.seg button:disabled { opacity: .4; cursor: default; }
.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); white-space: nowrap; transition: background .2s, border-color .2s; }
.alterna[aria-pressed="true"] { border-color: rgba(236, 129, 35, .9); background: rgba(236, 129, 35, .18); }
.alterna:disabled { opacity: .4; cursor: default; }
.icone { padding: 7px; display: grid; place-items: center; }
.icone svg, .pega svg, .fecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* lugares e mapa */
.lado { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: 54px; z-index: 4; width: 300px;
  display: flex; flex-direction: column; gap: 10px; }
.cartao { background: var(--vidro); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.sobre { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--laranja); }
.lugares h1 { margin: 0 0 10px; font-family: "Archivo"; font-size: 21px; letter-spacing: -.015em; line-height: 1.15; }
#lista-lugares { display: flex; flex-wrap: wrap; gap: 6px; }
#lista-lugares button { border: 1px solid var(--linha); background: transparent; border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
#lista-lugares button:hover { color: var(--texto); border-color: rgba(244, 243, 239, .4); }
#lista-lugares button[aria-pressed="true"] { color: var(--texto); border-color: var(--laranja); background: rgba(236, 129, 35, .16); }
.mapa { padding: 8px; }
#mapa { width: 100%; height: auto; display: block; border-radius: 9px; }
#mapa .p { fill: rgba(244, 243, 239, .9); stroke: rgba(15, 26, 44, .8); stroke-width: .12; cursor: pointer; }
#mapa .p.visita { fill: #fff; }
#mapa .p.aqui { fill: var(--laranja); }
#mapa .p:hover { fill: var(--laranja); }
#mapa .cone { fill: rgba(236, 129, 35, .38); pointer-events: none; }
#mapa .lig { stroke: rgba(255, 255, 255, .35); stroke-width: .08; stroke-dasharray: .25 .2; }

#lista-lugares .zonas { width: 100%; display: flex; gap: 2px; padding: 3px; margin-bottom: 4px; border-radius: 999px;
  background: rgba(244, 243, 239, .08); border: 1px solid var(--linha); }
#lista-lugares .zonas button.zona { flex: 1; border: 0; margin: 0; padding: 5px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); background: transparent; }
#lista-lugares .zonas button.zona[aria-pressed="true"] { background: var(--texto); color: var(--ink); }

/* energia agora (depois da obra, dentro de casa e no ponto aéreo) */
.energia { position: fixed; right: max(18px, env(safe-area-inset-right)); top: 92px; z-index: 4; width: 300px; padding: 12px 14px 10px; }
.energia .en-sub { margin: 0 0 4px; font-size: 12px; color: var(--texto-suave); }
.energia .sobre b { color: var(--texto); }
.en-svg { width: 100%; height: auto; display: block; overflow: visible; }
.en-svg .fl { fill: none; stroke: rgba(244, 243, 239, .16); stroke-width: 2; stroke-linecap: round; }
.en-svg .fl.ativo { stroke: var(--laranja); stroke-dasharray: 4 7; animation: flui .9s linear infinite; }
.en-svg .fl.ativo.inv { animation-direction: reverse; }
@keyframes flui { to { stroke-dashoffset: -11; } }
.en-svg .no { fill: none; stroke: var(--texto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.en-svg .no .fundo { fill: rgba(244, 243, 239, .07); stroke: rgba(244, 243, 239, .28); stroke-width: 1; }
.en-svg .no.hub .fundo { fill: rgba(236, 129, 35, .16); stroke: rgba(236, 129, 35, .7); }
.en-svg .nivel { fill: #6fd08c; stroke: none; }
.en-svg text { fill: var(--texto); font-size: 11.5px; font-weight: 600; text-anchor: middle; }
.en-svg text.rot { fill: var(--texto-suave); font-size: 10px; font-weight: 400; }
.energia .en-nota { margin: 4px 0 0; font-size: 10.5px; color: var(--texto-fraco); }
@media (prefers-reduced-motion: reduce) { .en-svg .fl.ativo { animation: none; } }

/* etiquetas da obra (itens da proposta) */
#etiquetas { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.etq { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transition: opacity .25s; border: 0; background: none; padding: 0; }
.etq.ver { opacity: 1; }
.etq .caixa { display: flex; align-items: center; gap: 8px; background: rgba(15, 26, 44, .8); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(244, 243, 239, .22); color: var(--texto); border-radius: 999px;
  padding: 5px 12px 5px 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.etq .n { background: var(--laranja); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-family: "Archivo"; }
.etq .pe { width: 2px; height: 16px; background: rgba(244, 243, 239, .75); }
.etq .pt { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(236, 129, 35, .45); }
.etq:hover .caixa, .etq:focus-visible .caixa { border-color: var(--laranja); }
.cartao-item { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: 54px; z-index: 6; width: min(360px, calc(100vw - 36px));
  background: rgba(15, 26, 44, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px 18px; }
.cartao-item h2 { margin: 2px 0 8px; font-family: "Archivo"; font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.cartao-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
.cartao-item .sobre b { color: var(--texto); }
.fecha { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; cursor: pointer; padding: 6px; color: var(--texto-suave); }

/* comparar: cortina vertical */
#divisor { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 2; width: 0; }
#divisor .linha { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); }
#divisor .pega { position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ink); cursor: ew-resize; display: grid; place-items: center; touch-action: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
#divisor .rot { position: absolute; top: 84px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  background: rgba(15, 26, 44, .8); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
#divisor .rot.esq { right: 12px; }
#divisor .rot.dir { left: 12px; background: rgba(236, 129, 35, .95); color: #fff; }

/* rodapé */
.rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; 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, .6)); font-size: 12px; color: var(--texto-suave); pointer-events: none; }
.rodape .nota { margin-left: auto; color: var(--texto-fraco); text-align: right; max-width: 52%; }
.aviso-var { background: rgba(236, 129, 35, .9); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 600; }

.veu { position: fixed; inset: 0; z-index: 7; background: #0E1623; opacity: 0; pointer-events: none; transition: opacity .28s; }
.veu.ativo { opacity: 1; }
.carregar { position: fixed; inset: 0; z-index: 9; background: var(--fundo); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; transition: opacity .5s; }
.carregar.fora { opacity: 0; pointer-events: none; }
.carregar img { width: 64px; height: 64px; }
.carregar p { margin: 0; font-size: 14px; color: var(--texto-suave); }
.carregar .barra { width: 180px; height: 3px; border-radius: 3px; background: rgba(244, 243, 239, .14); overflow: hidden; }
.carregar .barra i { display: block; height: 100%; width: 8%; background: var(--laranja); transition: width .4s; }
.aviso { position: fixed; inset: auto 18px 50% 18px; text-align: center; z-index: 10; }

@media (max-width: 900px) {
  .topo { flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }
  .marca { width: 100%; }
  .acoes { justify-content: flex-start; }
  .seg button, .alterna { padding: 6px 10px; font-size: 12px; }
  .lado { width: calc(100vw - 36px); bottom: 44px; flex-direction: row; align-items: flex-end; }
  .lugares { flex: 1; padding: 10px 12px; }
  .lugares h1 { font-size: 16px; margin-bottom: 6px; }
  #lista-lugares { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  #lista-lugares button { flex: none; }
  .mapa { width: 118px; flex: none; padding: 5px; }
  .rodape .nota, #dica { display: none; }
  .cartao-item { bottom: auto; top: 118px; }
  .energia { top: 112px; right: 12px; width: 212px; padding: 8px 10px 6px; }
  .energia .en-nota, .energia .en-sub { display: none; }
  #lista-lugares .zonas { width: auto; flex: none; margin: 0 4px 0 0; }
}

/* ecrãs baixos (portáteis de 720-800 px): o painel nunca passa por baixo da barra do topo; o mapa encolhe primeiro */
.lado { max-height: calc(100vh - 124px); }
@media (max-height: 860px) and (min-width: 901px) {
  #mapa { max-height: max(120px, calc(100vh - 480px)); width: auto; max-width: 100%; margin: 0 auto; }
}