/* Habitacion */

     .room-display {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%; /* Asegura que el contenedor padre ocupe todo el ancho disponible */
        
    }
    
    .image-container {
        width: 100%;
        height: 400px; /* Ajusta la altura según necesites */
        background-size: cover;
        background-position: center;
        
    }
    
    .description {
        padding: 20px;
        background-color: rgb(255, 255, 255); /* Color de fondo semitransparente */
        color: rgb(45, 44, 44); /* Color del texto */
        margin-top: 50px; /* Espacio entre el título y la descripción */
        width: 80%; /* Ajusta el ancho para centrar el texto más efectivamente */
        margin: 0 auto; /* Centra el contenedor horizontalmente en su contenedor padre */
        text-align: center; /* Asegura que todo el texto esté centrado */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06); /* Una sombra suave para hacer que el contenedor se destaque ligeramente */
        border-radius: 5px; /* Bordes ligeramente redondeados para una estética suave */
    
    }
    
    .room-display .description h2 {
        font-family: 'Amiri', serif;
        font-weight: normal; /* O 'bold' si necesitas que sea más gruesa */
        font-style: normal; /* O 'italic' si deseas cursiva */
        letter-spacing: 1px; /* Ajusta el espaciado entre letras */
        font-size: 60px; /* Incrementa el tamaño de la fuente según necesites */
        margin: 0; /* Elimina márgenes por defecto para el título */

        
    }
    
  
    
    .room-display .description p {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px; /* Ajusta según tus necesidades */
        color: #333; /* Ajusta el color de texto según tus preferencias */
        line-height: 1.6; /* Ajusta el espacio entre líneas para mejorar la legibilidad */
        text-align: center; /* Esto hará que el texto se justifique */
    }
 
 
    /* SUIT */
    
    .suite-section {
        display: flex;
        align-items: center;
        margin-top: 20px; /* Espacio entre bloques */
        background-color: #fff; /* Fondo blanco para visibilidad */
        justify-content: space-between; /* Distribuye el espacio entre y alrededor de los elementos */
        margin-top: 20px; /* Espacio adicional en la parte superior si es necesario */
    }
    
    .suite-image {
        width: 50%;
        height: auto;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* Aplica la sombra */
        margin-right: 30px; 
    }
    
    .suite-content {
        width: 50%;
        padding: 20px;
        text-align: left;
    }
    
    .suite-content h2 {
        color: #b71c1c; /* Color negro */
        font-family: "Roboto", sans-serif; /* Fuente Roboto, asegúrate de importarla si aún no lo has hecho */
        font-size: 40px; /* Tamaño de fuente grande para mayor impacto visual */
        font-weight: 400; /* Peso normal de la fuente */
        text-transform: uppercase; /* Transforma el texto a mayúsculas */
        letter-spacing: -1.6px; /* Reduce el espaciado entre letras para un efecto más compacto */
        word-spacing: 0px; /* Espaciado normal entre palabras */
        margin-bottom: 10px; /* Añade espacio debajo del título */
    }
    
    
    .suite-content p {
        text-align: left; /* Alinea el texto a la izquierda */
        color: #000000; /* Establece el color del texto a negro */
        font-family: "Montserrat", sans-serif; /* Usa la fuente Montserrat */
        font-size: 15px; /* Tamaño de fuente para la descripción */
        font-weight: 300; /* Peso de fuente ligero para la descripción */
        line-height: 1.5em; /* Espacio entre líneas para mejorar la legibilidad */
        width: 64%; /* Ancho del contenedor del texto */
        max-width: 64%; /* Máximo ancho permitido */
    }
    
    /* Si estás usando variables CSS para el ancho y quieres mantener la flexibilidad de diseño */
    :root {
        --container-widget-width: 64%;
        --container-widget-flex-grow: 0;
    }
    
    
    
    .details-button {
        background-color: transparent; /* Fondo transparente inicialmente */
        color: #FF4500; /* Color del texto naranja */
        border: none;
        padding: 10px 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease; /* Suaviza la transición de todos los cambios */
    }
    
    .details-button:hover {
        background-color: #FF4500; /* Fondo naranja al pasar el mouse */
        color: white; /* Texto blanco al pasar el mouse */
    }

    .arrow-icon {
        margin-left: 10px;
        font-size: 20px;
        transition: transform 0.3s ease; /* Anima el giro de la flecha */
    }

    .details-button:hover .arrow-icon {
        transform: translateX(5px); /* Mueve la flecha hacia la derecha al pasar el mouse */
    }
    
    @media (max-width: 768px) {
        .suite-section {
            flex-direction: column; /* Cambia a un layout vertical en pantallas pequeñas */
        }
    
        .suite-image {
            width: 100%; /* La imagen ocupa todo el ancho disponible */
            margin-right: 0; /* Elimina el margen derecho en layout vertical */
        }
    
        .suite-content {
            width: 100%; /* El contenido ocupa todo el ancho disponible */
            padding: 10px; /* Ajusta el padding para pantallas más pequeñas */
        }
    }
    


 /* SUIT2 */
    
 


