/*-----------HEADER-----------*/


.menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    
    width: 100%;
    padding: 10px 5%;
    background-color: #054d4d;
}

/*------------------Menu Hamburguer------------------*/

.hamburger-toggle {
    display: none; /* Esconde o botão em telas grandes (desktop) */
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px;
    z-index: 1000; /* Garante que fique acima de outros elementos */
}

/* ---------------------------------- */
/* RESPONSIVIDADE (Telas menores que 992px) */
/* ---------------------------------- */
@media (max-width: 992px) {
    /* 1. MOSTRAR O BOTÃO HAMBURGUER */
    .hamburger-toggle {
        display: block; 
        
        /* 💡 CORREÇÃO PRINCIPAL: Fixa o botão na janela de visualização */
        position: fixed; 
        
        top: 15px;      /* 15px de distância do topo da tela */
        right: 5%;      /* 5% de distância da borda direita da tela */
        z-index: 1001;  /* Garante que o botão fique acima do menu lateral (z-index: 999) */
        
        /* Opcional, mas útil: */
        margin: 0;
        padding: 5px;
    }

    /* 2. ESCONDER O MENU LATERAL POR PADRÃO */
    .meun-lateral {
        /* Posição fixa no canto superior direito */
        position: fixed;
        top: 0;
        right: -300px; /* Esconde o menu fora da tela */
        z-index: 999;
        
        width: 280px;
        height: 100%;
        
        /* Fundo com a mesma cor do header */
        background-color: #054d4d; 
        
        /* Layout vertical (empilhado) */
        flex-direction: column;
        justify-content: flex-start; /* Alinha o conteúdo no topo */
        
        /* Estilos e Animação */
        padding: 80px 20px 20px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease-in-out;
        z-index: 999;
    }

    /* 3. CLASSE ATIVA (Mostra o Menu) */
    .meun-lateral.open {
        right: 0; /* Desliza o menu para dentro da tela */
    }
    
    /* 4. Mudar a lista de links para vertical */
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 5. Estilo dos itens de link no menu vertical */
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador sutil */
        padding: 10px 0;
    }

    /* 6. Botão de Contato abaixo dos links */
    .meun-lateral a button {
        margin-top: 15px;
        width: 100%;
    }

}










/*------------------Menu Hamburguer------------------*/




.logo {
    padding-left: 50px;
    height: 50px; /* Defina um tamanho */
}

/* Contêiner lateral: Alinha a navegação (nav) e o botão (a > button) */
.meun-lateral {
    display: flex;
    align-items: center;
    gap: 20px; 
}

/* Lista de links: Alinha os itens do menu (<li>) horizontalmente */
.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* Estilos básicos para os links */
.nav-links a {
    text-decoration: none;
    color: #ffffff;
    padding: 5px;
    position: relative;
    /* Outros estilos: font-weight, font-size, etc. */
    display: flex;
    align-items: center;
    transition: color 0.3s ease-in-out;

}

.nav-links a::after {
    content: ''; 
    position: absolute;
    bottom: -5px; 
    left: 0;
    height: 3px; 
    background-color: #054d4d; 
    
    /* Começa com largura zero (invisível) */
    width: 0; 
    /* Transição suave para a linha (efeito fade-in lateral) */
    transition: width 0.3s ease-in-out;
}

.nav-links a:hover {
    color: #65aa9f; /* Mudar cor da letra */
}

.nav-links a:hover::after {
    width: 100%; /* Linha cresce de lado a lado */
}

.nav-links a i {
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
    /* Você pode adicionar: font-size: 1.1em; se quiser o ícone um pouco maior */
}

/*Botão*/
.meun-lateral a {
  text-decoration: none; /* remove o sublinhado do link */
}

.meun-lateral button {
  background-color: transparent;
  color: #ffffff;             /* texto branco */
  border: 2px solid #ffffff;  /* borda branca */
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meun-lateral button:hover {
  background-color: #ffffff;  /* fundo branco */
  color: #054d4d;             /* texto verde do menu */
  border-color: #054d4d;      /* borda verde */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}


/*-----------FOOTER-----------*/

/* ---------------------------------- */
/* ESTILOS DO RODAPÉ (FOOTER) */
/* ---------------------------------- */
.main-footer {
    background-color: #054d4d; /* Cor de fundo solicitada */
    color: white; /* Cor da fonte geral (branca) */
    padding: 60px 20px 20px;
    font-family: Arial, sans-serif; /* Sugestão de fonte limpa */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Espaço entre as colunas */
}

/* ---------------------------------- */
/* COLUNA 1: LOGO E DESCRIÇÃO */
/* ---------------------------------- */
.footer-brand {
    flex-basis: 30%;
    max-width: 300px;
}

.footer-logo {
    /* 💡 Ajuste o tamanho da sua logo aqui */
    width: 150px; 
    height: auto;
    margin-bottom: 20px;
    /* Se a sua logo for branca, não precisa de mais estilos */
}

.brand-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8); /* Branco suave para o texto */
}

/* ---------------------------------- */
/* COLUNAS DE LINKS (SERVIÇOS E SUPORTE) */
/* ---------------------------------- */
.footer-links-group {
    flex-basis: 15%; /* Espaço reservado para as colunas de links */
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: white; /* Títulos em branco puro */
    /* Cor de destaque da referência, se quiser um toque extra */
    /* color: #ff004f; */ 
}

.footer-list {
    list-style: none;
    padding: 0;
}

.footer-list li {
    margin-bottom: 10px;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.8); /* Cor do link branco suave */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-list a:hover {
    color: #06a390; /* Cor de destaque (verde claro) no hover */
}

.footer-list a i {
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
}

/* ---------------------------------- */
/* COLUNA 4: SOCIAL E ÍCONES */
/* ---------------------------------- */
.footer-social {
    flex-basis: 20%;
    text-align: right; /* Alinha o título e os ícones à direita */
}

.social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end; /* Alinha os ícones à direita */
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Torna os ícones circulares */
    border: 2px solid white; 
    color: white;
    font-size: 1.3rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.social-icon:hover {
    background-color: #06a390; /* Cor de destaque no hover */
    border-color: #06a390;
    color: #054d4d; /* Cor de fundo no hover */
}

/* ---------------------------------- */
/* PARTE INFERIOR (COPYRIGHT) */
/* ---------------------------------- */
.footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0;
    text-align: center;
}

.bottom-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3); /* Linha divisória sutil */
    margin-bottom: 20px;
}

.copyright-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------- */
/* RESPONSIVIDADE (MOBILE) */
/* ---------------------------------- */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Empilha as colunas */
        gap: 40px;
    }
    
    .footer-brand {
        max-width: 100%;
    }

    .footer-social {
        flex-basis: auto;
        text-align: left; /* Alinha tudo à esquerda no mobile */
    }

    .social-icons {
        justify-content: flex-start; /* Alinha os ícones à esquerda */
    }
}



/*---------------------------------------------------------------------*/

/* ---------------------------------- */
/* SOLUÇÃO STICKY FOOTER (Garanta que esteja no topo do styles.css) */
/* ---------------------------------- */
html {
    height: 100%; /* Ocupa 100% da altura da tela */
}

body {
    display: flex;
    flex-direction: column; /* Alinha Header, Main e Footer verticalmente */
    min-height: 100vh; /* Garante que o corpo tenha no mínimo a altura da tela */
    margin: 0; /* Remove a margem padrão do body */
}

main {
    flex-grow: 1; /* O SEGREDO: Faz com que o conteúdo principal se estique e empurre o footer para baixo. */
}
/* ---------------------------------- */