/* ==========================================================================
   HEADER FIXO
   ========================================================================== */




.topo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 9999 !important;
}

/* A barra de fundo ocupa 100% da tela */
.topo-bg {
    width: 100% !important;
    min-height: 65px !important; 
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    
    /* CORREÇÃO DA LINHA PRETA: Removido o border-top que existia aqui */
    border-top: none !important; 
}

/* O conteúdo do topo limita-se a 900px e centraliza */
.topo-container {
    width: 100% !important;
    max-width: 900px !important; 
    margin: 0 auto !important; 
    padding: 0 20px !important; 
    display: flex !important;
    justify-content: flex-end !important; 
    align-items: center !important;
    height: 65px !important;
    gap: 20px !important;
}

/* ==========================================================================
   LOGO - POSICIONAMENTO E TAMANHO
   ========================================================================== */
.logo {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
}

.logo img {
    height: 35px !important; 
    width: auto !important;
    display: block !important;
}

/* ==========================================================================
   MENU E BOTÃO (DESKTOP)
   ========================================================================== */
.menu {
    display: flex !important;
    gap: 15px !important; 
}

.menu a {
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #000000 !important;
}

.menu a:hover {
    font-size: 15px !important; /* ALTERADO: cresce 3px ao passar o mouse */
    color: #d9d100 !important;  /* ALTERADO: texto fica amarelo no hover */
    transition: all 0.2s ease;  /* ADICIONADO: suaviza o crescimento e a cor */
}



.cta {
    background-color: #10c15a !important;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MOBILE / RESPONSIVO
   ========================================================================== */

/* Esconde elementos mobile no Desktop */
.hamburger, .menu-mobile, #menuToggle {
    display: none !important;
}

@media screen and (min-width: 360px) {
    
    
    
    
    
    /* Esconde menu e botão desktop */
    .menu, .cta {
        display: none !important;
    }

    /* Exibe o ícone Hamburger */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 10001;
    }

    .hamburger span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: #000000;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Lógica do Checkbox (Menu Toggle) */
    #menuToggle {
        display: none !important;
    }

    /* Animação do Hamburger para X */
#menuToggle:checked ~ .hamburger span:nth-child(1) {
transform-origin: center; /* ADICIONADO: garante rotação no centro da barra (evita "X" torto) */
transform: translateY(9.5px) rotate(45deg); /* CORRIGIDO: desloca a barra de cima até o centro antes de rotacionar */
}


#menuToggle:checked ~ .hamburger span:nth-child(2) {
opacity: 0;
}


#menuToggle:checked ~ .hamburger span:nth-child(3) {
transform-origin: center; /* ADICIONADO: garante rotação no centro da barra (evita "X" torto) */
transform: translateY(-9.5px) rotate(-45deg); /* CORRIGIDO: desloca a barra de baixo até o centro antes de rotacionar */
}

    /* Container do Menu Mobile */
    .menu-mobile {
        display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* ALTERADO: antes era center (centralizava no meio). Agora alinha os itens no topo do menu */
padding-top: 90px; /* ADICIONADO: sobe os textos e o botão sem mexer no hamburguer */
position: fixed;
top: 65px; /* MANTIDO: mantém o menu abaixo do topo (não move o botão hamburguer) */
right: -100%;
width: 100%;
height: calc(100vh - 65px);
height: calc(100dvh - 65px);
overflow-y: auto;
background-color: #ffffff;
transition: right 0.4s ease;
z-index: 10000;
gap: 25px;
border-top: 1px solid #eee;
    }

    /* Mostra o menu quando checkbox marcado */
    #menuToggle:checked ~ .menu-mobile {
        right: 0 !important;
    }

    /* Estilo dos links no mobile */
    .menu-mobile a {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        text-decoration: none !important;
    }
    
    /* CORREÇÃO: aumenta a especificidade para vencer `.menu-mobile a { color: #000 !important; }` */
.menu-mobile a.cta-mobile{
color: #ffffff !important; /* ALTERADO: força o texto do botão CTA (link) a ficar branco no mobile */
}

    /* Botão CTA no mobile */
    .cta-mobile {
       background-color: #10c15a !important;
color: #ffffff !important; /* ALTERADO: texto do botão CTA mobile de preto para branco */
padding: 12px 25px !important;
border-radius: 50px !important;
font-size: 14px !important;
font-weight: 700 !important;
margin-top: 10px;
    }
    

}


@media screen and (min-width: 1366px) {
.menu {
display: flex !important; /* ADICIONADO: garante menu desktop visível em 1366+ */
}
    
    .logo {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
}

.logo img {
    height: 50px !important; 
    width: auto !important;
    display: block !important;
}



.cta {
display: inline-flex !important; /* ADICIONADO: garante botão desktop visível em 1366+ */
align-items: center;
}


.hamburger, .menu-mobile, #menuToggle {
display: none !important; /* ADICIONADO: garante que o mobile não apareça em 1366+ */
}
}


@media screen and (min-width: 1440px) {
 /* ==========================================================================
   MENU E BOTÃO (DESKTOP)
   ========================================================================== */
.menu {
    display: flex !important;
    gap: 15px !important;
  
}

.menu a {
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #000000 !important;
}
    

.cta {
    background-color: #10c15a !important;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
} 
    
    .topo-container {
    max-width: 1100px !important; 
    
}
    
}