@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

/* --- MARCAS --- */
.brand-bg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand-text {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-size: 23vw;
  font-weight: 900;
  color: #EAEBF0;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 0.8;
  margin: 0;
  opacity: 0;
}

#brand-old {
  opacity: 1;
}

/* --- CONTEÚDO --- */
.hero-text-content,
.car-wrapper {
  position: absolute;
  padding-top: 12vh;
  width: 100%;
  transition: all 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ESTADOS DOS CONJUNTOS --- */
.group-hidden-right {
  opacity: 0;
  transform: translateX(200px);
  pointer-events: none;
}

.group-hidden-left {
  opacity: 0;
  transform: translateX(-800px);
  pointer-events: none;
}

.car-hidden-small {
  opacity: 0;
  transform: scale(0.2);
}

.car-hidden-right {
  opacity: 1;
  transform: translateX(600px) scale(0.3);
}

/* --- ANIMAÇÕES DE MARCA --- */
@keyframes brandSlideUpOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(300px);
    opacity: 0;
  }
}

@keyframes brandSlideUpIn {
  0% {
    transform: translateY(-300px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes brandSlideDownOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-300px);
    opacity: 0;
  }
}

@keyframes brandSlideDownIn {
  0% {
    transform: translateY(300px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.brand-anim-out {
  animation: brandSlideUpOut 1.8s forwards;
}

.brand-anim-in {
  animation: brandSlideUpIn 1.8s forwards;
}

.brand-anim-out-reverse {
  animation: brandSlideDownOut 1.8s forwards;
}

.brand-anim-in-reverse {
  animation: brandSlideDownIn 1.8s forwards;
}

/* Layout Geral */
.hero-title-main {
  color: #A2001D;
}

.nav-arrows {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
}

.btn-nav {
  background: white;
  border: 1px solid #100E34;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-nav:disabled {
  opacity: 0.2;
  cursor: default;
}


/* ================== Atualização Responsiva ====================== */
/* 1. Resolve o problema de um texto 'empurrar' o outro no mobile */
.hero-text-content {
  top: 12vh !important;
  /* Fixa a altura do topo para ambos os grupos */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 2. Garante que o container da coluna tenha altura para não deixar o carro subir demais */
@media (max-width: 991px) {
  .col-lg-6.position-relative {
    min-height: 450px !important;
    /* Dá espaço para o texto e botão respirarem */
  }
}

/* 3. Centraliza as divs internas de texto que usam d-flex */
.hero-text-content .d-flex {
  justify-content: center !important;
  /* Alinha o 'Carro dos Sonhos' ao centro */
}

/* 4. Ajuste do botão para não ficar 'colado' ou torto */
.hero-btn-custom {
  display: inline-block;
  margin-top: 20px !important;
}