/*Link de fuente*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/*Fuente CocoGothic*/
@font-face {
    font-family: "CocoGothic";
    src: url(../fuentes/CocoGothic_trial.woff2) format("woff2");
    font-style: normal;
    font-weight: normal;
}

/*Reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    min-height: 100%;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =====================================================
    BOTÓN FLOTANTE DE RESERVACIÓN
====================================================== */
.btn-flotante-r{
    background: #C3932F;
    background: radial-gradient(circle,rgba(195, 147, 47, 1) 0%, rgba(209, 184, 130, 0) 100%);
    box-shadow: 0 0 5px #000;
    width: 65px;
    height: 65px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    padding: 25px 15px;
    z-index: 1000;
    color: #fff;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    white-space: nonewrap;
    position: fixed;
    bottom: 25%;
    right: 2%;

    transition: width .4s ease;
}

.btn-flotante-r:hover{
    width: 170px;
}
.letras-btn{
    max-width: 1ch;
    overflow: hidden;
    transition: max-width .4s ease;
    font-weight: 600;
    font-size: 35px;
}
.btn-flotante-r:hover .letras-btn{
    max-width: 120px;
    font-size: 28px;
}

		/* Responsive de BOTÓN FLOTANTE DE RESERVA*/
                @media screen and (min-width: 992px) and (max-width: 1570px){
                    .btn-flotante-r{
                        bottom: 28%;
                    }
                }
/* =====================================================
    BOTÓN FLOTANTE DE WHATSAPP
====================================================== */
.btn-flotante-w{
    background: #41C452;
    background: radial-gradient(circle,rgba(65, 196, 82, 1) 0%, rgba(65, 196, 82, 0.2) 100%);
    box-shadow: 0 0 5px #000;
    width: 65px;
    height: 65px;
    border-radius: 50px;
    padding: 25px 15px;
    z-index: 1000;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    white-space: nonewrap;
    position: fixed;
    bottom: 15%;
    right: 2%;

    transition: width .4s ease;
}

.btn-flotante-w:hover{
    width: 75px;
    height: 75px;
}
.logo-whats{
    max-width: 100%;
    overflow: hidden;
    transition: max-width .4s ease;
}
.logo-whats img{
    width: 100%;
}


/* =====================================================
    MENÚ
====================================================== */

    .home-slider,
    .home-slider .slider-item,
    .js-fullheight{
        min-height: 100vh;
        height: 100vh;
    }

    .home-slider{
        position: relative;
        width: 100%;
        overflow: hidden;
        background-color: #000;
    }

    .home-slider .slider-item{
        position: absolute;
        inset: 0;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transform: scale(1.03);
        transition: opacity 1.2s ease, transform 6s ease;
        z-index: 0;
    }

    .home-slider .slider-item.active{
        opacity: 1;
        transform: scale(1);
        z-index: 1;
    }

    .home-slider .slider-item.slide-left{
        background-position: center left;
    }

    .home-slider .overlay{
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.65) 100%);
        z-index: 1;
    }

    .home-slider .container,
    .home-slider .slider-text{
        position: relative;
        z-index: 2;
    }

    .home-slider .text{
        color: #fff;
        text-shadow: 0 6px 24px rgba(0,0,0,.75);
    }

    .logo-banner{
        width: min(560px, 72vw);
        height: auto;
        filter: drop-shadow(0 10px 28px rgba(0,0,0,.75));
    }

    .iso-tipo{
        width: min(125px, 22vw);
        height: auto;
        max-height: 160px;
        object-fit: contain;
        margin-bottom: 26px;
        filter: drop-shadow(0 8px 22px rgba(0,0,0,.75));
    }

    .home-slider h1,
    .home-slider h2,
    .home-slider h5{
        font-family: "CocoGothic", sans-serif;
        margin-inline: auto;
    }

    .home-slider h1{
        color: #c3932f;
        font-size: clamp(48px, 7vw, 110px);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .home-slider h2{
        color: #fff;
        font-size: clamp(24px, 3.4vw, 52px);
        line-height: 1.15;
        font-weight: 400;
        letter-spacing: 0;
    }

    .home-slider h5{
        color: #fff;
        width: min(900px, 88vw);
        font-family: "Lato", sans-serif;
        font-size: clamp(14px, 1.45vw, 22px);
        font-weight: 400;
        line-height: 1.45;
    }

    .index-navbar{
        position: absolute !important;
        left: 50%;
        bottom: 12rem;
        transform: translateX(-50%);
        width: 100%;
    }

    /* Fondo de video */
    .video-bg{
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        z-index: -1;
    }

    /* Logo */
    .menu a:has(.logo){
        display: block;
        width: 100%;
        text-align: center;
    }

    .logo{
        width: 15%;
        max-width: 700px;
        height: auto;
    }

    /* Navbar */
    .nav-link{
        font-family: "CocoGothic", sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: 0.3s;
    }

    .nav-link:hover{
        background-color: rgba(148, 27, 27, 0.5);
        color: white;
    }

    /* Redes */
    .social-icon{
        width: 5%;
        margin-inline: 10px;
        margin-bottom: 7rem !important;
    }

    /* Legales */
    .legales-inicio{
        font-family: "Lato", sans-serif;
        color: rgb(187, 187, 187);
        font-size: 1rem;
    }

    .legales-inicio a{
        text-decoration: none;
        color: rgb(187, 187, 187);
        margin-left: 10px;
    }
    .legales-inicio a img {
        width: 80px;
        margin: 0px 0px 3px 10px;
        vertical-align: text-bottom;
    }

                /* Responsive de MENÚ*/
                @media(max-width: 991px){

                    .home-slider,
                    .home-slider .slider-item,
                    .js-fullheight{
                        min-height: 100svh;
                        height: 100svh;
                    }
                    .home-slider .overlay{
                        background: rgba(0,0,0,.62);
                    }
                    .home-slider h1{
                        font-size: clamp(38px, 12vw, 64px);
                        width: 92%;
                    }
                    .home-slider h2{
                        font-size: clamp(20px, 7vw, 34px);
                        width: 90%;
                    }
                    .logo-banner{
                        width: min(430px, 82vw);
                    }
                    .iso-tipo{
                        width: min(105px, 28vw);
                        margin-bottom: 18px;
                    }
                    .index-navbar{
                        bottom: 12rem;
                    }
                    .logo{
                        width: 70%;
                    }
                    .nav-link{
                        font-size: 1.2rem;
                        border-right: none !important;
                    }
                    .social-icon{
                        width: 30px;
                        margin-inline: 10px;
                        margin-bottom: 100%;
                    }
                    .legales-inicio{
                        width: 100%;
                        text-align: center !important;
                        left: 0;
                        right: 0;
                        bottom: 70px !important;
                    }
                }

/* =====================================================
    MENÚ DE HAMBURGUESA
====================================================== */
    .menu-chico{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.705);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1% 5%;
        position: relative;
    }
    .fixed-top {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    .logo-menu img{
        width: 200px;
    }
    .donde-estas{
        display: block;
        color: #c3932f;
        font-size: 110%;
        font-weight: 600;
        text-transform: uppercase;
        margin-right: 10%;
    }

    /*Estlos de links*/
    .links-hamburguesa{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, 0.705);
        flex-direction: column;
        justify-content: right;
        align-items: right;
        transition: 0.5s;
        transform: translateY(-150%);
        padding: 15px 92px;
        margin-bottom: 0;
    }
    .links-hamburguesa a{
        display: inline-block;
        text-decoration: none;
        font-size: 20px;
        text-transform: uppercase;
        color: #c3932f;
        transition: 0.3s;
        text-align: right;
        line-height: 1.5;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .links-hamburguesa > li > a.nav-link{
        width: auto !important;
        height: auto !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        align-content: normal !important;
    }
    .links-hamburguesa li{
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        display: block !important;
        align-content: normal !important;
        text-align: right;
        list-style-type: none;
    }
    .links-hamburguesa a:hover{
        color: #ffffff;
        background: transparent !important;
    }
    .links-hamburguesa a.active{
        background: transparent !important;
    }
    /*Check box*/
    #menu-toggle{
        display: none;
    }
    #menu-toggle:checked ~ .links-hamburguesa{
        transform: translateY(0);
    }
    /*Lineas de hamburguesa*/
    .menu-hamburguesa{
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }
    .menu-hamburguesa span{
        width: 40px;
        height: 2px;
        border-radius: 5px;
        background-color: #c3932f;
        transition: 0.3s;
    }

                /* Responsive de MENÚ HAMBURGUESA*/
                @media(max-width: 991px){
                    .menu-chico{
                        padding: 3% 6%;
                    }
                    .links-hamburguesa{
                        top: 100%;
                    }
                    .logo-menu img{
                        width: 150px;
                    }
                    .donde-estas{
                        font-size: 100%;
                    }
                    #menu-toggle:checked ~ .links-hamburguesa{
                        transform: translateY(0);
                    }
                }

                /* Responsive de MENÚ HAMBURGUESA*/
                @media screen and (min-width: 992px) and (max-width: 1570px){
   
                    .links-hamburguesa{
                        top: 100%;
                    }
                }

