/* Carrossel de posts Instagram — Figma 33561:287 / handoff 15-carrossel-posts.html
   Overlay 2000×4121; furo do feed x58 y636 w1892 h2360 (4:5, igual às artes). */
.lp-posts { width: 100%; }
.lp-posts__stage {
  /* Recorte até “Ver tradução” (y 3540 de 4121): mostra o post maior
     e só o cromo necessário do celular, sem a barra de navegação. */
  --phone-w: 38cqw;
  --phone-pad: 2cqw;
  --phone-top: var(--phone-pad);
  --ov-w: 2000;
  --ov-h: 4121;
  --clip-h: 3540;
  --hole-x: 58;
  --hole-y: 636;
  --hole-w: 1892;
  --hole-h: 2360;
  --bleed: .25cqw;
  --win-x: calc(var(--phone-w) * var(--hole-x) / var(--ov-w) - var(--bleed));
  --win-y: calc(var(--phone-w) * var(--hole-y) / var(--ov-w) - var(--bleed));
  --win-w: calc(var(--phone-w) * var(--hole-w) / var(--ov-w) + var(--bleed) * 2);
  --win-h: calc(var(--phone-w) * var(--hole-h) / var(--ov-w) + var(--bleed) * 2);
  --side-scale: .97;
  --side-gap: .8cqw;
  --card-gap: calc(var(--side-gap) - var(--win-w) * (1 - var(--side-scale)));
  --step: calc(var(--win-w) + var(--card-gap));

  position: relative;
  container-type: inline-size;
  aspect-ratio: 782 / 542;
  border-radius: var(--lp-radius-panel, 17px);
  overflow: hidden;
  background: linear-gradient(180deg, #f6f6f8, #e8e9ec);
  box-shadow: var(--lp-shadow-panel, 0 30px 80px rgba(0,0,0,.08));
}

.lp-posts__rail { position: absolute; inset: 0; }
.lp-posts__track {
  position: absolute;
  left: calc(50% - var(--phone-w) / 2 + var(--win-x));
  top: calc(var(--phone-top) + var(--win-y));
  display: flex;
  transform: translateX(calc(var(--i, 0) * -1 * var(--step)));
  transition: transform 800ms var(--lp-ease-inout, cubic-bezier(.65, 0, .35, 1));
  will-change: transform;
}
.lp-posts__card {
  flex: none;
  width: var(--win-w);
  height: var(--win-h);
  border-radius: 1.15cqw;
  overflow: hidden;
  box-shadow: 0 1cqw 2.8cqw rgba(16, 24, 40, .16);
  transform: scale(var(--side-scale));
  transform-origin: center center;
  transition: transform 800ms var(--lp-ease-inout, cubic-bezier(.65, 0, .35, 1)), border-radius 800ms var(--lp-ease-inout, cubic-bezier(.65, 0, .35, 1));
}
.lp-posts__card + .lp-posts__card { margin-left: var(--card-gap); }
.lp-posts__card.is-active { transform: scale(1); border-radius: 0; }
.lp-posts__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.lp-posts__card.is-active img {
  transform: none;
}
.lp-posts__track.is-snapping,
.lp-posts__track.is-snapping .lp-posts__card { transition: none; }

.lp-posts__phone {
  position: absolute;
  left: calc(50% - var(--phone-w) / 2);
  top: var(--phone-top);
  width: var(--phone-w);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1.4cqw 3.2cqw rgba(16, 24, 40, .22));
}
.lp-posts__phone img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .lp-posts__stage {
    aspect-ratio: 4 / 5;
    --phone-w: 64cqw;
    --phone-pad: 3cqw;
    --side-gap: 4cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-posts__track,
  .lp-posts__card { transition: none; }
}