/* Villa Mirador · Gran Salón 360° — RÜM Showroom
   Encuadre cinematográfico: barras de scope, secuencia de título y rótulo inferior. */

:root {
  --paper:      #f6f1e8;
  --muted:      rgba(246,241,232,.62);
  --accent:     #f3d2b2;
  --glass:      rgba(20,16,11,.52);
  --glass-hi:   rgba(18,14,10,.88);
  --line:       rgba(246,241,232,.16);
  --shadow:     0 20px 50px rgba(0,0,0,.34);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --bar:        23%;                 /* altura de las barras; el JS la anima */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #070605;
  color: var(--paper);
  font: 400 15px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
}

/*
 * El cuadro, no la pantalla, decide la nitidez: la ampliación es el ancho del
 * lienzo entre los pixeles de origen que caben en el encuadre. Con 5544 px de
 * panorama, 104.5° de campo horizontal y densidad tope 1.25, 1280 px de ancho
 * dan 1:1 exacto. Estirarlo a toda la página sólo agranda los mismos téxeles.
 */
#frame {
  position: relative;
  width: min(1280px, 100vw);
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

#stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
#stage canvas { display: block; }
#stage canvas.is-dragging { cursor: grabbing; }

/* Barras de scope. Cierran el cuadro en el título y se retiran al entrar. */
.bar {
  position: absolute; left: 0; right: 0; z-index: 25;
  height: var(--bar); background: #070605;
  pointer-events: none;
  transition: height 1.5s var(--ease);
}
.bar--top { top: 0; }
.bar--bottom { bottom: 0; }
/* Las barras guardan la proporción de scope, pero nunca por debajo de lo que
   mide el propio control: en un teléfono acostado 7.2% son 28 px y el chip 32,
   así que el botón de regreso quedaba cortado contra el borde. */
body.is-open { --bar: max(7.2%, 46px); }

/* ─────────────────────────── Loader ─────────────────────────── */

.pano-loader {
  position: absolute; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #070605; transition: opacity .9s var(--ease);
  font-size: .8rem; color: var(--muted); letter-spacing: .06em;
}
.pano-loader.is-out { opacity: 0; pointer-events: none; }
.pano-loader[hidden] { display: none; }
.pano-loader__spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(246,241,232,.13); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────── Secuencia de título ─────────────────────── */

.title-seq {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  display: flex; align-items: center;
  padding: 0 8vmin;
  background: linear-gradient(100deg, rgba(9,7,5,.86) 0%, rgba(9,7,5,.5) 40%, transparent 70%);
  transition: opacity 1s var(--ease);
}
.title-seq.is-out { opacity: 0; }
.title-seq[hidden] { display: none; }

