/* Provador: palco (cena 3D + pôster CSS), abertura, controles, pontos de Detalhes, etiqueta e arara. */

.palco {
  --arara-h: 212px;
  position: relative;
  isolation: isolate;
  background: var(--noite);
  overflow: hidden;
}

/* ---------- cena ---------- */
.palco__cena {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -6px;
}
.palco__canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 700ms var(--curva);
}
.gl-pronto .palco__canvas { opacity: 1; }

/* luz do pôster (o 3D desenha a sua própria) */
.palco__luz {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 48% at 50% 44%, rgba(201, 164, 106, .15), transparent 70%),
    radial-gradient(ellipse 30% 5% at 50% 93%, rgba(201, 164, 106, .26), transparent 72%),
    linear-gradient(to bottom, transparent 92.5%, rgba(0, 0, 0, .35) 92.5%);
  transition: opacity 700ms var(--curva);
  animation: acender var(--d-entrada) var(--curva) both;
}
.palco__luz::before { /* facho */
  content: ''; position: absolute; left: 50%; top: -4%; width: min(64%, 520px); height: 100%;
  transform: translateX(-50%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(201, 164, 106, .16), rgba(201, 164, 106, .02) 80%);
}
.palco__luz::after { /* arco do espelho */
  content: ''; position: absolute; left: 50%; bottom: 7.5%; width: min(40%, 420px); height: 86%;
  transform: translateX(-50%);
  border: 1px solid rgba(201, 164, 106, .32); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.gl-pronto .palco__luz { opacity: 0; }

.palco__poster {
  position: absolute; left: 50%; top: 7.5%; height: 85%; width: auto; max-width: 92%; object-fit: contain;
  transform: translateX(-50%);
  transform-origin: 50% 60%;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45));
  transition: opacity 320ms var(--curva), translate 320ms var(--curva), scale 280ms var(--curva);
  animation: entrada-poster 1800ms var(--curva) both;
  pointer-events: none;
}
.palco__poster:not([src]) { visibility: hidden; }
.palco__poster--corta { top: 15%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.palco__poster.saindo { opacity: 0; translate: calc(var(--dir, 1) * -30%) 0; }
.palco__poster.entrando { opacity: 0; translate: calc(var(--dir, 1) * 30%) 0; transition: none; }
/* virada frente/costas: a foto estreita, troca e abre (lê como a modelo girando) */
.palco__poster.virando { opacity: 0; scale: .3 1; }
.gl-pronto .palco__poster { opacity: 0; visibility: hidden; transition: opacity 700ms var(--curva), visibility 0s 700ms; }

@keyframes entrada-poster { from { opacity: 0; translate: 0 2.5%; } to { opacity: 1; translate: 0 0; } }
@keyframes acender { from { opacity: 0; } to { opacity: 1; } }

/* saída pela rolagem */
.palco::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--noite); opacity: calc(var(--saida, 0) * .75);
}

/* ---------- pontos de Detalhes ---------- */
.palco__pontos { position: absolute; inset: 0; pointer-events: none; z-index: 2; transition: opacity 240ms var(--curva); }
.palco:not(.com-detalhes) .palco__pontos, .palco.de-costas .palco__pontos, .palco__pontos.trocando { opacity: 0; visibility: hidden; }
.ponto {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; pointer-events: auto;
}
.ponto__alvo {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--champanhe); box-shadow: 0 0 0 4px rgba(201, 164, 106, .25), 0 0 18px rgba(201, 164, 106, .7);
  animation: pulsar 2.4s ease-in-out infinite;
}
.ponto__texto {
  position: absolute; left: 36px; top: 50%; translate: 0 -50%;
  width: max-content; max-width: 210px; padding: var(--e-8) var(--e-12);
  background: rgba(28, 25, 22, .92); border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: var(--t-14); line-height: 1.4; text-align: left; color: var(--marfim);
  opacity: 0; scale: .96; transition: opacity var(--d-controle) var(--curva), scale var(--d-controle) var(--curva);
  pointer-events: none;
}
.ponto--esquerda .ponto__texto { left: auto; right: 36px; text-align: right; }
.ponto__texto strong { display: block; font-weight: 500; color: var(--champanhe); }
.ponto[aria-expanded="true"] .ponto__texto, .ponto:hover .ponto__texto, .ponto:focus-visible .ponto__texto { opacity: 1; scale: 1; }
.ponto[aria-expanded="true"] { z-index: 2; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 9px rgba(201, 164, 106, .05), 0 0 18px rgba(201, 164, 106, .5); } }

