/* Leque das peças — composição parada.
 *
 * Era uma cena presa à rolagem, com 2,4 telas de pista. No celular sobrava um
 * vazio grande antes das peças aparecerem e o texto acabava por baixo delas.
 * Virou bloco estático: a mesma composição, na altura do próprio conteúdo.
 *
 * O 3D continua sendo CSS de verdade — perspectiva na cena, giro e
 * profundidade em cada peça. Só não se move mais.
 */

.p3 { position: relative; }

.p3-pista { height: auto; }

.p3-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 0 8px;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.p3-cena {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 420px);
  height: 420px;                 /* altura justa do leque, sem sobra */
  transform-style: preserve-3d;
}

/* Cada peça já nasce no lugar: --xf/--yf/--rzf/--z são o destino.
   As variáveis de partida (--x/--y/--ry/--rz) seguem no HTML sem efeito. */
.p3-peca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--larg, 150px);
  transform-style: preserve-3d;
  transform:
    translate(-50%, -50%)
    translate3d(var(--xf, 0px), var(--yf, 0px), var(--z, 0px))
    rotateZ(var(--rzf, 0deg));
}

.p3-peca img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .14),
    0 26px 44px rgba(0, 0, 0, .55),
    0 6px 14px rgba(0, 0, 0, .4);
}

/* verniz: a faixa de luz parada no laminado */
.p3-peca::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, .16) 46%,
    rgba(255, 255, 255, 0) 60%);
}

.p3-cartao { --larg: 96px; }
.p3-placa  { --larg: 168px; }

.p3-txt {
  flex: 0 0 auto;
  width: min(94%, 340px);
  padding: 0 4px;
  text-align: center;
}
.p3-txt .p3-kick {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}
.p3-txt h2 { margin: 0 0 8px; line-height: 1.08; }
.p3-txt p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: .72; }

@media (max-width: 400px) {
  .p3-cena   { height: 392px; }
  .p3-cartao { --larg: 86px; }
  .p3-placa  { --larg: 150px; }
}

/* Abaixo de 380 px a pegada das peças giradas ainda encostava na borda.
   O giro em Z aumenta a largura ocupada: 150 px de placa a 9° ocupa ~183. */
@media (max-width: 380px) {
  .p3-cena   { height: 372px; }
  .p3-cartao { --larg: 74px; }
  .p3-placa  { --larg: 126px; }
}