/* ═══════════════════════════════════════════════════════════
   INTIMATTO DELLES — piloto de vitrine
   ═══════════════════════════════════════════════════════════ */

/* ── Fontes ───────────────────────────────────────────────── */
/* woff2 subset latin (cobre portugues: U+00C0–00FF tem a, e, o, c). */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/hanken-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/hanken-500.woff2') format('woff2');
}

/* ── Tokens ───────────────────────────────────────────────── */

:root {
  --luz: #f7f6f4;        /* chao da pagina. branco com um sopro de calor */
  --branco: #ffffff;     /* superficie do modal. os cards nao tem superficie */
  --tinta: #1a1a18;      /* tipografia */
  --cinza: #726f69;      /* labels e texto secundario */
  --fio: #dad6d0;        /* hairlines neutras */
  --ouro: #b08a28;       /* fio, borda e preenchimento. nunca texto — ver nota */
  --ouro-hover: #c49a2e; /* hover do botao. CLAREIA de proposito — ver nota */
  --ouro-claro: #e6be64; /* so dentro do bloco preto (11,9:1 sobre #000) */
  --cinza-claro: #a8a29a; /* texto secundario no bloco preto (8,3:1 sobre #000) */
  --preto: #000000;      /* exato. qualquer outro expoe a borda do JPG do logo */

  /* O --cinza do documento original era #8A8781, que da 3,29:1 sobre --luz e
     reprova em AA (precisa 4,5:1). #726F69 da 4,64:1 e mantem o cinza quente.

     Sobre o dourado, o documento tinha a regra invertida. Ele proibia
     "preenchimento" e liberava micro-caps douradas; medindo, e o contrario:

       --ouro como TEXTO sobre --luz .... 2,99:1   reprova
       --tinta como texto sobre --ouro .. 5,40:1   passa

     O ouro nao pode ser a letra, mas pode ser o campo onde a letra pousa, e
     pode ser fio, borda e ponto a vontade — decoracao nao tem exigencia de
     contraste. E por isso que ele vive no botao, nos fios das pecas e no
     bloco preto, e nunca como texto sobre papel.

     Rodar tools/contraste.js antes de mexer em qualquer cor destas. */

  --passo: clamp(1rem, 4vw, 1.75rem);   /* respiro lateral da pagina */
  --folga: clamp(3rem, 9vw, 6rem);      /* respiro entre secoes */

  --letra-ar: 0.32em;    /* voz ar: Jost 300 caps tracked */
  --letra-peso: -0.01em; /* voz peso: Jost 600 caps apertado */

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--luz);
  color: var(--tinta);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img { display: block; max-width: 100%; }
picture { display: block; }

/* <source> nao tem display: none no navegador — a lista do HTML que zera
   elementos de metadado nao inclui ele. Enquanto o <picture> e um bloco isso
   nao aparece, porque o elemento e vazio e nao ocupa altura.

   Quando o <picture> vira grid ou flex, porem, cada <source> conta como item:
   o visualizador de foto inteira ganhava tres linhas (99px, 99px e o resto) e
   a foto, centrada dentro da terceira, descia 100px do centro da tela. */
source { display: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* ── As tres vozes ────────────────────────────────────────── */

.voz-peso {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letra-peso);
}

.voz-ar {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--letra-ar);
}

/* ── O fio ────────────────────────────────────────────────── */
/* Herda a qualidade do logo (traco continuo, 1px, dourado) sem ser a
   silhueta. Anima com transform: scaleX — o documento pedia
   stroke-dashoffset, mas isso e propriedade de paint e briga com a
   propria regra de "animacao so em transform e opacity". O resultado
   visual de uma reta e identico e este nao repinta. */

/* O fio se desenha no load por animacao de CSS, sem JS nenhum.

   Duas razoes. A primeira e robustez: um elemento que nasce invisivel
   esperando o JS revelar fica invisivel PRA SEMPRE se o JS falhar, e o fio
   mora no HTML estatico, entao nao tem como o proprio script que o desenha
   garantir que ele apareca. A segunda e que nesta pagina os dois fios estao
   acima da dobra no celular (o hero tem 72dvh e o divisor vem logo abaixo) —
   revelar por scroll seria teatro.

   A caixa e o traco sao elementos separados porque scaleX(0) colapsa a caixa
   pra largura zero, e ai nem a caixa nem nada dentro dela tem area. */

.fio {
  height: 1px;
  overflow: hidden;
}

.fio__traco {
  display: block;
  height: 100%;
  background: var(--ouro);
  transform-origin: left center;
  animation: fio-desenha 1.4s var(--curva) both;
}

@keyframes fio-desenha {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Header ───────────────────────────────────────────────── */

/* Acompanha a rolagem.

   A prateleira que vivia no rodape da tela saiu, e o trabalho dela era um so:
   manter o provador alcancavel de qualquer altura do catalogo. Header parado
   no topo faria quem escolhe uma peca no fim da grade rolar a pagina inteira
   pra fechar o pedido — exatamente o problema que a prateleira resolvia.

   Sticky e nao fixed: ocupando espaco no fluxo, a faixa empurra o hero pra
   baixo em vez de cobrir o topo dele. Fixed exigiria compensar a altura na
   mao, e qualquer mudanca de padding aqui passaria a quebrar o hero. */
.header {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--luz);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--passo);
  padding-top: calc(1.15rem + env(safe-area-inset-top));
  transition: background 0.3s var(--curva);
}

.marca {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  text-decoration: none;
  color: inherit;
}

.marca__nome {
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  line-height: 1;
}

.marca__sub {
  font-size: clamp(0.5rem, 1.5vw, 0.6rem);
  line-height: 1;
  color: var(--cinza);
}

/* No celular o local sai: wordmark + dois links ja ocupam quase os 343px
   uteis de um 375, e apertar os tres deixaria o header pior, nao melhor. */
