@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap"); /* Importa a fonte Titillium Web do Google Fonts */

* {
  box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho total do elemento */
}

:root {
  --f1-red: #e10600; /* Vermelho oficial da F1 */
  --f1-black: #15151e; /* Preto/Cinza escuro do tema */
  --f1-dark-gray: #313233;
  --f1-light-gray: #dcdcdc;
  --f1-white: #ffffff;
}

body {
  margin: 0; /* Remove a margem padrão do body */
  background: var(--f1-black); /* Define a cor de fundo usando uma variável */
  color: var(
    --f1-light-gray
  ); /* Define a cor do texto padrão usando uma variável */
  font-family: "Titillium Web", sans-serif; /* Define a família da fonte */
}

/* --- ESTILO DA BARRA DE ROLAGEM --- */
::-webkit-scrollbar {
  width: 10px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-track {
  background: var(--f1-black); /* Cor do fundo da barra */
}

::-webkit-scrollbar-thumb {
  background-color: var(--f1-dark-gray); /* Cor do "polegar" da barra */
  border-radius: 20px; /* Bordas arredondadas */
  border: 2px solid var(--f1-black); /* Borda para dar espaçamento */
}

/* --- FIM DO ESTILO DA BARRA DE ROLAGEM --- */

header {
  padding: 1.5rem 2rem; /* Espaçamento interno ajustado */
  display: flex; /* Habilita o layout flexbox */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  justify-content: space-between; /* Coloca o título à esquerda e a busca à direita */
  position: sticky; /* Mantém o cabeçalho fixo no topo ao rolar a página */
  top: 0; /* Posição do topo quando sticky */
  background: #101015; /* Um preto um pouco mais suave */
  z-index: 10; /* Define a ordem de empilhamento para ficar sobre outros elementos */
  border-bottom: 2px solid var(--f1-red); /* Borda inferior vermelha, estilo F1 */
  gap: 1rem; /* Espaçamento entre os elementos flex */
}

header h1 {
  font-size: 1.75rem; /* Tamanho da fonte aumentado */
  margin: 0; /* Remove a margem padrão */
  font-weight: 700; /* Peso da fonte (bold) */
  white-space: nowrap; /* Impede a quebra de linha do texto */
  text-transform: uppercase; /* Deixa o texto em maiúsculas */
  letter-spacing: 2px; /* Aumenta o espaçamento entre as letras */
  color: var(--f1-white); /* Cor do texto branca */
}

.back-link {
  color: var(--f1-light-gray);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--f1-red);
}

div input,
#busca-equipes,
#busca-pistas,
#busca-glossario {
  padding: 0.375rem 0.75rem; /* Espaçamento interno */
  border-radius: 1rem; /* Arredonda as bordas */
  border: 1px solid var(--f1-dark-gray); /* Define a borda */
  background: var(--f1-black); /* Cor de fundo */
  font-family: inherit; /* Herda a família da fonte do elemento pai */
  /* font-size: 1.5rem; */ /* Tamanho da fonte */
  font-size: 1.2rem;
  transition: all 0.2s ease; /* Adiciona uma transição suave para todas as propriedades */
  width: 15rem; /* Largura do input */
  color: var(--f1-light-gray); /* Cor do texto digitado */
  margin-right: 0.5rem; /* Margem à direita */
}

div input::placeholder,
#busca-equipes::placeholder,
#busca-pistas::placeholder,
#busca-glossario::placeholder {
  font-size: 1.2rem; /* Tamanho da fonte do placeholder */
  font-weight: 300; /* Peso da fonte do placeholder */
  color: var(--f1-dark-gray); /* Cor do texto do placeholder */
}

div input:focus,
#busca-equipes:focus,
#busca-pistas:focus,
#busca-glossario:focus {
  outline: none; /* Remove a borda de foco padrão */
  border-color: var(--f1-red); /* Muda a cor da borda ao focar */
  box-shadow: 0 0 0 0.1rem var(--f1-red); /* Adiciona uma sombra de caixa para indicar foco */
}

