/* Capítulo da loja (home), página do look, Nossa loja e 404. */

/* ---------- capítulo "A loja" = provador iluminado ----------
   Sem rolagem presa: a cortina abre quando a seção entra na tela e a silhueta de uma modelo (máscara do recorte,
   nunca a foto) troca de look enquanto a seção está visível. Tudo com transform/opacity. */
.capitulo { position: relative; padding: var(--e-96) 0; background: var(--noite); overflow: hidden; }
.capitulo__grade { display: grid; gap: var(--e-48); align-items: center; justify-items: center; }
.capitulo__grade > * { min-width: 0; }

.capitulo__cena { display: grid; justify-items: center; gap: var(--e-16); width: 100%; }
.provador {
  position: relative; isolation: isolate; width: min(78vw, 360px); aspect-ratio: 3 / 4.1;
  border-radius: var(--arco); overflow: hidden; background: #0b0806;
  border: 1px solid rgba(201, 164, 106, .45);
  box-shadow: 0 0 0 6px rgba(201, 164, 106, .05), 0 30px 90px -20px rgba(201, 164, 106, .28);
}
/* luz quente atrás da cortina */
.provador__luz {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 48% 42% at 50% 44%, rgba(255, 222, 170, .62), rgba(214, 170, 104, .26) 48%, transparent 76%),
    radial-gradient(ellipse 70% 30% at 50% 98%, rgba(201, 164, 106, .35), transparent 70%),
    linear-gradient(#1b130c, #0b0806 80%);
  animation: provador-luz 6s ease-in-out infinite alternate;
}
@keyframes provador-luz { from { opacity: .82; } to { opacity: 1; } }
/* a sombra da modelo: o recorte vira máscara de uma cor de sombra (a foto não aparece) */
.provador__silhueta {
  --look: url(../img/palco/vestido-chemise-bordado-recorte.webp);
  position: absolute; z-index: 1; left: 20%; right: 20%; top: 23%; bottom: 3%;
  background: linear-gradient(#24170c, #120b06 70%);
  -webkit-mask: var(--look) center bottom / contain no-repeat; mask: var(--look) center bottom / contain no-repeat;
  filter: blur(.6px) drop-shadow(0 0 18px rgba(255, 214, 150, .25));
  opacity: 0; transform-origin: 50% 100%;
  transition: opacity 1100ms var(--curva);
  animation: provador-respira 7s ease-in-out infinite;
}
.provador__silhueta.ativa { opacity: .94; }
@keyframes provador-respira { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(1.5%) rotate(.6deg); } }
/* varão com argolas */
.provador__varao {
  position: absolute; z-index: 3; left: 6%; right: 6%; top: 15%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #7a5d33, #e2c792 50%, #7a5d33);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.provador__varao::before, .provador__varao::after {
  content: ''; position: absolute; top: -5px; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid #c9a46a; background: transparent;
}
.provador__varao::before { left: 8%; }
.provador__varao::after { right: 8%; }
/* cortina de veludo em duas bandas: fechada no início, abre ao entrar na tela */
.provador__cortina {
  position: absolute; z-index: 2; top: 15%; bottom: 0; width: 52%;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 18%, transparent 70%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, #3f2b15 0, #6f5129 4%, #a47b41 6.5%, #6f5129 9%, #3f2b15 13%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .55);
  transition: transform 1400ms cubic-bezier(.22, .8, .2, 1);
}
.provador__cortina--esq { left: 0; transform-origin: 0 0; border-right: 1px solid rgba(0, 0, 0, .5); }
.provador__cortina--dir { right: 0; transform-origin: 100% 0; border-left: 1px solid rgba(0, 0, 0, .5); }
.capitulo--aberto .provador__cortina--esq { transform: translateX(-44%) scaleX(.86); }
.capitulo--aberto .provador__cortina--dir { transform: translateX(44%) scaleX(.86); }
/* depois de aberta, a cortina balança de leve (como tecido) */
.capitulo--viva .provador__cortina--esq { animation: provador-tecido-esq 8s ease-in-out infinite; }
.capitulo--viva .provador__cortina--dir { animation: provador-tecido-dir 8s ease-in-out infinite; }
@keyframes provador-tecido-esq { 0%, 100% { transform: translateX(-44%) scaleX(.86) skewY(0); } 50% { transform: translateX(-42%) scaleX(.86) skewY(.6deg); } }
@keyframes provador-tecido-dir { 0%, 100% { transform: translateX(44%) scaleX(.86) skewY(0); } 50% { transform: translateX(42%) scaleX(.86) skewY(-.6deg); } }
.provador__piso {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 9%;
  background: linear-gradient(to top, rgba(11, 8, 6, .95), transparent);
}
.provador__placa {
  padding: 4px var(--e-12); border: 1px solid var(--linha); border-radius: var(--pilula);
  font-size: 10px; letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--champanhe);
}