/* ---------- abertura e controles ---------- */
.palco__abertura { position: relative; z-index: 4; pointer-events: none; }
.palco__titulo { font-size: clamp(var(--t-38), 6.2vw, var(--t-89)); margin-top: var(--e-12); }
.palco__titulo span { display: block; color: var(--champanhe); }
.palco__apoio { margin-top: var(--e-12); color: var(--taupe); font-size: var(--t-16); }

.palco__controles { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-12) var(--e-16); }
.palco__aviso { font-size: var(--t-12); letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); border: 1px dashed var(--linha-fraca); border-radius: var(--pilula); padding: 4px 12px; }


/* ---------- etiqueta ---------- */
.etiqueta { position: relative; z-index: 4; display: grid; gap: var(--e-12); text-align: center; justify-items: center; }
.etiqueta__nome { font-size: var(--t-28); line-height: 1.1; }
.etiqueta__preco { font-size: var(--t-21); color: var(--champanhe); letter-spacing: .02em; }
.etiqueta__modelo { font-size: var(--t-14); }
.etiqueta__ver { font-size: var(--t-14); }
.etiqueta.trocou > * { animation: subir 420ms var(--curva) both; }
.etiqueta.trocou > :nth-child(2) { animation-delay: 40ms; }
.etiqueta.trocou > :nth-child(3) { animation-delay: 80ms; }
.etiqueta.trocou > :nth-child(n+4) { animation-delay: 120ms; }
@keyframes subir { from { opacity: 0; translate: 0 10px; } }

.tamanhos { display: grid; gap: var(--e-8); justify-items: center; }
.tamanhos__opcoes { display: flex; gap: var(--e-8); }
.tamanho { position: relative; }
.tamanho input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tamanho > span {
  display: grid; place-items: center; width: var(--alvo); height: var(--alvo); border-radius: 50%;
  border: 1px solid var(--linha-fraca); font-size: var(--t-14); font-weight: 500;
  transition: background var(--d-controle) var(--curva), color var(--d-controle) var(--curva), border-color var(--d-controle) var(--curva);
}
.tamanho:hover > span { border-color: var(--champanhe); }
.tamanho input:checked + span { background: var(--champanhe); border-color: var(--champanhe); color: var(--noite); }
.tamanho input:focus-visible + span { outline: 2px solid var(--champanhe); outline-offset: 3px; }
.tamanho--esgotado > span { color: var(--taupe); opacity: .55; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--taupe) 50%, transparent calc(50% + .5px)); }
.tamanho--esgotado input { cursor: not-allowed; }