.header__local {
  display: none;
  margin: 0;
  font-size: 0.5625rem;
  color: var(--cinza);
}

/* center e nao baseline: o provador virou icone, e nao ha linha de base
   compartilhada entre um SVG e o texto do Instagram ao lado. */
.header__links {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header__link {
  font-size: 0.625rem;
  color: var(--cinza);
  text-decoration: none;
  transition: color 0.2s var(--curva);
}
.header__link:hover { color: var(--tinta); }

/* Link que sai do site precisa PARECER link.

   Sem isto "Instagram" le como rotulo — mesma cor, mesmo tamanho e mesma voz
   do "Palmas · TO" ao lado, que nao clica em lugar nenhum. Nada indicava que
   um leva pra fora e o outro nao.

   O sublinhado e o fio dourado do projeto, nao o underline do navegador: 1px,
   deslocado da base pra nao cortar a perna do "g", e em --ouro, que aqui e
   decoracao e nao letra — a regra do projeto libera ouro como fio a vontade.
   Continua minimalista porque nao acrescenta elemento nenhum: e a mesma
   linguagem do divisor de secao, em escala de palavra. */
.header__link--fora {
  text-decoration: underline;
  text-decoration-color: var(--ouro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: color 0.2s var(--curva), text-decoration-color 0.2s var(--curva);
}

.header__link--fora:hover { text-decoration-color: var(--tinta); }

/* Icone e nao a palavra "Provador".

   Vale nas duas larguras — a 320px os tres blocos de texto estouravam a tela,
   e era por isso que no celular o botao simplesmente sumia. E tira letra do
   topo em vez de somar. O nome continua existindo no aria-label.

   2,75rem de alvo: abaixo disso o dedo erra. */
.header__provador {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.75rem -0.6rem -0.75rem 0;
  cursor: pointer;
  color: var(--cinza);
  line-height: 0;
  transition: color 0.2s var(--curva);
}

.header__provador:hover,
.header__provador[data-cheia] { color: var(--tinta); }

/* O icone nunca e o alvo do clique: sem isto o evento chega no <path> e
   qualquer codigo que olhe pro alvo precisa saber subir ate o botao. */
.header__provador svg { pointer-events: none; }

/* ── A confirmacao escrita ────────────────────────────────── */
/* O anel diz que ALGO aconteceu; esta faixa diz O QUE aconteceu.

   Foi o que faltou na primeira versao: movimento sem palavra deixa a cliente
   adivinhando se a peca entrou mesmo. Aumentar o anel ou somar confete daria
   mais espetaculo e a mesma duvida — o que tira a ambiguidade e a frase.

   O texto diz "no provador", e nao "comprado": a venda so fecha na conversa
   do WhatsApp. Comemorar como pedido feito faria a cliente achar que ja pediu
   e nao mandar a mensagem, que e o unico gesto que a loja precisa.

   Mora no rodape da tela porque e la que o polegar esta e pra onde o olho ja
   aponta no celular. A prateleira que saiu daqui era outra coisa: ficava
   PERMANENTE, comendo faixa de tela o tempo todo e obrigando o rodape a ter
   padding extra. Esta aparece por 2,5s e some. */
.aviso {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem var(--passo);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--branco);
  border-top: 1px solid var(--ouro);

  /* Sobe de fora da tela. Deslocamento curto de proposito: a faixa aparece
     mais por opacidade do que por viagem — entrada longa vinda da borda
     rouba a atencao da propria mensagem. */
  transform: translateY(0.75rem);
  opacity: 0;
  /* Nao captura toque: a cliente continua rolando o catalogo por cima dela,
     e o que estiver embaixo segue clicavel. */
  pointer-events: none;
  transition: transform 0.4s var(--curva), opacity 0.3s var(--curva);
}

.aviso[data-visivel] {
  transform: none;
  opacity: 1;
}

.aviso__foto {
  width: 2.25rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fio);
  flex-shrink: 0;
}

.aviso__texto {
  font-size: 0.75rem;
  line-height: 1.35;
  min-width: 0;
}

/* O nome da peca em peso medio, o resto em cinza: a cliente le "qual peca"
   num relance e o "no provador" fica de contexto. */
.aviso__texto strong {
  font-weight: 500;
}

.aviso__onde {
  color: var(--cinza);
}

/* ── O anel, quando a peca pousa ──────────────────────────── */
/* E o fim do voo: a foto chega e o icone responde.

   Anel e nao confete. O fio dourado de 1px ja e a lingua da pagina inteira —
   o divisor entre secoes, o sublinhado do Instagram, a borda do chip de
   tamanho. Aqui ele so vira circulo e se move. Confete traria junto o DNA de
   e-commerce gamificado, que briga com o editorial contido do resto.

   ::after e nao um elemento no HTML: nao ha o que marcar, e pseudo nao entra
   no fluxo, nao pega foco e nao aparece pro leitor de tela. */
.header__provador::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Do tamanho do proprio botao, centrado nele. A escala fica ABAIXO de 1 no
     fim (0,92) de proposito: o botao encosta na borda direita da tela, e um
     anel que passasse da caixa dele criaria rolagem horizontal na pagina. */
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border: 1px solid var(--ouro);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.header__provador[data-recebeu]::after {
  animation: anel-irradia 0.62s var(--curva);
}

@keyframes anel-irradia {
  from { opacity: 0.85; transform: scale(0.3); }
  to   { opacity: 0;    transform: scale(0.92); }
}

/* O numero salta junto. E ele que carrega a informacao — o anel chama o olho,
   a contagem diz o que mudou. */
.header__provador[data-recebeu] .header__provador__conta {
  animation: conta-salta 0.5s var(--curva);
}

@keyframes conta-salta {
  0%   { transform: none; }
  32%  { transform: scale(1.35); }
  100% { transform: none; }
}

