/* previa-viva.css · a placa da prévia (depois do direcao.css). Inclinação leve: precisa ser lida. */
.lap-previa { --lap-pv-pose: rotateX(14deg) rotateY(-16deg) rotateZ(-2deg); position: relative; min-width: 0; padding: var(--espaco-4) var(--espaco-2) var(--espaco-8); perspective: 900px; }
.lap-pv-cena { position: relative; transform-style: preserve-3d; animation: lap-pv-flutua 8s ease-in-out infinite; }
.lap-pv-placa { position: relative; transform-style: preserve-3d; transform: var(--lap-pv-pose); transition: transform .6s var(--lap-curva); }
.lap-previa:hover .lap-pv-placa { transform: rotateX(8deg) rotateY(-8deg) rotateZ(-1deg) translateZ(10px); }
.lap-pv-face {
  position: relative; display: grid; gap: var(--espaco-4); padding: var(--espaco-5); border-radius: var(--raio-4); overflow: hidden;
  background:
    linear-gradient(115deg, transparent 30%, var(--lap-luz-4) 38%, var(--lap-luz-10) 44%, transparent 54%) 20% 0 / 260% 100% no-repeat,
    radial-gradient(70% 90% at 100% 0%, color-mix(in oklch, var(--lap-marca-clara) 30%, transparent), transparent 70%),
    repeating-linear-gradient(98deg, var(--lap-luz-2) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--lap-metal-2), var(--lap-metal-3) 55%, var(--lap-metal-4));
  box-shadow: inset 0 1px 0 var(--lap-luz-42), inset 0 0 0 1px var(--lap-luz-6), inset -1px 0 0 color-mix(in oklch, var(--lap-marca-clara) 45%, transparent);
  transition: background-position 1s var(--lap-curva);
}
.lap-previa:hover .lap-pv-face { background-position: 90% 0, 0 0, 0 0, 0 0; }
.lap-pv-espessura {
  position: absolute; inset: 0; border-radius: var(--raio-4); transform: translateZ(-3px);
  background: linear-gradient(180deg, var(--lap-metal-1), var(--lap-metal-4) 60%);
  box-shadow: 0 2px 2px var(--lap-breu-50), 0 22px 34px -10px var(--lap-breu-70), 0 30px 50px -18px color-mix(in oklch, var(--cor-marca) 40%, transparent);
}
.lap-pv-chao { position: absolute; left: 10%; right: 10%; bottom: -28px; height: 32px; border-radius: 50%; background: radial-gradient(closest-side, var(--lap-breu-70), transparent); filter: blur(8px); }
.lap-pv-topo { display: flex; align-items: center; gap: var(--espaco-2); }
.lap-pv-titulo { font: var(--lap-rotulo); color: var(--cor-texto-2); margin-right: auto; }
.lap-pv-simbolo { width: 20px; height: 20px; color: var(--cor-texto); filter: drop-shadow(0 0 6px var(--lap-marca-brilho)); }
.lap-pv-simbolo svg { width: 100%; height: 100%; display: block; }
.lap-pv-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-4); }
.lap-pv-campo { display: grid; gap: var(--espaco-1); min-width: 0; }
.lap-pv-direita { text-align: right; justify-items: end; }
.lap-pv-rotulo { font: var(--lap-rotulo); color: var(--cor-texto-3); }
.lap-pv-valor { color: var(--cor-texto); font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lap-pv-destaque .lap-pv-valor { font-size: var(--texto-xl); line-height: var(--linha-xl); letter-spacing: -0.03em; }
.lap-pv-falsa { display: block; height: 10px; border-radius: 5px; background: var(--lap-luz-10); }
.lap-pv-destaque .lap-pv-falsa { height: 20px; border-radius: 6px; }
@keyframes lap-pv-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .lap-pv-cena { animation: none; } .lap-pv-placa, .lap-pv-face { transition: none; } .lap-previa:hover .lap-pv-placa { transform: var(--lap-pv-pose); } }