/* ── Brands Carousel ──────────────────────────────────────── */
.brands-section {
  padding: 1.2rem 0;
  background: var(--black-card);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.brands-track-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.brands-track {
  display: flex;
  gap: 1.5rem; /* Espaciado consistente entre marcas */
  width: max-content;
  animation: scroll 45s linear infinite; /* Duración ajustada para 25 items */
  will-change: transform; /* Optimización de rendimiento */
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% porque hay 2 sets idénticos */
}

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

/* Cada mitad del track (opcional, si usas estructura con .brands-set) */
.brands-set {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  flex-shrink: 0;
  min-width: 90px; /* Ancho mínimo para consistencia */
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
  cursor: default;
}

.brand-item:hover { 
  background: rgba(212,168,67,0.07);
  transform: scale(1.03);
}

/* Contenedor del logo SVG */
.brand-item .brand-logo {
  height: 32px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-item svg {
  height: 100%;
  max-width: 80px;
  width: auto;
  fill: var(--text-gray);
  color: var(--text-gray);
  transition: fill 0.2s, filter 0.2s;
  flex-shrink: 0;
}

.brand-item:hover svg {
  fill: var(--gold-primary);
  color: var(--gold-primary);
  filter: drop-shadow(0 0 6px rgba(212,168,67,0.5));
}

.brand-item span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dark);
  transition: color 0.2s;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

.brand-item:hover span { 
  color: var(--gold-primary); 
}

/* Separador opcional entre marcas */
.brand-sep {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
  margin: 0 0.5rem;
}

/* Tema claro */
[data-theme="light"] .brands-section { 
  background: #efefef; 
}

[data-theme="light"] .brand-item span {
  color: #333;
}

/* Responsive: Tablets */
@media (max-width: 768px) {
  .brands-track {
    gap: 1rem;
    animation-duration: 35s;
  }
  
  .brand-item {
    min-width: 75px;
    padding: 6px 12px;
    gap: 4px;
  }
  
  .brand-item .brand-logo {
    height: 28px;
  }
  
  .brand-item span {
    font-size: 8px;
  }
}

/* Responsive: Móviles */
@media (max-width: 480px) {
  .brands-section {
    padding: 0.8rem 0;
  }
  
  .brands-track {
    gap: 0.75rem;
    animation-duration: 28s;
  }
  
  .brand-item {
    min-width: 65px;
    padding: 4px 10px;
    gap: 3px;
  }
  
  .brand-item .brand-logo {
    height: 24px;
  }
  
  .brand-item svg {
    max-width: 60px;
  }
  
  .brand-item span {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .brands-track { 
    animation: none;
    transform: translateX(0);
  }
  
  .brand-item:hover {
    transform: none;
  }
}

/* Optimización para pantallas de alta densidad */
@media (min-resolution: 2dppx) {
  .brand-item svg {
    shape-rendering: geometricPrecision;
  }
}