/* ==========================================================
   RESPONSIVE.CSS
   Adaptación para tablets y móviles
========================================================== */




/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width:1024px) and (orientation:portrait){

    .layout {
        display: flex;
        flex-direction: column;
        height: auto;
    }


    .sidebar{

        position:static;
        width:100%;
        height:auto;

        overflow-x:auto;
        overflow-y:hidden;

        padding:10px 15px;

        white-space:nowrap;

    }

    .sidebar ul{

        display:flex;

        flex-direction:row;

        flex-wrap:nowrap;

        gap:20px;

        margin:0;
        padding:0;

        list-style:none;

    }


    .sidebar li{

        flex:0 0 auto;

        margin:0;

    }

    .sidebar a{

        display:block;

        padding:6px 0;

        font-size:15px;

        text-decoration:none;

    }

    /* Ya no hace falta */

    .menu-toggle{

        display:none;

    }

    .menu-overlay{

        display:none;

    }

    /* Contenido */

    .content{

        flex:1;

        overflow:hidden;

    }

}


/* ==========================================================
   MÓVIL HORIZONTAL
========================================================== */

@media (max-width:1024px) and (orientation:landscape){


    .header{

        display:none;

    }

    .layout{

        display:grid;

        grid-template-columns:170px 1fr;

        height:100dvh;

    }

    .sidebar{

        position:relative;

        left:0;
        top:0;

        width:auto;

        height:100%;

        overflow-y:auto;

        box-shadow:none;

    }


    .content{

        height:100%;

        overflow:hidden;

    }

    /* Galería */

    .gallery-container{

        height:100%;

    }

    /* Menú hamburguesa */

    .menu-toggle{

        display:none;

    }

    .menu-overlay{

        display:none !important;

    }
    .swiper{

        height:92dvh;

    }
}


/* ==========================================================
   ESCRITORIOS MUY GRANDES
========================================================== */

@media (min-width:1600px){

    .content{

        padding:40px;

    }

}