/* =========================
   ROOMS · LAYOUT GENERAL
   ========================= */
.section--rooms .rooms__grid{
  display: grid;
  grid-template-columns: 1fr;      /* 1 habitación por fila */
  gap: 2.4rem;
  padding-top: 25px;
}
@media (min-width: 900px){
  .section--rooms .rooms__grid{ grid-template-columns: 1fr; }
}

/* =========================
   TARJETA HORIZONTAL
   ========================= */
.room-card{
  display: grid;
  grid-template-columns: 0.9fr 1.6fr; /* imagen más ancha (~36%) | texto */
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  min-height: 400px;                 /* altura cómoda */
}

/* Bloque media */
.room-card__media{
  position: relative;
  padding: 12px 16px;                /* “marco” interior */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding-right: 40px;
}

/* =========================
   CARRUSEL (estructura)
   ========================= */
.room-carousel{
  position: relative;
  flex: 1;                           /* llena el alto del contenedor media */
  width: 100%;
  height: 100%;
  display: grid;                     /* superponer slides */
  border-radius: 14px;               /* suave por detrás del frame */
  overflow: visible;                 /* el recorte lo hace .media-frame */
}

.room-carousel__track{
  list-style: none; margin: 0; padding: 0;
  width: 100%; height: 100%;
  display: grid;
}
.room-carousel__slide{
  grid-area: 1 / 1;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.room-carousel__slide.is-active{
  opacity: 1; pointer-events: auto;
}

/* =========================
   ÁREA RESERVADA DE IMAGEN
   ========================= */
.media-frame{
  width: 100%;
  aspect-ratio: 4 / 3;               /* espacio reservado constante */
  max-height: 320px;                 /* límite sano para la tarjeta */
  border-radius: 18px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 20px 20px 14px;
}

/* Comportamiento por defecto: horizontales llenan el marco */
.media-frame img{
  width: 100%; height: 100%;
  object-fit: cover;                 /* cubrir sin distorsión */
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Verticales: se contienen y dejan espacio libre */
.room-carousel__slide.is-portrait .media-frame img{
  object-fit: contain;
  border-radius: inherit; 
}

/* =========================
   CONTENIDO
   ========================= */
.room-card__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;       /* empieza arriba */
  align-items: flex-start;
  padding: 1.8rem 2rem;
  gap: 0.9rem;
}

/* Tipografía */
.room-card__body h2{
  font-size: clamp(1.45rem, 2vw + 0.5rem, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 0.4rem;
  background: linear-gradient(to bottom, #F8E1E9 0%, #F8E1E9 100%);
  background-position: left;
  background-size: 90% 45px;
}
.room-card__body p{
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  text-align: justify;
}
.room-card__bullets{ margin: .6rem 0 1rem; padding-left: 1.2rem; }
.room-card__bullets li{
  font-size: 1.02rem; line-height: 1.55; color: var(--text-main);
}

/* Botón (usa estilos globales) */
.room-card__body .btn{
  width: auto;
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 999px;
}

/* =========================
   CONTROLES CARRUSEL
   ========================= */
.room-carousel__btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--color-white);
  box-shadow: var(--shadow-1); font-weight: 800; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
}
/* Nota: usamos 26px para respetar el padding de .room-card__media */
.room-carousel__btn.prev{ left: 26px; }
.room-carousel__btn.next{ right: 26px; }

.room-carousel__dots{
  position: absolute; left: 0; right: 0; bottom: .6rem;
  display: flex; gap: .4rem; justify-content: center;
}
.room-carousel__dots button{
  width: 10px; height: 10px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.3); cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.room-carousel__dots button.is-active{
  background: rgba(0,0,0,.75);
  transform: scale(1.3);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 800px){
  .room-card{
    grid-template-columns: 1fr;      /* carrusel arriba, texto abajo */
    min-height: 0;
  }
  .room-card__media{ padding: 8px; }
  .media-frame{
    aspect-ratio: 16 / 10;           /* proporción más panorámica en móvil */
    max-height: 260px;
    border-radius: 12px;
  }

   .room-card{
    grid-template-columns: 1fr;      /* carrusel arriba, texto abajo */
    min-height: 0;
  }

  .room-card__media{
    padding: 8px;                    /* mismo padding a ambos lados */
  }

  /* Área de imagen más limpia y centrada */
  .media-frame{
    width: 100%;
    aspect-ratio: 4 / 3;             /* proporción estable */
    max-height: 260px;
    border-radius: 12px;
    padding: 0;                      /* quitamos padding que la descentraba */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .media-frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;               /* llena el marco sin deformarse */
    object-position: center;
    display: block;
  }

  /* 🔹 Ocultar descripción en móvil */
  .room-card__body p{
    display: none;
  }
}