/* ============================================================================
   PARCEIROS — cabeçalho da seção + carrossel horizontal preso ao scroll (.prch).

   A seção inteira "prende" (position:sticky) por uma faixa de scroll:
     · o BLOCO DE TEXTO fica parado à esquerda e só some em fade quando os
       cards chegam perto;
     · DUAS fileiras de cards entram pela direita e passam POR CIMA dele,
       defasadas entre si e com a onda vertical invertida.
   Nenhum card se repete: cada parceiro aparece uma única vez, e por isso o
   tamanho do pin é calculado no JS a partir do percurso das fileiras
   (ver initPartners() em js/app.js).

   O carrossel ANTERIOR (autoplay, .prcd/.prcm) está guardado inteiro em
   carrosel.html, na raiz do projeto.
   ============================================================================ */


/* o palco pinado (.prch__stage) já ocupa a viewport inteira, então a seção não
   leva padding vertical; e overflow:hidden aqui QUEBRARIA o position:sticky
   dele — quem recorta as fitas é o próprio palco. */
.parceiros {
  padding-block: 0;
  overflow: visible;
}

/* tipografia do bloco de texto — ele vive dentro do .prch__copy, que cuida da
   largura e do espaçamento entre título, subtítulo e CTA. */
.parceiros__title {
  font-family: var(--font-disp);
  font-weight: 330;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.parceiros__title .mut { color: var(--n-500); }
.parceiros__sub {
  font-family: var(--font-disp);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 17.5px);
  line-height: 1.6;
  color: var(--mut);
}

.prch {
  /* 2 fileiras => card mais baixo. Altura manda, largura sai do aspect 42:55. */
  --card-h: clamp(200px, 33vh, 330px);
  --card-w: calc(var(--card-h) * .764);
  --gap: clamp(12px, 1.6vw, 24px);
  --row-gap: clamp(14px, 2vh, 26px);
  --edge: clamp(20px, 5vw, 40px);
  /* coluna de texto: alinhada à mesma sarjeta do .wrap do site */
  --copy-w: min(46vw, 540px);
  --copy-x: max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2));
  position: relative;
  /* a altura real (= faixa de scroll do pin) é calculada no JS */
}

/* palco pinado: ocupa a viewport inteira e recorta o que sai pelas laterais */
.prch__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── coluna de texto: PARADA. Fica atrás dos cards (z-index) e só perde
   opacidade quando a primeira coluna de cards se aproxima (JS). ── */
.prch__copy {
  position: absolute;
  z-index: 1;
  left: var(--copy-x);
  top: 0; bottom: 0;
  width: var(--copy-w);
  display: flex; flex-direction: column; justify-content: center;
  will-change: opacity;
}
.prch__copy .parceiros__sub { margin-top: clamp(14px, 1.8vw, 22px); }
.prch__copy .parceiros__cta { margin-top: clamp(20px, 2.4vw, 28px); align-self: flex-start; }

/* ── as duas fileiras: z-index 2 = por cima do texto ── */
.prch__rows {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  /* o container ocupa a LARGURA TODA do palco, inclusive onde não há card —
     sem isto ele fica por cima da coluna de texto e engole os cliques do
     CTA. Os cards não são interativos, então nada precisa receber ponteiro. */
  pointer-events: none;
}
/* trilho: fita infinita (o JS duplica o conjunto de cards) e só ele recebe o
   translateX. SEM padding lateral: o passo do loop precisa ser exatamente
   n × (card + gap), e um padding quebraria a periodicidade. A folga inicial
   de leitura entra como deslocamento inicial no JS, não como padding. */