/* ---------- arara ---------- */
.arara { position: relative; z-index: 4; min-width: 0; }
.arara__filtros { display: flex; gap: var(--e-8); overflow-x: auto; scrollbar-width: none; padding: 2px 2px var(--e-12); }
.arara__filtros::-webkit-scrollbar { display: none; }
.arara__lista {
  position: relative;
  display: flex; gap: var(--e-16); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--linha) transparent;
  padding: 22px var(--e-8) var(--e-8);
  background: linear-gradient(to right, transparent, var(--champanhe) 4%, var(--champanhe) 96%, transparent) 0 8px / 100% 1px no-repeat local;
  transition: opacity 160ms var(--curva);
}
.arara__lista.filtrando { opacity: 0; }
.arara__item { flex: none; scroll-snap-align: center; }
.arara__bt { display: grid; justify-items: center; gap: 6px; width: 112px; text-decoration: none; text-align: center; transform-origin: 50% -14px; transition: rotate 400ms var(--curva), translate 300ms var(--curva); }
.arara__bt:hover { rotate: 2.5deg; }
.arara__foto { position: relative; display: grid; place-items: center; width: 88px; height: 120px; border-radius: var(--arco); background: var(--grafite); }
.arara__foto::before { /* gancho do cabide no trilho */
  content: ''; position: absolute; left: 50%; top: -15px; width: 12px; height: 14px; translate: -50% 0;
  border: 1.2px solid var(--champanhe); border-bottom: 0; border-radius: 7px 7px 0 0;
}
.arara__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--arco); }
.arara__nome { font-size: var(--t-12); line-height: 1.35; color: var(--marfim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.arara__preco { font-size: var(--t-12); color: var(--champanhe); letter-spacing: .04em; }
.arara__item--ativo .arara__foto { background: transparent; border: 1px dashed var(--champanhe); }
.arara__item--ativo .arara__preco { text-transform: uppercase; letter-spacing: var(--tracking-rotulo); font-size: 10px; }
.arara__bt:focus-visible { outline-offset: 4px; border-radius: var(--raio); }
.cabide { width: 58%; color: var(--champanhe); }
.arara__item--ativo .cabide { animation: balanco-cabide 1.4s var(--curva); transform-origin: 50% 0; }
@keyframes balanco-cabide { 0% { rotate: 14deg; } 35% { rotate: -8deg; } 65% { rotate: 4deg; } 100% { rotate: 0; } }

.erro-catalogo { position: relative; z-index: 5; display: grid; gap: var(--e-12); justify-items: center; text-align: center; padding: var(--e-24); }

/* ---------- layout: celular e tablet ---------- */
.palco:not(.palco--look) {
  display: grid;
  padding: calc(var(--topo-h) + var(--e-12)) var(--margem) var(--e-16);
  gap: var(--e-12);
}
.palco:not(.palco--look) .palco__cena { height: min(56svh, 560px); min-height: 380px; margin-inline: calc(-1 * var(--margem)); }
.palco:not(.palco--look) .palco__titulo { font-size: var(--t-38); }
.palco:not(.palco--look) .palco__titulo span { display: inline; }
.palco:not(.palco--look) .palco__apoio { display: none; }
.palco:not(.palco--look) .palco__abertura { order: -1; }
/* no celular e no tablet os controles de giro ficam sobre o piso do palco */
.palco:not(.palco--look) .palco__cena { grid-row: 2; grid-column: 1; }
.palco:not(.palco--look) .palco__controles { grid-row: 2; grid-column: 1; align-self: end; justify-content: space-between; padding-bottom: var(--e-12); }
.palco:not(.palco--look) .palco__aviso { font-size: 10px; padding: 2px 10px; }
.palco:not(.palco--look) .etiqueta { grid-template-columns: 1fr auto; text-align: left; justify-items: start; align-items: center; column-gap: var(--e-16); row-gap: var(--e-8); }
.palco:not(.palco--look) .etiqueta > .rotulo, .palco:not(.palco--look) .etiqueta__modelo { display: none; }
.palco:not(.palco--look) .etiqueta__nome { font-size: var(--t-21); grid-column: 1; }
.palco:not(.palco--look) .etiqueta__preco { grid-column: 2; grid-row: 1; font-size: var(--t-16); }
.palco:not(.palco--look) .etiqueta .tamanhos { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--e-12); }
.palco:not(.palco--look) .etiqueta .tamanhos legend { float: left; }
.palco:not(.palco--look) .etiqueta [data-adicionar], .palco:not(.palco--look) .etiqueta > .btn { grid-column: 1 / -1; }
.palco:not(.palco--look) .etiqueta__ver { grid-column: 1 / -1; justify-self: center; }

@media (min-width: 600px) and (max-width: 999px) {
  .palco:not(.palco--look) .palco__cena { height: min(60svh, 640px); }
  .palco:not(.palco--look) .etiqueta { max-width: 560px; width: 100%; justify-self: center; }
}

/* ---------- layout: desktop ---------- */
@media (min-width: 1000px) {
  .palco:not(.palco--look) {
    min-height: max(100svh, 780px);
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.2fr) minmax(300px, 360px);
    grid-template-rows: 1fr auto var(--arara-h);
    --arara-h: 272px;
    padding: calc(var(--topo-h) + var(--e-24)) var(--margem) 0;
    gap: var(--e-16) var(--e-32);
  }
  .palco:not(.palco--look) .palco__cena { position: absolute; grid-area: auto; left: 0; right: 0; top: 0; bottom: var(--arara-h); height: auto; min-height: 0; margin: 0; }
  .palco:not(.palco--look) .palco__abertura { order: 0; grid-column: 1; grid-row: 1; align-self: center; }
  .palco:not(.palco--look) .palco__titulo { font-size: clamp(var(--t-50), 5.6vw, var(--t-89)); }
  .palco:not(.palco--look) .palco__titulo span { display: block; }
  .palco:not(.palco--look) .palco__apoio { display: block; }
  .palco:not(.palco--look) .palco__controles { grid-column: 1; grid-row: 2; align-self: end; justify-content: flex-start; padding-bottom: var(--e-24); }
  .palco:not(.palco--look) .etiqueta {
    grid-column: 3; grid-row: 1 / span 2; align-self: center;
    grid-template-columns: 1fr; text-align: center; justify-items: center;
    padding: 84px var(--e-24) var(--e-24);
    background: linear-gradient(to bottom, rgba(28, 25, 22, .55), rgba(28, 25, 22, .9));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--linha); border-radius: var(--arco);
  }
  .palco:not(.palco--look) .etiqueta > .rotulo, .palco:not(.palco--look) .etiqueta__modelo { display: block; }
  .palco:not(.palco--look) .etiqueta__nome { font-size: var(--t-28); }
  .palco:not(.palco--look) .etiqueta__preco { grid-column: auto; grid-row: auto; font-size: var(--t-21); }
  .palco:not(.palco--look) .etiqueta .tamanhos { justify-items: center; grid-template-columns: 1fr; }
  .palco:not(.palco--look) .etiqueta .tamanhos legend { float: none; }
  .palco:not(.palco--look) .arara {
    grid-column: 1 / -1; grid-row: 3; margin-inline: calc(-1 * var(--margem)); padding: var(--e-12) var(--margem) 0;
    background: linear-gradient(to bottom, rgba(15, 13, 11, 0), var(--noite) 30%);
  }
  .palco:not(.palco--look) .arara__lista { justify-content: safe center; }
}

