/* ========================
   Ajustes rápidos
   ======================== */
:root {
  --logo-h: clamp(185px, 6vw, 64px);
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --speed: 35s;
  --fade-size: 14%;
}

/* ========================
   Estructura general
   ======================== */
.wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #111318;
  padding: 24px;
}

.logo-carousel {
  width: min(1100px, 100%);
  overflow: hidden;
  position: relative;
  background: #111318;
  border-radius: 16px;
  padding-block: clamp(0px, 2vw, 0px);
  box-shadow: 0 6px 30px rgba(0,0,0,.35);
  transform: translateZ(0);
}

/* Gradientes de desvanecimiento (fade) laterales */
.logo-carousel::before,
.logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--fade-size);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, #111318, transparent);
}

.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, #111318, transparent);
}

/* ========================
   Animación de track
   ======================== */
.track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-animation: scroll-rtl var(--speed) linear infinite;
          animation: scroll-rtl var(--speed) linear infinite;
}

.logo-carousel:hover .track,
.logo-carousel.paused .track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* ========================
   Elementos del slider
   ======================== */
.slid {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.slid img, .slid svg {
  height: var(--logo-h);
  width: auto;
  max-width: clamp(80px, 22vw, 220px);
  object-fit: contain;
  filter: saturate(.92) contrast(1.05);
  opacity: .92;
  transition: transform .2s ease, opacity .2s ease;
}

.slid img:hover, .slid svg:hover {
  transform: scale(1.04);
  opacity: 1;
}

/* ========================
   Keyframes compatibles
   ======================== */
@-webkit-keyframes scroll-rtl {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes scroll-rtl {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* ========================
   Accesibilidad
   ======================== */
@media (prefers-reduced-motion: reduce) {
  .track { -webkit-animation-play-state: paused; animation-play-state: paused; }
}

/* ========================
   Modo claro
   ======================== */
@media (prefers-color-scheme: light) {
  .wrap { background: #f6f7fb; }
  .logo-carousel {
    background: #fff;
    box-shadow: 0 6px 30px rgba(80,80,90,.0);
  }
  .logo-carousel::before {
    background: linear-gradient(to right, #fff, transparent);
  }
  .logo-carousel::after {
    background: linear-gradient(to left, #fff, transparent);
  }
}