/* =========================
   IndexSolar Brand Carousel (Responsive Controls)
   Variables:
   --isc-duration (s)
   --isc-logo-h   (px)
   --isc-pad-y    (rem)
   --isc-wrap-w   (vw)
   --isc-fade     (vw)
   --isc-loop-px  (px, calculado por JS)
   --isc-hover-lift (px)
   ========================= */

.isc-wrap{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc((100vw - min(100vw, var(--isc-wrap-w, 100vw))) / 2);
  padding-right: calc((100vw - min(100vw, var(--isc-wrap-w, 100vw))) / 2);
}

.isc-title{
  margin: 0 0 12px;
  font-weight: 700;
  color: #1d2b53;
  font-size: clamp(16px, 1.2vw, 22px);
  letter-spacing: -0.01em;
  text-align: center;
}

.isc-marquee{
  --isc-bg: rgba(255,255,255,1);
  --isc-bg-fade: rgba(255,255,255,0);
  --isc-gap: clamp(22px, 3vw, 44px);
  --isc-side-pad: clamp(16px, 2vw, 28px);
  --isc-loop-px: 0px;
  --isc-hover-lift: 4px;

  position: relative;
  border-radius: 22px;
  padding: var(--isc-pad-y, 1.2rem) 0;
  background: #ffffff;
  border: 0 solid rgba(29,43,83,0.06);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 var(--isc-fade, 4.5vw),
    #000 calc(100% - var(--isc-fade, 4.5vw)),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 var(--isc-fade, 4.5vw),
    #000 calc(100% - var(--isc-fade, 4.5vw)),
    transparent 100%);
}

.isc-marquee::before,
.isc-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: var(--isc-fade, 4.5vw);
  min-width: 34px;
  max-width: 90px;
  pointer-events:none;
  z-index:2;
}

.isc-marquee::before{
  left:0;
  background: linear-gradient(to right, var(--isc-bg, rgba(255,255,255,1)), var(--isc-bg-fade, rgba(255,255,255,0)));
}

.isc-marquee::after{
  right:0;
  background: linear-gradient(to left, var(--isc-bg, rgba(255,255,255,1)), var(--isc-bg-fade, rgba(255,255,255,0)));
}

.isc-track{
  display: flex;
  align-items: center;
  gap: var(--isc-gap);
  width: max-content;
  padding: 0 var(--isc-side-pad);
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  animation: isc-scroll var(--isc-duration, 55s) linear infinite;
  animation-play-state: paused;
}

.isc-marquee.is-ready .isc-track{
  animation-play-state: running;
}

.isc-group{
  display: flex;
  align-items: center;
  gap: var(--isc-gap);
  flex: 0 0 auto;
}

.isc-logo{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  backface-visibility: hidden;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 340ms cubic-bezier(.22,1,.36,1);
}

.isc-logo img{
  display: block;
  height: var(--isc-logo-h, 46px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity;
  transition: opacity 240ms ease;
}

@media (hover: hover) and (pointer: fine){
  .isc-logo:hover{
    transform: translate3d(0, calc(-1 * var(--isc-hover-lift, 4px)), 0);
  }

  .isc-logo:hover img{
    opacity: .94;
  }
}

@keyframes isc-scroll{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(calc(-1 * var(--isc-loop-px, 0px)),0,0); }
}

@media (prefers-reduced-motion: reduce){
  .isc-track{
    animation: none;
    transform: none;
  }

  .isc-marquee.is-ready .isc-track{
    animation-play-state: paused;
  }
}