/* ---------- modelo única (provador 360°) ---------- */
.palco__carregando { position: absolute; left: 50%; top: 45%; translate: -50% 0; color: var(--taupe); font-size: var(--t-14); letter-spacing: .08em; }
.gl-pronto .palco__carregando { display: none; }
.arara__item--breve .arara__foto img { opacity: .45; filter: grayscale(.5); }
.arara__item--breve .arara__preco { color: var(--taupe); text-transform: uppercase; font-size: 10px; letter-spacing: var(--tracking-rotulo); }
.palco--unica .arara__lista { justify-content: safe center; }
@media (min-width: 1000px) {
  /* o palco começa abaixo do menu: a cabeça nunca fica atrás dele */
  .palco--unica.palco:not(.palco--look) .palco__cena { top: var(--topo-h); }
}

/* ---------- arara da home: recém-chegadas + cabide "Ver a arara toda" ---------- */
.arara__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-16); padding: 0 2px var(--e-8); }
.arara__cab .link-seta { font-size: var(--t-12); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; min-height: var(--alvo); }
.arara__foto--final { background: transparent; border: 1px dashed var(--champanhe); color: var(--champanhe); }
.arara__foto--final .icone { width: 28px; height: 28px; transition: translate var(--d-controle) var(--curva); }
.arara__item--final .arara__preco { color: var(--taupe); }

