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

/* MENU */

.menu {
    width: 100%; /* ocupa toda a largura */
    height: 70px; /* altura do menu */
    background: linear-gradient(to right, #000, #001f7a); /* degradê preto e azul */
    display: flex; /* ativa o Flexbox */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center; /* centraliza verticalmente */
    position: fixed; /* mantém o menu fixo */
    top: 0; /* posiciona no topo */
    left: 0; /* encosta na esquerda */
    z-index: 1000; /* mantém acima dos outros elementos */
}

.logo {
    position: absolute; /* permite posicionamento separado */
    left: 20px; /* distância da esquerda */
}

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

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

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

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

/* PERFIL DO USUÁRIO */

.perfil-menu {
    position: absolute; /* posiciona dentro do menu */
    right: 25px; /* distância da direita */
    display: flex; /* organiza o conteúdo */
    align-items: center; /* centraliza 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 para organizar o conteúdo */
    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; /* permite posicionar elementos dentro do botão */
    color: white; /* define a cor de elementos de texto */
    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 de interação */
}

.botao-perfil:hover {
    background: #245cff; /* muda o fundo para azul */
    transform: scale(1.08); /* aumenta levemente */
    box-shadow: 0 0 18px rgba(36, 92, 255, 0.6); /* brilho azul */
}

/* CAIXA DO PERFIL */

.caixa-perfil {
    position: absolute; /* posiciona em relação ao perfil */
    top: 58px; /* fica abaixo do botão */
    right: 0; /* alinha à direita */
    width: 280px; /* largura da caixa */
    padding: 18px; /* espaço interno */
    background: #0b1020; /* fundo azul escuro */
    border: 1px solid #245cff; /* borda azul */
    border-radius: 15px; /* arredonda os cantos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* sombra */
    display: none; /* inicia escondida */
    z-index: 2000; /* fica acima dos outros elementos */
}

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

.usuario-perfil {
    display: flex; /* coloca ícone e dados lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 12px; /* espaço entre os elementos */
    padding-bottom: 15px; /* espaço inferior */
    margin-bottom: 10px; /* separa das opções */
    border-bottom: 1px solid #26304d; /* 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 o piloto verticalmente */
    justify-content: center; /* centraliza o piloto horizontalmente */
    background: #16234a; /* define o fundo azul escuro */
    border-radius: 50%; /* deixa o elemento circular */
    overflow: hidden; /* recorta as partes do piloto que ultrapassam a borda */
    position: relative; /* estabelece uma referência de posicionamento */
    flex-shrink: 0; /* impede que o círculo diminua quando houver pouco espaço */
    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 imagem para 110% da largura do círculo */
    height: 110%; /* aumenta a imagem para 110% da altura do círculo */
    object-fit: contain; /* mantém a proporção original da imagem */
    transform: translateY(5px); /* desloca o piloto 5px para baixo, aproximando o pescoço da borda inferior */
    display: block; /* exibe a imagem como um bloco */
    flex-shrink: 0; /* impede que a imagem seja reduzida pelo Flexbox */
}


/* IMAGEM DO PILOTO DENTRO DO MENU */

.avatar-menu {
    width: 110%; /* aumenta a largura da imagem dentro do círculo */
    height: 110%; /* aumenta a altura da imagem dentro do círculo */
    object-fit: contain; /* evita que o piloto fique esticado ou deformado */
    transform: translateY(5px); /* move o piloto para baixo, criando o efeito de sair do círculo */
    display: block; /* remove espaços extras do elemento de imagem */
    flex-shrink: 0; /* impede que a imagem diminua automaticamente */
}
.dados-usuario {
    display: flex; /* ativa o Flexbox */
    flex-direction: column; /* coloca nome e e-mail em coluna */
    gap: 3px; /* espaço entre eles */
}

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

.dados-usuario span {
    color: #9da8bd; /* cor do e-mail */
    font-size: 13px; /* tamanho do e-mail */
}

/* LOGIN E CADASTRO */

.conta-menu {
    position: absolute; /* posiciona no menu */
    right: 25px; /* distância da direita */
    display: flex; /* coloca os links lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 12px; /* espaço entre links */
}

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

.conta-menu a:hover {
    color: #4da3ff; /* muda a cor no hover */
}

.conta-menu .cadastro-menu {
    padding: 9px 15px; /* espaço interno */
    background: transparent; /* fundo transparente */
    border: 2px solid #245cff; /* borda azul */
    border-radius: 8px; /* arredonda os cantos */
    color: white; /* texto branco */
    transition: 0.3s; /* suaviza os efeitos */
}

.conta-menu .cadastro-menu:hover {
    background: #245cff; /* preenche de azul */
    color: white; /* mantém o texto branco */
    box-shadow: 0 0 15px rgba(36, 92, 255, 0.5); /* brilho azul */
}

/* OPÇÕES DO PERFIL */

.opcoes-perfil {
    display: flex; /* ativa o Flexbox */
    flex-direction: column; /* coloca opções em coluna */
    gap: 5px; /* espaço entre opções */
}

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

.opcoes-perfil a:hover {
    background: #16234a; /* fundo no hover */
    color: #4da3ff; /* texto azul */
}

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

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

.opcoes-perfil .sair-perfil:hover {
    background: rgba(255, 92, 92, 0.1); /* fundo vermelho suave */
    color: #ff7070; /* vermelho mais claro */
}

/* BANNER PRINCIPAL */

.banner {
    margin-top: 70px; /* evita que fique atrás do menu */
    height: 420px; /* altura do banner */
    background:
        linear-gradient(180deg, rgba(7,8,15,.88) 0%, rgba(7,8,15,.65) 38%, rgba(7,8,15,.88) 100%),
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("../IMAGENS/CARROS/ferraripng.png"); /* imagem com camadas escuras */
    background-size: cover; /* cobre toda a área */
    background-position: center; /* centraliza a imagem */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza verticalmente */
}

.banner-texto > span {
    font-size: 16px; /* tamanho do subtítulo */
    letter-spacing: 3px; /* espaço entre letras */
    color: var(--accent); /* usa a cor principal */
    text-transform: uppercase; /* deixa em maiúsculas */
}

.banner-texto h1 {
    font-size: 64px; /* tamanho do título */
    font-style: italic; /* deixa em itálico */
    line-height: 1.05; /* altura entre as linhas */
    margin: 18px 0; /* espaço acima e abaixo */
    color: white; /* texto branco */
}

.banner-texto p {
    font-size: 20px; /* tamanho da descrição */
    line-height: 1.8; /* espaço entre linhas */
    max-width: 600px; /* largura máxima do texto */
    color: #dcdcdc; /* cinza claro */
}

.banner-texto {
    margin-left: 80px; /* afasta da borda esquerda */
    max-width: 700px; /* limita a largura */
}

/* ÁREA DOS CARDS */

.equipes-grid {
    margin: 40px auto 0; /* margem superior e centralização */
    display: grid; /* ativa o Grid Layout */
    grid-template-columns: repeat(4, minmax(240px, 1fr)); /* quatro colunas */
    gap: 24px; /* espaço entre os cards */
    padding: 0 40px 40px; /* espaço interno */
}

/* CARDS DAS EQUIPES */

.card-equipe {
    background: rgba(8, 10, 26, 0.98); /* fundo escuro */
    border: 1px solid rgba(255,255,255,0.08); /* borda discreta */
    border-radius: 24px; /* arredonda os cantos */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); /* sombra */
    overflow: hidden; /* impede conteúdo de ultrapassar o card */
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; /* animação suave */
}

