/* CONFIGURACOES GERAIS */
* {
  margin: 0; /* remove as margens padrão */
  padding: 0; /* remove os espaçamentos internos padrão */
  box-sizing: border-box; /* inclui padding e borda no tamanho total */
}
body {
  font-family: Arial, Helvetica, sans-serif; /* define a fonte principal */
  background: #000000; /* define o fundo preto */
}

/* HERO */
.hero {
  min-height: 650px; /* altura mínima da seção */
  background:linear-gradient(to bottom, rgba(0, 0, 0, 0.452) 0%,rgba(0, 0, 0, 0.527) 35%,rgba(0, 0, 0, 0.685) 65%,rgb(0, 0, 0) 100%),url("../IMAGENS/CARROS/f1inicio.png"); /* imagem com camada escura */
  background-size: cover; /* cobre toda a seção */
  background-position: center; /* centraliza a imagem */
  background-repeat: no-repeat; /* impede repetição */
  display: flex; /* ativa o Flexbox */
  align-items: center; /* centraliza verticalmente */
  padding: 120px 80px 80px; /* espaço interno */
}

.hero-texto {
  width: 45%; /* ocupa 45% da seção */
  color: white; /* texto branco */
  max-width: 700px; /* largura máxima */
}

.hero-texto h1 {
  font-size: 110px; /* tamanho do título */
  font-style: italic; /* deixa em itálico */
  margin-bottom: 20px; /* espaço abaixo */
  color: #ffffff; /* título branco */
  text-shadow:
    0 0 10px rgba(23, 87, 197, 0.5),
    0 0 20px rgba(6, 6, 239, 0.685); /* brilho azul */
}

.hero-texto p {
  font-size: 22px; /* tamanho do texto */
  line-height: 1.8; /* espaço entre linhas */
  margin-bottom: 30px; /* espaço abaixo */
}

.botao {
  background: rgb(1, 6, 139); /* fundo azul */
  color: white; /* texto branco */
  text-decoration: none; /* remove sublinhado */
  padding: 15px 30px; /* espaço interno */
  border-radius: 10px; /* arredonda os cantos */
  font-weight: bold; /* negrito */
  transition: 0.3s; /* suaviza os efeitos */
}

.botao:hover {
  background: #004ecc; /* muda a cor ao passar o mouse */
}

.hero-imagem img {
  width: 700px; /* largura da imagem */
}

/* CARDS */

.cards {
  width: 90%; /* ocupa 90% da largura */
  margin: 40px auto 50px; /* centraliza e cria espaçamento */
  display: grid; /* ativa o Grid Layout */
  grid-template-columns: repeat(4, 1fr); /* cria quatro colunas iguais */
  gap: 20px; /* espaço entre cards */
  color: white; /* cor do texto */
}

.card {
  background: #000000; /* fundo preto */
  padding: 30px; /* espaço interno */
  border-radius: 15px; /* arredonda os cantos */
  text-align: center; /* centraliza o conteúdo */
  box-shadow: 0 5px 15px rgb(126, 126, 126); /* sombra cinza */
}

.card h3 {
  color: rgb(254, 254, 254); /* título branco */
  margin-bottom: 15px; /* espaço abaixo */
}

.card i {
  font-size: 50px; /* tamanho do ícone */
  color: #007bff; /* ícone azul */
  margin-bottom: 15px; /* espaço abaixo */
}

/* SOBRE */

.sobre {
  display: flex; /* coloca texto e imagem lado a lado */
  justify-content: space-between; /* distribui os elementos */
  align-items: center; /* centraliza verticalmente */
  gap: 50px; /* espaço entre elementos */
  padding: 50px 80px; /* espaço interno */
}

.sobre-texto {
  width: 50%; /* ocupa metade da largura */
}

.sobre-texto h2 {
  font-size: 50px; /* tamanho do subtítulo */
  margin-bottom: 20px; /* espaço abaixo */
  color: #ffffff; /* texto branco */
}

.sobre-texto p {
  font-size: 20px; /* tamanho do texto */
  line-height: 1.8; /* espaço entre linhas */
  color: #ffffff; /* texto branco */
}

.frase {
  margin-top: 25px; /* espaço acima */
  border: 2px solid #0066ff; /* borda azul */
  padding: 20px; /* espaço interno */
  border-radius: 10px; /* arredonda os cantos */
  font-weight: bold; /* deixa em negrito */
  color: #ffffff; /* texto branco */
}

.sobre-imagem img {
  width: 600px; /* largura da imagem */
  border-radius: 20px; /* arredonda os cantos */
}

