/*
 * Nova galeria de peças .
 * Melhora a trilha existente sem mudar o HTML dela: o painel de imagens
 * continua lendo/gravando as mesmas <figure>. Tudo aqui é aditivo e vale só
 * quando o JS marca <html class="gn-on">.
 *
 * Movimento (skill motion-design): ease-out-quart 180-240ms para entrar/sair,
 * ease-in-out-cubic para o aceno, só transform/opacity, e tudo desligado em
 * prefers-reduced-motion.
 */
:root{
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms;
  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
}

/* ============ Trilha na página ============ */
.gn-on .categoria__setas,
.gn-on .seta-overlay{ display: none !important; }

.gn-on .trilha-wrap{ position: relative; margin-top: 20px; }
.gn-on .trilha{
  gap: 14px; padding: 4px 24px 10px 2px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; cursor: grab;
}
.gn-on .trilha::-webkit-scrollbar{ display: none; }
.gn-on .trilha.gn-arrastando{ scroll-snap-type: none; cursor: grabbing; }
.gn-on .trilha.gn-arrastando *{ pointer-events: none; }

.gn-on .trilha figure{
  width: clamp(210px, 23vw, 262px) !important;
  scroll-snap-align: start; position: relative; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gn-on .trilha figure:focus-visible{ outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
.gn-on .trilha figure > div{
  aspect-ratio: 4/5; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(74,63,53,.14);
  transition: transform var(--dur-1) var(--ease-out-quart), box-shadow var(--dur-2) ease;
}
.gn-on .trilha figure:hover > div{ transform: none; box-shadow: 0 12px 26px rgba(74,63,53,.22); }
.gn-on .trilha figure:active > div{ transform: scale(.98); }
.gn-on .trilha figure > div::after{ content: none; }
.gn-on .trilha img{
  -webkit-user-drag: none; user-select: none;
  transition: transform var(--dur-3) var(--ease-out-quart);
}
@media (hover: hover){ .gn-on .trilha figure:hover img{ transform: scale(1.04); } }

/* Selo "Ampliar" no lugar do ícone discreto de antes */
.gn-ampliar{
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px;
  border-radius: 999px; background: rgba(255,252,246,.95); color: var(--ink);
  font: 600 13px/1 var(--font-body); letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(74,63,53,.28); pointer-events: none;
}
.gn-ampliar svg{ width: 16px; height: 16px; flex: none; }

/* Borda que "vaza" à direita: sinaliza que tem mais */
.gn-on .trilha-wrap::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,240,232,0), var(--bg));
  transition: opacity var(--dur-3) ease;
}
.gn-on .trilha-wrap.gn-fim::after,
.gn-on .trilha-wrap.gn-semrolagem::after{ opacity: 0; }