#botao-busca,
#botao-busca-equipes,
#botao-busca-pistas,
#botao-busca-glossario {
  padding: 1rem 2rem; /* Espaçamento interno */
  border-radius: 1rem; /* Arredonda as bordas */
  border: none; /* Remove a borda padrão */
  cursor: pointer; /* Muda o cursor para uma mão ao passar por cima */
  font-family: inherit; /* Herda a família da fonte */
  font-weight: 600; /* Peso da fonte */
  font-size: 1rem; /* Tamanho da fonte */
  white-space: nowrap; /* Impede a quebra de linha do texto */
  transition:
    background-color 0.2s ease,
    color 0.2s ease; /* Transição suave para cor de fundo e cor do texto */
  background-color: var(--f1-red); /* Cor de fundo */
  color: var(--f1-white); /* Cor do texto */
  border: 1px solid var(--f1-red); /* Adiciona uma borda */
  text-decoration: none;
}

#botao-busca:hover,
#botao-busca-equipes:hover,
#botao-busca-pistas:hover,
#botao-busca-glossario:hover {
  background-color: var(--f1-white); /* Muda a cor de fundo ao passar o mouse */
  color: var(--f1-red); /* Muda a cor do texto ao passar o mouse */
  box-shadow: 0 0 0 0.1rem var(--f1-white); /* Adiciona uma sombra de caixa */
}

#botao-busca:active,
#botao-busca-equipes:active,
#botao-busca-pistas:active,
#botao-busca-glossario:active {
  transform: scale(0.98); /* Efeito de clique (diminui o tamanho) */
}

main {
  width: 100%;
  max-width: 1400px; /* Limita a largura máxima do conteúdo principal */
  margin: 0 auto; /* Centraliza o conteúdo principal */
  padding: 2rem 1rem; /* Adiciona espaçamento interno */
  flex-grow: 1; /* Faz o main ocupar o espaço vertical disponível */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  align-content: start; /* Impede que os cards se estiquem verticalmente */
}

/* Estilo específico para a grade de pistas */
#pistas-container.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

article {
  background: #1f2029; /* Cor de fundo do card */
  display: flex; /* ATIVADO: Alinha imagem e texto lado a lado */
  gap: 1.5rem; /* Espaçamento entre a imagem e o texto */
  border-radius: 8px; /* Bordas arredondadas */
  padding: 1.5rem; /* Espaçamento interno */
  margin-bottom: 1.25rem; /* Margem inferior */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; /* Transição suave */
  border-left: 4px solid var(--f1-red); /* Detalhe lateral com a cor primária */
}

.card-image-container {
  width: 150px; /* Largura fixa para o contêiner da imagem */
  flex-shrink: 0; /* Impede que o contêiner da imagem encolha */
  height: 150px; /* Altura fixa para criar um quadrado */
  border-radius: 50%; /* Deixa a imagem redonda */
  overflow: hidden; /* Esconde as partes da imagem que saem do contêiner */
}