/* Contagem como campo dourado, nao como "(n)" em texto.

   A regra do projeto: --ouro nao pode ser letra (2,99:1) mas pode ser campo
   com --tinta em cima (5,40:1). */
.header__provador__conta:empty { display: none; }

.header__provador__conta {
  position: absolute;
  top: 0.35rem;
  right: 0.3rem;
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25em;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--tinta);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

/* Nunca comprime: e a saida da pagina. Quem cede espaco e a marca. */
.header__links { flex-shrink: 0; }
.marca { min-width: 0; }

/* ── Header sobre o video (celular) ───────────────────────── */
/* Sem isto a tela le como tres faixas horizontais empilhadas: banda creme,
   video, banda creme. O video vira um retangulo no meio de uma pagina em vez
   de ser a pagina. Tirando o header do fluxo, a imagem comeca no pixel zero
   e a marca passa a viver dentro da cena.

   So no celular: no desktop o video ja fica em coluna ao lado do texto, e um
   header por cima nao teria imagem embaixo pra flutuar. */

/* O header e faixa solida cor de papel em toda largura.

   Antes ele flutuava transparente sobre o video no celular, e a marca ficava
   escondida enquanto o hero estava na tela — o logo grande na base do video ja
   dizia o nome. So que isso esvaziava o topo: sobravam Instagram e sacola
   empurrados pro canto direito, com metade da faixa vazia, e a tela lia como
   inacabada.

   Com faixa solida a agonia original morre por outro caminho. O que incomodava
   era letra BRANCA boiando sobre a foto; tinta sobre papel da 16,1:1 e le como
   header de site, nao como texto largado na imagem.

   O preco e o video deixar de sangrar ate o pixel zero no celular. Aceito: com
   uma faixa de verdade separando as duas coisas, a leitura de tarjas
   empilhadas que o full-bleed evitava nao volta — o que a produzia era banda
   creme, video e banda creme com pesos iguais, e aqui a faixa e fina e o video
   e o bloco. */

/* ── Sem JavaScript ───────────────────────────────────────── */

.semjs {
  margin: 0;
  padding: 1rem var(--passo);
  background: var(--tinta);
  color: var(--luz);
  font-size: 0.8125rem;
  text-align: center;
}

.semjs a { color: var(--ouro-claro); }

/* O unico ouro do header fora do fio. Ponto, nao texto: sobre --luz o
   --ouro da 2,97:1 e reprovaria em contraste como texto. */
.header__ponto {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ouro);
  transform: translateY(-2px);
}

.header .fio {
  position: absolute;
  inset: auto 0 0 0;
}

@media (min-width: 48rem) {
  .header__local { display: block; }
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  display: grid;
  /* height e nao min-height: min-height nao torna a altura do grid definida,
     entao a linha 1fr virava o tamanho do conteudo e o hero estourava os
     72dvh. E minmax(0, 1fr) e nao 1fr, porque 1fr tem minimo automatico e
     tambem nao encolhe abaixo do conteudo. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 1fr;
  height: 72dvh;
}

/* Video e texto na MESMA celula: e isso que os sobrepoe no celular sem
   duplicar DOM. No desktop o texto muda de coluna e o scrim some. */
.hero__media {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--fio);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O video e 9:16 (0,563) e a caixa fica perto de 0,72 no celular, entao o
     cover corta altura. Ancorar no topo mantem cabeca e tronco e joga fora o
     chao — o quadro ja terminava nas canelas dela mesmo. */
  object-position: center top;
}

/* UM scrim so, na base, e ele existe pra sustentar o logo.

   Havia um segundo no topo (0,58) que carregava o header quando ele flutuava
   sobre a imagem. Com a faixa solida o header nao esta mais ali, entao aquele
   gradiente passou a escurecer o alto do quadro sem servir a nada — e o alto
   do quadro e onde esta o rosto da modelo.

   O de baixo foi medido: com o gradiente antigo (0,66 / 0,30 / 60%) o logo
   dava 3,84:1 de media, porque o topo do desenho — a silhueta em traco fino —
   caia justamente onde o scrim ja tinha se dissolvido. Com este, 5,66:1.

   O custo e escurecer o meio do quadro de 0,05 pra 0,13, e ai fica: mais que
   isso comeca a apagar a roupa, que e o produto. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgb(10 9 8 / 0.72) 0%,
      rgb(10 9 8 / 0.52) 34%,
      rgb(10 9 8 / 0) 62%
    );
  pointer-events: none;
}

/* ── A marca no hero ──────────────────────────────────────── */
/* O h1 e o logo da loja, nao tipografia imitando o logo.

   Ele pousa na BASE do video por medicao. O dourado do logo, ja composto com
   o alfa que ele tem (o maximo do arquivo e 236, entao ele nunca e opaco de
   verdade), rende:

     meio do video, sem scrim ....... 2,33:1   lavado
     creme do desktop ............... 1,42:1   praticamente invisivel
     base do video, scrim 0,66 ...... 8,18:1   passa ate AAA

   A tentativa anterior punha o logo centralizado e por isso saiu apagada.
   Aqui ele vive onde o scrim ja e forte, e nao ha nada a reforcar. */

/* CENTRADO, e nao encostado na esquerda.

   Alinhado a esquerda e sozinho, o logo lia como marca d'agua: um desenho
   pousado num canto por acaso. Centrado, com o bordao ancorando embaixo, o
   par vira composicao e o vazio em volta e moldura, nao sobra. */
