/* stii.cards (14/10/2026): o jeito da loja Ourlet (x.appp.to/z/w-loja), refeito em html simples */
* { box-sizing: border-box; margin: 0; padding: 0; }
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }
:root { --tinta: #111; --cinza: #6b6b6b; --fundo: #fff; --vermelho: #f00; --placa: #ececec; --creme: #fbf4e8; }
html { background: var(--fundo); color: var(--tinta); font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.faixa { background: #0d0d0d; color: #fff; font-size: 14px; font-weight: 500; text-align: center; padding: 10px 16px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 22px 16px; max-width: 1200px; margin: 0 auto; }
.marca { font-size: 26px; font-weight: 700; letter-spacing: -0.06em; }
.preco-topo { font-size: 15px; font-weight: 500; color: var(--cinza); }
.miolo { max-width: 1200px; margin: 0 auto; padding: 0 16px 80px; }
h1 { font-size: clamp(44px, 12vw, 104px); line-height: 0.98; font-weight: 700; letter-spacing: -0.065em; margin: 40px 0 28px; text-wrap: balance; }
.texto { font-size: 17px; line-height: 1.55; max-width: 34em; text-wrap: balance; }
.botoes { display: flex; gap: 8px; margin: 32px 0 48px; flex-wrap: wrap; }
.botao { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; font: 500 16px/1 inherit; font-family: inherit; border: 0; cursor: pointer; }
.botao.vermelho { background: var(--vermelho); color: #fff; }
.botao.cinza { background: var(--placa); color: var(--tinta); }
.botao[disabled] { opacity: .5; cursor: default; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .grade { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.item .placa { background: var(--placa); aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.item .linha { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0 28px; font-size: 16px; line-height: 1.3; }
.item .linha span:last-child { color: var(--cinza); white-space: nowrap; }

/* a caixa 3D do deck: as faces são montadas pelo caixa.js */
.caixa { position: relative; transform-style: preserve-3d; }
.face { position: absolute; left: 0; top: 0; background: var(--creme); backface-visibility: visible; border-radius: 6px; }
.face.frente { background: transparent; transform-origin: left center; }
.face.frente img, .face.dentro img { width: 100%; height: 100%; display: block; border-radius: 10px; -webkit-user-drag: none; user-select: none; }
.face.frente.virada { background: #efe5d3; border-radius: 10px; }
.face.frente.virada img { visibility: hidden; }
.face.dentro { background: transparent; }
.face.lado { background: linear-gradient(90deg, #efe6d6, #f8f0e2); }
.face.cima { background: #f3ead9; }
.face.baixo { background: #e3d8c4; }
.face.tras { background: #e9dfcc; }
.face .nome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .5em; color: #9a8c74; font-weight: 500; }
@keyframes balanca { 0%, 100% { transform: rotateX(-12deg) rotateY(-34deg) translateY(0); } 50% { transform: rotateX(-16deg) rotateY(-24deg) translateY(-6px); } }
.caixa.viva { animation: balanca 5s ease-in-out infinite; }