:root {
    --cherry: #e61d42;
    --ocean: #0061ff;
    --bg-light: #fbfbfd;
    --white: #ffffff;
    --text-main: #1d1d1f;
    --text-sec: #86868b;
    --border: rgba(0,0,0,0.08);
    --font-main: 'Plus Jakarta Sans', sans-serif;
}

/* Global Reset */
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body { 
    background-color: var(--bg-light); 
    color: var(--text-main); 
    font-family: var(--font-main); 
    -webkit-font-smoothing: antialiased;
    padding-top: 80px; /* Evita que el hero se pegue al header fixed */
}

/* --- HEADER ELITE --- */
header {
    position: fixed; width: 100%; top: 0; z-index: 1000;
    padding: 15px 8%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}

.logo img { height: 48px; width: auto; }

nav ul { display: flex; list-style: none; gap: 35px; }
nav a { 
    text-decoration: none; 
    color: var(--text-main); 
    font-weight: 600; 
    font-size: 0.95rem; 
    transition: 0.3s; 
}
nav a:hover { color: var(--cherry); }

.header-actions { display: flex; gap: 15px; align-items: center; }

.btn-platform {
    text-decoration: none; color: var(--ocean); font-weight: 700; font-size: 0.85rem;
    padding: 10px 18px; border-radius: 12px; background: rgba(0, 97, 255, 0.05);
    border: 1px solid rgba(0, 97, 255, 0.1); transition: 0.3s;
}
.btn-platform:hover { background: var(--ocean); color: white; }

.btn-contact {
    text-decoration: none; background: var(--text-main); color: white;
    padding: 10px 22px; border-radius: 100px; font-weight: 700; font-size: 0.85rem;
    transition: 0.3s; border: none; cursor: pointer;
}
.btn-contact:hover { background: var(--cherry); transform: translateY(-2px); }

/* --- FOOTER --- */
footer { 
    padding: 100px 8% 50px; 
    border-top: 1px solid var(--border); 
    text-align: center; 
    background: var(--white); 
}

.footer-logo { height: 50px; margin-bottom: 30px; }

.social-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; }
.social-links a { color: var(--text-main); font-size: 1.8rem; transition: 0.3s; }
.social-links a:hover { color: var(--cherry); transform: translateY(-5px); }

.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px;
    background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center;
    font-size: 30px; box-shadow: 0 10px 25px rgba(37,211,102,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; transition: 0.3s; text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* Responsivo básico para Header */
@media (max-width: 850px) {
    header { padding: 15px 5%; }
    nav { display: none; } /* Podríamos implementar un menú hamburguesa luego */
}