/* --- Convenios (v3 grande) --- */
.convenios-section{
  background: #f7f8fb;
}

.logo-scroller{
  position:relative; overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:18px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.logo-track{
  --gap: 2.2rem;
  --speed-px-per-sec: 90;
  --logo-h: 120px;           /* ↑ tamaño de logo (desktop) */
  display:flex; align-items:center; gap:var(--gap);
  will-change: transform;
  animation: logos-scroll var(--duration,40s) linear infinite;
  padding-inline: calc(var(--gap) + 8px);
}

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

/* Card más grande y uniforme */
.logo-item{
  flex:0 0 auto;
  width: 340px;                                   /* ↑ ancho de card */
  height: calc(var(--logo-h) + 42px);             /* ↑ alto de card */
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.logo-item a{ display:flex; align-items:center; justify-content:center; }

.logo-item img{
  height: var(--logo-h);
  width: auto;
  max-width: 100%;            /* ← permite crecer dentro de la card */
  object-fit: contain;
  filter: grayscale(.03) contrast(1.05);
  transition: inherit;
}

.logo-item:hover{
  transform: translateY(-4px);
  filter: none; opacity: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

@keyframes logos-scroll{ from{transform:translateX(0)} to{transform:translateX(calc(-50%))} }

/* Fades laterales */
.logo-scroller .fade{
  position:absolute; top:0; bottom:0; width:56px; pointer-events:none;
}
.logo-scroller .fade.left{
  left:0; background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 100%);
}
.logo-scroller .fade.right{
  right:0; background:linear-gradient(270deg,#fff 0%, rgba(255,255,255,0) 100%);
}

/* Responsivo */
@media (max-width: 992px){
  .logo-track{ --gap: 1.6rem; --logo-h: 100px; }
  .logo-item{ width: 300px; height: calc(var(--logo-h) + 36px); padding: 12px 16px; }
}
@media (max-width: 576px){
  .logo-track{ --gap: 1.1rem; --logo-h: 82px; }
  .logo-item{ width: 240px; height: calc(var(--logo-h) + 30px); padding: 10px 14px; }
}