/* 
Cores principais utilizadas:
#3A506B - azul escuro
#F4F4F9 - branco creme
#96ac3f - verde claro
#e88407 - laranja principal

Fontes:
Poppins
Montserrat
Open Sans
*/

/* =========================
   RESET E CONFIGURAÇÕES GERAIS
   ========================= */
/* Remove margens e paddings padrões, define fundo e box-sizing */
html,
body {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #F4F4F9;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    /* Rolagem suave */
}

/* =========================
   CABEÇALHO E NAVEGAÇÃO
   ========================= */
/* Cabeçalho fixo no topo da página */
.cabecalho-principal {
    position: sticky;
    /* Fixa a navbar no topo ao rolar */
    top: 0;
    z-index: 1000;
    /* Garante que fique acima dos outros elementos */
    background: #F4F4F9;
    /* Cor de fundo para evitar sobreposição */
}

/* Container principal da navegação */
.secao-navegacao {
    display: flex;
    /* Deixa os itens lado a lado */
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: space-between;
    /* Espaço entre logo, menu e busca */
    flex-wrap: nowrap;
    /* Impede quebra de linha em telas pequenas */
    box-shadow: 0 2px 4px #0000001a;
    /* Sombra leve */
}

/* Logo da navegação */
.imagem-logo {
    max-width: 110px;
    margin: 0.5rem 2rem;
    border-radius: 20px;
    -webkit-user-drag: none;
    /* Impede arrastar imagem no Chrome/Safari */
    user-select: none;
    /* Impede seleção da imagem */
}

/* Lista de links do menu principal */
.secao-navegacao ul {
    display: flex;
    gap: 4rem;
    /* Espaço entre os itens do menu */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Links do menu principal */
.links-navegacao {
    text-decoration: none;
    /* Remove sublinhado */
    color: #3A506B;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    transition: color 0.2s;
    /* Suaviza troca de cor */
    position: relative;
    /* Necessário para animação da linha */
    overflow: hidden;
    /* Garante que a linha não ultrapasse o link */
}

/* Animação de linha que aparece ao passar o mouse */
.links-navegacao::after {
    content: "";
    position: absolute;
    left: 50%;
    /* Começa do meio */
    bottom: 0;
    width: 0;
    /* Inicialmente sem largura */
    height: 2px;
    background: #3A506B;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Linha e cor permanecem ao interagir */
.links-navegacao:hover,
.links-navegacao:focus,
.links-navegacao:active {
    color: #3A506B;
}

.links-navegacao:hover::after,
.links-navegacao:focus::after,
.links-navegacao:active::after {
    width: 100%;
    left: 0;
}

/* =========================
   BOTÕES DE LOGIN/CADASTRO
   ========================= */
/* Container dos botões de autenticação */
.botoes-autenticacao {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin: 0 1rem 0 1rem;
}

/* Estilos base para os botões */
.botao-autenticacao {
    padding: 0.6rem 1.2rem;
    border: 2px solid #3A506B;
    border-radius: 25px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Botão de Login */
.botao-login {
    background: transparent;
    color: #3A506B;
}

.botao-login:hover {
    background: #3A506B;
    color: #F4F4F9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #3a506b4d;
}

/* Botão de Cadastro */
.botao-cadastro {
    background: #3A506B;
    color: #F4F4F9;
}

.botao-cadastro:hover {
    background: #2d3f54;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #3a506b66;
}

/* Efeito de ondulação nos botões */
.botao-autenticacao::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ffffff33;
    transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
    transform: translate(-50%, -50%);
}

.botao-autenticacao:hover::before {
    width: 200px;
    height: 200px;
}

/* =========================
   BARRA DE PESQUISA
   ========================= */
/* Container da barra de pesquisa */
.barra-pesquisa {
    display: flex;
    align-items: center;
    background: #F4F4F9;
    border-radius: 20px;
    padding: 2px 8px;
    border: 2px solid #3A506B;
}

/* Configuração geral do input */
.barra-pesquisa input {
    font-family: 'Poppins', Arial, sans-serif;
}

/* Input da barra de pesquisa */
.barra-pesquisa input[type="search"] {
    border: none;
    outline: none;
    padding: 6px 8px;
    font-size: 1rem;
    border-radius: 20px 0 0 20px;
    background: transparent;
}

/* Estilo do placeholder */
.barra-pesquisa input::placeholder {
    color: #3A506B;
    font-size: 1rem;
    opacity: 0.4;
}

/* Botão da barra de pesquisa */
.barra-pesquisa button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    transition: background 0.2s, box-shadow 0.3s;
}

/* Animação de hover no botão de pesquisar */
.barra-pesquisa button:hover {
    background: #3A506B;
    box-shadow: 0 2px 8px #96ac3f26;
}

.barra-pesquisa button:hover i {
    color: #F4F4F9;
    transition: color 0.3s;
}

/* Ícone da lupa */
.barra-pesquisa button i {
    color: #3A506B;
    font-size: 1.2rem;
}

/* Remove o ícone de "X" padrão do input de pesquisa em navegadores WebKit */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* =========================
   RODAPÉ
   ========================= */
/* Container principal do rodapé */
.rodape-principal {
    background-color: #3A506B;
}

/* Container dos links e informações */
.container-rodape {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    padding: 2rem;
    color: #F4F4F9;
}

/* Logo e descrição do rodapé */
.logo-rodape {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 1.2rem;
}

/* Imagem do logo no rodapé */
.logo-rodape img {
    max-width: 80px;
    border-radius: 50%;
    background: #F4F4F9;
    padding: 8px;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
}

/* Texto do logo no rodapé */
.logo-rodape p {
    margin: 0;
    text-align: center;
}

/* Blocos de links do rodapé */
.informacoes-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: "Montserrat", sans-serif;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Lista de links no rodapé */
.informacoes-rodape ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Títulos das seções do rodapé */
.informacoes-rodape h1 {
    font-size: 1.5rem;
}

/* Links do rodapé */
.informacoes-rodape a {
    color: #F4F4F9;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.informacoes-rodape a:hover {
    color: #96ac3f;
}

/* Linha divisória do rodapé */
.rodape-principal hr {
    border: none;
    display: block;
    border-top: 1px solid #f4f4f94d;
    margin: 1rem auto;
    width: 90%;
}

/* Parte inferior do rodapé: redes sociais e direitos autorais */
.inferior-rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    font-family: 'Poppins', Arial, sans-serif;
    color: #F4F4F9;
}

