/* Lightweight BorderGlow for service cards. */
.card-servicos,
.card-servicos-left {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 30;
    --color-sensitivity: 48;
    --border-radius-bg: 20px;
    --glow-padding: 30px;
    --cone-spread: 24;
    --fill-opacity: 0.32;
    --card-bg: #ffffff;

    --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 52%);
    --gradient-two: radial-gradient(at 20% 18%, #38bdf8 0px, transparent 52%);
    --gradient-three: radial-gradient(at 50% 90%, #34d399 0px, transparent 52%);
    --gradient-base: linear-gradient(#c084fc 0 100%);

    --glow-color: hsl(220deg 85% 72% / 100%);
    --glow-color-40: hsl(220deg 85% 72% / 40%);
    --glow-color-20: hsl(220deg 85% 72% / 20%);
    --glow-color-10: hsl(220deg 85% 72% / 10%);

    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: var(--border-radius-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--card-bg);
    transform: none;
    transition: none;
}

.card-servicos:hover,
.card-servicos-left:hover {
    transform: none;
}

.card-servicos::before,
.card-servicos-left::before,
.card-servicos::after,
.card-servicos-left::after,
.card-servicos > .bg-edge-light,
.card-servicos-left > .bg-edge-light {
    display: none;
    pointer-events: none;
}

.card-servicos > .bg-card-inner,
.card-servicos-left > .bg-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    gap: inherit;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .card-servicos,
    .card-servicos-left {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card-servicos:hover,
    .card-servicos-left:hover {
        transform: translateY(-8px);
        border-color: transparent;
        background: #ffffff;
        box-shadow: 0 22px 44px -16px rgba(17, 24, 39, 0.18);
    }

    .card-servicos::before,
    .card-servicos-left::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 1.5px solid transparent;
        border-radius: inherit;
        background:
            linear-gradient(var(--card-bg) 0 100%) padding-box,
            linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
            var(--gradient-one) border-box,
            var(--gradient-two) border-box,
            var(--gradient-three) border-box,
            var(--gradient-base) border-box;
        opacity: 0;
        -webkit-mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            black calc(var(--cone-spread) * 1%),
            transparent calc((var(--cone-spread) + 15) * 1%),
            transparent calc((100 - var(--cone-spread) - 15) * 1%),
            black calc((100 - var(--cone-spread)) * 1%)
        );
        mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            black calc(var(--cone-spread) * 1%),
            transparent calc((var(--cone-spread) + 15) * 1%),
            transparent calc((100 - var(--cone-spread) - 15) * 1%),
            black calc((100 - var(--cone-spread)) * 1%)
        );
        transition: opacity 0.24s ease-out;
    }

    .card-servicos:hover::before,
    .card-servicos-left:hover::before {
        opacity: calc(
            (var(--edge-proximity) - var(--color-sensitivity)) /
            (100 - var(--color-sensitivity))
        );
    }

    .card-servicos::after,
    .card-servicos-left::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background:
            var(--gradient-one) padding-box,
            var(--gradient-two) padding-box,
            var(--gradient-three) padding-box,
            var(--gradient-base) padding-box;
        opacity: 0;
        -webkit-mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            transparent 0 12%,
            black 25% 75%,
            transparent 88% 100%
        );
        mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            transparent 0 12%,
            black 25% 75%,
            transparent 88% 100%
        );
        transition: opacity 0.24s ease-out;
    }

    .card-servicos:hover::after,
    .card-servicos-left:hover::after {
        opacity: calc(
            var(--fill-opacity) *
            (var(--edge-proximity) - var(--color-sensitivity)) /
            (100 - var(--color-sensitivity))
        );
    }

    .card-servicos > .bg-edge-light,
    .card-servicos-left > .bg-edge-light {
        display: block;
        position: absolute;
        inset: calc(var(--glow-padding) * -1);
        z-index: 2;
        border-radius: inherit;
        opacity: 0;
        -webkit-mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            black 3%,
            transparent 11%,
            transparent 89%,
            black 97%
        );
        mask-image: conic-gradient(
            from var(--cursor-angle) at center,
            black 3%,
            transparent 11%,
            transparent 89%,
            black 97%
        );
        transition: opacity 0.24s ease-out;
    }

    .card-servicos:hover > .bg-edge-light,
    .card-servicos-left:hover > .bg-edge-light {
        opacity: calc(
            (var(--edge-proximity) - var(--edge-sensitivity)) /
            (100 - var(--edge-sensitivity))
        );
    }

    .card-servicos > .bg-edge-light::before,
    .card-servicos-left > .bg-edge-light::before {
        content: "";
        position: absolute;
        inset: var(--glow-padding);
        border-radius: inherit;
        box-shadow:
            inset 0 0 0 1px var(--glow-color),
            inset 0 0 10px var(--glow-color-40),
            inset 0 0 28px var(--glow-color-20),
            0 0 8px var(--glow-color-40),
            0 0 28px var(--glow-color-10);
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .card-servicos,
    .card-servicos-left,
    .card-servicos:hover,
    .card-servicos-left:hover {
        transform: none;
        transition: none;
    }

    .card-servicos:hover .card-icon,
    .card-servicos-left:hover .card-icon {
        transform: none;
    }
}