/* Landing D v6 (09/10/2026): o charme do celular, em CSS 3D (ver assets/js/celular3d.js).
   Diferente do 3D reprovado da publicada: nada de 8 camadas empilhadas nem lateral chapada; o giro é contido
   (no máximo ~18°), o aro é metálico com um reflexo que corre, as laterais são finas e reais (preserve-3d), a tela
   ganha brilho e continua sendo a gravação REAL. Aparelho genérico (sem marca nem câmera de iPhone). */
html.c3d .aparelho.vivo3d.vivo3d { transform-style: preserve-3d; will-change: transform; }
/* laterais: duas faixas metálicas dobradas a 90°, do tamanho da parte reta da borda */
.c3d-lado {
  position: absolute; top: calc(var(--tam, 300px) * .16); bottom: calc(var(--tam, 300px) * .16); width: calc(var(--tam, 300px) * .036);
  background: linear-gradient(180deg, #4A5262 0%, #A7AFBF 18%, #5C6475 50%, #B8C0CF 82%, #4A5262 100%); pointer-events: none; border-radius: 2px;
}
.c3d-lado.e { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.c3d-lado.d { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
/* aro metálico: no próprio aparelho, parado (pintado uma vez; o reflexo que anda fica no brilho da tela) */
html.c3d .aparelho.vivo3d.vivo3d { border: calc(var(--tam, 300px) * .009) solid transparent;
  background: linear-gradient(160deg, #1C2230 0%, #0A0D14 38%, #05070C 100%) padding-box,
              linear-gradient(140deg, #A9B1C1 0%, #3A414F 26%, #D5DBE5 48%, #3A414F 70%, #9BA4B5 100%) border-box; }
/* brilho na tela: um vidro que pega a luz de leve; anda com o giro */
.c3d-brilho {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, 0) 60%);
  will-change: transform;
}
/* sombra no chão, atrás do aparelho, e a aura na cor da seção (mais forte quando a rolagem acelera) */
.c3d-sombra {
  position: absolute; left: 10%; right: 10%; bottom: -7%; height: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 18, 32, .42), rgba(11, 18, 32, 0));
  transform: translate3d(0, 0, -40px);
}
.c3d-aura {   /* irmã 2D, atrás do aparelho: só a opacidade muda */
  position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; opacity: .6; will-change: opacity;
  left: 50%; top: 46%; width: 150%; height: 115%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--aura), .42), rgba(var(--aura), .14) 50%, rgba(var(--aura), 0) 76%);
}
.hero-visual > .c3d-aura { left: calc(var(--tam-heroi, 280px) * .5); top: auto; bottom: calc(var(--tam-heroi, 280px) * -.2); width: calc(var(--tam-heroi, 280px) * 2); height: calc(var(--tam-heroi, 280px) * 2.7); transform: translateX(-50%); }
.premium-aparelho > .aparelho, .cartaz-aparelho > .aparelho { position: relative; z-index: 2; }
.c3d-palco { position: relative; }
/* 10/10/2026: o palco da HISTÓRIA é o .grudado, que precisa continuar sticky (o relative acima fazia o celular rolar junto). */
.grudado.c3d-palco { position: sticky; }
.c3d-particulas { position: absolute; inset: -6% -10%; width: 120%; height: 112%; pointer-events: none; z-index: 1; opacity: .85; }
.hero-visual .c3d-particulas { inset: auto auto 0 -4%; width: calc(var(--tam-heroi, 280px) * 1.9); height: calc(var(--tam-heroi, 280px) * 2.6); }
.cartaz-aparelho { position: relative; }
@media (max-width: 760px) {
  .c3d-aura { width: 130%; height: 105%; }
  .c3d-particulas { opacity: .6; }
}
/* modo leve (o script detectou quadros lentos): sem partículas e sem laterais */
html.c3d-leve .c3d-particulas, html.c3d-leve .c3d-lado { display: none; }