.bcn-icon-nav-card[data-bg-inicial][data-bg-final] > a::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--bg-inicial) 0%, var(--bg-final) 100%);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    z-index: 0;
    pointer-events: none;
    border-radius: 0.75rem;
}

.bcn-icon-nav-card[data-bg-inicial][data-bg-final] > a > * {
    position: relative;
    z-index: 1;
}

.bcn-icon-nav-card[data-bg-inicial][data-bg-final] > a > div:last-child {
    z-index: 2;
}

@media (hover: hover) and (min-width: 768px) {
    .bcn-icon-nav-card[data-bg-inicial][data-bg-final]:hover > a::before {
        opacity: 1;
    }

    .bcn-icon-nav-card[data-bg-inicial][data-bg-final]:hover > a h3,
    .bcn-icon-nav-card[data-bg-inicial][data-bg-final]:hover > a p {
        color: #fff;
    }

    .bcn-icon-nav-card[data-bg-inicial][data-bg-final]:hover > a svg path {
        stroke: #fff;
    }
}