/* 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 padding no tamanho dos elementos */
}

/* CORPO DA PÁGINA */

body {
    font-family: Arial, Helvetica, sans-serif; /* define a fonte principal */
    background: #020814; /* define a cor de fundo da página */
    color: white; /* utiliza branco como cor padrão */
}


/* MENU SUPERIOR */
.menu {
    position: absolute; /* posiciona o menu acima do conteúdo */
    top: 0; /* mantém no topo da página */
    left: 0; /* alinha à esquerda */
    width: 100%; /* ocupa toda a largura */
    height: 75px; /* define a altura do menu */
    padding: 0 35px; /* cria espaço nas laterais */
    display: flex; /* organiza os elementos lado a lado */
    align-items: center; /* centraliza verticalmente */
    justify-content: flex-start; /* mantém o link alinhado à esquerda */
    z-index: 10; /* mantém o menu acima do fundo */
}

/* LINK VOLTAR AO INÍCIO */
.voltar-inicio {
    display: inline-flex; /* organiza seta e texto lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* separa a seta do texto */
    color: #d9e5ff; /* utiliza branco azulado */
    font-size: 14px; /* define o tamanho do texto */
    font-weight: 600; /* destaca levemente o texto */
    text-decoration: none; /* remove o sublinhado */
    transition: color 0.3s, transform 0.3s; /* suaviza os efeitos */
}

/* SETA DO LINK */
.voltar-inicio i {
    color: #6da2ff; /* destaca a seta em azul */
    font-size: 15px; /* define o tamanho da seta */
}

/* EFEITO AO PASSAR O MOUSE */
.voltar-inicio:hover {
    color: #6da2ff; /* muda o texto para azul */
    transform: translateX(-4px); /* move levemente para a esquerda */
}

/* FOCO PELO TECLADO */
.voltar-inicio:focus-visible {
    outline: 2px solid #9ec0ff; /* destaca o link selecionado */
    outline-offset: 5px; /* separa o contorno */
}

/* CONTEÚDO PRINCIPAL */
.conteudo {
    min-height: 100vh; /* ocupa pelo menos toda a altura da tela */
    width: 100%; /* ocupa toda a largura */
    padding: 115px 20px 75px; /* cria espaço para a logo e o rodapé */
    display: flex; /* ativa o Flexbox */
    flex-direction: column; /* coloca título e formulário um abaixo do outro */
    align-items: center; /* centraliza o conteúdo horizontalmente */
    justify-content: flex-start; /* começa o conteúdo no topo */
    background-image:linear-gradient(90deg,rgba(1, 5, 18, 0.45) 0%,rgba(3, 12, 38, 0.65) 50%,rgba(3, 12, 38, 0.45) 100%),url("../IMAGENS/LOGOS/imgf1.png"); /* mantém a imagem da pista com escurecimento */
    background-size: cover; /* faz a imagem preencher o fundo */
    background-position: center 45%; /* enquadra a imagem próxima do centro */
    background-repeat: no-repeat; /* impede repetição da imagem */
}

/* IDENTIDADE DO CADASTRO */
.identidade-cadastro {
    width: 100%; /* ocupa toda a largura disponível */
    max-width: 700px; /* limita o espaço dos textos */
    text-align: center; /* centraliza os textos */
}

/* TEXTO ACIMA DO TÍTULO */
.identidade-mini {
    display: inline-block; /* permite controlar o espaçamento */
    color: #a6bfff; /* define um azul claro */
    font-size: 12px; /* define o tamanho do texto */
    font-weight: bold; /* destaca o texto */
    letter-spacing: 4px; /* separa as letras */
    margin-bottom: 10px; /* separa do título */
}

/* TÍTULO FÓRMULA 1 */
.titulo {
    font-family: Georgia, serif; /* mantém a fonte utilizada no login */
    font-size: 76px; /* define o tamanho do título */
    font-style: italic; /* inclina o texto */
    font-weight: bold; /* deixa o texto em negrito */
    letter-spacing: -3px; /* aproxima as letras */
    line-height: 1.1; /* controla a altura do título */
    color: #f5f7ff; /* utiliza branco azulado */
    text-align: center; /* centraliza o título */
    text-shadow: 0 0 25px rgba(41, 98, 255, 0.45); /* cria brilho azul */
}

/* NÚMERO 1 */
.titulo span {
    display: inline-block; /* permite controlar o tamanho separadamente */
    color: #3b82ff; /* destaca o número em azul */
    font-size: 1.3em; /* aumenta o número como fizemos no login */
    line-height: 0.8; /* mantém a altura do título compacta */
}