.card-image {
  width: 100%; /* Faz a imagem preencher o contêiner */
  height: 100%; /* Faz a imagem preencher o contêiner */
  object-fit: cover; /* Redimensiona a imagem para cobrir o espaço, cortando o excesso */
  object-position: top; /* Alinha a imagem pelo topo, mostrando do tronco para cima */
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

article:hover {
  transform: scale(1.01); /* Aumenta ligeiramente o tamanho ao passar o mouse */
  cursor: pointer; /* Muda o cursor para uma mão */
}

article h2 {
  margin-top: 0; /* Remove a margem superior */
  font-weight: 600; /* Peso da fonte */
  font-size: 1.6rem; /* Tamanho da fonte */
  border-bottom: none; /* Sem borda inferior */
  padding-bottom: 0; /* Sem espaçamento interno inferior */
  margin-bottom: 0.25rem; /* Margem inferior */
  color: inherit; /* Herda a cor do elemento pai (o card) */
}

article p {
  margin: 0.5rem 0; /* Margem superior e inferior */
  line-height: 1.6; /* Altura da linha para melhor legibilidade */
  font-size: 1rem; /* Tamanho da fonte */
  margin-bottom: 0.5rem; /* Margem inferior */
  color: var(--f1-light-gray); /* Cor do texto */
}

article p strong {
  color: var(--f1-white); /* Cor do texto em negrito */
  font-weight: 600; /* Peso da fonte */
}

.titulos-lista {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
}

.titulos-lista li {
  background-color: rgba(0, 0, 0, 0.2);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin: 0.2rem 0.3rem 0.2rem 0;
}

.no-results {
  text-align: center;
  font-size: 1.2rem;
  padding: 3rem;
  /* Garante que a mensagem ocupe toda a largura do grid */
  grid-column: 1 / -1;
}

.footer-fixed {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.footer {
  /* position, bottom, left removidos para um rodapé estático no final da página */
  width: 100%;
  color: var(--f1-light-gray);
  background-color: #101015; /* Mesma cor do cabeçalho */
  padding: 1rem 2rem; /* Diminui o espaçamento vertical (altura) */
  border-top: 2px solid var(--f1-red); /* Borda superior vermelha, combinando com o header */
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-location {
  color: var(--f1-dark-gray);
  margin: 0; /* Remove margens */
}

.footer-links {
  list-style: none; /* Remove os marcadores da lista */
  display: flex; /* Habilita o layout flexbox */
  flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
  gap: 25px; /* Aumenta o espaçamento entre os links */
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--f1-light-gray); /* Cor do link */
  text-decoration: none; /* Remove o sublinhado */
  transition: color 0.2s; /* Transição suave para a cor */
}

.footer-links a:hover {
  color: var(--f1-red); /* Muda a cor do link ao passar o mouse */
}

@media (max-width: 768px) {
  header {
    /* Estilos para telas com largura máxima de 768px */
    flex-direction: column;
    position: static; /* Remove a posição "sticky" */
    padding: 1rem;
    gap: 0.75rem;
  }

  main {
    padding: 1rem;
  }

  header h1 {
    /* Estilos para o h1 no cabeçalho em telas menores */
    text-align: center;
    margin-bottom: 1rem; /* Adiciona margem inferior */
  }

  div input,
  #busca-equipes,
  #busca-pistas,
  #busca-glossario {
    width: 70vw; /* Largura baseada na largura da viewport */
  }

  article {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .card-content {
    align-items: center;
  }

  article:hover {
    /* Estilos para o article em telas menores */
    transform: none; /* Remove o efeito de escala ao passar o mouse */
  }

  .footer {
    position: static; /* Garante que o rodapé não seja fixo */
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 480px) {
  main {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  header h1 {
    /* Estilos para o h1 em telas com largura máxima de 480px */
    font-size: 1rem; /* Reduz ainda mais o tamanho da fonte */
    max-width: 70%; /* Define uma largura máxima */
    word-wrap: break-word; /* Permite a quebra de palavras longas */
  }

  div input,
  #busca-equipes,
  #busca-pistas,
  #busca-glossario,
  div input::placeholder,
  #busca-equipes::placeholder,
  #busca-pistas::placeholder,
  #busca-glossario::placeholder {
    font-size: 1rem; /* Reduz o tamanho da fonte */
  }

  article h2 {
    /* Estilos para o h2 do article em telas muito pequenas */
    font-size: 1.3rem; /* Reduz o tamanho da fonte */
  }

  div {
    /* Estilos para a div do cabeçalho em telas muito pequenas */
    display: flex; /* Habilita flexbox */
    align-items: center; /* Alinha itens ao centro */
    justify-content: center; /* Centraliza itens */
    flex-direction: column; /* Organiza em coluna */
    gap: 0.5rem; /* Espaçamento entre os itens */
  }

  .footer {
    text-align: center; /* Centraliza o texto do rodapé */
  }

  button {
    /* Estilos para o botão em telas muito pequenas */
    margin-top: 1rem; /* Adiciona margem no topo */
  }

  #pistas-container.grid-container {
    grid-template-columns: 1fr;
  }

  .pista-card-content h2 {
    font-size: 1.3rem;
  }
  .pista-card-content p {
    font-size: 0.85rem;
  }
}

/* --- ESTILOS DO GLOSSÁRIO --- */
.glossario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  align-content: start; /* Impede que os cards se estiquem verticalmente */
}

.card-glossario {
  background-color: #1f2029;
  border: 1px solid #313233;
  border-left: 4px solid var(--f1-red);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card-glossario:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.card-glossario h3 {
  color: var(--f1-white);
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
}

.card-glossario p {
  margin: 0;
  line-height: 1.6;
  color: var(--f1-light-gray);
}
/* --- FIM DOS ESTILOS DO GLOSSÁRIO --- */

/* --- ESTILOS DO MODAL --- */
.modal {
  display: none; /* Oculto por padrão */
  position: fixed; /* Fica fixo na tela */
  z-index: 100; /* Fica na frente de tudo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Permite rolagem se o conteúdo for grande */
  background-color: rgba(0, 0, 0, 0.8); /* Fundo preto semi-transparente */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: #1f2029;
  margin: auto;
  padding: 2rem;
  border-top: 4px solid var(--f1-red);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.4s ease-out;
}

.close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: var(--f1-red);
}

.modal-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  border: 3px solid var(--f1-dark-gray);
}

