.producto{

    max-width: 170px;
    display: flex;
    flex-flow: column;
    border-radius: 6px;
    box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255 );
   cursor: pointer;
   transition-property: box-shadow;
   transition-duration: 0.5s;
margin-top: 5px;

}
.producto:hover{
    box-shadow:0 0 1.5em rgba(0, 0, 0, 0.2) ;
}
.producto > img{
    width: 100%;
    object-fit: cover;
/* estas propiedade son para que la imagen no se deforme */
}
.informacion{
    border-top: 1px solid gray;
    padding: 1em;
    display: flex;
    flex-flow: column;
}
.informacion * + * {
    margin-bottom: 0.5em;
}

.tipo-envio{
   
    color: black;
    font-weight: 600;
    max-width: max-content;
    padding: 0 0.2em;
    border-radius: 3px;
}
.precio{
    font-size: 1.5em;
}
.precio-envio{
    color: #25d366;
}
.precio-descuento{
    color: red;
    font-size: 0.5em;
   
}
.descripcion, .ubicacion{
    font-weight: 300;

}


.precio-envio,  .descripcion, .ubicacion{
    font-size: 0.6em;
}
/* .calificacion, .ubicacion{
    antes en el font size de arriba iva 0.9em
    transition-duration: 0.3s;
    transition-property: opacity;
    opacity: 0;

} */

.producto:hover .calificacion,
.producto:hover .ubicacion{
    opacity: 1;
}

/* opacidad 0 y opacidad 1 es para mostrar o esconder cundo tengamos el cursor encima */
.calificacion > * {
    margin: 0;
}
.tipo-envio, .calificacion {
    font-size: 0.8em;
}
.calificacion > span:first-child{
    color: rgb(52, 131,250);
}