#partners {
	max-width: 700px;
	margin: 60px auto 0;
	background: var(--color-brand);
	background: #fff8e1; 
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	border-radius: 8px;
	padding: 40px;
}
.partners__title{
	color: #ef6c00;
	
}

#partners img {
	max-width: 100%;
}

div.logoTrack::-webkit-scrollbar {
  display: none;
}

/*******/


/* ---------------  ESTILOS COMUNES PARA TODOS LOS BLOQUES  ---------------- */

/* El contenedor padre (se detecta con JS y se le añade .logos-wrapper) */
.logos-wrapper {
  position: relative;
}

/* Track: centrado por defecto si NO hay overflow */
.logos-wrapper .logoTrack {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  justify-content: center;     /* centra logos cuando sobra espacio */
  padding: 10px 0;
}

/* Cuando hay overflow → alinear a la izquierda */
.logos-wrapper.is-overflowing .logoTrack {
  justify-content: flex-start;
}

/* Botones: ocultos por defecto */
.logos-wrapper .scrollLeft,
.logos-wrapper .scrollRight {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Mostrar botones solo si hay overflow */
.logos-wrapper.is-overflowing .scrollLeft,
.logos-wrapper.is-overflowing .scrollRight {
  opacity: 1;
  pointer-events: auto;
}