.hero__marca {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  z-index: 1;
  margin: 0;
  padding: 0 var(--passo) calc(1.9rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  color: var(--branco);
}

/* 56vw teto 13rem. Menor que os 62vw de quando ele estava sozinho: com o
   bordao embaixo, o conjunto inteiro precisa caber na faixa onde o scrim ainda
   segura — subir mais joga o topo do desenho na zona clara do quadro, que e
   onde o dourado lava. */
.hero__logo {
  width: min(56vw, 13rem);
  height: auto;
}

/* O bordao da loja, tirado da bio deles. */
.hero__bordao {
  font-size: 0.5625rem;
  line-height: 1.5;
  animation: marca-entra 0.9s var(--curva) 0.45s backwards;
}

/* "Delles" e "Elas" em dourado: o trocadilho E a marca, e em caps tracked,
   sem cor, ele desaparece no meio da linha. Sobre a base escura do video o
   ouro claro tem contraste de sobra — e a mesma cor que o bloco preto do
   rodape ja usa.

   relative pra ancorar o sublinhado; inline-block pra que o ::after respeite
   a largura da palavra e nao se quebre junto com a linha. */
.hero__bordao b {
  position: relative;
  display: inline-block;
  font-weight: inherit;
  color: var(--ouro-claro);
}

/* O sublinhado que se desenha, uma palavra depois da outra.

   E o fio dourado da pagina reaparecendo em escala de palavra: 1px continuo,
   crescendo da esquerda pra direita — a "linha passando". Cada palavra tem o
   seu, com larguras diferentes, porque e o sublinhado do trocadilho, nao um
   divisor.

   right recuado em uma unidade de tracking apaga o espaco que o letter-spacing
   deixa depois da ultima letra: sem isso o traco passaria da palavra. */
.hero__bordao b::after {
  content: '';
  position: absolute;
  left: 0;
  right: var(--letra-ar);
  bottom: -0.15em;
  height: 1px;
  background: var(--ouro-claro);
  transform: scaleX(0);
  transform-origin: left center;
  /* Depois do bordao inteiro ja ter subido (entra a 0,45s por 0,9s). Delles
     primeiro, Elas logo atras: a leitura vai da esquerda pra direita e os dois
     tracos acompanham. */
  animation: sublinha 0.55s var(--curva) 1.15s both;
}

.hero__bordao b:last-of-type::after {
  animation-delay: 1.45s;
}

@keyframes sublinha {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes marca-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Entra subindo, como o fio se desenha: uma vez, no load.

   O LOGO NAO ANIMA OPACIDADE, e isto e deliberado.

   Animacao com fill both segura o estado inicial ate o relogio andar. Se ele
   nao andar — aba em segundo plano, motor de animacao suspenso — um fade que
   comeca em 0 deixa a marca da loja invisivel por tempo indeterminado. Vi
   acontecer em teste. E o mesmo perigo que este arquivo ja descreve no fio, e
   aqui o elemento e o logo do cliente, entao a falha e pior.

   Com transform sozinho o pior caso e o logo aparecer 10px mais baixo, que
   ninguem percebe. O nome da colecao pode desvanecer porque e secundario: se
   ele falhar, a marca e o video continuam de pe. */
.hero__logo {
  animation: marca-sobe 0.9s var(--curva) 0.2s backwards;
}

@keyframes marca-sobe {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

/* A coluna editorial do hero so existe no desktop. No celular o hero e video
   + logo sobrepostos e nao ha largura pra ela. */
.hero__editorial { display: none; }

@media (min-width: 48rem) {
  /* Hero editorial: video vertical a ESQUERDA, texto a direita, o par centrado
     na tela.

     A tentativa anterior centrava so o video e deixava papel dos dois lados —
     honesto no celular, mas numa tela larga o quadro estreito flutuando no
     vazio le como print mal enquadrado. Trazer de volta a coluna da direita,
     agora com texto REAL (nome da colecao + linha da propria descricao do
     site) e nao o placeholder que existia antes, transforma o vazio em
     composicao: video de um lado, palavra do outro, como campanha de moda.

     O video continua coluna e nao sangra: 22rem por ~40rem de altura da 0,55,
     que e praticamente o 9:16 do arquivo — ele aparece quase sem corte. */
  .hero {
    grid-template-columns: minmax(0, 22rem) minmax(0, 26rem);
    justify-content: center;
    align-items: stretch;
    gap: clamp(2.5rem, 6vw, 6rem);
    /* teto em rem pra nao esticar num monitor alto e jogar a grade pra fora da
       primeira tela; 40rem casa com o 9:16 do video na largura de 22rem. */
    height: min(72dvh, 40rem);
  }

  /* Video e logo ficam JUNTOS na coluna 1: o logo dourado so tem contraste
     sobre a base escura do video (no creme mede 1,42:1 e some). */
  .hero__media { grid-column: 1; }
  .hero__marca {
    grid-column: 1;
    align-items: center;
    padding: 0 1.5rem 2rem;
  }
  .hero__logo { width: min(72%, 13rem); }

  /* ── Coluna editorial (direita) ── */
  .hero__editorial {
    grid-column: 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
  }
  .hero__rotulo {
    margin: 0;
    font-size: 0.625rem;
    color: var(--cinza);
  }
  /* voz-peso ja poe Jost 600 caps; aqui so cresce. E o eco do provador__titulo,
     entao a colecao fala com a mesma voz de titulo do resto do site. */
  .hero__colecao {
    margin: 0;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 0.98;
    color: var(--tinta);
  }
  /* O fio dourado da pagina reaparecendo aqui — mesma cor do fio do topo e dos
     tracos das pecas. Ouro como decoracao, nunca como letra. */
  .hero__fio-ed {
    display: block;
    width: 3.5rem;
    height: 2px;
    background: var(--ouro);
  }
  .hero__lead {
    margin: 0;
    max-width: 22rem;
    color: var(--cinza);
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  /* O mesmo momento dourado do .wpp: --tinta sobre --ouro (5,40:1). Copiado e
     nao herdado porque o .wpp e <button>/<a> de acao de compra; este e link de
     ancora pra grade. */
  .hero__cta {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.85rem 1.9rem;
    background: var(--ouro);
    color: var(--tinta);
    text-decoration: none;
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--letra-ar);
    text-indent: var(--letra-ar);
    transition: background 0.2s var(--curva);
  }
  .hero__cta:hover { background: var(--ouro-hover); }
}

/* ── Grade ────────────────────────────────────────────────── */
/* Sem superficie de card: a foto vai direto no papel. Um card branco
   atras de uma foto bege sobre uma pagina off-white empilha tres
   neutros quentes e a borda nao separa nada — so suja. */

/* O respiro de cima e menor que o de baixo de proposito.

   Com --folga nos dois lados sobrava quase meia tela de papel entre o video e
   a primeira foto no celular: depois do hero, o vazio. Encurtando o topo, as
   duas primeiras fotos espiam na dobra — e ai rolar deixa de ser fe e vira
   curiosidade. O respiro de baixo continua cheio, separando do bloco preto. */
.grade-secao {
  padding: clamp(1.5rem, 5vw, 3rem) var(--passo) var(--folga);
}

/* A contagem e informacao de verdade, nao enfeite: diz o tamanho do catalogo
   antes da cliente rolar. Por isso e o unico rotulo da secao. */
.grade-conta {
  display: block;
  margin: 0 0 1rem;
  font-size: 0.5625rem;
  color: var(--cinza);
}

/* ── O filtro ─────────────────────────────────────────────── */
/* Fita de categorias acima da grade.

   O eixo e parte do corpo, nao tipo de produto — ver a nota em produtos.js.

   Rola na horizontal no celular em vez de quebrar linha: com cinco rotulos em
   Jost tracked, quebrar deixaria um chip solto na segunda linha e a barra
   passaria a ocupar o dobro da altura logo acima da primeira foto, que e o
   lugar mais caro da pagina. */
.filtro {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  /* Sangra ate a borda da tela e devolve o respiro por dentro: assim o
     primeiro chip alinha com a grade e o ultimo nao fica colado na borda
     quando a fita esta rolada ate o fim. */
  margin-left: calc(var(--passo) * -1);
  margin-right: calc(var(--passo) * -1);
  padding: 0 var(--passo) 0.15rem;
  scroll-padding: 0 var(--passo);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filtro::-webkit-scrollbar { display: none; }

/* Mesmo desenho do chip de tamanho do provador: a pagina ja ensinou esse
   controle uma vez, entao ele nao precisa ser aprendido de novo. */
/* 0,65rem de respiro vertical leva o chip a ~36px de alvo, e nao aos 44 que
   o projeto usa no X de tirar peca e no icone do provador. E a mesma licenca
   ja tomada nos passos de quantidade: errar aqui custa ver a categoria errada
   e tocar de novo, nao perder uma peca. E a fita fica logo acima da primeira
   foto, que e o espaco mais caro da pagina — 44px empurrariam a grade pra
   baixo da dobra. */
.filtro__botao {
  flex-shrink: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--fio);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.5625rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--letra-ar);
  text-indent: var(--letra-ar); /* compensa o tracking do ultimo caractere */
  color: var(--cinza);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva),
              background 0.2s var(--curva);
}

.filtro__botao:hover { border-color: var(--tinta); color: var(--tinta); }

/* Ouro como campo com tinta em cima — ouro como letra reprova em AA. Mesma
   regra do botao do WhatsApp, do disco de contagem e do chip de tamanho. */
.filtro__botao[aria-pressed='true'] {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--tinta);
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 5vw, 2.5rem) clamp(0.75rem, 2.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  /* A secao ganha um teto de largura e centra. Sem isto, numa tela larga as 3
     colunas esticavam a foto ate ~600px e a peca virava poster — foi o que
     ficou "estranho". Com o teto, o catalogo acompanha o respiro centrado do
     hero em vez de sangrar de ponta a ponta. */
  .grade-secao { max-width: 90rem; margin-inline: auto; }
  .grade { grid-template-columns: repeat(3, 1fr); }
}

