.producto-img-wrap {
    position: relative;
    overflow: hidden;
}

.producto-img-wrap .producto-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .25s ease;
}

.producto-img-wrap .producto-img-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    height: 100%;
    object-fit: cover;
}

/* Desktop: rollover */
@media (hover: hover) and (pointer: fine) {
    .producto-card:hover .producto-img-hover {
        opacity: 1;
    }

    .producto-card:hover .producto-img-main {
        opacity: 0;
    }
}

/* Celular: on tap */
@media (hover: none), (pointer: coarse) {
    .producto-card.is-tapped .producto-img-hover {
        opacity: 1;
    }

    .producto-card.is-tapped .producto-img-main {
        opacity: 0;
    }
}