/* ============================= */
/* BASE */
/* ============================= */

.c-logos{
  padding: clamp(80px, 10vh, 120px) 0;
  background: linear-gradient(135deg, #0A052D 0%, #291F46 100%);
  overflow: hidden;
}

/* MÁS COMPACTO (clave estética) */
.c-logos__container{
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
}

/* ============================= */
/* HEADER */
/* ============================= */

.c-logos__header{
  text-align: center;
  margin-bottom: 48px;
}

.c-logos__title{
  margin: 0;
  font-family: "Lexend Deca", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: #C98028;
}

.c-logos__subtitle{
  margin: 8px 0 0;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: #C98028;
  opacity: .8;
}

/* ============================= */
/* SLIDER */
/* ============================= */

.c-logos__slider{
  overflow: hidden;
  position: relative;

  /* fade lateral PRO */
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

/* ============================= */
/* TRACK */
/* ============================= */

.c-logos__track{
  display: flex;
  gap: 56px;

  width: max-content;

  animation: logos-scroll 50s linear infinite; /* más premium */
  transition: transform .6s ease;
}

/* pausa suave */
.c-logos__slider:hover .c-logos__track{
  animation-play-state: paused;
}

/* ============================= */
/* ITEM */
/* ============================= */

.c-logos__item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================= */
/* LOGO */
/* ============================= */

.c-logos__item img{
  max-height: 48px;
  width: auto;

  opacity: .75;

  transition:
	opacity .4s ease,
	transform .4s ease;
}

/* hover limpio */
.c-logos__item:hover img{
  opacity: 1;
  transform: scale(1.08);
}

/* ============================= */
/* ANIMATION */
/* ============================= */

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

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 640px){

  .c-logos__container{
	width: min(600px, calc(100% - 32px)); /* más compacto */
  }

  .c-logos__track{
	gap: 32px;
	animation-duration: 30s; /* más lento también en móvil */
  }

  .c-logos__item img{
	max-height: 36px;
  }

}