/* texto e ações */
.capitulo__texto { display: grid; gap: var(--e-16); justify-items: center; text-align: center; max-width: 560px; }
.capitulo__titulo { font-size: clamp(var(--t-38), 6vw, var(--t-67)); line-height: 1.02; }
.capitulo__titulo span { display: block; color: var(--champanhe); }
.capitulo__lista { display: grid; gap: var(--e-8); margin-top: var(--e-8); font-size: var(--t-16); color: var(--marfim); text-align: left; }
.capitulo__lista li { display: flex; align-items: baseline; gap: var(--e-12); }
.capitulo__lista li::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--champanhe); transform: translateY(-4px); }
.capitulo__apoio { color: var(--taupe); font-size: var(--t-14); }
.capitulo__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-16) var(--e-24); margin-top: var(--e-8); }
.capitulo__separar { gap: var(--e-8); }
.capitulo__separar .icone { width: 20px; height: 20px; }

/* entrada do texto junto com a cortina */
.js .capitulo__texto > * { opacity: 0; translate: 0 14px; transition: opacity 700ms var(--curva), translate 700ms var(--curva); }
.js .capitulo--aberto .capitulo__texto > * { opacity: 1; translate: 0 0; }
.js .capitulo--aberto .capitulo__texto > :nth-child(2) { transition-delay: 120ms; }
.js .capitulo--aberto .capitulo__texto > :nth-child(3) { transition-delay: 240ms; }
.js .capitulo--aberto .capitulo__texto > :nth-child(n+4) { transition-delay: 360ms; }

@media (min-width: 900px) {
  .capitulo { padding: var(--e-96) 0 calc(var(--e-96) + var(--e-24)); }
  .capitulo__grade { grid-template-columns: 1fr minmax(320px, 440px); justify-items: stretch; gap: var(--e-64); }
  .capitulo__texto { order: -1; justify-items: start; text-align: left; justify-self: end; }
  .capitulo__acoes { justify-content: flex-start; }
  .provador { width: 100%; max-width: 420px; }
}

/* sem movimento: cena aberta e parada; sem JavaScript: aberta, com o texto visível */
@media (prefers-reduced-motion: reduce) {
  .provador__luz, .provador__silhueta { animation: none; }
  .provador__cortina, .js .capitulo__texto > * { transition: none; }
}
html:not(.js) .provador__cortina--esq { transform: translateX(-44%) scaleX(.86); }
html:not(.js) .provador__cortina--dir { transform: translateX(44%) scaleX(.86); }

