/* Topo da home: banner de campanha (painel), título, busca com voz e a
   lista de destaques sobre fundo claro. */

.home-top {
  position: relative;
  background-color: #eef2f8;
  padding-bottom: 5rem;
}

/* ----- Banner ----- */

.home-banner picture,
.home-banner img {
  display: block;
  width: 100%;
}

.home-banner img {
  height: auto;
}

/* Desktop com o topo translúcido por cima (header-overlay): o banner não
   encolhe abaixo de 26rem de altura e corta as laterais (só neons
   decorativos na arte), para o conteúdo da campanha ficar abaixo do topo. */
@media (min-width: 992px) {
  .header-overlay ~ .home-banner img {
    /* 26rem; perto de 992px desce até ~24rem para o conteúdo não encostar
       nas bordas (a arte tem ~85px livres em cima a 1920px) */
    height: max(16.15vw, min(26rem, 24.2vw));
    object-fit: cover;
  }
}

.home-banner .swiper-pagination-bullet-active {
  background: #ea3636;
}

/* ----- Busca ----- */

.home-search {
  padding: 3.2rem 0 0.8rem;
  text-align: center;
}

.home-search h1 {
  margin-bottom: 1.8rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 2.8rem;
  color: #2d3643;
}

.home-search form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  max-width: 98rem;
  margin: 0 auto;
}

.home-search-voice {
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: #ea3636;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.home-search-voice svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: #fff;
}

.home-search-voice:hover {
  background-color: #ba1717;
}

/* Ouvindo: anel pulsante enquanto o navegador capta a fala */
.home-search-voice.is-listening {
  animation: voz-ouvindo 1.2s ease-out infinite;
}

@keyframes voz-ouvindo {
  0% { box-shadow: 0 0 0 0 rgba(234, 54, 54, 0.5); }
  100% { box-shadow: 0 0 0 1.4rem rgba(234, 54, 54, 0); }
}

/* Aviso da busca por voz (sem suporte, microfone bloqueado, nada ouvido) */
.home-search-voice-msg {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #5b6670;
}

.home-search-voice-msg:empty {
  display: none;
}

.home-search-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 5.4rem;
  padding: 0 2rem;
  border-radius: 3rem;
  background-color: #fff;
  cursor: text;
}

.home-search-field svg {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  fill: #ea3636;
}

.home-search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  color: var(--campo-texto);
}

/* Dica animada no lugar do placeholder; some quando há texto digitado */
.home-search-hint {
  position: absolute;
  left: 5.2rem;
  right: 2rem;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font-size: 1.6rem;
  font-weight: 500;
  color: #2d3643;
}

.home-search-hint strong {
  font-weight: 500;
  color: #ea3636;
}

.home-search-field input:not(:placeholder-shown) + .home-search-hint {
  visibility: hidden;
}

#js-typing-word.typing-active::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background: currentColor;
  animation: typing-caret 1s step-end infinite;
}

@keyframes typing-caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* box-sizing: o reset "button { all: unset }" volta para content-box e o
   botão de largura total no celular estourava a tela com o padding */
.home-search .btn {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 5.4rem;
  padding: 0 3.2rem;
  border-radius: 3rem;
  background-color: #ea3636;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.home-search .btn:hover {
  background-color: #ba1717;
}

.home-search-voice:focus-visible,
.home-search .btn:focus-visible,
.home-search-field:focus-within {
  outline: 2px solid #ea3636;
  outline-offset: 2px;
}

/* ----- Destaques sobre fundo claro ----- */

.home-top .featured {
  margin-top: 3.2rem;
}

/* Destaques mais largos que o container padrão (110rem), como no layout:
   até 156rem, sempre com 4,5rem de folga de cada lado para as setas, que
   ficam 35px para fora. */
.home-top .featured .container {
  max-width: min(156rem, calc(100% - 9rem));
}

/* Setas do blog ficam 35px fora do container (110rem):
   até ~1170px saíam da tela e criavam rolagem horizontal. (Os destaques já
   reservam a folga no próprio container.) */
@media (max-width: 1170px) {
  .blog .blog-button-prev {
    left: 0;
  }

  .blog .blog-button-next {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-search-voice.is-listening {
    animation: none;
    background-color: #ba1717;
  }
}

@media (max-width: 767px) {
  .home-search {
    padding-top: 2.4rem;
  }

  .home-search h1 {
    font-size: 2.2rem;
  }

  /* microfone e campo numa linha, botão inteiro embaixo */
  .home-search form {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .home-search-field {
    flex: 1 1 0;
    height: 5rem;
    padding: 0 1.6rem;
  }

  .home-search-hint {
    left: 4.8rem;
    font-size: 1.5rem;
  }

  .home-search .btn {
    flex-basis: 100%;
    justify-content: center;
    height: 5rem;
    font-size: 1.6rem;
  }
}

/* Carrossel de destaques: todos os cards com a mesma altura, mesmo quando
   um tem menos linhas (título curto, sem câmbio...) */
.featuredSwiper .swiper-slide {
  height: auto;
  display: flex;
}

.featuredSwiper .swiper-slide > .item {
  flex: 1;
}

/* Cards de veículo (do time, antes inline na home): borda suave e texto em
   fundo branco.
   "Em Destaque" fica limpo: fundo branco, sem borda */
.private-resales .all .item {
  border: 1px solid #ccc;
}

.private-resales .all .item .desc {
  background: #fff;
}

/* Título em 2 linhas estica o card vizinho na grade; sem isso o link não
   acompanha e sobra uma faixa branca sob o degradê. O :not escapa do botão
   do comparador, que também é <a> mas absoluto sobre a foto */
.private-resales .all .item a:not(.compare-toggle) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.private-resales .all .item .desc {
  flex: 1;
}

/* Capa com a proporção das fotos (4:3) em qualquer largura: a altura fixa
   de 20rem do tema cortava a foto em faixa no mobile e em retalho no desktop */
.featured .item .cover,
.private-resales .all .item .cover {
  height: auto;
  aspect-ratio: 4 / 3;
}