/*
  Prova Social Autoridades, componente Reconecta
  Fidelidade visual a referencia: TheMembers (.social-proof)

  Especificacoes replicadas (extraidas do CSS original):
    Section padding: 100px 0 80px
    H2 size: clamp(26px, 3vw, 38px), text-align center, max 820px
    Subhead: 14px (mobile) / 15px (>= mobile), line-height 1.7, muted
    Marquee mask: linear-gradient com 24px fade
    Animation LTR: 60s linear infinite, translateX -50% -> 0
    Animation RTL: 60s linear infinite, translateX 0 -> -50%
    Animation logos: 40s linear infinite
    Player card width: 180px > 165 (<=1280) > 150 (<=1024) > 140 (<=768) > 120 (<=640)
    Player card border-radius: 10px, aspect 210x294 (~0.714)
    Logo card height: 28 > 24 > 22 > 20px (responsive)
    Track gap: 12px > 10px (<=768) > 8px (<=640)
    Btn: pill (radius 100px), gradient azul

  Adaptado para Reconecta:
    Mantida paleta dark do original (este componente vive em fundo preto,
    visual de "wall of authorities"). Token --psa-bg pode ser sobrescrito
    para outras cores se o site host pedir.
    Botao: gradient azul TheMembers trocado por vermelho Reconecta #D3111A.
*/

.prova-social-autoridades,
.prova-social-autoridades *,
.prova-social-autoridades *::before,
.prova-social-autoridades *::after {
  box-sizing: border-box;
}

.prova-social-autoridades {
  /* TOKENS, sobrescriviveis */
  --psa-bg:               #000000;
  --psa-text:             #efefef;
  --psa-text-muted:       hsla(0, 0%, 94%, 0.55);
  --psa-text-emphasis:    #ffffff;
  --psa-card-bg:          #111111;
  --psa-card-radius:      10px;
  --psa-card-name-bg:     linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
  --psa-accent:           var(--color-red-light, #D3111A);
  --psa-accent-dark:      var(--color-red-dark,  #4C000D);

  --psa-font-body:        var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);

  /* DIMENSOES, card e track */
  --psa-card-width:       120px;
  --psa-card-aspect:      210 / 294;
  --psa-card-gap:         8px;
  --psa-logo-height:      20px;
  --psa-logo-padding-x:   8px;

  --psa-mask-fade:        24px;

  /* ANIMATIONS */
  --psa-marquee-duration:        60s;
  --psa-marquee-duration-logos:  40s;

  /* LAYOUT */
  --psa-section-pad-top:    72px;
  --psa-section-pad-bottom:  56px;
  --psa-container-max:     1240px;
  --psa-container-pad:        20px;
  --psa-marquee-mt:           32px;
  --psa-marquee-gap-sm:       10px;
  --psa-marquee-gap-lg:       24px;
  --psa-cta-mt:               40px;

  background: var(--psa-bg);
  color: var(--psa-text);
  padding: var(--psa-section-pad-top) 0 var(--psa-section-pad-bottom);
  font-family: var(--psa-font-body);
  position: relative;
  overflow: hidden;
}

.prova-social-autoridades__container {
  max-width: var(--psa-container-max);
  margin: 0 auto;
  padding-inline: var(--psa-container-pad);
  position: relative;
  z-index: 1;
}

/* ============ HEADER ============ */
.prova-social-autoridades__title {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--psa-font-body);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--psa-text-emphasis);
  letter-spacing: -0.01em;
}

.prova-social-autoridades__title-em {
  font-weight: 600;
  color: var(--psa-text-emphasis);
}

.prova-social-autoridades__subhead {
  margin: 16px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--psa-text-muted);
  text-wrap: balance;
}

.prova-social-autoridades__subhead strong {
  color: var(--psa-text-emphasis);
  font-weight: 500;
}

.prova-social-autoridades__desktop-br {
  display: none;
}

/* ============ MARQUEES ============ */
.prova-social-autoridades__marquee {
  overflow: hidden;
  width: 100%;
  margin-top: var(--psa-marquee-mt);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--psa-mask-fade),
    #000 calc(100% - var(--psa-mask-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--psa-mask-fade),
    #000 calc(100% - var(--psa-mask-fade)),
    transparent 100%
  );
}

.prova-social-autoridades__marquee--mb {
  margin-bottom: var(--psa-marquee-gap-sm);
}

.prova-social-autoridades__marquee--mb-lg {
  margin-bottom: var(--psa-marquee-gap-lg);
}

.prova-social-autoridades__track {
  display: flex;
  width: max-content;
  gap: var(--psa-card-gap);
  will-change: transform;
  align-items: center;
}

.prova-social-autoridades__track[data-direction="ltr"] {
  animation: psa-marquee-ltr var(--psa-marquee-duration) linear infinite;
}

