: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; }
/* pôster sob o carregamento; a cena aparece com fade quando estiver pronta */
#poster { position: fixed; inset: 0; z-index: 0; background: #1c2226 center / cover no-repeat; transition: opacity 1s ease .3s; }
.has-poster #scene { opacity: 0; transition: opacity .9s ease; }
.has-poster body.ready #scene { opacity: 1; }
.has-poster body.ready #poster { opacity: 0; }
.has-poster #loader { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.86) 0%, rgba(243,240,234,.72) 55%, rgba(233,228,218,.5) 100%); }
#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; }
#tip[hidden], #tip:empty { display: none; }
#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: #1d2124; 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); color: #1d2124; }
.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: #5b636a; 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; }

/* ---- site: botão "Voltar ao site" e atribuição do satélite ---- */
#btn-site { position: fixed; top: 16px; right: 16px; z-index: 11; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(15,23,42,.62); color: #fff; font: 600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .85; transition: opacity .2s; }
#btn-site:hover, #btn-site:focus-visible { opacity: 1; }
#btn-site svg { width: 14px; height: 14px; }
#attrib { position: fixed; left: 8px; bottom: 4px; z-index: 5; margin: 0; padding: 2px 6px; border-radius: 4px;
  font: 10px/1.3 system-ui, sans-serif; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); pointer-events: none; max-width: calc(100vw - 16px); }