.suite-section2 {
    display: block;
    align-items: center;
    justify-content: space-between;
    background-color: #b71c1c; /* Fondo oscuro para el contenedor */
    padding: 30px;
    position: relative; /* Importante para el posicionamiento absoluto de la imagen */
    overflow: visible; /* Permite que la imagen sobresalga */
    
}


.suite-image2 {
    width: 46%; /* Reduce el ancho para acercar la imagen al texto */
    position: absolute; /* Mantiene el posicionamiento absoluto */
    right: 10%; /* Aumenta la distancia del borde derecho para dejar espacio */
    top: 50%;
    transform: translateY(-50%); /* Mantiene la imagen centrada verticalmente */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Mantiene la sombra */
}


.suite-content2 {
    width: 50%; /* Ajusta esto según sea necesario */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Asegura que el contenido esté centrado verticalmente */
    align-items: start; /* Alinea el contenido a la izquierda */
    background-color: #b71c1c; /* Transparencia para integrar con la imagen */
    border-radius: 5px; /* Estética */
    margin-right: 10%; /* Espacio entre el contenido y la imagen */
}

.suite-content2 h2 {
    color: #ffffff; /* Color negro */
    font-family: "Roboto", sans-serif; /* Fuente Roboto, asegúrate de importarla si aún no lo has hecho */
    font-size: 40px; /* Tamaño de fuente grande para mayor impacto visual */
    font-weight: 400; /* Peso normal de la fuente */
    text-transform: uppercase; /* Transforma el texto a mayúsculas */
    letter-spacing: -1.6px; /* Reduce el espaciado entre letras para un efecto más compacto */
    word-spacing: 0px; /* Espaciado normal entre palabras */
    margin-bottom: 10px; /* Añade espacio debajo del título */
}


.suite-content2 p {
    text-align: left; /* Alinea el texto a la izquierda */
    color: #ffffff; /* Establece el color del texto a negro */
    font-family: "Montserrat", sans-serif; /* Usa la fuente Montserrat */
    font-size: 15px; /* Tamaño de fuente para la descripción */
    font-weight: 300; /* Peso de fuente ligero para la descripción */
    line-height: 1.5em; /* Espacio entre líneas para mejorar la legibilidad */
    width: 64%; /* Ancho del contenedor del texto */
    max-width: 64%; /* Máximo ancho permitido */
}

/* Si estás usando variables CSS para el ancho y quieres mantener la flexibilidad de diseño */
:root {
    --container-widget-width: 64%;
    --container-widget-flex-grow: 0;
}



.details-button2 {
    background-color: #FF4500; /* Color naranja brillante para el fondo */
    color: white; /* Texto blanco para contraste */
    border: none; /* No border */
    padding: 10px 20px; /* Padding interior para tamaño adecuado */
    font-family: 'Open Sans', sans-serif; /* Fuente clara y legible */
    font-size: 16px; /* Tamaño de fuente óptimo */
    cursor: pointer; /* Cursor de puntero para indicar que es clickeable */
    display: inline-flex; /* Display inline-flex para mantener los elementos en línea */
    align-items: center; /* Alineación vertical de los ítems internos */
    justify-content: center; /* Centrado horizontal del contenido */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave de color al hacer hover */
}

.details-button2:hover {
    background-color: #FF4500; /* Fondo naranja al pasar el mouse */
    color: white; /* Texto blanco al pasar el mouse */
}

.arrow-icon2 {
    margin-left: 10px;
    font-size: 20px;
    transition: transform 0.3s ease; /* Anima el giro de la flecha */
}

.details-button2:hover .arrow-icon {
    transform: translateX(5px); /* Mueve la flecha hacia la derecha al pasar el mouse */
}

@media (max-width: 768px) {
    .suite-section2 {
        flex-direction: column;
    }

    .suite-image2, .suite-content2 {
        width: 100%;
        position: relative; /* Restablece la posición para móviles */
        right: 0; /* Elimina cualquier desplazamiento derecho */
        top: 0;
        transform: none;
    }
}


.whatsapp-icon-img {
    width: 35px;  /* Ajusté el tamaño del ícono a 35px */
    margin-right: 10px;  /* Aseguré que haya un buen espaciado entre el ícono y el texto */
}

.details-button {
    font-size: 22px;  /* Tamaño grande del texto */
    font-weight: bold;  /* Texto en negrita */
    padding: 10px 20px;  /* Asegúrate de que el botón tenga buen tamaño */
    display: flex;  /* Usé flexbox para alinear el ícono y el texto */
    align-items: center;  /* Alineo el ícono y el texto verticalmente */
}

.reserve-text {
    font-weight: bold;  /* Texto en negrita */
}