/* DESCRIÇÃO DO CADASTRO */
.identidade-cadastro 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 DO CADASTRO */
.login {
    width: 100%; /* permite adaptar a diferentes telas */
    max-width: 460px; /* limita a largura máxima da caixa */
    margin-top: 32px; /* separa a caixa do título */
    padding: 34px 36px; /* define o espaçamento interno */
    background: rgba(7, 16, 39, 0.78); /* cria um fundo azul escuro transparente */
    border: 1px solid rgba(59, 130, 255, 0.50); /* adiciona uma borda azul */
    border-radius: 22px; /* arredonda os cantos da caixa */
    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); /* aplica efeito de vidro ao fundo */
}

/* CABEÇALHO DO CADASTRO */
.cadastro-cabecalho {
    text-align: center; /* centraliza os elementos do cabeçalho */
    margin-bottom: 28px; /* separa o cabeçalho dos campos */
}

/* ÍCONE DO CADASTRO */
.cadastro-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 verticalmente */
    justify-content: center; /* centraliza 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 a caixa em círculo */
    color: #6da2ff; /* define a cor do ícone */
    font-size: 22px; /* define o tamanho do ícone */
}

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

/* DESCRIÇÃO DO CADASTRO */
.cadastro-cabecalho p {
    color: #aebfdd; /* utiliza azul acinzentado */
    font-size: 14px; /* define o tamanho do texto */
    line-height: 1.5; /* melhora a leitura */
    margin-top: 7px; /* separa o texto do título */
}

/* NOMES DOS CAMPOS */
.login form > 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 o texto do campo */
}

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

/* ÍCONES DOS CAMPOS */
.campo-cadastro > i {
    position: absolute; /* posiciona o ícone dentro do campo */
    left: 16px; /* afasta o ícone da borda esquerda */
    top: 50%; /* posiciona no centro vertical */
    transform: translateY(-50%); /* centraliza verticalmente */
    color: #89a6d8; /* utiliza azul claro */
    font-size: 16px; /* define o tamanho do ícone */
    pointer-events: none; /* permite clicar no campo através do ícone */
}

/* CAMPOS DE TEXTO */
.campo-cadastro input {
    width: 100%; /* ocupa toda a largura disponível */
    height: 51px; /* define a altura do campo */
    padding: 0 15px 0 45px; /* reserva espaço para o ícone */
    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 clicar */
}

/* TEXTO DE EXEMPLO */
.campo-cadastro input::placeholder {
    color: #8295b6; /* define a cor dos placeholders */
}

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

/* REGRAS DA SENHA */
.regras-senha {
    margin: -5px 0 21px; /* aproxima as regras do campo de senha */
    padding: 15px; /* cria espaçamento interno */
    background: rgba(11, 23, 48, 0.95); /* cria um fundo azul escuro */
    border: 1px solid #293b60; /* adiciona uma borda azul */
    border-radius: 12px; /* arredonda os cantos */
}

/* ESCONDER REGRAS DA SENHA */
.regras-senha[hidden] {
    display: none; /* esconde as regras antes de começar a digitar */
}

/* TÍTULO DAS REGRAS */
.regras-senha .titulo-regras {
    color: #ecf2ff; /* utiliza branco azulado */
    font-size: 13px; /* define o tamanho da fonte */
    font-weight: bold; /* destaca o título */
    margin-bottom: 11px; /* separa o título das regras */
}

/* ITENS DAS REGRAS */
.regras-senha p:not(.titulo-regras) {
    display: flex; /* coloca o ícone ao lado do texto */
    align-items: center; /* centraliza os elementos verticalmente */
    gap: 9px; /* separa o ícone do texto */
    color: #ff8995; /* utiliza vermelho para regras não atendidas */
    font-size: 12px; /* define o tamanho da fonte */
    line-height: 1.5; /* melhora a leitura */
    margin-top: 8px; /* separa as regras */
}

/* REGRAS ATENDIDAS */
.regras-senha p.valida {
    color: #38d97b; /* utiliza verde para regras atendidas */
}

/* ÍCONES DAS REGRAS */
.regras-senha p i {
    color: inherit; /* acompanha a cor da regra */
}

