/* CONFIGURAÇÕES GERAIS */
*{
    margin:0; /* remove as margens padrão */
    padding:0; /* remove os espaçamentos padrão */
    box-sizing:border-box; /* inclui padding e borda no tamanho do elemento */
}
body{
    font-family:Arial, Helvetica, sans-serif; /* define a fonte principal */
    background:#07080f; /* define o fundo da página */
    color:#f5f5f5; /* define a cor padrão dos textos */
}

/* MENU */
.menu{
    width:100%; /* ocupa toda a largura da tela */
    height:70px; /* define a altura do menu */
    background:linear-gradient(to right,#000,#001f7a); /* cria um fundo em degradê do preto para o azul */
    display:flex; /* ativa o Flexbox */
    justify-content:center; /* centraliza os itens horizontalmente */
    align-items:center; /* centraliza os itens verticalmente */
    position:fixed; /* mantém o menu fixo no topo */
    top:0; /* posiciona no topo da página */
    left:0; /* encosta na borda esquerda */
    z-index:1000; /* garante que fique acima dos outros elementos */
}
.logo{
    position:absolute; /* permite posicionar a logo separadamente */
    left:20px; /* posiciona a logo à esquerda */
}

.logo img{
    height:50px; /* define a altura da imagem da logo */
}

.menu ul{
    display:flex; /* coloca os links lado a lado */
    list-style:none; /* remove os marcadores da lista */
    gap:40px; /* cria espaço entre os links */
}

.menu a{
    color:white; /* define a cor branca dos links */
    text-decoration:none; /* remove o sublinhado */
    font-size:18px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa os links em negrito */
}

.menu a:hover{
    color:#4da3ff; /* muda a cor ao passar o mouse */
}
/* PERFIL DO USUÁRIO */

.perfil-menu{
    position: absolute; /* permite posicionar o perfil dentro do menu */
    right: 25px; /* deixa o perfil a 25px do lado direito */

    display: flex; /* utiliza flexbox para organizar o conteúdo */
    align-items: center; /* centraliza o conteúdo verticalmente */
}


/* BOTÃO DO PERFIL NA NAVBAR */

.botao-perfil {
    width: 55px; /* define a largura do círculo */
    height: 55px; /* define a altura do círculo */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza o piloto verticalmente */
    justify-content: center; /* centraliza o piloto horizontalmente */
    background: #111936; /* define o fundo azul escuro */
    border: 2px solid #245cff; /* adiciona a borda azul */
    border-radius: 50%; /* transforma o botão em um círculo */
    overflow: hidden; /* esconde as partes do piloto que ultrapassam o círculo */
    position: relative; /* estabelece a referência de posicionamento */
    color: white; /* define a cor de possíveis ícones */
    font-size: 20px; /* define o tamanho de possíveis ícones */
    cursor: pointer; /* mostra a mãozinha ao passar o mouse */
    transition: 0.3s; /* suaviza os efeitos */
}


.botao-perfil:hover{
    background: #245cff; /* muda o fundo para azul */

    transform: scale(1.08); /* aumenta levemente o botão */

    box-shadow: 0 0 18px rgba(36, 92, 255, 0.6); /* adiciona um brilho azul */
}

/* CAIXA DO PERFIL */

.caixa-perfil{
    position: absolute; /* permite posicionar a caixa em relação ao perfil */
    top: 58px; /* coloca a caixa abaixo do botão de perfil */
    right: 0; /* alinha a caixa com o lado direito do botão */

    width: 280px; /* define a largura da caixa */
    padding: 18px; /* cria espaço interno */

    background: #0b1020; /* define o fundo azul quase preto */

    border: 1px solid #245cff; /* cria uma borda azul */
    border-radius: 15px; /* arredonda os cantos */

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* adiciona sombra */

    display: none; /* deixa a caixa escondida inicialmente */

    z-index: 2000; /* mantém a caixa acima dos outros elementos */
}


/* INFORMAÇÕES DO USUÁRIO */

.usuario-perfil{
    display: flex; /* coloca o ícone e os dados lado a lado */
    align-items: center; /* centraliza os elementos verticalmente */
    gap: 12px; /* cria espaço entre o ícone e os dados */

    padding-bottom: 15px; /* cria espaço abaixo das informações */
    margin-bottom: 10px; /* separa as informações das opções */

    border-bottom: 1px solid #26304d; /* cria uma linha divisória */
}


/* CÍRCULO DO PILOTO DENTRO DO MENU */

.icone-usuario {
    width: 55px; /* define a largura do círculo */
    height: 55px; /* define a altura do círculo */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    background: #16234a; /* define o fundo azul escuro */
    border-radius: 50%; /* deixa o elemento circular */
    overflow: hidden; /* recorta as partes do piloto que ultrapassam o círculo */
    position: relative; /* estabelece a referência de posicionamento */
    flex-shrink: 0; /* impede que o círculo diminua */
    color: #4da3ff; /* define a cor de possíveis ícones */
    font-size: 20px; /* define o tamanho de possíveis ícones */
}

/* IMAGEM DO PILOTO NA NAVBAR */

.avatar-navbar {
    width: 110%; /* aumenta a largura da imagem */
    height: 110%; /* aumenta a altura da imagem */
    object-fit: contain; /* mantém a proporção original do piloto */
    transform: translateY(5px); /* move o piloto para baixo, encaixando o pescoço na borda */
    display: block; /* remove espaços extras */
    flex-shrink: 0; /* impede que a imagem diminua */
}


/* IMAGEM DO PILOTO DENTRO DO MENU */

.avatar-menu {
    width: 110%; /* aumenta a largura da imagem */
    height: 110%; /* aumenta a altura da imagem */
    object-fit: contain; /* evita deformações na imagem */
    transform: translateY(5px); /* move o piloto para baixo, criando o efeito natural */
    display: block; /* remove espaços extras */
    flex-shrink: 0; /* impede que a imagem diminua */
}

.dados-usuario{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca nome e e-mail um abaixo do outro */
    gap: 3px; /* cria um pequeno espaço entre eles */
}


.dados-usuario strong{
    color: white; /* deixa o nome branco */
    font-size: 16px; /* define o tamanho do nome */
}


.dados-usuario span{
    color: #9da8bd; /* deixa o e-mail em cinza claro */
    font-size: 13px; /* define o tamanho do e-mail */
}

/* LOGIN E CADASTRO NO MENU */

.conta-menu{
    position: absolute; /* posiciona a área no lado direito do menu */
    right: 25px; /* deixa espaço da borda direita */

    display: flex; /* coloca os links lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 12px; /* cria espaço entre os links */
}

.conta-menu a{
    color: white; /* deixa o texto branco */
    text-decoration: none; /* remove o sublinhado */
    font-size: 16px; /* define o tamanho do texto */
    font-weight: bold; /* deixa o texto em negrito */
}

.conta-menu a:hover{
    color: #4da3ff; /* deixa o texto azul ao passar o mouse */
}

.conta-menu .cadastro-menu{
    padding: 9px 15px; /* cria espaço dentro do botão */

    background: transparent; /* deixa o fundo transparente */

    border: 2px solid #245cff; /* adiciona a borda azul igual ao estilo do site */
    border-radius: 8px; /* arredonda os cantos */

    color: white; /* deixa o texto branco */

    transition: 0.3s; /* deixa o efeito mais suave */
}

.conta-menu .cadastro-menu:hover{
    background: #245cff; /* preenche o botão de azul ao passar o mouse */

    color: white; /* mantém o texto branco */

    box-shadow: 0 0 15px rgba(36, 92, 255, 0.5); /* adiciona um brilho azul */
}

/* OPÇÕES DO PERFIL */

.opcoes-perfil{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca as opções uma abaixo da outra */
    gap: 5px; /* cria espaço entre as opções */
}


.opcoes-perfil a{
    width: 100%; /* faz a opção ocupar toda a largura */
    padding: 11px 12px; /* cria espaço interno */
    display: flex; /* coloca o ícone e o texto lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* cria espaço entre o ícone e o texto */
    color: #e6e6e6; /* define a cor do texto */
    text-decoration: none; /* remove o sublinhado */
    border-radius: 8px; /* arredonda os cantos */   
    transition: 0.3s; /* deixa o hover suave */
}


.opcoes-perfil a:hover{
    background: #16234a; /* adiciona um fundo ao passar o mouse */
    color: #4da3ff; /* muda o texto para azul */
}


.opcoes-perfil i{
    width: 20px; /* mantém os ícones alinhados */
    text-align: center; /* centraliza os ícones */
}


.opcoes-perfil .sair-perfil{
    color: #ff5c5c; /* deixa a opção de sair vermelha */
}


.opcoes-perfil .sair-perfil:hover{
    background: rgba(255, 92, 92, 0.1); /* adiciona um fundo vermelho transparente */
    color: #ff7070; /* deixa o vermelho um pouco mais claro */
}

/*BANNER*/
.banner{
    margin-top:70px; /* cria espaço para o menu */
    min-height:600px; /* garante uma altura mínima */
    height:600px; /* define a altura do banner */
    position:relative; /* permite posicionar elementos dentro dele */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza o conteúdo verticalmente */
    padding:0 70px; /* cria espaço nas laterais */
    overflow:hidden; /* impede que a imagem ultrapasse o banner */
    background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.70) 50%, rgba(0,0,0,.82) 100%),url("../IMAGENS/CORRIDAS/f1corri.png"); /* define a imagem de fundo*/
    background-size:cover; /* faz a imagem preencher o banner */
    background-position:center center; /* centraliza a imagem */
    background-repeat:no-repeat; /* impede a repetição da imagem */
}


