/* ═══════════════════════════════════════
   SHARED HEADER STYLES
   Variables, nav, dark mode
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
        --bg:#eeebe5; --bg2:#e5e1d9; --bg3:#dbd6cc;
        --ink:#1a1a1a; --ink2:#555; --ink3:#999;
        --border:#cdc9c0; --white:#f7f4ef;
        --live:#22c55e; --radius:14px; --radius-sm:8px;
        --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05);
        --shadow-md:0 2px 8px rgba(0,0,0,.09),0 8px 24px rgba(0,0,0,.07);
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    html{overflow-x:hidden}
    body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;}
    ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink3)}
    .container{max-width:1320px;margin:0 auto;padding:0 2rem}
    img{max-width:100%} a{color:inherit;text-decoration:none}

    /* HEADER */
    .header{background:rgba(238,235,229,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
    .navbar{max-width:1320px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:1rem;height:64px}
    .logo{display:flex;align-items:center;gap:10px;flex:1}
    .logo img{width:36px;height:36px;border-radius:8px;object-fit:cover}
    .logo-text h1{font-family:'Unbounded',sans-serif;font-size:.9rem;font-weight:900;color:var(--ink);letter-spacing:-.5px;display:flex;align-items:center;gap:6px}
    .verified-badge{width:16px!important;height:16px!important}
    .logo-text span{font-size:.6rem;color:var(--ink3);letter-spacing:1px;display:block;margin-top:-2px}

    /* NAV — panel lateral derecho */
    .nav-links{
        display:flex !important;
        flex-direction:column !important;
        list-style:none !important;
        gap:2px !important;
        position:fixed !important;
        top:0 !important;
        right:-320px !important;
        bottom:0 !important;
        left:auto !important;
        width:280px !important;
        background:var(--bg) !important;
        border-left:1px solid var(--border) !important;
        box-shadow:-4px 0 24px rgba(0,0,0,.15) !important;
        padding:72px 12px 40px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        z-index:9999 !important;
        transition:right .3s cubic-bezier(.4,0,.2,1) !important;
        visibility:hidden !important;
        margin:0 !important;
        height:100vh !important;
    }
    .nav-links.active{right:0 !important; visibility:visible !important;}
    .nav-links li{width:100% !important; list-style:none !important;}
    .nav-links a{display:flex !important;align-items:center !important;gap:10px !important;color:var(--ink2) !important;font-size:.9rem !important;font-weight:500 !important;padding:11px 14px !important;border-radius:var(--radius-sm) !important;white-space:nowrap !important;transition:all .15s !important;text-decoration:none !important;width:100% !important; background:transparent !important;}
    .nav-links a:hover{background:var(--bg2) !important;color:var(--ink) !important;}
    .nav-links .nav-icon{width:16px !important;height:16px !important;opacity:.5 !important;flex-shrink:0 !important;}
    .nav-overlay{display:none !important;position:fixed !important;inset:0 !important;background:rgba(0,0,0,.3) !important;z-index:9998 !important;}
    .nav-overlay.active{display:block !important;}
    /* Dark mode toggle */
    .theme-toggle-btn{position:fixed !important;bottom:24px !important;right:24px !important;width:44px !important;height:44px !important;border-radius:50% !important;border:2px solid #1a1a1a !important;background:#fff !important;color:#1a1a1a !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:99999 !important;box-shadow:0 4px 20px rgba(0,0,0,.35) !important;transition:transform .2s, background .2s !important;}
    .theme-toggle-btn:hover{transform:scale(1.1) !important;}
    .theme-toggle-btn svg{width:20px !important;height:20px !important;display:block !important;}

    .btn-connect{flex-shrink:0;padding:8px 18px;background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .15s}
    .btn-connect:hover{opacity:.8}

    /* Hamburger — siempre visible */
    .mobile-menu-toggle{
        display:flex;
        flex-direction:column;
        gap:5px;
        background:none;
        border:none;
        cursor:pointer;
        padding:6px;
        border-radius:var(--radius-sm);
        transition:background .15s;
    }
    .mobile-menu-toggle:hover{background:var(--bg2)}
    .mobile-menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}
    .mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
    .mobile-menu-toggle.active span:nth-child(2){opacity:0;transform:translateX(-6px)}
    .mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
    .nav-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:998;}
    .nav-overlay.active{display:block;}

    /* DARK MODE */
    [data-theme="dark"]{
        --bg:#0f0f0f; --bg2:#1a1a1a; --bg3:#222;
        --ink:#f0f0f0; --ink2:#aaa; --ink3:#666;
        --border:#2a2a2a; --white:#1a1a1a;
    }
    .theme-toggle-btn{
        position:fixed;
        bottom:20px;
        right:20px;
        width:44px;
        height:44px;
        border-radius:50%;
        border:1px solid var(--border);
        background:var(--bg2);
        color:var(--ink);
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:1000;
        box-shadow:0 2px 12px rgba(0,0,0,.15);
        transition:background .2s, transform .2s;
        font-size:18px;
    }
    .theme-toggle-btn:hover{transform:scale(1.1);}

    /* HERO */