@keyframes zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* PRODUCT CARD */

.product-card{
    background:#f4f4f5;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-self:start;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 35px 70px rgba(0,0,0,.28);
}

/* IMAGEN */

.product-image{
    position:relative;
    height:340px;
    overflow:hidden;
    flex-shrink:0;
}

.product-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}

.img-front{
    opacity:1;
}

.img-back{
    opacity:0;
    transform:scale(1.05);
}

.product-card:hover .img-front{
    opacity:0;
    transform:scale(1.05);
}

.product-card:hover .img-back{
    opacity:1;
    transform:scale(1);
}

/* CONTENIDO */

.product-card .p-5{
    display:flex;
    flex-direction:column;
    height:200px;
    padding:22px;
}

.product-card h3{
    height:58px;
    overflow:hidden;
    line-height:1.25;
}

.product-card p.text-zinc-500{
    height:52px;
    overflow:hidden;
    line-height:1.45;
}

.product-card p.text-2xl{
    margin-top:auto;
}

/* BOTÓN QUE EXTIENDE LA CARD HACIA ABAJO */
.quick-view{

    max-height:0;

    opacity:0;

    overflow:hidden;

    padding:0 22px;

    background:#f4f4f5;

    transition:

        max-height .38s ease,

        opacity .25s ease,

        padding .38s ease;

}
.product-card:hover .quick-view{
    max-height:95px;
    opacity:1;
    padding:0 22px 22px;
}
.quick-view-btn{
    width:100%;
    height:56px;
    background:#111;
    color:white;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    transition:.25s ease;
}

.quick-view-btn:hover{
    background:#000;
    transform:scale(1.03);
}

.typing-dot{
    animation:typingBounce 1s infinite ease-in-out;
}

.typing-dot:nth-child(2){
    animation-delay:.15s;
}

.typing-dot:nth-child(3){
    animation-delay:.3s;
}

@keyframes typingBounce{

    0%,80%,100%{

        opacity:.3;

        transform:translateY(0);
    }

    40%{

        opacity:1;

        transform:translateY(-4px);
    }
}