/* TEXTO DO BANNER */
.banner-texto{
    position:relative; /* permite controlar a posição do texto */
    z-index:2; /* coloca o texto acima do fundo */
    max-width:900px; /* limita a largura do conteúdo */

}

/* TEXTO PEQUENO ACIMA DO TITULO */
.banner-subtitulo{
    display:block; /* faz o texto ocupar sua própria linha */
    color:#3b82ff; /* deixa o texto azul */
    font-size:18px; /* tamanho da fonte */
    font-weight:bold; /* deixa em negrito */
    letter-spacing:4px; /* aumenta o espaço entre as letras */
    text-transform:uppercase; /* transforma em letras maiúsculas */
    margin-bottom:15px; /* espaço abaixo */
}

/* Título principal */
.banner h1{
    font-family:'Arial Black',Arial,sans-serif; /* define a fonte do título */
    font-size:90px; /* tamanho do título */
    line-height:.95; /* controla o espaço entre as linhas */
    font-weight:900; /* deixa o título bem forte */
    font-style:italic; /* deixa o título inclinado */
    color:#ffffff; /* deixa "CORRIDAS" branco */
    margin:0; /* remove margem padrão */
    letter-spacing:-2px; /* aproxima um pouco as letras */
}

.banner::after{ 
    content:""; /*Define o conteúdo dessa camada*/
    position:absolute;/*Define como a camada será posicionada*/
    inset:0;/*Define os limites da camada*/
    background:linear-gradient(/*Define o fundo e Cria o degradê*/
        to bottom,/*Faz o degradê de cima para baixo*/
        transparent 45%,/*Deixa transparente*/
        rgba(7,8,15,.4) 65%,/*cor*/
        #07080f 100%/*Define uma cor específica*/
    );
    z-index:1;/*Define a ordem das camadas*/
}

