html, body {
    margin: 0; /*Remove as margens padrão do navegador*/
    padding: 0; /*Remove os espaçamentos internos padrão*/
    width: 100%;
    overflow-x: hidden; /*Impede rolagem horizontal*/
    background-color: rgb(255, 252, 232);
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*===============HEADER, MENU DE NAVEGAÇÃO E BOTÕES=============== parei aq*/
nav {
    background-color: rgb(170, 30, 30); /* Cor de fundo do menu */
    display: flex; /* Ativa Flexbox */
    justify-content: space-around; /* Distribui os elementos com espaços iguais */
    align-items: center; /* Centraliza os itens verticalmente */
    min-height: 18vh; /* Altura mínima de 18% da tela */
    width: 100%; /* Ocupa toda a largura */
    box-sizing: border-box; /* Inclui bordas e padding no cálculo do tamanho */
    position: relative; /* Permite posicionamentos relativos dentro dele */
}

.logo2 {
    height: 170px; /* Altura da logo */
    width: auto; /* Mantém a proporção da imagem */
    max-width: 100%; /* Evita que ultrapasse a largura do contêiner */
    display: block; /* Remove espaços extras de imagens inline */
}

nav ul {
    display: flex; /* Organiza os itens em linha */
    flex-wrap: wrap; /* Permite quebra de linha */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 12px; /* Espaçamento entre os itens */
    margin: 0; /* Remove margem padrão */
    padding: 0; /* Remove padding padrão */
}

li {
    list-style: none; /* Remove os marcadores da lista */
}

a {
    text-decoration: none; /* Remove o sublinhado dos links */
}

a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

.button-a {
    background-color: azure; /* Cor de fundo do botão */
    border: none; /* Remove a borda */
    padding: 10px 15px; /* Espaçamento interno */
    border-radius: 10px; /* Arredonda os cantos */
    font-size: 20px; /* Tamanho do texto */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* Suaviza animações */
}

.button-a:hover {
    transform: translateY(-2px); /* Move o botão 2px para cima */
    cursor: pointer; /* Mostra a mãozinha */
    box-shadow: 1px 1px 10px #333; /* Cria sombra ao redor */
}

/* Borda decorativa abaixo do Nav */
.nav-background {
    width: 100%; /* Ocupa toda a largura */
    height: 8px; /* Altura da borda decorativa */
    background-image: url("../imagens/bordaNav.png"); /* Imagem usada como borda */
    background-repeat: repeat-x; /* Repete apenas na horizontal */
    background-size: contain; /* Ajusta o tamanho da imagem */
    background-position: center; /* Centraliza a imagem */
}

/* Animações de Entrada */
.mensagem-ja-entrou h2 {
    display: flex; /* Ativa Flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto */
    flex-wrap: wrap; /* Permite quebra de linha */
    word-wrap: break-word; /* Quebra palavras longas */
    font-size: 100px; /* Tamanho do texto */
    animation: irPraCima alternate 1s ease; /* Executa a animação */
}

.mensagem-ja-entrou p {
    display: flex; /* Ativa Flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto */
    flex-wrap: wrap; /* Permite quebra de linha */
    word-wrap: break-word; /* Quebra palavras longas */
    font-size: 50px; /* Tamanho do texto */
    animation: irPraCima alternate 4s ease; /* Executa a animação */
}

@keyframes irPraCima {
    from {
        transform: translateY(-4px) scale(0.1); /* Começa pequeno e um pouco acima */
    }
    to {
        transform: translateY(0) scale(1); /* Termina no tamanho normal */
    }
}

/* ===============FORMULÁRIO================== */
.tela-form {
    background-color: #ffffff; /* Fundo branco */
    max-width: 400px; /* Largura máxima */
    width: 90%; /* Ocupa 90% da largura disponível */
    margin: 40px auto; /* Centraliza horizontalmente */
    padding: 30px; /* Espaçamento interno */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* Sombra externa */
    border: 4px solid rgb(170, 30, 30); /* Borda vermelha */
    box-sizing: border-box; /* Inclui borda e padding no tamanho */
}

.tela-form h2 {
    text-align: center; /* Centraliza o título */
    color: rgb(170, 30, 30); /* Cor vermelha */
    margin-top: 0; /* Remove margem superior */
    margin-bottom: 25px; /* Espaço abaixo */
    font-size: 24px; /* Tamanho da fonte */
}

.tela-form label {
    display: block; /* Faz cada label ocupar uma linha */
    font-weight: bold; /* Texto em negrito */
    color: #333; /* Cor cinza escura */
    margin-bottom: 8px; /* Espaço abaixo */
}

.tela-form input {
    width: 100%; /* Ocupa toda a largura disponível */
    padding: 12px; /* Espaçamento interno */
    margin-bottom: 20px; /* Espaço abaixo */
    border: 2px solid #ccc; /* Borda cinza */
    border-radius: 6px; /* Cantos arredondados */
    font-size: 16px; /* Tamanho da fonte */
    box-sizing: border-box; /* Inclui borda e padding no tamanho */
    transition: border-color 0.3s; /* Suaviza mudança da borda */
}

.tela-form input:focus {
    border-color: rgb(170, 30, 30); /* Muda a cor da borda ao selecionar */
    outline: none; /* Remove contorno padrão */
}

/* Container específico para alinhar o campo de senha com os olhos */
.password-container {
    position: relative; /* Permite posicionamento absoluto dos ícones */
    width: 100%; /* Ocupa toda a largura */
}

.password-container input {
    padding-right: 40px; /* Reserva espaço para o ícone */
}

/* Estilo para posicionar os ícones de olho dentro do input */
.icon-mostrar,
.icon-desmostrar {
    position: absolute; /* Posicionamento absoluto */
    right: 12px; /* Distância da direita */
    top: 38%; /* Distância do topo */
    transform: translateY(-50%); /* Centraliza verticalmente */
    cursor: pointer; /* Mostra mãozinha */
    font-size: 18px; /* Tamanho do ícone */
    user-select: none; /* Impede seleção do texto */
}

/* Botão de Enviar Cadastro */
.tela-form button[type="submit"] {
    width: 100%; /* Ocupa toda a largura */
    background-color: #28a745; /* Fundo verde */
    color: white; /* Texto branco */
    border: none; /* Remove borda */
    padding: 14px; /* Espaçamento interno */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    border-radius: 6px; /* Cantos arredondados */
    cursor: pointer; /* Mostra mãozinha */
    transition: background 0.2s; /* Suaviza mudança de cor */
}

.tela-form button[type="submit"]:hover {
    background-color: #218838; /* Verde mais escuro ao passar o mouse */
}

/* ====================RODAPÉ (FOOTER)==================== */
footer {
    background-color: rgb(170, 30, 30); /* Cor de fundo */
    padding: 20px; /* Espaçamento interno */
    margin-top: auto; /* Empurra o rodapé para o final da página */
}

footer p {
    text-align: center; /* Centraliza o texto */
    color: #ffffff; /* Texto branco */
    margin: 0; /* Remove margens */
    font-size: 18px; /* Tamanho da fonte */
}

/* ================= TABLET ================= */
@media screen and (min-width: 601px) and (max-width: 1024px) {

    nav {
        flex-wrap: wrap; /* Permite quebra de linha */
        padding: 10px; /* Espaçamento interno */
    }

    .logo2 {
        height: 130px; /* Reduz o tamanho da logo */
    }

    nav ul {
        gap: 10px; /* Reduz o espaçamento */
    }

    .button-a {
        font-size: 18px; /* Reduz o texto */
        padding: 8px 12px; /* Reduz o espaçamento interno */
    }

    .nav-background {
        height: 6px; /* Reduz a altura da borda */
    }

    footer {
        padding: 15px; /* Reduz o padding */
    }

    footer p {
        font-size: 16px; /* Reduz o texto */
    }
}

/* ================= CELULAR ================= */
@media screen and (max-width: 600px) {

    nav {
        flex-direction: column; /* Organiza os elementos em coluna */
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        padding: 10px 0; /* Espaçamento superior e inferior */
        min-height: auto; /* Altura automática */
    }

    .logo2 {
        height: 90px; /* Logo menor */
        margin: 10px 0; /* Espaço acima e abaixo */
    }

    nav ul {
        flex-direction: column; /* Lista em coluna */
        gap: 8px; /* Espaçamento entre itens */
        margin: 10px 0; /* Margens verticais */
        width: 100%; /* Ocupa toda a largura */
    }

    li {
        width: 100%; /* Ocupa toda a largura */
        display: flex; /* Ativa Flexbox */
        justify-content: center; /* Centraliza conteúdo */
    }

    .button-a {
        width: 180px; /* Largura fixa */
        font-size: 16px; /* Texto menor */
    }

    .nav-background {
        height: 4px; /* Borda mais fina */
    }

    .container-tierList {
        width: 60%; /* Largura de 60% */
        flex-wrap: wrap; /* Permite quebra */
        word-wrap: break-word; /* Quebra palavras longas */
        margin: 0; /* Remove margens */
    }

    .container-icons img {
        width: 40%; /* Reduz tamanho das imagens */
    }

    footer {
        padding: 15px; /* Espaçamento interno */
    }

    footer p {
        font-size: 14px; /* Texto menor */
    }
}