/* ===========================================================================
   Componente "camisa" — a camisa que gira (versão em CSS 3D).
   É um bloco separado de propósito: quando a camisa 3D de verdade (WebGL) ficar pronta,
   só este CSS e o camisa.js são trocados. O index.html e o script.js continuam iguais.
   Usa as variáveis de cor do site (--texto, --marca, --ouro).
   =========================================================================== */
.camisa-comp { --camisa-alt: clamp(320px, 52svh, 460px); margin: 16px auto 0; width: 100%; }

/* sem JavaScript: as duas imagens lado a lado, paradas */
.camisa-comp__estatico { display: flex; gap: 12px; justify-content: center; align-items: flex-end; }
.camisa-comp__estatico img { width: 44%; max-width: 200px; height: auto; display: block; }

/* com JavaScript: palco com perspectiva suave */
.camisa-comp__cena { position: relative; height: calc(var(--camisa-alt) + 44px); perspective: 1300px; perspective-origin: 50% 38%;
  touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.camisa-comp__pivo { position: absolute; left: 50%; top: 14px; width: calc(var(--camisa-alt) * .529); height: var(--camisa-alt); margin-left: calc(var(--camisa-alt) * -.2645);
  transform-style: preserve-3d; will-change: transform; }
.camisa-comp__pivo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.camisa-comp__frente { transform: translateZ(3px); backface-visibility: hidden; }
.camisa-comp__costas { transform: rotateY(180deg) translateZ(3px); backface-visibility: hidden; }
/* fatias escuras no meio dão "espessura" quando a camisa está de lado */
.camisa-comp__fatia { filter: brightness(.16); }
.camisa-comp__sombra { position: absolute; left: 50%; bottom: 2px; width: calc(var(--camisa-alt) * .5); height: 22px; margin-left: calc(var(--camisa-alt) * -.25);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), rgba(0,0,0,0) 70%); will-change: transform, opacity; pointer-events: none; }

.camisa-comp__botoes { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.camisa-comp__botoes button { height: 48px; min-width: 84px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--marca); background: transparent; color: var(--texto);
  font: 700 14px/1 var(--corpo); cursor: pointer; }
.camisa-comp__botoes button[aria-pressed="true"] { background: var(--ouro); color: #161810; border-color: var(--ouro); }
.camisa-comp__botoes [hidden] { display: none; }

/* Com JavaScript, a versão parada ocupa a mesma altura do palco 3D: assim a página não "pula" quando o 3D é montado (e o pulo faria os botões de âncora pararem fora do lugar). */
.js .camisa-comp { min-height: calc(var(--camisa-alt) + 44px + 54px); display: flex; flex-direction: column; justify-content: center; }