.prch__track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.prch__card {
  position: relative;
  flex: none;
  margin: 0;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  overflow: hidden;
  background-color: #10141c;
  background-image:
    linear-gradient(38deg, #030508e6 0%, #06090eab 28%, #090d1533 55%, transparent 78%),
    radial-gradient(ellipse 95% 80% at 108% 32%, #535ecc40 0%, #38457c24 42%, transparent 76%),
    linear-gradient(135deg, #12171f, #202733 58%, #151b25);
  /* o JS escreve aqui: perspective() + translateY da onda + rotações 3D.
     A perspectiva vai DENTRO do transform do card (e não no trilho) p/ cada
     card ter seu próprio ponto de fuga no centro dele — no trilho, que tem
     ~1500px, os cards das pontas ficariam grotescamente distorcidos. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* a legenda reage à largura do CARD, não da tela: --card-w sai de --card-h,
     que sai de vh — ou seja, depende da ALTURA da viewport. Media query por
     largura não pegaria o caso "notebook baixo" (card estreito). */
  container-type: inline-size;
}
.prch__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* brilho que varre o card conforme ele atravessa a tela (o JS move o X e a
   opacidade). Fica acima da foto e abaixo da legenda. */
.prch__glare {
  position: absolute;
  top: -25%; bottom: -25%;
  left: -55%; width: 85%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(205, 217, 240, .025) 34%,
    rgba(205, 217, 240, .12) 50%,
    rgba(205, 217, 240, .025) 66%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(10px);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

.prch__card::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    linear-gradient(38deg, #0305088c 0%, #05080d38 34%, transparent 65%),
    linear-gradient(180deg, transparent 35%, #05080d24 56%, #05080db8 84%, #05080df0 100%);
}
.prch__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-2); padding: clamp(12px, 1.1vw, 18px);
}
.prch__foll  { font-family: var(--font-disp); font-weight: 329; font-size: 12px; line-height: 1.15; color: var(--n-400); }
.prch__meta  { text-align: right; }
.prch__name  { display: block; font-family: var(--font-disp); font-weight: var(--fw-med); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.12; letter-spacing: -.4px; color: #fff; }
.prch__handle{ display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; font-family: var(--font-disp); font-weight: 329; font-size: 12px; line-height: 1.15; color: var(--n-400); }
.prch__badge { width: 12px; height: 12px; flex: none; }

/* card estreito: "24,2 mil seguidores" + nome não cabem lado a lado — empilha.
   (o limiar tem que cobrir 227px: nesse tamanho os dois blocos somam ~193px
   de texto em ~192px úteis e a legenda quebra em duas linhas) */
@container (max-width: 250px) {
  .prch__cap { flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px; }
  .prch__meta { text-align: left; }
  .prch__name { font-size: 12px; letter-spacing: -.2px; }
  .prch__handle { justify-content: flex-start; margin-top: 2px; font-size: 12px; }
  .prch__foll { order: 3; margin-top: 2px; font-size: 12px; }
  .prch__badge { width: 10px; height: 10px; }
}

/* ── MOBILE: não cabe texto-à-esquerda + cards-à-direita. Empilha: texto em
   cima (parado, sem fade) e as duas fileiras embaixo, ainda pinadas. ── */
@media (max-width: 720px) {
  .prch {
    --card-h: clamp(140px, 22svh, 196px);
    --gap: 10px;
    --row-gap: 10px;
  }
  /* (a legenda empilhada vem do @container acima — o card aqui é estreito) */
  /* o row-gap entre texto e fileiras é escrito pelo JS (= amplitude + folga),
     senão o card ao subir invade o CTA logo acima. */
  .prch__stage { flex-direction: column; justify-content: center; gap: 48px; }
  .prch__copy {
    position: static;
    width: auto; align-self: stretch;
    padding-inline: var(--wrap-pad);
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .prch__rows { flex: none; }
}

/* ── FALLBACK: sem JS ou em janela muito baixa vira carrossel horizontal comum
   (swipe/arrasto nativo), sem pin, sem onda e com o texto em cima. ── */
.prch.is-static .prch__stage,
.prch.is-static .prch__stage { position: static; height: auto; overflow: visible; flex-direction: column; gap: 32px; }
.prch.is-static .prch__copy { position: static; width: auto; align-self: stretch; padding-inline: var(--wrap-pad); opacity: 1 !important; }
.prch.is-static .prch__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-left: var(--edge) !important;
  transform: none !important;
}
.prch.is-static .prch__track::-webkit-scrollbar { display: none; }
.prch.is-static .prch__card { scroll-snap-align: center; transform: none !important; }
.prch.is-static .prch__glare { display: none; }


/* Adaptação Notasy: tipografia e cores; geometria e efeito da Contasy v3-merge. */
.parceiros {
  --font-disp: "DM Sans", sans-serif;
  --fw-med: 500;
  --ls-tight: -.035em;
  --ink: #fff;
  --n-400: #94a3b8;
  --n-500: #aeb9ca;
  --mut: #94a3b8;
  --sp-2: 8px;
  --wrap-pad: 40px;
  --wrap-max: 1140px;
}
.parceiros .prch { --copy-w: min(1050px, calc(100% - 80px)); }
.parceiros__title { margin: 0; font-size: clamp(36px, 3.4vw, 48px); font-weight: 500; line-height: 1.12; }
.parceiros__title > span,
.parceiros__sub > span { display: block; }
.parceiros__sub { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.75; }
.parceiros__cta { gap: 13px; }
.parceiros__cta .cta-arrow { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.prch__stage { padding-top: 70px; }
.prch__copy { padding-top: 70px; }
.prch__name { display: flex; align-items: center; gap: 5px; }
.prch__name .prch__badge { width: 15px; height: 15px; flex: none; margin: 0; }
.prch__foll,
.prch__handle { font-weight: 400; }
.prch.is-static .prch__copy { padding-top: 0; width: 100%; }
.prch.is-static .prch__rows { pointer-events: auto; }
.prch.is-static .prch__card { opacity: 1 !important; }
.prch.is-static .prch__track:focus-visible { outline: 2px solid #818cf8; outline-offset: 4px; }
@media (max-width: 720px) {
  .parceiros .prch { --copy-w: 100%; }
  .prch__copy { padding-top: 0; }
  .prch__stage { min-height: 100svh; height: auto; padding-block: 48px; }
}

/* Asymmetric studio haze: graphite body, faint indigo at its outer edges. */
.prch__stage { isolation:isolate; }
.prch__stage::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform:skewX(-12deg) rotate(-7deg) scale(.96);
  opacity:var(--copy-haze-opacity,1);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent),linear-gradient(transparent,#000 17%,#000 78%,transparent);
  mask-composite:intersect;
}
@media(max-width:720px) {
  .prch__stage::before { transform:none; opacity:.8; }
}

@media (max-width: 720px) {
  .prch__glare {
    filter: none;
    will-change: auto;
    transform: translateX(92.5%) !important;
    opacity: .12 !important;
  }
}