/* Páginas "Em breve" (/falar-com-o-consultor, /financiamento) e visão geral das
   consultas (/consultas) — mesmo tema do site: vermelho #ea3636, escuro #14191d,
   texto #2d3643. */

/* Hero (mesma base do .anuncie-hero) */
.coming-hero {
  background-color: #14191d;
  /* fundo abstrato dos títulos (escuro à esquerda, curvas e vermelho à
     direita) com um véu à esquerda para o texto ler bem */
  background-image: linear-gradient(90deg, rgba(5, 7, 10, 0.78) 0%, rgba(5, 7, 10, 0.6) 40%, rgba(5, 7, 10, 0.12) 68%, rgba(5, 7, 10, 0) 100%),
    url("../img/bg-top-titulos.webp");
  background-size: cover;
  background-position: center;
  padding: 9rem 0 7rem;
}

/* Telas estreitas: a diagonal cobria o título; vira faixa no pé do hero
   (mesma regra do .qv-hero). */
@media (max-width: 991px) {
  .coming-hero {
    /* mostra o lado escuro e as curvas; o vermelho ficaria sob o título */
    background-image: linear-gradient(rgba(5, 7, 10, 0.45), rgba(5, 7, 10, 0.45)),
      url("../img/bg-top-titulos.webp");
    background-position: 30% center;
  }
}

.coming-hero .tag {
  display: inline-block;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: #ea3636;
  border: 1px solid #ea3636;
  border-radius: 3rem;
  padding: 0.8rem 2rem;
  margin-bottom: 2.4rem;
}

.coming-hero h1 {
  font-size: 5.2rem;
  color: #fff;
  max-width: 64rem;
}

.coming-hero h1 strong {
  color: #ea3636;
}

.coming-hero > .container > p {
  font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 52rem;
  margin-top: 1.6rem;
}

.coming-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

.coming-hero .btn {
  border-radius: 3rem;
  padding: 1.6rem 3.6rem;
  font-size: 1.6rem;
  font-family: inherit;
}

.coming-hero .btn-primary {
  background: #ea3636;
  color: #fff;
  transition: filter 0.3s ease;
}

.coming-hero .btn-primary:hover {
  filter: brightness(1.08);
}

/* "Enquanto isso" — o que já dá para fazer hoje */
.coming-meanwhile {
  padding: 8rem 0;
}

.coming-meanwhile h2 {
  font-size: 3.2rem;
  color: #2d3643;
}

.coming-meanwhile .meanwhile-subtitle {
  font-size: 1.8rem;
  color: #5b6672;
  margin-top: 1rem;
}

.meanwhile-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}

.meanwhile-cards a {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #fff;
  border: 1px solid #e5e9ec;
  border-radius: 2rem;
  padding: 3rem;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.meanwhile-cards a:hover {
  border-color: #ea3636;
  transform: translateY(-0.4rem);
}

.meanwhile-cards a strong {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #2d3643;
}

.meanwhile-cards a span {
  font-size: 1.5rem;
  color: #5b6672;
  line-height: 1.5;
}

/* Visão geral das consultas (/consultas) */
.consultas-list {
  padding: 8rem 0;
}

.consultas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.consulta-card {
  /* âncoras do menu (#consulta-de-placa etc.) não ficam escondidas sob o header */
  scroll-margin-top: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #fff;
  border: 1px solid #e5e9ec;
  border-radius: 2rem;
  padding: 3rem;
}

.consulta-badge {
  align-self: flex-start;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ea3636;
  border: 1px solid #ea3636;
  border-radius: 3rem;
  padding: 0.4rem 1.2rem;
}

.consulta-card h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: #2d3643;
}

.consulta-card p {
  font-size: 1.5rem;
  color: #5b6672;
  line-height: 1.5;
}

.consultas-note {
  font-size: 1.6rem;
  color: #5b6672;
  margin-top: 4rem;
}

@media (max-width: 991px) {
  .meanwhile-cards,
  .consultas-grid {
    grid-template-columns: 1fr;
  }

  .coming-hero h1 {
    font-size: 4rem;
  }
}