.card-equipe:hover {
    transform: translateY(-6px); /* levanta o card */
    border-color: rgba(43, 43, 184, 0.8); /* destaca a borda */
    box-shadow: 0 28px 70px rgba(0,0,0,0.35); /* aumenta a sombra */
}

/* TOPO DOS CARDS */

.card-topo {
    position: relative; /* permite posicionar elementos internos */
    background: #090b16; /* fundo escuro */
}

/* CORES DAS EQUIPES */

.card-equipe.ferrari .card-topo {
    background: linear-gradient(180deg, rgba(225, 16, 0, 0.22) 0%, rgba(9, 11, 22, 0.65) 100%); /* degradê vermelho Ferrari */
}

.card-equipe.mercedes .card-topo {
    background: linear-gradient(180deg, rgba(0, 161, 156, 0.18) 0%, rgba(9, 11, 22, 0.65) 100%); /* degradê verde Mercedes */
}

.card-equipe.redbull .card-topo {
    background: linear-gradient(180deg, rgba(0, 31, 143, 0.18) 0%, rgba(9, 11, 22, 0.65) 100%); /* degradê azul Red Bull */
}

.card-equipe.mclaren .card-topo {
    background: linear-gradient(180deg, rgba(255, 128, 0, 0.938) 0%, rgba(9, 11, 22, 0.65) 100%); /* degradê laranja McLaren */
}

/* IMAGEM DO CARRO */

.card-topo .carro-equipe {
    width: 100%; /* ocupa toda a largura */
    height: auto; /* mantém a proporção */
    display: block; /* remove espaço extra da imagem */
    object-fit: cover; /* ajusta a imagem ao espaço */
}

/* CORPO DOS CARDS */

.card-body {
    padding: 24px; /* espaço interno */
}

.topo-card {
    display: flex; /* organiza os elementos lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 18px; /* espaço entre elementos */
}

.logo-equipe {
    width: 64px; /* largura da logo */
    flex-shrink: 0; /* impede a logo de diminuir */
}

/* INFORMAÇÕES DAS EQUIPES */

