/* =========================================================
   BRAZIL DAY ATX — MURAL DE PATROCINADORES (faixa contínua)
   Tudo escopado em `.sp`. Os botões reaproveitam .btn do
   styles.css de propósito — botão novo aqui só criaria uma
   segunda verdade visual.

   As artes já chegam normalizadas na mesma caixa 520×300 (o
   trim com fuzz e a equalização por ÁREA vivem no script de
   build). Aqui o card só centraliza e dá respiro igual.

   Cartão BRANCO em cima do palco escuro é decisão, não
   preguiça: o conjunto mistura logo clara, logo escura e logo
   com fundo próprio (navy da Karina Rocha, vermelho do Amore).
   Fundo claro é o único denominador que preserva a cor de
   TODAS — e cor é o que o patrocinador comprou.
   ========================================================= */

.sp{
  --sp-line:rgba(255,255,255,.10);
  --sp-gold:#F4C430;
  --sp-card-w:clamp(148px,40vw,208px);
  --sp-gap:12px;

  position:relative; isolation:isolate;
  background:#070b18;
  padding:clamp(60px,9vh,100px) 0 clamp(66px,10vh,110px);
  overflow:hidden;
}

/* halo de palco — um só, bem aberto, sem virar neon */
.sp::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:-10%; width:min(1100px,140%); aspect-ratio:1/.62;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,
    rgba(244,196,48,.13) 0%, rgba(31,166,74,.07) 42%, transparent 72%);
  pointer-events:none;
}
/* fios da bandeira separam o palco das seções vizinhas (também
   escuras): sem eles as três viram um bloco escuro só */
.sp::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--grad-flag,linear-gradient(90deg,#1FA64A,#F4C430,#41C96B));
  opacity:.75;
}

/* ---------- cabeçalho ---------- */
.sp-head{ text-align:center; max-width:56ch; margin:0 auto clamp(32px,5.5vh,52px); padding:0 20px; }
.sp-kicker{
  margin:0 0 16px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.74rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--sp-gold);
}
.sp-kicker::before,
.sp-kicker::after{ content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--sp-gold)); }
.sp-kicker::after{ background:linear-gradient(90deg,var(--sp-gold),transparent); }

.sp-title{
  margin:0; font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(1.95rem,6.2vw,3.4rem);
  line-height:1.2;                  /* Anton com acento precisa desse respiro */
  text-transform:uppercase; color:#fff; text-wrap:balance;
}
.sp-lead{
  margin:16px auto 0; max-width:52ch;
  font-size:clamp(.98rem,2.2vw,1.06rem); line-height:1.6; color:rgba(255,255,255,.66);
}

/* ---------- patrocinador master (quem APRESENTA) ---------- */
/* Fica ACIMA do mural e fora das faixas que correm, de propósito:
   cota master é assinatura, não logo passando voando. Fica parado,
   onde dá tempo de ler.

   Placa ESCURA, não o card branco do mural: o branco existe lá pra
   proteger a cor de logo de terceiro (verde, navy, vermelho). Aqui
   o bloco é tipografia sobre o palco — inventar um retângulo branco
   só quebraria a continuidade da seção. Quando o arquivo do logo
   entrar em .sp-master__who, o fundo claro dele vem no PNG. */
.sp-master{
  width:100%; max-width:var(--maxw,1200px);
  margin:0 auto clamp(38px,6vh,62px);
  padding:0 20px; text-align:center;
}
.sp-master .sp-kicker{ margin-bottom:14px; }

.sp-master__lockup{
  display:grid; justify-items:center; gap:clamp(12px,2.2vh,18px);
  max-width:660px; margin:0 auto;
  padding:clamp(26px,4.6vw,40px) clamp(20px,5vw,44px);
  border:1px solid rgba(244,196,48,.34); border-radius:20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(244,196,48,.10), transparent 62%),
    rgba(255,255,255,.03);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}

