@layer components{
    .card{
        @apply bg-gray-200 rounded-xl p-6 overflow-hidden
    }

    .card .card-title{
        @apply text-2xl font-bold mb-2
    }

    .card .card-body{
        @apply text-gray-800 leading-relaxed mb-6
    }

    .card .card-button{
        @apply text-blue-500 px-4 py-3 bg-gray-300 rounded hover:bg-blue-500 hover:text-white transition
    }
    
    .card .card-link{
        @apply text-blue-500 hover:text-blue-600 font-medium
    }

    .card .card-footer{
        @apply border-t border-gray-300 pt-6 flex items-center justify-between
    }

    .card .card-header{
        @apply border-b border-gray-300 pb-4 mb-3 flex items-center justify-between
    }

    .card .card-img{
        @apply w-full h-64 object-cover
    }

    .card .card-overlay{
        @apply absolute top-0 left-0 w-full h-full z-10 bg-gradient-to-b from-transparent to-black
    }

      /* Cards Animadas */
.card-animated
{
    position: relative;
    width: 320px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 30px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.card-animated::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50%;
    height: 100%;
    background-color: #d81b60;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}


.card-animated::after
{
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50%;
    height: 100%;
    background-color: #d81b60;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    filter: blur(30px);
    transition: 0.5s;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-filter: blur(30px);
}

.card-animated:hover::before,
.card-animated:hover::after
{
    transform: skewX(0deg);
    left: 20px;
    width: calc(100% - 20px);
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -o-transform: skewX(0deg);
}

.card-animated__content
{
    z-index: 1;
}

.card-animated__content
{
    position: relative;
    left: 20px;
    padding: 20px 60px;
    text-align: left;
    text-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px  rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: 0.5s;
    color: #fff;
    z-index: 1;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transform: 0.5s;
    -moz-transform: 0.5s;
    -ms-transform: 0.5s;
    -o-transform: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.card-animated:hover .card-animated__content
{
    left: -25px;
    padding: 60px 60px;
}

}