/* MENSAGEM DE CONFIRMAÇÃO */
.mensagem-confirmacao {
    font-size: 13px; /* define o tamanho da mensagem */
    font-weight: 600; /* deixa o texto destacado */
    line-height: 1.5; /* melhora a leitura */
    text-align: center; /* centraliza a mensagem */
    border-radius: 10px; /* arredonda os cantos */
    margin-bottom: 15px; /* separa dos próximos elementos */
}

/* SENHAS IGUAIS */
.mensagem-confirmacao.valida {
    color: #38d97b; /* utiliza verde no texto */
    background: rgba(56, 217, 123, 0.10); /* cria um fundo verde transparente */
    border: 1px solid rgba(56, 217, 123, 0.4); /* adiciona uma borda verde */
    padding: 10px; /* define o espaço interno */
}

/* SENHAS DIFERENTES */
.mensagem-confirmacao.invalida {
    color: #ff8995; /* utiliza vermelho no texto */
    background: rgba(255, 50, 70, 0.12); /* cria um fundo vermelho transparente */
    border: 1px solid rgba(255, 80, 100, 0.5); /* adiciona uma borda vermelha */
    padding: 10px; /* define o espaço interno */
}

/* MENSAGEM DE ERRO DO JAVASCRIPT */
.mensagem-erro {
    color: #ff8995; /* utiliza vermelho claro */
    font-size: 13px; /* define o tamanho da mensagem */
    line-height: 1.5; /* melhora a leitura */
    margin: 12px 0; /* separa verticalmente */
    text-align: left; /* alinha o texto à esquerda */
}

/* ESCONDER MENSAGEM DE ERRO */
.mensagem-erro[hidden] {
    display: none; /* esconde a mensagem quando não existe erro */
}