.modal-content h2 {
  font-size: 2rem;
  color: var(--f1-white);
  margin-top: 0;
}

.modal-titulos {
  clear: both;
  padding-top: 1rem;
}

.modal-f1-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--f1-red);
  color: var(--f1-white);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.modal-f1-link:hover {
  background-color: #a80000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- CORES DAS EQUIPES --- */

/* Scuderia Ferrari */
.scuderia-ferrari h2 {
  color: #dc0000;
}
.scuderia-ferrari {
  background: linear-gradient(135deg, #1f2029 60%, #500000);
  border-left-color: #dc0000;
}

/* Oracle Red Bull Racing */
.oracle-red-bull-racing h2 {
  color: #ffc900;
}
.oracle-red-bull-racing {
  background: linear-gradient(135deg, #1f2029 60%, #0f1a3e);
  border-left-color: #cc1e4a;
}

/* McLaren F1 Team */
.mclaren-f1-team h2 {
  color: #ff8700;
}
.mclaren-f1-team {
  background: linear-gradient(135deg, #1f2029 60%, #b05200);
  border-left-color: #ff8700;
}

/* Mercedes-AMG Petronas F1 Team */
.mercedes-amg-petronas-f1-team h2 {
  color: #00a19b;
}
.mercedes-amg-petronas-f1-team {
  background: linear-gradient(135deg, #1f2029 60%, #006b64);
  border-left-color: #00a19b;
}

/* Williams Racing */
.williams-racing h2 {
  color: #00a0dd;
}
.williams-racing {
  background: linear-gradient(135deg, #1f2029 60%, #003b7f);
  border-left-color: #005aff;
}

/* Stake F1 Team Kick Sauber (futura Audi) */
.stake-f1-team-kick-sauber h2 {
  color: #00ff00;
}
.stake-f1-team-kick-sauber {
  background: linear-gradient(135deg, #1f2029 60%, #004225);
  border-left-color: #00ff00;
}

/* Haas F1 Team */
.haas-f1-team h2 {
  color: #e10600;
}
.haas-f1-team {
  background: linear-gradient(135deg, #1f2029 60%, #4e5052);
  border-left-color: #b6babd;
}

/* BWT Alpine F1 Team */
.bwt-alpine-f1-team h2 {
  color: #0090ff;
}
.bwt-alpine-f1-team {
  background: linear-gradient(135deg, #1f2029 60%, #005094);
  border-left-color: #ff80c7;
}

/* Visa Cash App Racing Bulls */
.visa-cash-app-racing-bulls h2 {
  color: #c80000;
}
.visa-cash-app-racing-bulls {
  background: linear-gradient(135deg, #1f2029 60%, #001e6a);
  border-left-color: #0032ff;
}

/* Aston Martin Aramco F1 Team */
.aston-martin-aramco-f1-team h2 {
  color: #bdff00;
}
.aston-martin-aramco-f1-team {
  background: linear-gradient(135deg, #1f2029 60%, #003830);
  border-left-color: #006f62;
}

/* --- FIM DAS CORES DAS EQUIPES --- */

/* --- ESTILOS DA PÁGINA DE EQUIPES --- */
.team-grid-container {
  display: grid;
  /* Usando auto-fill para manter o tamanho dos cards consistente */
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 6rem 2.5rem; /* Aumenta o espaço vertical (primeiro valor) */
  padding: 6rem 1rem 2rem; /* Adiciona mais preenchimento no topo */
  max-width: 1400px;
  margin: 0 auto;
  align-content: start; /* Impede que os cards se estiquem verticalmente */
}

.team-card,
a.team-card {
  background: #1f2029;
  border-radius: 8px;
  overflow: visible; /* Permite que a imagem do carro saia para fora */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 100px; /* Espaço para a imagem do carro vazar para fora */
  text-decoration: none;
  border-bottom: 4px solid var(--f1-red); /* Cor padrão */
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.team-card-car-image-container {
  position: absolute;
  top: -60px; /* Puxa a imagem para cima, para fora do card */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 1;
  text-align: center;
}

.team-card-car-image {
  width: 100%;
  /* Efeito para remover fundos brancos ou pretos simples */
  mix-blend-mode: screen;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}

.team-card:hover .team-card-car-image {
  transform: scale(1.05);
}

.team-card-car-image-container h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--f1-white);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.team-card-drivers {
  display: flex;
  justify-content: space-around;
  padding: 1.5rem;
  gap: 1rem;
}

.team-driver {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-driver-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--f1-dark-gray);
  margin-bottom: 0.75rem;
}

.team-driver-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--f1-light-gray);
}

/* Aplicando as cores da borda do header do card da equipe */
.team-card.scuderia-ferrari {
  border-color: #dc0000;
  background: linear-gradient(to bottom, #1f2029 70%, #500000);
}
.team-card.oracle-red-bull-racing {
  border-color: #cc1e4a;
  background: linear-gradient(to bottom, #1f2029 70%, #0f1a3e);
}
.team-card.mclaren-f1-team {
  border-color: #ff8700;
  background: linear-gradient(to bottom, #1f2029 70%, #b05200);
}
.team-card.mercedes-amg-petronas-f1-team {
  border-color: #00a19b;
  background: linear-gradient(to bottom, #1f2029 70%, #006b64);
}
.team-card.williams-racing {
  border-color: #005aff;
  background: linear-gradient(to bottom, #1f2029 70%, #003b7f);
}
.team-card.stake-f1-team-kick-sauber {
  border-color: #00ff00;
  background: linear-gradient(to bottom, #1f2029 70%, #004225);
}
.team-card.haas-f1-team {
  border-color: #b6babd;
  background: linear-gradient(to bottom, #1f2029 70%, #4e5052);
}
.team-card.bwt-alpine-f1-team {
  border-color: #ff80c7;
  background: linear-gradient(to bottom, #1f2029 70%, #005094);
}
.team-card.visa-cash-app-racing-bulls {
  border-color: #0032ff;
  background: linear-gradient(to bottom, #1f2029 70%, #001e6a);
}
.team-card.aston-martin-aramco-f1-team {
  border-color: #006f62;
  background: linear-gradient(to bottom, #1f2029 70%, #003830);
}

@media (max-width: 900px) {
  /* Ajusta a grade para 2 colunas em tablets, em vez de 1 */
  .team-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem 1rem;
    padding-top: 4rem;
  }
  .team-card-drivers {
    flex-direction: row; /* Garante que os pilotos fiquem lado a lado */
    align-items: flex-start;
  }

  .team-card-car-image-container h3 {
    font-size: 1.2rem;
  }
}

/* --- FIM DOS ESTILOS DA PÁGINA DE EQUIPES --- */
@media (max-width: 480px) {
  /* Em telas muito pequenas, volta para uma coluna para não quebrar o layout */
  .team-grid-container {
    grid-template-columns: 1fr;
  }
}

/* --- ESTILOS DA PÁGINA DE PISTAS --- */
.pista-card {
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background-color: var(--f1-dark-gray);
  overflow: hidden; /* Garante que a imagem não vaze para fora das bordas arredondadas */
}

.pista-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.pista-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pista-card-image {
  width: 100%;
  height: 250px; /* Altura da imagem do card */
  object-fit: contain; /* Garante que a imagem inteira apareça */
  display: block;
  transition: transform 0.3s ease;
}

.pista-card:hover .pista-card-image {
  transform: scale(0.9); /* Zoom mais sutil na imagem */
}

.pista-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 30%,
    rgba(0, 0, 0, 0.6) 60%,
    transparent
  );
  padding: 2rem 1rem 1rem;
  color: var(--f1-white);
}

.pista-card-content h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--f1-white);
  border-bottom: 2px solid var(--f1-red);
  padding-bottom: 0.25rem;
  display: inline-block;
}

.pista-card-content p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--f1-light-gray);
}

.pista-card-content ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.home-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: transparent;
}

.home-main h2 {
  font-size: 3.5rem;
  color: var(--f1-white);
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.8s ease-out forwards;
}

.home-main p {
  font-size: 1.3rem;
  color: var(--f1-light-gray);
  max-width: 600px;
  margin-bottom: 2rem;
  line-height: 1.6;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.8s ease-out 0.2s forwards;
  opacity: 0; /* Começa invisível para a animação */
}

.home-buttons {
  display: flex;
  gap: 1.5rem;
  animation: slideUp 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

.home-buttons a {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  text-decoration: none;
}

.home-buttons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(225, 6, 0, 0.4);
}

@media (max-width: 768px) {
  .home-main h2 {
    font-size: 2.5rem;
  }
  .home-main p {
    font-size: 1.1rem;
  }
  .home-buttons {
    flex-direction: column;
  }
}