.title-card { pointer-events: auto; max-width: 470px; }
.title-kicker,
.title-name,
.title-space,
.title-card .btn-primary { animation: rise 1.1s var(--ease) both; }
.title-name       { animation-delay: .18s; }
.title-space      { animation-delay: .34s; }
.title-card .btn-primary { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.title-kicker {
  display: block; font-size: .66rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.title-name {
  font: 300 clamp(2.7rem, 6.6vw, 4.6rem)/1 Fraunces, Georgia, serif;
  letter-spacing: -.02em;
}
.title-space {
  font: italic 300 clamp(1.3rem, 2.6vw, 1.9rem)/1.2 Fraunces, Georgia, serif;
  color: var(--accent); margin: 6px 0 34px;
}

/* Botón primario RÜM: durazno, nunca azul. */
.btn-primary {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #241d13;
  font: 600 .82rem/1 Inter, sans-serif; letter-spacing: .02em;
  padding: 15px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 12px 30px rgba(243,210,178,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(243,210,178,.3); }
.btn-primary:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ─────────────────────────── HUD ─────────────────────────── */

.hud-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: var(--bar); padding: 0 26px;
  transition: height 1.5s var(--ease);
  animation: fadein 1.1s var(--ease) both;
}
.hud-top[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }

.hud-brand { font: 400 .95rem/1 Fraunces, Georgia, serif; letter-spacing: .05em; }
.hud-here {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line);
}

.chip {
  border: 1px solid var(--line); background: var(--glass); color: var(--paper);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font: 500 .73rem/1 Inter, sans-serif; letter-spacing: .03em;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.chip:hover { background: rgba(20,16,11,.8); border-color: rgba(243,210,178,.45); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--accent); color: #241d13; border-color: var(--accent); }

/* Tira de planos, dentro de la barra inferior */
.shots {
  position: absolute; left: 50%; bottom: 0; z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  height: var(--bar); padding: 0 10px;
  transition: height 1.5s var(--ease);
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  animation: fadein 1.3s var(--ease) both;
}
.shots[hidden] { display: none; }
.shots::-webkit-scrollbar { display: none; }
.shots .chip { background: transparent; border-color: transparent; }
.shots .chip:hover { background: rgba(246,241,232,.1); }

/* El plano activo no se rellena de durazno: dentro de la barra negra la píldora
   pesa demasiado, y heredar su texto oscuro sobre fondo transparente lo dejaba
   ilegible. Se marca con el propio acento y un subrayado fino. */
.shots .chip[aria-pressed="true"] {
  position: relative;
  background: transparent; border-color: transparent;
  color: var(--accent);
}
.shots .chip[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 1px;
  height: 1.5px; border-radius: 2px; background: var(--accent);
}

.nav-hint {
  position: absolute; left: 50%; bottom: calc(var(--bar) + 18px); z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: .71rem; color: var(--muted); letter-spacing: .04em;
  transition: opacity .8s var(--ease), bottom 1.5s var(--ease);
  pointer-events: none;
}
.nav-hint[hidden] { display: none; }
.nav-hint.is-out { opacity: 0; }

/* ─────────────────────── Rótulo inferior ─────────────────────── */

.lower {
  position: absolute; left: 34px; bottom: calc(var(--bar) + 26px); z-index: 32;
  display: flex; align-items: flex-start; gap: 16px;
  padding-left: 16px; border-left: 2px solid var(--accent);
  transition: opacity .7s var(--ease), transform .7s var(--ease), bottom 1.5s var(--ease);
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(7,6,5,.8);
}
.lower[hidden] { display: none; }
.lower.is-out { opacity: 0; transform: translateY(10px); }
.lower-num {
  font: 500 .68rem/1.6 ui-monospace, monospace; letter-spacing: .14em;
  color: var(--accent); padding-top: 4px;
}
.lower-title { font: 300 1.9rem/1.1 Fraunces, Georgia, serif; }
.lower-area { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ─────────────────────────── Hotspots ─────────────────────────── */

.hotspot-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

/* El ancla es el PUNTO, no la caja. Centrar el botón entero (translate -50%)
   parecía equivalente —en reposo la caja mide justo los 12px del punto— pero al
   pasar el cursor la etiqueta se abre y la caja crece: con el -50% ese ancho
   nuevo empujaba el punto hacia la izquierda, salía de debajo del cursor, el
   hover se cancelaba, la etiqueta se cerraba y el punto volvía. De ahí el
   temblor. Fijando el desplazamiento en los 6px del radio, la etiqueta crece
   hacia la derecha y el punto no se mueve nunca. */
.hs {
  position: absolute; transform: translate(-6px, -50%);
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center;
  background: none; border: 0; padding: 0; color: var(--paper);
}
.hs__dot {
  position: relative; flex: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 1.5px rgba(9,7,5,.55), 0 4px 12px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.hs__dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(246,241,232,.5);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
.hs__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font: 500 .73rem/1 Inter, sans-serif; letter-spacing: .04em;
  opacity: 0; transition: max-width .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.hs:hover .hs__dot,
.hs.is-active .hs__dot { background: var(--accent); transform: scale(1.3); }
.hs:hover .hs__label,
.hs.is-active .hs__label { max-width: 200px; opacity: 1; padding-left: 12px; }
.hs:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 999px; }
.hs.is-behind { opacity: 0; pointer-events: none; }

.calibrate {
  position: absolute; top: calc(var(--bar) + 12px); left: 50%; transform: translateX(-50%); z-index: 55;
  padding: 8px 16px; border-radius: 999px; background: var(--glass-hi);
  border: 1px solid var(--line); font-size: .72rem; color: var(--accent);
}
.calibrate[hidden] { display: none; }

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 760px) {
  :root { --bar: 15%; }
  body.is-open { --bar: max(4.6%, 46px); }
  .title-seq { align-items: flex-end; padding: 0 7vmin 12vh; background: linear-gradient(180deg, transparent 26%, rgba(9,7,5,.9) 68%); }
  .hud-here, .nav-hint { display: none; }
  .lower { left: 18px; bottom: calc(var(--bar) + 62px); }
  .lower-title { font-size: 1.45rem; }
  .shots { height: auto; bottom: 8px; padding: 6px; background: var(--glass); border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ── Puntos y chips que cruzan a otra panorámica ──────────────────────────
   Un punto que cambia de sitio no puede verse igual que uno que sólo encuadra
   otra parte del mismo cuarto: va en acento, lleno, para que se lea como puerta.
   El chip de regreso usa el mismo acento porque es la salida, no un plano. */
.hs--door .hs__dot { background: var(--accent); }
.hs--door .hs__dot::after { border-color: rgba(243,210,178,.75); }
.shots .chip--door,
.shots .chip--back { color: var(--accent); }
.shots .chip--back { margin-right: 4px; }

/* ─────────────────────── Móvil ─────────────────────── */

.rotate { display: none; }

/* En horizontal el cuadro toma la pantalla completa: en un teléfono no sobra
   ancho para enmarcar nada, y la ampliación sigue por debajo de 1.6x. */
@media (max-width: 900px) and (orientation: landscape) {
  #frame { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; box-shadow: none; }
  /* A pantalla completa el botón de Showroom de la plataforma cae sobre el HUD. */
  .hud-top { padding-left: 196px; }
}

/* En vertical un panorama 2:1 se ve por una rendija: mejor pedir el giro. */
@media (max-width: 900px) and (orientation: portrait) {
  #frame { display: none; }
  .rotate {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 0 12vw; text-align: center; color: var(--paper);
  }
  .rotate svg { color: var(--accent); animation: tip 2.6s var(--ease) infinite; }
  .rotate p { font: 300 1.5rem/1.2 Fraunces, Georgia, serif; }
  .rotate span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}
@keyframes tip {
  0%, 55%, 100% { transform: rotate(0deg); }
  75%           { transform: rotate(-90deg); }
}