/* AVISO DE ERRO DO PHP */
.alerta-cadastro {
    display: flex; /* organiza o ícone e o texto lado a lado */
    align-items: flex-start; /* alinha os elementos pelo topo */
    gap: 11px; /* separa o ícone da mensagem */
    padding: 14px; /* cria espaço interno */
    margin-bottom: 23px; /* separa dos campos do formulário */
    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 DO AVISO */
.alerta-cadastro > i {
    color: #ff7182; /* utiliza vermelho claro */
    font-size: 19px; /* define o tamanho do ícone */
    margin-top: 1px; /* ajusta o alinhamento vertical */
}

/* TÍTULO DO AVISO */
.alerta-texto strong {
    display: block; /* coloca o título em linha própria */
    color: #ff8d9b; /* destaca o título em vermelho */
    font-size: 12px; /* define o tamanho da fonte */
    letter-spacing: 0.6px; /* separa levemente as letras */
    margin-bottom: 5px; /* separa do texto explicativo */
}

/* TEXTO DO AVISO */

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

/* BARRA DE ESCOLHA DO PILOTO */

.escolha-piloto {
    margin: 5px 0 24px; /* separa a seleção dos outros elementos */
    background: #0b1730; /* utiliza o mesmo fundo dos campos */
    border: 1px solid #293b60; /* adiciona uma borda azul escura */
    border-radius: 12px; /* arredonda os cantos */
    overflow: hidden; /* mantém o conteúdo dentro da barra */
}

/* TÍTULO DA BARRA */

.escolha-piloto summary {
    display: flex; /* organiza o ícone, texto e seta */
    align-items: center; /* centraliza verticalmente */
    gap: 12px; /* separa os elementos */
    min-height: 51px; /* mantém a altura dos campos */
    padding: 12px 15px; /* cria espaço interno */
    color: #b8cae9; /* utiliza azul acinzentado claro */
    font-size: 14px; /* define o tamanho da fonte */
    cursor: pointer; /* indica que a barra é clicável */
    list-style: none; /* remove o marcador padrão */
    transition: background 0.3s; /* suaviza o destaque ao passar o mouse */
}

/* REMOVER MARCADOR PADRÃO */

.escolha-piloto summary::-webkit-details-marker {
    display: none; /* remove a seta padrão do navegador */
}

/* EFEITO DA BARRA */

.escolha-piloto summary:hover {
    background: rgba(59, 130, 255, 0.10); /* destaca levemente o fundo */
}

/* ÍCONE DE PALETA */

.escolha-piloto summary .fa-palette {
    color: #82aaff; /* utiliza azul claro */
    font-size: 16px; /* define o tamanho do ícone */
}

/* SETA DA BARRA */

.seta-piloto {
    margin-left: auto; /* posiciona a seta à direita */
    font-size: 13px; /* define o tamanho da seta */
    transition: transform 0.3s; /* suaviza a rotação */
}

/* SETA QUANDO A BARRA ESTÁ ABERTA */

.escolha-piloto[open] .seta-piloto {
    transform: rotate(180deg); /* gira a seta para cima */
}

/* BARRA ABERTA */

.escolha-piloto[open] {
    border-color: #3b82ff; /* destaca a borda em azul */
}

/* CONTEÚDO DAS CORES */

.conteudo-pilotos {
    padding: 13px 12px 17px; /* cria espaço interno */
    border-top: 1px solid #293b60; /* separa o conteúdo do título */
}

/* DESCRIÇÃO DAS CORES */

.descricao-piloto {
    color: #c5d0e5; /* utiliza azul acinzentado claro */
    font-size: 12px; /* define o tamanho da descrição */
    line-height: 1.5; /* melhora a leitura */
    text-align: center; /* centraliza o texto */
    margin-bottom: 16px; /* separa da lista de cores */
}

/* LISTA DE CORES */

.lista-pilotos {
    display: grid; /* organiza as cores em grade */
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* coloca sete cores em uma linha */
    gap: 4px; /* separa as opções */
}

/* CADA OPÇÃO DE COR */

.opcao-piloto {
    display: flex; /* organiza os elementos em coluna */
    flex-direction: column; /* coloca o nome abaixo do círculo */
    align-items: center; /* centraliza os elementos */
    gap: 7px; /* separa o círculo do nome */
    padding: 7px 0; /* cria espaço interno */
    border-radius: 9px; /* arredonda os cantos */
    cursor: pointer; /* indica que pode selecionar */
    transition: background 0.3s; /* suaviza os efeitos */
}

/* EFEITO AO PASSAR O MOUSE */

.opcao-piloto:hover {
    background: rgba(59, 130, 255, 0.10); /* destaca a opção */
}

/* ESCONDER BOTÕES RADIO */

.opcao-piloto input[type="radio"] {
    position: absolute; /* retira o botão da posição normal */
    opacity: 0; /* deixa o botão invisível */
    width: 1px; /* reduz a largura */
    height: 1px; /* reduz a altura */
    margin: 0; /* remove a margem */
}

/* CÍRCULOS DAS CORES */

.circulo-cor {
    display: block; /* permite definir largura e altura */
    width: 27px; /* define a largura do círculo */
    height: 27px; /* define a altura do círculo */
    border-radius: 50%; /* transforma o elemento em círculo */
    border: 1px solid rgba(255, 255, 255, 0.4); /* adiciona um contorno */
}

/* CORES DISPONÍVEIS */

.circulo-cor.azul {
    background: #2962ff; /* azul */
}
.circulo-cor.vermelho {
    background: #ef4444; /* vermelho */
}
.circulo-cor.verde {
    background: #22c55e; /* verde */
}
.circulo-cor.amarelo {
    background: #facc15; /* amarelo */
}
.circulo-cor.roxo {
    background: #a855f7; /* roxo */
}
.circulo-cor.preto {
    background: #111111; /* preto */
}
.circulo-cor.branco {
    background: #ffffff; /* branco */
}

/* NOMES DAS CORES */
.opcao-piloto span:last-child {
    color: #e9efff; /* utiliza branco azulado */
    font-size: 10px; /* define o tamanho do nome */
}

/* DESTACAR COR SELECIONADA */

.opcao-piloto:has(input:checked) .circulo-cor {
    outline: 2px solid #82aaff; /* cria um contorno azul */
    outline-offset: 3px; /* afasta o contorno do círculo */
    box-shadow: 0 0 10px rgba(41, 98, 255, 0.5); /* adiciona um brilho */
}

/* FOCO PELO TECLADO */

.opcao-piloto:has(input:focus-visible) {
    outline: 2px solid white; /* mostra qual opção está selecionada pelo teclado */
    outline-offset: 2px; /* separa o contorno da opção */
}

/* BOTÃO CADASTRAR */

.botao-cadastrar {
    width: 100%; /* ocupa toda a largura */
    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; /* deixa o texto em negrito */
    letter-spacing: 1px; /* separa as letras */
    cursor: pointer; /* transforma o cursor em mão */
    box-shadow: 0 6px 20px rgba(36, 92, 255, 0.22); /* adiciona um brilho azul */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s; /* suaviza os efeitos */
}

/* EFEITO DO BOTÃO */

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

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

.botao-cadastrar:focus-visible,
.meio a:focus-visible {
    outline: 2px solid #9ec0ff; /* mostra o foco ao navegar pelo teclado */
    outline-offset: 4px; /* separa o contorno do elemento */
}

/* ÁREA DO LINK DE LOGIN */

.meio {
    margin-top: 24px; /* separa o link do botão */
    padding-top: 20px; /* cria espaço interno superior */
    border-top: 1px solid rgba(145, 170, 220, 0.18); /* adiciona uma linha divisória */
    text-align: center; /* centraliza o conteúdo */
}

/* TEXTO DO LINK DE LOGIN */

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

/* LINK FAZER LOGIN */

.meio a {
    color: #72a6ff; /* utiliza azul claro */
    text-decoration: none; /* remove o sublinhado */
    font-size: 14px; /* define o tamanho da fonte */
    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 */
    text-decoration: underline; /* adiciona o sublinhado */
}

/* RESPONSIVIDADE - TABLETS E CELULARES */

@media (max-width: 820px) {

/* MENU RESPONSIVO */
    .menu {
    height: 70px; /* reduz a altura do menu */
    padding: 0 20px; /* adapta o espaço lateral */
}



    /* CONTEÚDO PRINCIPAL */

    .conteudo {
        padding: 100px 20px 65px; /* adapta os espaços da página */
    }

    /* TÍTULO PRINCIPAL */

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

    /* CAIXA DO CADASTRO */

    .login {
        max-width: 440px; /* limita a largura da caixa */
        padding: 30px; /* adapta o espaço interno */
    }

    /* LISTA DE CORES */

    .lista-pilotos {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* organiza quatro cores por linha */
        gap: 15px 8px; /* separa as opções */
    }

    /* NOMES DAS CORES */

    .opcao-piloto span:last-child {
        font-size: 11px; /* melhora a leitura */
    }

}

/* RESPONSIVIDADE - CELULARES */

@media (max-width: 480px) {
/* MENU NO CELULAR */

.menu {
    height: 65px; /* adapta a altura para celulares */
    padding: 0 16px; /* reduz o espaço lateral */
}

.voltar-inicio {
    font-size: 12px; /* reduz o texto do link */
}


    /* CONTEÚDO PRINCIPAL */

    .conteudo {
        padding: 95px 16px 55px; /* reduz os espaços para celulares */
    }

    /* TEXTO ACIMA DO TÍTULO */

    .identidade-mini {
        font-size: 10px; /* reduz o tamanho do texto */
        letter-spacing: 2.5px; /* aproxima as letras */
    }

    /* TÍTULO FÓRMULA 1 */

    .titulo {
        font-size: clamp(39px, 12vw, 52px); /* adapta o título à largura do celular */
        letter-spacing: -1px; /* reduz o espaçamento entre as letras */
    }

    /* DESCRIÇÃO */

    .identidade-cadastro p {
        font-size: 13px; /* adapta o tamanho da descrição */
        line-height: 1.5; /* mantém a leitura */
    }

    /* CAIXA DO CADASTRO */

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

    /* TÍTULO CADASTRO */

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

    /* CAMPOS */

    .campo-cadastro input {
        height: 49px; /* adapta a altura dos campos */
        font-size: 16px; /* evita zoom automático em alguns celulares */
    }

    /* BOTÃO CADASTRAR */

    .botao-cadastrar {
        min-height: 49px; /* adapta a altura do botão */
        font-size: 15px; /* reduz levemente o tamanho do texto */
    }

    /* LISTA DE CORES */

    .lista-pilotos {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* mantém quatro opções por linha */
        gap: 14px 6px; /* adapta os espaços */
    }

    /* CÍRCULOS COLORIDOS */

    .circulo-cor {
        width: 26px; /* reduz a largura dos círculos */
        height: 26px; /* reduz a altura dos círculos */
    }

    /* NOMES DAS CORES */

    .opcao-piloto span:last-child {
        font-size: 10px; /* adapta o tamanho dos nomes */
    }

    /* TÍTULO DA BARRA */

    .escolha-piloto summary {
        gap: 8px; /* aproxima o texto dos ícones */
        padding: 12px; /* adapta o espaço interno */
        font-size: 13px; /* mantém o texto dentro da barra */
    }

    /* MENSAGEM DE ERRO */

    .alerta-cadastro {
        padding: 12px; /* reduz o espaço interno */
        gap: 9px; /* aproxima o ícone do texto */
    }

    /* TEXTO DO AVISO */

    .alerta-texto p {
        font-size: 12px; /* mantém o texto legível */
    }

}