/* 
    ARCHIVO: style.css
    Copia todo lo que está dentro de esta etiqueta <style> a un archivo separado llamado style.css
    */
    * {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }
    
    .hero-bg {
        background: linear-gradient(135deg, rgba(15,23,42,0.9) 0%, rgba(30,41,59,0.85) 100%), 
        url('img/img-1.jpg') center/cover;
                    /* url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?q=80&w=2070') center/cover; */
    }
    
    .gradient-text {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .card-hover {
        transition: all 0.3s ease;
    }
    
    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);
    }
    
    .btn-whatsapp {
        background: #25D366;
        transition: all 0.3s ease;
    }
    
    .btn-whatsapp:hover {
        background: #1ebe5d;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    }
    
    .input-error {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }
    
    .animate-fade-in {
        animation: fadeIn 0.6s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .nav-blur {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.95);
    }
    
    .toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
        animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
        from { transform: translateX(400px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

 /* slide */