/* ---------- página do look ---------- */
.voltar { padding: calc(var(--topo-h) + var(--e-12)) var(--margem) var(--e-8); }
.palco--look { display: grid; gap: var(--e-16); padding: 0 var(--margem) var(--e-48); }
.palco--look .palco__cena {
  height: min(66svh, 640px); min-height: 400px;
  border: 1px solid var(--linha); border-radius: var(--arco);
}
.palco--look .palco__luz::after { display: none; }
.palco--look .palco__controles { justify-content: space-between; }
.look__info { display: grid; gap: var(--e-24); align-content: start; }
.etiqueta--look { text-align: left; justify-items: start; }
.etiqueta--look .etiqueta__nome { font-size: clamp(var(--t-38), 4vw, var(--t-50)); }
.etiqueta--look .tamanhos { justify-items: start; }
.look__acordeoes { display: grid; }
.look__acordeoes .link-seta { margin-top: var(--e-16); }
.look-vazio { display: grid; gap: var(--e-16); justify-items: center; text-align: center; padding: var(--e-64) var(--margem); }
.look-vazio .cabide { width: 120px; }
.look-vazio .display { font-size: var(--t-38); }
.combina { padding-block: var(--e-48) var(--e-96); border-top: 1px solid var(--linha-fraca); }
.combina__titulo { font-size: var(--t-38); margin-bottom: var(--e-24); }
.combina__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--e-24); }
.combina__item { display: grid; gap: var(--e-8); text-decoration: none; }
.combina__foto { display: block; aspect-ratio: 176 / 240; border-radius: var(--arco); overflow: hidden; border: 1px solid var(--linha-fraca); transition: border-color var(--d-controle) var(--curva); }
.combina__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--curva); }
.combina__item:hover .combina__foto { border-color: var(--champanhe); }
.combina__item:hover img { scale: 1.04; }
.combina__nome { font-size: var(--t-14); }
.combina__preco { font-size: var(--t-14); color: var(--champanhe); }
@media (min-width: 1000px) {
  .palco--look { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 440px); column-gap: var(--e-64); align-items: start; }
  .palco--look .palco__cena { grid-column: 1; grid-row: 1; height: min(80svh, 860px); }
  .palco--look .palco__controles { grid-column: 1; grid-row: 2; }
  .palco--look .look__info { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--topo-h) + var(--e-24)); padding-top: var(--e-24); }
  .palco--look .erro-catalogo { grid-column: 1 / -1; }
}

/* ---------- Nossa loja ---------- */
.arco { border-radius: var(--arco); overflow: hidden; border: 1px solid var(--linha); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.loja-abertura {
  display: grid; gap: var(--e-32); align-items: center;
  padding: calc(var(--topo-h) + var(--e-48)) var(--margem) var(--e-64);
  background: radial-gradient(ellipse 50% 60% at 70% 30%, rgba(201, 164, 106, .12), transparent 70%);
}
.loja-abertura h1 { font-size: clamp(var(--t-50), 8vw, var(--t-89)); margin: var(--e-12) 0 var(--e-16); }
.loja-abertura .apoio { max-width: 38ch; font-size: var(--t-16); }
.loja-abertura__foto { width: 100%; aspect-ratio: 1380 / 640; border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; position: relative; }
.loja-abertura__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 13, 11, .15), rgba(15, 13, 11, .35)); pointer-events: none; }
.loja-bloco { display: grid; gap: var(--e-32); align-items: center; padding-block: var(--e-64); border-top: 1px solid var(--linha-fraca); }
.loja-bloco__arte { width: min(100%, 360px); aspect-ratio: 4 / 5; justify-self: center; }
.loja-bloco__texto { display: grid; gap: var(--e-16); max-width: 600px; }
.loja-bloco__texto h2 { font-size: clamp(var(--t-38), 5vw, var(--t-67)); }
.loja-bloco__texto > p:not(.rotulo) { color: var(--taupe); }
.loja-bloco--delas .loja-bloco__texto { justify-self: center; text-align: center; justify-items: center; }
.visite { display: grid; gap: var(--e-16); margin: var(--e-8) 0; }
.visite dd { margin: 4px 0 0; }
.pendente { color: var(--taupe); font-style: italic; }
.visite__acoes { display: flex; flex-wrap: wrap; gap: var(--e-16); align-items: center; }
@media (min-width: 900px) {
  .loja-abertura { grid-template-columns: minmax(280px, 1fr) 1.6fr; padding-inline: max(var(--margem), (100vw - 1240px) / 2); }
  .loja-bloco { grid-template-columns: 360px 1fr; column-gap: var(--e-96); }
  .loja-bloco:not(:has(.loja-bloco__arte)) { grid-template-columns: 1fr; }
}

