/* Botones Elementor Minimalistas */

/* Sobrescribir estilos por defecto de Elementor */
.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button-link {
    font-family: var(--kos-font) !important;
    font-weight: 500 !important;
    font-size: 16px !important; /* Letra más grande */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important; /* Border radius de 8px */
    padding: 18px 36px !important; /* Más padding */
    transition: all 0.6s ease !important; /* Animación más lenta */
    border: 2px solid var(--kos-white) !important; /* Borde blanco más grueso */
    background: var(--kos-primary) !important; /* Fondo negro */
    color: var(--kos-white) !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover elegante - fondo blanco, borde negro */
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button-link:hover {
    background: var(--kos-white) !important; /* Fondo blanco en hover */
    border-color: var(--kos-primary) !important; /* Borde negro en hover */
    color: var(--kos-primary) !important; /* Texto negro en hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Efecto de deslizamiento en hover */
.elementor-widget-button .elementor-button::before,
.elementor-widget-button .elementor-button-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.8s ease; /* Animación más lenta */
}

.elementor-widget-button .elementor-button:hover::before,
.elementor-widget-button .elementor-button-link:hover::before {
    left: 100%;
}

/* Variantes de color */
.elementor-widget-button .elementor-button.elementor-button-primary {
    background: var(--kos-primary) !important;
    color: var(--kos-white) !important;
    border-color: var(--kos-primary) !important;
}

.elementor-widget-button .elementor-button.elementor-button-primary:hover {
    background: var(--kos-secondary) !important;
    border-color: var(--kos-secondary) !important;
}

.elementor-widget-button .elementor-button.elementor-button-secondary {
    background: transparent !important;
    color: var(--kos-primary) !important;
    border-color: var(--kos-primary) !important;
}

.elementor-widget-button .elementor-button.elementor-button-secondary:hover {
    background: var(--kos-primary) !important;
    color: var(--kos-white) !important;
}

/* Botón con fondo de color */
.elementor-widget-button .elementor-button.elementor-button-accent {
    background: var(--kos-accent) !important;
    color: var(--kos-white) !important;
    border-color: var(--kos-accent) !important;
}

.elementor-widget-button .elementor-button.elementor-button-accent:hover {
    background: var(--kos-primary) !important;
    border-color: var(--kos-primary) !important;
}

/* Tamaños personalizados */
.elementor-widget-button .elementor-button.elementor-size-xs {
    padding: 12px 24px !important;
    font-size: 0.8rem !important;
}

.elementor-widget-button .elementor-button.elementor-size-sm {
    padding: 14px 28px !important;
    font-size: 0.9rem !important;
}

.elementor-widget-button .elementor-button.elementor-size-md {
    padding: 16px 32px !important;
    font-size: 1rem !important;
}

.elementor-widget-button .elementor-button.elementor-size-lg {
    padding: 20px 40px !important;
    font-size: 1.1rem !important;
}

.elementor-widget-button .elementor-button.elementor-size-xl {
    padding: 24px 48px !important;
    font-size: 1.2rem !important;
}

/* Botón con icono */
.elementor-widget-button .elementor-button .elementor-button-icon {
    margin-right: 8px !important;
    transition: transform 0.6s ease !important; /* Animación más lenta */
}

.elementor-widget-button .elementor-button:hover .elementor-button-icon {
    transform: translateX(2px) !important;
}

/* Botón con icono a la derecha */
.elementor-widget-button .elementor-button .elementor-button-icon.elementor-align-icon-right {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

.elementor-widget-button .elementor-button:hover .elementor-button-icon.elementor-align-icon-right {
    transform: translateX(-2px) !important;
}

/* Efecto de pulsación */
.elementor-widget-button .elementor-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Botón deshabilitado */
.elementor-widget-button .elementor-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.elementor-widget-button .elementor-button:disabled:hover {
    background: transparent !important;
    color: var(--kos-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .elementor-widget-button .elementor-button,
    .elementor-widget-button .elementor-button-link {
        padding: 14px 28px !important;
        font-size: 0.9rem !important;
    }
    
    .elementor-widget-button .elementor-button:hover,
    .elementor-widget-button .elementor-button-link:hover {
        transform: translateY(-1px) !important;
    }
}

/* Botón de ancho completo */
.elementor-widget-button .elementor-button.elementor-button-full-width {
    width: 100% !important;
    text-align: center !important;
}

/* Botón redondeado (opcional) */
.elementor-widget-button .elementor-button.elementor-button-rounded {
    border-radius: 25px !important;
}

/* Botón cuadrado */
.elementor-widget-button .elementor-button.elementor-button-square {
    border-radius: 0 !important;
}

/* Efecto de gradiente sutil */
.elementor-widget-button .elementor-button.elementor-button-gradient {
    background: linear-gradient(135deg, var(--kos-primary), var(--kos-secondary)) !important;
    border: none !important;
    color: var(--kos-white) !important;
}

.elementor-widget-button .elementor-button.elementor-button-gradient:hover {
    background: linear-gradient(135deg, var(--kos-secondary), var(--kos-primary)) !important;
}

/* Botón con borde grueso */
.elementor-widget-button .elementor-button.elementor-button-thick-border {
    border-width: 2px !important;
    padding: 10px 22px !important;
}

/* Botón con sombra sutil */
.elementor-widget-button .elementor-button.elementor-button-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.elementor-widget-button .elementor-button.elementor-button-shadow:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Botones con clases personalizadas */
.elementor-widget-button .elementor-button.kos-button-minimal {
    background: transparent !important;
    color: var(--kos-primary) !important;
    border: 1px solid var(--kos-primary) !important;
    padding: 12px 24px !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 1px !important;
}

.elementor-widget-button .elementor-button.kos-button-minimal:hover {
    background: var(--kos-primary) !important;
    color: var(--kos-white) !important;
    transform: translateY(-2px) !important;
}

.elementor-widget-button .elementor-button.kos-button-filled {
    background: var(--kos-primary) !important;
    color: var(--kos-white) !important;
    border: 1px solid var(--kos-primary) !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.5px !important;
}

.elementor-widget-button .elementor-button.kos-button-filled:hover {
    background: var(--kos-secondary) !important;
    border-color: var(--kos-secondary) !important;
    transform: translateY(-2px) !important;
}

/* Botón con efecto de deslizamiento */
.elementor-widget-button .elementor-button.kos-button-slide {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    color: var(--kos-primary) !important;
    border: 1px solid var(--kos-primary) !important;
}

.elementor-widget-button .elementor-button.kos-button-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--kos-primary);
    transition: left 0.6s ease; /* Animación más lenta */
    z-index: -1;
}

.elementor-widget-button .elementor-button.kos-button-slide:hover {
    color: var(--kos-white) !important;
    border-color: var(--kos-primary) !important;
}

.elementor-widget-button .elementor-button.kos-button-slide:hover::before {
    left: 0;
}

/* Botón con efecto de pulso */
.elementor-widget-button .elementor-button.kos-button-pulse {
    animation: kos-pulse 2s infinite;
}

@keyframes kos-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(26, 26, 26, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0);
    }
}

/* Botón con efecto de elevación */
.elementor-widget-button .elementor-button.kos-button-elevated {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.6s ease !important; /* Animación más lenta */
}

.elementor-widget-button .elementor-button.kos-button-elevated:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-4px) !important;
}