/* CONFIGURAÇÕES GERAIS */
*{
    margin:0; /* remove as margens padrão do navegador */
    padding:0; /* remove os espaçamentos internos padrão */
    box-sizing:border-box; /* faz padding e borda não aumentarem o tamanho total */
}

    body{
        font-family:Arial, Helvetica, sans-serif; /* define a fonte principal da página */
        background:#000000; /* define a cor de fundo da página */
    }
/* 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 */
}

/* hero */
.hero{
     position:relative; /* permite posicionar elementos dentro dele */
    margin-top:70px; /* cria espaço para o menu fixo não cobrir o conteúdo */
    height:650px; /* define a altura do banner */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza o conteúdo verticalmente */
    padding:0 120px; /* cria espaço nas laterais */
    overflow:hidden; /* impede que elementos saiam para fora do banner */
    background:#000; /* deixa o fundo preto */  
  
}

.hero-imagem{
     position:absolute; /* coloca a imagem atrás dos textos */
    inset:0; /* ocupa todo o espaço do elemento pai */
    z-index:0; /* deixa a imagem no fundo */
}

.hero-imagem img{
    width:100%; /* faz a imagem ocupar toda a largura */
    height:100%; /* faz a imagem ocupar toda a altura */
    object-fit:cover; /* ajusta a imagem sem deformar */
    object-position:center; /* centraliza a imagem */
    opacity:.45; /* deixa a imagem transparente */
}

.hero::after{
    content:""; /* cria um pseudo-elemento vazio para adicionar um efeito sobre o banner */
    position:absolute; /* posiciona esse pseudo-elemento livremente dentro da hero */
    inset:0; /* faz o elemento ocupar toda a área da hero (top, right, bottom e left = 0) */
    background: linear-gradient(to bottom, transparent, #000);
    z-index:1; /* coloca o degradê acima da imagem, mas abaixo do texto */
    
}

.hero-texto{
    position:relative; /* permite controlar a posição do texto */
    z-index:2; /* coloca o texto acima do degradê */
    max-width:620px; /* limita a largura máxima da área do texto */
}

.hero-texto span{
    color:#2f83ff; /* define a cor azul do subtítulo */
    font-size:18px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa o texto em negrito */
    letter-spacing:3px; /* aumenta o espaçamento entre as letras */
}

.hero-texto h1{
    color:white; /* define a cor branca do título */
    font-size:78px; /* define um tamanho grande para o título */
    line-height:82px; /* controla o espaçamento entre as linhas */
    margin:25px 0; /* adiciona margem superior e inferior */
    font-style:italic; /* deixa o texto em itálico */
    font-weight:900; /* aplica o peso máximo da fonte */
}

.hero-texto strong{
    color:#2f83ff; /* define a cor azul da palavra destacada */
    font-size:80px; /* deixa a palavra um pouco maior */
    line-height:82px; /* mantém o mesmo espaçamento entre linhas */
    margin:25px 0; /* adiciona margem */
    font-style:italic; /* deixa o texto em itálico */
    font-weight:900; /* deixa o texto bem forte */
    white-space:nowrap; /* impede que o texto quebre para outra linha */
    color:#3b82ff; /* redefine a cor para um azul mais vibrante */
    text-shadow:0 0 10px rgba(59,131,255,.757),0 0 20px rgba(26,37,161,.934);  /* deixa a palavra destacada com efeito neon */
}

.hero-texto p{
    color:#d8d8d8; /* define uma cor cinza clara para o parágrafo */
    font-size:22px; /* define o tamanho da fonte */
    line-height:36px; /* aumenta o espaçamento entre as linhas*/
}
/* BOTÃO SAIBA MAIS */

.botao{
 margin-top:22px;/* adiciona espaço acima */
 width:100%;/* ocupa toda a largura disponível */
 padding:15px;/* adiciona espaçamento interno */
 border:1px solid rgba(255,255,255,0.14);/* cria uma borda discreta */
 border-radius:12px;/* arredonda os cantos */
 background: rgba(255,255,255,0.05);/* define a cor de fundo */
 color:white;/* define a cor do texto */
 font-size:16px;/* define o tamanho da fonte */
 font-weight:bold;/* deixa o texto em negrito */
 cursor:pointer;/* muda o cursor ao passar o mouse */
 transition:.3s;/* cria uma animação suave */
}
.botao-banner{
    display:inline-block; /* faz o botão se comportar como bloco, mas sem ocupar a linha inteira */
    margin-top:25px; /* adiciona espaço acima do botão */
    padding:14px 30px; /* define o espaçamento interno */
    background:rgb(1, 6, 139); /* define a cor de fundo */
    color:white; /* define a cor do texto */
    text-decoration:none; /* remove o sublinhado do link */
    border-radius:8px; /* arredonda os cantos */
    font-weight:bold; /* deixa o texto em negrito */
    transition:.3s; /* cria uma transição suave */
}

.botao-banner:hover{
    background:rgb(1, 6, 139); /* mantém a mesma cor ao passar o mouse */
}

.botao:hover{
    background:rgba(43,43,184,.2); /* altera a cor ao passar o mouse */
}

/* SLIDESHOW */

.slideshow{
    width:100%; /* ocupa toda a largura da tela */
    padding:60px 70px 20px; /* adiciona espaçamento interno */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza os itens verticalmente */
    justify-content:center; /* centraliza os itens horizontalmente */
    gap:35px; /* cria espaço entre as setas e o card */
    background:#000; /* define o fundo preto */
}

.card-piloto{
    width:100%; /* ocupa toda a largura disponível */
    max-width:1450px; /* limita a largura máxima */
    min-height:680px; /* define a altura mínima */
    background:linear-gradient(135deg,#000000,#050914); /* cria um fundo em degradê */
    border:1px solid rgba(0,90,255,.15); /* adiciona uma borda azul */
    border-radius:28px; /* arredonda os cantos */
    box-shadow:0 0 35px rgba(0, 89, 255, 0.301); /* adiciona uma sombra azul suave */
    display:grid; /* utiliza Grid Layout */
    grid-template-columns:420px 1fr; /* divide o card em duas colunas */
    grid-template-areas:"foto conteudo" "stats stats"; /* organiza foto, conteúdo e estatísticas */
    row-gap:25px; /* adiciona espaço entre as linhas */
    column-gap:60px; /* adiciona espaço entre as colunas */
    padding:55px; /* adiciona espaçamento interno */
}

.estatisticas{
    grid-area:stats; /* posiciona esta área na região "stats" do Grid */
    border-top:2px solid #0d4ee6; /* adiciona uma linha superior */
    padding-top:35px; /* cria espaço acima das estatísticas */
    display:flex; /* ativa o Flexbox */
    justify-content:space-around; /* distribui os itens igualmente */
    align-items:center; /* centraliza os itens verticalmente */
    animation:trocarConteudo .65s ease; /* aplica a animação de troca das informações */
}

.item{
    display:flex; /* organiza os elementos em coluna */
    flex-direction:column; /* coloca os elementos um abaixo do outro */
    align-items:center; /* centraliza os itens */
    gap:8px; /* adiciona espaço entre eles */
}

.item i{
    font-size:30px; /* define o tamanho dos ícones */
    color:#2f83ff; /* define a cor azul dos ícones */
}

.item strong{
    color:white; /* define a cor branca */
    font-size:46px; /* define o tamanho do número */
    font-weight:bold; /* deixa o número em negrito */
}

.item span{
    color:#bfbfbf; /* define a cor cinza do texto */
    font-size:14px; /* define o tamanho da fonte */
    text-transform:uppercase; /* deixa o texto em maiúsculas */
    letter-spacing:2px; /* aumenta o espaçamento entre as letras */
}

/* foto */
.foto{
    display:flex; /* ativa o Flexbox */
    justify-content:center; /* centraliza a foto horizontalmente */
    align-items:flex-end; /* posiciona a foto na parte inferior da área */
    height:520px; /* define a altura da área da foto */
    grid-area:foto; /* posiciona a foto na área "foto" do Grid */
    animation:trocarConteudo .45s ease; /* aplica a animação na troca de piloto */
}

#fotoPiloto.senna{
    width:90%; /* define o tamanho da foto do Senna */
    transform:translateY(0); /* mantém a foto na posição original */
}

#fotoPiloto.max{
    width:100%; /* define o tamanho da foto do Verstappen */
    transform:translateY(15px); /* move a foto um pouco para baixo */
}

#fotoPiloto.schumacher{
    width:90%; /* define o tamanho da foto do Schumacher */
    transform:translateY(10px); /* move a foto levemente para baixo */
}

#fotoPiloto.hamilton{
    width:120%; /* aumenta o tamanho da foto do Hamilton */
    transform:translateY(-50px); /* move a foto para cima */
}

#fotoPiloto.lauda{
    width:100%; /* define o tamanho da foto do Lauda */
    transform:translateY(-20px); /* move a foto levemente para cima */
}

/* CONTEÚDO */
.conteudo{
    grid-area:conteudo; /* posiciona o conteúdo na área "conteudo" do Grid */
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* organiza os elementos em coluna */
    justify-content:flex-start; /* alinha os elementos no início */
    animation:trocarConteudo .55s ease; /* aplica a animação ao conteúdo */
}

.pais{
    display:flex; /* coloca bandeira e nome do país lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:10px; /* cria espaço entre a bandeira e o texto */
    margin-bottom:18px; /* adiciona espaço abaixo */
}

.pais img{
    width:28px; /* define o tamanho da bandeira */
}

.pais span{
    color:#2f83ff; /* define a cor azul */
    font-size:17px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa o texto em negrito */
    letter-spacing:2px; /* aumenta o espaçamento entre as letras */
}

/* NOME */

#nomePiloto{
    font-size:86px; /* define o tamanho do nome */
    color:white; /* define a cor branca */
    line-height:82px; /* controla o espaçamento entre as linhas */
    font-weight:900; /* deixa o texto bem destacado */
    font-style:italic; /* deixa o texto em itálico */
    text-transform:uppercase; /* transforma o texto em maiúsculas */
    margin-bottom:15px; /* adiciona espaço abaixo */
}

/* EQUIPE */

#equipePiloto{
    font-size:30px; /* define o tamanho do nome da equipe */
    color:#ff8a00; /* define a cor padrão da equipe */
    margin-bottom:30px; /* adiciona espaço abaixo */
}

/* RESUMO */

#resumoPiloto{
    max-width:620px; /* limita a largura máxima do texto */
    color:#d8d8d8; /* define a cor cinza clara */
    font-size:20px; /* define o tamanho da fonte */
    line-height:34px; /* aumenta o espaçamento entre as linhas */
    margin-bottom:25px; /* adiciona espaço abaixo */
}

/* BOTÃO */

#btnBiografia{
    width:240px; /* define a largura */
    height:55px; /* define a altura */
    border:none; /* remove a borda */
    border-radius:12px; /* arredonda os cantos */
    background:rgb(1, 6, 139); /* define a cor azul */
    color:white; /* define a cor do texto */
    font-size:18px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa o texto em negrito */
    cursor:pointer; /* altera o cursor para uma mão */
    transition:.3s; /* cria uma transição suave */
}

#btnBiografia:hover{
    background:#0050d0; /* escurece o botão ao passar o mouse */
    transform:translateY(-3px); /* move o botão levemente para cima */
}

/* BOTÃO OCULTAR BIOGRAFIA */
#btnFecharBio{
    margin-top:40px; /* adiciona espaço acima do botão */
    width:240px; /* define a largura */
    height:55px; /* define a altura */
    border:none; /* remove a borda */
    border-radius:12px; /* arredonda os cantos */
    background:#d61d1d; /* define a cor vermelha */
    color:white; /* define a cor do texto */
    font-size:18px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa o texto em negrito */
    cursor:pointer; /* altera o cursor para uma mão */
    transition:.3s; /* cria uma transição suave */
    box-shadow:0 8px 20px rgba(214,29,29,.35); /* adiciona uma sombra vermelha */
}

#btnFecharBio:hover{
    background:#b91313; /* escurece o botão ao passar o mouse */
    transform:translateY(-3px); /* move o botão levemente para cima */
    box-shadow:0 12px 25px rgba(214,29,29,.45); /* aumenta a sombra */
}

#btnFecharBio:active{
    transform:scale(.97); /* reduz levemente o tamanho ao clicar */
}

/* SETAS */

.seta{
    width:75px; /* define a largura */
    height:75px; /* define a altura */
    border:none; /* remove a borda */
    border-radius:50%; /* transforma o botão em um círculo */
    background:linear-gradient(145deg,#0057d8,rgb(1, 6, 139)); /* cria um degradê azul */
    color:white; /* define a cor do ícone */
    font-size:30px; /* define o tamanho do ícone */
    display:flex; /* ativa o Flexbox */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
    cursor:pointer; /* altera o cursor para uma mão */
    box-shadow:0 10px 25px rgba(0,102,255,.35), inset 0 1px 6px rgba(255,255,255,.15); /* adiciona sombra externa e interna */
    transition:.35s; /* cria uma transição suave */
}

.seta:hover{
    transform:scale(1.12); /* aumenta o botão ao passar o mouse */
    box-shadow:0 0 35px rgba(59,130,255,.7); /* cria um brilho azul */
}
.seta:active{
    transform:scale(.95); /* reduz o botão ao clicar */
}
.seta i{
    transition:.35s; /* cria uma transição suave no ícone */
}
.seta:hover i{
    transform:translateX(-3px); /* move o ícone da seta para a esquerda */
}
#proximo:hover i{
    transform:translateX(3px); /* move o ícone da seta da direita para a direita */
}

/* INDICADORES */

.indicadores{
    display:flex; /* coloca as bolinhas lado a lado */
    justify-content:center; /* centraliza as bolinhas */
    gap:12px; /* adiciona espaço entre elas */
    margin:20px 0 25px; /* adiciona margem acima e abaixo */
}

.indicadores button{
    width:14px; /* define a largura */
    height:14px; /* define a altura */
    border:none; /* remove a borda */
    border-radius:50%; /* transforma em círculo */
    background:#555; /* define a cor cinza padrão */
    cursor:pointer; /* altera o cursor para uma mão */
    transition:.3s; /* cria uma transição suave */
}

.indicadores button.ativo{
    background:#0066ff; /* destaca a bolinha ativa em azul */
    transform:scale(1.3); /* aumenta o tamanho da bolinha ativa */
}
/* biografia */
.biografia{
    width:100%; /* ocupa toda a largura da página */
    padding:0 70px 20px; /* adiciona espaçamento interno */
    background:#000; /* define o fundo preto */
}

.card-biografia{
    width:100%; /* ocupa toda a largura disponível */
    max-width:1450px; /* limita a largura máxima */
    margin:0 auto; /* centraliza o card */
    background:linear-gradient(135deg,#000000,#050914); /* cria um fundo em degradê */
    border:1px solid rgba(0, 0, 0, 0.35); /* adiciona uma borda azul */
    border-radius:25px; /* arredonda os cantos */
    padding:50px; /* adiciona espaçamento interno */
    display:none; /* deixa a biografia oculta inicialmente */
    opacity:0; /* inicia totalmente transparente */
    transform:translateY(40px); /* posiciona um pouco abaixo para a animação */
    box-shadow:0 0 35px rgba(0, 89, 255, 0.394); /* adiciona uma sombra azul suave */
}

/* TOPO */
.topo-biografia{
    display:flex; /* coloca os elementos lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:40px; /* adiciona espaço entre os elementos */
    margin-bottom:45px; /* adiciona espaço abaixo */
}

.topo-biografia img{
    width:220px; /* define a largura da imagem */
    height:260px; /* define a altura da imagem */
    object-fit:contain; /* mantém a proporção da imagem */
}

.topo-biografia span{
    color:#2f83ff; /* define a cor azul */
    font-size:18px; /* define o tamanho da fonte */
    letter-spacing:2px; /* aumenta o espaçamento entre as letras */
}

.topo-biografia h2{
    color:white; /* define a cor branca */
    font-size:58px; /* define o tamanho do nome do piloto */
    margin:10px 0; /* adiciona margem acima e abaixo */
    font-style:italic; /* deixa o texto em itálico */
}

.topo-biografia h3{
    color:#ff8a00; /* define a cor da equipe */
    font-size:28px; /* define o tamanho da fonte */
}

/* INFORMAÇÕES */

.infos-biografia{
    display:grid; /* utiliza Grid Layout */
    grid-template-columns:repeat(5,1fr); /* cria cinco colunas iguais */
    gap:20px; /* adiciona espaço entre os cards */
    margin-bottom:50px; /* adiciona espaço abaixo */
}

.info{
    background:#0b1329; /* define o fundo dos cards */
    border-radius:15px; /* arredonda os cantos */
    padding:20px; /* adiciona espaçamento interno */
    text-align:center; /* centraliza o texto */
}

.info span{
    display:block; /* faz o texto ocupar uma linha inteira */
    color:#9fa8c5; /* define a cor cinza azulada */
    margin-bottom:10px; /* adiciona espaço abaixo */
    font-size:15px; /* define o tamanho da fonte */
}

.info strong{
    color:white; /* define a cor branca */
    font-size:26px; /* define o tamanho do valor exibido */
}

/* TEXTO */
.texto-biografia h3{
    color:#2f83ff; /* define a cor azul do título */
    font-size:30px; /* define o tamanho da fonte */
    margin-bottom:25px; /* adiciona espaço abaixo */
}

.texto-biografia p{
    color:#dcdcdc; /* define a cor do texto */
    font-size:20px; /* define o tamanho da fonte */
    line-height:38px; /* aumenta o espaçamento entre as linhas */
    white-space:pre-line; /* mantém as quebras de linha do texto */
}

#textoBio{
    color:#d7d7d7; /* define a cor do texto */
    font-size:20px; /* define o tamanho da fonte */
    line-height:38px; /* aumenta o espaçamento entre as linhas */
    text-align:justify; /* justifica o texto */
    white-space:pre-line; /* mantém as quebras de linha */
}

/* TOPO DA BIOGRAFIA */

.topo-biografia{
    display:grid; /* utiliza Grid Layout */
    grid-template-columns:250px 1fr 300px; /* divide o topo em três colunas */
    gap:40px; /* adiciona espaço entre as colunas */
    align-items:center; /* centraliza os elementos verticalmente */
}

/* EQUIPE */

.equipe-bio{
    display:flex; /* coloca a logo e o nome da equipe lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:15px; /* adiciona espaço entre a logo e o nome */
    margin-top:15px; /* adiciona espaço acima */
}

.equipe-bio img{
    width:55px; /* define a largura da logo */
    height:55px; /* define a altura da logo */
    object-fit:contain; /* mantém a proporção da imagem */
}

.equipe-bio h3{
    color:#ff8a00; /* define a cor da equipe */
    font-size:32px; /* define o tamanho da fonte */
    font-weight:bold; /* deixa o texto em negrito */
}

/* BANDEIRA LATERAL */

.bandeira-lateral{
    display:flex; /* ativa o Flexbox */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
}
.bandeira-lateral img{
    width:250px; /* define o tamanho da bandeira */
    border-radius:10px; /* arredonda os cantos da imagem */
}

/* FOOTER */
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 */
}
@keyframes abrirBiografia{
    from{
        opacity:0; /* inicia totalmente transparente */
        transform:translateY(40px); /* começa um pouco abaixo */
    }
    to{
        opacity:1; /* termina totalmente visível */
        transform:translateY(0); /* volta para a posição original */
    }

}

@keyframes trocarPiloto{
    0%{
        opacity:1; /* inicia totalmente visível */
        transform:scale(1); /* mantém o tamanho original */
    }
    50%{
        opacity:0; /* desaparece no meio da animação */
        transform:scale(.96); /* reduz levemente o tamanho */
    }
    100%{
        opacity:1; /* volta a aparecer */
        transform:scale(1); /* retorna ao tamanho original */
    }
}
.card-piloto.animando{
    animation:trocarPiloto .45s ease; /* aplica a animação de troca ao card */
}

@keyframes trocarConteudo{
    from{
        opacity:0; /* inicia invisível */
        transform:translateX(80px); /* começa deslocado para a direita */
    }
    to{
        opacity:1; /* termina totalmente visível */
        transform:translateX(0); /* volta para a posição original */
    }
}