.info-equipe h2 {
    font-size: 22px; /* tamanho do nome */
    margin-bottom: 10px; /* espaço abaixo */
    text-transform: uppercase; /* deixa em maiúsculas */
    letter-spacing: 1px; /* espaço entre letras */
}

/* ESTATÍSTICAS */

.estatisticas {
    display: grid; /* organiza em grade */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* três colunas */
    gap: 12px; /* espaço entre os dados */
    font-size: 14px; /* tamanho da fonte */
    font-weight: 700; /* deixa em negrito */
    color: #e5e5e5; /* cor padrão */
}

.estatisticas span {
    display: flex; /* organiza o conteúdo */
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* espaço entre elementos */
    color: #cfd7ff; /* cor dos dados */
}

/* CORES DAS ESTATÍSTICAS */

.card-equipe.ferrari .estatisticas span {
    color: #e10600; /* vermelho Ferrari */
}

.card-equipe.mercedes .estatisticas span {
    color: #00a19c; /* verde Mercedes */
}

.card-equipe.redbull .estatisticas span {
    color: #001f8f; /* azul Red Bull */
}

.card-equipe.mclaren .estatisticas span {
    color: #ff8000; /* laranja McLaren */
}

/* BOTÃO SAIBA MAIS */

.botao {
    margin-top: 22px; /* espaço acima */
    width: 100%; /* ocupa toda a largura */
    padding: 15px; /* espaço interno */
    border: 1px solid rgba(255,255,255,0.14); /* borda discreta */
    border-radius: 12px; /* arredonda os cantos */
    background: rgba(255,255,255,0.05); /* fundo transparente suave */
    color: white; /* texto branco */
    font-size: 16px; /* tamanho do texto */
    font-weight: bold; /* deixa em negrito */
    cursor: pointer; /* cursor de clique */
    transition: .3s; /* suaviza os efeitos */
}

/* BOTÃO DO BANNER */

.botao-banner {
    display: inline-block; /* permite definir espaçamentos */
    margin-top: 25px; /* espaço acima */
    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; /* deixa em negrito */
    transition: .3s; /* suaviza os efeitos */
}

.botao-banner:hover {
    background: rgb(1, 6, 139); /* mantém o fundo azul */
}

.botao:hover {
    background: rgba(43, 43, 184, 0.2); /* destaca ao passar o mouse */
}

/* DESCRIÇÃO DAS EQUIPES */

.descricao {
    display: none; /* inicia escondida */
    margin-top: 25px; /* espaço acima */
    border-top: 1px solid rgba(255,255,255,0.08); /* linha divisória */
    padding-top: 25px; /* espaço interno superior */
    background: rgba(255,255,255,0.02); /* fundo levemente destacado */
}

.descricao p {
    font-size: 15px; /* tamanho do texto */
    line-height: 1.8; /* espaço entre linhas */
    text-align: justify; /* alinha nas duas margens */
    color: #dcdcdc; /* texto cinza claro */
}

/* RODAPÉ */

footer {
    width: 100%; /* ocupa toda a largura */
    height: 50px; /* altura do rodapé */
    background: linear-gradient(to right, #000000, #1d1d8f, #2b2bb8); /* degradê preto e azul */
    display: flex; /* organiza em linha */
    justify-content: space-between; /* distribui os elementos */
    align-items: center; /* centraliza verticalmente */
    padding: 0 30px; /* espaço nas laterais */
    color: white; /* texto branco */
    font-size: 18px; /* tamanho da fonte */
}

/* RESPONSIVIDADE */

@media (max-width: 1200px) {

    .equipes-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr)); /* reduz para duas colunas */
    }

}

@media (max-width: 820px) {

    .equipes-grid {
        grid-template-columns: 1fr; /* utiliza uma coluna */
        padding: 0 20px 30px; /* reduz os espaçamentos */
    }

    .banner {
        height: auto; /* ajusta a altura automaticamente */
        padding: 60px 0 80px; /* espaço interno */
    }

    .banner-texto {
        margin-left: 30px; /* afasta da borda esquerda */
    }

    .banner-texto h1 {
        font-size: 44px; /* reduz o título */
    }

    .topo-card {
        flex-direction: column; /* empilha os elementos */
        align-items: flex-start; /* alinha à esquerda */
    }

    .carro-equipe {
        width: 100%; /* ocupa toda a largura */
        max-width: 100%; /* respeita o limite do card */
        margin-left: 0; /* remove a margem esquerda */
    }

}

/* TÍTULO EM DESTAQUE */

.titulo-destaque {
    display: block; /* ocupa uma linha própria */
    font-size: 80px; /* tamanho do destaque */
    font-weight: 700; /* deixa em negrito */
    white-space: nowrap; /* impede quebra de linha */
    letter-spacing: 2px; /* espaço entre letras */
    color: #3b82ff; /* azul claro */
    text-shadow: 0 0 10px rgba(59, 130, 255, .5), 0 0 20px rgba(59, 130, 255, .3); /* brilho azul neon */
}