body[data-view=chooser] #attrib, body[data-view=interior] #attrib { display: none; }
@media (max-width: 760px) { #btn-site { top: 70px; right: 10px; } #btn-site span { display: none; } #btn-site { padding: 8px; } #attrib { font-size: 9px; } }
body[data-view=chooser] #btn-site { z-index: 61; }

/* =============================================================
   Fase 3 — experiência: abertura, momentos, compartilhar, pós-venda
   ============================================================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- abertura ---------- */
#intro { position: fixed; inset: 0; z-index: 30; pointer-events: none; color: #fff; }
#intro[hidden] { display: none; }
#intro .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 28%, rgba(8,10,14,0) 58%, rgba(8,10,14,.55) 100%); transition: opacity 1.2s ease; }
#intro .title { position: absolute; left: 0; right: 0; bottom: 18vh; text-align: center; padding: 0 24px; display: grid; gap: 10px; justify-items: center; }
#intro .title > * { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.1s ease; }
#intro.show .title > * { opacity: 1; transform: none; filter: none; }
#intro.show .title > :nth-child(2) { transition-delay: .25s; }
#intro.show .title > :nth-child(3) { transition-delay: .7s; }
#intro.hide .title > * { opacity: 0; transform: translateY(-8px); filter: blur(4px); transition-duration: .9s; transition-delay: 0s; }
#intro .kicker { color: rgba(255,255,255,.82); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
#intro h2 { margin: 0; font-size: clamp(34px, 7vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -.035em; text-shadow: 0 2px 28px rgba(0,0,0,.45); }
#intro #intro-slogan { margin: 0; max-width: 560px; font-size: clamp(15px, 2.2vw, 19px); font-weight: 500; line-height: 1.45; color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(0,0,0,.55); }
#intro #intro-slogan::before { content: ''; display: block; width: 44px; height: 2px; margin: 4px auto 14px; border-radius: 2px; background: var(--accent); }
#intro-skip { pointer-events: auto; position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(12,16,20,.42); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, opacity .6s; }
#intro-skip:hover, #intro-skip:focus-visible { background: rgba(12,16,20,.7); }
#intro-skip svg { width: 16px; height: 16px; }
#intro.hide #intro-skip { opacity: 0; pointer-events: none; }
body.intro #top, body.intro #panel, body.intro #compass, body.intro #dock, body.intro #btn-site, body.intro #labels { opacity: 0 !important; pointer-events: none !important; }
body.intro #scene { pointer-events: none; }

/* ---------- entrada pela janela ---------- */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
#portal { position: fixed; inset: 0; z-index: 41; pointer-events: none; opacity: 0; --r: 0%; display: grid; place-items: end center; }
#portal p { margin: 0 0 18vh; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #6b5a3e; opacity: 0; transition: opacity .4s ease .3s; }
#portal.closing { opacity: 1; background: radial-gradient(circle at 50% 46%, #fffaf0 0, #fff4df var(--r), rgba(255,236,200,0) calc(var(--r) + 22%)); transition: --r .9s cubic-bezier(.5,0,.75,0), opacity .25s; }
#portal.closing.full { --r: 120%; }
#portal.closing.full p { opacity: 1; }
#portal.opening { opacity: 1; background: #fff4df; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 18%)); mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 18%)); transition: --r 1.2s cubic-bezier(.2,.7,.2,1), opacity .5s ease 1s; }
#portal.opening.go { --r: 130%; opacity: 0; }

/* ---------- dock: momentos + compartilhar ---------- */
#dock { position: fixed; z-index: 9; bottom: calc(16px + env(safe-area-inset-bottom)); left: calc(50% + 166px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; transition: opacity .6s .3s; }
body:not(.ready) #dock { opacity: 0; }
#dock button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
#dock button:hover { background: rgba(255,255,255,.75); }
#dock button:focus-visible, #intro-skip:focus-visible, #welcome button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#dock .moments { display: flex; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
#dock [aria-pressed=true] { background: var(--ink); color: #fff; }
#dock [aria-pressed=true]:hover { background: var(--ink); }
#btn-share { background: var(--accent) !important; color: var(--accent-ink) !important; }
#btn-share.ok { background: #2f9e5b !important; color: #fff !important; }
#btn-shot { padding: 0 !important; }

/* ---------- pós-venda ---------- */
#welcome { position: fixed; z-index: 13; right: 16px; bottom: 96px; width: 340px; padding: 20px 20px 18px; transform: translateY(16px); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s; }
#welcome.open { transform: none; opacity: 1; }
#welcome[hidden] { display: none; }
#welcome .kicker { color: var(--accent-text); }
#welcome h2 { margin: 6px 0 6px; font-size: 23px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
#welcome #w-unit { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
#welcome .x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 22px; cursor: pointer; color: var(--ink-2); }
#w-obra { margin: 0 0 14px; }
#w-obra .bar { height: 8px; border-radius: 8px; background: rgba(0,0,0,.08); overflow: hidden; }
#w-obra .bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--orange)); transition: width 1.6s cubic-bezier(.2,.8,.2,1) .4s; }
#w-obra p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
body:not([data-view=site]) #welcome { display: none !important; }
.primary, .secondary { min-height: 44px; }

#toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  #dock { left: 50%; bottom: calc(140px + env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); gap: 2px; padding: 4px; }
  #dock button { padding: 0 11px; font-size: 13px; gap: 5px; }
  #dock .moments { padding-right: 4px; margin-right: 2px; }
  #btn-share .lbl { display: none; }
  #btn-share { padding: 0 !important; }
  #btn-share.ok { padding: 0 12px !important; } #btn-share.ok .lbl { display: inline; } #btn-share.ok svg { display: none; }
  body.panel-open #dock, body.has-unit #dock, body.has-welcome #dock { opacity: 0; pointer-events: none; }
  #welcome { left: 0; right: 0; bottom: 0; width: auto; border-radius: 22px 22px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); opacity: 1; }
  #welcome.open { transform: none; }
  body.has-welcome #panel { transform: translateY(100%); }
  #welcome .actions { grid-template-columns: 1fr 1fr; }
  #intro .title { bottom: 24vh; }
  #intro-skip { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* alvos de toque ≥ 44 px */
  .ghost { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  #btn-emps { display: none; }
  #btn-site { min-width: 44px; min-height: 44px; justify-content: center; }
  #unit .x { width: 44px; height: 44px; top: 6px; right: 6px; }
  #panel-toggle { height: 34px; } #panel-toggle span { margin-top: 11px; }
  #panel { padding-top: 34px; }
  #sun-play { width: 44px; height: 44px; }
  .presets button { min-height: 44px; padding: 0 14px; font-size: 12.5px; }
  select, input[type=date] { min-height: 44px; font-size: 16px; }
  .switch { min-height: 44px; }
  .cell { min-height: 38px; }
  .seg button { min-height: 40px; }
  #unit h2 { font-size: 20px; padding-right: 44px; }
  #unit dl { gap: 8px 12px; }
  #unit .actions { grid-template-columns: 1fr 1fr; }
  #unit .actions button { font-size: 13px; padding: 10px; }
  #loader img { width: 170px; } #loader .step { padding: 0 24px; font-size: 14px; }
  #toasts { bottom: auto; top: calc(80px + env(safe-area-inset-top)); width: calc(100vw - 24px); justify-items: center; }
  #btn-site { top: 134px !important; }
}
@media (max-width: 380px) {
  #dock button { padding: 0 9px; font-size: 12.5px; }
  #dock .moments svg { display: none; }
  #top h1 { font-size: 14px; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  #intro .title > *, #portal, #portal.closing, #portal.opening, #welcome, #unit, #panel, #loader img { transition: none !important; animation: none !important; }
}

/* ---------- modo escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --ink: #eef1f3; --ink-2: #a9b1b8; --glass: rgba(22,27,32,.74); --glass-b: rgba(255,255,255,.08); --line: rgba(255,255,255,.1); --shadow: 0 12px 40px rgba(0,0,0,.45); }
  :root:not([data-theme=light]) #dock button:hover { background: rgba(255,255,255,.08); }
  :root:not([data-theme=light]) #dock [aria-pressed=true] { background: #eef1f3; color: #14181c; }
  :root:not([data-theme=light]) .ghost, :root:not([data-theme=light]) .presets button, :root:not([data-theme=light]) .secondary,
  :root:not([data-theme=light]) select, :root:not([data-theme=light]) input[type=date], :root:not([data-theme=light]) #bloco-summary,
  :root:not([data-theme=light]) #unit figure { background-color: rgba(255,255,255,.06); color: var(--ink); }
  :root:not([data-theme=light]) #unit figure { background: #f4f2ee; }
  :root:not([data-theme=light]) #unit .x { background: rgba(255,255,255,.08); color: var(--ink); }
  :root:not([data-theme=light]) #filter-summary b { color: var(--accent); }
  :root:not([data-theme=light]) .seg button.on { background: rgba(255,255,255,.14); color: var(--ink); }
  :root:not([data-theme=light]) #panel-toggle span { background: rgba(255,255,255,.3); }
  :root:not([data-theme=light]) kbd { background: #222a30; }
  :root:not([data-theme=light]) select option { background: #1b2126; color: #eef1f3; }
  :root:not([data-theme=light]) select { color-scheme: dark; }
}
body[data-view=entering] #top, body[data-view=entering] #compass, body[data-view=entering] #btn-site, body[data-view=entering] #attrib { opacity: 0; pointer-events: none; transition: opacity .5s; }
.bloco-label { color: #1d2124; }
/* modo escuro escolhido na chave (theme.js) */
:root[data-theme=dark] { --ink: #eef1f3; --ink-2: #a9b1b8; --glass: rgba(22,27,32,.74); --glass-b: rgba(255,255,255,.08); --line: rgba(255,255,255,.1); --shadow: 0 12px 40px rgba(0,0,0,.45); }
:root[data-theme=dark] #dock button:hover { background: rgba(255,255,255,.08); }
:root[data-theme=dark] #dock [aria-pressed=true] { background: #eef1f3; color: #14181c; }
:root[data-theme=dark] .ghost, :root[data-theme=dark] .presets button, :root[data-theme=dark] .secondary,
:root[data-theme=dark] select, :root[data-theme=dark] input[type=date], :root[data-theme=dark] #bloco-summary,
:root[data-theme=dark] #unit figure { background-color: rgba(255,255,255,.06); color: var(--ink); }
:root[data-theme=dark] #unit figure { background: #f4f2ee; }
:root[data-theme=dark] #unit .x { background: rgba(255,255,255,.08); color: var(--ink); }
:root[data-theme=dark] #filter-summary b { color: var(--accent); }
:root[data-theme=dark] .seg button.on { background: rgba(255,255,255,.14); color: var(--ink); }
:root[data-theme=dark] #panel-toggle span { background: rgba(255,255,255,.3); }
:root[data-theme=dark] kbd { background: #222a30; }
:root[data-theme=dark] select option { background: #1b2126; color: #eef1f3; }
:root[data-theme=dark] select { color-scheme: dark; }
#btn-theme { position: fixed; right: 16px; top: 64px; z-index: 40; width: 44px; height: 44px; border-radius: 99px; display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; border: 1px solid var(--glass-b); }
#btn-theme svg { width: 20px; height: 20px; }
body[data-view=interior] #btn-theme, body[data-view=entering] #btn-theme, body.intro #btn-theme { display: none; }
@media (max-width: 760px) { #btn-theme { right: 10px; top: 116px; } }
/* tela de escolha no escuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) #chooser { background: radial-gradient(1200px 600px at 20% -10%, #2a3036 0%, #181c20 55%, #101316 100%); color: var(--ink); }
}
:root[data-theme=dark] #chooser { background: radial-gradient(1200px 600px at 20% -10%, #2a3036 0%, #181c20 55%, #101316 100%); color: var(--ink); }
:root[data-theme=light] #chooser { color: #1d2124; }