/* quem apresenta: só o brasão. MEDALHÃO — a arte da R9 é redonda sobre
   branco, e o card retangular do mural deixaria quatro cantos acesos em
   volta de um desenho que já é redondo. O PNG é gerado com os
   quase-brancos do JPEG achatados em branco puro; sem isso a máscara
   revelaria um anel cinza na borda do disco.

   Grande de propósito: sem o nome em tipo ao lado, é o próprio brasão
   que tem de entregar "Ronaldo Academy" legível — abaixo de ~180px esse
   texto vira borrão. E ele fica maior que a marca do evento logo
   abaixo: o destaque comprado é o da R9, onde o visitante está ele já
   sabe. */
.sp-master__who{ margin:0; display:flex; justify-content:center; }
.sp-master__who picture{ display:block; flex:0 0 auto; }
.sp-master__who img{
  display:block; width:clamp(152px,38vw,212px); height:auto;
  border-radius:50%; background:#fff;
  box-shadow:0 20px 42px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(244,196,48,.34);
}

/* o verbo: fio–texto–fio, o mesmo desenho do .sp-kicker */
.sp-master__verb{
  margin:0; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.74);
}
.sp-master__verb::before,
.sp-master__verb::after{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--sp-gold));
}
.sp-master__verb::after{ background:linear-gradient(90deg,var(--sp-gold),transparent); }

/* a marca do evento — é ela que está sendo apresentada.
   O "DAY" do logo é cinza-claro (#CDCAB6): brilha neste fundo
   escuro e sumiria num card branco. Mais um motivo pra placa. */
.sp-master__what{ display:block; width:clamp(166px,40vw,262px); height:auto; }