/* Palavra "HISTÓRICAS" */
.titulo-destaque{
    color:#3b82ff; text-shadow:0 0 8px rgba(59,131,255,.5),0 0 18px rgba(59,131,255,.25);  /* deixa a palavra azul e com sombra */
}

/* Frase abaixo do título */
.banner p{
    margin-top:25px; /* espaço acima */
    color:#d0d0d0; /* deixa o texto cinza claro */
    font-size:24px; /* tamanho da fonte */
    font-weight:400; /* peso normal */
    font-style:italic; /* deixa o texto inclinado */
    letter-spacing:1px; /* aumenta levemente o espaçamento */
}

/* BOTÃO */
.botao-banner{
    display:inline-block; /* permite definir tamanho e espaçamento */
    margin-top:25px; /* espaço acima do botão */
    padding:14px 30px; /* espaço interno */
    background:rgb(1,6,139); /* fundo azul */
    color:white; /* texto branco */
    text-decoration:none; /* remove sublinhado */
    border-radius:8px; /* arredonda os cantos */
    font-weight:bold; /* texto em negrito */
    transition:.3s; /* deixa a mudança suave */
}

.botao-banner:hover{
    background:#004ecc; /* muda a cor ao passar o mouse */
}

/*LISTA DE CORRIDAS */
.corridas{
    width:90%; /* ocupa 90% da largura */
    margin:50px auto; /* centraliza e cria espaço */
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* coloca os cards um abaixo do outro */
    gap:35px; /* espaço entre os cards */
}

