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

.imfluid-fm {
  background: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.imfluid-fm-inner {
  max-width: 1440px;
  margin: 0 auto;
  /* Desktop: px-10 py-4 del HTML de referencia */
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Sin flex-wrap: los nombres se truncan, no saltan de línea */
  overflow: hidden;
}

/* Label izquierdo */
.imfluid-fm-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: #1A1A1A;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Nombres de marcas — ocupa el espacio central disponible */
.imfluid-fm-names {
  font-size: 12.5px;
  color: #5A5A5A;
  flex: 1;
  text-align: center;
  /* Trunca si hay demasiadas marcas y no caben */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Link "Ver todas" — derecha */
.imfluid-fm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #E94E1B;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.imfluid-fm-link:hover {
  text-decoration: underline;
}

.imfluid-fm-link svg {
  display: inline-block;
  flex-shrink: 0;
}

/* ── Mobile — igual que hidden md:inline del HTML de referencia ─────── */
/* Por debajo de 768px: ocultar nombres, padding reducido (px-4) */
@media (max-width: 767px) {
  .imfluid-fm-inner {
    padding: 14px 16px;
  }
  .imfluid-fm-names {
    display: none;
  }
}