/* Tela larga: 4 colunas. Com o teto de 90rem cada foto fica perto de 330px —
   tamanho de vitrine, nao de outdoor. */
@media (min-width: 75rem) {
  .grade { grid-template-columns: repeat(4, 1fr); }
}

.peca__botao {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

/* O <picture> vira a moldura fixa por onde a foto se move no hover. Sem o
   overflow aqui a foto cresceria por cima das vizinhas. */
.peca__botao picture,
.peca__vazia__moldura {
  overflow: hidden;
  background: var(--fio);
}

.peca__foto {
  width: 100%;
  /* height: auto e obrigatorio. Os atributos width/height do <img> viram
     hints de CSS, e sem isto o height="1710" vence o aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Nasce invisivel e aparece quando o arquivo termina de baixar, senao a
     cliente ve o campo cinza e um estalo quando a foto entra. */
  opacity: 0;
  transition: opacity 0.5s var(--curva), transform 0.7s var(--curva);
}

.peca__foto[data-carregada] { opacity: 1; }

/* Movimento de lookbook: a foto se move dentro de uma moldura parada. */
.peca__botao:hover .peca__foto[data-carregada],
.peca__botao:focus-visible .peca__foto[data-carregada] {
  transform: scale(1.04);
}

/* O fio dourado de cada peca. Decoracao nao tem exigencia de contraste, entao
   e aqui que o ouro pode viver de verdade: 6 linhas na grade em vez de zero.

   Ele se desenha quando a peca entra na tela, da esquerda pra direita, com a
   mesma curva do fio do topo. E o gesto do logo repetindo pela pagina: rolar
   a grade vira uma sequencia de tracos se desenhando, em vez de seis riscos
   parados. Por isso e ::before com scaleX, e nao um border-top. */
.peca__legenda {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
}

.peca__legenda::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--curva) 0.1s;
}

