/* ══════════════════════════════════════════════════
   Imfluid Marcas — v1.0.0
   ══════════════════════════════════════════════════ */

:root {
  --mq-bg:      #ffffff;
  --mq-border:  #E5E5E5;
  --mq-brand:   #E94E1B;
  --mq-muted:   #5A5A5A;
  --mq-name-c:  #9A9A9A;

  /* Tamaño del contenedor — configurable desde PHP */
  --mq-item-w:  140px;   /* ancho del item en marquee */
  --mq-tamano:  56px;    /* alto fijo de cada logo (PHP lo sobreescribe) */

  /* Filtro — PHP inyecta el valor según la opción color/bn */
  --mq-logo-filter:       grayscale(100%) opacity(0.55);
  --mq-logo-filter-hover: grayscale(0%)   opacity(1);
}

/* ── Sección ─────────────────────────────────────── */
.imfluid-mq-section {
  background: var(--mq-bg);
  border-top: 1px solid var(--mq-border);
  border-bottom: 1px solid var(--mq-border);
}

.imfluid-mq-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 40px 52px;
}

/* ── Cabecera ─────────────────────────────────────── */
.imfluid-mq-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.imfluid-mq-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--mq-muted);
  white-space: nowrap;
}

.imfluid-mq-line {
  flex: 1;
  height: 1px;
  background: var(--mq-border);
}

.imfluid-mq-all {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mq-brand);
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity .15s;
}
.imfluid-mq-all:hover { opacity: .75; }

/* ── Contenedor del marquee ───────────────────────── */
.imfluid-mq-wrap {
  display: flex;
  overflow: hidden;
  /* Fade en los bordes para entrada y salida suave */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Pausa al pasar el cursor sobre el marquee */
.imfluid-mq-wrap:hover .imfluid-mq-track {
  animation-play-state: paused;
}

/* ── Track animado ────────────────────────────────── */
.imfluid-mq-track {
  display: flex;
  align-items: center;
  gap: 56px;
  animation: imfluid-mq-scroll 28s linear infinite;
  flex-shrink: 0;
  padding-right: 56px; /* igual al gap para que el loop sea perfecto */
}

@keyframes imfluid-mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── Cada item de marca (marquee) ─────────────────── */
.imfluid-mq-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mq-item-w);
  /* Alto = tamaño configurado → logos grandes se reducen, pequeños se agrandan */
  height: var(--mq-tamano);
  flex-shrink: 0;
  text-decoration: none !important;
}

/* ── Logo (imagen) ────────────────────────────────── */
.imfluid-mq-logo {
  display: block;
  /* Dimensiones fijas → object-fit escala hacia arriba Y hacia abajo */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: var(--mq-logo-filter);
  transition: filter .25s ease;
}

.imfluid-mq-item:hover .imfluid-mq-logo {
  filter: var(--mq-logo-filter-hover);
}

/* ── Nombre (cuando no hay logo) ──────────────────── */
.imfluid-mq-name {
  display: block;
  color: var(--mq-name-c);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: color .2s;
  line-height: 1;
}

.imfluid-mq-item:hover .imfluid-mq-name {
  color: var(--mq-brand);
}

/* ══════════════════════════════════════════════════
   Modo Grid
   ══════════════════════════════════════════════════ */

.imfluid-mq-section--grid { border-top: none; border-bottom: none; }

.imfluid-mq-grid {
  display: grid;
  grid-template-columns: repeat( var(--mq-cols, 5), 1fr );
  gap: 0;
}

.imfluid-mq-item--grid {
  width: auto;
  height: auto;
  padding: 28px 32px;
  border: 1px solid #F0F0F0;
  margin: -1px 0 0 -1px;
}

.imfluid-mq-item--grid .imfluid-mq-logo {
  /* Ancho libre dentro de la celda, alto fijo = todos quedan iguales */
  display: block;
  width: auto !important;
  height: var(--mq-tamano) !important;
  /* max-width acotado para que logos muy anchos no rompan la celda */
  max-width: 100% !important;
  object-fit: contain;
}

.imfluid-mq-item--grid .imfluid-mq-name {
  font-size: 14px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1023px) {
  .imfluid-mq-inner { padding: 40px 28px 44px; }
  .imfluid-mq-grid  { grid-template-columns: repeat( min( var(--mq-cols, 5), 4 ), 1fr ); }
}

@media (max-width: 767px) {
  .imfluid-mq-inner { padding: 32px 20px 36px; }
  :root { --mq-item-w: 100px; --mq-item-h: 40px; }
  .imfluid-mq-track { gap: 40px; padding-right: 40px; }
  .imfluid-mq-name  { font-size: 17px; }
  .imfluid-mq-grid  { grid-template-columns: repeat(3, 1fr); }
  .imfluid-mq-item--grid { padding: 20px 24px; }
  .imfluid-mq-item--grid .imfluid-mq-logo { height: calc( var(--mq-tamano) * .85 ) !important; }
}

@media (max-width: 639px) {
  .imfluid-mq-inner { padding: 28px 16px 32px; }
  :root { --mq-item-w: 88px; }
  .imfluid-mq-track { gap: 32px; padding-right: 32px; }
  .imfluid-mq-name  { font-size: 15px; }
  .imfluid-mq-grid  { grid-template-columns: repeat(2, 1fr); }
  .imfluid-mq-item--grid { padding: 16px 20px; }
  .imfluid-mq-item--grid .imfluid-mq-logo { height: calc( var(--mq-tamano) * .7 ) !important; }
}