/* assets/css/style.css */

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.navbar-logo { transition: color 0.3s ease; }

@media (max-width: 640px) {
    .hero-section { min-height: 100vh; }
    .stats-grid { gap: 1.5rem; }
}

.fade-in { animation: fadeIn 0.8s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }

.scroll-indicator { animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

#whatsapp-float { z-index: 999; animation: floatIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; transform: translateY(20px) scale(0.8); }
@keyframes floatIn { to { opacity: 1; transform: translateY(0) scale(1); } }

#whatsapp-btn .relative { box-shadow: 0 4px 20px rgba(37,211,102,0.3); }
#whatsapp-btn:hover .relative { box-shadow: 0 8px 30px rgba(37,211,102,0.5); }

@media (max-width: 640px) {
    #whatsapp-btn .relative { padding: 14px 18px; }
    #whatsapp-btn .relative span { font-size: 13px; }
}

#welcome-modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
#welcome-modal .transform { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }