/* Estilos personalizados para botones usando variables CSS */

/* Botón personalizable para sliders */
.btn-telegram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--button-background, #F15412), var(--hover-color, #e04000));
    color: var(--button-text-color, #ffffff) !important;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-telegram:hover {
    background: linear-gradient(45deg, var(--hover-color, #e04000), var(--button-background, #F15412));
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-telegram i, 
.btn-telegram svg {
    margin-right: 8px;
    font-size: 18px;
}

/* Animación para el botón */
.btn-telegram.animated {
    animation: button-pulse 1.5s infinite;
}

@keyframes button-pulse {
    0% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

/* Sobreescribir el estilo antiguo de telegram para usar colores personalizados */
.btn.btn-telegram {
    background: linear-gradient(45deg, var(--button-background, #F15412), var(--hover-color, #e04000)) !important;
    color: var(--button-text-color, #ffffff) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn.btn-telegram:hover {
    background: linear-gradient(45deg, var(--hover-color, #e04000), var(--button-background, #F15412)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}