/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 13 2025 | 06:00:30 */
/* ==== Ajustes de tamaño, centrado y color para el carrusel de logos ==== */
.footer-logos{
  /* + tamaño y centrado del bloque */
  --logo-h: 48px;      /* antes 34px: súbelo si quieres aún más grande */
  --gap: 34px;         /* un poco más de espacio entre logos */
  --speed: 22s;        /* velocidad similar, ajustable */
  --fade: 0px;         /* sin fade lateral para que se vea todo más limpio */

  max-width: 1200px;   /* limita el ancho y lo centra */
  margin: 0 auto;      /* centra el carrusel en el footer */
  padding: 16px 0;     /* un poco más de alto */
  text-align: center;  /* ayuda a centrar en algunos temas */
}

/* al quitar el fade, ocultamos los pseudo-elementos */
.footer-logos::before,
.footer-logos::after{ display:none; }

/* centra la “pista” dentro del bloque y mejora la alineación vertical */
.footer-logos .logos-track{
  align-items: center;
}

/* LOGOS SIEMPRE A COLOR (sin grayscale) */
.footer-logos .logo img{
  filter: none;        /* quita blanco/negro */
  opacity: 1;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hover sutil (solo escala un poquito) */
.footer-logos .logo:hover img{
  transform: translateY(-2px) scale(1.08);
}

/* Responsive fino */
@media (max-width: 1024px){
  .footer-logos{ --logo-h: 42px; --gap: 28px; max-width: 1000px; }
}
@media (max-width: 767px){
  .footer-logos{ --logo-h: 34px; --gap: 20px; max-width: 640px; }
}
/* Ajustes finos */
.footer-logos{
  --logo-h: 34px;   /* tamaño del logo (prueba 30–36) */
  --gap: 22px;      /* separación */
  --speed: 28s;     /* velocidad del scroll (sube para más lento) */
  --fade: 0px;

  max-width: 900px; /* reduce ancho total y centra */
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
  text-align: center;
}

/* Pista desplazándose siempre */
.footer-logos .logos-track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  animation: logos-marquee var(--speed) linear infinite;
  will-change: transform;
}

/* Logos a color, con hover sutil */
.footer-logos .logo img{
  height: var(--logo-h);
  width: auto;
  display: block;
  opacity: .95;
  transition: transform .25s ease, opacity .25s ease;
}
.footer-logos .logo:hover img{
  transform: translateY(-2px) scale(1.06);
  opacity: 1;
}

/* Animación continua */
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* Lote A+B ocupan ~50%, C da holgura */
}

/* Responsive */
@media (max-width: 1024px){
  .footer-logos{ --logo-h: 30px; max-width: 760px; }
}
@media (max-width: 767px){
  .footer-logos{ --logo-h: 26px; max-width: 600px; --speed: 22s; }
}
/* ===== Carrusel infinito sin cortes ===== */
.footer-logos.infinite{
  --logo-h: 30px;    /* tamaño logos */
  --gap: 24px;       /* separación */
  --speed: 26s;      /* velocidad (↑ = más lento) */
  --mask: 0;         /* si quieres fades laterales: pon 40px */

  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

/* Fades opcionales (poner --mask>0) para ocultar cualquier costura por redondeo */
.footer-logos.infinite::before,
.footer-logos.infinite::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:var(--mask);
  pointer-events:none; z-index:2;
  background: linear-gradient(to right, rgba(0,0,0,.45), transparent);
}
.footer-logos.infinite::after{ right:0; left:auto; transform: scaleX(-1); }

/* La pista total: contiene dos listas idénticas */
.footer-logos.infinite .logos-track{
  display:flex;              /* 2 hijos (lista A y lista B) uno al lado del otro */
  width:max-content;
  animation: footer-marquee var(--speed) linear infinite;
  will-change: transform;
}

/* Cada lista ocupa el 50% de la pista (porque son idénticas) */
.footer-logos.infinite .logos-list{
  display:flex; align-items:center; gap:var(--gap);
  margin:0; padding:0; list-style:none;
}

/* Detén la animación al pasar el mouse si quieres */
.footer-logos.infinite:hover .logos-track{ animation-play-state: paused; }

/* Ítems */
.footer-logos.infinite .logo img{
  height:var(--logo-h); width:auto; display:block;
  opacity:.95;
  transition: transform .25s ease, opacity .25s ease;
}
.footer-logos.infinite .logo:hover img{
  transform: translateY(-2px) scale(1.06);
  opacity:1;
}

/* Animación: de 0 a -50% (como hay 2 listas idénticas, el bucle es perfecto) */
@keyframes footer-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width:1024px){
  .footer-logos.infinite{ --logo-h: 28px; --gap: 20px; }
}
@media (max-width:767px){
  .footer-logos.infinite{ --logo-h: 24px; --gap: 16px; --speed: 22s; }
}
.marquee{ position:relative; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none; z-index:2;
  background:linear-gradient(to right, rgba(0,0,0,.6), transparent);
}
.marquee::after{ right:0; left:auto; transform:scaleX(-1); }