/* iSlice3D v0.8 — camada visual nova por cima do base.css (catálogo, 3D e carrinho continuam no base.css).
   Identidade: G:\Meu Drive\Islice3D\Designs */
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/spacegrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root { --curva: cubic-bezier(.2, .8, .2, 1); --tinta: #171716; --ouro-texto: #8a6417; }

/* ---------- menu em pílula (some ao descer, volta ao subir) ---------- */
.slice-light .site-header.visual-header {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  width: min(1120px, calc(100vw - 24px)); height: 64px; padding: 0 10px 0 20px;
  border: 1px solid rgba(42, 38, 31, .1); border-radius: 999px;
  background: rgba(251, 248, 241, .82); box-shadow: 0 12px 34px rgba(62, 52, 35, .1);
  transition: translate .45s var(--curva), box-shadow .3s;
}
.slice-light .site-header.visual-header.escondido { translate: -50% calc(-100% - 24px); }
.slice-light main { padding-top: 88px; }
.slice-light .header-cta { border-radius: 999px; }
@media (max-width: 760px) {
  .slice-light .site-header.visual-header { height: 58px; padding: 0 8px 0 14px; }
  .slice-light .mobile-menu { top: 80px; border-radius: 22px; left: 12px; right: 12px; }
}

/* ---------- camada por camada: a foto da peça vai sendo "impressa" conforme a rolagem ---------- */
.camadas { height: 260vh; position: relative; }
.camadas-fixa {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  width: min(1180px, calc(100vw - 40px)); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 5vw, 64px); align-items: center;
}
.camadas-texto h2 { font: 700 clamp(2.2rem, 5vw, 4rem)/1.02 "Space Grotesk", sans-serif; letter-spacing: -.02em; color: var(--tinta); max-width: 13ch; }
.camadas-etapas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.camadas-etapas li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline;
  color: #6f6a5f; transition: color .3s; font-size: 1.05rem;
}
.camadas-etapas li b { font: 700 1rem "Space Grotesk", sans-serif; }
.camadas-etapas li.ativa { color: var(--tinta); }
.camadas-etapas li.ativa b { color: var(--ouro-texto); }
.camadas-contador { margin-top: 26px; font: 600 1rem "Space Grotesk", sans-serif; color: var(--ouro-texto); font-variant-numeric: tabular-nums; }

.camadas-peca {
  position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 4 / 5; max-height: 80svh;
  border-radius: 30px; overflow: hidden; background: #24221f;
  box-shadow: 0 40px 80px rgba(62, 52, 35, .25), 0 0 0 1px rgba(42, 38, 31, .08);
}
.camadas-peca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camadas-fantasma { filter: grayscale(1) brightness(.45) contrast(1.2); opacity: .55; }
/* a parte "impressa" aparece de baixo para cima, em degraus (camadas) */
.camadas-impressa { clip-path: inset(var(--corte, 100%) 0 0 0); }
.camadas-bico {
  position: absolute; left: 0; right: 0; top: var(--corte, 100%); height: 3px; translate: 0 -1px;
  background: linear-gradient(90deg, transparent, #f0c760 20%, #fff3cf 50%, #f0c760 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(240, 199, 96, .65); opacity: var(--bico-visivel, 1);
}
.camadas-peca::after { /* linhas de camada bem finas por cima, como na peça impressa */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 5px);
}
@media (max-width: 860px) {
  .camadas { height: 230vh; }
  .camadas-fixa { grid-template-columns: 1fr; align-content: start; padding-top: 92px; gap: 18px; }
  .camadas-peca { width: auto; height: 46svh; order: -1; }
  .camadas-texto h2 { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  .camadas-etapas { margin-top: 14px; gap: 6px; }
  .camadas-etapas li { font-size: .95rem; grid-template-columns: 30px 1fr; }
  .camadas-contador { margin-top: 12px; }
}

/* ---------- galeria: fotos reais flutuando em velocidades diferentes ---------- */
.galeria { height: 230vh; position: relative; }
.galeria-fixa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.galeria-titulo {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: min(720px, 88vw);
  padding: 28px 30px; text-align: center; pointer-events: none;
  border-radius: 28px; background: rgba(251, 248, 241, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.galeria-titulo h2 { font: 700 clamp(2rem, 5.4vw, 4rem)/1.02 "Space Grotesk", sans-serif; letter-spacing: -.02em; color: var(--tinta); }
.galeria-titulo p { margin: 12px auto 0; color: #4f4b44; font-size: 1.05rem; max-width: 44ch; }
.galeria-foto {
  position: absolute; margin: 0; width: var(--l, 210px); border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(62, 52, 35, .22); translate: 0 var(--y, 0px); rotate: var(--r, 0deg); will-change: translate;
  background: #e9e1d2;
}
.galeria-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* placa de destaque sem produto escolhido: some em vez de mostrar texto de modelo */
.showcase-section[data-vazio="sim"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .camadas, .galeria { height: auto; }
  .camadas-fixa { position: relative; height: auto; padding: 60px 0; }
  .camadas-impressa { clip-path: none; }
  .camadas-bico { display: none; }
  .galeria-fixa { position: relative; height: auto; overflow: visible; padding: 40px 0 60px; }
  .galeria-titulo { position: static; translate: none; margin: 0 auto 26px; }
  .galeria-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: min(1180px, calc(100vw - 40px)); margin: 0 auto; }
  .galeria-foto { position: static; width: auto; translate: none; rotate: none; }
  .slice-light .site-header.visual-header { transition: none; }
}