#contactFeedback {
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.feedback-success {
    color: #22c55e; /* verde */
}

.feedback-error {
    color: #ef4444; /* rojo */
}
.sending {
    opacity: 0.7;
    pointer-events: none;
}

.sent {
    background-color: #22c55e !important;
}

#contactFeedback {
    opacity: 0;
    transform: translateY(10px);
}

    #contactFeedback:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
    }

.contact-feedback {
    width: 100%;
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .contact-feedback.hidden {
        display: none;
    }

    .contact-feedback.feedback-success {
        color: #22c55e;
    }

    .contact-feedback.feedback-error {
        color: #f87171;
    }

[data-valmsg-for] {
    color: #f87171;
}

.button-send {
    position: relative;
    min-width: 260px;
    justify-content: center;
}

.btn-icon {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* -------------------------
   Opción A: sobre/loading
------------------------- */
.button-send.is-sending-mail {
    opacity: 0.85;
    pointer-events: none;
}

    .button-send.is-sending-mail .btn-icon {
        animation: mailPulse 0.9s ease-in-out infinite;
    }

@keyframes mailPulse {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(-8deg);
        opacity: 0.75;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.button-send.is-success-mail .btn-icon {
    animation: mailSuccess 0.6s ease;
}

@keyframes mailSuccess {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* -------------------------
   Opción B: avión de papel
------------------------- */
.button-send.is-sending-plane {
    opacity: 0.85;
    pointer-events: none;
}

    .button-send.is-sending-plane .btn-icon {
        animation: planeFly 1s ease-in-out infinite;
    }

@keyframes planeFly {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }

    40% {
        transform: translateX(6px) translateY(-4px) rotate(-12deg);
        opacity: 0.85;
    }

    70% {
        transform: translateX(12px) translateY(-8px) rotate(-18deg);
        opacity: 0.7;
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

.button-send.is-success-plane .btn-icon {
    animation: planeSuccess 0.7s ease;
}

@keyframes planeSuccess {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.25) rotate(-15deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}