:root {
--navy: #0e1b33;
--navy-2: #162a4d;
--gold: #c49a5c;
--gold-2: #e0bf8a;
--ink: #f4efe6;
--glass: rgba(14, 27, 51, 0.82);
--radius: 14px;
--font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--navy); color: var(--ink); font-family: var(--font); overflow: hidden; }
#viewer { position: fixed; inset: 0; }
/* ---------- barra superior ---------- */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 120;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
height: 64px; padding: 0 16px;
background: linear-gradient(180deg, var(--glass), rgba(14, 27, 51, 0.55));
border-bottom: 1px solid rgba(196, 154, 92, 0.35);
backdrop-filter: blur(6px);
}
.brand { height: 44px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.actions { display: flex; gap: 10px; }
.actions button, .intro button {
font: 500 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
color: var(--ink); background: rgba(255,255,255,.04);
border: 1px solid var(--gold); border-radius: 999px;
padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
transition: background .2s, color .2s;
}
.actions button:hover, .actions button.active { background: var(--gold); color: var(--navy); }
.actions button.ghost { border-color: transparent; }
.ico { width: 16px; height: 16px; display: inline-block; background: currentColor;
-webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico-rooms { --m: url('data:image/svg+xml;utf8,'); }
.ico-plan { --m: url('data:image/svg+xml;utf8,'); }
.ico-fs { --m: url('data:image/svg+xml;utf8,'); }
/* ---------- barra inferior ---------- */
.infobar {
position: fixed; left: 0; bottom: 40px; z-index: 110;
padding: 12px 28px 12px 16px; max-width: calc(100% - 16px);
background: var(--glass); border-top-right-radius: var(--radius);
border-top: 1px solid rgba(196,154,92,.35); border-right: 1px solid rgba(196,154,92,.35);
font-size: 14px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.infobar { transition: opacity .25s; }
.gallery-open .infobar { opacity: 0; pointer-events: none; }
#scene-title { color: var(--gold-2); font-weight: 600; text-transform: uppercase; }
.infobar .sep { opacity: .5; margin: 0 8px; }
/* ---------- tela inicial ---------- */
.intro {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
background: rgba(8, 16, 30, .55); backdrop-filter: blur(10px);
transition: opacity .5s;
}
.intro.hidden { opacity: 0; pointer-events: none; }
.intro-card {
display: grid; grid-template-columns: 1fr 1.3fr; max-width: 760px; width: 100%;
background: linear-gradient(135deg, var(--navy-2), var(--navy));
border: 1px solid rgba(196,154,92,.5); border-radius: 24px; overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.intro-help { padding: 32px 24px; text-align: center; border-right: 1px solid rgba(196,154,92,.25); }
.intro-help h2 { margin: 0 0 20px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.intro-help p { font-size: 13px; line-height: 1.5; opacity: .85; }
.mouse { width: 46px; height: 70px; margin: 0 auto 16px; border: 2px solid var(--ink); border-radius: 24px; position: relative; }
.mouse span { position: absolute; left: 50%; top: 12px; width: 4px; height: 12px; margin-left: -2px; background: var(--gold); border-radius: 2px; animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }
.intro-main { padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.intro-main img { width: 180px; height: auto; }
.intro-main p { margin: 0; font-size: 14px; line-height: 1.6; }
.intro-main strong { color: var(--gold-2); font-weight: 600; }
.intro button { background: var(--gold); color: var(--navy); font-weight: 600; padding: 14px 44px; }
.intro button:hover { background: var(--gold-2); }
.intro small { font-size: 11px; opacity: .55; letter-spacing: .05em; }
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: block; } .desktop-only { display: none; } }
/* ---------- Photo Sphere Viewer: identidade ---------- */
.psv-navbar { background: var(--glass) !important; font-family: var(--font); }
.psv-container { background: var(--navy); }
.psv-loader { color: var(--gold) !important; }
.psv-gallery { background: rgba(14, 27, 51, .9) !important; }
.psv-gallery-item-title { font-family: var(--font); letter-spacing: .05em; }
.psv-map { font-family: var(--font); bottom: 52px !important; }
.psv-map__container { background: rgba(255,255,255,.96) !important; }
.psv-tooltip { font-family: var(--font); }
/* seta de navegacao (marcador no chao) */
.tour-arrow { cursor: pointer; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); transition: transform .2s; }
.tour-arrow:hover { transform: scale(1.12); }
/* ---------- celular ---------- */
@media (max-width: 640px) {
.topbar { height: 56px; padding: 0 10px; }
.brand { height: 36px; }
.actions { gap: 6px; }
.actions button { padding: 9px 11px; font-size: 11px; letter-spacing: .06em; }
.actions .lbl { display: none; }
.intro-card { grid-template-columns: 1fr; }
.intro-help { border-right: 0; border-bottom: 1px solid rgba(196,154,92,.25); padding: 20px 16px; }
.intro-help h2 { margin-bottom: 10px; }
.mouse { display: none; }
.infobar { font-size: 12px; padding: 10px 16px; border-radius: 0 var(--radius) var(--radius) 0; }
}