:root {
            --dark-base: #0a0a0a;
            --gray-metal: #2c2c2c;
            --silver: #c0c0c0;
            --accent-blue: #1a2a40; /* Tom de azul escuro presente no escudo */
        }

        body {
            background-color: var(--dark-base);
            color: #ffffff;
            font-family: 'Roboto', sans-serif;
        }

        h1, h2, h3, .nav-link {
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
        }

        /* Navbar Customizada */
        .navbar {
            background-color: rgba(0, 0, 0, 0.9) !important;
            border-bottom: 2px solid var(--gray-metal);
        }

        .navbar-brand, .nav-link {
            color: var(--silver) !important;
        }

        .nav-link:hover {
            color: white !important;
            text-shadow: 0 0 10px var(--accent-blue);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1590514013054-d36c25390978?q=80&w=2000') center/cover;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-bottom: 5px solid var(--accent-blue);
        }

        .btn-haf {
            background-color: transparent;
            border: 2px solid var(--silver);
            color: var(--silver);
            padding: 10px 30px;
            transition: 0.3s;
        }

        .btn-haf:hover {
            background-color: var(--silver);
            color: var(--dark-base);
        }

        /* Seções */
        section {
            padding: 80px 0;
        }

        .card-member {
            background-color: var(--gray-metal);
            border: 1px solid var(--accent-blue);
            color:#ffffff;
            transition: transform 0.3s;
        }

        .card-member:hover {
            transform: translateY(-10px);
            border-color: var(--silver);
        }

        footer {
            background-color: #000;
            padding: 40px 0;
            border-top: 1px solid var(--gray-metal);
        }

        .motto {
            font-style: italic;
            color: var(--silver);
            border-left: 4px solid var(--accent-blue);
            padding-left: 15px;
        }
        /* --- Botão Flutuante do WhatsApp --- */
        .whatsapp-float {
            position: fixed; /* Fixa o botão na tela */
            width: 60px;
            height: 60px;
            bottom: 20px; /* Distância do fundo */
            right: 20px;  /* Distância da direita */
            background-color: #25d366; /* Verde oficial do WhatsApp */
            color: #FFF;
            border-radius: 50px; /* Torna redondo */
            text-align: center;
            font-size: 35px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Sombra para dar profundidade */
            z-index: 1000; /* Garante que fique acima de tudo */
            transition: all 0.3s ease; /* Efeito suave ao passar o mouse */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none; /* Remove sublinhado do link */
        }

        .whatsapp-float:hover {
            background-color: #1ebe57; /* Verde ligeiramente mais escuro no hover */
            color: #FFF;
            transform: scale(1.1); /* Aumenta levemente de tamanho */
        }