:root {
        --bg-gradient: linear-gradient(135deg, #0d1317 0%, #152329 50%, #1a303a 100%);
        --text-color: #ffffff;
        --nav-bg: rgba(13, 19, 23, 0.85);
        --glass-bg: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
    }
    body { margin: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg-gradient); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
    header { position: fixed; top: 0; left: 0; width: 100%; background: var(--nav-bg); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1000; border-bottom: 1px solid var(--glass-border); }
    .nav-container { max-width: 1200px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 1.5rem; font-weight: 800; color: #fff; text-decoration: none; z-index: 1001; }
    .nav-links { display: flex; gap: 20px; }
    .nav-links a { color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 500; opacity: 0.7; transition: all 0.3s; }
    .nav-links a:hover { opacity: 1; color: #d4af37; }
    .menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.8rem; cursor: pointer; z-index: 1001; }
    main { flex: 1; margin-top: 60px; padding-bottom: 100px; }
    .persistent-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(10, 15, 18, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 900; display: flex; align-items: center; }
    .footer-content { max-width: 1200px; width: 100%; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
    .footer-info p { margin: 0; font-size: 0.85rem; opacity: 0.6; }
    .social-links { display: flex; gap: 15px; align-items: center; }
    .social-links a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: all 0.3s; }
    .social-links a:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
    .social-links svg { width: 18px; height: 18px; fill: #fff; }
    .whatsapp-float { position: fixed; bottom: 85px; right: 20px; width: 55px; height: 55px; background-color: #25d366; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); z-index: 999; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
    .whatsapp-float:hover { transform: scale(1.1); }
    .whatsapp-float svg { width: 30px; height: 30px; fill: white; }
    
    @media (max-width: 900px) {
        .menu-toggle { display: block; }
        .nav-links { display: none !important; position: fixed; top: 60px; left: 0; width: 100%; background: #0d1317; flex-direction: column; text-align: center; padding: 20px 0; border-bottom: 1px solid var(--glass-border); }
        .nav-links.active { display: flex !important; }
        .nav-links a { padding: 15px 0; font-size: 1.2rem; display: block; }
        .footer-content { flex-direction: column; gap: 10px; text-align: center; padding: 10px; }
        .persistent-footer { position: relative; }
        .whatsapp-float { bottom: 20px; }
    }

    /* =========================================
       MAGIA DE ANIMACIÓN (NUEVO CÓDIGO CSS)
       ========================================= */
    .reveal-oculto {
        opacity: 0;
        transform: translateY(50px); /* Empieza 50px más abajo */
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Curva suave y elegante */
    }
    .reveal-visible {
        opacity: 1;
        transform: translateY(0); /* Sube a su posición original */
    }