/* CONFIGURAÇÕES GERAIS */

* {
    margin: 0; /* remove as margens padrão */
    padding: 0; /* remove os espaçamentos padrão */
    box-sizing: border-box; /* inclui bordas e espaçamentos nas dimensões */
}

/* CORPO DA PÁGINA */

body {
    font-family: Arial, Helvetica, sans-serif; /* define a fonte principal */
    background: #020814; /* define uma cor de fundo caso a imagem não carregue */
    color: white; /* define a cor padrão dos textos */
}

/* ESTRUTURA DA PÁGINA */

.conteudo {
    min-height: 100vh; /* ocupa no mínimo toda a altura da tela */
    display: flex; /* ativa o Flexbox */
    flex-direction: column; /* organiza conteúdo e rodapé verticalmente */
    align-items: stretch; /* permite que o rodapé ocupe toda a largura */
}

/* ÁREA CENTRAL DO LOGIN */

.area-login {
    flex: 1; /* ocupa o espaço disponível antes do rodapé */
    width: 100%; /* ocupa toda a largura da página */
    min-height: 650px; /* reserva espaço para o formulário */
    padding: 65px 20px 75px; /* cria espaços internos */
    display: flex; /* ativa o Flexbox */
    flex-direction: column; /* organiza o título acima da caixa */
    align-items: center; /* centraliza os elementos */
    justify-content: center; /* centraliza o conjunto verticalmente */
    background-image:linear-gradient(90deg,rgba(1, 5, 18, 0.45) 0%, /* escurece levemente a esquerda */rgba(3, 12, 38, 0.65) 50%, /* aumenta o contraste no centro */rgba(3, 12, 38, 0.45) 100% /* deixa a imagem aparecer mais à direita */),url("../IMAGENS/LOGOS/imgf1.png"); /* mantém a imagem original de Fórmula 1 */
    background-size: cover; /* faz a imagem preencher o espaço */
    background-repeat: no-repeat; /* impede a repetição da imagem */
    background-position: center 45%; /* ajusta o enquadramento para mostrar melhor a imagem */
}

/* IDENTIDADE DO SITE */

.identidade-login {
    width: 100%; /* ocupa a largura disponível */
    max-width: 650px; /* limita a largura do conteúdo */
    text-align: center; /* centraliza os textos */
}

/* TEXTO ACIMA DO TÍTULO */

.identidade-mini {
    display: inline-block; /* permite controlar os espaçamentos */
    color: #a6bfff; /* utiliza azul claro */
    font-size: 12px; /* define o tamanho da fonte */
    font-weight: bold; /* destaca o texto */
    letter-spacing: 4px; /* separa as letras */
    margin-bottom: 10px; /* separa do título principal */
}

/* TÍTULO FÓRMULA 1 */

.titulo {
    font-family: Georgia, serif; /* mantém a fonte do título original */
    font-size: 76px; /* define o tamanho do título */
    font-weight: bold; /* deixa o título em negrito */
    font-style: italic; /* inclina as letras */
    line-height: 1.1; /* controla a altura da linha */
    letter-spacing: -3px; /* aproxima as letras */
    color: #f5f7ff; /* utiliza branco azulado */
    text-shadow: 0 0 25px rgba(41, 98, 255, 0.45); /* cria um brilho suave */
}

/* NÚMERO 1 DO TÍTULO */

.titulo span {
    color: #3b82ff; /* destaca o número em azul */
    font-size: 1.3em; /* aumenta o número 1 em 30% em relação ao título */
    line-height: 0.8; /* evita que o número aumente muito a altura da linha */
    display: inline-block; /* permite controlar o tamanho separadamente */
}

/* DESCRIÇÃO ABAIXO DO TÍTULO */

.identidade-login p {
    margin-top: 10px; /* separa a descrição do título */
    color: #c8d5ed; /* utiliza azul acinzentado claro */
    font-size: 15px; /* define o tamanho da descrição */
    line-height: 1.5; /* melhora a leitura */
}

/* CAIXA DE LOGIN */

.login {
    width: 100%; /* permite adaptar ao espaço disponível */
    max-width: 430px; /* limita a largura da caixa */
    margin-top: 32px; /* separa a caixa do título */
    padding: 34px 36px; /* define os espaços internos */
    background: rgba(7, 16, 39, 0.78); /* permite visualizar suavemente a imagem atrás da caixa */
    border: 1px solid rgba(59, 130, 255, 0.50); /* adiciona uma borda azul */
    border-radius: 22px; /* arredonda os cantos */
    box-shadow: 0 15px 55px rgba(0, 0, 0, 0.45), 0 0 30px rgba(36, 92, 255, 0.12); /* cria profundidade e brilho azul */
    backdrop-filter: blur(12px); /* desfoca o conteúdo atrás da caixa */
}

/* CABEÇALHO DO LOGIN */

.login-cabecalho {
    text-align: center; /* centraliza o conteúdo do cabeçalho */
    margin-bottom: 28px; /* separa o cabeçalho dos campos */
}

/* ÍCONE DE BANDEIRA */