@media (max-width: 820px) {
  /* BANNER */
  .hero {
    min-height: 550px; /* adapta a altura */
    padding: 120px 30px 70px; /* espaçamento interno */
    background-position: center; /* centraliza o fundo */
  }
  .hero-texto {
    width: 100%; /* ocupa a largura disponível */
    max-width: 600px; /* limita o texto */
  }
  .hero-texto h1 {
    font-size: 65px; /* diminui o título */
  }
  .hero-texto p {
    font-size: 18px; /* adapta o parágrafo */
    line-height: 1.7; /* melhora a leitura */
  }

  /* CARDS */
  .cards {
    width: 90%; /* mantém margens laterais */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* duas colunas */
    gap: 15px; /* aproxima os cards */
  }

  .card {
    padding: 25px 15px; /* reduz o espaçamento */
  }

  /* SOBRE A FÓRMULA 1 */
  .sobre {
    flex-direction: column; /* texto acima da imagem */
    align-items: stretch; /* ocupa a largura */
    padding: 45px 30px; /* margens menores */
    gap: 30px; /* separação */
  }
  .sobre-texto {
    width: 100%; /* texto ocupa toda a largura */
  }
  .sobre-texto h2 {
    font-size: 35px; /* adapta o título */
  }
  .sobre-texto p {
    font-size: 18px; /* adapta o parágrafo */
  }
  .sobre-imagem {
    width: 100%; /* área da imagem ocupa a largura */
  }
  .sobre-imagem img {
    width: 100%; /* adapta a imagem */
    height: auto; /* mantém proporção */
  }

}

/* CELULARES */

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

  .hero {
    min-height: 500px; /* altura adaptada */
    padding: 110px 20px 60px; /* margens menores */
    background-position: center; /* centraliza imagem */
  }

  .hero-texto {
    width: 100%; /* ocupa todo o espaço */
    max-width: 100%; /* impede ultrapassar */
  }

  .hero-texto h1 {
    font-size: clamp(42px, 13vw, 58px); /* título proporcional */
    line-height: 1.1; /* altura das linhas */
    margin-bottom: 20px; /* espaço abaixo */
  }

  .hero-texto p {
    font-size: 15px; /* texto legível */
    line-height: 1.7; /* melhora o espaçamento */
    margin-bottom: 25px; /* espaço antes do botão */
  }

  /* BOTÃO DO BANNER */

  .hero .botao {
    display: inline-block; /* permite definir largura */
    max-width: 100%; /* não ultrapassa o celular */
    padding: 14px 18px; /* adapta o espaço interno */
    font-size: 12px; /* diminui o texto */
    text-align: center; /* centraliza */
    line-height: 1.5; /* permite quebrar linhas */
  }

  /* CARDS INFORMATIVOS */

  .cards {
    width: 100%; /* ocupa o espaço disponível */
    grid-template-columns: 1fr; /* um card por linha */
    padding: 0 20px; /* margens laterais */
    margin: 30px auto 40px; /* espaço entre seções */
    gap: 20px; /* distância entre cards */
  }

  .card {
    padding: 30px 20px; /* mantém espaço confortável */
  }

  .card i {
    font-size: 42px; /* adapta os ícones */
  }

  .card h3 {
    font-size: 20px; /* ajusta o título */
  }

  .card p {
    font-size: 15px; /* ajusta a descrição */
    line-height: 1.6; /* melhora a leitura */
  }

  /* SOBRE A FÓRMULA 1 */

  .sobre {
    padding: 40px 20px; /* reduz as margens */
    gap: 25px; /* separação entre texto e imagem */
  }

  .sobre-texto h2 {
    font-size: 29px; /* adapta o título */
    line-height: 1.25; /* melhora a leitura */
  }

  .sobre-texto p {
    font-size: 15px; /* adapta o texto */
    line-height: 1.7; /* melhora a leitura */
  }

  /* FRASE DE DESTAQUE */
  .frase {
    margin-top: 20px; /* espaço superior */
    padding: 18px; /* espaço interno */
    font-size: 14px; /* adapta a fonte */
    line-height: 1.6; /* melhora a leitura */
  }

  /* IMAGEM DA SEÇÃO SOBRE */
  .sobre-imagem img {
    width: 100%; /* acompanha a largura */
    max-width: 100%; /* evita ultrapassar a tela */
    height: auto; /* preserva a imagem */
    border-radius: 15px; /* mantém cantos arredondados */
  }
}