/* ===== ARARA 3D (mostruario: pecas penduradas de lado giram para a frente) ===== */
.arara{--s:clamp(210px,23vw,330px); --fechada:calc(var(--s)*.36); --aberta:calc(var(--s)*.84); margin-top:4px}
.arara-palco{position:relative; padding-top:6px}
.arara-palco::before{content:""; position:absolute; inset:-20px -6% -40px; pointer-events:none;
  background:radial-gradient(46% 60% at 50% 44%,rgba(223,170,38,.085),rgba(246,241,230,.03) 45%,transparent 74%)}
.arara-barra{position:absolute; left:-2%; right:-2%; top:18px; height:6px; border-radius:4px; z-index:3;
  background:linear-gradient(180deg,#6b5418 0%,#f6d783 32%,#c99a2e 58%,#5c4510 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.6)}
.arara-barra::before,.arara-barra::after{content:""; position:absolute; top:-6px; width:7px; height:18px; border-radius:3px;
  background:linear-gradient(90deg,#5c4510,#eec253,#5c4510)}
.arara-barra::before{left:0} .arara-barra::after{right:0}
.arara-trilho{display:flex; justify-content:center; align-items:flex-start; min-height:calc(var(--s)*1.05 + 50px); padding:0 8px 10px}
.peca{position:relative; flex:none; width:var(--fechada); transition:width .7s var(--ease); z-index:1; --tam:1}
.peca.baixo{--tam:1.12} .peca.curta{--tam:.66}
.peca.ativa{width:var(--aberta); z-index:4}
.cabide{all:unset; display:block; position:relative; width:100%; height:calc(var(--s)*1.05 + 50px); cursor:pointer; transform-origin:50% 21px}
.cabide:focus-visible{outline:none}
.cabide:focus-visible .giro{outline:1px solid var(--gold); outline-offset:4px}
/* cabide: o gancho sai do trilho e entra POR TRAS da gola/capuz no ponto medido de cada angulo
   (--gx/--gy = ponto de encaixe em fracao do quadro; --bl/--br = largura do cos nas calcas) */
.cabide{--T:calc(var(--s)*var(--tam)); --px:calc(50% + (var(--gx,.5) - .5) * var(--T)); --py:calc(48px + var(--T) * (var(--gy,.053) - .05));
  --fy:calc(48px + var(--T) * (var(--gf,.1) - .05))}   /* --gf = borda da gola da FRENTE: onde o arame entra na roupa */
.gancho{position:absolute; left:var(--px); top:5px; width:15px; height:20px; margin-left:-7.5px; color:#d9bf72; z-index:5;
  transition:left .5s var(--ease); overflow:visible}
.fio{position:absolute; left:var(--px); top:22px; width:2px; margin-left:-1px; border-radius:1px; z-index:2;
  height:calc(var(--fy) - 22px);          /* sai DE DENTRO da gola: passa na frente da gola de tras e some na gola da frente */
  box-shadow:0 0 3px rgba(0,0,0,.55);
  background:linear-gradient(90deg,#8a7330,#e8d08a 55%,#8a7330); transition:left .5s var(--ease), height .5s var(--ease)}
/* calcas/bermuda: presilha na largura do cos */
.peca.baixo .fio,.peca.curta .fio{height:calc(var(--py) - 22px - 9px); z-index:3}
.presilha{display:none; position:absolute; z-index:3; top:calc(var(--py) - 11px); height:3px; border-radius:2px;
  left:calc(50% + (var(--bl,.4) - .5) * var(--T) + 4px); width:calc((var(--br,.6) - var(--bl,.4)) * var(--T) - 8px);
  background:linear-gradient(180deg,#f0d98f,#a7862e); box-shadow:0 2px 4px rgba(0,0,0,.5);
  transition:left .5s var(--ease), width .5s var(--ease)}
.presilha::before,.presilha::after{content:""; position:absolute; top:1px; width:9px; height:17px; border-radius:2px;
  background:linear-gradient(90deg,#8a7330,#e6cc80 50%,#8a7330); box-shadow:0 2px 4px rgba(0,0,0,.45)}
.presilha::before{left:6%} .presilha::after{right:6%}
.peca.baixo .presilha,.peca.curta .presilha{display:block}
.giro{position:absolute; left:50%; top:42px; width:calc(var(--s)*var(--tam)); height:calc(var(--s)*var(--tam));
  margin-left:calc(var(--s)*var(--tam)*-.5); margin-top:calc(var(--s)*var(--tam)*var(--topo)*-1 + 6px);
  z-index:1; pointer-events:none}
.giro img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0;
  transition:opacity .09s linear, filter .5s; filter:brightness(.82) saturate(.9); user-select:none}
.peca[data-q="0"] .q0,.peca[data-q="1"] .q1,.peca[data-q="2"] .q2{opacity:1}
.peca.ativa .giro img{filter:none}
.peca:not(.ativa):hover .giro img{filter:brightness(.97)}
.peca.esgotada .giro img{filter:brightness(.62) saturate(.6)}
.peca.esgotada.ativa .giro img{filter:saturate(.75)}
.peca.ativa .cabide{animation:balanco 1.6s cubic-bezier(.3,.7,.4,1)}
@keyframes balanco{0%{transform:rotate(0)}18%{transform:rotate(1.6deg)}42%{transform:rotate(-1deg)}66%{transform:rotate(.5deg)}100%{transform:rotate(0)}}
.etiqueta{position:absolute; top:26px; left:calc(var(--px) + 4px); z-index:6; font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:#141108; background:var(--gold-grad); padding:3px 7px 3px 10px; transform:rotate(7deg); transform-origin:0 0;
  clip-path:polygon(5px 0,100% 0,100% 100%,5px 100%,0 50%); transition:transform .7s var(--ease)}
.etiqueta.off{background:#2a2822; color:var(--ink-dim)}
.peca.ativa .etiqueta{transform:translateX(calc(var(--s)*.15)) rotate(3deg)}
/* ---- legenda editorial (nada de botao-caixa de template) ---- */
.arara-info{max-width:760px; margin:clamp(10px,2vw,22px) auto 0; text-align:center}
.ai-linha{display:flex; align-items:center; gap:14px; justify-content:center; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2)}
.ai-linha .arara-num{color:var(--gold-soft)}
.ai-fio{width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.arara-nome{font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5.2vw,4.4rem); line-height:.98;
  letter-spacing:-.01em; margin:.28em 0 .18em; color:var(--ink)}
.arara-nome em{font-style:italic; font-weight:400; color:var(--gold-soft); white-space:nowrap}
.arara-sub{font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--ink-dim); margin:0}
.ai-rodape{display:flex; align-items:baseline; justify-content:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,28px); padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--line)}
.arara-preco{font-family:var(--serif); font-size:clamp(1.6rem,2.2vw,2rem); color:var(--ink); letter-spacing:.01em}
.arara-preco s{text-decoration:none; font-style:italic; font-size:.6em; color:var(--muted); margin-left:6px}
.ai-link{all:unset; cursor:pointer; position:relative; font-family:var(--mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); padding:6px 0}
.ai-link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold);
  transform:scaleX(.35); transform-origin:left; transition:transform .45s var(--ease)}
.ai-link:hover::after,.ai-link:focus-visible::after{transform:scaleX(1)}
.ai-link:hover{color:var(--gold-soft)}
.ai-link:focus-visible{outline:1px solid var(--gold); outline-offset:4px}
.ai-link span{display:inline-block; transition:transform .45s var(--ease)}
.ai-link:hover span{transform:translateX(4px)}
.ai-link[aria-disabled="true"]{color:var(--muted-2); cursor:default}
.ai-link[aria-disabled="true"]::after{background:var(--muted-2); transform:scaleX(1)}
.arara-info .troca{animation:troca .55s var(--ease)}
@keyframes troca{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media(max-width:760px){
  .arara{--s:min(62vw,250px); --fechada:calc(var(--s)*.34); --aberta:calc(var(--s)*.88)}
  .arara-trilho{justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    padding-inline:calc(50% - var(--aberta)/2)}
  .arara-trilho::-webkit-scrollbar{display:none}
  .arara-barra{left:0; right:0}
}

/* ===== visor 360 ===== */
.visor360{position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  background:rgba(8,8,7,.97); backdrop-filter:blur(6px)}
.visor360[hidden]{display:none}
.v-palco{position:relative; display:grid; place-items:center; padding:clamp(20px,4vw,56px); min-height:0;
  background:radial-gradient(55% 55% at 50% 50%,rgba(223,170,38,.07),transparent 70%)}
.v-palco img{width:min(100%,72vh); aspect-ratio:1; object-fit:contain; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-drag:none}
.v-palco img:active{cursor:grabbing}
.v-dica{position:absolute; bottom:18px; left:0; right:0; text-align:center; font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}
.v-lado{border-left:1px solid var(--line); padding:clamp(28px,4vw,56px) clamp(22px,3vw,44px); display:flex; flex-direction:column; gap:14px; overflow:auto}
.v-lado .arara-num{text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft)}
.v-nome{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,3.4vw,3.2rem); line-height:1; margin:0}
.v-nome em{font-style:italic; font-weight:400; color:var(--gold-soft)}
.v-preco{font-family:var(--serif); font-size:1.8rem; color:var(--ink)}
.v-preco s{text-decoration:none; font-style:italic; font-size:.6em; color:var(--muted); margin-left:6px}
.v-sub{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink-dim); margin:0}
.v-lado .ai-link{align-self:flex-start; margin-top:6px}
.v-vistas{display:flex; gap:8px; margin:6px 0}
.v-vistas button{all:unset; cursor:pointer; width:74px; text-align:center; font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.v-vistas button img{display:block; width:74px; height:74px; object-fit:contain; background:var(--surface); border:1px solid var(--line-soft); margin-bottom:6px}
.v-vistas button[aria-current="true"]{color:var(--gold-soft)}
.v-vistas button[aria-current="true"] img{border-color:var(--gold)}
.v-vistas button:focus-visible img{outline:1px solid var(--gold); outline-offset:2px}
.v-fechar{position:absolute; top:16px; right:18px; z-index:3; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(10,10,10,.7); color:var(--ink); cursor:pointer; font-size:20px; line-height:1}
.v-fechar:hover{border-color:var(--gold); color:var(--gold-soft)}
.v-nota{font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.5; color:var(--muted); margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
.v-nota a{color:var(--ink-dim); border-bottom:1px solid var(--line-strong)}
@media(max-width:860px){
  .visor360{grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow:auto}
  .v-palco{padding:56px 12px 34px}
  .v-palco img{width:min(100%,58vh)}
  .v-lado{border-left:0; border-top:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  .peca,.gancho,.fio,.presilha,.etiqueta,.giro img{transition:none}
  .peca.ativa .cabide,.arara-info .troca{animation:none}
}