/* Casa Sierra · recorrido 360° — RÜM Showroom
   HUD de visor: tira de espacios, píldoras de hotspot sobre la panorámica y
   el render de detalle que abre cada punto. */

:root {
  --paper:    #f6f1e8;
  --muted:    rgba(246,241,232,.62);
  --accent:   #f3d2b2;
  --glass:    rgba(18,14,10,.46);
  --glass-hi: rgba(14,11,8,.82);
  --line:     rgba(246,241,232,.16);
  --shadow:   0 18px 44px rgba(0,0,0,.42);
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-film: cubic-bezier(.22,.82,.18,1);
  --pad:      clamp(14px, 2.2vw, 28px);
}

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

/* Esto es un visor, no un documento: arrastrar tiene que girar la vista, no
   seleccionar el nombre del espacio. Sin esto, cualquier arrastre que empiece
   sobre el HUD deja el título resaltado en azul. */
#frame, #frame * { user-select: none; -webkit-user-select: none; }

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.
 *
 * Ojo: el cuadro NO era el techo de la nitidez. El motor recortaba la
 * panorámica a 4096 px antes de subirla a la GPU, así que achicar el cuadro
 * sólo movía la ampliación de sitio. Eso se resuelve en app.js —textura
 * completa y supermuestreo—; 1280 se queda porque enmarcado se lee como una
 * toma y no como un fondo de escritorio.
 */
#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; }

/* Viñeta: sostiene el texto del HUD contra cielos claros. */
.vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,6,5,.66) 0%, rgba(7,6,5,0) 28%),
    linear-gradient(to top,    rgba(7,6,5,.62) 0%, rgba(7,6,5,0) 30%);
}

/* ─────────────────────────── 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); } }

/* ─────────────────────────── Portada ─────────────────────────── */

