/* archivo: css/habitaciones.css */
.page-hero { position: relative; height: 50vh; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; overflow: hidden; margin-top: -80px; padding-top: 80px; }
.page-hero .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.page-hero .hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 20px; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; margin-bottom: 15px; }
.page-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero p { font-size: 1.1rem; opacity: 0.9; }

.rooms-page-section { background: var(--off-white); padding: 60px 48px 100px; position: relative; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.room-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(22,50,91,0.09); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; display: flex; flex-direction: column; }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(22,50,91,0.16); }
.room-img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.room-card:hover .room-img { transform: scale(1.04); }
.room-img-wrap { overflow: hidden; }
.room-body { padding: 26px 30px 30px; flex: 1; display: flex; flex-direction: column; }
.room-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.room-title { font-size: 1.6rem; color: var(--navy); font-weight: 700; margin-bottom: 15px; }
.room-features { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.feat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--navy); background: rgba(22,50,91,0.05); padding: 6px 12px; border-radius: 6px; font-weight: 600; }

.room-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #f0ece5; }
.room-price { font-size: 0.85rem; color: var(--text-light); }
.room-price strong { display: block; font-size: 1.5rem; color: var(--navy); font-family: 'Playfair Display', serif; }
.btn-view { background: var(--gold); color: #fff; border: none; padding: 12px 24px; border-radius: 999px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: 0.3s; }
.btn-view:hover { background: var(--gold-dark); transform: translateY(-2px); }

@media (max-width: 1024px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .rooms-page-section { padding: 60px 20px 80px; } .rooms-grid { grid-template-columns: 1fr; } .page-hero h1 { font-size: 2.5rem; } }

/* --- ESTILOS DEL LIGHTBOX (GALERÍA INTERACTIVA DE HABITACIONES) --- */
.room-img-wrap { position: relative; cursor: pointer; overflow: hidden; }
.gallery-indicator { position: absolute; bottom: 15px; right: 15px; background: rgba(22, 50, 91, 0.85); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; display: flex; align-items: center; gap: 5px; pointer-events: none; transition: all 0.3s ease; }
.room-img-wrap:hover .gallery-indicator { background: #F5A623; transform: scale(1.05); }

.lightbox-modal { position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightbox-modal.active { opacity: 1; pointer-events: auto; }
.lightbox-content { max-width: 90%; max-height: 85vh; border-radius: 6px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); object-fit: contain; transition: transform 0.3s ease; }

.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 45px; font-weight: 300; cursor: pointer; z-index: 100000; transition: color 0.3s; }
.lightbox-close:hover { color: #F5A623; }

.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 40px; cursor: pointer; padding: 15px 25px; user-select: none; z-index: 100000; background: rgba(255,255,255,0.1); border-radius: 4px; transition: background 0.3s; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.room-desc { 
    font-size: 0.95rem; 
    color: var(--text-light); 
    line-height: 1.65; 
    flex: 1; 
    margin-bottom: 25px; 
    /* --- NUEVO: Control de Desbordamiento --- */
    max-height: 90px; /* Limita la altura a aprox. 3 líneas y media */
    overflow-y: auto; /* Habilita el scroll vertical solo si es necesario */
    padding-right: 10px; /* Evita que el texto se pegue a la barra de scroll */
}
/* --- NUEVO: Diseño del Scrollbar interno para .room-desc --- */
.room-desc::-webkit-scrollbar {
    width: 5px; /* Hace la barra muy delgada */
}
.room-desc::-webkit-scrollbar-track {
    background: #f0ece5; /* Usa el mismo gris claro de tu border-top */
    border-radius: 10px;
}
.room-desc::-webkit-scrollbar-thumb {
    background: var(--gold); /* Usa el dorado de tu tema */
    border-radius: 10px;
}
.room-desc::-webkit-scrollbar-thumb:hover {
    background: var(--navy); /* Cambia al azul marino al pasar el cursor */
}