/**
 * Brands Carousel - CSS Principal
 * Version: 1.0.0
 */

.brands-section-title { 
  line-height: 1; 
  margin: 0; 
  padding: 0; 
}

.brands-section-text { 
  font-family: "Montserrat", Sans-serif; 
  font-size: 15px; 
  font-weight: 500; 
  color: #4B4B4B; 
}

.brands-section-center { 
  justify-content: center; 
}

/* Container principal - height fixo para evitar pulos */
.brands-main-container {
  min-height: 120px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Seta clicável */
.brands-expand-arrow { 
  cursor: pointer; 
  transition: all 0.5s ease; 
  padding: 8px; 
  border-radius: 50%; 
  background: none;
  border: none;
}

.brands-expand-arrow:hover { 
  transform: scale(1.15); 
}

.brands-expand-arrow:hover svg { 
  fill: #666 !important; 
}

.brands-expand-arrow svg { 
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); 
}

.brands-expand-arrow.expanded svg { 
  transform: rotate(180deg); 
}

/* Texto dinâmico - fade melhorado */
.brands-dynamic-text { 
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.brands-dynamic-text.fade-out { 
  opacity: 0; 
}

/* Carrossel infinito com velocidades responsivas */
.brands-logos-scroll-container { 
  overflow: hidden; 
  position: relative; 
  height: 100px;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brands-logos-scroll-container.hidden {
  opacity: 0;
  pointer-events: none;
}

.brands-logos-track { 
  display: flex; 
  align-items: center; 
  height: 100%; 
  width: fit-content;
  animation: brandsInfiniteScrollDesktop 50s linear infinite;
}

.brands-logos-track.paused { 
  animation-play-state: paused; 
}

.brands-logo-col { 
  flex-shrink: 0; 
  cursor: pointer; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  filter: grayscale(100%); 
  opacity: 0.8; 
  margin: 0 20px; 
}

.brands-logo-col img { 
  max-width: 100%; 
  height: auto; 
  max-height: 80px; 
  object-fit: contain; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

.brands-logo-col:hover { 
  transform: scale(1.2) translateY(-8px); 
  filter: grayscale(0%); 
  opacity: 1; 
  z-index: 100; 
  position: relative; 
}

.brands-logo-col:hover img { 
  border-radius: 8px; 
}

/* Área expansível com transição suave */
.brands-additional-logos { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.brands-additional-logos.expanded { 
  max-height: 1500px; 
}

.brands-additional-logos-content { 
  opacity: 0; 
  transform: translateY(-20px); 
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
  padding: 40px 0; 
}

.brands-additional-logos.expanded .brands-additional-logos-content { 
  opacity: 1; 
  transform: translateY(0); 
}

.brands-additional-logo-item { 
  border-radius: 12px; 
  padding: 20px; 
  text-align: center; 
  cursor: pointer; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  filter: grayscale(100%); 
  opacity: 0.8; 
  height: 90px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 20px; 
}

.brands-additional-logo-item:hover { 
  transform: scale(1.07) translateY(-5px); 
  filter: grayscale(0%); 
  opacity: 1; 
}

/* Animações com velocidades responsivas */
@keyframes brandsInfiniteScrollDesktop {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes brandsInfiniteScrollMobile {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* Fade nas extremidades */
.brands-logos-scroll-container::before,
.brands-logos-scroll-container::after {
  content: '';
  position: absolute; 
  top: 0; 
  width: 80px; 
  height: 100%; 
  z-index: 10; 
  pointer-events: none;
}

.brands-logos-scroll-container::before { 
  left: 0; 
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
}

.brands-logos-scroll-container::after { 
  right: 0; 
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
}

/* Acessibilidade: respeita preferência do usuário */
@media (prefers-reduced-motion: reduce) {
  .brands-logos-track { 
    animation: none !important; 
  }
  .brands-dynamic-text,
  .brands-expand-arrow,
  .brands-logo-col,
  .brands-additional-logo-item {
    transition: none !important;
  }
}

/* RESPONSIVO MELHORADO */
@media (max-width: 768px) {
  /* Layout mobile sem pulos */
  .row.brands-main-row { 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }
  
  .brands-col-text { 
    order: 1 !important; 
    text-align: center !important; 
    width: 100% !important;
    padding: 0 20px !important;
  }
  
  .brands-col-carousel { 
    order: 2 !important; 
    width: 100% !important;
  }
  
  .brands-col-arrow { 
    order: 3 !important; 
    display: flex !important; 
    justify-content: center !important;
    width: 100% !important;
  }

  /* Texto menor no mobile */
  .brands-section-text { 
    font-size: 14px !important; 
    line-height: 1.3 !important;
  }

  /* Carrossel mais lento no mobile */
  .brands-logos-track {
    animation: brandsInfiniteScrollMobile 80s linear infinite !important;
  }
  
  /* Logos menores no mobile */
  .brands-logo-col { 
    margin: 0 15px !important; 
  }
  
  .brands-logo-col img { 
    max-height: 60px !important; 
  }
  
  /* Container menor */
  .brands-logos-scroll-container { 
    height: 80px !important; 
  }

  /* Fade mais sutil no mobile */
  .brands-logos-scroll-container::before,
  .brands-logos-scroll-container::after {
    width: 40px !important;
  }

  /* Container principal menor */
  .brands-main-container {
    min-height: 100px !important;
  }
}

/* Mobile muito pequeno */
@media (max-width: 480px) {
  .brands-section-text { 
    font-size: 13px !important; 
  }
  
  .brands-logo-col { 
    margin: 0 12px !important; 
  }
  
  .brands-logo-col img { 
    max-height: 50px !important; 
  }
  
  .brands-logos-scroll-container { 
    height: 70px !important; 
  }

  /* Ainda mais lento em telas muito pequenas */
  .brands-logos-track {
    animation: brandsInfiniteScrollMobile 100s linear infinite !important;
  }
}