/* styles.css - Versão corrigida para uso com CDN */

/* =========================================
   1. ANIMAÇÃO DO CARROSSEL INFINITO
   ========================================= */

@keyframes scroll-horizontal {
  0% { 
    transform: translateX(0); 
  }
  100% { 
    transform: translateX(-50%); 
  }
}

.animate-infinite-scroll {
  display: flex;
  width: max-content; /* Garante que os elementos fiquem em linha sem quebrar */
  animation: scroll-horizontal 30s linear infinite; /* Ajuste o tempo (30s) para mudar a velocidade */
}

/* Pausa a animação quando o usuário passa o mouse por cima */
.animate-infinite-scroll:hover {
  animation-play-state: paused;
}

/* =========================================
   2. UTILITÁRIOS DE SCROLLBAR (Esconder barra)
   ========================================= */

/* Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* =========================================
   3. CLASSES CUSTOMIZADAS
   (Convertidas de @apply para CSS padrão)
   ========================================= */

.nav-tab-active {
  color: black;
  border-color: black;
}

.nav-tab-inactive {
  color: #9ca3af; /* Equivalente ao text-gray-400 do Tailwind */
  border-color: transparent;
  transition: color 0.3s ease;
}

.nav-tab-inactive:hover {
  color: black;
}

@media (max-width: 768px) {
  .animate-infinite-scroll {
    /* No mobile, a animação precisa ser mais rápida para não parecer travada, 
       já que a distância a percorrer é menor */
    animation-duration: 15s; 
    
    /* Garante que os ícones não fiquem espremidos */
    gap: 2rem; 
  }

  /* Ajuste fino para as imagens dos logos no mobile */
  .animate-infinite-scroll img {
    max-width: 80px; /* Evita que logos muito largos quebrem o layout */
    height: auto;
  }
}