html{scroll-behavior: smooth; overflow: hidden; overflow-y: scroll; box-sizing: border-box;}
body{ margin: 0; padding: 0; font-weight: 400; font-family: 'roboto', sans-serif; box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&family=Roboto:wght@400;500;600&family=Montserrat:wght@700;800&display=swap');
@font-face {
    font-family: Avenida;
    src: url('../css/Avenida-Std-Regular.otf');
}

 h2 , p{ margin: 0; padding: 0; font-weight: 400;}
 div {box-sizing: border-box;}

:root{
    --avenida: Avenida;
    --main:#fff;
    --gris_suave: #E4E4E4;
    --secundario:#0a3a2f;
    ---beige_claro:#000;
    --blanco:#000;
    --roboto: 'roboto', sans-serif;
}

.website{
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center; align-self: center;
    width: 100vw; height: auto;
    background-color: #000;
    box-sizing: border-box;
}

.boton-ir-arriba{
    z-index: 99;
    display: flex; justify-content: center; align-items: center;
    width: 35px; height: 35px;
    padding: 0;
    color: #fff;
    background-color: #000;
    position: fixed; bottom: 25%; right: 5px;
    border-radius: .5em;
    outline: none;
    border: none;
    box-shadow: 0 0 5px rgba(255, 255, 255, .8);
}
.boton-ir-arriba:hover { color: #000; background-color: gray; cursor: pointer;}

.bg_center{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media ( max-width: 120080px){

    .logo_comitiva img{ width: 100%; height: auto;}
    .logo_comitiva{
        z-index: 1;
        position: fixed; top: 0; left: 0;
        display: flex; align-items: center;
        width: 250px;
        height: 100px;
        padding: 1em;
        padding-left: 4em;
        color: #fff;
        background-color: #000;
        border-radius: 0 0 1em 0;
        transition: all .3s ease;
        opacity: 0;
    }

    .bg_nav{
        position: fixed;
        width: 100%; height: 60px;
        background-color: rgba(0, 0, 0, .8);
    }
    .nav{
        z-index:2;
        position: fixed; top: 0; right: -101vh;
        width: 100vw; height: 100vh;
        padding: 2em;
        background-color: rgba(0, 0, 0, .7);
        transition: all .5s ease;
    }
    .box_nav{
        position: fixed; top: 0; right: -100vh;
        width: calc(100vw - 25%); height: 100%;
        padding-right: 2em;
        background-color: beige;
        transition: all .5s ease;
    }
    .box_nav ul{
        display: flex; flex-wrap: wrap;
        margin-top: 5em;
        padding: 0;
        text-align: right;
        list-style-type: none;     
    }

    .box_nav a {
        width: 100%; height: auto;
        font-family: var(--avenida);
        font-weight: 400;
        font-size: 2.5rem;
        margin: .2em 0;
        list-style:none;
        text-decoration: none;
        color: #000;
    }
    .box_nav a:hover{
        padding-right: .5em;
        color: #E4E4E4;
        background-color: #000;
        cursor: pointer;
        transition: all .5s ease;
    }


    .portada{
        width: 100vw; height: 100vh;
        background-color: rgba(0, 0, 0, .3);
        background-blend-mode: overlay;
        background-position: center center;  
        background-repeat: no-repeat;
        background-size: cover;
    }
    .portada_logo_ img{ width: 80%; height: auto;}
    .portada_logo_ {
        width: 100vw; height: 100vh;
        /* height: min-content; */
        position: absolute; top: 0; left: 0;
        margin: 2em 1em;
        padding: 0;
        background-color: rgba(0, 0, 0, .2);
        background-blend-mode: overlay;
    }

    .logo_menu img{ width: 100%; height: 100%;}
    .logo_menu{
        width: 50%; height: 80px;
        margin: 1em 0 0 1em;
    }
    
    .icon_menu_burger{
        z-index: 8 !important;
        position: fixed; top: 1em; right: 1em;
        margin: 0em;
        width:25px; height: 25px;
        cursor: pointer;
        opacity: 1;
        transition: all .5s ease;
        background-color: rgba(0, 0, 0, .3);
        padding: .5em;
        border-radius: .2em;
    }
    .cruz{
        z-index: 8;
        position: fixed; top: 0; right: 0;
        width: 15px; height: auto;
        margin: 1em 1em 0 0;
        padding: .5em;
        border: 1px solid #000;
        border-radius: .2em;
        cursor: pointer;
    }
    .mouse_scroll img{ width: 50px; height: 50px;}
    .mouse_scroll{
        z-index: 2;
        position: absolute; bottom: 0; left: 0;
        display: flex; justify-content: center; align-items: center;
        width: 100%; 
        height: min-content;
        margin-bottom: 1em;
        cursor: pointer;
        animation-name: mouse_scroll;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
            @keyframes mouse_scroll {
                0% {transform: translateY(0px); opacity: 1;}
                100%{transform: translateY(20px); opacity: 0;}
                }


        /* =========== Historia ===========*/

    .historia{
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        width: 100vw; height: 100vh;
        padding: 2rem;
        margin-bottom: 2em;
        box-sizing: border-box;
        color: var(---beige_claro);
        background-color: #000;
    }

    .wrap_historia{
        width: 100%; height: auto;
    }

    .panel_historia_imagen{
        display: flex; justify-content: space-between;
        width: 100%; height: 250px;
    }
    .panel_historia_imagen div{
        width: 48%; height: auto;
        border-radius: .8em;
        background-size: cover;
        background-position: center;
        cursor: pointer;
    }

    .historia_imagen1{background-image: url(../img/home/comitiva-19.jpg);}
    .historia_imagen2{background-image: url(../img/Desayunos_la_comitiva-78.png);}

    .panel_historia_texto{
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: 60%;
        padding: 2em 0;
        text-align: center;
        box-sizing: border-box;
    }
    .box_historia_texto{ width: 100%; height: auto;}

    .box_historia_texto h2{
        display: flex; justify-content: center; align-items: center;
        margin-bottom: .3em;
        font-family: var(--avenida);
        font-size: 2rem;
        font-weight: 400;
        color: var(--main);
    }
    .box_historia_texto p{
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: auto;
        margin: 0; padding: 0;
        font-size: 1rem;
        color: var(--main);
        line-height: 1.1em;box-sizing: border-box;
    }
    .historia_firma img{ width: auto; height: 100%;}
    .historia_firma{
        margin-top: 1em;
        width: 100%; height: 60px;
        box-sizing: border-box;
    }

/* desayunos */

.desayunos_box{
    position: relative;
    display: flex; align-items: center;
    width: 100vw;
    height: 100vh;
}

.desayunos{
    position: relative;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    width: 100vw; height: 100vh;
    background-blend-mode: multiply;
    background-image: url(../img/desayunos/07.jpg);
    background-size: cover;
    background-position: center;
    margin-bottom: 5em;
}

.desayunos_txt{
    position: absolute;
    width: 500px; height: auto;
    margin: 0 2em;
    padding: 2em;
    background-color: rgba(0, 0, 0, .8);
    border-radius: 1em;
}
.desayunos_txt h2{
    margin-bottom: .2em;
    font-family: var(--avenida);
    font-size: 3.5rem;
    color: beige;
    line-height: 3.5rem;
}
.desayunos_txt p{
    color: beige;
    margin: 0; padding: 0;
    font-family: var(--roboto);
    font-size: 1.1rem;
}

.desayunos_empresariales{
    display: flex;
    width: 100%; aspect-ratio: 16/9;
    margin-top: 2em;
    border-radius: .5em;
    background-image: url('../img/desayunos/desayuno_empresarial.jpeg');
    background-size: cover;
    background-position: center;
}









    
    /* =========== Galeria ===========*/
    
    .galeria{
        display: flex; flex-wrap: wrap; justify-content: center;
        width: 100vw;
        height: auto;
    }
    .galeria div{ z-index: 0; width: 50%; height: 25vh; cursor: pointer;}
    
    .foto_1{ background-image: url(../img/grupo_desayuno.png);}
    .foto_2{ background-image: url(../img/salon_jardin_de_las_delicias-1.jpg);}
    .foto_3{ background-image: url(../img/La_Comitiva_by_Roberuto-3.jpg);}
    .foto_4{ background-image: url(../img/Desayunos_la_comitiva-1.jpg);}
    .foto_5{ background-image: url(../img/LaComitiva_Roberuto.com-112.jpg);}
    .foto_6{ background-image: url(../img/butter.jpg);}
    .foto_7{ background-image: url(../img/waflebono.jpeg); background-position: bottom;}
    .foto_8{ background-image: url(../img/spritz_lacomitiva.jpg);}
    .foto_9{ background-image: url(../img/home/comitiva-18.jpg);}
    .foto_10{ background-image: url(../img/home/comitiva-17.jpg);}
    .foto_11{ background-image: url(../img/DSC_6980-8.jpg);}
    .foto_12{ background-image: url(../img/home/comitiva-16.jpg);}
    .foto_13{ background-image: url(../img/desayuno1.jpeg);}
    .foto_14{ background-image: url(../img/coctel.jpg);}
    .foto_15{ background-image: url(../img/cava.jpg);}
    .foto_16{ background-image: url(../img/sombrilla.jpg);}
    
    /* =========== menu Digital ===========*/
    
.menu_digital{
    display: flex; justify-content: center; align-items: center;
    width: 100vw; height: 50vh;
}
.panel_qr{
    display: flex; justify-content: center; align-items: center;
    width: 50%;
    height: 100%;
}
.box_qr{  
    display: flex; justify-content: center; align-items: center;
}
.qr img { width: 100%; height: 100%; border-radius: .5em;}
.qr {
    width: 100%; 
    height: 50%;
    text-align: center;
    font-family: var(--avenida);
    font-weight: 400;
}

.panel_qr{
    display: none;
}

.panel_menu{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--gris_suave);
}
.box_menu{
    display: flex; justify-content: center; align-items: center;
    width: 80%; height: 80%;
}
.box_text{
    padding: 0;
    width: 50%; height: auto;
}
.box_text h2{
    width: 100%;
    margin-bottom: .2em;
    font-size: 2rem;
    font-family: var(--avenida);
}
.box_text p{
    text-align: right;
    margin: 0; padding: 0;
    font-size: 1rem; 
    font-family: var(--roboto);
}
.box_text a {
    text-decoration: none;
}
.box_text a:hover {
    color: var(--main);
    background-color: var(---beige_claro);
}
.box_text button{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: auto;
    margin: 1em 0;
    padding: .5em;
    font-size: 1.12rem;
    border: none;
    color: #fff;
    background-color: #403030;
}
.box_text img{ width: auto; height: 20px; margin-left: .8em;}

.box_menu_cel img{ width: 100%; height: auto;}
.box_menu_cel{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: auto;
    padding: .5em;
}



.bar_escondido{
    display: flex; flex-wrap: wrap; 
    width: 100vw; height: 100vh;
    background-blend-mode: multiply;
    background-image: url(../img/home/comitiva-16.jpg);
}
.bar_portada{
    width: 100%;
    height: 30%;
    background-image: url(../img/LaComitiva_2018_by_Roberuto-63.jpg);
}
.panel_bar{
    display: flex; align-items: center;
    width: 100%; height: 70%;
}
.bar_caja_texto{
    display: flex; flex-wrap: wrap;
    margin-left: 3em;
    width: 50%; height: min-content;
    padding: 2em;
    background-color: rgba(0, 0, 0, .8);
    border-radius: 1em;
}
.bar_caja_texto h2 {
    color: #fff;
    font-family: var(--avenida);
    font-weight: 400;
    font-size: 4rem;
    line-height: 1em;
}

.bar_caja_texto p{
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem;
    width: 100%; height: auto;
    color: var(--gris_suave);;
}

span .bar_txt_destacado{
    width: 100%;
    display: flex;
}

/* =========== Horarios ===========*/

section#horarios{
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    background-image: url("../img/LaComitiva_terraza_abril.jpg");
    background-size: cover;
    background-position: center;
}
.bg{
    position: absolute; right: 0;
    display: flex; justify-content: center; align-items: center;
    width: 50vw;
    height: 100vh;
    color: var(--main);
    background-color: rgba(0, 0, 0, .5);
}
.horarios_box{
    display: flex; flex-wrap: wrap;
    width: 50%;
    height: min-content;
    padding: 3em;
    border-radius: .8em;
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid bisque;
}
.horario_titulo{
    font-family: var(--avenida);
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: 100;
    color: bisque;
}
.horarios_txt h3{
    margin: 0;
    padding: 0;
    padding-bottom: .5em;
    font-weight: 100;
    font-size: 3rem;
    font-family: var(--avenida);
    color: #fff;
    text-decoration: underline;
}
    
/* =========== sustentable ===========*/

.sustentable{
display: flex; justify-content: center; align-items: center;
width: 100vw; height: auto;
padding: 3em;
background-color: var(--secundario);
box-sizing: border-box;
}

.panel_sustentable{
    width: 100%; height: 100%;
    padding: 0 2em;
}
.panel_sustentable h2{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    color: #fff;
    font-family: var(--avenida);
    font-weight: 400;
    font-size: 3rem;
    text-align: center;
    line-height: .8em;
    box-sizing: border-box;
}

.panel_sustentable h3{
    padding-bottom: .8em;
    color: #fff;
    font-size: .9em;
    font-weight: 400;
    text-align: center;
}
.sustentable_box_foto{
    width: 100%; height: auto;
    margin: 2em 0;
    line-height: .8em;
    cursor: pointer;
}
.s1{background-image: url(../img/cultivo1.jpg);}
.s2{background-image: url(../img/cultivo2.jpg);}
.s3{background-image: url(../img/cultivo3.jpg);}

.sustentable_foto{
    margin: 0;
    width: 100%; aspect-ratio: 1/1;
    border-radius: .5em;
    margin-bottom: .5em;
}
.sustentable_pie_foto{
    padding: .4em 0 1em 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2em;
}

/* =========== trabajo ===========*/
.trabajo{
    display: flex; flex-wrap: wrap;
    width: 100vw; height: 100vh;
}
.panel_trabajo_foto{
    width: 100%; height: 40%;
    background-image: url(../img/trabaja_con_nosotros.jpg);
    border-top: 5px solid var(--blanco);
    cursor: pointer;
}
.panel_trabajo_texto{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 60%;
    padding: 2.5em;
    box-sizing: border-box;

    background-color: #000;
}
.box_trabajo_texto{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; height: auto;
    box-sizing: border-box;
}
.box_trabajo_texto h2{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    margin-bottom: .5em;
    color: var(--main);
    font-family: var(--avenida);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: .8em;
    color: #FFF;
    text-align: center;
    box-sizing: border-box;
}
.box_trabajo_texto p{
    width: 100%; height: auto;
    font-size: 1rem;
    color: #fff;
    line-height: 1.1em;
    text-align: center;
}
.box_trabajo_texto a{ text-decoration: none;}
.box_trabajo_texto img{ width: auto; height: 1.3em; margin-left: 1em;}
.box_trabajo_texto button{
    display: flex; justify-content: center; align-items: center;
    width: min-content; height: auto;
    margin: 1.5em 0 1em 0;
    padding: .5em 2em;
    font-size: 1.2rem;
    border: none;
    color: #fff;
    background-color: #403030;
    border-radius: .4em;
}


/* =========== ubicacion ===========*/
.ubicacion{
    display: flex; flex-wrap: wrap;
    width: 100vw; height: 100vh;
    box-sizing: border-box;
}

.ubicacion_grupo{
    display: flex; flex-wrap: wrap;
    width: 100%; height: 100%;
    background-image: url('../img/mantel.png');
    background-size: contain;
}
.panel_ubicacion_foto{ 
    width: 100%; height: 40%;
    box-sizing: border-box;
}
.panel_ubicacion_texto{
    width: 100%; height: 60%;
    box-sizing: border-box;
    background-color: rgba(243, 234, 220, .85);
}
.box_ubicacion_texto{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; height: 100%;
    padding: 2em;
    box-sizing: border-box;
}
.pack_ubicacion_texto{
    width: 100%; height: auto;
}
.pack_ubicacion_texto h2{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    margin-bottom: .5em;
    font-family: var(--avenida);
    font-size: 6rem;
    font-weight: 400;
    color: #000;
    line-height: .8em;
    text-align: center;
    box-sizing: border-box;
}
.pack_ubicacion_texto p{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; height: auto;
    color: #000;
    font-size: 2rem;
    line-height: 1.1em;
    text-align: center;
}
.btn_light{
    width: 100%; height: auto;
    margin: 1em 0;
    padding: .2em;
    font-family: var(--avenida);
    font-weight: 400;
    font-size: 2rem;
    color: var(--main);
    background-color: var(---beige_claro);
    border: none;
}

.iframe_top{
    position: absolute;
    width: 100%;
    height: 60px;
    background-color: #000;
    border: none;
    outline: none;
}


/* =========== pie ===========*/
.pie{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: auto;
    padding: 2em 1em;
    background-color: #000;
}

.box_pie{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: auto;
    box-sizing: border-box;
}
.box_pie div{ margin: 0 .5em;}
.pie_logo img{ width: 100%; height: auto;}
.pie_logo{
    width: 35%; height: auto;
    box-sizing: border-box;
}
.pie_firma img{ width: 100%; height: auto; filter: brightness(100);}
.pie_firma{
    display: flex; justify-content: center;
    width: 100%; height:30px;
    box-sizing: border-box;
}
.pie_redes img{ width: auto; height: 25px; margin: .5em; filter: brightness(100);}
.pie_redes{
    display: flex; justify-content: flex-end; align-items: center;
    width: 35%; height: auto;
    box-sizing: border-box;
}

.popup div{ display: flex; flex-wrap: wrap;}
.popup img{ 
    width: 100vw; height: auto;
    border-radius: .8em;
    aspect-ratio: 9 / 16;
}
.popup span{
    display: inline;
    width: auto;
    padding: .5em 1em;
    font-size: .8rem; 
}
.popup{
    z-index: 9;
    position: fixed; top: 0; left: 0;
    display: flex; justify-content: center; align-items: center;
    width: 100vw; height: 100vh;
    color: var(--gris_suave);
    background-color: rgba(0, 0, 0, .9);
    cursor: pointer;
}
}

/* end 480 */
































@media screen and ( min-width: 500px ) {

    .nav{ 
        z-index: 8;
        position: absolute;
        width: 0; height: 100%;
        right: 0; 
        padding: 0; 
    }
.box_nav{ width: 20%;}
.box_nav ul{ margin-top: 0;}


.icon_menu_burger{
    width: 30px; height: 30px;}


    /* =========== portada ===========*/
.portada_logo{
    position: absolute;
    display: flex; justify-content: center; align-items: center;
    width: 50vw; height: 100vh;
    margin: 0;
    padding: 8em;
    box-sizing: border-box;
}

/* =========== historia ===========*/
.historia { flex-wrap: nowrap; height: auto;}
.wrap_historia{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: row-reverse;
    width: 100%; height: 100%;
    margin: 1em;
    padding: 1em;
}

.panel_historia_imagen { 
    width: 50%; height: 500px;
    margin: 2em;
}

.panel_historia_texto { 
    width: 40%; height: 100%;
    padding: 0 3em; 
}

.box_historia_texto h2{ font-size: 3rem;}
.box_historia_texto p { font-size: 1.3rem; }

/* =========== Galeria ===========*/
.galeria div{ width: 24.65vw; height: 50vh;}
.galeria{ height: auto; box-sizing: border-box;}

/* =========== menu Digital ===========*/
.menu_digital{ width: 100vw; height: 100vh;}
.panel_qr{display: flex;}
.panel_menu{width: 50%;}
.box_qr img{margin-bottom: .5em; box-sizing: border-box;}
.box_qr{ 
    width: 50%;
    font-size: 3rem; 
    line-height: .8em;
}
.box_text{ height: min-content;}
.box_text h2 { font-size: 3rem;}
.box_text p { font-size: 1.3rem; margin-right: 2em;}
.box_text button {display: none;} 

.qr{ font-size: 2.3rem; line-height: 2rem;}

    /* =========== bar escondido ===========*/
    .bar_escondido{ display: flex;}
    .bar_portada{ width: 40%; height: 100%;}
    .panel_bar{ width: 60%; height: 100%;}
    .bar_caja_texto p{ font-size: 1.2rem;}

    /* =========== Horarios ===========*/

    .horarios{ flex-wrap: nowrap; flex-direction: row-reverse; align-items: center;}
    .panel_horario_imagen{width: 70%; height: 100%;}
    .panel_horario_texto{ align-items: center; width: 40%; height: min-content; margin: 2em;}
    .horario_caja_texto{ flex-wrap: wrap; width: 80%;}
    .horario_caja_texto p{ font-size: 1.2em;}

    /* =========== sustentable ===========*/
    .panel_sustentable{
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        width: 100%; height: auto;
        padding: 0;
    }
    .sustentable_grupo{
        display: flex;
        width: 100%; height: auto;
    }
    .sustentable_box_foto{ margin: 1em;}
    .panel_sustentable h2{ margin-bottom: .5em;}
     .sustentable_pie_foto{font-size: 1.2rem; font-weight: 300;}

     /* =========== trabajo ===========*/
     .trabajo{ display: flex; flex-wrap: nowrap; flex-direction: row-reverse;}
     .panel_trabajo_foto{ width: 60%; height: 100%;}
     .panel_trabajo_texto{ width: 40%; height: 100%; padding: 4em;}
     .box_trabajo_texto h2{font-size: 2.3rem;}
     .box_trabajo_texto p{font-size: 1.1rem;}

     /* .bar_escondido, 
     .trabajo {
         display: none;
        } */

    /* =========== ubicacion ===========*/
    .ubicacion{ flex-wrap: nowrap;}
    .ubicacion_grupo{ flex-wrap: nowrap; flex-direction: row-reverse;}
    .panel_ubicacion_foto{width: 60%; height: 100%;}
    .panel_ubicacion_texto{width: 40%; height: 100%; padding: 0;}
    .pack_ubicacion_texto p{font-size: 1.5rem;}
    .iframe_top{ height: 70px;}
    
    /* =========== pie ===========*/
    .box_pie{width: 70%; height:100%;}

    .popup div{ display: flex; flex-wrap: wrap;}
.popup img{ width: 100%; height: auto; border-radius: .8em;}
.popup span{
    display: inline;
    width: auto;
    padding: .5em 1em;
    font-size: 1.2rem; 
}
.popup{
    z-index: 1;
    display: flex; justify-content: center; align-items: center;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    padding: 1em;
    color: var(--gris_suave);
    background-color: rgba(0, 0, 0, .9);
    cursor: pointer;
}

} /* end 1200 */

.hide{opacity: 0; display: none; transition: all .5s ease;}
.bold{ display: inline; width: 100%; font-weight:600;}

.phone img{ margin-right: .5em;}
.phone a {
    display: flex; justify-content: center; align-items: center;
    color: var(--main);
    text-decoration: none;
}
hr.separador{ width: 50%; height: auto;}

.links{
    width: 100%; height:auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    color:var(--main);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.3rem;
    color: grey;
    margin: .5em 0;
}

.entrada_suave{
    opacity: 1;
    animation-name:entrada_suave;
    animation-duration: .3s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    }
    @keyframes entrada_suave{
        0%  {opacity: 0; background-color: transparent;}
        100%{opacity: 1; background-color: transparent}
    }

    .pop_cover{
        display: flex; flex-wrap: wrap;
        width: min-content;
    }

    .pop_vertical img{
        width: auto;
        height: 500px;
        margin: 1em;
        padding: 1em;
        aspect-ratio: 9 / 16;
        border-radius: 1em;
        border:2px solid rgba(255, 255, 255, .2); box-sizing: border-box;
    }

    .pop_horizontal img{
        width: 600px;
        height: auto;
        aspect-ratio: auto;
        margin: 1em;
        padding: 1em;
        border:2px solid rgba(255, 255, 255, .2); box-sizing: border-box;
    }

    .pop_cuadrado img{
        width: auto;
        height: 500px;
        aspect-ratio: 1 / 1;
        margin: 1em;
        padding: 1em;
        border:2px solid rgba(255, 255, 255, .2); box-sizing: border-box;
    }

    .pop_cover span{
        margin: 0;
        padding: 0;
    }


    @media screen and ( max-width: 500px ) {
        
        .logo_comitiva{
        width: 50%;
        height: 80px;
        padding: 1em;
        border-radius: 0 0 1em 0;
    }

    .mouse_scroll{display: none;}

    .panel_menu{
        padding: 0;
        box-sizing: border-box;
    }
    .box_menu{
        width: 100%;
        padding: 0;
    }
    .box_menu_cel{
        width: 130px;
    }


    .historia{
        height: 75vh;
    }

    .panel_historia_texto{
        z-index: 1;
    }

    .galeria{
        background-image: linear-gradient(rgb(22, 18, 18) , rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1)) ;
    }

    

    .box_text h2{
        text-align: right;
    }
    .box_menu_cel{
        margin-left: 1em;
    }


    .desayunos_box{
        position: relative;
        display: flex; flex-wrap: wrap;
        width: 100vw;
        height: 100vh;
    }
    
    .desayunos{
        position: relative;
        display: flex; flex-wrap: wrap; 
        width: 100vw; height: 50vh;
        background-blend-mode: multiply;
        background-image: url(../img/desayunos/07.jpg);
        background-size: cover;
        background-position: center;
        margin-bottom: 0;
    }
    
    .desayunos_txt{
        position: relative;
        width: 100vw; height: 50vh;
        margin: 0;
        margin-top: 0;
        box-sizing: border-box;
    }
    
    .desayunos_txt h2{
        font-size: 2rem;
        line-height: 2rem;
    }

    .desayunos_txt p{
        color: beige;
        margin: 0; padding: 0;
        font-family: var(--roboto);
        font-size: 1rem;
    }

    .desayunos_empresariales{ display: none;}


    section.bar_escondido{
        height: 50vh;
    }

    .panel_bar{
        position: relative;
        display: flex; align-items: flex-start;
        width: 100%;
        height: 100%;
    }

    .bar_caja_texto {
        display: flex; flex-wrap: wrap; align-items: flex-start;
        width: 50%;
        height: 100%;
        margin: 0;
        padding: 1em .2em 1em 1em;
        overflow: scroll;
        border-radius: 0;
        box-sizing: border-box;
        flex-shrink: 0;
        align-items: stretch;
        margin-bottom: 5px;
    }

    .bar_caja_texto h2{
        width: 100%;
        height: min-content;
        margin: .5em 0 0em 0;
        font-size: 2.6rem;
    }
    .bar_caja_texto p{
        display: flex; align-items: flex-start;
        width: 100%;
        height: 250px;
        font-size: 1rem;
        margin-left: 0;
        padding: 0;
        overflow: scroll;
        box-sizing: border-box;
    }

    /* horarios */
    .bg{
        width: 100%;
        height: min-content;
    }
    .horarios_box{
        width: 100%;
        margin: 1em;
        padding: 1em;
    }


    .reserva_titulo{
        font-size: 4rem;
        margin-bottom: .3em;
    }

    

    
    
    
    .sustentable_pie_foto{font-size: .9rem; font-weight: 300;}
    .pack_ubicacion_texto h2{ font-size: 4rem;}
    .pack_ubicacion_texto p{ font-size: 1.4rem;}



        .pop_cuadrado img{
            height: 380px;
        }
        .pop_horizontal img{
            width: 380px;
        }
        .pop_vertical img{
            width: 380px;
        }
        .pop_cover span{
            display: block;
            width: auto;
            margin: 0;
            padding: 0 1em 0 0;
            margin-left: 2em;
            font-size: 1.2rem;
        }
        .historia_firma{
            margin-top: 2em;
            height: 35px;
        }
    }