.btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 22px;

    border-radius: 999px;

    text-decoration: none;
    font-size: 15px;
    font-weight: 800;

    transition: 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn span {
    position: relative;
    z-index: 3;
}

.btn-primary {
    color: white;

    background: linear-gradient(135deg, var(--color-rosa), var(--color-morado));

    box-shadow: 0 16px 38px rgba(255, 0, 92, 0.3);
}

.btn-secondary {
    color: white;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid var(--color-borde);
}

/* =========================================================
   BOTÓN CON EFECTO AGUA
========================================================= */

.btn-primary.btn-water {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(
        120deg,
        #ff005c,
        #7c3cff,
        #00d4ff,
        #ff005c
    );

    background-size: 300% 300%;

    animation: fondoAguaExekiller 4.5s ease-in-out infinite;
}

.btn-primary.btn-water::before {
    content: "";

    position: absolute;
    top: -90%;
    left: -40%;

    width: 180%;
    height: 180%;

    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 18%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.25), transparent 22%);

    border-radius: 45%;

    z-index: 1;

    animation: burbujaAguaExekiller 5s linear infinite;
}

.btn-primary.btn-water::after {
    content: "";

    position: absolute;
    top: -65%;
    left: -30%;

    width: 150%;
    height: 90%;

    background: rgba(255, 255, 255, 0.28);

    border-radius: 50%;

    z-index: 2;

    transform: rotate(-8deg);

    animation: brilloAguaExekiller 3.8s ease-in-out infinite;
}

@keyframes fondoAguaExekiller {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

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

    50% {
        transform: rotate(180deg) scale(1.12);
    }

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

@keyframes brilloAguaExekiller {
    0% {
        transform: translateX(-20%) rotate(-8deg);
        opacity: 0.18;
    }

    50% {
        transform: translateX(25%) rotate(-8deg);
        opacity: 0.45;
    }

    100% {
        transform: translateX(-20%) rotate(-8deg);
        opacity: 0.18;
    }
}