/* =====================================================
    FOOTER GENERAL
====================================================== */

    .footer-general{
        position: relative;
        left:0;
        bottom:0;
        width:100%;
        z-index:900;
        margin-top:auto;
        margin-bottom:-96px;
        padding:96px 40px 24px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .82) 54%, #000000 100%);
        font-family: "Lato", sans-serif;
        transform: translateY(-96px);
        
    }
    .f-content{
        display:grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items:center;
        gap:20px;
        text-decoration: none;
    }
    .f-ubicacion{
        display:flex;
        align-items:center;
        justify-self:start;
        text-decoration: none;
    }
    .f-direc{
        color: #d9d9d9;
        text-align: left;
        text-decoration: none;
        font-size: 14px;
    }
    .f-direc a{
        color: #d9d9d9;
        text-align: left;
        text-decoration: none;
    }

    
    .f-redes{
        display:flex;
        align-items:center;
        justify-self:center;
        gap: 15px;
    }
    .f-redes img{
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .f-legales{
        display:flex;
        align-items:center;
        justify-self:end;
        gap:14px;
        color: #d9d9d9;
    }
    .f-legales img{
        width:90px;
        height:42px;
        object-fit:contain;
    }
    .privacy-link{
        color:rgba(255,255,255,.72);
        transition:.3s ease;
        text-decoration: none;
    }

    .privacy-link:hover{
        color:#d4af37;
    }

                /* Responsive de FOOTER*/
                @media(max-width: 991px){
                    .footer-general{
                        width:100%;
                        margin-top:auto;
                        margin-bottom:-70px;
                        padding: 70px 30px 18px;
                        transform: translateY(-70px);
                    }
                    .f-content{
                        grid-template-columns: 1fr;
                        justify-items: center;
                        gap: 20px;
                    }
                    .f-ubicacion,
                    .f-redes,
                    .f-legales{
                        justify-self: center;
                    }
                    .f-direc{
                        font-size: 12px;
                        text-align: center;
                    }
                    .f-direc a{
                        text-align: center;
                    }
                    .f-redes{
                        gap: 8px;
                    }
                    .f-redes img{
                        width: 15px;
                        height: 15px;
                    }
                    .f-legales{
                        font-size: 7px;
                        gap:14px;
                    }
                    .f-legales img{
                        width: 47px;
                        height: 39px;
                    }
                }


/* =====================================================
    INICIO
====================================================== */

    /*Fondo de inicio*/
    #fondo-inicio{
        background-color: #141414;
        overflow-x: hidden;
        font-family: "Lato", sans-serif;
    }

    /*Introducción*/
    .i-introduccion{
        background-image: url("../img/inicio-intro.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        display: block;
        width: 100%;
        height: 100%;
        padding: 2% 0;
        min-height: 710px;
    }
    .titulo-inicio{
        font-family: "Lato", sans-serif;
        color: #ffffff;
        font-size: 60px;
        font-weight: 400;
        line-height: 70px;
        text-align: center;
        margin: 15%;
        text-shadow: 5px 3px 7px rgba(139, 74, 13, 0.5);
    }
    .negro-nombre{
        color: #000000;
        font-weight: 600;
    }

    /*Qué es Leo*/
    .quees-hotelleo{
        padding: 3% 5%;
        display: block;
    }
    .columna-text{
        display: inline-block;
        width: 45%;
        margin-left: 4%;
        vertical-align: middle;
    }
    .columna-img{
        display: inline-block;
        width: 45%;
        vertical-align: middle;
    }
    .columna-img img{
        display: block;
        width: 100%;
    }
    p.info-quees{
        font-size: 31px;
        margin-bottom: 45px;
        color: #fff;
    }
    .dorado-quees{
        color: #c3932f;
        font-weight: 600;
        font-size: 28px;
    }

    /*Botón letras rojas para ver habitaciones y reserva en apartado de INICIO*/
    .btn-intro{
        padding: 3% 5%;
        display: block;
        text-align: center;
    }
    a.btn-rojo{
        font-family: "CocoGothic", sans-serif;
        padding: 17px 17px 15px 20px;
        color: #c52827;
        text-decoration: none;
        font-size: 20px;
        border: 1px solid #c3932f;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    a.btn-rojo:hover{
        background: #c3942f50;
        color: #fff;
    }

    /*Carrusel de banner en INICIO*/
    #carouselExampleAutoplaying{
        width: 90%;
        height: auto;
        margin: auto;
        padding: 4% 0 4% 0;
    }

    /*Video en la sección de inicio*/  
    .video-inicio{
        width: 100%;
        height: 650px;
        margin: 4% 0 13% 0;
        background-image: url("../img/fondo-v-inicio.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-inicio::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }
    
    /*Botón del video en el apartado de inicio*/
    .btn-video{
        font-family: "Lato", sans-serif;
        display:inline-block;
        padding:15px 30px;
        background:#c3942f57;
        color:#fff;
        text-decoration:none;
        border-radius: 33px;
        font-weight: 600;
        transition:.3s;
        position: relative;
        z-index: 2;
        align-items: center;
        text-transform: uppercase;
        letter-spacing: 3px;
        transition: .3s;
    }
    .btn-video:hover{
        background: #c3942fb7;
    }

    /* Modal */
    .video-modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background:rgba(0,0,0,.75);
        display:none;
        justify-content:center;
        align-items:center;
        opacity:0;
        visibility:hidden;
        transition:.4s;
        z-index:9999;
    }
    .video-modal:target{
        display:flex;
        opacity:1;
        visibility:visible;
    }

    /*Contenedor*/
    .video-contenedor{
        width:70%;
        max-width:1250px;
        background:#000;
        padding:15px;
        border-radius:10px;
        box-shadow:0 0 40px rgba(0,0,0,.5);
        position:relative;
    }
    .video-contenedor video{
        width:100%;
        height:auto;
        display:block;
    }


    /*Botón para cerrar*/
    .cerrar-video{
        position:absolute;
        top:90px;
        right:50px;
        width:60px;
        height:60px;
        border-radius:50%;
        color: #8d8d8d;
        text-decoration:none;
        font-size:40px;
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:10000;
    }
    .cerrar-video:hover{
        color:#fff;
        transform:scale(1.2);
    }

                /* Responsive de INICIO*/
                @media(max-width: 991px){

                    /*Introducción*/
                    .titulo-inicio{
                        font-size: 32px;
                        line-height: 38px;
                        padding: 30% 0;
                    }
                    /*Qué es Leo*/
                    .quees-hotelleo{
                        padding: 20% 5%;
                    }
                    .columna-text{
                        width: 100%;
                        margin: auto;
                        text-align: center;
                    }
                    .columna-img{
                        width: 100%;
                        margin: auto;
                        padding-bottom: 5%;
                    }
                    .columna-img img{
                        margin: auto;
                        width: 80%;
                    }
                    p.info-quees{
                        width: 80%;
                        font-size: 17px;
                        margin: auto;
                        padding-bottom: 5%;
                    }
                    .dorado-quees{
                        font-size: 18px;            
                    }
                    /*Botón letras rojas para ver habitaciones y reserva en apartado de INICIO*/
                    a.btn-rojo{
                        font-size: 15px;
                        font-weight: 700;
                    }
                    /*Carrusel de banner en INICIO*/
                    #carouselExampleAutoplaying{
                        padding: 20% 0 15% 0;
                    }
                    /*Video en la sección de INICIO*/  
                    .video-inicio{
                        width: 100%;
                        height: 400px;
                        margin: 15% 0;
                    }
                    .video-modal{
                        width:100%;
                        height: 50vh;
                    }
                    /*Botón del video en el apartado de inicio*/
                    .btn-video{
                        font-size: 15px;
                        padding: 10px 22px;
                    }
                    /*Botón para cerrar*/
                    .cerrar-video{
                        top: 10px;
                        right: 20px;
                    }
                    
                }



                /* Responsive para laptops de INICIO*/
                @media screen and (min-width: 992px) and (max-width: 1570px){

		    .titulo-inicio{
                        font-size: 50px;
                        line-height: 60px;
                    }
                    /*Qué es Leo*/
                    .quees-hotelleo{
                        padding: 11% 5% 6%;
                    }
                    /*Introducción*/
                    .i-introduccion div{
                        font-size: 45px;
                    }
                    /*Qué es Leo*/
                    p.info-quees{
                        font-size: 24px;
                        margin-bottom: 35px;
                    }
                    .dorado-quees{
                        font-size: 25px;            
                    }
                    
                    /*Carrusel de banner en INICIO*/
                    #carouselExampleAutoplaying{
                        padding: 7% 0 8% 0;
                    }
                    
                }