/* Lista de ícones sociais */
.redes-sociais ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 0 1rem 0;
    /* Espaço abaixo dos ícones */
}

/* Espaçamento entre ícones sociais */
.redes-sociais ul li {
    margin-right: 1.5rem;
}

.redes-sociais ul li:last-child {
    margin-right: 0;
}

/* Links das redes sociais */
.redes-sociais a {
    color: #F4F4F9;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.redes-sociais a:hover {
    color: #96ac3f;
}

/* =========================
   RESPONSIVIDADE
   ========================= */
@media (min-width: 1300px) {
    /* Reduz espaçamento entre itens do menu */
    .secao-navegacao ul {
        gap: 2rem;
        margin: 0 2rem 0 0;
    }

    .imagem-logo {
        margin: auto 0 0 0.5rem;
    }

    .secao-navegacao li {
        display: flex;
        text-align: center;
        align-items: center;
    }

    .links-navegacao {
        margin: 0 auto;
    }

    /* Ajusta responsividade do rodapé */
    .container-rodape {
        gap: 0.5rem;
        /* Espaço entre os blocos */
        padding: 2rem 1rem;
        /* Reduz padding lateral */
        align-items: stretch;
        /* Faz os blocos ocuparem toda a largura */
    }

    .informacoes-rodape,
    .logo-rodape {
        align-items: center;
        /* Centraliza conteúdo dos blocos */
        width: 100%;
        /* Blocos ocupam toda a largura */
        margin-bottom: 1rem;
        /* Espaço entre blocos */
    }
}

@media (max-width: 1299px) {
    .barra-pesquisa {
        display: none;
        /* Esconde a barra de pesquisa em telas menores */
    }
}