/* Tours 360 · visor público */
:root {
  --accent: #2F5D62;
  --glass: rgba(16, 20, 22, .74);
  --glass-strong: rgba(16, 20, 22, .88);
  --text: #F3F5F4;
  --soft: #B9C3C1;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --top: max(12px, env(safe-area-inset-top));
  --side: max(12px, env(safe-area-inset-left));
  --bottom: max(12px, env(safe-area-inset-bottom));
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #101416; }
body { font: 15px/1.45 var(--font); color: var(--text); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#pano { position: fixed; inset: 0; }

.glass { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }

/* ficha del inmueble */
.card {
  position: fixed; z-index: 10; top: var(--top); left: var(--side);
  width: min(360px, calc(100% - var(--side) * 2 - 60px));
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 14px; overflow: hidden;
}
.card-toggle {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
  padding: .7rem .8rem .75rem .9rem; background: none; border: 0; cursor: pointer;
}
.card-logo { height: 34px; width: auto; max-width: 84px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px 5px; flex: none; }
.card-main { display: grid; min-width: 0; flex: 1; }
.price { font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card-title { font-weight: 500; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price + .card-title { font-size: .9rem; }
.card-main > .card-title:only-child { color: var(--text); font-size: 1.05rem; font-weight: 600; }
.card-more svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; display: block; }
.card.open .card-more svg { transform: rotate(180deg); }

.details {
  padding: 0 .9rem 1rem; max-height: min(62vh, 560px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255,255,255,.12);
}
.details p { margin: .7rem 0 0; }
.op { display: inline-block; font-size: .8rem; font-weight: 600; background: var(--accent); color: #fff; padding: .15rem .55rem; border-radius: 999px; }
.features { font-weight: 600; }
.address { color: var(--soft); }
.desc { margin-top: .8rem; color: #DDE3E1; line-height: 1.55; max-width: 60ch; }
.contact { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12); }
.cname { font-weight: 600; margin: 0 0 .6rem !important; }
.cbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.cbtn {
  flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem;
  border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-weight: 600;
}
.cbtn:first-child { background: var(--accent); }
.cbtn.wa { background: #1F8F4E; }

/* herramientas */
.tools { position: fixed; z-index: 10; top: var(--top); right: max(12px, env(safe-area-inset-right)); display: grid; gap: .5rem; }
.tool {
  width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tool svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool[aria-pressed=true] { background: var(--accent); }
.pnlm-controls-container { top: auto !important; left: auto !important; right: max(12px, env(safe-area-inset-right)); top: calc(var(--top) + 170px) !important; }
.pnlm-orientation-button { border-radius: 12px !important; }

/* plano */
.planpanel {
  position: fixed; z-index: 9; right: max(12px, env(safe-area-inset-right)); bottom: calc(var(--bottom) + 128px);
  width: min(340px, 46vw); padding: .6rem; border-radius: 14px;
  background: rgba(250, 251, 250, .94); box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.plan { position: relative; }
.plan img { width: 100%; height: auto; display: block; max-height: 42vh; object-fit: contain; }
.pmark {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; border: 3px solid var(--accent);
}
.pmark::before { content: ""; position: absolute; inset: -10px; }
.pmark span { display: none; }
.pmark.on { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); }
.pmark.on span {
  display: block; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; padding: .15rem .45rem; border-radius: 5px;
}

/* estancias */
.strip { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 0 0 var(--bottom); pointer-events: none; }
.now {
  margin: 0 0 .5rem var(--side); display: inline-block; font-weight: 600; font-size: 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.strip ol {
  list-style: none; margin: 0; padding: 0 var(--side); display: flex; gap: .5rem; overflow-x: auto; pointer-events: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.strip ol::-webkit-scrollbar { display: none; }
.strip li { flex: none; scroll-snap-align: center; }
.strip button {
  display: block; width: 116px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--glass-strong); text-align: left; opacity: .82; transition: opacity .15s, border-color .15s;
}
.strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.strip button span { display: block; padding: .25rem .45rem .3rem; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip button.on { border-color: var(--accent); opacity: 1; }
.strip button.on span { background: var(--accent); }
.strip.single ol { display: none; }

/* puntos */
.hs { width: 0; height: 0; }
.hs .hs-dot {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hs .hs-dot svg { width: 24px; height: 24px; fill: currentColor; }
.hs-go .hs-dot { background: var(--accent); color: #fff; border: 2px solid #fff; }
.hs-go .hs-dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #fff; animation: ping 2.4s ease-out infinite;
}
.hs-info .hs-dot { background: rgba(255,255,255,.95); color: var(--accent); }
.hs .hs-label {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--glass-strong); color: #fff; font: 600 .82rem/1.25 var(--font); padding: .3rem .6rem; border-radius: 7px;
}
.hs .hs-label:empty { display: none; }
.hs-info .hs-label { display: none; white-space: normal; width: max-content; max-width: 240px; text-align: left; font-weight: 500; }
.hs-info.open .hs-label, .hs-info:hover .hs-label, .hs-info:focus .hs-label { display: block; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* varios */
.draft {
  position: fixed; z-index: 11; top: var(--top); left: 50%; transform: translateX(-50%);
  background: #F4C54A; color: #3A2B00; font-weight: 600; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px;
}
.flash {
  position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
  background: var(--glass-strong); padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; transition: opacity .2s, transform .2s;
}
.flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pnlm-load-box { background: var(--glass-strong) !important; border-radius: 12px !important; font-family: var(--font) !important; }
.pnlm-lbar-fill { background: var(--accent) !important; }

body.plain { overflow: auto; background: #ECEEEA; color: #1E2629; }
.notfound { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 2rem; gap: .5rem; }
.notfound img { max-height: 60px; width: auto; margin: 0 auto 1rem; }
.notfound h1 { font-size: 1.5rem; margin: 0; }
.notfound p { margin: 0; color: #5B676B; max-width: 42ch; }

@media (max-width: 600px) {
  .price { font-size: 1.2rem; }
  .strip button { width: 92px; }
  .planpanel { left: var(--side); right: var(--side); width: auto; bottom: calc(var(--bottom) + 118px); }
  .pnlm-controls-container { top: calc(var(--top) + 170px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-go .hs-dot::after { animation: none; display: none; }
  * { transition: none !important; }
}
.pnlm-panorama-info { display: none !important; }