.peca[data-visivel] .peca__legenda::before { transform: scaleX(1); }

/* Nome e preco empilhados, nao espalhados nas pontas. Com nome de duas
   palavras — "Conjunto Pantalona Marrom" — o space-between quebrava o nome
   em duas linhas e deixava o preco boiando no canto. */
.peca__nome {
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.peca__preco {
  font-size: 0.625rem;
  color: var(--cinza);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ── Peca sem foto ────────────────────────────────────────── */
/* Some sozinha quando a foto chegar: quem decide e a presenca do arquivo,
   nao uma marcacao manual que alguem esqueceria de tirar. */

.peca__vazia__moldura {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--luz);
  box-shadow: inset 0 0 0 1px var(--fio);
}

.peca__vazia__selo {
  font-size: 0.5625rem;
  color: var(--cinza);
}

.peca--vazia .peca__legenda::before { background: var(--fio); }

/* ── Bloco preto ──────────────────────────────────────────── */
/* O JPG do logo tem fundo preto, entao ele encaixa sem edicao. O bloco
   e #000000 exato: qualquer outro preto expoe a borda do JPG. O blend
   screen come os artefatos de compressao da borda. */

.rodape {
  background: var(--preto);
  color: var(--branco);
  padding: var(--folga) var(--passo);
  padding-bottom: calc(var(--folga) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.rodape__logo {
  width: clamp(9rem, 34vw, 12rem);
  height: auto;
  mix-blend-mode: screen;
}

.rodape__links {
  display: flex;
  gap: 1.75rem;
}

.rodape__link {
  font-size: 0.625rem;
  color: var(--ouro-claro);
  text-decoration: none;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--letra-ar);
}
.rodape__link:hover { color: var(--branco); }
.rodape__link:focus-visible { outline-color: var(--ouro-claro); }

/* ── Dados da loja ────────────────────────────────────────── */
/* Endereco, horario e CNPJ. Separados dos links por um fio dourado: sao
   informacao de confianca, nao navegacao. */

.rodape__loja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(230 190 100 / 0.35);
  width: min(22rem, 100%);
  color: var(--cinza-claro);
  font-size: 0.75rem;
  line-height: 1.5;
}

.rodape__endereco {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--curva);
}
.rodape__endereco:hover { color: var(--branco); }
.rodape__endereco address { font-style: normal; margin: 0; }

.rodape__horario { margin: 0; }

/* Menor e mais apagado: e o dado que quase ninguem le, mas que precisa
   estar la. Ainda passa em AA. */
.rodape__cnpj {
  margin: 0;
  font-size: 0.625rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ── Modal ────────────────────────────────────────────────── */
/* Nao e galeria: e o seletor de tamanho. Ha uma foto por peca, e e aqui
   que a cliente escolhe P/M/G antes da mensagem do WhatsApp ser montada. */

/* ── Provador ─────────────────────────────────────────────── */
/* A tela do pedido. Secao irma do catalogo, e nao <dialog>: quem troca as
   duas e o hash da URL, entao o gesto de voltar do celular volta pro catalogo
   em vez de sair do site — e camada sobre camada fica impossivel de existir.

   O nome nao virou "sacola" a esmo: a loja fecha por conversa, e o que esta
   aqui e o que ela vai perguntar. Mas a peca tem quantidade e o total soma.
   E um pedido de verdade, so que sem pagamento. */

#catalogo[hidden],
#provador[hidden] { display: none; }

.provador {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--passo) var(--folga);
}

.provador__topo { padding: 1.25rem 0 0; }

.provador__voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--cinza);
  cursor: pointer;
  transition: color 0.2s var(--curva);
}

.provador__voltar:hover { color: var(--tinta); }
.provador__voltar svg { pointer-events: none; }

.provador__titulo {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1;
  margin: 0.75rem 0 1.75rem;
}

/* Recebe o foco na troca de tela, entao o contorno so pode aparecer quando o
   foco chegou por teclado — senao a tela abre com um retangulo em volta do
   titulo toda vez. */
.provador__titulo:focus { outline: none; }
.provador__titulo:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.provador__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--fio);
}

.provador__lista[hidden] { display: none; }

.provador__vazia {
  padding: 2.5rem 0;
  color: var(--cinza);
  font-size: 0.875rem;
}

/* ── A linha do pedido ────────────────────────────────────── */
/*  [foto] [nome + tamanhos]  [x]
    [foto] [qtd ....... preco]  */

.linha {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  column-gap: 1rem;
  row-gap: 0.85rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--fio);
}

/* A foto e o produto. Em miniatura de recibo a cliente nao reconhece o que
   separou; neste tamanho a lista continua sendo o lookbook que ela montou. */
.linha__foto {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.linha__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fio);
  transition: transform 0.5s var(--curva);
}

.linha__foto:hover img { transform: scale(1.05); }

.linha__info {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.linha__nome {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.linha__tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Chip de tamanho. Trocar o tamanho aqui evita o caminho de hoje, que era
   tirar a peca do provador e por de novo no tamanho certo. */
.chip {
  min-width: 2.1rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--fio);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--cinza);
  cursor: pointer;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva);
}

.chip:hover { border-color: var(--tinta); color: var(--tinta); }

/* Ouro como campo com tinta em cima — a mesma regra do botao do WhatsApp e do
   disco de contagem. Ouro como letra reprovaria em AA. */
.chip[aria-pressed='true'] {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--tinta);
}

.linha__fim {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.linha__qtd {
  display: flex;
  align-items: center;
  border: 1px solid var(--fio);
}

/* 2,25rem por passo. Menor que os 2,75 do padrao porque sao dois alvos
   colados e o conjunto todo ja passa de 6rem — errar aqui custa um toque no
   "+" em vez de no "−", nao a peca errada. */
.qtd__passo {
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--cinza);
  font-size: 0.875rem;
  transition: color 0.2s var(--curva), background 0.2s var(--curva);
}

