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

/*BANNER*/
.banner {
  margin-top: 70px; /* cria espaço para o menu */ 
  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, 0.88) 0%,rgba(0, 0, 0, 0.7) 50%,rgba(0, 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: 0.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, 0.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, 0.5),
    0 0 18px rgba(59, 131, 255, 0.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: 0.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 */
  transition:transform 0.35s ease,box-shadow 0.35s ease,border-color 0.35s ease; /* suaviza a elevação, o brilho e a borda */
  will-change: transform; /* prepara o navegador para o movimento 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 */
  transition: transform 0.5s ease; /* suaviza o zoom da fotografia */
}

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

/* EFEITO AO PASSAR O MOUSE SOBRE O CARD */
@media (hover: hover) {
    .card:hover {
  transform: translateY(-6px); /* levanta o card suavemente */
  border-color: #3b82ff; /* deixa a borda azul mais clara */
  box-shadow:0 12px 30px rgba(0, 0, 0, 0.35),0 0 22px rgba(0, 102, 255, 0.25); /* cria profundidade e brilho azul */
    }
}

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

  .banner {
    height: auto; /* permite crescer com o conteúdo */
    min-height: 470px; /* mantém um banner bonito */
    padding: 70px 30px; /* espaçamento interno */
    background-position: center; /* centraliza o fundo */
  }

  .banner-texto {
    width: 100%; /* ocupa a largura disponível */
    max-width: 100%; /* evita ultrapassar */
  }

  .banner-subtitulo {
    font-size: 14px; /* diminui o subtítulo */
    letter-spacing: 2px; /* aproxima as letras */
  }

  .banner h1 {
    font-size: 52px; /* reduz o título */
    line-height: 1.1; /* melhora as linhas */
    letter-spacing: -1px; /* reduz o espaçamento */
  }

  .titulo-destaque {
    display: block; /* coloca HISTÓRICAS em outra linha */
    overflow-wrap: anywhere; /* evita cortes */
  }

  .banner p {
    font-size: 18px; /* adapta o texto */
    line-height: 1.5; /* melhora o espaçamento */
  }

  /* CARDS DAS CORRIDAS */

  .corridas {
    width: 92%; /* mantém margens laterais */
    margin: 35px auto; /* espaço entre as seções */
    gap: 25px; /* distância entre os cards */
  }

  .card {
    height: auto; /* adapta a altura ao conteúdo */
    flex-direction: column; /* imagem acima das informações */
  }

  /* IMAGEM DO GP */

  .imagem {
    width: 100%; /* ocupa toda a largura */
    height: 250px; /* altura proporcional */
  }

  /* INFORMAÇÕES */

  .info {
    width: 100%; /* ocupa toda a largura */
    padding: 25px; /* espaço interno */
  }

  .info h2 {
    font-size: 60px; /* adapta o número do ranking */
  }

  .info h3 {
    font-size: 25px; /* adapta o nome do GP */
  }

  .info p {
    font-size: 16px; /* texto legível */
    line-height: 1.7; /* leitura confortável */
  }

}

/* CELULARES */

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

  .banner {
    min-height: 420px; /* altura mínima */
    padding: 50px 20px; /* reduz as margens */
  }

  .banner-subtitulo {
    font-size: 11px; /* subtítulo compacto */
    letter-spacing: 1px; /* aproxima as letras */
    line-height: 1.5; /* permite quebrar */
  }

  .banner h1 {
    font-size: clamp(32px, 9vw, 42px); /* acompanha a tela */
    line-height: 1.15; /* melhora o espaçamento */
    letter-spacing: 0; /* evita ocupar espaço demais */
  }

  .titulo-destaque {
    white-space: normal; /* permite quebra */
    overflow-wrap: normal; /* evita dividir palavras desnecessariamente */
  }

  .banner p {
    font-size: 15px; /* adapta a descrição */
    margin-top: 20px; /* espaço acima */
  }

  /* BOTÃO DO BANNER */

  .botao-banner {
    max-width: 100%; /* não ultrapassa a tela */
    padding: 13px 18px; /* botão compacto */
    font-size: 13px; /* texto menor */
    line-height: 1.4; /* melhora o espaçamento */
    text-align: center; /* centraliza */
    white-space: normal; /* permite quebra */
  }

  /* CARDS */

  .corridas {
    width: 100%; /* utiliza a largura disponível */
    padding: 0 12px; /* mantém margens */
    gap: 20px; /* separa os cards */
  }

  .card {
    border-radius: 16px; /* adapta os cantos */
  }

  /* FOTO DA CORRIDA */

  .imagem {
    height: 190px; /* diminui a altura */
  }

  .bandeira {
    width: 45px; /* bandeira menor */
    right: 10px; /* distância lateral */
    bottom: 10px; /* distância inferior */
  }

  /* INFORMAÇÕES DA CORRIDA */

  .info {
    padding: 20px; /* reduz espaço interno */
  }

  .info h2 {
    font-size: 52px; /* número do ranking */
  }

  .info h3 {
    font-size: 22px; /* nome do GP */
    line-height: 1.3; /* melhora títulos longos */
  }

  .info h4 {
    font-size: 14px; /* nome do circuito */
  }

  .info hr {
    margin: 15px 0; /* reduz a separação */
  }

  .info p {
    font-size: 14px; /* descrição proporcional */
    line-height: 1.65; /* melhora a leitura */
  }
}