.cover {
  position: absolute; inset: 0; z-index: 80;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: var(--pad);
  background: linear-gradient(to bottom, rgba(7,6,5,.62), rgba(7,6,5,.42) 45%, rgba(7,6,5,.78));
  transition: opacity 1s var(--ease);
}
.cover.is-out { opacity: 0; pointer-events: none; }
.cover[hidden] { display: none; }
.cover-kicker {
  display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.cover-name {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.9rem, 7.6vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* La firma cae sobre cielo abierto: el color solo no la sostiene. El acento
   la ancla al barro apisonado y la sombra la recorta igual contra el cielo
   claro y contra el interior en sombra, sin subirla a rango de título. */
.cover-tag {
  margin: 14px 0 32px;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 1px rgba(7,6,5,.55), 0 0 16px rgba(7,6,5,.6);
}

/* Portada: el kicker abre el encuadre, el nombre se contrae como un título de
   toma (tracking ancho que asienta, sin fundido) y la firma y el botón
   cierran la secuencia. backwards para que el tracking ancho se vea en la
   espera y, al terminar, el botón recupere su hover. */
.cover-kicker { animation: cover-in .8s var(--ease) .12s backwards; }
.cover-name   { animation: cover-title-settle 1.2s var(--ease) .28s backwards; }
.cover-tag    { animation: cover-in .8s var(--ease) 1.15s backwards; }
.btn-primary  { animation: cover-in .8s var(--ease) 1.4s backwards; }
@keyframes cover-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cover-title-settle {
  from { letter-spacing: .18em; }
  to   { letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-kicker,
  .cover-name,
  .cover-tag,
  .btn-primary { animation: none; }
  .detail-scrim,
  .detail-card { animation: none; }
  .detail-shot img,
  .detail-shot video,
  .detail-card figcaption { transition: none; transform: none; }
  .detail-shot img,
  .detail-shot video { opacity: 1; }
  .detail-card figcaption { opacity: 1; }
}
.btn-primary {
  border: 0; cursor: pointer; font: 500 .84rem/1 Inter, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px;
  background: var(--accent); color: #1b1409;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243,210,178,.28); }

/* ───────────────── Entrada: el encuadre se abre ─────────────────
   La portada ya está en scope: las barras entran cerradas y el click las
   retira. Abrir el cuadro mientras la cámara vuela y la lente pasa de 86° a
   70° se lee como una toma que se abre; cerrar y volver a abrir, que es lo
   que hacía antes, no contaba nada.

   El alto sale de la misma cuenta que el cuadro —min(ancho·9/16, 100vh)— en
   vez de un porcentaje: un `height` en porcentaje no resuelve contra un
   contenedor cuya altura viene de `aspect-ratio` y las barras se quedaban en
   cero. Por encima de la portada (z 80) para que el encuadre se vea desde el
   principio; por debajo del loader (z 90). */
.bar {
  position: absolute; left: 0; right: 0; z-index: 85;
  height: calc(min(min(1280px, 100vw) * 0.5625, 100vh) * 0.13);
  background: #070605; pointer-events: none;
  transition: height 1.4s var(--ease);
}
.bar--top { top: 0; }
.bar--bottom { bottom: 0; }
body.is-open .bar { height: 0; }

/* El panorama entra ligeramente ampliado y se asienta: un dolly corto. */
body.is-entering #stage { animation: settle 1.4s var(--ease) both; }
@keyframes settle {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

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

.hud {
  position: absolute; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--pad); gap: 14px; pointer-events: none;
  animation: fade-in .8s var(--ease) both;
}
.hud[hidden] { display: none; }
/* El chip "‹ RÜM Showroom" que inyecta showroom-back.js se fija a la esquina de
   la página, no del cuadro: en pantallas grandes cae sobre el fondo negro, pero
   en cuanto el encuadre se acerca al borde le pisa la esquina. El bloque de
   marca arranca por debajo para no encimarse con él en ningún tamaño. */
.hud-left { display: grid; gap: 2px; padding-top: 34px; }
.brand { font-size: 1.2rem; }
.brand-sub { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hud-right { display: flex; gap: 8px; pointer-events: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--paper); cursor: pointer;
  font: 500 .74rem/1 Inter, sans-serif; letter-spacing: .05em;
  padding: 10px 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pill:hover { background: var(--glass-hi); border-color: rgba(246,241,232,.32); }
.pill[aria-pressed="false"] { color: var(--muted); }
.pill--icon { padding: 10px; }

/* Nombre del espacio: manda sobre el resto del HUD. */
.space-title {
  position: absolute; z-index: 40;
  left: var(--pad); top: calc(var(--pad) + 92px);
  font-family: Fraunces, Georgia, serif; font-weight: 300;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
  pointer-events: none;
}
.space-meta {
  position: absolute; z-index: 40;
  left: var(--pad); top: calc(var(--pad) + 102px + clamp(2.1rem, 4.6vw, 3.4rem));
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); pointer-events: none;
}
.space-title[hidden], .space-meta[hidden] { display: none; }

/* Rótulo de llegada. Al entrar a un espacio el nombre se descubre de abajo
   hacia arriba —como si se revelara tras una máscara— y los m² entran después,
   cerrando el espaciado. Es la misma animación al abrir el recorrido y en cada
   salto, sólo que al abrir espera a que el encuadre termine. */
.space-title.is-swap { animation: title-in .95s var(--ease) both; }
.space-meta.is-swap  { animation: meta-in .75s var(--ease) .3s both; }

@keyframes title-in {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 -20% 0); }
}
@keyframes meta-in {
  from { opacity: 0; transform: translateY(9px); letter-spacing: .34em; }
  to   { opacity: 1; transform: none;            letter-spacing: .14em; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* El HUD espera a que el encuadre termine de ajustarse. */
body.is-entering .hud,
body.is-entering .sheet,
body.is-entering .hint { animation: fade-in .8s var(--ease) .85s both; }
body.is-entering .space-title { animation: title-in .95s var(--ease) .85s both; }
body.is-entering .space-meta  { animation: meta-in .75s var(--ease) 1.15s both; }

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

.hotspot-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.hs {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass-hi);
  color: var(--paper); cursor: pointer; pointer-events: auto;
  font: 500 .74rem/1 Inter, sans-serif; letter-spacing: .04em; white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), opacity .3s var(--ease);
}
.hs:hover { background: var(--glass-hi); transform: translate(-50%, -50%) scale(1.05); }
.hs.is-behind,
.hs.is-occluded { opacity: 0; pointer-events: none; }
.hs.is-active { border-color: var(--accent); }
.hs__dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 4px rgba(246,241,232,.18);
  flex: none;
}
.hs--door .hs__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(243,210,178,.24); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(243,210,178,.24); } 50% { box-shadow: 0 0 0 10px rgba(243,210,178,0); } }

