/* ================================================================
   SEC-IMAGE-MARQUEE v3.1
   Focofy Factory — Design Tokens Contract v3.6

   v3.0 → v3.1:
     - max-width: 800px no header → var(--container-narrow) (720px)
   ================================================================ */

.focofy-section--sec-image-marquee {
  overflow: hidden;
  padding: var(--space-6) 0;
}

.focofy-marquee__header {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--container-narrow);  /* 720px — --container-narrow */
  margin-left: auto;
  margin-right: auto;
}

.focofy-marquee__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
}

.focofy-marquee__subtitle {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--lh-normal);
  opacity: 0.85;
  color: var(--color-text-muted);
}

.focofy-marquee__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.focofy-marquee__viewport::-webkit-scrollbar {
  display: none;
}

.focofy-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  width: max-content;
}

.focofy-marquee__item {
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.focofy-marquee__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.focofy-marquee__media {
  position: relative;
  height: var(--marquee-card-h, 240px);
  width: var(--marquee-card-w, 220px);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.focofy-marquee__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.focofy-marquee__caption {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
}

@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .focofy-section--sec-image-marquee {
    padding: var(--space-4) 0;
  }

  .focofy-marquee__header {
    margin-bottom: var(--space-6);
  }

  .focofy-marquee__media {
    height: var(--marquee-card-h, 200px);
    width: var(--marquee-card-w, 180px);
  }
}