/* revelar ao rolar (só com JS) */
html.js .revelar { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--curva), translate 700ms var(--curva); }
html.js .revelar.visto { opacity: 1; translate: 0 0; }

/* ---------- 404 ---------- */
.erro-404 {
  min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: var(--e-16); text-align: center;
  padding: calc(var(--topo-h) + var(--e-32)) var(--margem) var(--e-64);
  background: radial-gradient(ellipse 30% 45% at 50% 35%, rgba(201, 164, 106, .14), transparent 70%);
}
.erro-404__palco { width: 180px; height: 240px; display: grid; place-items: center; border: 1px dashed var(--linha); border-radius: var(--arco); margin-bottom: var(--e-16); }
.erro-404__palco .cabide { width: 110px; animation: balanco-cabide 2.4s var(--curva); transform-origin: 50% 0; }
.erro-404 h1 { font-size: clamp(var(--t-38), 6vw, var(--t-67)); }

/* ---------- Minha conta = Meu provador ---------- */
.conta { min-height: 70svh; }
.conta__carregando { padding: calc(var(--topo-h) + var(--e-64)) var(--margem) var(--e-64); text-align: center; color: var(--taupe); }
.conta__equipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-12); padding: calc(var(--topo-h) + var(--e-16)) 0 0; color: var(--taupe); font-size: var(--t-14); text-align: center; }
.conta__equipe + [data-estado] { padding-top: var(--e-24); }

/* porta: entrar / criar conta / código do recibo */
.conta__porta { display: grid; gap: var(--e-16); justify-items: center; width: min(460px, 100% - 2 * var(--margem)); margin-inline: auto; padding: calc(var(--topo-h) + var(--e-48)) 0 var(--e-64); text-align: center; }
.conta__porta > * { min-width: 0; max-width: 100%; }
.conta__porta h1 { font-size: clamp(var(--t-28), 7vw, var(--t-38)); line-height: 1.1; }
.conta__arco { display: grid; place-items: end center; width: 120px; height: 150px; padding-bottom: var(--e-24); border: 1px solid var(--linha); border-bottom: 0; border-radius: var(--arco); }
.conta__arco .cabide { width: 64px; animation: balanco-cabide 2s var(--curva); transform-origin: 50% 0; }
.conta__modos { display: flex; gap: var(--e-8); }
.conta__modos [aria-selected="true"] { border-color: var(--champanhe); color: var(--champanhe); background: rgba(201, 164, 106, .1); }
.conta__form { display: grid; gap: var(--e-12); width: 100%; text-align: left; }
.conta__form .campo input { width: 100%; }
.conta__form [name="codigo"] { font-size: var(--t-21); letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.conta__erro { padding: var(--e-8) var(--e-12); border-radius: var(--raio); border: 1px solid rgba(232, 201, 191, .5); background: rgba(232, 201, 191, .08); color: var(--blush); font-size: var(--t-14); }
.conta__dica { font-size: var(--t-14); }
.conta__pedidos-soltos { width: 100%; display: grid; gap: var(--e-8); text-align: left; }

/* palco dela: mesmo provador, mais baixo; sem peça vestível o palco some e fica a arara */
.palco--conta .palco__abertura { display: grid; gap: var(--e-8); }
.palco--conta .palco__titulo span { display: inline; color: var(--champanhe); }
.palco--conta .etiqueta[hidden] { display: none; }
.palco--sem-cena .palco__cena, .palco--sem-cena .palco__controles { display: none; }
.conta__atencao { display: grid; gap: var(--e-8); margin-top: var(--e-8); pointer-events: auto; }
.conta__aviso { font-size: var(--t-14); color: var(--marfim); padding: var(--e-8) var(--e-12); border-left: 2px solid var(--champanhe); background: rgba(15, 13, 11, .6); border-radius: 0 var(--raio) var(--raio) 0; }
.conta__aviso a { color: inherit; text-decoration: none; }
.conta__aviso strong { font-weight: 500; color: var(--champanhe); }
.conta__aviso--atrasada { border-left-color: var(--blush); }
.conta__aviso--atrasada strong { color: var(--blush); }
.conta__etiqueta-desenhada { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--e-8); border: 1px dashed var(--linha); border-radius: var(--arco); font-family: var(--fonte-display); font-size: var(--t-14); line-height: 1.1; color: var(--champanhe); text-align: center; }
.conta__arara-vazia { display: flex; align-items: center; gap: var(--e-12); padding: var(--e-16) 0; color: var(--taupe); font-size: var(--t-14); }
.conta__arara-vazia .cabide { width: 48px; }
@media (min-width: 1000px) {
  .palco--conta.palco:not(.palco--look) { min-height: max(88svh, 720px); }
  .palco--sem-cena.palco:not(.palco--look) { min-height: 0; grid-template-rows: auto auto; }
}

