/*=========================================================
    XALTILOLLI 2.0
    RESPONSIVE
=========================================================*/


/*=========================================================
    1200 px
=========================================================*/

@media (max-width:1800px){

:root{

    --museum-width:820px;

    --museum-scale:30%;

    --room-width:340px;

    --room-height:240px;

    --room-gap:18px;

    

}

.container{

    width:min(100% - 2rem,var(--container-width));

}

}



/*=========================================================
    992 px
=========================================================*/

@media (max-width:992px){

:root{

    --museum-width:720px;

    --museum-scale:30%;

    --room-width:320px;

    --room-height:210px;

    --title-size:2.4rem;

    --space-xl:5rem;


    --intro-logo-width:420px;

    --intro-text-width:500px;

    --intro-caption-width:330px;

}

.navigation{

    grid-template-columns:

        60px

        1fr

        60px;

}

}



/*=========================================================
    768 px
=========================================================*/

@media (max-width:768px){

:root{

    --museum-width:100%;

    --museum-scale:80%;

    --room-width:280px;

    --room-height:200px;

    --arrow-size:52px;

    --dot-size:8px;

    --space-lg:2.5rem;

}

.header{

    min-height:72px;

}

.logo img{

    height:44px;

}

.navigation{

    margin-top:2rem;

}

.roomTrack{

    height:200px;

}

.routeButton{

    width:100%;

}

}



/*=========================================================
    576 px
=========================================================*/

@media (max-width:576px){

:root{

    --museum-scale:80%;

    --room-width:200px;

    --room-height:140px;

    --title-size:2rem;

    --band-height:34px;

    --band-text-size:.72rem;


    --intro-logo-width:370px;

    --intro-text-width:400px;

    --intro-caption-width:330px;

    --route-width:350px;
    --route-height:100px;


}

.container{

    width:min(100% - 1.2rem,var(--container-width));

}

.roomTrack{

    height:170px;

}

.roomDescription{

    width:100%;

}

#roomText{

    font-size:.95rem;

    line-height:1.7;

}

}



/*=========================================================
    420 px Cel de lucia
=========================================================*/

@media (max-width:420px){

:root{

    --museum-scale:80%;

    --room-width:220px;

    --room-height:140px;

    --arrow-size:44px;

    --title-size:1.7rem;

}

.navigation{

    grid-template-columns:

        44px

        1fr

        44px;

}

.roomTrack{

    height:145px;

}

}

/*=========================================================
    HEADER RESPONSIVE
=========================================================*/

@media (max-width:992px){

    .header{

        flex-wrap:wrap;

        height:auto;

        min-height:var(--header-height);

    }

    :root{

    --navigator-gap:80px;

}


    /*-----------------------------
        Mostrar hamburguesa
    ------------------------------*/

    .header__toggle{

        display:block;

    }



    /*-----------------------------
        Ocultar navegación
    ------------------------------*/

    .header__nav{

        display:none;

        width:100%;

        order:4;

        margin-top:1rem;

    }


    /*-----------------------------
        Abrir menú
    ------------------------------*/

    .header__nav.open{

        display:block;

    }


    /*-----------------------------
        Menú vertical
    ------------------------------*/

    .menu{

        flex-direction:column;

        gap:var(--mobile-menu-gap);

        align-items:center;

        justify-content:center;

        width:100%;

       
        background:var(--mobile-menu-background);

        padding:1rem;

        border-radius:12px;

    }

    

    /*-----------------------------
        Dropdown
    ------------------------------*/

    .dropdown{

        position:static;

        width:100%;

        opacity:1;

        

        visibility:visible;

        pointer-events:auto;

        transform:none;

        background:transparent;

        box-shadow:none;

        padding:.5rem 0 0 1rem;

        display:none;

    }


    .menu__item--dropdown.open .dropdown{

        display:block;

    }

    /*---------------------------------------------
    ITEMS DEL MENU
----------------------------------------------*/

.menu__item{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}


/*---------------------------------------------
    BOTONES
----------------------------------------------*/

.menu__item>a,
.menu__button{

    width:auto;

    justify-content:center;

    text-align:center;

}


/*---------------------------------------------
    DROPDOWN
----------------------------------------------*/

.dropdown{

    width:100%;

    padding:1rem 0 0 0;   /* <-- quita el padding izquierdo */

    text-align:center;

}


/*---------------------------------------------
    LINKS DEL DROPDOWN
----------------------------------------------*/

.dropdown a{

    display:block;

    width:100%;

    text-align:center;

    padding:.75rem 1rem;

}

.dropdown{

    width:85%;

    margin:auto;

}
}

@media(max-width:768px){

.temporalidad{

    padding:30px 15px 10px;

}

.temporalidad__titulo{

    font-size:2rem;

}

.temporalidad__descripcion{

    font-size:.95rem;

}

.temporalidad__imagen img{

    max-width:60%;

}

}

@media(max-width:768px){

.navTemporalidad{

    width:50px;

    height:50px;

    font-size:2.3rem;

}

.navTemporalidad--izquierda{

    left:0;

}

.navTemporalidad--derecha{

    right:0;

}

}

/*=========================================================
    HEADER — RESPONSIVE
=========================================================*/

@media (max-width:992px){

   

    .header__left{

        flex:0 0 auto;

    }


    .header__brand img{

        width:105px;

    }



    .header__logos img{

        height:55px;

        max-width:130px;

    }


   

    .header{
    justify-content:flex-start;
}

.header__logos{
    gap:4px;
    margin-left:4px;
}

.header__toggle{
    margin-left:auto;
}

}


/*=========================================================
    HEADER — MÓVIL
=========================================================*/


/*=========================================================
    HEADER — TELÉFONOS PEQUEÑOS
=========================================================*/

@media (max-width:576px){

    .header{

        padding:.5rem .45rem;

    }


    .header__brand img{

        width:68px;

    }


    .header__logos{

        gap:.2rem;

    }


    .header__logos img{

        height:45px;

        max-width:68px;

    }


    .header__toggle{

        flex:0 0 34px;

        width:34px;

    }


    .header__toggle span{

        width:22px;

        height:3px;

    }

}