/* APOIADORES — fundo cream2 100%, track com 5% */
.io-apoio { width: 100%; padding: var(--section-pad-v) 0; border-bottom: 1.5px solid var(--ink); background: var(--cream2); }
.io-apoio__header { padding: 0 var(--section-pad-h) ; max-width: calc(var(--container-max) + 10%);  }
.io-apoio__sub { font-size: 13px; color: #888; margin-top: 6px; }
.io-apoio__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
  /* padding lateral = margens das outras seções,
     com máscara de fade nas bordas via pseudo-elementos */
  padding: 0;
  position: relative;
  gap: 0;
}
/* Fade nas bordas para sugerir continuidade */
.io-apoio__track::before,
.io-apoio__track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: var(--section-pad-h);
  z-index: 2;
  pointer-events: none;
}
.io-apoio__track::before {
  left: 0;
  background: linear-gradient(to right, var(--cream2) 50%, transparent);
}
.io-apoio__track{
    overflow:hidden;
    width:100%;
}
/* Fita interna que anima — JS vai duplicar o conteúdo */
.io-apoio__reel{
    display:flex;
    gap:16px;
    width:max-content;
    animation:marquee 40s linear infinite;
}
.io-apoio__reel:hover,
.io-apoio__track:hover .io-apoio__reel { animation-play-state: paused; }
@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
  .io-apoio__reel { animation: none; }
  .io-apoio__track { overflow-x: auto; }
}
.io-apoio__track::-webkit-scrollbar { display: none; }
.io-apoio__card, .io-apoio__card--link { flex-shrink: 0; width: 170px; border: 1.5px solid var(--ink); background: var(--white); padding: 18px 14px; text-align: center; cursor: pointer; position: relative; scroll-snap-align: start; transition: transform 0.22s, box-shadow 0.22s, z-index 0s; text-decoration: none; display: flex; flex-direction: column; align-items: center; }
.io-apoio__card:hover, .io-apoio__card--link:hover { transform: translateY(-5px); z-index: 5; box-shadow: 4px 4px 0 var(--ink); }
.io-apoio__badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; display: inline-block; padding: 2px 8px; border: 1px solid currentColor; border-radius: 3px; }
.io-apoio__logo-wrap { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.io-apoio__logo-img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(0.15); transition: filter 0.25s; }
.io-apoio__card:hover .io-apoio__logo-img, .io-apoio__card--link:hover .io-apoio__logo-img { filter: grayscale(0); }
.io-apoio__logo-placeholder { width: 52px; height: 52px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 800; font-size: 16px; border-radius: 3px; }
.io-apoio__name { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.3; }
.io-apoio__tipo { font-family: var(--font-mono); font-size: 9px; color: #999; }
.io-apoio__join { flex-shrink: 0; width: 170px; border: 1.5px solid var(--terra); background: var(--terra); padding: 18px 14px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: background var(--transition); scroll-snap-align: start; }
.io-apoio__join:hover { background: var(--ink); border-color: var(--ink); }
.io-apoio__join-ico { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; }
.io-apoio__join-txt { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.4; }
@media (max-width: 768px) { .io-apoio { padding: calc(var(--section-pad-v) * 0.55) 0; } .io-apoio__track { padding: 0 4%; } .io-apoio__header { padding: 0 4% 20px; } }

/* Espaçamento uniforme entre marcas no marquee */
/* gap: 16px no reel substitui a margin negativa */
/* Botão "tornar-se apoiador" fixo FORA do reel, não participa da animação */
.io-apoio__join-wrapper {
  flex-shrink: 0;
  padding: 0 var(--section-pad-h);
  display: flex;
  align-items: center;
  margin-top: 24px;
}