/* =====================================================
    HABITACIONES
====================================================== */

        /*Fondo de inicio*/
        #fondo-habitaciones{
            background-color: #141414;
        }

        /* =====================================================
           Introducción a las habitaciones
        ====================================================== */
        .h-introduccion{
            background-image: url("../img/habitaciones-intro.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position-x: center;
            display: block;
            width: 100%;
            height: 100%;
            padding: 2% 0;
            min-height: 710px;
            margin: auto;
        }
        .text-h-intro{
            font-family: "Lato", sans-serif;
            color: #ffff;
            font-size: 60px;
            font-weight: 400;
            line-height: 65px;
            text-align: center;
            margin: 15% 17%;
        }
        .dorado-habitaciones{
            color: #c3932f;
            font-size: 40px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
        }



        /* =====================================================
           SCROLL GENERAL
        ====================================================== */

        .scroll-container{
            height:500vh;
            position:relative;
        }

        /* =====================================================
           CONTENEDOR STICKY
        ====================================================== */

        .sticky-wrapper{
            position:sticky;
            top:0;
            width:100%;
            height:100vh;
            overflow:hidden;
            background:#141414;
            display:flex;
            align-items:center;
        }

        /* =====================================================
           LUCES DECORATIVAS
        ====================================================== */

        .light{
            position:absolute;
            width:650px;
            height:650px;
            border-radius:50%;
            background:
            radial-gradient(
                circle,
                rgba(212,175,55,.08),
                transparent 70%
            );
            filter:blur(40px);
            pointer-events:none;
            z-index:1;
        }
        .light.left{
            top:-250px;
            left:-250px;
        }
        .light.right{
            bottom:-250px;
            right:-250px;
        }

        /* =====================================================
           HABITACIONES
        ====================================================== */

        .room{
            position:absolute;
            inset:0;
            display:flex;
            align-items:center;
            opacity:0;
            visibility:hidden;
            transform:scale(1.03);
            transition:
            opacity 1.2s ease,
            transform 1.2s ease,
            visibility 1.2s ease;
            z-index:2;
        }

        .room.active{
            opacity:1;
            visibility:visible;

            transform:scale(1);

            z-index:10;
        }

        /* =====================================================
           COLUMNAS
        ====================================================== */

        .image-column{
            padding-left:0 !important;
        }

        .content-column{
            padding:80px 80px 80px 20px;
            display:block;
            align-items: center;
        }
        

        /* =====================================================
           IMAGEN
        ====================================================== */

        .room-image{
            width:100%;
            height:100vh;
            overflow:hidden;
            position:relative;
            border-radius:0;
            transform:scale(1.08);
            transition:transform 2s ease;
        }

        .room.active .room-image{
            transform:scale(1);
        }

        .room-image img{
            width:100%;
            height:100%;

            object-fit:cover;

            display:block;
        }

        /* Overlay */

        .room-image::after{
            content:"";

            position:absolute;
            inset:0;

            background:
            linear-gradient(
                to right,
                rgba(0,0,0,.05),
                rgba(0,0,0,.35)
            );
        }

        /* =====================================================
           CONTENIDO
        ====================================================== */

        .room-content{
            max-width:650px;

            opacity:0;
            transform:translateY(40px);

            transition:
            opacity 1s ease .2s,
            transform 1s ease .2s;
        }

        .room.active .room-content{
            opacity:1;
            transform:translateY(0);
        }

        /* =====================================================
           TEXTO DORADO
        ====================================================== */

        .gold{
            background:
            linear-gradient(
                90deg,
                #6f5118 0%,
                #d4af37 25%,
                #fff3b0 50%,
                #d4af37 75%,
                #6f5118 100%
            );

            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        /* =====================================================
           TIPOGRAFÍA
        ====================================================== */

        .room-title{
            font-size: clamp(3rem,5vw,4.5rem);
            line-height:1;
            margin-bottom:24px;
            margin-left: 8%;
            text-align: left;
        }

        .room-price{
            font-size: 1.5rem;
            font-weight:500;
            margin-bottom:50px;
            margin-left: 9%;
            text-align: left;
        }


        /* =====================================================
           BOTÓN VER MÁS
        ====================================================== */
        .ver-mas-btn{
            font-size: 22px;
            text-align: left;
            padding:8px 10px;
            color: #ffffff;
            transition:.4s ease;
            margin-left: 9%;

            text-decoration: none;
            border: 1px solid #c3932f;
        }
        .ver-mas-btn:hover{
            background: #ffffff31;
            color:#d4af37;
        }

        /* =====================================================
           PANTALLA FINAL
        ====================================================== */

        .room-content img{
            width: 40%;
            margin: 40px;
        }
        .vive-title{
            font-size:clamp(3rem,5vw,5.5rem);
            line-height:1;
            margin-bottom:24px;
            text-align: center;
        }
        .final-room{
            justify-content:center;
            text-align:center;
        }

        .final-room .room-content{
            max-width:850px;
            margin:auto;
        }

        .final-room .text-room-final{
            max-width:850px;
            margin:0 auto 40px;
            color: #fff;
            font-size: 25px;
        }

        /* BOTÓN PREMIUM */

        .luxury-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:18px 38px;
            border-radius:100px;
            background:
            linear-gradient(
                135deg,
                #d4af37,
                #fff2b5
            );
            color:#000;
            font-weight:700;
            transition:.4s ease;
            min-width:220px;
            text-decoration: none;
        }

        .luxury-btn:hover{
            transform:translateY(-4px);
            box-shadow:
            0 10px 35px rgba(212,175,55,.25);
        }

        /* BOTÓN SECUNDARIO */

        .luxury-btn-outline{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:18px 38px;
            border-radius:100px;
            border:1px solid rgba(255,255,255,.16);
            color:#fff;
            transition:.4s ease;
            min-width:220px;
            text-decoration: none;
        }

        .luxury-btn-outline:hover{
            border-color:#d4af37;
            color:#d4af37;
        }

                /* =====================================================
                RESPONSIVE
                ====================================================== */
                @media(max-width:991px){

                    .sticky-wrapper{
                        align-items:flex-start;
                    }

                    .room{
                        align-items:flex-start;
                        padding-bottom:120px;
                    }

                    .room-image{
                        padding-top: 25%;
                        height:42vh;
                        border-radius:0;
                    }

                    .content-column{
                        padding:40px 28px 160px;
                    }
                    .ver-mas-btn{
                        display: block;
                    }
                    .room-title{
                        margin-top:25px;
                        font-size:clamp(2.3rem,9vw,4rem);
                    }

                    .room-description{
                        display: none;
                    }
                    .final-room .text-room-final{
                        font-size: 17px;
                    }
                    .room-features{
                        display: none;
                    }
                    .footer-content{
                        flex-direction:column;
                        align-items:flex-start;
                    }
                    .room-content img{
                        padding-top: 33%;
                        width: 40%;
                        margin: 40px;
                    }
                    

                    .luxury-btn,
                    .luxury-btn-outline{
                        width:100%;
                    }

                    .text-h-intro{
                        font-size: 25px;
                        font-weight: 400;
                        line-height: 35px;
                        text-align: center;
                        margin: 70% 8%;
                    }
                    .dorado-habitaciones{
                        font-size: 22px;
                    }

                    .ver-mas-btn{
                        text-align: center;
                        margin: 0 60% 0 13%;
                    }
                    
                }



                @media screen and (min-width: 992px) and (max-width: 1570px){
                    .text-h-intro{
                        font-size: 47px;
                        line-height: 55px;
                    }
                    .dorado-habitaciones{
                        font-size: 32px;
                    }
                }

/* =====================================================
    SUITES
====================================================== */
    /*Fondo de suites*/
    #fondo-suites{
        background-color: #141414;
        overflow-x: hidden;
        font-family: "Lato", sans-serif;
    }

    /*Nombre de suite*/
    .name-suite{
        font-family: "CocoGothic", sans-serif;
        width: 100%;
        display: inline-block;
        padding: 15% 15% 5% 15%;
    }
    .titulo-habitaciones{
        color: #ffff;
        font-size: 55px;
        font-weight: 300;
        text-align: left;
        display: inline-block;
    }

    .room-description{
        width: 100%;
        color:rgba(255,255,255,.75);
        line-height:1.5;
        font-size: 27px;
        font-weight: 100;
        text-align: left;
        display: inline-block;
        padding-right: 38%;
    }

    /*Carrusel*/
    .container-carrusel{
        --bs-gutter-x:0 !important;
    }
    .carousel-wrapper{
        width:100%;
        max-width:1980px;
        position:relative;
        padding:40px 70px;
        display: flex;
    }

    .custom-carousel{
        position:relative;
        overflow-x:hidden;
        overflow-y:visible;
        padding:30px 0;
    }

    .carousel-track{
        display:none;
        transition:transform .7s cubic-bezier(.22,.61,.36,1);
        gap:25px;
        will-change:transform;
    }

    .carousel-item-custom{
        flex:0 0 calc(100% / 3 - 17px);
        display:flex;
        justify-content:center;
        align-items:center;
        transition:
            transform .6s ease,
            opacity .6s ease,
            filter .6s ease;
    }

    .carousel-card{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
    }

    .carousel-image{
        width:220px;
        height:220px;
        border-radius:50%;
        object-fit:cover;
        border:3px solid #c3932f;
        transition:all .6s ease;
        user-select:none;
        pointer-events:none;
    }

    /* ITEM CENTRAL */
    .carousel-item-custom.active-center{
        transform:scale(1.2);
        z-index:5;
    }

    .carousel-item-custom.active-center .carousel-image{
        border-color:#917f3b;
    }

    /* Items laterales */
    .carousel-item-custom:not(.active-center){
        opacity:.55;
        filter:blur(.3px);
        transform:scale(.9);
    }

    /* BOTONES */
    .carousel-btn{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:55px;
        height:55px;
        border:none;
        border-radius:50%;
        background:#ffffff00;
        color:#c3932f;
        font-size:1.8rem;
        z-index:20;
        transition:.3s ease;
        box-shadow:0 10px 25px rgba(0,0,0,.25);
    }

        .carousel-btn:hover{
        transform:translateY(-50%) scale(1.08);
        background:#ffffff2c;
        color:white;
    }

        .carousel-btn.prev{
        left:0;
    }

        .carousel-btn.next{
        right:0;
    }

                

    /*Foto habitación ESTÁNDAR*/ 
    .foto-p-estandar{
        width: 100%;
        height: 300px;
        margin: 8% 0 8% 0;
        background-image: url("../img/rosas-estandar.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: last baseline;
    }

    /*Foto habitación JUNIOR*/ 
    .foto-p-junior{
        width: 100%;
        height: 300px;
        margin: 10% 0 8% 0;
        background-image: url("../img/rosas-junior.JPG");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: last baseline;
    }

    /*Foto habitación MASTER*/ 
    .foto-p-master{
        width: 100%;
        height: 300px;
        margin: 10% 0 8% 0;
        background-image: url("../img/rosas-master.JPG");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: last baseline;
    }

    /*Cuadro dorado y características de HABITACIONES*/
    .cuadro-suite{
        width: 40%;
        height: auto;
        margin-left: 10%;
        display:inline-block;
        padding: 3%;
        background:#c3942f;
        color:#fff;
        border-radius: 10px;
        position: relative;
        z-index: 2;
    }
    p.caracteristicas-suite{
        font-size: 33px;
    }
    .room-features{
        display: inline-block;
        width: 100%;
        list-style:none;
        padding:0;
        margin:0;
        vertical-align: middle;
    }
    .room-features li{
        display:flex;
        align-items:center;
        gap:14px;
        margin-bottom: 5px;
        font-size: 1.2rem;
        margin-left: 4%;
    }
    .dot{
        width:8px;
        height:8px;
        border-radius:50%;
        background:#ffffff;
        box-shadow:0 0 12px rgba(163, 139, 61, 0.9);
        flex-shrink:0;
    }
    

    /*Botón de reserva en letras blancas en todas las habitaciones*/
    .btn-habitaciones{
        padding: 3% 5% 0;
        display: block;
        text-align: left;
        margin-left: 5%;
        
    }
    a.btn-blanco-mardorado{
        font-family: "CocoGothic", sans-serif;
        padding: 17px 17px 15px 20px;
        color: #ffffff;
        text-decoration: none;
        font-size: 20px;
        border: 1px solid #c3932f;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    a.btn-blanco-mardorado:hover{
        background: #c3942f50;
    }

    /*Botón de "Volver a las habitaciones"*/
    .btn-volverh{
        padding: 3% 5% 3%;
        display: block;
        text-align: left;
    }
    .volver-h-btn{
        font-size: 20px;
        text-align: left;
        padding:10px 0px;
        color: #c3932f;
        transition:.4s ease;
        min-width:220px;
        margin-left: 5.5%;
        text-decoration: none;
    }
    .volver-h-btn:hover{
        color:#fff;
    }

    /*Video de habitación estándar*/
    .video-estandar{
        width: 100%;
        height: 650px;
        margin: 8% 0 13% 0;
        background-image: url("../img/fondo-v-estandar.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-estandar::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    /*Video de habitación junior*/
    .video-junior{
        width: 100%;
        height: 650px;
        margin: 8% 0 13% 0;
        background-image: url("../img/fondo-v-junior.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-junior::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    /*Video de habitación master*/
    .video-master{
        width: 100%;
        height: 650px;
        margin: 8% 0 13% 0;
        background-image: url("../img/fondo-v-master.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-master::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

                /* Responsive de SUITES*/
                @media(max-width: 991px){

                    /*Nombre de suite*/
                    .name-suite{
                        padding: 25% 10% 5% 10%;
                    }
                    .titulo-habitaciones{
                        font-size: 40px;
                    }
                    .room-description{
                        font-size: 14px;
                        padding-right: 15%;
                    }
                    /*Foto habitación ESTÁNDAR*/ 
                    .foto-p-estandar{
                        width: 100%;
                        height: 180px;
                        margin: 10% 0 60% 0;
                    }
                    /*Foto habitación JUNIOR*/ 
                    .foto-p-junior{
                        width: 100%;
                        height: 180px;
                        margin: 15% 0 80% 0;
                    }
                    /*Foto habitación MASTER*/ 
                    .foto-p-master{
                        width: 100%;
                        height: 180px;
                        margin: 15% 0 80% 0;
                    }
                    /*Cuadro dorado y características de HABITACIONES*/
                    .cuadro-suite{
                        width: 75%;
                        height: auto;
                        margin: auto;
                        margin-top: 120px;
                    }
                    p.caracteristicas-suite{
                        font-size: 20px;
                    }
                    .room-features li{
                        gap: 8px;
                        margin-bottom: 2px;
                        font-size: 15px;
                    }
                    .dot{
                        width:5px;
                        height:5px;
                    }
                    /*Botón de reserva en letras blancas en todas las habitaciones*/
                    .btn-habitaciones{
                        padding: 3% 5%;
                    }
                    a.btn-blanco-mardorado{
                        font-size: 15px;
                        font-weight: 700;
                    }
                    /*Video de habitación estándar*/
                    .video-estandar{
                        width: 100%;
                        height: 400px;
                        margin: 15% 0;
                    }
                    /*Video de habitación junior*/
                    .video-junior{
                        width: 100%;
                        height: 400px;
                        margin: 15% 0;
                    }
                    /*Video de habitación master*/
                    .video-master{
                        width: 100%;
                        height: 400px;
                        margin: 15% 0;
                    }
                    /*Carrusel de suites*/
                    .carousel-item-custom{
                        flex:0 0 calc(100% / 2 - 15px);
                    }
                    .carousel-image{
                        width:190px;
                        height:190px;
                    }
                }

                @media(max-width:576px){

                    .carousel-wrapper{
                        padding:30px 55px;
                    }

                    .carousel-item-custom{
                        flex:0 0 100%;
                    }

                    .carousel-image{
                        width:220px;
                        height:220px;
                    }

                    .carousel-item-custom:not(.active-center){
                        opacity:.25;
                    }    
                }
                

/* =====================================================
    SERVICIOS
====================================================== */

    /*Fondo de servicios*/
    #fondo-servicios{
        background-color: #941c1b;
        overflow-x: hidden;
        font-family: "Lato", sans-serif;
    }

    /*Texto de introducción a servicios*/
    .s-introduccion{
        background-color: #941c1b;
        padding: 15% 20% 8% 20%;
        display: block;
    }
    .cuadrado-dorado{
        width: 15%;
        height: 300px;
        background-color: #c3932f;
        align-items: center;
        display: inline-block;
        vertical-align: middle;
    }

    .comodidad{
        width: 87%;
        font-size: 30px;
        color: #ffffff;
        display: inline-block;
        vertical-align: middle;
        margin-left: -8%;
        line-height: 40px;
    }

    /*Iconos de servicios*/
    .servicios{
        width: 100%;
        height: auto;
        padding: 3% 15% 1%;
        margin-top: 3%;
        background-color: #000000; 
        display: block;
        align-content: center;
    }
    .s-destacados{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        color: #fff;
        padding: 0 0 4% 0;
    }
    .servicio-card{
        width: calc(95%/6);
        display: inline-block;
        vertical-align: top;
    }
    .servicio-card img{
        display: block;
        margin: auto;
    }
    .servicio-card  div{
        text-align: center;
        font-size: 17px;
        line-height: 21px;
        font-weight: 500;
        margin: 10px 0 0px 0;
        padding: 0 20px;
        color: #fff;
    }
    .icon-blanco{
        display: block;
        width: 40%;
        margin: auto;
    }
    .icon-blanco:hover{
        transform: scale(1.3);
        transition-duration: 0.5s;
    }
    
    /*Botón de reserva con letras blancas*/
    .btn-servicio{
        padding: 3% 5%;
        display: block;
        background-color: #000000;
        text-align: center;
    }
    a.btn-blanco{
        font-family: "CocoGothic", sans-serif;
        padding: 17px 17px 15px 20px;
        color: #ffffff;
        text-decoration: none;
        font-size: 20px;
        border: 1px solid #941c1b;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    a.btn-blanco:hover{
        background: #941b1b7e;
    }

    /*Tienda gourmet*/  
    .info-tienda{
        width: 100%;
        height: 350px;
        margin: 15% 0 22% 0;
        background-image: url("../img/tienda-vinos.JPG");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
       
    }
    .cuadro-tienda{
        width: 50%;
        height: auto;
        margin: auto;
        margin-top: 220px;
        display:inline-block;
        padding: 2% 3%;
        background:#c3942f;
        color:#fff;
        border-radius: 10px;
        position: relative;
        z-index: 2;
    }
    .titulo-ti{
        font-family: "CocoGothic", sans-serif;
        font-size: 50px;
        font-weight: 600;
        margin: auto;
        letter-spacing: 2px;
    }
    .subtitulo-ti{
        font-size: 29px;
        font-weight: 400;
    }
    .descripcion-ti{
        font-size: 22px;
        padding-top: 2%;
        line-height: 30px;
    }
    .caracteristicas-ti{
        display: inline-block;
        font-size: 22px;
        text-align: left;
    }
    
    /*Fotos de tienda*/
    .tienda{  
        width: 100%;
        height: auto;
        padding: 2% 8%;
        margin-top: 8%;
        display: block;
        align-content: center;
    }
    .tienda-card{
        width: calc(95%/6);
        display: inline-block;
        vertical-align: top;
        margin: auto;
    }
    .fo-ti{
        display: block;
        margin: auto;
        width: 70%;
        border-radius: 10px;
    }
    .fo-ti:hover{
        transform: scale(1.7);
        transition-duration: 0.5s;
    }

    /*Video en la sección de tienda*/  
    .video-tienda{
        width: 100%;
        height: 650px;
        margin: 2% 0 13% 0;
        background-image: url("../img/fondo-v-tienda.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-tienda::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    /*Programa de lealtad*/
    .info-programa{
        width: 100%;
        height: 350px;
        margin: 15% 0 26% 0;
        background-image: url("../img/IMG_8261.JPG");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
       
    }
    .cuadro-programa{
        width: 75%;
        height: auto;
        margin: auto;
        margin-top: 250px;
        display:inline-block;
        padding: 1% 3%;
        background:#c3942f;
        color:#fff;
        border-radius: 10px;
        position: relative;
        z-index: 2;
    }
    .programa-texto{
        display: inline-block;
        width: 56%;
        vertical-align: middle;
    }
    .programa-foto{
        display: inline-block;
        width: 40%;
        vertical-align: middle;
        padding-left: 5%;
    }
    .programa-foto img{
        display: block;
        width: 95%;
    }
    .titulo-pro{
        font-family:"CocoGothic", sans-serif;
        font-size: 48px;
        font-weight: 600;
        margin: auto;
    }

    /*Video en la sección de programa de lealtad*/  
    .video-programa{
        width: 100%;
        height: 650px;
        margin: 10% 0 13% 0;
        background-image: url("../img/fondo-v-programa.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .video-programa::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    /* Modal */
    .video-modal-pro{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background:rgba(0,0,0,.75);
        display:none;
        justify-content:center;
        align-items:center;
        opacity:0;
        visibility:hidden;
        transition:.4s;
        z-index:9999;
    }
    .video-modal-pro:target{
        display:flex;
        opacity:1;
        visibility:visible;
    }

    /*Contenedor*/
    .video-contenedor-pro{
        width:70%;
        max-width:1250px;
        background:#000;
        padding:15px;
        border-radius:10px;
        box-shadow:0 0 40px rgba(0,0,0,.5);
        position:relative;
    }
    .video-contenedor-pro video{
        width:100%;
        height:auto;
        display:block;
    }

                /* Responsivo de SERVICIOS*/
                @media(max-width: 991px){

                    /*Texto de introducción a servicios*/
                    .s-introduccion{
                        padding: 35% 10% 35% 10%;
                    }
                    .cuadrado-dorado{
                        width: 30%;
                        height: 300px;
                    }
                    .comodidad{
                        width: 80%;
                        font-size: 16px;
                        margin-left: -15%;
                        line-height: 23px;
                    }
                    /*Servicios destacados*/
                    .servicios{
                        padding: 15% 10% 5%;
                        margin-top: 3%;
                    }
                    .s-destacados{
                        font-size: 23px;
                        padding: 0 0 8% 0;
                    }
                    .servicio-card{
                        width: calc(95%/3);
                    }
                    .servicio-card  div{
                        font-size: 11px;
                        margin-bottom: 5%;
                        line-height: 17px;
                    }
                    .icon-blanco{
                        width: 40%;
                    }
                    /*Botón de reserva con letras blancas*/
                    .btn-servicio{
                        padding: 10% 5%;
                    }
                    a.btn-blanco{
                        font-size: 15px;
                        font-weight: 700;
                    }
                    /*Tienda gourmet*/  
                    .info-tienda{
                        width: 100%;
                        height: 180px;
                        margin: 25% 0 80% 0;                    
                    }
                    .cuadro-tienda{
                        margin-top: 120px;
                        width: 75%;
                        padding: 5%;
                    }
                    .titulo-ti{
                        font-size: 25px;
                    }
                    .subtitulo-ti{
                        font-size: 20px;
                        line-height: 25px;
                    }
                    .descripcion-ti{
                        font-size: 15px;
                        line-height: 22px;
                    }
                    .caracteristicas-ti{
                        font-size: 15px;
                    }
                    /*Fotos de tienda*/
                    .tienda-card{
                        width: calc(95%/3);
                    }
                    .fo-ti{
                        margin-bottom: 20%;
                        width: 85%;
                    }   
                    /*Video en la sección de tienda*/  
                    .video-tienda{
                        width: 100%;
                        height: 400px;
                        margin: 15% 0 25%;
                    } 
                    /*Programa de lealtad*/
                    .info-programa{
                        width: 100%;
                        height: 180px;
                        margin: 25% 0 130% 0; 
                    }
                    .cuadro-programa{
                        margin-top: 120px;
                        width: 75%;
                        padding: 5%;
                    }
                    .titulo-pro{
                        font-size: 25px;
                    }
                    .programa-texto{
                        width: 100%;
                    }
                    .programa-foto{
                        width: 100%;
                    }

                    /*Video en la sección de programa de lealtad*/  
                    .video-programa{
                        width: 100%;
                        height: 400px;
                    }
                }


                /* Responsivo para laptops de SERVICIOS*/
                @media screen and (min-width: 992px) and (max-width: 1570px){

                    /*Tienda gourmet*/  
                    .cuadro-tienda{
                        margin-top: 120px;
                    }
                    
                    /*Fotos de tienda*/
                    .tienda-card{
                        width: calc(95%/3);
                    }
                    .fo-ti{
                        margin-bottom: 20%;
                        width: 85%;
                    }  
                    .fo-ti:hover{
                        transform: scale(1.4);
                        transition-duration: 0.5s;
                    }

                    /*Programa de lealtad*/
                    .cuadro-programa{
                        margin-top: 120px;
                    }
                }

/* =====================================================
    UBICACIÓN
====================================================== */
    /*Fondo de ubicación*/
    #fondo-ubicacion{
        background-color: #000000;
        font-family: "Lato", sans-serif;
    }

    /*Texto de introducción a ubicación*/
    .u-introduccion{
        background-color: #000000;
        padding: 15% 20% 10% 20%;
        display: block;
    }
    .cuadrado-rojo{
        width: 15%;
        height: 350px;
        background-color: #941c1b;
        align-items: center;
        display: inline-block;
        vertical-align: middle;
    }

    .text-intro-ubi{
        width: 85%;
        font-size: 27px;
        color: #ffffff;
        display: inline-block;
        vertical-align: middle;
        margin-left: -8%;
        line-height: 40px;
    }

    /*Mapa y ubicación escrita*/
    .mapa{
        background-color: #000000;
        padding: 3% 0 3% 0;
        display: block;
    }
    .mapa iframe{
        width:100%;
        height:600px;
    }
    .direccion{
        font-size: 28px;
        font-weight: 600;
        text-align: center;
        color: #c3932f;
        margin: 0 0 1% 0;
    }

    /*Texto e imagen de contacto e instagram*/
    .instagram-contacto{
        padding: 5% 5%;
        display: block;
    }

    .contac{
        display: inline-block;
        width: 45%;
        vertical-align: middle;
    }
    .solo-texto{
        display: inline-block;
        text-align: left;
    }
    .contac-titu{
        font-size: 55px;
        font-weight: 700;
        margin-bottom: 25px;
        color: #fff;
    }
    .contac-descrip{
        font-size: 28px;
        font-weight: 400;
        color: #fff;
    }
    .contac-rojo a{
        color: #941c1b;
        font-size: 28px;
        font-weight: 400;
        text-decoration: none;
    }

    .texto-imagen{
        width: 100%;
        display: inline-block;
        text-align: left;
        padding-top: 5%;
    }
    .texto-imagen img{
        width: 7%;
        padding-right: 10px;
    }
    .username{
        display: inline-block;
        font-size: 20px;
        padding-right: 25px;
        color: #941c1b;
        text-decoration: none;
    }
    /*Bloque de Instagram*/
    .insta{
        display: inline-block;
        width: 40%;
        margin-left: 10%;
        vertical-align: middle;
    }

                /* Responsivo de UBICACIÓN*/
                @media(max-width: 991px){

                    /*Texto de introducción a ubicación*/
                    .u-introduccion{
                        padding: 35% 10% 25% 10%;
                    }
                    .cuadrado-rojo{
                        width: 30%;
                        height: 300px;
                    }

                    .text-intro-ubi{
                        width: 80%;
                        font-size: 17px;
                        margin-left: -15%;
                        line-height: 23px;
                    }
                    /*Mapa y ubicación escrita*/
                    .mapa iframe{
                        width:100%;
                        height:300px;
                        margin-bottom: 10%;
                    }
                    .direccion{
                        font-size: 14px;
                        margin: 0 0 2% 0;
                    }
                    /*Texto e imagen de contacto e instagram*/
                    .instagram-contacto{
                        width: 100%;
                        padding-top: 20%;
                    }

                    .contac{
                        width: 100%;
                    }
                    .contac-titu{
                        font-size: 35px;
                    }
                    .contac-descrip{
                        font-size: 17px;
                    }
                    .contac-rojo a{
                        font-size: 17px;
                        font-weight: 500;
                    }

                    .texto-imagen{
                        width: 100%;
                    }
                    .texto-imagen img{
                        width: 7%;
                        padding-right: 2px;
                    }
                    .username{
                        font-size: 15px;
                    }
                    /*Bloque de Instagram*/
                    .insta{
                        margin: 15% ;
                    }
                }


/* =====================================================
    RESERVA
====================================================== */
    /*Fondo de reserva*/
    #fondo-reserva{
        background-color: #941c1b;
        font-family: "Lato", sans-serif;
    }

    /**/
    .modal-aviso{
        border-radius:22px;
        border:none;
        overflow:hidden;
    }
    .modal-logo{
        width:200px;
        margin:auto;
        display:block;
        padding-bottom: 15px;
        padding-top: 25px;
    }
    .modal-linea{
        border: 0;
        height: 2px;
        background: #c52827;
        margin-top: 18px;
        opacity: 80%;
    }

    .titulo-aviso{
        color: #c52827;
        font-size: 2rem;
        font-weight: 600;
        letter-spacing: 2px;
        margin-top: 20px;
    }
    .texto-aviso{
        color:#000000;
        font-size: 1rem;
        line-height: 1.7;
    }

    .form-check-label{
        color:#000000;
        font-size:1rem;
    }
    .form-check-label a{
        color:#c52827;
        text-decoration:none;
        font-weight:600;
    }
    .form-check-label a:hover{
        text-decoration:underline;
    }

    #btnContinuar{
        border-radius:40px;
        padding:12px 40px;
    }

    /*Fotos de las habitaciones en apartado de reserva*/
    .columnas2{
        padding: 5% 12% 2%;
        display: block;
    }
    .col3{
        width: calc(99%/3);
        display: inline-block;
        vertical-align: top;
    }
    .col3 img{
        display: block;
        width: 90%;
        margin: auto;
    }

    .estan:hover{
        content: url("../img/reserva-estandar2.png");
        transform: scale(1.2);
        transition-duration: .5s;
    }
    .juni:hover{
        content: url("../img/reserva-junior2.png");
        transform: scale(1.2);
        transition-duration: .5s;
    }
    .maste:hover{
        content: url("../img/reserva-master2.png");
        transform: scale(1.2);
        transition-duration: .5s;
    }

    /*Titulo de reservas*/
    .reserva-titu{
        font-family: "CocoGothic", sans-serif;
        display: block;
        padding: 10% 17% 0 17%;
        letter-spacing: 2px;
    }
    .re-paga{
        color: #ffff;
        font-size: 50px;
        font-weight: 600;
        text-align: left;
    }
    .re-destacado{
        font-family: "Lato", sans-serif;
        color: #ffff;
        font-size: 29px;
        font-weight: 500;
        text-align: left;
        letter-spacing: 2px;
    }

    /*Texto de pago e información*/
    .text-reserva{
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        color: #ffff;
        padding: 1% 19% 0;
    }
    p.haztu-rerserva{
        text-align: center;
        font-size: 27px;
        font-weight: 700;
        margin: auto;
    }
    .sistema-reserva{
        text-align: center;
        font-size: 28px;
        font-weight: 400;
        margin: auto;
        padding-top: 2%;
    }
    .aceptamos-reserva{
        font-size: 27px;
        font-weight: 400;
        text-align: left;
        padding-top: 2%;
    }
    .medios-reserva{
        font-size: 27px;
        font-weight: 200;
        text-align: left;
    }
    

    /* =====================================================
        FORMULARIO PARA RESERVAR
    ====================================================== */
    .formulario-reserva{
        color: #941c1b;
        padding: 0 0 10% 0;
        width: min(64%, 1180px);
        max-width: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .formulario-reserva .row{
        margin-left: 0;
        margin-right: 0;
    }
    .formulario-reserva .col-lg-8{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .formulario-reserva .card{
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 22px !important;
        padding: 36px 36px 70px !important;
        box-shadow: 0 26px 48px rgba(66, 0, 0, .14) !important;
    }
    .formulario-reserva #form_modifica{
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: translateY(-70px);
    }

    /* Labels */
    .formulario-reserva .form-label{
        color: #941c1b;
        font-size: 22px;
        font-weight: 600;
    }

    /* Inputs y selects */
    .formulario-reserva .form-control,
    .formulario-reserva .form-select{
        color: #333;
        background-color: #ffffff;
    }

    /* Placeholder */
    .formulario-reserva ::placeholder{
        color: #999;
    }

    .btn-confirma{
        background-color:#941c1b;
        padding: 10px;
        width: 30%;
        color:#fff;
        border:none;
        margin: auto;
    }

    .btn-confirma:hover{
        background-color:#691413;
        color:#fff;
    }

                /* Responsivo de RESERVA*/
                @media(max-width: 991px){

                    /*Titulo de reservas*/
                    .reserva-titu{
                        padding: 25% 10% 5% 10%;
                    }
                    .re-paga{
                        font-size: 30px;
                    }
                    .re-destacado{
                        font-size: 20px;
                        text-align: center;
                    }
                    /*Fotos de las habitaciones en apartado de reserva*/
                    .columnas2{
                        padding: 10% 5%;
                        margin: auto;
                    }
                    .col3{
                        width: calc(95%/3);
                    }
                    .col3 img{
                        width: 100%;
                    }
                    /*Texto de pago e información*/
                    .text-reserva{
                        padding: 1% 12% 0;
                    }
                    .sistema-reserva{
                        font-size: 15px;
                    }
                    .formulario-reserva{
                        width: min(92%, 680px);
                        padding-bottom: 18%;
                    }
                    .formulario-reserva .card{
                        padding: 24px 24px 52px !important;
                        border-radius: 18px !important;
                    }
                    .formulario-reserva #form_modifica{
                        transform: translateY(-34px);
                    }
                    .btn-confirma{
                        width: min(100%, 320px);
                    }
                }