/* =========================
   OUR CREDENTIALS - FINAL
========================= */

.credentials-section{
  background:#f4f6f8;
  padding: 60px 0;
}

/* Card estilo */
.credentials-card{
  background:#fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  padding: 22px 22px;
  margin-bottom: 22px;
}

@media (max-width: 991.98px){
  .credentials-card{
    padding: 18px 16px;
  }
}

/* No mostrar contenedor fuente */
.cred-all-logos{
  display:none !important;
}

/* =========================
   BARRA AUTO (CARD 1)
========================= */
.cred-bar{
  width: 100%;
  overflow: hidden;
}

.cred-bar-track{
  display:flex;
  align-items:center;
  gap: 34px;
  padding: 10px 8px;
  width: max-content;
  animation: credBarScroll 26s linear infinite;
  will-change: transform;
}

.cred-bar-track img{
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 991.98px){
  .cred-bar-track{ gap: 22px; }
  .cred-bar-track img{ height: 40px; }
}

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

/* =========================
   GRID DESKTOP (SIN PAGINADOR)
   6 columnas y muestra TODO
========================= */
.cred-grid{
  display:grid;
  align-items:center;
  justify-items:center;
  gap: 30px 30px;
  padding: 18px 10px 6px;
}

.cred-grid-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cred-grid img{
  height: 56px;
  width: auto;
  max-width: 160px;
  max-height: 56px;
  object-fit: contain;
  display:block;
}

/* asegurar que desktop no tenga recortes raros */
@media (min-width: 992px){
  .credentials-grid-card,
  .cred-grid-desktop,
  .cred-grid-desktop .cred-grid{
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .cred-grid-desktop{ display:block !important; }
  .cred-grid-mobile{ display:none !important; }
}

/* =========================
   TABLET/MOBILE SLIDER (SLICK)
   - Mobile: 3 columnas (3x6)
   - Tablet: 5 columnas (5x8)
   - Flechas + dots abajo
========================= */
.cred-mobile-slider{
  position: relative;
  padding: 10px 18px 62px; /* espacio para dots/flechas abajo */
}

/* Base: mobile 3 columnas y que use TODO el ancho */
.cred-mobile-slider .cred-page{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 16px;
  padding: 6px 6px 0;
  align-items: center;
  justify-items: center;
  width: 100%;
}

/* Tablet: 5 columnas */
@media (min-width: 600px) and (max-width: 991.98px){
  .cred-mobile-slider .cred-page{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 18px;
  }
}

/* Logos dentro del slider */
.cred-mobile-slider .cred-page img{
  height: 44px;
  width: 100%;
  max-width: 140px;
  max-height: 52px;
  object-fit: contain;
  display:block;
}

/* =========================
   Flechas (abajo como tu screenshot)
========================= */
.cred-mobile-slider .slick-prev,
.cred-mobile-slider .slick-next{
  position:absolute;
  bottom: 14px;           /* ABAJO */
  top: auto !important;
  transform: none !important;
  z-index: 6;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  background: rgba(255,255,255,0.96);
  border: 0 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.cred-mobile-slider .slick-prev{ left: 16px; }
.cred-mobile-slider .slick-next{ right: 16px; }

.cred-mobile-slider .slick-prev:before,
.cred-mobile-slider .slick-next:before{
  content:"";
  display:block;
  width: 11px;
  height: 11px;
  margin: 0 auto;
  border-right: 2px solid #1c2430;
  border-bottom: 2px solid #1c2430;
}
.cred-mobile-slider .slick-prev:before{ transform: rotate(135deg); }
.cred-mobile-slider .slick-next:before{ transform: rotate(-45deg); }

/* =========================
   Dots (abajo centrado)
========================= */
.cred-mobile-slider .slick-dots{
  position:absolute;
  left:0; right:0;
  bottom: 24px;

  display:flex !important;
  justify-content:center;
  align-items:center;
  gap: 10px;

  padding:0;
  margin:0;
  list-style:none;
  pointer-events: auto;
}

.cred-mobile-slider .slick-dots li{
  margin:0;
  padding:0;
}

.cred-mobile-slider .slick-dots li button{
  width: 10px;
  height: 10px;
  padding: 0;

  border: 0 !important;
  border-radius: 50%;
  background: rgba(28,36,48,.22);

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.cred-mobile-slider .slick-dots li.slick-active button{
  background: rgba(28,36,48,.85);
}

/* pantallas chicas */
@media (max-width: 420px){
  .cred-mobile-slider{
    padding: 10px 12px 62px;
  }
  .cred-mobile-slider .cred-page{
    gap: 14px;
  }
  .cred-mobile-slider .cred-page img{
    height: 42px;
    max-width: 120px;
  }
}