/* CARD */
.card{
    width:100%; /* ocupa toda a largura disponível */
    height:320px; /* altura dos cards */
    display:flex; /* coloca imagem e informações lado a lado */
    background:#081221; /* fundo do card */
    border:2px solid #0066ff; /* borda azul */
    border-radius:18px; /* arredonda os cantos */
    overflow:hidden; /* impede conteúdo de sair do card */
}

/*IMAGEM DO CARD*/
.imagem{
    width:40%; /* ocupa 40% do card */
    height:100%; /* ocupa toda a altura */
    position:relative; /* permite posicionar a bandeira */
    flex-shrink:0; /* impede a imagem de diminuir */
}

.imagem img:first-child{
    width:100%; /* ocupa toda a largura */
    height:100%; /* ocupa toda a altura */
    object-fit:cover; /* corta a imagem sem deformar */
    display:block; /* remove espaço extra da imagem */
}

/* BANDEIRA */
.bandeira{
    position:absolute; /* posiciona sobre a imagem */
    width:55px; /* tamanho da bandeira */
    right:15px; /* distância da direita */
    bottom:15px; /* distância de baixo */
    border-radius:5px; /* arredonda os cantos */
    border:2px solid #fff; /* cria uma borda branca */
}

/* INFORMAÇÕES DA CORRIDA */
.info{
    width:60%; /* ocupa 60% do card */
    padding:30px; /* espaço interno */
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* coloca os elementos em coluna */
    justify-content:center; /* centraliza verticalmente */
}

/* Número da corrida */
.info h2{
    font-family:'Oswald',sans-serif; /* utiliza a fonte Oswald */
    font-size:70px; /* tamanho do número */
    color:#0066ff; /* número azul */
    line-height:1; /* reduz espaço vertical */
}

/* Nome da corrida */
.info h3{
    margin-top:15px; /* espaço acima */
    font-size:28px; /* tamanho do título */
}

/* Local da corrida */
.info h4{
    margin-top:10px; /* espaço acima */
    color:#0066ff; /* texto azul */
    font-weight:400; /* peso normal */
}

/* Linha separadora */
.info hr{
    margin:18px 0; /* espaço acima e abaixo */
    border:none; /* remove borda padrão */
    height:2px; /* altura da linha */
    background:#0066ff; /* deixa a linha azul */
}

/* Descrição */
.info p{
    font-size:20px; /* tamanho do texto */
    line-height:1.8; /* espaçamento entre linhas */
    color:#d5d5d5; /* texto cinza claro */
}
/* RODAPÉ */
footer{
    width:100%; /* ocupa toda a largura da tela */
    height:50px; /* define a altura do rodapé */
    background:linear-gradient(to right,#000000,#1d1d8f,#2b2bb8); /* cria um fundo em degradê */
    display:flex; /* organiza os elementos em linha */
    justify-content:space-between; /* distribui os elementos com espaço entre eles */
    align-items:center; /* centraliza verticalmente */
    padding:0 30px; /* cria espaço interno nas laterais */
    color:white; /* define a cor branca do texto */
    font-size:18px; /* define o tamanho da fonte */
}

/* RESPONSIVO */
@media(max-width:900px){
    .banner{
        padding:0 30px; /* diminui o espaço lateral */
    }
    .banner h1{
        font-size:70px; /* diminui o título */
        line-height:70px; /* ajusta o espaçamento */
    }
    .banner p{
        font-size:22px; /* diminui o subtítulo */
    }
    .card{
        flex-direction:column; /* coloca imagem acima do texto */
        height:auto; /* permite que o card cresça */
    }
    .imagem{
        width:100%; /* imagem ocupa toda a largura */
        height:250px; /* define altura da imagem */
    }
    .info{
        width:100%; /* informações ocupam toda a largura */
    }
    .menu{
        height:auto; /* permite que o menu cresça */
        padding:20px; /* adiciona espaço interno */
    }
    .menu ul{
        gap:20px; /* diminui espaço entre links */
        flex-wrap:wrap; /* permite quebrar os links */
        justify-content:center; /* centraliza os links */
    }
}