.qtd__passo:hover { color: var(--tinta); background: var(--luz); }

.qtd__n {
  min-width: 1.75rem;
  text-align: center;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.linha__preco {
  margin: 0;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 2,75rem de alvo: abaixo disso o dedo erra e a cliente tira a peca errada. */
.linha__tirar {
  grid-column: 3;
  grid-row: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.5rem -0.6rem 0 0;
  cursor: pointer;
  color: var(--cinza);
  line-height: 0;
  display: grid;
  place-items: center;
}

.linha__tirar:hover { color: var(--tinta); }

/* O icone nunca e o alvo do clique: sem isto o evento chega no <path> do SVG
   e qualquer codigo que olhe pro alvo precisa saber subir ate o botao. */
.modal__fechar svg,
.linha__tirar svg { pointer-events: none; }

/* ── O pe do pedido ───────────────────────────────────────── */
/* Nao e fixo. A lista tem no maximo uma duzia de linhas, entao o pe chega
   rolando em um gesto — e barra fixa foi exatamente o que saiu daqui. */

.provador__pe {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.provador__pe[hidden] { display: none; }

.provador__total {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 500;
}

.provador__total span:last-child {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
}

@media (min-width: 48rem) {
  .linha { grid-template-columns: 7rem 1fr auto; }
  .provador__pe {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .provador__total { gap: 1.5rem; }
}

/* O bloco preto e informacao de loja, nao de pedido. Na tela do provador ele
   so empurraria o botao do WhatsApp pra fora da vista. */
body:has(#provador:not([hidden])) .rodape { display: none; }

/* Trava o fundo enquanto o modal esta aberto.

   Declarativo de proposito. Antes isto era JS: overflow='hidden' ao abrir e
   overflow='' no evento 'close' do <dialog>. So que o 'close' nao e garantido
   — em teste ele simplesmente nao disparou — e ai a cliente fechava o modal e
   a pagina ficava presa sem rolar, que e pior do que o problema original.
   Com :has() o estado segue o DOM: fechou por Esc, por clique no fundo ou por
   close(), destrava sozinho. Nao ha evento pra perder nem estado pra desfazer. */
body:has(.modal[open]), body:has(.provador[open]), body:has(.inteira[open]) { overflow: hidden; }

/* ── Foto inteira ─────────────────────────────────────────── */
/* Abre por cima do modal. Fundo quase preto pra foto de qualquer proporcao
   pousar sem borda esquisita — e porque aqui a peca e a unica coisa na tela. */

.inteira {
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: rgb(10 9 8 / 0.97);
  place-items: center;
}

/* O display mora no [open], e nao na regra de cima.

   Solto, ele vence o `dialog:not([open]) { display: none }` do navegador —
   regra de autor ganha de user-agent independente de especificidade — e o
   dialogo FECHADO passa a renderizar no fluxo: um bloco de altura de tela,
   quase preto, no fim da pagina.

   Ficou invisivel por muito tempo porque o rodape tambem e preto e os dois
   emendavam num so. Na tela do provador, onde o rodape nao existe, ele
   aparece sozinho embaixo do pedido. */
.inteira[open] {
  display: grid;
}

.inteira::backdrop { background: rgb(10 9 8 / 0.9); }

.inteira__wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* O limite e a TELA, nao a cadeia de pais.

   max-height: 100% aqui nao funcionava: cada container acima e grid de linha
   automatica, e linha automatica cresce com o conteudo — entao o 100% da foto
   media contra a altura da propria foto e ela estourava a tela, que e o
   oposto do que esta janela existe pra fazer. Percentual so resolve contra
   altura definida, e nenhuma delas era.

   dvh e nao vh por causa da barra de endereco do Safari, igual ao hero. Os
   6,5rem sao o respiro de cima e de baixo mais o espaco do botao de fechar. */
.inteira__foto {
  max-width: calc(100vw - 2 * var(--passo));
  max-height: calc(100dvh - 6.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: auto;
  height: auto;
  object-fit: contain;
}

.inteira .modal__fechar {
  background: none;
  color: var(--branco);
  z-index: 2;
}

/* ── Ampliar, no modal ────────────────────────────────────── */

.modal__ampliar {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
}

/* Sem a dica ninguem descobre que a foto abre. Discreta o bastante pra nao
   competir com a peca, e sobre um degrade porque pousa em cima da foto. */
.modal__ampliar__dica {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem 0.9rem 0.7rem;
  text-align: right;
  font-size: 0.5rem;
  color: var(--branco);
  background: linear-gradient(to top, rgb(10 9 8 / 0.5), rgb(10 9 8 / 0));
  transition: opacity 0.25s var(--curva);
}

.modal__ampliar:hover .modal__ampliar__dica { opacity: 0.7; }

.modal {
  border: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: var(--branco);
  color: var(--tinta);
}

.modal::backdrop { background: rgb(26 26 24 / 0.55); }

.modal__corpo {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fora do .modal__corpo de proposito: ele rola, e o fechar tem que ficar
   parado no canto. Ancorado no <dialog>, que o UA ja posiciona fixo. */
.modal__fechar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin: 0.5rem;
  padding: 0.7rem;
  cursor: pointer;
  background: var(--branco);
  color: var(--tinta);
  line-height: 0;
  border-radius: 50%;
}

.modal__foto-wrap {
  min-width: 0;
}

.modal__foto {
  width: 100%;
  height: auto; /* mesmo motivo do .peca__foto */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fio);
}

.modal__info {
  grid-row: 2;
  grid-column: 1;
  padding: 1.5rem var(--passo) calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.modal__nome {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

.modal__preco {
  font-size: 0.75rem;
  color: var(--cinza);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  margin: 0;
}

.tamanhos { display: flex; flex-direction: column; gap: 0.6rem; }

.tamanhos__label {
  font-size: 0.5625rem;
  color: var(--cinza);
}

.tamanhos__opcoes { display: flex; gap: 0.5rem; }

.tamanho {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--fio);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.08em;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva);
}

.tamanho:hover { border-color: var(--cinza); }

/* O tamanho escolhido se marca em ouro. A borda e decoracao, entao pode ser
   dourada; o numero dentro dela continua tinta e mantem o contraste. */
.tamanho[aria-pressed='true'] {
  border-color: var(--ouro);
  box-shadow: inset 0 0 0 1px var(--ouro); /* o peso do traco sem engordar a caixa */
  color: var(--tinta);
  font-weight: 600;
}

/* ── Cores ────────────────────────────────────────────────── */
/* A mesma peca em cores diferentes, num card so.

   Miniatura da foto, e nao bolinha de cor chapada. "Vinho" e "preto" em
   bolinha viram dois circulos escuros quase iguais no celular, e a cliente
   escolhe no escuro. Com a foto ela ve a peca NAQUELA cor — que e a pergunta
   real: "como fica?", nao "qual matiz?".

   Vale tambem pro caso que nao e cor nenhuma: o pijama infantil usa este
   mesmo controle pra alternar entre a foto da menina e a do menino. */

.cores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  cursor: pointer;
  color: var(--cinza);
  transition: color 0.2s var(--curva);
}

.cor img {
  width: 3rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fio);
  border: 1px solid transparent;
  transition: border-color 0.2s var(--curva);
}

.cor:hover { color: var(--tinta); }
.cor:hover img { border-color: var(--fio); }

/* Ouro como borda — decoracao, nao letra. Mesma regra do chip de tamanho. */
.cor[aria-pressed='true'] img {
  border-color: var(--ouro);
  box-shadow: 0 0 0 1px var(--ouro);
}

.cor[aria-pressed='true'] { color: var(--tinta); }

.cor__nome {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A nota da loja: "consulte as cores disponiveis". Fica em cinza e pequena
   porque e ressalva, nao chamada. */
.modal__nota {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--cinza);
}

.modal__nota[hidden] { display: none; }

/* O botao e O momento dourado da pagina: --tinta sobre --ouro da 5,40:1.

   O hover CLAREIA, o que parece errado e nao e. O texto em cima e escuro,
   entao escurecer o ouro aproxima os dois: #9a771f daria 4,18:1 e reprovaria.
   E um bug que o Lighthouse nao pega, porque ele nao testa hover. */
.wpp {
  display: inline-block;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--ouro);
  color: var(--tinta);
  text-align: center;
  text-decoration: none;
  font-size: 0.6875rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--letra-ar);
  text-indent: var(--letra-ar); /* compensa o tracking do ultimo caractere */
  transition: background 0.2s var(--curva);
}
.wpp:hover { background: var(--ouro-hover); }

/* Nenhuma peca marcada: o botao continua legivel mas nao convida.

   O texto e --tinta e nao --cinza: cinza sobre fio da 3,46:1 e reprova em AA.
   Estado desligado nao e desculpa pra texto ilegivel — quem precisa ler e
   justamente quem nao entendeu por que o botao nao funciona. Tinta sobre fio
   da 12,04:1, e quem comunica o desligado e o fundo apagado, nao a letra. */
.wpp[data-travado] {
  background: var(--fio);
  color: var(--tinta);
  cursor: not-allowed;
}
.wpp[data-travado]:hover { background: var(--fio); }

@media (min-width: 48rem) {
  .modal {
    width: min(58rem, 92vw);
    height: auto;
    max-height: 88dvh;
    margin: auto;
  }
  .modal__corpo {
    grid-template-rows: 1fr;
    grid-template-columns: 0.85fr 1fr;
    overflow: hidden;
  }
  .modal__ampliar { grid-row: 1; grid-column: 1; height: 100%; }
  .modal__foto-wrap { height: 100%; }
  .modal__foto { height: 100%; aspect-ratio: auto; }
  .modal__info {
    grid-row: 1;
    grid-column: 2;
    justify-content: center;
    padding: 2.5rem;
    overflow-y: auto;
  }
  .modal__fechar { background: none; margin: 0.75rem; }
  .wpp { width: auto; }
}

/* ── Movimento ────────────────────────────────────────────── */
/* So transform e opacity. Nada de listener de scroll. */

/* --i e o indice do card, posto pelo app.js. Escalona a entrada dentro da
   fileira pra grade nascer em cascata, nao em bloco. O modulo 3 zera o atraso
   a cada fileira: sem ele a ultima peca de um catalogo de 80 esperaria
   4 segundos pra aparecer. */
.sobe {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.7s var(--curva) calc(var(--i, 0) * 70ms),
    transform 0.7s var(--curva) calc(var(--i, 0) * 70ms);
}

.sobe[data-visivel] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* O fio nasce desenhado e a grade nasce visivel, nao "aparecem rapido".
     O animation-duration de 0,01ms acima ja levaria o fio ao fim por causa do
     fill both, mas declarar aqui deixa a intencao explicita. */
  .fio__traco { animation: none; transform: scaleX(1); }
  .sobe { opacity: 1; transform: none; }
  /* O lockup inteiro nasce posto. Os atrasos escalonados (0,1s no fio, 0,45s
     no bordao), mesmo com a duracao zerada, ainda segurariam cada parte no
     estado inicial por ate meio segundo — para quem pediu menos movimento
     isso le como falha de carregamento, nao como animacao curta. */
  .hero__logo { animation: none; transform: none; }
  .hero__bordao { animation: none; opacity: 1; transform: none; }
  /* Os sublinhados nascem desenhados: sem a animacao, scaleX(0) os deixaria
     invisiveis pra sempre. */
  .hero__bordao b::after { animation: none; transform: scaleX(1); }
}