.login-icone {
    width: 52px; /* define a largura do círculo */
    height: 52px; /* define a altura do círculo */
    margin: 0 auto 13px; /* centraliza e separa do título */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza o ícone verticalmente */
    justify-content: center; /* centraliza o ícone horizontalmente */
    background: rgba(59, 130, 255, 0.14); /* cria um fundo azul transparente */
    border: 1px solid rgba(59, 130, 255, 0.4); /* adiciona uma borda azul */
    border-radius: 50%; /* transforma o elemento em círculo */
    color: #6da2ff; /* define a cor do ícone */
    font-size: 22px; /* define o tamanho do ícone */
}

/* TÍTULO LOGIN */

.login h2 {
    color: #ffffff; /* deixa o título branco */
    font-size: 36px; /* define o tamanho da fonte */
    font-weight: 800; /* destaca o título */
    font-style: italic; /* inclina as letras */
    letter-spacing: 2px; /* separa as letras */
}

/* SUBTÍTULO DO LOGIN */

.login-cabecalho p {
    color: #aebfdd; /* utiliza azul acinzentado */
    font-size: 14px; /* define o tamanho do texto */
    margin-top: 7px; /* separa do título LOGIN */
}

/* NOMES DOS CAMPOS */

.login label {
    display: block; /* coloca o texto em uma linha própria */
    color: #ecf2ff; /* utiliza branco azulado */
    font-size: 14px; /* define o tamanho do texto */
    font-weight: bold; /* destaca o nome do campo */
    margin-bottom: 9px; /* separa do campo de digitação */
}

/* CONTAINER DOS CAMPOS */

.campo-login {
    position: relative; /* permite posicionar o ícone dentro do campo */
    margin-bottom: 21px; /* separa os campos verticalmente */
}

/* ÍCONES DOS CAMPOS */

.campo-login > i {
    position: absolute; /* posiciona o ícone dentro do campo */
    left: 16px; /* afasta o ícone da borda esquerda */
    top: 50%; /* posiciona o ícone no meio da altura */
    transform: translateY(-50%); /* centraliza verticalmente */
    color: #89a6d8; /* utiliza azul claro */
    font-size: 16px; /* define o tamanho do ícone */
    pointer-events: none; /* impede que o ícone bloqueie cliques no campo */
}

/* CAMPOS DE E-MAIL E SENHA */

.campo-login input {
    width: 100%; /* ocupa toda a largura do container */
    height: 51px; /* define a altura do campo */
    padding: 0 15px 0 45px; /* reserva espaço para o ícone à esquerda */
    border: 1px solid #293b60; /* adiciona uma borda azul escura */
    border-radius: 12px; /* arredonda os cantos */
    background: #0b1730; /* define o fundo azul escuro */
    color: white; /* deixa o texto digitado branco */
    font-size: 15px; /* define o tamanho da fonte */
    outline: none; /* remove o contorno padrão */
    transition: border-color 0.3s, box-shadow 0.3s; /* suaviza o destaque ao selecionar */
}

/* TEXTO DE EXEMPLO */

.campo-login input::placeholder {
    color: #8295b6; /* define a cor do placeholder */
}

/* CAMPO SELECIONADO */

.campo-login input:focus {
    border-color: #3b82ff; /* destaca a borda em azul */
    box-shadow: 0 0 0 3px rgba(59, 130, 255, 0.15); /* cria um brilho suave */
}

/* MENSAGEM DE ERRO */

.aviso-erro {
    display: flex; /* organiza o ícone ao lado da mensagem */
    align-items: flex-start; /* alinha os elementos pelo topo */
    gap: 11px; /* separa o ícone do texto */
    padding: 14px; /* cria espaço interno */
    margin-bottom: 20px; /* separa o aviso do botão */
    background: rgba(190, 35, 50, 0.12); /* cria um fundo vermelho transparente */
    border: 1px solid rgba(255, 85, 105, 0.45); /* adiciona uma borda vermelha */
    border-radius: 12px; /* arredonda os cantos */
}

/* ÍCONE DE ERRO */

.aviso-erro > i {
    color: #ff7182; /* utiliza vermelho claro */
    font-size: 19px; /* define o tamanho do ícone */
    margin-top: 1px; /* ajusta o alinhamento vertical */
}

/* TÍTULO DA MENSAGEM */

.aviso-erro strong {
    display: block; /* deixa o título em uma linha própria */
    color: #ff8d9b; /* destaca o aviso em vermelho claro */
    font-size: 12px; /* define o tamanho do título */
    letter-spacing: 0.6px; /* separa levemente as letras */
    margin-bottom: 5px; /* separa do texto explicativo */
}

/* TEXTO DA MENSAGEM */

.aviso-erro p {
    color: #ffe2e6; /* utiliza vermelho muito claro */
    font-size: 13px; /* define o tamanho do texto */
    line-height: 1.5; /* melhora a leitura */
}

/* BOTÃO ENTRAR */

