﻿@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fontGoogle {
    font-family: "Fleur De Leah", cursive;
    font-weight: 400;
    font-style: normal;
}

.googleRegular {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
}

.googleBold {
    font-family: "Tangerine", cursive;
    font-weight: 700;
    font-style: normal;
}

.textGuinda {
    color: #800000;
    font-size: 36px
    
}

.bordeDorado {
    border: 2px solid #800000
}

.FunnelFont {
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.responsiveText {
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    line-height: 1.4;
}

.fondoTarj {
    background-color: #371a24
}


.hoverBounceGuinda {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    color: inherit;
}

    .hoverBounceGuinda:hover {
        transform: translateY(-5px);
        color: #800000; /* guinda */
    }

.card-img-wrapper {
    position: relative;
    display: inline-block;
}

    .card-img-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
        pointer-events: none;
    }



.card-img-overlay h5,
.card-img-overlay p {
    opacity: 0;
    animation: fadeSlideUp 1s ease-out forwards;
}

.card-img-overlay h5 {
    animation-delay: 0.3s;
}

.card-img-overlay p:nth-of-type(1) {
    animation-delay: 0.6s;
}

.card-img-overlay p:nth-of-type(2) {
    animation-delay: 0.9s;
}
