.ruta_site_map {
    
    font-size:                  .8em;
    margin:                     1em auto 2em;
    text-align:                 left;
    width:                      90%;
    
}
.fondo_titulo {
    
    align-items:                center;
    background:                 #000;
    background-image:           url(../images/fondo_titulos.jpg);
    background-position:        center;
    background-repeat:          no-repeat;
    color:                      white;
    display:                    flex;
    font-family:                sans-serif;
    font-weight:                300;
    justify-content:            center;
    margin:                     1em auto;
    min-height:                 100px;
    text-align:                 center;
    width:                      100%;
    
}
.productos {
    
    box-sizing:                 border-box;
    display:                    flex;
    flex-wrap:                  wrap;
    justify-content:            center;
    margin:                     auto;
    margin-bottom:              100px;
    position:                   relative;
    width:                      95%;
    
}
.productos > a {
    
    box-shadow:                 5px 5px 5px #d8e2ef;
    box-sizing:                 border-box;
    cursor:                     pointer;
    font-family:                sans-serif;
    margin:                     15px 1%;
    padding:                    0;
    width:                      48%;
    
}
.productos > a .caja .foto {
    
    width:                      95%;
    margin:                     auto;
    
}
.productos > a .caja .foto img {
    
    margin:                     auto;
    height:                     200px;
    object-fit:                 cover;
    width:                      100%;
    
}
.productos > a .caja .titulo {
    
    font-size:                  .75em;
    overflow-wrap:              break-word;
    padding:                    1.5em .5em;
    text-align:                 center;
    
}
.productos > a .caja .precio {
    
    color:                      #000;
    font-size:                  1em;
    font-weight:                bold;
    padding:                    0 .5em 1em;
    text-align:                 center;
    
}
.productos > a .caja .precio button {
    
    background:                 #01babc;
    border:                     0;
    box-sizing:                 border-box;
    color:                      white;
    font-size:                  .7em;
    outline:                    none;
    padding:                    .5em 0;
    width:                      100%;
    
}
.productos > a .caja .boton_agregar {
    
    box-sizing:                 border-box;
    display:                    block;
    margin-top:                 1em;
    width:                      100%;
    
}
.productos > a .caja .boton_agregar button {
    
    background:                 #01babc;
    border:                     0;
    box-sizing:                 border-box;
    color:                      white;
    font-size:                  1em;
    outline:                    none;
    padding:                    .5em 0;
    width:                      100%;
    
}
@media only screen and ( min-width: 360px ) {
    
    .productos > a .caja .precio {
    
        font-size:                  1.25em;
        padding:                    0 .5em 1em;
        
    }
    
}
@media only screen and ( min-width: 768px ) {
    
    .ruta_site_map {
    
        font-size:                          .9em;
    
        
    }
    
    .productos > a {
        
        margin:                             1% 1.5%;
        width:                              30%;
        
    }
    .productos > a .caja .foto {
        
        width:                              95%;
        
    }
    
}

@media only screen and ( min-width: 1024px ) {
    
    .productos > a {
        
        margin:                                 1% 1.5%;
        width:                                  22%;
        
    }
    
}

@media only screen and ( min-width: 1400px ) {
    
    .fondo_titulo {
        
        min-height:                                 150px;
        
    }
    .productos > a {
        
        margin:                                     1% 2.5%;
        width:                                      250px;
        
    }
    
}