/* Setas grandes */
.gn-seta{
  position: absolute; top: calc(50% - 5px); z-index: 3; margin-top: -24px;
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tan); background: rgba(255,252,246,.96); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(74,63,53,.25);
  transition: opacity var(--dur-2) ease, transform var(--dur-1) var(--ease-out-quart), background var(--dur-1) ease;
}
.gn-seta svg{ width: 22px; height: 22px; }
.gn-seta--ant{ left: -10px; }
.gn-seta--prox{ right: -10px; }
@media (hover: hover){ .gn-seta:hover{ background: var(--accent); border-color: var(--accent); color: #fffcf6; } }
.gn-seta:active{ transform: scale(.94); }
.gn-seta.is-oculta{ opacity: 0; pointer-events: none; }
.gn-semrolagem .gn-seta{ display: none; }
@media (max-width: 680px){
  .gn-seta{ width: 44px; height: 44px; margin-top: -22px; }
  .gn-seta--ant{ left: 2px; } .gn-seta--prox{ right: 2px; }
  .gn-on .trilha figure{ width: 54vw !important; max-width: 280px; }
}

/* Contador + barra de progresso + dica */
.gn-meta{ display: flex; align-items: center; gap: 14px; margin-top: 12px; min-height: 24px; }
.gn-meta.gn-semrolagem{ display: none; }
.gn-cont{ font-size: 14px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gn-prog{ flex: 1; height: 4px; border-radius: 99px; background: rgba(196,164,132,.35); position: relative; overflow: hidden; }
.gn-prog i{ position: absolute; inset: 0; background: var(--accent); border-radius: 99px; transform-origin: left center; }
.gn-dica{
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap;
  transition: opacity var(--dur-3) ease;
}
.gn-dica svg{ width: 18px; height: 18px; animation: gn-dica-seta 1.4s var(--ease-in-out-cubic) infinite; }
.gn-meta.gn-ja-rolou .gn-dica{ opacity: 0; }
@keyframes gn-dica-seta{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(5px); } }
@media (max-width: 680px){
  .gn-meta{ flex-wrap: wrap; row-gap: 8px; }
  .gn-dica{ margin-left: auto; }
  .gn-prog{ order: 3; flex: 1 0 100%; }
}

/* Aceno único: os cards andam um pouco pro lado e voltam */
.gn-on .trilha.gn-aceno figure{ animation: gn-aceno 900ms var(--ease-in-out-cubic) 1; }
@keyframes gn-aceno{ 0%{ transform: translateX(0); } 40%{ transform: translateX(-46px); } 100%{ transform: translateX(0); } }

/* ============ Pop-up de foto (lightbox) ============ */
body.gl-aberto{ overflow: hidden; }
.gl{ position: fixed; inset: 0; z-index: 9999; display: flex; background: #16100b; }
.gl[hidden]{ display: none; }
.gl__corpo{
  display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
.gl.is-aberto{ animation: gl-fundo-in var(--dur-3) var(--ease-out-quart); }
.gl.is-aberto .gl__corpo{ animation: gl-corpo-in var(--dur-3) var(--ease-out-quart); }
.gl.is-fechando{ animation: gl-fundo-out 160ms ease forwards; }
.gl.is-fechando .gl__corpo{ animation: gl-corpo-out 160ms ease forwards; }
@keyframes gl-fundo-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes gl-fundo-out{ to{ opacity: 0; } }
@keyframes gl-corpo-in{ from{ transform: scale(.94); } to{ transform: scale(1); } }
@keyframes gl-corpo-out{ to{ transform: scale(.96); } }

.gl__top{ display: flex; align-items: center; gap: 14px; padding: 8px 8px 4px 20px; color: #fffcf6; }
.gl__titulo{ font-family: var(--font-display); font-size: 20px; line-height: 1.2; flex: 1; min-width: 0; }
.gl__cont{ font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,252,246,.85); }
.gl__fechar, .gl__nav{
  flex: none; border: 0; cursor: pointer; color: #fffcf6; background: rgba(255,252,246,.14);
  display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
  transition: background var(--dur-1) ease, transform var(--dur-1) var(--ease-out-quart);
}
.gl__fechar{ width: 48px; height: 48px; }
.gl__fechar svg{ width: 22px; height: 22px; }
.gl__fechar:hover, .gl__nav:hover{ background: rgba(255,252,246,.28); }
.gl__nav:active, .gl__fechar:active{ transform: scale(.94); }
.gl button:focus-visible{ outline: 3px solid #fffcf6; outline-offset: 2px; }

.gl__palco{ position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.gl__trilho{ display: flex; width: 300%; height: 100%; transform: translateX(-33.3333%); }
.gl__painel{ flex: 0 0 33.3333%; display: flex; align-items: center; justify-content: center; padding: 6px 86px; }
.gl__painel img{
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #2a2117;
  user-select: none; -webkit-user-drag: none;
}
.gl__painel img.gl-fade{ animation: gl-fade var(--dur-2) ease; }
@keyframes gl-fade{ from{ opacity: 0; } to{ opacity: 1; } }

.gl__nav{ position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; z-index: 2; }
.gl__nav svg{ width: 26px; height: 26px; }
.gl__nav--ant{ left: 18px; } .gl__nav--prox{ right: 18px; }
.gl__nav[hidden]{ display: none; }

.gl__dica{
  position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,252,246,.95); color: var(--ink); font: 600 14px/1.2 var(--font-body); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: opacity var(--dur-3) ease; pointer-events: none;
}
.gl__dica[hidden]{ display: none; }
.gl__dica.is-saindo{ opacity: 0; }
.gl__dica svg{ width: 18px; height: 18px; }
.gl__dica svg:first-child{ animation: gl-dica-esq 1.2s var(--ease-in-out-cubic) infinite; }
.gl__dica svg:last-child{ animation: gl-dica-dir 1.2s var(--ease-in-out-cubic) infinite; }
@keyframes gl-dica-esq{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(-4px); } }
@keyframes gl-dica-dir{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }

.gl__thumbs{
  display: flex; gap: 8px; overflow-x: auto; justify-content: safe center; scrollbar-width: none;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
}
.gl__thumbs::-webkit-scrollbar{ display: none; }
.gl__thumb{
  flex: none; width: 56px; height: 56px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #2a2117; opacity: .55;
  transition: opacity var(--dur-2) ease, border-color var(--dur-2) ease;
}
.gl__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gl__thumb[aria-current="true"]{ opacity: 1; border-color: #fffcf6; }
@media (hover: hover){ .gl__thumb:hover{ opacity: 1; } }

@media (max-width: 680px){
  .gl__painel{ padding: 6px 10px; }
  .gl__nav{ width: 44px; height: 44px; margin-top: -22px; background: rgba(22,16,11,.55); border: 1px solid rgba(255,252,246,.35); }
  .gl__nav--ant{ left: 6px; } .gl__nav--prox{ right: 6px; }
  .gl__titulo{ font-size: 18px; }
}


@media (prefers-reduced-motion: reduce){
  .gn-on .trilha.gn-aceno figure,
  .gn-dica svg, .gl__dica svg{ animation: none !important; }
  .gl.is-aberto, .gl.is-aberto .gl__corpo, .gl.is-fechando, .gl.is-fechando .gl__corpo{ animation-duration: .01ms !important; }
  .gn-on .trilha img, .gn-on .trilha figure > div{ transition: none; }
}

/* ============ Mais destaque em cada categoria ============ */
.gn-on .categoria{
  margin-top: 32px; padding: 30px 28px 24px; background: var(--card);
  border: 1px solid rgba(196,164,132,.45); border-radius: 24px; box-shadow: var(--shadow-sm);
}
.gn-on .categoria:first-child{ margin-top: 0; }
.gn-on .categoria__head{
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding-bottom: 0; border-bottom: 0;
}
.gn-on .categoria__head::before{
  content: ""; flex: 0 0 100%; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 56px, transparent 56px);
}
.gn-on .categoria__head h3{
  font-size: clamp(32px, 4.4vw, 46px) !important; line-height: 1.05; white-space: normal !important; margin: 0 !important;
}
.gn-on .categoria__row{ display: block !important; flex: 1 0 100%; width: 100% !important; }
.gn-on .categoria__row > p{ font-size: 17px !important; line-height: 1.5; color: var(--ink-soft); }
.gn-on .trilha-wrap{ margin-top: 18px; }
.gn-on .trilha-wrap::after{ background: linear-gradient(90deg, rgba(255,252,246,0), var(--card)); }
@media (max-width: 680px){
  .gn-on .categoria{ padding: 24px 16px 18px; border-radius: 20px; margin-top: 24px; }
  .gn-on .categoria__row > p{ font-size: 16px !important; }
}

/* ============ Enquadramento ajustado pelo painel ============
 * O /painel grava no <img> das fotos: style="--zx:40%;--zy:30%;--z:1.4"
 * (posição horizontal/vertical e zoom). Sem isso, tudo fica centralizado. */
.trilha img{
  object-position: var(--zx, 50%) var(--zy, 50%);
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
@media (hover: hover){ .gn-on .trilha figure:hover img{ transform: scale(calc(var(--z, 1) * 1.04)); } }

/* ============ Margens menores nas laterais da galeria ============
 * Antes: seção 18px + wrap 24px + card 16-28px = ~60-70px de cada lado.
 * Agora as fotos ganham espaço e a fila rola até a borda do card. */
#pecas .wrap{ max-width: 1200px; padding-left: 12px; padding-right: 12px; }
.gn-on .categoria{ padding: 28px 20px 22px; }
.gn-on .trilha-wrap{ margin-left: -8px; margin-right: -8px; }
.gn-on .trilha{ padding-left: 8px; padding-right: 20px; scroll-padding-left: 8px; }
@media (max-width: 680px){
  #pecas{ padding-left: 8px !important; padding-right: 8px !important; }
  #pecas .wrap{ padding-left: 0; padding-right: 0; }
  #pecas .section-head, #pecas .hero__ctarow{ padding-left: 10px; padding-right: 10px; }
  .gn-on .categoria{ padding: 22px 12px 16px; border-radius: 18px; margin-top: 18px; }
  .gn-on .trilha-wrap{ margin-left: -12px; margin-right: -12px; }
  .gn-on .trilha{ padding-left: 12px; padding-right: 24px; scroll-padding-left: 12px; }
  .gn-on .trilha figure{ width: 58vw !important; }
}