/* Banner "arara": peças penduradas que viram de frente ao passar o mouse.
   Tudo com prefixo tza- para não colidir com o CSS da loja. */
.tza { --tza-fundo: transparent; --tza-texto: #2D2520; --tza-suave: #6B6158; --tza-preco: #E0851F; --tza-altura: 300px;
  background: var(--tza-fundo); color: var(--tza-texto); padding: 24px 0 36px; text-align: center; }
.tza * { box-sizing: border-box; }
.tza .tza-titulo { font-family: 'Pompiere', cursive; font-weight: 400; font-size: 46px; line-height: 1.05; letter-spacing: .5px;
  text-transform: none; color: var(--tza-texto); margin: 6px 0 4px; padding: 0; }
.tza .tza-titulo::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 999px; background: #F39C44; margin: 6px auto 0; }
.tza-sub { font-size: 13px; color: var(--tza-suave); margin: 8px 0 22px; }

.tza-arara { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-top: 14px; }
.tza-arara::-webkit-scrollbar { display: none; }
.tza-trilho { display: flex; justify-content: center; gap: 6px; min-width: max-content; margin: 0 auto; padding: 0 40px; position: relative; }
/* trilho de madeira clara, pontas arredondadas, no tom da loja */
.tza-barra { position: absolute; left: 14px; right: 14px; top: 0; height: 8px; border-radius: 8px;
  background: linear-gradient(#e9c9a3, #c99a6b 55%, #a87a4f); box-shadow: 0 4px 8px rgba(120,80,40,.15); }


.tza-peca { position: relative; display: block; width: 104px; height: calc(var(--tza-altura) + 48px); flex: none;
  color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: width .75s cubic-bezier(.22,1,.36,1); }
.tza-peca.virada { width: 290px; }
.tza-peca:hover, .tza-peca:focus { text-decoration: none; color: inherit; }

.tza-entrada, .tza-balanco { position: absolute; inset: 0; transform-origin: 50% 0; }
.tza-gancho { position: absolute; left: 50%; top: -12px; width: 26px; margin-left: -13px; z-index: 3; }

/* giro em 3D: a lateral sai girando e a frente entra girando, com sobreposição */
.tza-giro { position: absolute; inset: 0; perspective: 900px; }
.tza-cabide, .tza-giro img { backface-visibility: hidden; will-change: transform, opacity; }
.tza-cabide { position: absolute; left: 50%; top: 10px; width: 170px; margin-left: -85px; z-index: 0;
  transform: rotateY(82deg); opacity: .9;
  transition: transform .5s cubic-bezier(.4,0,.2,1); }
.tza-peca.virada .tza-cabide { transform: rotateY(0); transition: transform .65s cubic-bezier(.22,1,.36,1) .12s; }

.tza-giro img { position: absolute; left: 50%; top: -6px; height: var(--tza-altura); width: auto; max-width: none;
  pointer-events: none; -webkit-user-drag: none; z-index: 1; }
.tza-lado { transform: translateX(-50%) rotateY(0); opacity: 1;
  transition: transform .55s cubic-bezier(.22,1,.36,1) .15s, opacity .3s ease .2s; }
.tza-frente { transform: translateX(-50%) rotateY(-75deg); opacity: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.tza-peca.virada .tza-lado { transform: translateX(-50%) rotateY(75deg); opacity: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .25s ease .1s; }
.tza-peca.virada .tza-frente { transform: translateX(-50%) rotateY(0); opacity: 1;
  transition: transform .7s cubic-bezier(.22,1,.36,1) .12s, opacity .3s ease .12s; }

.tza-etiqueta { position: absolute; left: 50%; top: 18px; margin-left: 10px; z-index: 4; width: 12px; height: 18px;
  border-radius: 2px; background: #e8743b; transform: rotate(14deg); }
.tza-nome, .tza-preco { position: absolute; left: 0; right: 0; white-space: nowrap; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s; }
.tza-nome { bottom: 22px; font-size: 12.5px; color: var(--tza-suave); }
.tza-preco { bottom: 0; font-size: 16px; font-weight: 700; color: var(--tza-preco); }
.tza-peca.virada .tza-nome { opacity: 1; transform: none; transition-delay: .3s; }
.tza-peca.virada .tza-preco { opacity: 1; transform: none; transition-delay: .38s; }

.tza-chamada, .tza-chamada:hover, .tza-chamada:focus { margin-top: 22px; display: inline-block; padding: 12px 30px; border-radius: 999px;
  background: #F39C44; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tza-chamada:hover { background: #E0851F; }

/* entrada: as peças deslizam pelo trilho quando o banner aparece */
.tza-arara.pronta .tza-entrada { animation: tza-chega 1.2s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * .09s); }
.tza-arara:not(.pronta) .tza-entrada { opacity: 0; }
@keyframes tza-chega {
  0% { opacity: 0; transform: translateX(160px) rotate(-6deg); }
  50% { opacity: 1; transform: translateX(-5px) rotate(2.5deg); }
  75% { transform: translateX(2px) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

/* setas: para quem não consegue arrastar a arara de lado */
.tza-palco { position: relative; }
.tza-seta { position: absolute; top: 50%; z-index: 6; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid #eadfd3; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #2D2520; cursor: pointer; box-shadow: 0 4px 14px rgba(45,37,32,.12);
  transition: opacity .25s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.tza-seta svg { width: 20px; height: 20px; }
.tza-seta:hover { background: #F39C44; border-color: #F39C44; color: #fff; }
.tza-seta:focus-visible { outline: 2px solid #E0851F; outline-offset: 2px; }
.tza-seta-esq { left: 10px; } .tza-seta-dir { right: 10px; }
.tza-seta[disabled] { opacity: 0; pointer-events: none; }
.tza-palco:not(.rola) .tza-seta { display: none; }

@media (max-width: 640px) {
  .tza { --tza-altura: 230px; padding: 16px 0 28px; }
  .tza .tza-titulo { font-size: 40px; }
  .tza-peca { width: 80px; } .tza-peca.virada { width: 220px; }
  .tza-trilho { justify-content: flex-start; padding: 0 24px; }
  .tza-seta { width: 38px; height: 38px; margin-top: -19px; } .tza-seta-esq { left: 6px; } .tza-seta-dir { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tza-peca, .tza-peca * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
  .tza-arara:not(.pronta) .tza-entrada { opacity: 1; }
}