/* ---------- Detalhes visíveis de verdade: bolinha com contraste + etiqueta aberta com traço ---------- */
.ponto__alvo { box-shadow: 0 0 0 2px rgba(15, 13, 11, .85), 0 0 0 6px rgba(201, 164, 106, .35), 0 0 18px rgba(201, 164, 106, .7); }
.ponto__texto::before { /* traço que liga a etiqueta ao ponto */
  content: ""; position: absolute; top: 50%; right: 100%; width: 22px; height: 1px; background: var(--champanhe);
}
.ponto--esquerda .ponto__texto::before { right: auto; left: 100%; }
.com-detalhes .ponto__texto { opacity: 1; scale: 1; }
.com-detalhes .ponto { animation: ponto-entra 420ms var(--curva) both; }
.com-detalhes .ponto:nth-child(2) { animation-delay: 90ms; }
.com-detalhes .ponto:nth-child(3) { animation-delay: 180ms; }
@keyframes ponto-entra { from { opacity: 0; } }
@media (max-width: 599px) {
  /* celular: só o nome do detalhe; tocar abre a frase inteira */
  .ponto__texto { max-width: min(150px, 40vw); font-size: var(--t-12); padding: 6px var(--e-8); }
  .ponto__texto span { display: none; }
  .ponto[aria-expanded="true"] .ponto__texto span { display: inline; }
}

/* ---------- arara da home no celular: peças maiores para ver a roupa (01/10/2026) ---------- */
/* eram 88 x 120 px com letra de 12 px; a próxima peça fica pela metade, chamando o dedo */
@media (max-width: 599px) {
  .arara__bt { width: 148px; gap: var(--e-8); }
  .arara__foto { width: 132px; height: 180px; }
  .arara__nome { font-size: var(--t-14); }
  .arara__preco { font-size: var(--t-14); }
}
.arara__item--ativo .arara__preco, .arara__item--breve .arara__preco { font-size: var(--t-12); }

/* ---------- dica da primeira visita: "Deslize para trocar de roupa" (01/10/2026) ---------- */
/* um dedo (bolinha) corre de um lado para o outro; sem seta. Some no primeiro gesto ou em 6 s. */
.palco__dica {
  position: absolute; left: 50%; bottom: 84px; z-index: 3; translate: -50% 0;
  display: flex; align-items: center; gap: var(--e-12); padding: var(--e-8) var(--e-16) var(--e-8) var(--e-12);
  border-radius: var(--pilula); background: rgba(15, 13, 11, .78); border: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--marfim); font-size: var(--t-14); white-space: nowrap; pointer-events: none;
  animation: dica-entra 500ms 900ms var(--curva) both;
  transition: opacity 400ms var(--curva);
}
.palco__dica--saindo { opacity: 0; }
.palco__dica-mao { position: relative; width: 40px; height: 20px; }
.palco__dica-mao::before { /* o dedo */
  content: ''; position: absolute; top: 3px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--champanhe); box-shadow: 0 0 0 4px rgba(201, 164, 106, .25);
  animation: dica-dedo 1.6s 1.2s ease-in-out infinite;
}
@keyframes dica-entra { from { opacity: 0; translate: -50% 8px; } }
@keyframes dica-dedo { 0%, 100% { translate: 12px 0; } 50% { translate: -12px 0; } }
@media (prefers-reduced-motion: reduce) {
  .palco__dica, .palco__dica-mao::before { animation: none; }
}

/* ---------- arrasto ao vivo no plano B (sem WebGL): a foto segue o dedo (02/10/2026) ---------- */
.palco__poster.arrastando { transition: none; opacity: .85; }
.palco__poster.voltando { transition: translate 460ms cubic-bezier(.34, 1.56, .64, 1), rotate 460ms cubic-bezier(.34, 1.56, .64, 1), opacity 300ms var(--curva); }