/* ===================== MARCAS (PORTAFOLIO) ===================== */

.marcas-strip{
  background: var(--color-blanco);
  padding: 3rem 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;

  /* variables controladas por JS */
  --marquee-distance: 1200px;
  --marquee-duration: 24s;
}

.marcas-track{
  display: inline-flex;
  align-items: center;
  gap: 0;
  will-change: transform;

  /* se activa cuando JS calcule */
  animation: none;
}

.marcas-track.is-ready{
  animation: marcas-marquee var(--marquee-duration) linear infinite;
}

@keyframes marcas-marquee{
  0%   { transform: translateX(calc(var(--marquee-distance) * -1)); }
  100% { transform: translateX(0); }
}

.marca-group{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.marca-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3rem;
}

.marca-img{
  width: auto;
  object-fit: contain;

  /* BN por defecto */
  filter: grayscale(100%) opacity(0.75);
  transform: scale(1);
  transform-origin: center;

  transition: transform .3s ease, filter .3s ease;
}

.marca-img:hover{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* separador vertical */
.marca-sep{
  width: .4rem;
  height: 4.2rem;
  background: rgba(0,0,0,0.10);
  margin: 0 2rem;
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .marcas-track.is-ready{ animation: none; }
}

/* responsive suave */
@media (max-width: 768px){
  .marca-item{ padding: 0 1.6rem; }
  .marca-sep{ margin: 0 1.2rem; height: 3.6rem; }
}


/* ===================== MARCAS (MÓVIL) ===================== */
/* Reduce tamaño real de logos en móvil sin tocar el JS */
@media (max-width: 500px){
  .marcas-strip{
    padding: 2rem 0;
  }

  .marca-img{
    height: 3.6rem !important; /* 👈 pisa el inline del JS */
    max-height: 3.6rem !important;
  }

  .marca-item{
    padding: 0 1.2rem;
  }

  .marca-sep{
    height: 3.2rem;
    margin: 0 1rem;
    width: .35rem;
  }
}

/* (opcional) un escalón intermedio para 501px–768px */
@media (max-width: 768px){
  .marca-img{
    height: 4.2rem !important; /* un poco más pequeño que PC */
    max-height: 4.2rem !important;
  }
}