﻿.bounce-top {
    -webkit-animation: bounce-top .9s both;
    animation: bounce-top .9s both
}
@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    25%,55%,75%,87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    25%,55%,75%,87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }
}



.glow {
    font-size: 80px;
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}



/*texto ilumindado*/

/* Definición de la animación */
@keyframes pulsarBrillo {
    0%, 100% {
        /* Brillo en su estado más bajo/suave */
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
    }

    50% {
        /* Brillo en su punto máximo de intensidad */
        text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 18px rgba(255, 255, 255, 0.8), 0 0 35px rgba(255, 255, 255, 0.5);
    }
}



@keyframes brilloMovimiento {
    0% {
        /* Brillo centrado al inicio */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    25% {
        /* El brillo se mueve a la DERECHA (X positivo) */
        text-shadow: 15px 0 15px rgba(255, 255, 255, 0.9);
    }

    50% {
        /* Regresa al centro */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    75% {
        /* El brillo se mueve a la IZQUIERDA (X negativo) */
        text-shadow: -15px 0 15px rgba(255, 255, 255, 0.9);
    }

    100% {
        /* Termina en el centro para reiniciar el ciclo sin saltos bruscos */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}


/*boton destello radzen*/

.boton-radzen-ripple {
   /* position: relative;
    overflow: hidden;*/
    /*padding: 14px 28px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #111111;*/ /* Fondo muy oscuro para maximizar el contraste */
    /*border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;*/
    isolation: isolate; /* Asegura que la onda no tape el texto del botón */
}

    /* La onda expansiva optimizada */
    .boton-radzen-ripple::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        /* Usamos un tamaño base más grande para evitar distorsiones al escalar */
        width: 250px;
        height: 250px;
        /* Degradado radial: el centro es más brillante y los bordes son difuminados */
        background: radial-gradient( circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 70% );
        border-radius: 50%;
        /* Estado inicial: oculto y encogido al mínimo en el centro exacto */
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
        /* Transición de salida suave cuando el usuario suelta el clic */
        transition: transform 0.5s ease-out, opacity 0.6s ease-out;
        pointer-events: none;
    }

    /* El efecto al presionar (Clic continuo) */
    .boton-radzen-ripple:active::after {
        /* Escala masiva para garantizar que cubra esquinas de botones anchos */
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 1;
        /* Transición de entrada ultra rápida para simular el impacto del clic */
        transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.1s ease-out;
    }