/* ─────────────────────────── Pista ─────────────────────────── */

.hint {
  position: absolute; z-index: 35; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--pad) + 202px);
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--muted); font-size: .74rem; letter-spacing: .1em;
  transition: opacity .8s var(--ease); pointer-events: none;
}
.hint[hidden] { display: none; }
.hint.is-out { opacity: 0; }

/* ─────────────────── Tira de espacios ─────────────────── */

.sheet {
  position: absolute; z-index: 40; left: 0; right: 0; bottom: 0;
  padding: 14px var(--pad) var(--pad);
  background: linear-gradient(to top, rgba(7,6,5,.86), rgba(7,6,5,0));
  animation: fade-in .8s var(--ease) both;
}
.sheet[hidden] { display: none; }
/* La cabecera es el control: plegada, la tira queda en una píldora y el cuarto
   se ve entero; desplegada, aparecen las miniaturas. Arranca plegada. */
.sheet-head {
  display: inline-flex; align-items: center; gap: 10px; width: max-content;
  margin-bottom: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--muted); cursor: pointer;
  font: 500 .74rem/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.sheet-head:hover { background: var(--glass-hi); color: var(--paper); border-color: rgba(246,241,232,.32); }
.sheet-count { font-size: .7rem; letter-spacing: .12em; color: var(--muted); }
.sheet-chevron { transition: transform .3s var(--ease); }
.sheet.is-min .sheet-chevron { transform: rotate(180deg); }
.sheet.is-min .sheet-rail { display: none; }
.sheet.is-min { background: none; padding-bottom: var(--pad); }

.sheet-rail {
  display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
}
.sheet-rail::-webkit-scrollbar { display: none; }

