@property --angle {
          syntax: '<angle>';
          initial-value: 0deg;
          inherits: false;
        }

        .animated-border-card {
            --border-size: 6px;
            --angle: 0deg;
            
            position: relative;
            background-image: conic-gradient(
                from var(--angle),
                transparent 0%,
                transparent 85%,
                #ef4444 95%, /* Tailwind's red-500 */
                transparent 100%
            );
            border-radius: 1.1rem;
            animation: spin 4s linear infinite;
        }

        @keyframes spin {
          to {
            --angle: 360deg;
          }
        }

        .card-content {
            background-color: white;
            border-radius: 1rem; /* 16px */
            margin: var(--border-size);
            padding: 2rem; /* 32px */
        }
        
        /* Animação de pulsação para o ícone */
        .pulsing-icon {
            animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 10px 15px rgba(239, 68, 68, 0);
            }
        }