/* =====================================
   CELULAR
===================================== */

@media (max-width:767px){

    .top-bar{

        font-size:14px;

        overflow:hidden;

        white-space:nowrap;

    }

    .header{

        padding:5px 0;

    }

    .logo{

        width:80%;

        max-width:220px;

    }

    .menu-categorias{

        gap:0;

        padding:0;

    }

    .menu-categorias a{

        flex:1;

        min-width:0;

        text-align:center;

        font-size:15px;

        padding:12px 0;

        border-radius:0;

    }

    .catalogo{

        padding:10px;

    }

    .productos{

        grid-template-columns:1fr;

        gap:15px;

    }

}

/* =====================================
   TABLET
===================================== */

@media (min-width:768px){

    .logo{

        max-width:320px;

    }

    .productos{

        grid-template-columns:
        repeat(2,1fr);

    }

}

/* =====================================
   DESKTOP
===================================== */

@media (min-width:1200px){

    .logo{

        max-width:400px;

    }

    .productos{

        grid-template-columns:
        repeat(4,1fr);

    }

}