.botao-entrar {
    width: 100%; /* ocupa toda a largura disponível */
    min-height: 51px; /* define uma altura confortável */
    display: flex; /* organiza texto e ícone */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    gap: 12px; /* separa o texto do ícone */
    border: none; /* remove a borda padrão */
    border-radius: 12px; /* arredonda os cantos */
    background: linear-gradient(90deg, #1648df, #367dff); /* cria um degradê azul */
    color: white; /* deixa o texto branco */
    font-size: 16px; /* define o tamanho da fonte */
    font-weight: bold; /* destaca o texto */
    letter-spacing: 1px; /* separa as letras */
    cursor: pointer; /* mostra a mão ao passar o mouse */
    box-shadow: 0 6px 20px rgba(36, 92, 255, 0.22); /* cria um brilho azul */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s; /* suaviza os efeitos */
}

/* EFEITO DO BOTÃO */

.botao-entrar:hover {
    transform: translateY(-2px); /* move o botão levemente para cima */
    box-shadow: 0 10px 27px rgba(36, 92, 255, 0.38); /* intensifica o brilho */
    background: linear-gradient(90deg, #245cff, #5491ff); /* clareia o degradê */
}

/* FOCO DO BOTÃO E DO LINK */

.botao-entrar:focus-visible,
.meio a:focus-visible {
    outline: 2px solid #9ec0ff; /* destaca o elemento selecionado pelo teclado */
    outline-offset: 4px; /* afasta o contorno do elemento */
}

/* ÁREA DE CADASTRO */

.meio {
    margin-top: 24px; /* separa o cadastro do botão */
    padding-top: 20px; /* cria espaço interno acima */
    border-top: 1px solid rgba(145, 170, 220, 0.18); /* adiciona uma linha discreta */
    text-align: center; /* centraliza os textos */
}

/* PERGUNTA DO CADASTRO */

.meio p {
    color: #acbdd9; /* utiliza azul acinzentado */
    font-size: 13px; /* define o tamanho do texto */
    margin-bottom: 8px; /* separa do link */
}

/* LINK CRIAR CONTA */

.meio a {
    color: #72a6ff; /* utiliza azul claro */
    text-decoration: none; /* remove o sublinhado */
    font-size: 14px; /* define o tamanho do link */
    font-weight: bold; /* destaca o link */
    letter-spacing: 0.5px; /* separa levemente as letras */
    transition: color 0.3s; /* suaviza a mudança de cor */
}

/* EFEITO DO LINK */

.meio a:hover {
    color: #b6d0ff; /* clareia o link ao passar o mouse */
    text-decoration: underline; /* adiciona o sublinhado */
}

/* RESPONSIVIDADE - TABLETS E CELULARES */

@media (max-width: 820px) {

    /* ÁREA CENTRAL */

    .area-login {
        min-height: 650px; /* mantém espaço para o formulário */
        padding: 55px 20px 70px; /* adapta os espaços internos */
    }

    /* TÍTULO PRINCIPAL */

    .titulo {
        font-size: 62px; /* reduz o tamanho do título */
        letter-spacing: -2px; /* aproxima as letras */
    }

    /* CAIXA DE LOGIN */

    .login {
        max-width: 420px; /* controla a largura em tablets */
        padding: 30px; /* adapta o espaço interno */
    }

}

/* RESPONSIVIDADE - CELULARES */

@media (max-width: 480px) {

    /* ÁREA CENTRAL */
    .area-login {
        min-height: auto; /* permite que o conteúdo defina a altura */
        padding: 45px 16px 55px; /* reduz os espaços para o celular */
    }

    /* TEXTO ACIMA DO TÍTULO */
    .identidade-mini {
        font-size: 10px; /* diminui o texto superior */
        letter-spacing: 2.5px; /* aproxima as letras */
    }

    /* TÍTULO FÓRMULA 1 */
    .titulo {
        font-size: clamp(39px, 12vw, 52px); /* adapta o tamanho à largura do celular */
        letter-spacing: -1px; /* reduz o espaçamento entre as letras */
    }

    /* DESCRIÇÃO */
    .identidade-login p {
        font-size: 13px; /* adapta o tamanho da descrição */
        line-height: 1.5; /* mantém boa leitura */
    }

    /* CAIXA DE LOGIN */
    .login {
        margin-top: 25px; /* separa a caixa do título */
        padding: 25px 20px; /* reduz o espaço interno */
        border-radius: 18px; /* adapta os cantos */
    }

    /* TÍTULO LOGIN */
    .login h2 {
        font-size: 32px; /* adapta o tamanho do título */
    }

    /* CAMPOS */
    .campo-login input {
        height: 49px; /* adapta a altura dos campos */
        font-size: 16px; /* evita zoom automático em alguns navegadores móveis */
    }

    /* BOTÃO ENTRAR */
    .botao-entrar {
        min-height: 49px; /* adapta a altura do botão */
        font-size: 15px; /* diminui levemente o texto */
    }

    /* MENSAGEM DE ERRO */
    .aviso-erro {
        padding: 12px; /* reduz o espaço interno do aviso */
        gap: 9px; /* aproxima o ícone do texto */
    }
    .aviso-erro p {
        font-size: 12px; /* mantém o aviso dentro da tela */
    }

}