/* ---------- rótulo de cada grupo ---------- */
.sp-group{
  display:flex; align-items:center; gap:14px;
  width:100%; max-width:var(--maxw,1200px); margin:0 auto clamp(14px,2.4vh,20px);
  padding:0 20px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.76rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.sp-group::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:var(--grad-flag,linear-gradient(90deg,#1FA64A,#F4C430,#41C96B));
  opacity:.45;
}
.sp-group:not(:first-of-type){ margin-top:clamp(34px,5vh,56px); }

/* ---------- faixa ---------- */
/* Estado BASE = tira arrastável. É o que vale sem JS e com
   movimento reduzido: nenhuma logo fica inalcançável. O JS
   clona a fileira e troca para overflow:hidden ao animar. */
.sp-mq{
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sp-mq::-webkit-scrollbar{ display:none; }

.sp-mq__track{
  display:flex; align-items:stretch; gap:var(--sp-gap);
  width:max-content; padding:2px 20px;
}
.sp-mq__row{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:stretch; gap:var(--sp-gap);
}

/* animando: some a barra de rolagem e entram as bordas esfumadas */
.sp-mq.is-live{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.sp-mq.is-live .sp-mq__track{
  /* --sp-dur vem do JS: calculado pela LARGURA real da fileira, pra
     todas as faixas correrem na mesma velocidade em px/s. Fixar o
     tempo no CSS faria a fileira curta correr mais devagar. */
  animation:sp-slide var(--sp-dur,42s) linear infinite;
  will-change:transform;
}
.sp-mq.is-live[data-sp-dir="reverse"] .sp-mq__track{ animation-direction:reverse; }

/* pausa quando fora da tela (o JS tira .is-running) e no hover */
.sp-mq.is-live:not(.is-running) .sp-mq__track,
.sp-mq.is-live:hover .sp-mq__track,
.sp-mq.is-live:focus-within .sp-mq__track{ animation-play-state:paused; }

@keyframes sp-slide{
  from{ transform:translate3d(0,0,0); }
  /* --sp-shift = largura de UMA fileira + o gap, em px, vindo do JS.
     `-50%` aqui seria errado: metade do track inclui o padding dele e
     metade do gap entre as duas fileiras — no desktop dava 1566px pra
     um ciclo que mede 1540px, e a emenda saltava 26px a cada volta. */
  to{ transform:translate3d(calc(var(--sp-shift,50%) * -1),0,0); }
}

/* ---------- card ---------- */
.sp-card{
  flex:0 0 var(--sp-card-w); width:var(--sp-card-w);
  display:grid; place-items:center;
  aspect-ratio:520/300;            /* segura o espaço: zero CLS */
  padding:14px 16px;
  background:#fff; border:1px solid var(--sp-line); border-radius:14px;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9);
  transition:transform .3s var(--ease,ease), box-shadow .3s var(--ease,ease), border-color .3s;
}
.sp-card:hover{
  transform:translateY(-4px);
  border-color:rgba(244,196,48,.6);
  box-shadow:0 20px 38px -16px rgba(0,0,0,.95), 0 0 0 1px rgba(244,196,48,.18);
}
.sp-card img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ---------- cota OURO ---------- */
/* Fileira parada: 3 marcas não pedem carrossel. Cards MAIORES que os do
   mural comum (208px) — a hierarquia tem que se ver sem ler o título. */
.sp-tier{
  list-style:none; margin:0 auto; padding:2px 20px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:var(--sp-gap); max-width:var(--maxw,1200px);
}
.sp-tier--gold{ --sp-card-w:clamp(176px,46vw,268px); }
/* o ouro só encosta na borda; preencher o card apagaria a logo, que é o
   que o patrocinador comprou */
.sp-tier--gold .sp-card{
  border-color:rgba(244,196,48,.42);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(244,196,48,.14);
}

/* apoio: presença menor, mas nunca a ponto de a assinatura da
   marca virar borrão — a seção existe pra divulgar */
/* teto mais alto que os 168px iniciais: com 7 cards estreitos o ciclo
   media 1246px e numa tela de 1920 dava pra ver a MESMA logo duas vezes
   ao mesmo tempo, longe da borda esfumada */
.sp-mq--sm{ --sp-card-w:clamp(132px,33vw,196px); --sp-gap:10px; }
.sp-mq--sm .sp-card{ padding:11px 13px; border-radius:12px; }

/* ---------- chamada final ---------- */
.sp-cta{
  width:100%; max-width:var(--maxw,1200px); margin:clamp(38px,6vh,64px) auto 0;
  padding:clamp(30px,4.5vh,48px) 20px 0; text-align:center;
  border-top:1px solid var(--sp-line);
}
.sp-cta__text{
  margin:0 auto 20px; max-width:44ch;
  font-family:var(--f-head,"Oswald",sans-serif); font-weight:500;
  font-size:clamp(1.05rem,2.6vw,1.28rem); letter-spacing:.01em; color:#fff;
}

/* =========================================================
   MOVIMENTO REDUZIDO — volta a ser tira arrastável.
   Só pausar não bastaria: a logo que estivesse fora da tela
   ficaria inalcançável pra sempre.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .sp-mq.is-live{
    overflow-x:auto; overflow-y:hidden;
    -webkit-mask-image:none; mask-image:none;
  }
  .sp-mq.is-live .sp-mq__track{ animation:none; will-change:auto; }
  .sp-mq__row[aria-hidden="true"]{ display:none; }   /* o clone some */
  .sp-card{ transition:none; }
  .sp-card:hover{ transform:none; }
}

/* =========================================================
   BREAKPOINTS — nenhuma regra base depois daqui
   ========================================================= */
@media (min-width:860px){
  .sp-mq__track{ padding:2px 32px; }
  .sp-group{ padding:0 32px; }
  .sp-card{ padding:18px 22px; }
  .sp-mq--sm .sp-card{ padding:13px 16px; }
  .sp-master{ padding:0 32px; }
  .sp-master__verb::before,
  .sp-master__verb::after{ width:38px; }
}