/* extrato: pedidos, crediário, compras */
.conta__extrato { display: grid; gap: var(--e-48); padding: var(--e-48) 0 var(--e-32); }
.conta__extrato > * { min-width: 0; }
.conta__bloco { display: grid; gap: var(--e-16); align-content: start; }
.conta__bloco[hidden] { display: none; }
.conta__titulo { font-size: var(--t-28); }
.conta__pedidos, .conta__linhas { display: grid; gap: var(--e-8); }
.conta__pedido { display: grid; gap: var(--e-12); padding: var(--e-16); border: 1px solid var(--linha-fraca); border-radius: var(--raio); background: var(--grafite); }
.conta__pedido-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4) var(--e-12); }
.conta__pedido-topo span { color: var(--taupe); font-size: var(--t-14); }
.conta__pedido-topo strong:last-child { margin-left: auto; font-weight: 400; color: var(--champanhe); font-variant-numeric: tabular-nums; }
.conta__etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); counter-reset: etapa; }
.conta__etapas li { position: relative; padding-top: var(--e-16); font-size: 11px; letter-spacing: .04em; color: var(--taupe); text-align: center; }
.conta__etapas li::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--linha-fraca); }
.conta__etapas li.feita::before { background: var(--champanhe); }
.conta__etapas li.atual { color: var(--champanhe); }
.conta__linha { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: baseline; gap: var(--e-12); padding: var(--e-12) 0; border-bottom: 1px solid var(--linha-fraca); font-size: var(--t-14); }
.conta__linha-data { color: var(--taupe); font-variant-numeric: tabular-nums; }
.conta__linha-texto { min-width: 0; overflow-wrap: anywhere; }
.conta__linha strong { font-weight: 400; color: var(--champanhe); font-variant-numeric: tabular-nums; }
.conta__linha--atrasada .conta__linha-texto, .conta__linha--atrasada strong { color: var(--blush); }
.conta__saldo { font-size: var(--t-16); }
.conta__saldo strong { font-family: var(--fonte-display); font-weight: 400; font-size: var(--t-28); color: var(--champanhe); margin-left: var(--e-8); }
.conta__pix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-12); padding: var(--e-12) var(--e-16); border: 1px dashed var(--linha); border-radius: var(--raio); }
.conta__pix p { display: grid; gap: 2px; min-width: 0; }
.conta__pix-chave { overflow-wrap: anywhere; }
.conta__sair { padding: 0 0 var(--e-48); color: var(--taupe); font-size: var(--t-14); }
@media (min-width: 1000px) {
  .conta__extrato { grid-template-columns: 1.2fr 1fr; column-gap: var(--e-64); }
  .conta__extrato [data-historico] { grid-column: 1 / -1; }
}