/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Outfit:wght@300;400;600;700;800&display=swap');

:root {
    --primary: #4f46e5;       /* Indigo Vibrante */
    --primary-dark: #3730a3;
    --secondary: #0ea5e9;     /* Sky Blue */
    --dark: #0f172a;          /* Slate Dark */
    --light: #f8fafc;
    --text: #475569;
    --whatsapp: #25D366;
    
    --glass: rgba(255, 255, 255, 0.9);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.3);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background-color: var(--light);
    padding-top: 80px;
    overflow-x: hidden;
    opacity: 0; transition: opacity 0.5s ease; /* Para transici¨Žn de p¨˘gina */
}
body.loaded { opacity: 1; }

h1, h2, h3, h4, h5 { font-family: 'Outfit', sans-serif; color: var(--dark); font-weight: 700; letter-spacing: -0.02em; }

/* --- NAVBAR --- */
.navbar {
    background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05); padding: 15px 0; transition: 0.3s;
}
.nav-link { font-weight: 500; color: var(--dark) !important; transition: 0.3s; padding: 8px 16px !important; }
.nav-link:hover, .nav-link.active { color: var(--primary) !important; background: #eef2ff; border-radius: 50px; }

/* Bot¨Žn Ingresar (Login) */
.btn-login {
    background: var(--dark); color: white; border-radius: 50px; padding: 8px 24px; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.btn-login:hover { background: var(--primary); color: white; box-shadow: var(--shadow-glow); }

/* --- BOTONES FLOTANTES --- */
/* WhatsApp */
.btn-whatsapp {
    position: fixed; bottom: 30px; left: 30px; z-index: 1000;
    background: var(--whatsapp); color: white; width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s; animation: pulse 2s infinite;
}
.btn-whatsapp:hover { transform: scale(1.1); color: white; }

/* Scroll Top */
#scrollTopBtn {
    position: fixed; bottom: 30px; right: 30px; z-index: 999;
    background: var(--primary); color: white; width: 50px; height: 50px;
    border-radius: 12px; border: none; font-size: 20px;
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
    transition: all 0.3s; cursor: pointer;
}
#scrollTopBtn.show { opacity: 1; visibility: visible; }
#scrollTopBtn:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* --- COMPONENTES --- */
.hero-section {
    padding: 100px 0;
    background: radial-gradient(circle at 50% 0%, #eef2ff 0%, #ffffff 70%);
}
.feature-card {
    background: white; padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0;
    height: 100%; transition: 0.4s; position: relative; overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--primary);
}
.icon-box {
    width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 24px; background: #f1f5f9; color: var(--primary);
}

/* --- FOOTER --- */
footer { background: var(--dark); color: #94a3b8; padding: 80px 0 30px; }
footer a { color: #cbd5e1; text-decoration: none; transition: 0.2s; }
footer a:hover { color: white; padding-left: 5px; }

/* Animaciones Keyframes */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }