/* 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 */
  }

  /* 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: 0.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 {
    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, 0.757),
      0 0 20px rgba(26, 37, 161, 0.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*/
  }

  .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: 0.3s; /* cria uma transição suave */
  }

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


  /* ÁREA DO CARROSSEL DE PILOTOS */

  .slideshow {
      position: relative; /* permite posicionar as setas sobre as prévias */
      width: 100%; /* ocupa toda a largura da página */
      padding: 35px 0 20px; /* cria espaço acima e abaixo do carrossel */
      display: grid; /* organiza prévias e card principal em colunas */
      grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 1fr); /* cria duas prévias estreitas e um card central maior */
      gap: 0; /* aproxima as prévias do card principal */
      align-items: center; /* centraliza os cards verticalmente */
      background: #000000; /* mantém o fundo da seção preto, sem a faixa azul nas laterais */
      overflow: hidden; /* esconde qualquer conteúdo que ultrapasse a tela */
  }

  /* CARD PRINCIPAL */

  .card-piloto {
      position: relative; /* permite controlar as camadas do card */
      z-index: 2; /* coloca o card principal à frente das prévias */
      width: 100%; /* ocupa toda a coluna central */
      max-width: 1450px; /* limita a largura máxima */
      min-width: 0; /* permite reduzir conforme a tela */
      min-height: 680px; /* preserva a altura da apresentação */
      padding: 45px; /* define o espaço interno */
      display: grid; /* mantém a organização da foto e dos textos */
      grid-template-columns: minmax(0, 420px) minmax(0, 1fr); /* organiza foto e informações */
      grid-template-areas:"foto conteudo""stats stats"; /* mantém as estatísticas na parte inferior */
      column-gap: 45px; /* separa a foto das informações */
      row-gap: 25px; /* separa o conteúdo das estatísticas */
      background: linear-gradient(135deg,#030816 0%,#071431 55%,#0a1c42 100%); /* cria um degradê azul mais profundo no card */
      border: 1px solid rgba(59, 130, 255, 0.65); /* destaca a borda azul sem exagerar */
      border-radius: 25px; /* mantém o card arredondado */
      transition: box-shadow 0.35s ease; /* suaviza alterações no brilho */
      box-shadow:0 0 35px rgba(0, 76, 255, 0.08),0 20px 60px rgba(0, 0, 0, 0.25); /* adiciona profundidade abaixo do card */
  }

  /* FAIXA DE ESTATÍSTICAS */
  .estatisticas {
      grid-area: stats; /* mantém as estatísticas na área inferior do card */
      display: grid; /* utiliza uma grade para organizar os indicadores */
      grid-template-columns: repeat(4, minmax(0, 1fr)); /* distribui os quatro indicadores igualmente */
      align-items: center; /* centraliza os indicadores verticalmente */
      padding: 30px 10px 10px; /* mantém o espaçamento da faixa */
      border-top: 1px solid rgba(59, 130, 255, 0.35); /* cria uma linha azul acima das estatísticas */
      animation: trocarConteudo 0.65s ease; /* mantém a animação já existente */
  }


  /* CADA INDICADOR DAS ESTATÍSTICAS */
  .item {
      display: flex; /* organiza ícone, número e descrição */
      flex-direction: column; /* coloca os elementos um abaixo do outro */
      align-items: center; /* centraliza os elementos horizontalmente */
      justify-content: center; /* centraliza os elementos verticalmente */
      gap: 9px; /* define a distância entre ícone, número e texto */
      min-width: 0; /* evita que textos ultrapassem sua coluna */
      padding: 10px 8px; /* cria um espaçamento confortável */
  }

  /* DIVISÓRIAS ENTRE OS INDICADORES */
  .item:not(:last-child) {
      border-right: 1px solid rgba(59, 130, 255, 0.28); /* cria divisórias azuis discretas */
  }


  /* ÍCONES DAS ESTATÍSTICAS */
  .item i {
      font-size: 30px; /* mantém os ícones em um tamanho equilibrado */
      color: #3b82ff; /* utiliza o azul principal do site */
      filter: drop-shadow(0 0 8px rgba(59, 130, 255, 0.25)); /* adiciona um brilho discreto */
  }

  /* NÚMEROS DAS ESTATÍSTICAS */
  .item strong {
      color: #ffffff; /* mantém os números brancos */
      font-size: 46px; /* mantém o destaque dos números */
      font-weight: 900; /* deixa os números mais fortes */
      line-height: 1.1; /* controla a altura dos números */
      font-variant-numeric: tabular-nums; /* mantém os algarismos visualmente alinhados */
  }

  /* LEGENDAS DAS ESTATÍSTICAS */
  .item span {
      color: #aebcd6; /* utiliza um cinza azulado */
      font-size: 13px; /* mantém as legendas discretas */
      font-weight: 600; /* melhora a legibilidade */
      text-transform: uppercase; /* deixa os textos em maiúsculas */
      letter-spacing: 1.5px; /* adiciona espaçamento entre letras */
      text-align: center; /* centraliza as descrições */
  }


  /* foto */
.foto {
    display: flex; /* ativa o Flexbox */
    justify-content: center; /* centraliza a foto horizontalmente */
    align-items: flex-end; /* posiciona a foto na parte inferior */
    height: 520px; /* restaura a altura original */
    grid-area: foto; /* mantém a posição no card */
    animation: trocarConteudo 0.45s ease; /* mantém a animação */
}

  #fotoPiloto.senna {
    width: 90%; /* restaura o tamanho original 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 0.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 */
    position: relative; /* permite posicionar o detalhe azul */
    padding-bottom: 12px; /* cria espaço para a linha decorativa */
  }

  /* DETALHE AZUL ABAIXO DO PAÍS */
  .pais::after {
    content: ""; /* cria a linha decorativa */
    position: absolute; /* posiciona a linha em relação ao país */
    left: 0; /* alinha a linha à esquerda */
    bottom: 0; /* posiciona a linha na parte inferior */
    width: 45px; /* define o comprimento da linha */
    height: 3px; /* define a espessura da linha */
    border-radius: 3px; /* arredonda as extremidades */
    background: #3b82ff; /* utiliza azul elétrico */
    box-shadow: 0 0 12px rgba(59, 130, 255, 0.45); /* adiciona um brilho suave */
  }

  .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 DO PILOTO */
  #nomePiloto {
    font-size: 86px; /* mantém o tamanho original do nome */
    color: #f5f7ff; /* utiliza branco levemente azulado */
    line-height: 82px; /* mantém o espaçamento entre as linhas */
    font-weight: 900; /* deixa o nome bem destacado */
    font-style: italic; /* mantém o estilo inclinado */
    text-transform: uppercase; /* transforma o nome em maiúsculas */
    margin-bottom: 15px; /* mantém o espaço abaixo do nome */
    text-shadow: 0 0 24px rgba(59, 130, 255, 0.22); /* adiciona um brilho azul discreto */
  }

  /* 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: 0.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: 0.3s; /* cria uma transição suave */
    box-shadow: 0 8px 20px rgba(214, 29, 29, 0.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, 0.45); /* aumenta a sombra */
  }

  #btnFecharBio:active {
    transform: scale(0.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, 0.35),
      inset 0 1px 6px rgba(255, 255, 255, 0.15); /* adiciona sombra externa e interna */
    transition: 0.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, 0.7); /* cria um brilho azul */
  }
  .seta:active {
    transform: scale(0.95); /* reduz o botão ao clicar */
  }
  .seta i {
    transition: 0.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 DO CARROSSEL */

  .indicadores {
      display: flex; /* organiza as bolinhas lado a lado */
      justify-content: center; /* centraliza os indicadores */
      align-items: center; /* alinha os indicadores verticalmente */
      gap: 9px; /* separa as bolinhas */
  }

  /* BOLINHAS DOS INDICADORES */

  .indicadores button {
      width: 10px; /* define a largura inicial */
      height: 10px; /* define a altura */
      padding: 0; /* remove espaçamentos internos */
      border: none; /* remove a borda padrão */
      border-radius: 20px; /* deixa as bolinhas arredondadas */
      background: #505563; /* utiliza cinza nos pilotos inativos */
      cursor: pointer; /* mostra que é possível clicar */
      transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; /* suaviza a mudança de estado */
  }

  /* INDICADOR DO PILOTO ATUAL */

  .indicadores button.ativo {
      width: 32px; /* alonga o indicador selecionado */
      background: #2478ff; /* destaca o piloto atual em azul */
      box-shadow: 0 0 12px rgba(36, 120, 255, 0.45); /* adiciona brilho ao indicador ativo */
  }

  /* EFEITO AO PASSAR O MOUSE */

  .indicadores button:hover {
      background: #3b82ff; /* destaca o indicador ao passar o mouse */
  }
  /* biografia */
  .biografia {
    width: 100%; /* ocupa toda a largura da página */
    padding: 25px 70px 50px; /* adiciona espaçamento interno */
    background: #000; /* define o fundo preto */
  }

  .card-biografia {
    width: 100%; /* ocupa a largura disponível */
    max-width: 1450px; /* limita a largura máxima */
    margin: 0 auto; /* centraliza a caixa horizontalmente */
    background: linear-gradient(135deg, #030816 0%, #071431 55%, #0a1c42 100%); /* utiliza o mesmo degradê do card principal */
    border: 1px solid rgba(59, 130, 255, 0.45); /* adiciona uma borda azul discreta */
    border-radius: 25px; /* arredonda os quatro cantos */
    padding: 50px; /* mantém o espaçamento interno */
    display: none; /* deixa a biografia escondida até clicar no botão */
    opacity: 0; /* prepara o efeito de aparecimento */
    transform: translateY(40px); /* começa um pouco abaixo durante a animação */
    box-shadow: 0 0 35px rgba(0, 76, 255, 0.10), 0 20px 60px rgba(0, 0, 0, 0.25); /* cria profundidade e um brilho azul suave */
}

  /* TOPO */
  .topo-biografia {
    margin-bottom: 45px; /* adiciona espaço abaixo */
  }

  /* FOTO PRINCIPAL DA BIOGRAFIA */
  .topo-biografia > #fotoBio {
      width: 100%; /* ocupa a largura disponível na coluna da foto */
      max-width: 290px; /* permite uma foto maior sem exagerar */
      height: 340px; /* aumenta a altura da área da foto */
      object-fit: contain; /* mantém a proporção original */
      object-position: center bottom; /* posiciona o piloto na parte inferior */
      justify-self: center; /* centraliza a foto dentro da coluna */
  }

  .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: linear-gradient(145deg, #0b1935, #091328); /* cria um degradê azul-escuro */
      border: 1px solid rgba(59, 130, 255, 0.25); /* adiciona uma borda azul discreta */
      border-radius: 15px; /* mantém os cantos arredondados */
      padding: 22px 12px; /* cria espaço interno sem deixar os cards largos demais */
      text-align: center; /* centraliza as informações */
      min-width: 0; /* evita que o conteúdo ultrapasse o espaço disponível */
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* suaviza os efeitos */
  }

  /* EFEITO AO PASSAR O MOUSE */
  .info:hover {
      border-color: rgba(59, 130, 255, 0.65); /* destaca a borda azul */
      box-shadow: 0 0 22px rgba(36, 92, 255, 0.15); /* cria um brilho discreto */
      transform: translateY(-4px); /* levanta levemente o card */
  }


  /* TÍTULOS DOS CARDS */
  .info span {
      display: block; /* coloca o título em uma linha própria */
      color: #8faee2; /* utiliza azul claro */
      margin-bottom: 12px; /* separa o título do número */
      font-size: 13px; /* define um tamanho discreto */
      font-weight: 600; /* melhora a leitura */
      text-transform: uppercase; /* deixa os títulos em maiúsculas */
      letter-spacing: 1px; /* aumenta levemente o espaço entre letras */
  }

  /* DATA DE NASCIMENTO */
  .info:last-child strong {
      font-size: 23px; /* reduz somente a data de nascimento */
  }

  /* VALORES DOS CARDS */
  .info strong {
      display: block; /* ocupa uma linha própria */
      color: #ffffff; /* deixa os valores brancos */
      font-size: 28px; /* aumenta os números */
      font-weight: 900; /* destaca os valores */
      line-height: 1.2; /* controla a altura */
      font-variant-numeric: tabular-nums; /* alinha visualmente os algarismos */
      overflow-wrap: anywhere; /* evita que datas grandes ultrapassem o card */
  }

  /* ÁREA COMPLETA DO TEXTO DA BIOGRAFIA */
  .texto-biografia {
      width: 100%; /* permite utilizar o espaço disponível */
      max-width: 1050px; /* evita que o texto fique muito espalhado */
      margin: 0 auto; /* centraliza a área da biografia */
      padding: 35px 0 20px; /* adiciona espaço acima e abaixo */
      border-top: 1px solid rgba(59, 130, 255, 0.20); /* cria uma linha azul discreta acima da biografia */
      padding-top: 35px; /* aumenta a distância entre a linha e o título */
  }

  /* TEXTO */
  .texto-biografia h3 {
      color: #3b82ff; /* utiliza o azul principal do site */
      font-size: 34px; /* aumenta levemente o título */
      font-weight: 900; /* deixa o texto mais destacado */
      font-style: italic; /* acompanha o estilo dos títulos de Fórmula 1 */
      text-transform: uppercase; /* transforma o título em letras maiúsculas */
      letter-spacing: 1px; /* cria um pequeno espaço entre as letras */
      margin-bottom: 35px; /* separa o título do texto */
      padding-left: 18px; /* cria espaço entre a barra e o título */
      border-left: 4px solid #3b82ff; /* adiciona uma barra azul decorativa */
      text-shadow: 0 0 18px rgba(59, 130, 255, 0.15); /* cria um brilho azul discreto */
  }

  .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 */
  }

  /* TEXTO COMPLETO DA HISTÓRIA DO PILOTO */
  #textoBio {
      color: #d7e0ef; /* utiliza branco azulado para facilitar a leitura */
      font-size: 18px; /* mantém um tamanho confortável */
      font-weight: 400; /* mantém a aparência natural dos parágrafos */
      line-height: 1.9; /* aumenta o espaço entre as linhas */
      letter-spacing: 0.2px; /* separa levemente as letras */
      text-align: left; /* evita os espaços irregulares do texto justificado */
      white-space: pre-line; /* preserva as quebras de linha do JavaScript */
      overflow-wrap: break-word; /* evita que palavras grandes ultrapassem a largura */
  }

  /* SEÇÃO DA LINHA DO TEMPO */

  .secao-linha-tempo {
      width: 100%; /* ocupa toda a largura da biografia */
      margin-top: 65px; /* separa a linha do tempo do texto */
      padding-top: 35px; /* cria espaço acima do título */
      border-top: 1px solid rgba(59, 130, 255, 0.25); /* adiciona uma divisória azul */
  }

  /* DESTAQUE DO TÍTULO */

  .secao-linha-tempo h3 span {
      color: #ffffff; /* destaca a palavra TEMPO em branco */
  }

  /* SUBTÍTULO */

  .subtitulo-linha-tempo {
      color: #aebbd3; /* utiliza um cinza azulado */
      font-size: 16px; /* define um tamanho confortável */
      margin-bottom: 45px; /* separa o subtítulo dos acontecimentos */
  }

  /* ÁREA COM ROLAGEM HORIZONTAL */

  .linha-tempo-scroll {
      width: 100%; /* ocupa toda a largura disponível */
      overflow-x: auto; /* permite deslizar horizontalmente quando necessário */
      padding: 10px 0 25px; /* cria espaço para os elementos */
      scrollbar-color: #245cff #08142c; /* personaliza a barra de rolagem */
      scrollbar-width: thin; /* deixa a barra de rolagem mais fina */
  }

  /* ORGANIZAÇÃO DA LINHA DO TEMPO */

  .linha-tempo {
      display: flex; /* coloca os acontecimentos lado a lado */
      width: 100%; /* utiliza toda a largura disponível */
      min-width: max-content; /* impede que os acontecimentos fiquem espremidos */
      align-items: flex-start; /* alinha todos os acontecimentos no topo */
  }

  /* CADA ACONTECIMENTO */

  .evento-tempo {
      position: relative; /* permite posicionar os detalhes decorativos */
      flex: 1 0 190px; /* define uma largura mínima para cada acontecimento */
      max-width: 260px; /* evita cards largos demais */
      padding: 0 18px; /* separa os conteúdos horizontalmente */
      text-align: center; /* centraliza os textos */
  }

  /* ANO DO ACONTECIMENTO */

  .evento-ano {
      display: block; /* coloca o ano em uma linha própria */
      color: #3b82ff; /* destaca o ano em azul */
      font-size: 27px; /* aumenta o tamanho dos anos */
      font-weight: 900; /* deixa os números destacados */
      margin-bottom: 22px; /* separa o ano da linha */
  }

  /* LINHA AZUL QUE CONECTA OS EVENTOS */

  .evento-tempo::before {
      content: ""; /* cria a linha decorativa */
      position: absolute; /* posiciona a linha dentro do evento */
      top: 54px; /* alinha a linha com os pontos */
      left: 0; /* começa na borda esquerda */
      width: 100%; /* conecta toda a largura do evento */
      height: 3px; /* define a espessura da linha */
      background: #245cff; /* utiliza azul elétrico */
  }

  /* PONTO QUE MARCA CADA EVENTO */

  .evento-ponto {
      position: relative; /* permite ficar acima da linha */
      z-index: 1; /* mantém o ponto visível */
      display: block; /* permite definir largura e altura */
      width: 16px; /* define a largura do círculo */
      height: 16px; /* define a altura do círculo */
      margin: 0 auto 25px; /* centraliza e separa do título */
      border: 3px solid #81b3ff; /* cria uma borda azul clara */
      border-radius: 50%; /* transforma o elemento em círculo */
      background: #245cff; /* preenche o círculo */
      box-shadow: 0 0 14px rgba(59, 130, 255, 0.45); /* adiciona um brilho suave */
  }

  /* TÍTULO DO ACONTECIMENTO */

  .evento-titulo {
      color: #ffffff; /* deixa o título branco */
      font-size: 15px; /* define o tamanho do texto */
      font-weight: 800; /* destaca o acontecimento */
      line-height: 1.4; /* melhora a leitura */
      margin-bottom: 10px; /* separa o título da descrição */
  }

  /* DESCRIÇÃO DO ACONTECIMENTO */

  .evento-descricao {
      color: #aebbd3; /* utiliza cinza azulado */
      font-size: 13px; /* mantém a descrição discreta */
      line-height: 1.6; /* melhora a leitura */
  }


  /* TOPO DA BIOGRAFIA */

  .topo-biografia {
      display: grid; /* organiza foto, informações e bandeira */
      grid-template-columns: 290px minmax(0, 1fr) 160px; /* reserva mais espaço para a foto e menos para a bandeira */
      gap: 35px; /* separa as três 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: 100%; /* acompanha a largura disponível na coluna */
      max-width: 150px; /* reduz a bandeira para não competir com o nome */
      height: auto; /* mantém a proporção original */
      border-radius: 8px; /* arredonda suavemente os cantos */
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); /* adiciona profundidade à bandeira */
  }
  /* CARDS DE PRÉVIA DOS PILOTOS */
  .preview-card {
      position: relative; /* permite posicionar os textos e efeitos sobre a foto */
      z-index: 1; /* mantém as prévias atrás do card principal */
      width: 100%; /* ocupa toda a largura da coluna lateral */
      min-width: 0; /* impede que o card ultrapasse a coluna */
      height: 460px; /* aumenta um pouco a altura da prévia */
      overflow: hidden; /* esconde as partes da foto que ultrapassarem */
      background: #07132c; /* define um fundo azul escuro */
      border: 1px solid rgba(59, 130, 255, 0.45); /* destaca a borda azul */
      border-radius: 18px; /* arredonda os cantos */
      opacity: 0.8; /* deixa a foto mais visível sem competir com o piloto principal */
      box-shadow: 0 0 25px rgba(0, 89, 255, 0.15); /* adiciona um brilho azul discreto */
      transition: opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; /* suaviza a opacidade, o brilho e a cor da borda */
  }
  /* EFEITO AO PASSAR O MOUSE NAS PRÉVIAS */

  .preview-card:hover {
      opacity: 1; /* deixa a foto totalmente visível */
      border-color: rgba(59, 130, 255, 0.85); /* destaca a borda azul */
      box-shadow: 0 0 30px rgba(36, 92, 255, 0.30); /* intensifica o brilho azul */
  }
  /* FOTO DA PRÉVIA */

  .preview-card > img {
      display: block; /* remove o espaço extra da imagem */
      width: 100%; /* ocupa toda a largura */
      height: 100%; /* ocupa toda a altura */
      object-fit: cover; /* preenche o card sem deformar a foto */
      object-position: center top; /* mantém o rosto do piloto na parte superior */
      filter: brightness(0.85); /* mantém a imagem ligeiramente escurecida para destacar o card central */
      transition: filter 0.35s ease; /* suaviza a mudança de iluminação da foto */
  }

  /* ILUMINAR A FOTO AO PASSAR O MOUSE */
  .preview-card:hover > img {
      filter: brightness(1); /* recupera o brilho original da foto */
  }

  /* SOMBRA SOBRE A FOTO DA PRÉVIA */
  .preview-overlay {
      position: absolute; /* coloca a sombra sobre a imagem */
      inset: 0; /* ocupa toda a área do card */
      z-index: 1; /* mantém a sombra acima da foto */
      background: linear-gradient(to bottom,rgba(0, 0, 0, 0.05) 0%,rgba(2, 8, 20, 0.15) 35%,rgba(2, 8, 20, 0.75) 75%,rgba(2, 8, 20, 0.98) 100%); /* mantém o rosto visível e escurece a região dos textos */
      pointer-events: none; /* impede que a sombra bloqueie interações */
  }

  /* INFORMAÇÕES DA PRÉVIA */

  .preview-info {
      position: absolute; /* posiciona os textos sobre a foto */
      left: 12px; /* afasta os textos da borda esquerda */
      right: 12px; /* afasta os textos da borda direita */
      bottom: 20px; /* mantém os textos próximos da parte inferior */
      z-index: 2; /* coloca os textos acima da sombra */
  }

  /* NÚMERO DECORATIVO DO PILOTO */
  .preview-numero {
      position: absolute; /* permite posicionar o número dentro da prévia */
      bottom: 45px; /* posiciona o número próximo da parte inferior */
      right: 5px; /* aproxima o número da borda direita */
      display: block; /* permite controlar as dimensões do elemento */
      font-size: 100px; /* aumenta o número para criar destaque */
      font-weight: 900; /* deixa o número bem grosso */
      font-style: italic; /* inclina o número no estilo da Fórmula 1 */
      line-height: 1; /* mantém o número compacto */
      letter-spacing: -5px; /* aproxima os algarismos dos números com dois dígitos */
      color: rgba(59, 130, 255, 0.22); /* deixa o número azul e semitransparente */
      text-shadow: 0 0 20px rgba(59, 130, 255, 0.12); /* adiciona um brilho azul discreto */
      pointer-events: none; /* impede que o número atrapalhe a interação */
  }

  /* NOME DO PILOTO NA PRÉVIA */

  .preview-info h3 {
      color: #ffffff; /* deixa o nome branco */
      font-size: 18px; /* aumenta levemente o nome */
      font-weight: 800; /* destaca o texto */
      font-style: italic; /* acompanha a identidade visual da Fórmula 1 */
      line-height: 1.2; /* controla o espaço entre linhas */
      text-transform: uppercase; /* mantém os nomes em maiúsculas */
      overflow-wrap: anywhere; /* impede que nomes grandes ultrapassem o card */
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); /* melhora a leitura sobre a foto */
  }

  /* EQUIPE DO PILOTO */
  .preview-info p {
      color: #b8c8e7; /* utiliza azul acinzentado claro */
      font-size: 12px; /* define o tamanho do texto */
      line-height: 1.5; /* melhora a leitura */
      margin-top: 7px; /* separa do nome */
  }

  /* SETAS SOBRE AS PRÉVIAS */

  .seta {
      position: absolute; /* permite posicionar as setas sobre as prévias */
      top: 50%; /* coloca as setas no centro vertical */
      z-index: 5; /* mantém os botões acima das imagens */
  }

  /* SETA ESQUERDA */

  .seta-esquerda {
      left: 5%; /* centraliza aproximadamente na prévia esquerda */
      transform: translate(-50%, -50%); /* corrige a posição da seta */
  }

  /* SETA DIREITA */

  .seta-direita {
      right: 5%; /* centraliza aproximadamente na prévia direita */
      transform: translate(50%, -50%); /* corrige a posição da seta */
  }

  /* EFEITO DAS SETAS */

  .seta-esquerda:hover {
      transform: translate(-50%, -50%) scale(1.08); /* aumenta a seta mantendo sua posição */
  }

  .seta-direita:hover {
      transform: translate(50%, -50%) scale(1.08); /* aumenta a seta mantendo sua posição */
  }

  @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(0.96); /* reduz levemente o tamanho */
    }
    100% {
      opacity: 1; /* volta a aparecer */
      transform: scale(1); /* retorna ao tamanho original */
    }
  }
  .card-piloto.animando {
    animation: trocarPiloto 0.45s ease; /* aplica a animação de troca ao card */
  }

  @keyframes trocarConteudo {
    from {
      opacity: 0; /* começa com o conteúdo invisível */
      transform: translateY(22px); /* posiciona o conteúdo um pouco abaixo */
      filter: blur(4px); /* aplica um desfoque inicial */
      }

    to {
      opacity: 1; /* deixa o conteúdo totalmente visível */
      transform: translateY(0); /* retorna o conteúdo à posição original */
      filter: blur(0); /* remove o desfoque */
      }
  }

  /* RESPONSIVIDADE DA PÁGINA PILOTOS */


  /* TABLETS E CELULARES */

  @media (max-width: 820px) {
    /* BANNER */

    .hero {
      height: auto; /* altura acompanha o conteúdo */
      min-height: 450px; /* altura mínima */
      padding: 70px 30px; /* espaço interno */
    }

    .hero-texto {
      width: 100%; /* ocupa a largura disponível */
      min-width: 0; /* impede ultrapassar */
    }

    .hero-texto h1 {
      font-size: 46px; /* adapta o título */
      line-height: 1.15; /* melhora as linhas */
    }

    .hero-texto strong {
      font-size: 48px; /* adapta o texto azul */
      line-height: 1.15; /* melhora o espaçamento */
      white-space: normal; /* permite quebra */
      overflow-wrap: anywhere; /* impede corte */
    }

    .hero-texto p {
      font-size: 17px; /* adapta o parágrafo */
      line-height: 1.6; /* melhora a leitura */
    }

    /* ÁREA DO SLIDESHOW */

    .slideshow {
      display: grid; /* organiza o card e as setas */
      grid-template-columns: 1fr 1fr; /* duas colunas para as setas */
      gap: 15px; /* espaço entre os elementos */

      padding: 35px 20px 15px; /* margens internas */
      align-items: center; /* centraliza os elementos */
      justify-items: center; /* centraliza horizontalmente */
    }

    /* CARD DO PILOTO */

    .card-piloto {
      order: 0; /* mantém o card principal */
      flex: 1 1 100%; /* ocupa a linha toda */
      min-width: 0; /* evita estouro */
      min-height: auto; /* altura conforme conteúdo */
      grid-template-columns: 1fr; /* uma coluna */
      grid-template-areas:
        "foto"
        "conteudo"
        "stats"; /* foto acima, conteúdo no meio e estatísticas abaixo */
      padding: 25px; /* espaço interno */
      row-gap: 25px; /* separação entre partes */
      grid-column: 1 / -1; /* ocupa as duas colunas */
      grid-row: 1; /* coloca o card na primeira linha */
    }

    /* FOTO */

 .foto {
    height: 360px; /* ajusta a altura para tablet */
    max-width: 100%; /* impede que a foto ultrapasse o card */
    overflow: hidden; /* esconde qualquer excesso */
}

.foto img {
    max-width: 100%; /* limita a largura da imagem */
    max-height: 100%; /* limita a altura da imagem */
    object-fit: contain; /* preserva a proporção */
}

    /* CONTEÚDO */

    #nomePiloto {
      font-size: 48px; /* reduz o nome */
      line-height: 1.1; /* ajusta a altura */
    }

    #equipePiloto {
      font-size: 23px; /* adapta a equipe */
      margin-bottom: 18px; /* diminui espaço */
    }

    #resumoPiloto {
      font-size: 16px; /* adapta o resumo */
      line-height: 1.65; /* melhora a leitura */
    }

    /* ESTATÍSTICAS */

  .estatisticas {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* coloca dois indicadores por linha */
      gap: 20px 0; /* separa as duas linhas de indicadores */
      padding-top: 25px; /* mantém espaço acima das estatísticas */
  }

  .item {
      min-width: 0; /* impede que o conteúdo ultrapasse a coluna */
  }
  /* DIVISÓRIAS NA VERSÃO RESPONSIVA */

  .item:not(:last-child) {
      border-right: none; /* remove as divisórias da versão computador */
  }

  .item:nth-child(odd) {
      border-right: 1px solid rgba(59, 130, 255, 0.28); /* cria a divisória entre os dois indicadores de cada linha */
  }
    .item strong {
      font-size: 35px; /* reduz os números */
    }

    .item span {
      font-size: 12px; /* adapta as legendas */
      text-align: center; /* centraliza */
    }

    /* SETAS DE NAVEGAÇÃO */

    .seta {
      width: 55px; /* diminui largura */
      height: 55px; /* diminui altura */
      font-size: 23px; /* ícone menor */
    }

    /* BIOGRAFIA */

    .biografia {
      padding: 0 20px 20px; /* margens menores */
    }

    .card-biografia {
      padding: 30px 20px; /* espaço interno */
    }

    .topo-biografia > #fotoBio {
      max-width: 220px; /* diminui a largura da foto */
      height: 270px; /* adapta a altura da imagem */
  }
    .topo-biografia img {
      max-width: 100%; /* respeita a tela */
    }

    .equipe-bio {
      justify-content: center; /* centraliza logo e equipe */
      flex-wrap: wrap; /* permite quebra */
    }

    .bandeira-lateral {
      grid-column: auto; /* volta ao fluxo */
    }

    .bandeira-lateral img {
      width: min(220px, 100%); /* adapta bandeira */
    }

    .infos-biografia {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* dois cards por linha */
      gap: 12px; /* separação */
    }

    .texto-biografia p,
    #textoBio {
      font-size: 16px; /* texto legível */
      line-height: 1.7; /* melhora leitura */
      text-align: left; /* evita espaços grandes entre palavras */
    }
/* CABEÇALHO DA BIOGRAFIA RESPONSIVO */
.topo-biografia {
  grid-template-columns: 1fr; /* organiza tudo em uma coluna */
  justify-items: center; /* centraliza os elementos */
  text-align: center; /* centraliza os textos */
}
    /* SETAS ABAIXO DO CARD */

    #anterior {
      grid-column: 1; /* primeira coluna */
      grid-row: 2; /* segunda linha */
      justify-self: end; /* aproxima do centro */
    }

    #proximo {
      grid-column: 2; /* segunda coluna */
      grid-row: 2; /* segunda linha */
      justify-self: start; /* aproxima do centro */
    }
    
  /* ESCONDER PRÉVIAS NO TABLET E CELULAR */

  .preview-card {
      display: none; /* esconde as prévias para dar espaço ao piloto principal */
  }

  /* SETAS ABAIXO DO CARD */

  .seta {
      position: static; /* devolve as setas à organização normal da grade */
      top: auto; /* remove a posição vertical do computador */
      transform: none; /* remove o deslocamento das prévias */
  }

  /* EFEITO DAS SETAS RESPONSIVAS */

  .seta-esquerda:hover,
  .seta-direita:hover {
      transform: scale(1.08); /* aumenta as setas sem deslocar */
  }

  }

  /* CELULARES */

  @media (max-width: 480px) {
    /* BANNER */

    .hero {
      min-height: 400px; /* altura mínima */
      padding: 50px 20px; /* margens menores */
    }

    .hero-texto span {
      font-size: 12px; /* subtítulo menor */
      letter-spacing: 1px; /* reduz distância */
    }

    .hero-texto h1 {
      font-size: 34px; /* título proporcional */
      line-height: 1.2; /* melhora quebra */
    }

    .hero-texto strong {
      font-size: 35px; /* destaque azul */
      line-height: 1.2; /* altura */
    }

    .hero-texto p {
      font-size: 14px; /* texto menor */
      line-height: 1.7; /* leitura confortável */
    }

    .botao-banner {
      max-width: 100%; /* evita ultrapassar */
      padding: 12px 15px; /* botão compacto */
      font-size: 12px; /* texto menor */
      text-align: center; /* centraliza */
      white-space: normal; /* permite quebra */
    }

    /* SLIDESHOW */

    .slideshow {
      padding: 25px 12px 15px; /* adapta as margens internas */
      column-gap: 20px; /* define a distância horizontal entre as setas */
      row-gap: 15px; /* define a distância entre o card e as setas */
    }

    .card-piloto {
      padding: 18px; /* reduz espaço interno */
      border-radius: 18px; /* ajusta cantos */
    }

    .foto {
      height: 280px; /* adapta foto */
    }
#fotoPiloto.senna {
    height: 110%; /* amplia discretamente a foto no celular */
    transform: translateY(10px); /* mantém o rosto bem enquadrado */
}
    #nomePiloto {
      font-size: 35px; /* nome proporcional */
      line-height: 1.1; /* mantém linhas */
    }

    .pais span {
      font-size: 13px; /* reduz país */
      letter-spacing: 1px; /* economiza espaço */
    }

    #equipePiloto {
      font-size: 19px; /* reduz equipe */
    }

    #resumoPiloto {
      font-size: 14px; /* adapta descrição */
      line-height: 1.6; /* leitura */
    }

    /* ESTATÍSTICAS */

    .estatisticas {
      gap: 18px 8px; /* espaço entre itens */
    }

    .item i {
      font-size: 24px; /* ícones menores */
    }

    .item strong {
      font-size: 28px; /* números menores */
    }

    .item span {
      font-size: 10px; /* legendas menores */
      letter-spacing: 1px; /* reduz espaço */
    }

    /* BOTÕES */

    #btnBiografia,
    #btnFecharBio {
      width: 100%; /* ocupa largura disponível */
      max-width: 260px; /* evita exagero */
      height: 48px; /* altura confortável */
      font-size: 14px; /* reduz texto */
    }

    /* BIOGRAFIA */

    .biografia {
      padding: 0 12px 20px; /* acompanha slideshow */
    }

    .card-biografia {
      padding: 22px 15px; /* adapta espaço */
      border-radius: 18px; /* cantos menores */
    }

    .topo-biografia h2 {
      color: #f5f7ff; /* utiliza branco levemente azulado */
      font-size: clamp(36px, 4vw, 58px); /* adapta o tamanho do nome à largura disponível */
      font-weight: 900; /* deixa o nome bem destacado */
      font-style: italic; /* mantém a identidade visual da Fórmula 1 */
      line-height: 1.1; /* aproxima as linhas do nome */
      margin: 12px 0 20px; /* separa o nome do país e da equipe */
      text-transform: uppercase; /* transforma o nome em letras maiúsculas */
      overflow-wrap: anywhere; /* evita que nomes longos ultrapassem o espaço */
      text-shadow: 0 0 24px rgba(59, 130, 255, 0.18); /* adiciona um brilho azul discreto */
  }

    .equipe-bio h3 {
      font-size: 23px; /* reduz nome da equipe */
    }

    .infos-biografia {
      gap: 10px; /* diminui espaço */
    }

    .info {
      padding: 15px 8px; /* cards compactos */
    }

    .info span {
      font-size: 11px; /* rótulo menor */
    }

    .info strong {
      font-size: 18px; /* informação menor */
      overflow-wrap: anywhere; /* evita estouro */
    }

    .texto-biografia h3 {
      font-size: 24px; /* reduz título */
    }

    .seta {
      width: 50px; /* reduz o botão */
      height: 50px; /* reduz a altura */
      font-size: 20px; /* adapta o ícone */
    }
    
  /* LINHA DO TEMPO NO CELULAR */

  .secao-linha-tempo {
      margin-top: 40px; /* reduz o espaço acima da seção */
      padding-top: 25px; /* adapta o espaçamento interno */
  }

  .evento-tempo {
      flex-basis: 175px; /* permite visualizar parte do próximo acontecimento */
  }

  .evento-ano {
      font-size: 24px; /* adapta o tamanho do ano */
  }

  }