.card {
  flex: none; width: 118px; border: 0; padding: 0; background: none;
  cursor: pointer; text-align: left; color: var(--paper);
  opacity: .72; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover { opacity: 1; transform: translateY(-3px); }
.card.is-active { opacity: 1; }
.card-shot {
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
  background: #17120c;
  overflow: hidden;
  border: 1px solid transparent; box-shadow: 0 8px 22px rgba(0,0,0,.4);
  transition: border-color .3s var(--ease);
}
.card-shot canvas { display: block; width: 100%; height: 100%; }
.card.is-active .card-shot { border-color: var(--accent); }

.card-name {
  display: block; margin-top: 7px;
  font: 500 .72rem/1.3 Inter, sans-serif; letter-spacing: .04em;
}
.card-step { display: block; font-size: .62rem; letter-spacing: .12em; color: var(--muted); }

/* ─────────────────────────── Vertical ─────────────────────────── */

.rotate { display: none; }

@media (max-width: 820px) {
  .card { width: 96px; }
  .hint { bottom: calc(var(--pad) + 190px); font-size: .68rem; }
}

@media (orientation: portrait) and (max-width: 900px) {
  #frame, .rotate { }
  .rotate {
    position: fixed; inset: 0; z-index: 200; display: grid;
    place-content: center; justify-items: center; gap: 12px; text-align: center;
    background: #070605; color: var(--paper); padding: 30px;
  }
  .rotate p { font-family: Fraunces, Georgia, serif; font-size: 1.3rem; }
  .rotate span { font-size: .78rem; color: var(--muted); max-width: 26ch; }
}

/* Wordmark RÜM only — Baloo 2. The rest of the HUD keeps Inter / Fraunces. */
.rum-mark {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
.cover-tag .rum-mark {
  letter-spacing: .05em; font-size: 1.06em;
  color: var(--paper);
}
.rum-rum-widget__core span {
  font-family: "Baloo 2", system-ui, sans-serif !important;
  font-weight: 800;
}

/* ─────────────────── Detalle: el render del punto ───────────────────
   Continúa el encuadre, no aterriza un panel. El origen lo pone el JS en
   el punto; el still / video emerge de esa toma y el pie llega después. */

.detail { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; }
.detail[hidden] { display: none; }

.detail-scrim {
  position: absolute; inset: 0;
  background: rgba(7,6,5,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: detail-scrim-in 1.05s var(--ease-film) both;
  cursor: zoom-out;
}
@keyframes detail-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.detail-card {
  position: relative;
  width: min(78%, 900px);
  /* La ficha toma la proporción del close-up, pero nunca más alta que el
     cuadro: con un retrato como el de la silla, el pie con el título y el
     cierre se salían de pantalla. */
  max-height: 88%;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: var(--glass-hi);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  animation: detail-card-in 1.1s var(--ease-film) both;
}
@keyframes detail-card-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
.detail.is-out .detail-card { animation: detail-card-out .72s var(--ease-film) both; }
.detail.is-out .detail-scrim { animation: detail-scrim-out .72s var(--ease-film) both; }
@keyframes detail-card-out { to { opacity: 0; transform: scale(.94); } }
@keyframes detail-scrim-out { to { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.detail-shot {
  position: relative; aspect-ratio: 16 / 9; min-height: 0; flex: 1 1 auto;
  background: #17120c; display: grid; place-items: center;
}
.detail-shot img,
.detail-shot video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s var(--ease-film), transform 1.15s var(--ease-film);
  background: #17120c;
}
.detail-shot img.is-in,
.detail-shot video.is-in { opacity: 1; transform: scale(1); }
.detail-shot video { z-index: 1; }
.detail-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(246,241,232,.13); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
.detail-spin[hidden] { display: none; }

.detail-card figcaption {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease-film), transform .55s var(--ease-film);
}
.detail.is-ready .detail-card figcaption {
  opacity: 1;
  transform: none;
}
.detail.is-out .detail-card figcaption {
  opacity: 0;
  transform: translateY(6px);
  transition-duration: .28s;
}
.detail-card h3 { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.3rem; line-height: 1.1; }
.detail-card p { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
/* Tira de variantes: la misma vista a distintas horas, sin cerrar la ficha. */
.detail-variants { display: flex; gap: 6px; margin-left: auto; margin-right: 4px; }
.detail-variants[hidden] { display: none; }
.vchip {
  border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer;
  font: 500 .68rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 13px;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.vchip:hover { color: var(--paper); }
.vchip.is-on { color: #1b1409; background: var(--accent); border-color: var(--accent); }

.detail-close {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--paper);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease);
}
.detail-close:hover { background: rgba(246,241,232,.1); }

/* Un punto con render detrás se anuncia: el anillo del dot late más ancho. */
.hs--detail .hs__dot { box-shadow: 0 0 0 4px rgba(246,241,232,.18), 0 0 0 7px rgba(243,210,178,.22); }

@media (max-width: 820px) {
  .detail-card { width: min(90%, 560px); }
  .detail-card h3 { font-size: 1.05rem; }
}

/* ─────────────────────────── Calibración ─────────────────────────── */

.calibrate {
  position: absolute; z-index: 95; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 9px 14px; border-radius: 8px; background: rgba(7,6,5,.8);
  border: 1px solid var(--line); font: 500 .78rem Inter, monospace; letter-spacing: .04em;
}
.calibrate[hidden] { display: none; }