/* ============================================================
   apARTment Madrid — Página HABITACIONES (frame Figma 5:801)
   Mismo sistema de "lienzo escalable" que la landing, pero con
   relación de aspecto 1920/5335. Importar DESPUÉS de styles.css.
   ============================================================ */

/* Altura del frame de Habitaciones */
.stage-rooms{aspect-ratio:1920/5335;}

/* Utilidad extra: 25px (specs) = 25/19.2 cqw */
.s25{font-size:1.302cqw;letter-spacing:-0.052cqw;}

/* ---------- Collage superior (marcos dorados + acuarela) ---------- */
.watercolor{object-fit:cover;}
.frame-art{position:absolute;transform:rotate(var(--rot,0deg));transform-origin:50% 0;}
.frame-art img{width:100%;height:auto;display:block;}

/* Trazo rojo "a mano alzada" que se dibuja alrededor del cuadro al pasar el ratón */
.frame-scribble{position:absolute;left:-9%;top:-6%;width:118%;height:112%;z-index:3;
  pointer-events:none;overflow:visible;}
.frame-scribble path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}

@media (prefers-reduced-motion: no-preference){
  /* Balanceo de cuadro colgado (como si lo rozaras en una galería) */
  .frame-art:hover{animation:frame-swing 1.7s cubic-bezier(.28,.6,.36,1);}
  .frame-art:hover .frame-scribble path{animation:scribble-draw .85s ease-out forwards;}
}

@keyframes frame-swing{
  0%  {transform:rotate(var(--rot,0deg));}
  16% {transform:rotate(calc(var(--rot,0deg) + 2.6deg));}
  40% {transform:rotate(calc(var(--rot,0deg) - 1.9deg));}
  64% {transform:rotate(calc(var(--rot,0deg) + 1.1deg));}
  84% {transform:rotate(calc(var(--rot,0deg) - 0.5deg));}
  100%{transform:rotate(var(--rot,0deg));}
}

@keyframes scribble-draw{
  0%  {opacity:1;stroke-dashoffset:1;}
  100%{opacity:1;stroke-dashoffset:0;}
}

/* ---------- Etiqueta nombre completo del pintor ---------- */
.room-label{white-space:nowrap;}

/* ---------- Descripción ---------- */
.room-desc{line-height:1.3;}

/* ---------- Ficha de specs (2 columnas × 2 filas) ---------- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0.9cqw 1.2cqw;align-content:center;}
.spec{display:flex;align-items:center;gap:0.7cqw;}
.spec img{width:2.2cqw;height:2.2cqw;object-fit:contain;flex:none;}
.spec span{font-size:1.302cqw;letter-spacing:-0.052cqw;white-space:nowrap;}

/* ---------- Botón RESERVAR de cada unidad ---------- */
.reserve-btn{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;
  border-radius:0.26cqw;font-weight:800;letter-spacing:-0.04cqw;font-size:1.042cqw;transition:background .15s;}
.reserve-btn:hover{background:#222;}

/* ---------- Slider de fotos del interior ---------- */
.slider{overflow:hidden;border-radius:0.4cqw;}
.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;}
.slider .slide.is-active{opacity:1;}
.slider .slide img{width:100%;height:100%;object-fit:cover;display:block;}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:3cqw;height:3cqw;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.6cqw;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s;}
.slider-prev:hover,.slider-next:hover{background:#000;}
.slider-prev{left:1cqw;}
.slider-next{right:1cqw;}

/* ---------- Trazos rojos decorativos ---------- */
.scribble{position:absolute;pointer-events:none;}
.scribble img{width:100%;height:auto;display:block;}

/* ============================================================
   LAYOUT MÓVIL — HABITACIONES (tarjetas verticales)
   ============================================================ */
@media (max-width:768px){
  .m-room{border-top:2px solid #000;padding:1.8rem 0;}
  .m-room:first-of-type{border-top:0;}
  .m-room .m-room-slider{position:relative;border-radius:8px;overflow:hidden;margin-bottom:1rem;}
  .m-room .m-room-slider .slide{position:relative;inset:auto;opacity:1;display:none;}
  .m-room .m-room-slider .slide.is-active{display:block;}
  .m-room .m-room-slider .slide img{width:100%;height:auto;display:block;}
  .m-room .m-room-slider .slider-prev,
  .m-room .m-room-slider .slider-next{width:40px;height:40px;font-size:1.4rem;}
  .m-room .m-num{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1;}
  .m-room .m-fullname{font-weight:700;letter-spacing:.02em;margin:.2rem 0 .6rem;font-size:.95rem;}
  .m-room .m-desc{line-height:1.45;color:#222;margin-bottom:1rem;}
  .m-room .m-specs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;margin-bottom:1.2rem;}
  .m-room .m-spec{display:flex;align-items:center;gap:.5rem;font-weight:500;}
  .m-room .m-spec img{width:26px;height:26px;object-fit:contain;}
  .m-room .m-reserve{display:flex;align-items:center;justify-content:center;background:#000;color:#fff;
    min-height:48px;border-radius:5px;font-weight:800;letter-spacing:-.02em;}
  .m-rooms-title{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.4rem;}
  .m-rooms-title .sub{color:var(--gray);font-size:1.4rem;margin-left:.3rem;}
}