/* ---------- Simulación de ambiente (1 unidad = 1 cm) ---------- */
.room {
  --u: calc(100cqw / var(--scene));
  --room-wall: #ebe6de;
  --room-floor: #c9b294;
  container-type: inline-size;
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 4 / 3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 92%, #fff) 0%, var(--room-wall) 70%);
}
.room-dormitorio { --room-wall: #e1e5de; --room-floor: #bfa88a; }
.room-oficina { --room-wall: #e6e4df; --room-floor: #a99a86; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; }

.room-floor {
  position: absolute; inset: auto 0 0 0; height: calc(12 * var(--u));
  background: var(--room-floor); box-shadow: 0 calc(-1.5 * var(--u)) 0 #f7f4ef;
}
.room-furniture {
  position: absolute; left: 50%; bottom: calc(12 * var(--u));
  width: calc(var(--fw) * var(--u)); height: calc(var(--fh) * var(--u));
  transform: translateX(-50%); overflow: visible;
}
.room-furniture.f-plant { left: auto; right: 7%; transform: none; }

.room-art {
  position: absolute; left: 50%;
  bottom: calc(var(--ab) * var(--u));
  width: calc(var(--aw) * var(--u)); height: calc(var(--ah) * var(--u));
  transform: translateX(-50%);
  box-shadow: calc(1.5 * var(--u)) calc(3 * var(--u)) calc(9 * var(--u)) rgb(22 20 18 / 0.28);
}
.room-art .crop { aspect-ratio: auto; height: 100%; }
.room-art[data-frame='black'], .room-art[data-frame='oak'] { padding: calc(4 * var(--u)); background: #fff; }
.room-art[data-frame='black'] { outline: calc(2.5 * var(--u)) solid var(--color-frame-black); }
.room-art[data-frame='oak'] { outline: calc(2.5 * var(--u)) solid var(--color-frame-oak); }

.room-ruler {
  position: absolute; color: var(--color-ink-soft); font-size: clamp(0.55rem, 2.2cqw, 0.7rem);
  letter-spacing: 0.08em; white-space: nowrap; display: flex; align-items: center;
}
.room-ruler-h {
  left: calc(50% + var(--aw) * var(--u) / 2 + 7 * var(--u));
  bottom: calc(var(--ab) * var(--u)); height: calc(var(--ah) * var(--u));
  border-left: 1px solid currentColor; padding-left: 0.35em;
}
.room-ruler-w {
  left: 50%; transform: translateX(-50%); justify-content: center;
  bottom: calc((var(--ab) + var(--ah) + 7) * var(--u)); width: calc(var(--aw) * var(--u));
  border-top: 1px solid currentColor; padding-top: 0.2em; align-items: flex-start; height: 1.6em;
}
.room-tag {
  position: absolute; right: 0.7rem; bottom: calc(12 * var(--u) + 0.5rem); padding: 0.3rem 0.55rem;
  background: rgb(255 255 255 / 0.75); color: var(--color-ink-soft);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- Tarjeta con capa "en sala" al pasar el mouse ---------- */
.shop-item { position: relative; }
.card-media { position: relative; overflow: hidden; }
.card-media .layer { transition: opacity 600ms var(--ease-out-expo); }
.card-media .layer-room { position: absolute; inset: 0; opacity: 0; }
.card-media .layer-room .room { height: 100%; aspect-ratio: auto; }
.card:hover .layer-room, .card:focus-visible .layer-room, .shop-item.is-room .layer-room { opacity: 1; }
.card:hover .layer-art, .card:focus-visible .layer-art, .shop-item.is-room .layer-art { opacity: 0; }

.room-toggle {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  padding: 0.45rem 0.7rem; border: 0; cursor: pointer;
  background: rgb(251 250 247 / 0.9); color: var(--color-ink);
  font: 400 0.62rem/1 var(--font-ui); letter-spacing: var(--track-ui); text-transform: uppercase;
  transition: background var(--duration-fast);
}
.room-toggle:hover { background: var(--color-ink); color: var(--color-paper); }
@media (hover: hover) { .room-toggle { opacity: 0; transition: opacity var(--duration-normal); } .shop-item:hover .room-toggle, .room-toggle:focus-visible { opacity: 1; } }

/* Original en la pared, lienzo sin marco */
.art-wall { container-type: size; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-wall); }
.art-piece {
  aspect-ratio: var(--aw) / var(--ah);
  width: min(78cqw, calc(80cqh * var(--aw) / var(--ah)));
  box-shadow: 0.4rem 0.6rem 1.4rem -0.5rem rgb(22 20 18 / 0.4);
}
.art-piece .crop { aspect-ratio: auto; height: 100%; }

@media (max-width: 560px) { .card-media .room-tag { display: none; } }

/* ---------- Obra sobre foto de ambiente (Firefly) ---------- */
.room.room-shot { container-type: size; background: #e9e4dc; }
.shot-frame {
  --fw: max(100cqw, 175cqh);
  position: absolute; width: var(--fw); aspect-ratio: 1344 / 768;
  left: clamp(calc(100cqw - var(--fw)), calc(50cqw - var(--cx) * var(--fw) / 100), 0px);
  top: clamp(calc(100cqh - var(--fw) / 1.75), calc(50cqh - var(--cy) * var(--fw) / 175), 0px);
}
.shot-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot-art { position: absolute; overflow: hidden; }
.shot-art .crop { aspect-ratio: auto; height: 100%; }
.shot-light { mix-blend-mode: multiply; pointer-events: none; }
.shot-fg { pointer-events: none; }

/* ---------- Proporción: obra junto a una persona de 1,70 m ---------- */
.room.room-scale { --room-wall: #f3f3f1; --room-floor: #d9d4cb; background: var(--room-wall); }
.scale-art {
  position: absolute; left: calc(var(--al) * var(--u)); bottom: calc((var(--ab) + 12) * var(--u));
  width: calc(var(--aw) * var(--u)); height: calc(var(--ah) * var(--u));
  box-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / 0.25);
}
.scale-art .crop { aspect-ratio: auto; height: 100%; }
.scale-person {
  position: absolute; left: calc(var(--pl) * var(--u)); bottom: calc(12 * var(--u));
  width: calc(48 * var(--u)); height: calc(170 * var(--u)); color: #8a9a90;
}
.scale-label { position: absolute; font-size: clamp(0.7rem, 2.6cqw, 0.95rem); letter-spacing: 0.06em; color: var(--color-ink); white-space: nowrap; }
.scale-label-art { left: calc(var(--al) * var(--u)); bottom: calc((var(--ab) + var(--ah) + 16) * var(--u)); }
.scale-label-person { left: calc(var(--pl) * var(--u)); bottom: calc(188 * var(--u)); }