@media (max-width: 100vh) {
    .textos, .filtro2 {
        width: 100%;
    }
    .textos{
        
        grid-template: 
        ". . ."auto
        ". TIT ."max-content
        ". BOT ."max-content
        ". . ."auto/
        auto 90% auto;
    }
    .textos h1{
        font-size: 4vh;
    }
   .servicio{
    width: 100%;
   }
    .pedido{
        background-color: white;
            border: none;
            text-decoration: none;
            margin: 0;
            font-family: "Comfortaa", serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-size: 2vh;
            display: flex;
            justify-content: baseline;
            animation: aparecer3 2s both;
            min-width: 5vh;
            min-height: 4vh;
           display: grid;
           grid-template:
           ". . . . ."auto
        
           ". FOTO . TIT  ."max-content
           ". FOTO . OP  ."max-content
           ". FOTO . OP2  ."max-content

           ". FOTO . TXT  ."5vh
           ". FOTO . BOT ."max-content
           ". . . . ."auto/
           auto 20vw 1vh max-content auto;

        }
        
        .pedido h1{
            font-size: 3vh;
        }
        #sidebar{
            background-color: rgba(0, 0, 0, 0.308);
                transition: transform 0.5s ease-in-out;
                z-index: 99;
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0%;
                top: 0%;
                display: grid;
                /* background-color: black; */
            -webkit-backdrop-filter: blur(5vh);
            backdrop-filter: blur(5vh);
                grid-template:
                ". . ." 15vh
                ". TIT ."max-content
                ". BOT ."max-content

                ". . ." 1vh

                ". LINK ."max-content
                ". . ." 1vh/
                 auto 100% auto  ;
                transform: translateX(110%);
            }
            #sidebar #total {
                text-align: center;
                font-size: 5vh;
            }
            #sidebar .botonegro {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }
          
        
@media (max-width: 60vh) {
    .producto details.botonegro3,.producto details.botonegro3 .checkboxes{
              
        width: 18vh;
        
    }
    .producto .botonegro2, .producto .botonegro3, .producto .minititulo,.producto .botonegro, .producto .botonegro2{
       
        width: 20vh;
    }
    .producto{
        grid-area: CON;
        gap: 0.5vh;
        padding: 0vh;
       
        cursor: default;
        position: relative;
        display: grid;
        width: 20vh;
        max-height: 50vh;
       /* background-color: #e7e7e7;*/
        grid-template: 
        "IMG " 20vh
        "TIT " max-content
        "TXT " max-content
        "BOT2 "max-content
        "BOT3 "max-content
        "BOT "max-content
    
        /
        20vh;
    
    }
}
}
@media (max-width: 50vh) {
    .pedido .imagenp{
        display: none;
    }
    .pedido{

           grid-template:
           " . . ."auto
        
           " . TIT  ."max-content
           " . OP  ."max-content
           " . OP2  ."max-content
           " . TXT  ."5vh
           " . BOT ."max-content
           ".  . ."auto/
           auto  max-content auto;

        }
 }