.prova-social-autoridades__track[data-direction="rtl"] {
  animation: psa-marquee-rtl var(--psa-marquee-duration) linear infinite;
}

.prova-social-autoridades__track--logos[data-direction="ltr"] {
  animation: psa-marquee-ltr var(--psa-marquee-duration-logos) linear infinite;
}

@keyframes psa-marquee-ltr {
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes psa-marquee-rtl {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Pausa no hover de cada linha (acessibilidade) */
.prova-social-autoridades__marquee:hover .prova-social-autoridades__track,
.prova-social-autoridades__marquee:focus-within .prova-social-autoridades__track {
  animation-play-state: paused;
}

/* ============ PLAYER CARDS ============ */
.prova-social-autoridades__card {
  flex-shrink: 0;
  width: var(--psa-card-width);
  aspect-ratio: var(--psa-card-aspect);
  border-radius: var(--psa-card-radius);
  overflow: hidden;
  background: var(--psa-card-bg);
  position: relative;
  margin: 0;
  cursor: default;
}

.prova-social-autoridades__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  color: transparent;
}

.prova-social-autoridades__card-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 10px 8px;
  background: var(--psa-card-name-bg);
  color: var(--psa-text-emphasis);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -0.005em;
}

.prova-social-autoridades__card-handle {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--psa-text-muted, hsla(0,0%,94%,0.55));
  margin-top: 3px;
  letter-spacing: 0.01em;
  font-family: var(--psa-font-body);
}


/* ============ LOGOS ============ */
.prova-social-autoridades__logo-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--psa-logo-height);
  padding: 0 var(--psa-logo-padding-x);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.prova-social-autoridades__logo-card:hover {
  opacity: 0.9;
}

.prova-social-autoridades__logo-img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* ============ CTA ============ */
.prova-social-autoridades__cta {
  margin-top: var(--psa-cta-mt);
  text-align: center;
}

.prova-social-autoridades__cta-lead {
  font-size: 13px;
  color: var(--psa-text-muted);
  margin: 0 0 20px;
}

.prova-social-autoridades__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px 13px 28px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  font-family: var(--psa-font-body);
  letter-spacing: -0.005em;
  background: var(--psa-accent);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(211, 17, 26, 0.35),
    0 4px 16px -4px rgba(211, 17, 26, 0.4);
}

.prova-social-autoridades__btn:hover,
.prova-social-autoridades__btn:focus-visible {
  transform: translateY(-1px);
  background: var(--psa-accent-dark);
  box-shadow:
    0 0 0 1px rgba(211, 17, 26, 0.55),
    0 8px 24px -4px rgba(211, 17, 26, 0.55);
}

.prova-social-autoridades__btn-arrow {
  background: rgba(255, 255, 255, 0.18);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  font-size: 11px;
}

.prova-social-autoridades__btn:hover .prova-social-autoridades__btn-arrow {
  transform: translateX(2px);
}

/* ============ RESPONSIVE ============ */
@media (min-width: 641px) {
  .prova-social-autoridades {
    --psa-card-width: 140px;
    --psa-card-gap:   10px;
    --psa-logo-height: 22px;
    --psa-logo-padding-x: 10px;
  }
}

@media (min-width: 769px) {
  .prova-social-autoridades {
    --psa-section-pad-top:    100px;
    --psa-section-pad-bottom:  80px;
    --psa-container-pad:       32px;
    --psa-card-width:         150px;
    --psa-card-gap:            12px;
    --psa-logo-height:         24px;
    --psa-logo-padding-x:      14px;
    --psa-marquee-mt:          40px;
    --psa-marquee-gap-sm:      12px;
    --psa-marquee-gap-lg:      48px;
    --psa-cta-mt:              56px;
  }
  .prova-social-autoridades__subhead {
    font-size: 15px;
  }
  .prova-social-autoridades__desktop-br {
    display: inline;
  }
}

@media (min-width: 1025px) {
  .prova-social-autoridades {
    --psa-card-width:    165px;
    --psa-logo-height:   28px;
    --psa-logo-padding-x: 16px;
  }
}

@media (min-width: 1281px) {
  .prova-social-autoridades {
    --psa-card-width: 180px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .prova-social-autoridades__track {
    animation: none !important;
  }
  .prova-social-autoridades__marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .prova-social-autoridades__card,
  .prova-social-autoridades__logo-card {
    scroll-snap-align: start;
  }
  .prova-social-autoridades__btn {
    transition: none;
  }
}

/* ============ NO-JS FALLBACK ============ */
.prova-social-autoridades:not([data-marquee-ready]) .prova-social-autoridades__marquee {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-mask-image: none;
          mask-image: none;
}
.prova-social-autoridades:not([data-marquee-ready]) .prova-social-autoridades__track {
  animation: none;
}