:root {
  --lime: #b5cc14; --lime-d: #8fa30a;
  --accent: #b5cc14; --accent-ink: #1e2600; --accent-text: #5d7000; --accent-soft: rgba(181,204,20,.14); --accent-line: rgba(181,204,20,.4); --st-disp: #b5cc14; --st-res: #f2a93b; --orange: #e8692b; --amber: #f2a93b; --grey: #9a9a9a;
  --ink: #1d2124; --ink-2: #5b6268; --glass: rgba(255, 255, 255, .72); --glass-b: rgba(255, 255, 255, .55);
  --line: rgba(20, 30, 40, .09); --r: 18px; --shadow: 0 12px 40px rgba(16, 24, 32, .18);
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c2226; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; }

.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--glass-b); box-shadow: var(--shadow); border-radius: var(--r); }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(circle at 50% 40%, #fff 0%, #f3f0ea 60%, #e9e4da 100%); transition: opacity .8s ease, visibility .8s; }
#loader img { width: 210px; animation: pulse 2.2s ease-in-out infinite; }
#loader .bar { width: 220px; height: 4px; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--orange)); transition: width .4s ease; }
#loader .step { margin: 0; font-size: 13px; color: var(--ink-2); letter-spacing: .02em; max-width: 420px; text-align: center; }
#loader.error .step { color: #b3261e; font-weight: 600; }
#loader.done { opacity: 0; visibility: hidden; }
@keyframes pulse { 50% { transform: scale(1.04); } }
#fade { position: fixed; inset: 0; z-index: 40; background: #f4f1ec; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#fade.on { opacity: 1; }

/* ---------- topo ---------- */
#top { position: fixed; top: 16px; left: 16px; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 16px; }
#top .logo { height: 34px; }
#top h1 { font-size: 15px; margin: 0; font-weight: 800; letter-spacing: -.01em; }
#top p { margin: 0; font-size: 12px; color: var(--ink-2); }
.ghost { background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.ghost:hover { background: #fff; }

/* ---------- painel ---------- */
#panel { position: fixed; top: 92px; left: 16px; z-index: 10; width: 316px; max-height: calc(100% - 108px); overflow: auto; padding: 6px 18px 16px; scrollbar-width: thin; }
#panel section { padding: 12px 0; }
#panel section + section { border-top: 1px solid var(--line); }
#panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin: 4px 0 10px; font-weight: 700; }
#panel-toggle { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12.5px; margin-bottom: 12px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend b { color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: grid; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
select, input[type=date] { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.8); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: var(--ink); font-weight: 500; width: 100%; }
select { background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
output { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 34px; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); cursor: pointer; margin-bottom: 12px; font-weight: 600; }
.switch input { display: none; }
.switch span { width: 36px; height: 21px; border-radius: 99px; background: #d6d6d2; position: relative; transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(15px); }
.slider { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
#sun-play { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
#sun-play svg { width: 16px; fill: currentColor; } #sun-play .s { display: none; } #sun-play.on .p { display: none; } #sun-play.on .s { display: block; }
#sun-play.on { background: var(--orange); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f6c58f, #ffe9a8 30%, #fff6d8 50%, #ffe9a8 70%, #f19a6b); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { border: 1px solid var(--line); background: rgba(255,255,255,.7); border-radius: 99px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.presets button:hover { background: #fff; }
#filter-summary { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
#filter-summary b { color: #3f4d00; font-weight: 800; }
#sun-info { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; }

#bloco-summary { margin-top: 14px; padding: 12px; background: rgba(255,255,255,.65); border-radius: 14px; border: 1px solid var(--line); }
#bloco-summary header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
#bloco-summary h3 { margin: 0; font-size: 16px; font-weight: 800; }
#bloco-summary header span { font-size: 11.5px; color: var(--ink-2); }
#bloco-summary .grid { display: grid; gap: 4px; }
#bloco-summary .row { display: grid; grid-template-columns: 22px repeat(4, 1fr); gap: 4px; align-items: center; }
#bloco-summary .row > span { font-size: 11px; color: var(--ink-2); font-weight: 700; }
.cell { border: 0; border-radius: 7px; padding: 6px 0; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .15s; }
.cell.disponivel { background: var(--st-disp); color: #10240f; }
.cell.reservada { background: var(--st-res); color: #3b2400; }
.cell.vendida { background: #dcdcd8; color: #8b8b86; cursor: not-allowed; }
.cell.off { opacity: .25; }
.cell:not([disabled]):hover { transform: translateY(-1px); filter: brightness(1.05); }
.hint { font-size: 11px; color: var(--ink-2); margin: 8px 0 0; }

/* ---------- rótulos dos blocos ---------- */
.bloco-label { pointer-events: auto; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px 5px; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(0,0,0,.18); font-family: var(--font); transform-origin: bottom center; transition: transform .2s, opacity .3s, background .2s; position: relative; }
.bloco-label::after { content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(255,255,255,.88); }
.bloco-label b { font-size: 13px; font-weight: 800; line-height: 1; }
.bloco-label span { font-size: 9.5px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.bloco-label.soldout span { color: #999; }
.bloco-label.hover, .bloco-label:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.12); }
.bloco-label.hover span, .bloco-label:hover span { color: var(--accent-ink); }
.bloco-label.dim { opacity: .35; filter: grayscale(1); }
.bloco-label.hidden-filter { opacity: 0; pointer-events: none; }

/* ---------- cartão da unidade ---------- */
#unit { position: fixed; z-index: 12; top: 16px; right: 16px; width: 340px; max-height: calc(100% - 32px); overflow: auto; padding: 18px 18px 16px; transform: translateX(calc(100% + 24px)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#unit.open { transform: none; }
#unit .x { position: absolute; top: 10px; right: 12px; border: 0; background: rgba(0,0,0,.05); width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
#unit .head { display: grid; gap: 6px; margin-bottom: 12px; }
#unit h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.chip { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; }
.chip.disponivel { background: var(--st-disp); color: #10240f; } .chip.reservada { background: var(--st-res); color: #3b2400; } .chip.vendida { background: #ddd; color: #666; }
#unit dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 12px; }
#unit dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); font-weight: 700; }
#unit dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
#unit .price { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
#unit .price dd { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
#unit .price dt::after { content: ' (avaliação)'; text-transform: none; letter-spacing: 0; font-weight: 500; }
#unit figure { margin: 0 0 12px; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--line); }
#unit figure img { width: 100%; display: block; aspect-ratio: 736/856; object-fit: contain; }
.note { font-size: 12px; color: #8a5a00; margin: 0 0 10px; } .note:empty { display: none; }
.actions { display: grid; gap: 8px; }
.primary, .secondary { border: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.primary:hover:not(:disabled) { background: #000; transform: translateY(-1px); }
.primary:disabled { background: #c9c9c4; color: #fff; cursor: not-allowed; box-shadow: none; }
#btn-enter:not(:disabled) { background: linear-gradient(135deg, #a9c010, #8fa30a); color: #fff; }
.secondary { background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.secondary:hover { background: #fff; }

/* ---------- bússola / tooltip / toasts ---------- */
#compass { position: fixed; right: 16px; bottom: 16px; z-index: 9; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
#compass .rose { width: 52px; height: 52px; transition: transform .08s linear; }
#tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; background: rgba(20,24,28,.88); color: #fff; padding: 7px 10px; border-radius: 10px; font-size: 12px; display: grid; gap: 1px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
#tip b { font-weight: 800; } #tip span { opacity: .8; }
#toasts { position: fixed; z-index: 60; bottom: 24px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; }
.toast { background: rgba(20,24,28,.92); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 13px; max-width: min(92vw, 520px); box-shadow: var(--shadow); transition: opacity .5s, transform .5s; }
.toast.warn { border-left: 4px solid var(--amber); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- barras de modo ---------- */
#winbar, #intbar { position: fixed; z-index: 11; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; white-space: nowrap; }
#winbar span { font-weight: 700; font-size: 14px; } #winbar small { color: var(--ink-2); font-size: 12px; }
#winbar .primary { padding: 9px 14px; font-size: 13px; }
#intbar { left: 16px; transform: none; top: 84px; padding: 8px 8px 8px 8px; }
#intbar .t { display: grid; line-height: 1.25; } #intbar .t b { font-size: 14px; } #intbar .t small { font-size: 11.5px; color: var(--ink-2); }
.seg { display: flex; background: rgba(0,0,0,.06); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
#inthelp { position: fixed; z-index: 11; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 9px 16px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
kbd { display: inline-block; min-width: 20px; text-align: center; font: 700 11px var(--font); padding: 2px 5px; margin: 0 1px; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: var(--ink); }
#inthelp .touch { display: none; }
@media (hover: none) { #inthelp .desk { display: none; } #inthelp .touch { display: inline; } }

/* visibilidade por vista */
.window-only, .interior-only { display: none !important; }
body[data-view=window] .window-only { display: flex !important; }
body[data-view=interior] .interior-only { display: flex !important; }
body[data-view=interior] #inthelp.interior-only { display: block !important; }
body:not([data-view=site]) .site-only, body:not([data-view=site]) #unit { display: none !important; }
body[data-view=interior] #top { opacity: .95; }
body:not(.ready) #top, body:not(.ready) #panel, body:not(.ready) #compass { opacity: 0; }
#top, #panel, #compass { transition: opacity .8s .2s; }

/* ---------- mobile: bottom sheets ---------- */
@media (max-width: 760px) {
  #top { top: 10px; left: 10px; right: 10px; padding: 8px 10px; }
  #top .titles p { display: none; } #top .logo { height: 28px; } #btn-home { margin-left: auto; }
  #panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 62vh; border-radius: 22px 22px 0 0; padding: 26px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(calc(100% - 132px)); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  body.panel-open #panel { transform: none; }
  #panel-toggle { display: block; position: absolute; top: 0; left: 0; right: 0; height: 26px; border: 0; background: none; cursor: pointer; }
  #panel-toggle span { display: block; width: 44px; height: 5px; border-radius: 5px; background: rgba(0,0,0,.2); margin: 9px auto 0; }
  #unit { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 78vh; border-radius: 22px 22px 0 0; transform: translateY(105%); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  #unit.open { transform: none; }
  #unit figure img { max-height: 200px; }
  #compass { top: 74px; bottom: auto; right: 10px; width: 52px; height: 52px; } #compass .rose { width: 42px; height: 42px; }
  #intbar { top: auto; bottom: 64px; left: 10px; right: 10px; flex-wrap: wrap; justify-content: space-between; }
  #intbar .t { order: -1; width: 100%; padding: 0 6px; }
  #inthelp { bottom: 12px; font-size: 11.5px; }
  #winbar { top: auto; bottom: 16px; flex-wrap: wrap; white-space: normal; justify-content: center; left: 10px; right: 10px; transform: none; }
}

/* interior externo (js/interior.js) desenha a própria UI */
body[data-view=external] #top, body[data-view=external] #compass { display: none !important; }

/* ---------- marca por empreendimento ---------- */
.primary { background: var(--ink); }
body[data-emp=ola-mosaico] .primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(240,138,36,.35); }
body[data-emp=ola-mosaico] #sun-play.on { background: var(--accent); }
#btn-emps { text-decoration: none; color: inherit; }
#bloco-summary .row > i.na { display: block; height: 26px; border-radius: 7px; background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 4px, transparent 4px 8px); }

/* ---------- escolha do empreendimento ---------- */
#chooser { position: fixed; inset: 0; z-index: 60; overflow: auto; background: radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, #f3f0ea 55%, #e7e1d6 100%); padding: clamp(24px, 6vw, 72px) 16px 48px; }
#chooser[hidden] { display: none; }
#chooser .wrap { max-width: 1080px; margin: 0 auto; }
#chooser header { margin-bottom: 28px; }
#chooser .kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
#chooser h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 10px; font-weight: 800; }
#chooser header p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 560px; line-height: 1.5; }
#chooser .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.emp-card { --c: #333; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 50px rgba(30,30,20,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; outline: none; }
.emp-card:hover, .emp-card:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 26px 70px rgba(30,30,20,.2); }
.emp-card:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.emp-card .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.emp-card .ph > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.emp-card:hover .ph > img:first-child { transform: scale(1.04); }
.emp-card .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); }
.emp-card .ph .logo { position: absolute; left: 16px; bottom: 14px; z-index: 1; height: 62px; width: auto; max-width: 46%; object-fit: contain; background: rgba(255,255,255,.94); padding: 8px 12px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.emp-card .tag { position: absolute; top: 14px; right: 14px; z-index: 1; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.92); }
.emp-card .tag b { color: var(--c); }
.emp-card .bd { padding: 18px 20px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 4px solid var(--c); }
.emp-card h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; font-weight: 800; }
.emp-card .bd p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.emp-card .go { flex: none; font-size: 13px; font-weight: 800; padding: 10px 14px; border-radius: 99px; background: var(--c); color: #fff; white-space: nowrap; }
.emp-card[data-slug=fit-ponta-negra] .go { color: #1e2600; }
#chooser .err { color: #b3261e; font-weight: 600; }

/* ---- Modo totem (?kiosk=1, dentro do Stand Olá) ---- */
html.kiosk, html.kiosk body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
html.kiosk #btn-emps { display: none !important; } /* a lista de empreendimentos é o próprio totem */
html.kiosk #scene { touch-action: none; }