/* ===== Carrusel continuo ===== */
.marquee-loop {
  width: 100% !important;
  max-width: 100% !important; /* Evita que ensanche la página */
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important; /* CORTE EXACTO: Oculta los logos que sobresalen */
  position: relative;
}

/* Que Swiper no meta mano en el transform/transition del wrapper */
.marquee-loop .swiper,
.marquee-loop .swiper-container { 
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important; 
}

.marquee-loop .swiper-wrapper {
  transform: none !important;
  transition: none !important;
}

/* Nuestro track interno (lo anima el JS con variables CSS) */
.marquee-loop .marquee-track {
  display: flex !important;
  align-items: center !important; 
  justify-content: flex-start !important; /* Asegura que fluya desde la izquierda */
  height: 100% !important; 
  gap: 40px !important; 
  will-change: transform;
}

/* El JS agrega .is-animating cuando setea --marquee-duration y --track-distance */
.marquee-loop.is-animating .marquee-track {
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}

/* Slides y logos: tamaño controlado por altura, sin estirar */
.marquee-loop .swiper-slide {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

.marquee-loop .swiper-slide img {
  height: 70px !important; 
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  filter: contrast(1.05);
}

/* Tablets */
@media (max-width: 1024px) {
  .marquee-loop .swiper-slide img {
    max-height: 100px;
    max-width: 150px;
  }
}

/* ===== MOBILE RESPONSIVE REPAIR ===== */
@media (max-width: 767px) {
  
  /* 1. Aumentamos la altura del contenedor de la tarjeta */
  .ice-card-wrapper {
    height: 100px !important; /* Antes 70px. Ajústalo según el nuevo tamaño del logo */
    padding: 0 !important;
    margin: 10px auto !important;
  }

  /* 2. El track y el loop deben coincidir con la nueva altura */
  .marquee-loop, 
  .marquee-loop .marquee-track {
    height: 100px !important; /* Debe ser igual al .ice-card-wrapper */
    display: flex !important;
    align-items: center !important;
  }

  /* 3. AQUÍ AUMENTAS EL LOGO */
  .marquee-loop .swiper-slide img {
    height: 70px !important; /* Antes 45px. Cámbialo por 60px o 70px para verlos más grandes */
    width: auto !important;
    margin: 0 !important;
  }

  /* 4. Espaciado entre logos */
  .marquee-loop .marquee-track {
    gap: 40px !important; /* Un poco más de espacio para que no se amontonen al ser más grandes */
  }
}
/* =========================================
   EFECTO DE DIFUMINADO LATERAL (DARK MODE)
   ========================================= */

/* 1. Configuración común para ambas capas de difuminado */
.marquee-loop::before,
.marquee-loop::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%; /* Ocupa toda la altura del contenedor */
  width: 150px; /* Qué tan ancho es el área del difuminado. Ajústalo si quieres más o menos. */
  z-index: 5; /* Se coloca POR ENCIMA de los logos que se mueven */
  pointer-events: none; /* CRUCIAL: Permite que los clicks pasen a través del difuminado */
}

/* 2. Capa Izquierda (Emerge de la oscuridad) */
.marquee-loop::before {
  left: 0;
  /* Degradado desde tu fondo oscuro (#001118) hacia transparente */
  /* El '20%' hace que el inicio sea un color sólido antes de empezar a desvanecerse */
  background: linear-gradient(to right, #001118 0%, rgba(0, 17, 24, 0.8) 40%, transparent 100%);
}

/* 3. Capa Derecha (Desaparece en la oscuridad) */
.marquee-loop::after {
  right: 0;
  /* Degradado desde transparente hacia tu fondo oscuro (#001118) */
  background: linear-gradient(to left, #001118 0%, rgba(0, 17, 24, 0.8) 40%, transparent 100%);
}

/* ===== AJUSTE PARA MÓVILES ===== */
/* En pantallas pequeñas, el difuminado ancho puede tapar mucho. Lo reducimos. */
@media (max-width: 767px) {
  .marquee-loop::before,
  .marquee-loop::after {
    width: 60px; /* Difuminado más corto en celular */
  }
}

/* Preferencia de usuario: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .marquee-loop.is-animating .marquee-track { animation: none; }
}

/* Animación */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--track-distance, 0px))); }
}