/* ══════════════════════════════════
   PROVA SOCIAL — carrossel fan
══════════════════════════════════ */
.social-sec{
  padding:100px 0;
  position:relative;
  z-index:1;
  /* overflow:visible so side cards are not clipped */
}
.social-sec .sec-head{ margin-bottom:72px; }

/* Stage */
.social-stage{
  position:relative;
  height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* prevent clipping side cards */
  overflow:visible;
}

/* ── Card base ─────────────────── */
.sp-card{
  position:absolute;
  width:260px;
  border-radius:20px;
  overflow:hidden; /* clips card images correctly */
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  /* ALL visual state driven by CSS vars set inline by JS */
  --sp-x:0px;
  --sp-y:0px;
  --sp-scale:1;
  --sp-rot:0deg;
  --sp-op:0;
  --sp-z:1;
  transform: translateX(var(--sp-x)) translateY(var(--sp-y)) scale(var(--sp-scale)) rotate(var(--sp-rot));
  opacity: var(--sp-op);
  z-index: var(--sp-z);
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    opacity   .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}
/* Only center card is clickable */
.sp-card.sp-center{ pointer-events:auto; cursor:default; }

/* Image fills card */
.sp-card img{
  width:100%;
  display:block;
  pointer-events:none;
  border-radius:20px;
}

/* Placeholder */
.sp-placeholder{
  width:100%;
  aspect-ratio:9/16;
  background:rgba(255,255,255,.04);
  border:2px dashed rgba(255,255,255,.12);
  border-radius:20px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;
  color:var(--muted);
  font-family:var(--ffm);
  font-size:.68rem;
  letter-spacing:.08em;
  text-align:center;
  padding:28px;
}
.sp-placeholder i{ font-size:2.2rem; color:var(--subtle); }

/* Dark overlay on side cards */
.sp-card::after{
  content:'';
  position:absolute;inset:0;
  border-radius:20px;
  background:rgba(9,9,11,0);
  transition:background .55s;
  pointer-events:none;
}
.sp-card.sp-side::after{
  background:rgba(9,9,11,.3);
}

/* ── Navigation ─────────────────── */
.social-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:44px;
}
.sp-btn{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.sp-btn:hover{
  background:rgba(59,130,246,.18);
  border-color:rgba(59,130,246,.35);
}
.sp-btn:active{ transform:scale(.9); }

/* Dots */
.sp-dots{
  display:flex;align-items:center;gap:8px;
}
.sp-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .3s,transform .3s,width .3s;
  cursor:pointer;
  border:none;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.sp-dot.active{
  background:var(--blueb);
  transform:scale(1.5);
}

/* Mobile */
@media(max-width:560px){
  .social-stage{ height:400px; }
  .sp-card{ width:200px; }
}