/* --- ESTILOS DE BOTONES AVANZADOS --- */

/* 1. BOTÓN RELLENO (El de "Ver Ejemplos") */
/* Usamos selectores compuestos para eliminar el "doble botón" de Elementor */
.btn-grad .elementor-button,
.btn-grad-header { 
    background: var(--gradient-main) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    text-decoration: none;
    padding: 12px 30px !important; /* Forzamos el tamaño */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animación fluida */
    box-shadow: 0 4px 15px rgba(247, 92, 130, 0.2); /* Sombra inicial suave */
}

/* Hover Effect */
.btn-grad .elementor-button:hover,
.btn-grad-header:hover {
    transform: translateY(-3px); /* Se eleva */
    box-shadow: 0 10px 25px rgba(247, 92, 130, 0.4); /* Sombra crece */
    /* Pequeño truco para iluminar el degradado */
    filter: brightness(1.05); 
}

/* 2. BOTÓN OUTLINE CON BORDE DEGRADADO (El de "Contáctame") */
/* Truco técnico: Usamos un borde transparente y pintamos el fondo restringido al borde */
.btn-outline-grad .elementor-button {
    /* Fondo doble: Primero blanco (padding-box), luego el degradado (border-box) */
    background: linear-gradient(#fff, #fff) padding-box,
                var(--gradient-main) border-box !important;
    
    border: 2px solid transparent !important; /* El borde real es transparente para ver el degradado de fondo */
    border-radius: 8px !important;
    color: var(--color-text) !important; /* Texto oscuro al inicio */
    
    padding: 12px 30px !important;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.4s ease;
    box-shadow: none;
}

/* Hover: El botón se llena con el degradado */
.btn-outline-grad .elementor-button:hover {
    /* Reemplazamos el fondo blanco con el degradado completo */
    background: var(--gradient-main) border-box !important;
    color: #ffffff !important; /* Texto cambia a blanco */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 159, 69, 0.3); /* Sombra tirando a naranja */
    border-color: transparent !important;
}

/* RESET ELEMENTOR: Eliminar decoraciones extra que causan el "doble botón" */
.btn-grad .elementor-button-content-wrapper,
.btn-outline-grad .elementor-button-content-wrapper {
    /* Asegura que el texto e icono estén limpios */
}