.c4m-marcas{
  --c4mm-alto-logo:34px;
  --c4mm-alto-caja:78px;
  --c4mm-ancho-caja:190px;
  --c4mm-sep:16px;
  --c4mm-caja:#EAF1FD;
  --c4mm-borde:#DCE4F0;
  --c4mm-titulo:#0F2A6B;
  --c4mm-radio:14px;
  --c4mm-dur:40s;
  font-family:inherit;
  width:100%;
}
.c4m-marcas *{box-sizing:border-box}

.c4m-marcas__titulo{
  text-align:center;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--c4mm-titulo);
  margin:0 0 18px;
}

/* la ventana recorta y difumina los bordes para que la cinta no aparezca de golpe */
.c4m-marcas__ventana{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}

.c4m-marcas__cinta{
  display:flex;
  align-items:center;
  gap:var(--c4mm-sep);
  width:max-content;
  animation:c4mm-correr var(--c4mm-dur) linear infinite;
  will-change:transform;
}
.c4m-marcas--derecha .c4m-marcas__cinta{animation-direction:reverse}
.c4m-marcas--pausa .c4m-marcas__ventana:hover .c4m-marcas__cinta{animation-play-state:paused}

@keyframes c4mm-correr{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.c4m-marcas__caja{
  flex:0 0 auto;
  width:var(--c4mm-ancho-caja);
  height:var(--c4mm-alto-caja);
  background:var(--c4mm-caja);
  border:1px solid var(--c4mm-borde);
  border-radius:var(--c4mm-radio);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
a.c4m-marcas__caja:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,42,107,.12);
}

.c4m-marcas__caja img{
  max-height:var(--c4mm-alto-logo);
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.c4m-marcas--grises .c4m-marcas__caja img{
  filter:grayscale(1);
  opacity:.72;
  transition:filter .2s ease, opacity .2s ease;
}
.c4m-marcas--grises .c4m-marcas__caja:hover img{
  filter:none;
  opacity:1;
}

@media(max-width:640px){
  .c4m-marcas{--c4mm-ancho-caja:150px;--c4mm-alto-caja:64px;--c4mm-alto-logo:28px;--c4mm-sep:12px}
  .c4m-marcas__titulo{font-size:14px;margin-bottom:14px}
}

/* quien haya pedido menos movimiento no ve la animación */
@media(prefers-reduced-motion:reduce){
  .c4m-marcas__cinta{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .c4m-marcas__ventana{-webkit-mask-image:none;mask-image:none}
}