/* Faixa "Nossos associados" estilo rolo de filme envelhecido (teste 11/11/2026)
   Para remover: ../backups_faixa_associados_20261111/reverter.sh */
.assoc-strip {
  position: relative;
  margin: 0 -0.75rem;
  padding: 0.4rem 0 0.2rem;
}

.assoc-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  transform: rotate(-1.2deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  filter: drop-shadow(0 10px 18px rgba(20, 14, 10, 0.28));
}

.assoc-track::-webkit-scrollbar {
  display: none;
}

/* cada quadro carrega seu pedaço de filme: furos em cima/embaixo andam junto */
.assoc-item {
  --furo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Crect x='4' y='2' width='10' height='8' rx='2' fill='%23EFE6D6'/%3E%3C/svg%3E");
  position: relative;
  flex: 0 0 auto;
  width: 7.6rem;
  margin: 0;
  padding: 1.35rem 0.45rem 1.6rem;
  background:
    var(--furo) left top / 18px 12px repeat-x,
    var(--furo) left bottom / 18px 12px repeat-x,
    linear-gradient(180deg, #2A1E14 0%, #1F160F 50%, #2A1E14 100%);
  background-origin: border-box;
  border-right: 1px solid #3A2A1C;
}

.assoc-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 3px;
  object-fit: cover;
  background: #2B2724;
  filter: sepia(0.55) saturate(0.75) contrast(0.92) brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-user-drag: none;
  user-select: none;
}

/* vinheta + granulado de foto antiga, por cima de cada quadro */
.assoc-item::before {
  content: "";
  position: absolute;
  inset: 1.35rem 0.45rem 1.6rem;
  border-radius: 3px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(60, 35, 15, 0.45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* nome impresso na borda do filme */
.assoc-name {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.78rem;
  overflow: hidden;
  color: #E0A458;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* número do quadro, como no filme 35 mm */
.assoc-item::after {
  content: attr(data-quadro);
  position: absolute;
  top: 0.82rem;
  right: 0.5rem;
  color: #E0A458;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

.assoc-count {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .assoc-item { width: 8.8rem; }
  .assoc-name { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .assoc-track { transform: none; }
}