:root {
      --pretoPrincipal: black;
      --offWhite: rgb(255, 255, 242);
      --redEscuro: #c0392b;
      --redVibrante: #ff3333;
      --redSangue: #e74c3c;
      --Dourado: #D4AF37;
      --AzulTech: #3B82F6;
      --CinzaChumbo: #2B2B2B;
      --Verdesucesso: #27AE60;
      --LaranjaEnergia: #FF8C42;
    }

    /* ================================================
       HEADER / MENU
       ================================================ */

    header {
        height: 80px;
        width: 100%;
        background-color: var(--pretoPrincipal);
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 999;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        font-family: 'Montserrat';
    }

    .nav-wrapper {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* -------- Logo -------- */

    .ZT {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .ZT a {
        display: flex;
        align-items: baseline;
        gap: 4px;
        color: var(--offWhite);
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: .5px;
        transition: opacity 0.3s ease;
    }

    .ZT a:hover {
        opacity: 0.85;
    }

    .ZT span {
        color: var(--redVibrante);
        font-weight: 900;
    }

    /* -------- Links de navegação -------- */

    .nav-links {
        display: flex;
        align-items: center;
        gap: 36px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-links li a {
        position: relative;
        color: var(--offWhite);
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 600;
        letter-spacing: .3px;
        padding: 6px 2px;
        transition: color 0.3s ease;
    }

    /* sublinhado animado ao passar o mouse */
    .nav-links li a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: var(--redVibrante);
        transition: width 0.3s ease;
    }

    .nav-links li a:hover {
        color: var(--redVibrante);
    }

    .nav-links li a:hover::after {
        width: 100%;
    }

    .nav-links li a.active {
        color: var(--redVibrante);
    }

    .nav-links li a.active::after {
        width: 100%;
    }

    /* -------- Botão CTA (Entrar / Comece Agora) -------- */

    .nav-cta {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* ---- Utilizado no dashboard do aluno ---- */

    .nav-cta-aluno {
        display: flex;
        align-items: center;
        gap: 15px;
    }


    .btn-login {
        color: var(--offWhite);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .btn-login:hover {
        color: var(--redVibrante);
    }

    .btn-comecar-nav {
        background-color: var(--redVibrante);
        color: var(--offWhite);
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 700;
        padding: 9px 20px;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(255, 51, 51, 0.25);
    }

    .btn-comecar-nav:hover {
        background-color: var(--redSangue);
        transform: scale(1.05);
        box-shadow: 0 6px 14px rgba(231, 76, 60, 0.35);
    }

    /* -------- Botão hambúrguer (mobile) -------- */

    .nav-toggle {
        display: none;
        background: none;
        border: none;
        color: var(--offWhite);
        font-size: 1.8rem;
        cursor: pointer;
    }

    /* ================================================
       Responsividade
       ================================================ */

    @media (max-width: 900px) {
        .nav-links {
            position: fixed;
            top: 80px;
            left: 0;
            width: 100%;
            flex-direction: column;
            gap: 0;
            background-color: var(--pretoPrincipal);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }

        .nav-links.open {
            max-height: 400px;
        }

        .nav-links li {
            width: 100%;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 242, 0.08);
        }

        .nav-links li a {
            display: block;
            padding: 16px 0;
        }

        .nav-links li a::after {
            display: none;
        }

        .nav-cta {
           display:none;
        }

        .nav-cta-aluno {
                display: flex;
               flex-direction: column;
               align-items: center;
               gap: 8px;
              padding: 15px 0;
        }

        .nav-toggle {
            display: block;
        }
    }

    @media (max-width: 480px) {
        .ZT a {
            font-size: 1.25rem;
        }

        .nav-wrapper {
            padding: 0 18px;
        }
    }