/* ============================================================
   WALL — mostruário de varejo
   ------------------------------------------------------------
   DIREÇÃO: editorial de revista de moda.

   Não é minimalismo genérico nem "bloco colorido de startup".
   É página de revista: didone grande com entrelinha curta, grid
   suíço usado de forma assimétrica, muito respiro, e papel —
   fundo osso com grão, não branco chapado.

   O fundo não é branco de propósito: foto de roupa em fundo
   claro quente ganha carne; em branco puro, descora.

   TIPOGRAFIA — nenhuma serifa. Duas famílias, três papéis:
     editorial  Outfit 300, tracking apertado — títulos grandes
     display    Outfit 500, tracking aberto   — nav, botões, rótulos
     corpo      Manrope                        — leitura
   A voz editorial é peso e entressilaba, não outra família.

   CONTRASTE: os valores de --ink-3, --azul-texto e --whats foram
   calculados, não escolhidos no olho — os originais reprovavam
   em 4.5:1. O verde do WhatsApp com texto branco dava 2.75.
   ============================================================ */

:root {
  /* ---- superfícies ---------------------------------------
     Escada de elevação sobre página branca.

     A ordem inverteu, e isso não é detalhe: antes a página era
     osso e o cartão era MAIS CLARO que ela. Com a página branca
     não existe "mais claro que branco", então o cartão passa a
     ser levemente mais escuro. Trocar só o fundo sem inverter a
     escada deixaria cartão e página a 1,05:1 — invisíveis.

     Os nomes ficaram: --osso já é o "fundo da página" em ~40
     lugares, e renomear token não muda pixel nenhum.            */
  --osso: #ffffff;       /* página */
  --papel: #f7f7f7;      /* cartão sobre a página — 1,07:1 */
  --osso-2: #efefef;     /* faixa de seção e fundo de foto — 1,15:1 */
  --escuro: #0E1113;     /* carvão, levemente frio — branco em cima dá 18,9:1 */
  --escuro-alto: #171B1D; /* topo do degradê das superfícies escuras */

  /* ---- tinta ---------------------------------------------
     Neutralizada. Os cinzas eram quentes de propósito, para casar
     com o bege do osso. Sobre branco o mesmo tom não lê como
     "aquecido", lê como sujo — então saiu o verde/amarelo residual.
     Contraste conferido no pior caso, que é texto sobre osso-2.  */
  --ink: #101010;        /* 19,0:1 no branco | 16,6:1 no osso-2 */
  --ink-2: #4a4a4a;      /*  8,9:1 no branco |  7,7:1 no osso-2 */
  --ink-3: #666666;      /*  5,7:1 no branco |  5,0:1 no osso-2 */
  --ink-alto: #2b2b2b;   /* hover do botão preenchido */

  /* ---- funcional -----------------------------------------
     O verde é o único resto de cor no site, e fica porque não é
     identidade: é sinal de canal (WhatsApp) e de sucesso. O azul
     que morava aqui era herança do catálogo de atacado — nunca
     chegou a pintar nada e saiu junto com a decisão monocromática. */
  --whats: #178840;      /* 4,53:1 nos dois sentidos */

  --linha: rgba(0, 0, 0, .12);
  --linha-forte: rgba(0, 0, 0, .28);

  /* ---- fontes -------------------------------------------- */
  /* Circular Std é a que o Lucas marcou nas referências. É paga:
     se estiver instalada, entra; senão cai na Outfit.

     Nenhuma serifa no site. A voz "editorial" continua existindo,
     mas agora ela é PESO E ENTRESSILABA, não outra família: Outfit
     fina e apertada nos tamanhos grandes, média e aberta nos
     pequenos. Uma família fazendo dois papéis — é o que dá o ar de
     interface moderna em vez de revista. */
  --display: "Circular Std", "CircularStd", "Outfit", system-ui, sans-serif;
  --editorial: "Circular Std", "Outfit", system-ui, sans-serif;
  --corpo: "Manrope", system-ui, sans-serif;

  /* ---- métrica ------------------------------------------- */
  --foto: 3 / 4;
  --topo: 64px;   /* era 72: oito pixels a menos por pagina inteira */
  --aviso: 30px;
  /* quanto de tela o cabeçalho ocupa — a página inteira se orienta por isto */
  --deslocamento-topo: calc(var(--aviso) + var(--topo));
  /* a curva e o tempo do cabeçalho, repetidos em tudo que se move com ele */
  --curva-topo: cubic-bezier(.25, 1, .5, 1);
  --tempo-topo: .4s;
  --gut: clamp(18px, 4vw, 64px);
  --curva: cubic-bezier(.22, .8, .3, 1);

  /* ---- movimento ----------------------------------------- */
  /* O jeito Framer de se mexer não é uma curva de Bézier: é mola.
     Bézier desacelera e para; mola passa um fio do destino e volta.
     É essa ultrapassagem mínima que o olho lê como peso — a coisa
     tem massa, não é um valor sendo interpolado.

     `linear()` deixa descrever a mola em CSS puro. Onde não houver,
     fica o cubic-bezier de cima, que é a melhor imitação. */
  --mola: cubic-bezier(.34, 1.4, .64, 1);
  /* saída expo: começa rápido e assenta longo — para revelações,
     onde ultrapassar o destino ficaria nervoso */
  --saida: cubic-bezier(.16, 1, .3, 1);
  --raio: 2px;
  --toque: 44px;          /* alvo mínimo de toque */

  /* escala de z-index declarada, pra não virar leilão */
  --z-grao: 1;
  --z-topo: 70;
  --z-aviso: 40;
  --z-zap: 50;
  --z-gaveta: 55;
  --z-pop: 80;
  --z-painel: 90;   /* filtros e menu de ordenacao */
}

/* A mola de verdade, onde o navegador souber `linear()`. Ela ultrapassa
   1.7% e volta — quase imperceptível item a item, decisiva no conjunto. */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --mola: linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
      0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%,
      1.015 55%, 1.017 63.9%, 1.001
    );
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  /* o padrão do navegador aqui é serifa; nada visível herda dela, mas
     controles de formulário às vezes escapam do body */
  font-family: var(--corpo);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + var(--aviso) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--osso);
  color: var(--ink);
  font-family: var(--corpo);
  font-size: 16px;           /* mínimo legível no celular */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
body.travado { overflow: hidden; }

/* Papel, não tela. Um calor no alto e uma camada de grão: o osso
   chapado ficava plástico em monitor grande. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grao);
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(198, 178, 148, .20), transparent 62%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grao);
  pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

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

.pula {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--osso); padding: 12px 18px;
}
.pula:focus { left: 8px; top: 8px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- tipos */

h1, h2, h3, h4 { font-weight: 400; line-height: 1; letter-spacing: -.02em; }

/* Voz editorial: didone, corpo grande, entrelinha curta.
   É ela que carrega a personalidade da página. */
.hero__titulo, .titulo-secao, .faixa__titulo, .lema p,
.capa-pagina__txt h1, .insta__cabeca h2, .pdp__nome, .cartaz__conteudo h3,
.convite__texto h3, .servico__texto h2, .split__texto h2, .lista__cabeca h1,
.prosa p.destaque, .pop__lado h2, .banner__txt h3 {
  font-family: var(--editorial);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.035em;
}

/* Voz de interface: geométrica, caixa alta, entressilaba aberta. */
.eyebrow, .btn, .link-risco, .nav__link, .acao, .marca__nome, .selo,
.chip, .tam, .peca__nome, .peca__linha, .cat__faixa, .mega h4,
.rodape h4, .filtro > summary, .acordeao summary, .bloco__rot,
.numero b, .comu__item h3, .lista__ordem select, .reel__rot,
.gaveta nav a, .news__campo button, .pop__opcao, .zap, .peca__tag,
.convite__cartao .base, .mega__foto span, .aviso__trilho > span {
  font-family: var(--display);
}

.eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
/* numeração de seção — hábito de revista, e amarra o
   "todos seguem o mesmo padrão" que o Lucas pediu */
.eyebrow[data-n]::before { content: attr(data-n) " — "; color: var(--linha-forte); }

/* A ênfase dentro do título era itálico de didone. A Outfit não tem
   itálico de verdade — o navegador inclinaria a fonte na marra e o
   resultado é um oblíquo torto. Então a ênfase virou peso: a palavra
   destacada engorda enquanto o resto da frase continua fina. */
.arte em { font-style: normal; font-weight: 500; letter-spacing: -.02em; }

.titulo-secao { font-size: clamp(32px, 5vw, 62px); }

/* ---------------------------------------------------------------- layout */

.env { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gut); }

.secao { padding-block: clamp(64px, 9vw, 140px); }
.secao--curta { padding-block: clamp(44px, 5.5vw, 84px); }

.cabeca-secao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.cabeca-secao > div { max-width: 62ch; }
.cabeca-secao .eyebrow { margin-bottom: 14px; display: block; }
.cabeca-secao p { color: var(--ink-2); max-width: 46ch; margin-top: 12px; }

/* ---------------------------------------------------------------- botões */

/* ── CONTRATO UNICO DE BOTAO ─────────────────────────────────────
   Um so formato no site inteiro: pilula.

   Antes havia tres linguagens competindo — o .btn era retangulo de
   canto 14px, enquanto o botao do hero, os chips e os selos ja eram
   pilula. Lado a lado (a linha de testes logo acima do "Ver o
   mostruario") a diferenca lia como descuido, nao como hierarquia.

   A pilula ganhou por ser maioria. O que separa um botao do outro
   passa a ser PESO — cheio, contorno, claro — nunca o formato.

   Metricas fixas que todo botao novo herda: altura de toque, 30px de
   respiro lateral, corpo 12px e entressilaba .14em. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--toque); padding: 0 30px;
  font-size: 12px; font-weight: 500;
  /* Ver a nota do .chip--texto: o `letter-spacing` poe espaco depois da
     ULTIMA letra tambem, e esse rabo desloca o texto centralizado para a
     esquerda. O `text-indent` de mesmo valor devolve o equilibrio.
     Some num botao com icone (o gap manda), aparece nos de texto puro —
     que sao a maioria. */
  letter-spacing: .14em; text-indent: .14em;
  text-transform: uppercase;
  border-radius: 999px; cursor: pointer;
  transition: background .22s var(--curva), color .22s var(--curva), border-color .22s var(--curva);
}
.btn--cheio { background: var(--ink); color: var(--osso); }
.btn--cheio:hover { background: var(--ink-alto); }
/* `currentColor` no lugar de tinta fixa: o mesmo botao serve na pagina
   branca e sobre foto escura. Com `--linha-forte` (preto a 28%) o
   contorno sumia no escuro, e o hover pintava de preto sobre preto —
   o texto desaparecia junto. Agora o hover e um veu da propria cor do
   texto, entao o contraste nunca inverte. */
.btn--linha { border: 1px solid currentColor; opacity: .92; }
.btn--linha:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  opacity: 1;
}
.btn--claro { background: var(--osso); color: var(--ink); }
.btn--claro:hover { background: #fff; }
/* Sem isto o ícone dentro do botão não tem tamanho e o SVG estica até
   onde o pai deixar — no menu de tela cheia ele virava um bloco verde
   de 974px. */
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Verde so onde ele ajuda.

   Sobre superficie clara o verde e o sinal do canal e funciona. Sobre
   o painel escuro ele virava uma placa fluorescente no meio de um
   site monocromatico — e ainda com o contraste no limite (4,53:1).

   No escuro a acao vira pilula clara com tinta preta (19:1) e o verde
   fica so no icone, que e onde o reconhecimento do WhatsApp mora de
   verdade. Menos cor, mais leitura, mesma identificacao. */
.btn--whats { background: var(--whats); color: #fff; }
.btn--whats:hover { background: #106b32; }

.servico .btn--whats {
  background: var(--osso); color: var(--ink);
}
.servico .btn--whats:hover { background: #fff; }
.servico .btn--whats svg { color: var(--whats); }

.link-risco {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: opacity .2s;
}
.link-risco:hover { opacity: .55; }

/* ---------------------------------------------------------------- aviso topo */

.aviso {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-aviso); height: var(--aviso);
  background: var(--escuro); color: var(--osso);
  display: flex; align-items: center; overflow: hidden;
  transition: transform var(--tempo-topo) var(--curva-topo);
}
.aviso__trilho { display: flex; white-space: nowrap; animation: correr 56s linear infinite; }
.aviso__trilho > span {
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; padding-inline: 28px;
}
.aviso__trilho > span::after { content: "◦"; margin-left: 28px; opacity: .45; }
.aviso:hover .aviso__trilho, .aviso:focus-within .aviso__trilho { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- topo */

/* O cabeçalho flutua sobre o hero em vez de empurrá-lo para baixo:
   a foto começa no topo da tela e o menu vive em cima dela, branco.
   Passado o hero, ele ganha fundo e a tinta volta ao escuro.

   Rolando para baixo ele sai de cena; rolando para cima, volta —
   `transform`, não `top`, porque só transform anima sem repintar a
   página inteira a cada quadro.

   Uma curva só manda em tudo (.4s easeOutQuint): o cabeçalho e todo
   o conteúdo que se desloca junto com ele. Curvas diferentes no mesmo
   gesto é o que faz um site parecer remendado. */

.topo {
  position: fixed; top: var(--aviso); left: 0; right: 0;
  z-index: var(--z-topo); height: var(--topo);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform var(--tempo-topo) var(--curva-topo),
              background .35s var(--curva), border-color .35s, backdrop-filter .35s;
}

/* sobre a foto: sem fundo, tinta branca */
.topo--claro,
.topo--claro .nav__link,
.topo--claro .acao,
.topo--claro .marca { color: #fff; }
.topo--claro .marca svg,
.topo--claro .acao svg,
.topo--claro .hamburguer svg { color: #fff; }
.topo--claro .marca__imagem { filter: brightness(0) invert(1); }
.topo--claro .btn--whats { color: #fff; }

/* passado o hero: papel, fio embaixo e vidro */
.topo--solido {
  background: color-mix(in srgb, var(--osso) 92%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--linha);
}

.aviso, .topo { will-change: transform; }
body.topo-fora .aviso,
body.topo-fora .topo { transform: translateY(calc(-1 * var(--deslocamento-topo))); }

/* Fora da home o conteúdo não pode nascer debaixo do cabeçalho.
   Na home ele deve — é o hero sangrando até o topo da tela. */
#conteudo { padding-top: var(--deslocamento-topo); }
#conteudo:has(> .hero:first-child) { padding-top: 0; }

/* min-width:0 nas colunas laterais: sem isso um item de grid recusa
   encolher abaixo do próprio conteúdo e transborda por cima da marca
   em vez de espremer. É a causa raiz da colisão, e vale mesmo com o
   ponto de corte da nav corrigido. */
.topo__linha { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.topo__esq { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topo__linha > .acoes { min-width: 0; }
.nav { min-width: 0; }
.topo .marca { white-space: nowrap; }

.marca { display: inline-flex; align-items: center; gap: 11px; min-height: var(--toque); }
.marca svg { width: 23px; height: 26px; }
.marca__nome { font-size: 22px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; padding-left: 4px; }
.marca__imagem {
  display: block;
  width: clamp(122px, 10.5vw, 164px);
  height: auto;
  max-height: 42px;
  object-fit: contain;
  transition: filter .35s var(--curva), transform .45s var(--mola);
}
.marca:hover .marca__imagem { transform: scale(1.025); }

@media (max-width: 720px) {
  .marca__imagem { width: 126px; max-height: 38px; }
}

/* Trava de seguranca: mesmo com o corte em 4, uma tela estreita ou um
   nome de categoria muito longo poderia empurrar o ultimo link para
   cima da logo. Aqui ele e cortado, nao sobreposto. */
.nav { display: flex; align-items: center; overflow: hidden; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; height: var(--topo); padding-inline: 15px;
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: opacity .2s;
}
.nav__link:hover { opacity: .5; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 22px;
  height: 1px; background: currentColor;
}

.acoes { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.acao {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--toque); padding-inline: 13px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer; transition: background .2s;
}
/* Veu da propria cor do texto, nao um cinza fixo. Sobre o video o
   cabecalho e branco, e `--osso-2` (cinza claro) fazia branco sobre
   quase-branco — o rotulo sumia no hover. Assim o realce funciona
   nas duas peles sem precisar de uma regra para cada. */
.acao:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.acao svg { width: 18px; height: 18px; }
.acao--so-icone { padding-inline: 12px; min-width: var(--toque); justify-content: center; }

/* O menu de tela cheia agora também vale no desktop — a nav de cima
   continua para quem já sabe onde vai; o menu é para quem está
   passeando. */
.hamburguer { display: inline-flex; }

/* O ícone vira X no lugar, sem trocar de elemento. Por isso o
   cabeçalho fica ACIMA do painel (z-index 70 contra 55): o botão
   continua à vista enquanto a cortina desce atrás dele, e o X que
   fecha é o mesmo traço que abriu — não outro botão que apareceu. */
.hamburguer__caixa {
  position: relative; display: block;
  width: 18px; height: 12px;
}
.hamburguer__caixa i {
  position: absolute; left: 0; width: 100%; height: 1.6px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--tempo-topo) var(--curva-topo),
              opacity .2s var(--curva-topo),
              width .3s var(--curva-topo);
}
.hamburguer__caixa i:nth-child(1) { top: 0; }
.hamburguer__caixa i:nth-child(2) { top: 50%; margin-top: -.8px; }
.hamburguer__caixa i:nth-child(3) { bottom: 0; }

/* no repouso, a linha do meio é mais curta — dá um respiro ao traço */
.hamburguer:hover .hamburguer__caixa i:nth-child(2) { width: 70%; }

/* virou X: as pontas giram para o meio e a do meio some antes */
body.menu-aberto .hamburguer__caixa i:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
body.menu-aberto .hamburguer__caixa i:nth-child(2) { opacity: 0; width: 100%; }
body.menu-aberto .hamburguer__caixa i:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* Menu aberto: o cabeçalho não pode se esconder ao rolar nem ficar
   branco, porque agora o fundo dele é o osso do painel. */
body.menu-aberto .topo { transform: none !important; }
body.menu-aberto .aviso { transform: none; }

/* --------- megamenu */

.mega {
  position: absolute; top: 100%; left: 50%;
  width: min(1120px, 94vw);
  background: var(--papel); border: 1px solid var(--linha);
  padding: 40px 44px 36px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  opacity: 0; visibility: hidden; translate: -50% 10px;
  transition: opacity .24s var(--curva), translate .24s var(--curva), visibility .24s;
  box-shadow: 0 34px 64px rgba(20, 25, 30, .1);
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega h4 {
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--linha);
}
.mega ul { list-style: none; display: grid; gap: 2px; }
.mega a { display: flex; align-items: center; min-height: var(--toque); font-size: 14px; color: var(--ink-2); transition: color .2s; }
.mega a:hover { color: var(--ink); }
.mega__foto { grid-column: 4; }
.mega__foto img { aspect-ratio: var(--foto); object-fit: cover; }
.mega__foto span { display: block; margin-top: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* --------- gaveta mobile */

/* O menu não é uma gaveta lateral: é a página inteira trocando de
   assunto. Desce inteiro, e o conteúdo entra em cascata depois —
   primeiro a coluna, depois os itens dela, com 40ms entre um e outro.

   O escalonamento é o que separa "apareceu" de "abriu". Tudo junto
   no mesmo quadro lê como corte seco; em cascata, o olho acompanha. */

/* Cortina, não gaveta. O painel já está montado no lugar certo e o
   que anima é o RECORTE: `inset(0 0 100%)` esconde tudo, `inset(0 0 0)`
   revela de cima para baixo.

   A diferença não é de gosto. Deslizando, o conteúdo entra em
   movimento e o olho persegue o texto enquanto ele viaja. Com o
   recorte, o conteúdo nunca se move — só deixa de estar coberto. Dá
   para começar a ler antes da animação acabar. */

.gaveta {
  position: fixed; top: 0; left: 0; z-index: var(--z-gaveta);
  width: 100vw; height: 100dvh;
  background: var(--osso); padding: 0 0 60px;
  overflow: hidden auto;
  clip-path: inset(0 0 100%);
  transition: clip-path .6s var(--curva-topo);
}
.gaveta[data-aberta="1"] { clip-path: inset(0 0 0); }

/* O recorte já bloqueia o clique, mas não o foco pelo teclado: sem
   isto o Tab entra no menu fechado e o cursor some da tela. */
.gaveta:not([data-aberta="1"]) { pointer-events: none; }

/* O painel não tem barra própria: quem fica no topo é o cabeçalho de
   verdade, por cima dele, com o traço já virado X. Dois X na mesma
   tela seria um a mais.
   Fica no HTML como plano B: sem JS, o menu não abre e este é o
   caminho de volta. */
.gaveta__topo { display: none; }

/* ---- cascata ---- */
.gaveta .revela {
  opacity: 0; translate: 0 16px;
  transition: opacity .5s var(--curva-topo), translate .5s var(--curva-topo);
}
/* 26ms por item: com 27 itens a cascata termina em ~700ms, logo depois
   da cortina (600ms). Mais que isso e o último item chega quando a
   pessoa já parou de olhar. */
.gaveta[data-aberta="1"] .revela {
  opacity: 1; translate: 0 0;
  transition-delay: calc(var(--i, 0) * 26ms + 120ms);
}

/* ---- colunas ---- */
.mega-menu {
  display: grid; gap: clamp(28px, 3vw, 56px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* o cabeçalho flutua por cima do painel: o conteúdo começa depois dele */
  padding: calc(var(--deslocamento-topo) + clamp(24px, 3vw, 48px)) var(--gut) 0;
}
.mega-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mega-col > h3 {
  font-family: var(--editorial); font-size: clamp(22px, 2vw, 30px);
  font-weight: 400; letter-spacing: -.01em;
}
.mega-col ul { display: grid; gap: 12px; list-style: none; }
.mega-col li a {
  font-family: var(--display); font-size: 14px; letter-spacing: .04em;
  color: var(--ink); display: inline-block; position: relative; padding-bottom: 2px;
}
/* risco que cresce da esquerda — o mesmo gesto dos .link-risco do site */
.mega-col li a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale .32s var(--curva-topo);
}
.mega-col li a:hover::after { scale: 1 1; }
.mega-col__olho {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 4px;
}

.mega-cartaz { display: block; }
.mega-cartaz img { width: 100%; aspect-ratio: var(--foto); object-fit: cover; background: var(--osso-2); }
.mega-cartaz span {
  display: inline-block; margin-top: 12px; font-family: var(--display);
  font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid var(--ink);
}

.mega-pecas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mega-peca img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--osso-2); transition: scale .5s var(--curva); }
.mega-peca:hover img { scale: 1.04; }
.mega-peca b {
  display: block; margin-top: 8px; font-family: var(--display);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}

.gaveta__pe { margin-top: 44px; display: grid; gap: 14px; justify-items: start; padding-inline: var(--gut); }

@media (max-width: 980px) {
  .mega-menu { grid-template-columns: 1fr 1fr; }
  .mega-col--cartaz { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 620px) {
  .mega-menu { grid-template-columns: 1fr; }
  .mega-col > h3 { padding-top: 14px; border-top: 1px solid var(--linha); }
}
@media (prefers-reduced-motion: reduce) {
  .gaveta .revela { transition: none; opacity: 1; translate: none; }
}

/* ---------------------------------------------------------------- hero */
/* Assimétrico de propósito: a foto pega 7 colunas, o texto 5, e o
   painel invade a foto. Meio a meio é o que todo site faz. */

/* Sangria total: a foto ocupa a tela inteira e o cabeçalho vive em
   cima dela. O texto desce para a base — o olho entra pela imagem e
   só depois lê. */

.hero { position: relative; height: 100svh; min-height: 540px; background: var(--escuro); }
.hero__palco { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .8s var(--curva), visibility .8s;
}
.hero__slide[data-ativo="1"] { opacity: 1; visibility: visible; }

.hero__foto { position: absolute; inset: 0; overflow: hidden; background: var(--escuro); }
/* Reserva do video: mesma caixa, mesmo corte, uma camada abaixo. */
.hero__poster {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* O banner é o vídeo — não há imagem por baixo. Ele entra num
   dissolver quando o navegador confirma que começou a tocar, para não
   dar o salto do primeiro quadro aparecendo seco. */
.hero__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--saida);
  pointer-events: none;
}
.hero__video.tocando { opacity: 1; }

/* Movimento reduzido: o vídeo continua na tela, parado. Um <video>
   pausado desenha o primeiro quadro, então o hero vira uma foto do
   próprio filme em vez de um vazio preto. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { opacity: 1; transition: none; }
}

/* Dois véus, não um: o de cima segura o cabeçalho branco quando a
   foto clareia ali; o de baixo segura o título. Um véu só, chapado,
   apagaria a roupa — que é o assunto da foto. */
.hero__palco::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 10, 10, .40), rgba(8, 10, 10, 0) 24%),
    linear-gradient(to top,    rgba(8, 10, 10, .46), rgba(8, 10, 10, 0) 38%);
}
.hero__slide[data-ativo="1"] .hero__foto img { animation: respirar 16s ease-out forwards; }
@keyframes respirar { from { scale: 1.07; } to { scale: 1; } }

.ponto { position: absolute; width: var(--toque); height: var(--toque); display: grid; place-items: center; cursor: pointer; }
.ponto::after {
  content: ""; position: absolute; inset: 5px;
  background: rgba(255, 255, 255, .94); border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .24);
}
.ponto::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%;
  animation: pulsar 2.8s ease-out infinite;
}
@keyframes pulsar {
  0% { scale: .9; opacity: .9; }
  70% { scale: 1.5; opacity: 0; }
  100% { opacity: 0; }
}
.ponto svg { width: 14px; height: 14px; position: relative; z-index: 2; color: var(--ink); }
.ponto__cartao {
  position: absolute; left: 54px; top: 50%; width: 268px;
  display: flex; align-items: center; gap: 13px;
  background: var(--papel); padding: 11px;
  opacity: 0; visibility: hidden; translate: -8px -50%;
  transition: opacity .24s var(--curva), translate .24s var(--curva), visibility .24s;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}
.ponto:hover .ponto__cartao, .ponto:focus-visible .ponto__cartao { opacity: 1; visibility: visible; translate: 0 -50%; }
.ponto__cartao img { width: 58px; aspect-ratio: var(--foto); object-fit: cover; }
.ponto__cartao b { display: block; font-family: var(--display); font-size: 13px; font-weight: 500; }
.ponto__cartao span { font-size: 12px; color: var(--ink-3); }

/* Título à esquerda, chamada à direita, os dois na mesma linha de base.
   O texto não fica em caixa: fica em cima da foto, como legenda de
   revista. */
/* O banner é imagem, e só. Sem título, sem selo, sem legenda: sobrou
   a chamada no canto, que é a única coisa ali que leva a algum lugar.
   Fotografia grande não precisa de legenda para ser entendida — e
   quando tem, o olho lê a legenda e para de ver a foto. */
.hero__painel {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gut) clamp(64px, 8vh, 116px);
  display: flex; justify-content: flex-end; align-items: flex-end;
  color: #fff;
}

/* A chamada é um risco, não um botão: sobre foto, botão cheio vira
   remendo. O risco é o gesto da Delvaux — e combina com os
   .link-risco que o resto do site já usa. */
.hero__acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0; }
.hero__painel .btn {
  background: none; border: 0; border-radius: 0; padding: 0 0 5px;
  color: #fff; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  transition: border-color .3s, opacity .3s;
}
.hero__painel .btn:hover { border-bottom-color: #fff; opacity: .78; }
.hero__painel .btn + .btn { color: rgba(255, 255, 255, .72); border-bottom-color: rgba(255, 255, 255, .4); }

@media (max-width: 720px) {
  .hero__painel { justify-content: flex-start; }
  .hero__acoes { flex-direction: row; align-items: center; gap: 22px; }
}
.selo {
  display: inline-flex; align-items: center; height: 30px; padding-inline: 15px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.hero__titulo { font-size: clamp(44px, 6.4vw, 96px); }
.hero__texto { color: var(--ink-2); max-width: 38ch; }
.hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* uma entrada orquestrada, escalonada — vale mais que dez micro-efeitos */
.hero__slide[data-ativo="1"] .hero__acoes {
  animation: subir .9s var(--curva) both; animation-delay: .28s;
}
@keyframes subir { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0; } }

.hero__setas { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.hero__seta {
  position: absolute; top: 50%; translate: 0 -50%;
  width: var(--toque); height: var(--toque); display: grid; place-items: center;
  background: rgba(255, 255, 255, .86); color: var(--ink);
  border-radius: 50%; pointer-events: auto; transition: background .2s;
}
.hero__seta:hover { background: #fff; }
/* uma de cada lado, no meio da altura: o rodapé do hero agora é do
   título, e seta ali em cima virava tropeço */
.hero__seta--ant { left: var(--gut); }
.hero__seta--prox { left: auto; right: var(--gut); }
.hero__seta svg { width: 16px; height: 16px; }

/* alvo de 44px com marca visual de 28×3 — o alvo é o botão, não o risco */
.hero__pontos {
  position: absolute; left: 50%; translate: -50% 0; bottom: 14px;
  display: flex; gap: 8px; z-index: 4;
}
.hero__ponto { width: 36px; height: var(--toque); display: grid; place-items: center; background: none; cursor: pointer; }
.hero__ponto::after { content: ""; width: 28px; height: 3px; background: rgba(255, 255, 255, .5); transition: background .3s; }
.hero__ponto[aria-selected="true"]::after { background: #fff; }

/* ── A RODA DO MOUSE TEM QUE ROLAR A PAGINA ───────────────────────
   `overflow-x: auto` NAO deixa o eixo vertical em `visible`: pela
   especificacao, quando um eixo e `auto` e o outro e `visible`, o
   `visible` vira `auto` tambem. Ou seja, todo trilho horizontal virava
   um container de rolagem VERTICAL — e o navegador manda a roda para o
   container mais interno sob o cursor. Resultado: com o mouse em cima
   de um trilho, a pagina nao andava.

   Por isso agora e `overflow: auto hidden` (x = auto, y = travado) em
   vez de `overflow-x: auto`. A barrinha que voce viu era so o sintoma
   visivel disso.
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- reels */

/* O cartão é vídeo em cima, peça embaixo — e a peça transborda a
   base do vídeo de propósito, meio dentro meio fora. É o que faz o
   bloco parecer vitrine e não galeria: a roupa do vídeo tem nome e
   fica a um clique. Sem preço, como no resto do site: no lugar dele
   vão as cores e a grade.

   O trilho arrasta com o mouse, não só com a barra de rolagem. */

.reels { background: var(--osso-2); }
.reels__trilho {
  display: grid; grid-auto-flow: column;
  /* Teto de largura: com `1fr` numa tela larga cada cartao virava ~400px
     e, em 2/3, 600px de altura — o trilho comia a tela inteira. */
  grid-auto-columns: clamp(206px, 19vw, 296px);
  gap: 18px; overflow: auto hidden; scroll-snap-type: x mandatory;
  /* respiro para o cartão de peça que sai para fora do vídeo */
  padding-bottom: 46px;
  cursor: grab;
}
.reels__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.reels__trilho.arrastando * { pointer-events: none; }

.reel-slide { position: relative; scroll-snap-align: start; }

.reel {
  position: relative; display: block; width: 100%;
  aspect-ratio: 2 / 3; overflow: hidden; background: #111; cursor: pointer;
  border-radius: var(--raio);
  transition: transform .3s ease-in-out;
}
.reel-slide:hover .reel { transform: scale(1.03); }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, scale .9s var(--curva); }
.reel:hover img { scale: 1.04; opacity: .85; }

/* Vidro fosco em cima da foto: o mesmo botão lê bem em roupa clara
   e em roupa escura, sem precisar de véu no cartão inteiro. */
.reel__play {
  position: absolute; inset: 0; margin: auto;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .10); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: #fff;
}
.reel__play::before {
  content: ""; position: absolute; z-index: -1;
  width: 60px; height: 60px; border-radius: 50%;
  animation: pulso-reel 2s infinite;
}
.reel__play svg { width: 15px; height: 15px; margin-left: 2px; }

@keyframes pulso-reel {
  0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); opacity: .85; }
  70%  { transform: scale(1);   box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.reel__rot {
  position: absolute; left: 14px; right: 14px; bottom: 78px; color: #fff;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}

/* ---- cartão da peça do vídeo ---- */
.reel__peca {
  position: absolute; left: 10px; right: 10px; bottom: -30px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 6px;
  background: var(--papel); border-radius: var(--raio); text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
  transition: transform .3s var(--curva), box-shadow .3s;
}
.reel__peca:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.reel__peca img {
  width: 54px; height: 54px; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--raio-p); background: var(--osso-2);
}
.reel__peca span { display: block; min-width: 0; }
.reel__peca b {
  display: block; font-family: var(--display); font-weight: 500; font-size: 13px;
  color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel__peca i {
  display: block; font-style: normal; font-size: 12px; color: var(--ink-3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .reel__play::before { animation: none; }
  .reel, .reel__peca { transition: none; }
  .reel-slide:hover .reel { transform: none; }
}

/* ---------------------------------------------------------------- categorias */

.cats__trilho {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 17vw, 280px);
  gap: clamp(10px, 1.1vw, 16px);
  overflow: auto hidden; scroll-snap-type: x proximity;
  /* Sangra ate a borda: o cartao cortado na direita e o que diz que ha
     mais para o lado. Fileira que termina certinha parece completa. */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: none;
}
.cats__trilho::-webkit-scrollbar { display: none; }

.cat {
  position: relative; scroll-snap-align: start;
  display: block; overflow: hidden; border-radius: var(--raio);
  /* Retrato alto, quase 1:2 — e a proporcao do mockup. Em 5/7 o cartao
     ficava atarracado e a foto de corpo inteiro nao cabia: a modelo
     aparecia cortada na cintura. Alto, a peca aparece inteira e o
     degrade do nome ocupa uma fatia pequena do cartao. */
  aspect-ratio: 1 / 1.95; background: var(--osso-2);
  text-decoration: none;
}
.cat__foto { display: block; width: 100%; height: 100%; }
.cat__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--curva); }
.cat:hover .cat__foto img { scale: 1.05; }

/* ── O NOME VOLTA PARA CIMA DA FOTO, MAS COM VEU FORTE ────────────
   Medi a faixa inferior das fotos de categoria: o ponto mais claro
   chega a luminancia 1.000 — branco puro — em "feminino" e
   "masculino". Sobre isso, texto branco daria 1,00:1: invisivel.

   Por isso o veu vai a 88% no pe do cartao (calculado: 85% ja da
   5,18:1 no pior caso) e dissolve ate 52%. E mais forte do que a
   referencia precisa, porque as fotos dela sao escuras embaixo e as
   nossas sao claras. Sem essa conta, o nome sumiria em duas das seis
   categorias. */
/* O cartao alto (quase 1:2) empurrava a secao para 931px numa janela
   de 900. O respiro em `vw` de novo: 9vw viram 130px em cima e embaixo
   numa tela larga e baixa. Aqui ele passa a ser medido pela ALTURA. */
@media (min-width: 861px) {
  .cats { padding-block: clamp(40px, 6vh, 84px); }
  .cats .cabeca-secao { margin-bottom: clamp(18px, 2.4vh, 32px); }
}
.cats__apoio { color: var(--ink-2); margin-top: 10px; max-width: 44ch; }
.cats__ver { display: inline-flex; align-items: center; gap: 14px; }
.cats__ver-anel {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--linha-forte); color: var(--ink);
  transition: background .2s var(--curva), scale .3s var(--mola);
}
.cats__ver:hover .cats__ver-anel { background: var(--ink); color: var(--osso); scale: 1.05; }
.cats__ver-anel svg { width: 17px; height: 17px; }

.cat__rodape {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: 4px;
  padding: 62px clamp(16px, 1.5vw, 22px) clamp(16px, 1.6vw, 22px);
  /* Forte ate 34%, nao ate 26%: o texto nao fica no PE do cartao, fica
     uns 30% acima — nome mais duas linhas de descricao. O degrade
     anterior ja estava fraco justamente na altura onde o texto mora.
     Agora ele so comeca a dissolver depois do bloco inteiro. */
  background: linear-gradient(to top,
    rgba(6, 8, 8, .94) 0%,
    rgba(6, 8, 8, .86) 18%,
    rgba(6, 8, 8, .60) 34%,
    rgba(6, 8, 8, 0) 66%);
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* Peso 500, nao negrito: no mockup o nome vinha em bold pesado, que
   brigaria com os titulos de secao do site — aqui quem hierarquiza e o
   tamanho e a entressilaba, nao a gordura da letra. */
.cat__nome { display: block; }
.cat__linha {
  display: block; font-family: var(--corpo); font-size: 12.5px;
  letter-spacing: 0; text-transform: none; line-height: 1.35;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- carrossel */

/* .carrossel__titulo saiu: era um titulo centralizado e em caixa-alta
   que so existia no carrossel, e por isso ele lia como secao de outro
   site. Agora carrossel e sugeridos usam .titulo-secao como o resto. */
.carrossel__palco { position: relative; }

/* Sangra ate a borda: o cartao cortado na direita e o que denuncia que
   ha mais para o lado. */
.carrossel__trilho {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 23vw, 340px);
  gap: clamp(10px, 1.2vw, 18px);
  overflow: auto hidden; scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gut); padding-inline: var(--gut);
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > .peca { scroll-snap-align: start; }

.carrossel__seta {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--osso) 86%, transparent);
  border: 1px solid var(--linha);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  transition: background .2s var(--curva), scale .3s var(--mola);
}
.carrossel__seta:hover { background: var(--osso); scale: 1.06; }
.carrossel__seta svg { width: 19px; height: 19px; }
.carrossel__seta--ant  { left: clamp(6px, 1vw, 18px); }
.carrossel__seta--prox { right: clamp(6px, 1vw, 18px); }
/* Ponta do trilho: a seta apaga e para de responder, mas fica no lugar.
   Sumir mudava a quantidade de controles a vista no meio da navegacao. */
.carrossel__seta[disabled] { opacity: .32; cursor: default; pointer-events: none; }
.carrossel__seta[hidden] { display: none; }

@media (max-width: 860px) {
  /* No celular o dedo ja e a seta sobre o trilho. Mas na barra de
     navegacao dos temas elas ficam: ali nao cobrem nada e sao o
     unico controle visivel alem do gesto. */
  .carrossel__palco > .carrossel__seta { display: none; }
}

/* ---------------------------------------------------------------- cartaz do lema */

.cartaz-lema { overflow: hidden; text-align: center; }
.cartaz-lema__palco {
  position: relative;
  display: grid; place-items: end center;
  min-height: min(74vh, 660px); padding-block: 40px;
  /* Perspectiva na cena, nao na letra: o meio da frase recua e as pontas
     avancam, como um letreiro visto de baixo, sem deformar glifo. */
  perspective: 900px;
}

.cartaz-lema__titulo {
  position: absolute; top: 8%; left: 0; right: 0; margin: 0;
  font-family: var(--display); font-weight: 600;
  /* Metade do tamanho original: em 13vw a frase enchia a tela e virava
     textura, nao leitura. */
  font-size: clamp(30px, 5.6vw, 84px);
  /* 1.26, nao 1.02. Medi a caixa pintada do glifo: 97px para uma fonte de
     80px. Em caixa-alta o circunflexo e a cedilha saem da entrelinha, e
     abaixo de 1.21 as linhas se tocam. */
  line-height: 1.26; letter-spacing: -.03em; text-transform: uppercase;
  max-width: 16ch; margin-inline: auto;
  transform: rotateX(14deg) translateY(calc(var(--desloca, 0) * 1px)) scale(var(--escala, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}
/* A enfase e peso, como no resto do site — a Outfit nao tem italico. */
.cartaz-lema__titulo em { font-style: normal; font-weight: 500; }

/* O modelo fica NA FRENTE do titulo. So funciona com PNG recortado: com
   fundo solido a foto vira um retangulo por cima e a composicao morre. */
.cartaz-lema__modelo {
  position: relative; z-index: 2;
  max-height: min(66vh, 580px); width: auto;
  transform: translateY(calc(var(--desloca-foto, 0) * 1px));
  will-change: transform;
}
/* Sem modelo o titulo nao pode ficar preso no alto de um palco vazio. */
.cartaz-lema:not(.cartaz-lema--modelo) .cartaz-lema__palco { min-height: 0; place-items: center; }
.cartaz-lema:not(.cartaz-lema--modelo) .cartaz-lema__titulo {
  position: static;
  transform: rotateX(10deg) translateY(calc(var(--desloca, 0) * 1px)) scale(var(--escala, 1));
}

/* ---- variante com foto de fundo ---- */

/* A foto sangra ate a borda da secao, nao da coluna: o cartaz e um
   respiro de tela cheia no meio da pagina, e uma foto com margem
   viraria mais um cartao — que e o que o resto da home ja faz. */
.cartaz-lema--foto .cartaz-lema__palco {
  isolation: isolate;
  border-radius: var(--raio);
  overflow: hidden;
}
.cartaz-lema__fundo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* O veu e do PALCO, nao da foto: aplicar filtro na <img> escurece
   tambem o modelo recortado que entra por cima dela. */
.cartaz-lema--foto .cartaz-lema__palco::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52));
}
.cartaz-lema--foto .cartaz-lema__titulo { position: relative; z-index: 2; color: #fff; }
.cartaz-lema--foto.cartaz-lema--modelo .cartaz-lema__titulo { position: absolute; }
.cartaz-lema--foto .cartaz-lema__modelo { z-index: 3; }
/* Sem foto o palco nao tem altura propria (ver a regra :not(--modelo)
   acima); com foto ele precisa de uma, senao a imagem colapsa. */
.cartaz-lema--foto:not(.cartaz-lema--modelo) .cartaz-lema__palco {
  min-height: min(58vh, 460px); place-items: center;
}

.cartaz-lema__pe { margin-top: clamp(20px, 3vw, 40px); display: grid; gap: 14px; justify-items: center; }
.cartaz-lema__legenda {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 720px) {
  /* Sem inclinacao no celular: em tela estreita ela come a altura das
     letras e a frase fica dificil de ler. */
  .cartaz-lema__titulo {
    transform: translateY(calc(var(--desloca, 0) * 1px)) scale(var(--escala, 1));
    font-size: clamp(28px, 9vw, 46px);
  }
  .cartaz-lema__palco { min-height: min(60vh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
  .cartaz-lema__titulo, .cartaz-lema__modelo { transform: none; }
}

/* ---------------------------------------------------------------- temas */

/* Setas + pontinhos numa barra so, centrada embaixo do trilho. */
.temas__navegacao {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(20px, 2.4vw, 34px);
}
.temas__navegacao .carrossel__seta { position: static; translate: none; }
.temas__setas { display: flex; gap: 8px; }
/* Aqui as setas ficam no fluxo, ao lado do titulo — nao sobre a foto. */
.temas__setas .carrossel__seta { position: static; translate: none; }

.temas__trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: clamp(20px, 3vw, 48px);
  overflow: auto hidden; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut); padding-inline: var(--gut);
  scrollbar-width: none;
}
.temas__trilho::-webkit-scrollbar { display: none; }

.tema {
  scroll-snap-align: start;
  display: grid; grid-template-columns: 6fr 5fr;
  align-items: center; gap: clamp(28px, 6vw, 110px);
}
.tema__foto {
  display: block; position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--osso-2);
  /* Canto grande so na foto do tema: e o gesto que a referencia usa
     para separar o painel da imagem do painel do texto. */
  border-radius: clamp(18px, 2.2vw, 34px);
}
.tema__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--curva); }
.tema:hover .tema__foto img { scale: 1.03; }

/* Espacamento em degraus, nao um gap unico: o botao herdava a mesma
   distancia do paragrafo que o paragrafo tinha do titulo, e somava 30px
   — o botao ficava solto, parecendo de outra secao. */
.tema__texto { display: grid; gap: 12px; justify-items: start; max-width: 46ch; }

/* ---- etiqueta do tema ---- */
.tema__selo {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding-inline: 16px 18px; border-radius: 999px;
  background: var(--osso-2);
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.tema__selo-icone { display: grid; place-items: center; }
.tema__selo-icone svg { width: 15px; height: 15px; }

.tema__linha { color: var(--ink-2); font-size: 15px; }
.tema__acao svg { width: 15px; height: 15px; }

/* ---- as tres promessas ----
   Divididas por fio, nao por caixa: tres cartoes aqui competiriam com
   os cartoes de peca do resto da pagina. O fio separa sem criar um
   novo objeto na tela. */
.tema__promessas {
  list-style: none; display: grid; grid-auto-flow: column;
  gap: clamp(14px, 1.6vw, 26px); margin-top: 6px;
}
.tema__promessas li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13px; line-height: 1.3; color: var(--ink-2);
}
.tema__promessas li + li { padding-left: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--linha); }
.tema__promessa-icone {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--osso-2); color: var(--ink);
}
.tema__promessa-icone svg { width: 17px; height: 17px; }

/* ---- pontinhos ---- */
.temas__pontos { display: flex; justify-content: center; gap: 9px; }
.temas__pontos span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--linha-forte); opacity: .4;
  transition: opacity .25s, scale .25s var(--mola);
}
.temas__pontos span[data-ativo] { opacity: 1; scale: 1.15; background: var(--ink); }
.tema__texto .eyebrow { margin-bottom: 2px; }
.tema__texto .btn { margin-top: 10px; }
.tema__titulo { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; }
.tema__texto p { color: var(--ink-2); }

/* A secao inteira cabe numa tela: a foto era medida pela LARGURA da
   coluna (670px em 4:5 = 838px de altura) e a secao passava de 1317px.
   Medindo pela altura disponivel, cabe. */
@media (min-width: 861px) {
  .temas { padding-block: clamp(48px, 5vw, 76px); }
  .temas .cabeca-secao { margin-bottom: clamp(20px, 2.2vw, 32px); }
  .temas .titulo-secao { font-size: clamp(28px, 3.4vw, 48px); }
  .tema {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4.5vw, 76px);
  }
  .tema__foto { height: min(56vh, 540px); width: auto; aspect-ratio: 4 / 5; }
}

@media (max-width: 860px) {
  /* Empilhado: em duas colunas estreitas nem a foto nem o texto respiram.

     `minmax(0, 1fr)` e nao `1fr`: `1fr` tem minimo de min-content, e o
     min-content aqui era a fita de promessas (tres itens lado a lado,
     389px juntos). A coluna estourava para 389px dentro de um cartao de
     312px, e foto e texto vazavam por cima do cartao seguinte — era
     esse o embaralhado no celular. */
  .tema { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tema__foto, .tema__texto { min-width: 0; }
  .tema__foto { aspect-ratio: 4 / 3; }

  /* As promessas empilham: lado a lado elas nao cabem na largura do
     cartao, e era isso que forcava o estouro. Sem a divisoria vertical,
     que so faz sentido quando estao em linha. */
  .tema__promessas { grid-auto-flow: row; gap: 10px; }
  .tema__promessas li + li { padding-left: 0; border-left: 0; }

  /* A beirada do proximo cartao aparecendo: no celular as setas somem e,
     com o slide em 100%, nada dizia que havia mais para o lado. */
  .temas__trilho { grid-auto-columns: 88%; }
}

/* ---- garantias da pagina de produto ----
   Quatro afirmacoes curtas abaixo da acao. Em mostruario, quem chega
   ate aqui ja decidiu pela peca — a duvida que resta e sobre a LOJA. */
.pdp__garantias {
  list-style: none; display: grid; gap: 10px;
  margin-top: clamp(18px, 2vw, 26px); padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--linha);
}
.pdp__garantias li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-2);
}
.pdp__garantias svg { width: 15px; height: 15px; flex: none; color: var(--ink); }

/* ── AMBIENTE DA CAPA: HORA E CLIMA REAIS ─────────────────────────
   O veu sobre o video muda de tom conforme o ceu de Sao Paulo agora.
   E deliberadamente contido: sao mudancas de 6 a 12 pontos de opacidade
   e alguns graus de matiz. Quem visita duas vezes no mesmo dia talvez
   nao note; quem visita de manha e a noite sente que o site e outro.

   O erro obvio aqui seria fazer "efeito de clima" — gotas, particulas,
   animacao. Isso data o site em uma semana e briga com a roupa, que e
   o assunto. A referencia e o modo escuro do iOS: voce nao repara na
   transicao, so percebe que esta confortavel.

   Tudo isto e ADICIONAL: sem JS, sem rede ou com a API fora, nenhum
   destes atributos aparece e a capa fica exatamente como era. */

.hero__clima { display: inline-flex; align-items: center; gap: 12px; }
.hero__clima[hidden] { display: none; }

.hero__palco::before { transition: background 1.2s var(--curva); }

/* Chuva e tempestade: cinza frio, um pouco mais fechado — e o tom que a
   propria cidade tem no dia de chuva. */
.hero[data-clima="chuva"] .hero__palco::before,
.hero[data-clima="tempestade"] .hero__palco::before {
  background: linear-gradient(180deg, rgba(24, 30, 34, .30), rgba(18, 23, 26, .34));
}
.hero[data-clima="neblina"] .hero__palco::before {
  background: rgba(38, 42, 44, .30);
}
/* Ceu limpo: praticamente nada. O sol ja faz o trabalho na foto. */
.hero[data-clima="limpo"] .hero__palco::before { background: rgba(8, 10, 10, .16); }
.hero[data-clima="nublado"] .hero__palco::before { background: rgba(20, 24, 26, .24); }
.hero[data-clima="frio"] .hero__palco::before { background: rgba(22, 28, 32, .28); }

/* Fim de tarde: um calor de ouro muito leve, so na base. */
.hero[data-periodo="tarde"] .hero__palco::before {
  background: linear-gradient(180deg, rgba(8, 10, 10, .18), rgba(58, 40, 22, .26));
}

/* Noite: o unico estado que muda de verdade. Azul profundo em vez de
   preto neutro — preto puro sobre video escuro vira buraco; o azul
   mantem profundidade e ainda le como noite. */
.hero[data-periodo="noite"] .hero__palco::before,
.hero[data-clima="noite"] .hero__palco::before {
  background: linear-gradient(180deg, rgba(10, 14, 22, .46), rgba(6, 9, 14, .56));
}
/* Noite: a capsula fecha um pouco mais — o video escurece e o vidro
   precisa de mais corpo para o texto continuar legivel. */
.hero[data-periodo="noite"] .hero__relogio { background: rgba(8, 10, 14, .5); }

/* ---- barra do pe da capa ---- */

.hero__base {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: clamp(18px, 3vh, 34px);
  padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #fff;
  /* Nasce invisivel: a hora e o clima chegam pelo JS, e a barra
     aparecendo antes deles mostrava "SÃO PAULO | --H--" por um
     instante em toda visita. O JS marca `data-pronto` assim que
     escreve a hora, e ai a barra entra. */
  opacity: 0; transition: opacity .5s var(--curva);
}
.hero__base[data-pronto] { opacity: 1; }

/* Capsula de vidro: sobre foto clara, tipografia branca solta some. O
   fosco resolve a leitura sem escurecer a imagem inteira — que era a
   alternativa, e custaria o brilho da foto. */
.hero__relogio {
  display: inline-flex; align-items: center; gap: 12px;
  height: 42px; padding-inline: 18px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(12, 14, 16, .34);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.hero__pino { display: grid; place-items: center; }
.hero__pino svg { width: 15px; height: 15px; opacity: .9; }

/* Dois separadores com pesos diferentes: a barra divide blocos de
   informacao (cidade | hora | condicao) e o ponto liga o que pertence
   ao mesmo bloco (hora · temperatura). */
.hero__relogio i {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
.hero__barra {
  width: 1px !important; height: 13px !important;
  border-radius: 0 !important; opacity: .3 !important;
}
.hero__relogio time { font-variant-numeric: tabular-nums; }  /* sem isto o texto danca a cada minuto */
.hero__clima { display: inline-flex; align-items: center; gap: 12px; }
.hero__clima[hidden] { display: none; }

/* ── A PILULA DO HERO NO CELULAR ──────────────────────────────────
   "SÃO PAULO | 17H05 · 26°C | PARCIALMENTE NUBLADO" nao cabe em 375px.
   A pilula tem altura fixa de 42px e o texto quebrava dentro dela —
   "PARCIALM / NUBLADO" em duas linhas, cortado pela propria capsula.

   Some a DESCRICAO, fica a temperatura. A leitura da cidade continua
   valendo (cidade, hora, quantos graus); o que sai e o adjetivo, que e
   a parte mais longa e a menos informativa das quatro.

   O convite a rolar tambem sai: no celular ele encostava no balao
   flutuante do WhatsApp, dois controles disputando o mesmo canto — e
   a tela pequena ja pede rolagem sem ninguem avisar. */
@media (max-width: 720px) {
  .hero__base { justify-content: center; }
  .hero__relogio { height: auto; min-height: 38px; padding-inline: 15px 18px; gap: 9px; }
  [data-clima-desc], .hero__clima .hero__barra { display: none; }
  .hero__rolar { display: none; }
}

.hero__rolar {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.hero__rolar svg { width: 17px; height: 17px; animation: descer 2.4s var(--curva) infinite; }
@keyframes descer {
  0%, 62%, 100% { transform: translateY(0); opacity: .8; }
  32% { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 720px) {
  /* No celular so a capsula: "scroll para explorar" ocuparia metade da
     barra para dizer o que o proprio gesto ja ensina. */
  .hero__rolar { display: none; }
  .hero__base { justify-content: center; bottom: 16px; }
  .hero__relogio { height: 36px; font-size: 10px; letter-spacing: .14em; gap: 9px; padding-inline: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rolar svg { animation: none; }
}


/* ---------------------------------------------------------------- acervo */

.acervo__caixa {
  display: grid; gap: clamp(26px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.acervo__texto { display: grid; gap: 16px; justify-items: start; max-width: 44ch; }

/* O numero e a manchete real desta secao — o titulo apoia. Por isso ele
   vem em caixa-alta pequena e larga, como um dado, e nao como titulo:
   dado se le rapido, titulo se le devagar. */
.acervo__numero {
  font-family: var(--display); font-size: clamp(12px, 1.1vw, 15px); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
}
.acervo__titulo { font-size: clamp(30px, 4vw, 58px); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.acervo__linha { color: var(--ink-2); max-width: 38ch; }

.acervo__cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.acervo__cartao { position: relative; display: block; overflow: hidden; border-radius: var(--raio); }
.acervo__foto { display: block; aspect-ratio: 3 / 4; background: var(--osso-2); }
.acervo__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--curva); }
.acervo__cartao:hover .acervo__foto img { scale: 1.05; }

/* Mesmo veu forte das categorias, pela mesma razao medida: a faixa
   inferior das fotos de categoria chega a branco puro, e texto branco
   sobre ela daria 1:1. */
.acervo__rot {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 44px 14px 14px;
  background: linear-gradient(to top, rgba(6,8,8,.94) 0%, rgba(6,8,8,.84) 18%, rgba(6,8,8,.56) 34%, rgba(6,8,8,0) 66%);
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

@media (min-width: 861px) {
  .acervo { padding-block: clamp(40px, 6vh, 84px); }
  /* Duas colunas so quando ha o que por na segunda. A foto do showroom
     vem do painel e os cartoes vem das categorias da loja: em loja sem
     categoria cadastrada, ou sem foto enviada, a regra antiga abria uma
     coluna vazia e espremia o texto na metade da tela. */
  .acervo__caixa--cartoes { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .acervo__foto { aspect-ratio: auto; height: min(46vh, 420px); }
}

/* ---------------------------------------------------------------- showroom */

.showroom { background: var(--osso-2); }
.showroom__caixa {
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.showroom__foto {
  position: relative; overflow: hidden;
  border-radius: var(--raio); background: var(--osso);
  /* As tres fotos do showroom sao QUADRADAS. Na caixa 4:3 o `cover`
     comia uma faixa em cima e outra embaixo — no estande, cortava o
     letreiro WALL GEAR justamente o que a foto tem de mais util.
     Caixa quadrada mostra a foto inteira, sem corte nenhum. */
  aspect-ratio: 1 / 1;
}
.showroom__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Trilho das tres fotos do showroom. Mesma mecanica do carrossel de
   pecas (encaixe na rolagem, barra escondida), so que ocupando a caixa
   inteira — cada foto e uma tela do quadro. */
.showroom__trilho {
  height: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow: auto hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.showroom__trilho::-webkit-scrollbar { display: none; width: 0; height: 0; }
.showroom__trilho img { scroll-snap-align: start; }

.showroom__texto { display: grid; gap: 14px; justify-items: start; max-width: 52ch; }
.showroom__texto h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; }
.showroom__linha { color: var(--ink-2); }

/* Endereco e horario como dados, nao paragrafo: o rotulo pequeno em
   caixa-alta e o valor em corpo de leitura. Quem procura endereco varre
   a tela atras do rotulo, nao le a frase inteira. */
.showroom__dados { display: grid; gap: 14px; margin: 4px 0 2px; }
.showroom__dados dt {
  font-family: var(--display); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 3px;
}
.showroom__dados dd { margin: 0; font-size: 15px; line-height: 1.45; }
.showroom__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

@media (min-width: 861px) {
  .showroom__caixa--foto { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* Altura pela janela, nao pela largura da coluna — a mesma correcao
     que as outras secoes precisaram para caber numa tela. */
  /* Em tela larga a foto ganha altura em vez de perde-la: a caixa
     quadrada acompanha a coluna, com teto para nao empurrar o texto
     do lado para fora da dobra. */
  .showroom__foto { aspect-ratio: 1 / 1; height: auto; max-height: min(78vh, 660px); }
}

/* ---------------------------------------------------------------- manifesto */

.manifesto { position: relative; overflow: hidden; }
.manifesto__foto { display: block; }
.manifesto__foto img {
  width: 100%; display: block; object-fit: cover;
  /* Respeita a proporcao da foto: com altura fixa de 660px numa imagem
     16:9 o corte comia ~18% em cima e embaixo — cabeca e pes iam junto.
     Com `aspect-ratio` a imagem aparece inteira em qualquer largura, e o
     `max-height` so entra em telas muito largas. */
  /* Sem teto de altura: era ele que vencia o aspect-ratio (700px num
     quadro que pedia 810) e voltava a cortar. A proporcao manda, e a
     secao tem a altura que a foto pedir. */
  aspect-ratio: 16 / 9;
  /* O enquadramento tem o terco esquerdo vazio para o texto. Ancorando
     a direita, o corte come o ceu e nao as pessoas quando a tela e
     mais estreita que a foto. */
  object-position: 62% center;
}

/* O veu saiu com o texto. Ele existia para tinta branca do TEMA ficar
   legivel sobre ceu claro; a arte nova traz a propria frase, ja
   equilibrada, e o veu so escurecia a foto de graca. */

.manifesto__texto {
  position: absolute; inset: 0; z-index: 2;
  /* Anda mais devagar que a foto na rolagem: dois planos em ritmos
     diferentes e o olho conclui que o texto flutua sobre a imagem, em
     vez de estar colado nela. Le o `--desloca` que o JS ja calcula. */
  translate: 0 calc(var(--desloca, 0) * -0.55px);
  will-change: translate;
  display: grid; align-content: center; justify-items: start;
  gap: clamp(14px, 1.8vw, 22px);
  color: #fff;
}
.manifesto__selo {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.manifesto__linha {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1.06; letter-spacing: -.025em; text-transform: uppercase;
  max-width: 14ch;
  text-shadow: 0 2px 24px rgba(6, 8, 8, .6);
}

@media (max-width: 720px) {
  /* No celular a imagem NAO e recortada. O recorte 4:5 com
     `object-position: 72%` existia para caber a foto em pe sem perder
     as pessoas — mas a arte agora tem a frase escrita nela, do lado
     esquerdo, e era exatamente esse lado que o corte comia. Banner com
     texto se ve inteiro ou nao se ve. */
  .manifesto__foto img { aspect-ratio: 16 / 9; }
  /* Na vertical o veu passa a vir de baixo: em tela estreita nao sobra
     terco esquerdo nenhum, o corte encosta nas pessoas. */
  .manifesto::after {
    background: linear-gradient(0deg,
      rgba(6, 8, 8, .78) 0%,
      rgba(6, 8, 8, .40) 42%,
      rgba(6, 8, 8, 0) 72%);
  }
  .manifesto__texto { align-content: end; padding-bottom: clamp(26px, 5vh, 48px); }
  .manifesto__linha { max-width: 18ch; }
}

/* ---------------------------------------------------------------- split */

.split { display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: clamp(28px, 6vw, 110px); }
.split__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--osso-2); }
.split__foto img { width: 100%; height: 100%; object-fit: cover; }
.split__texto { display: grid; gap: 22px; max-width: 50ch; }
.split__texto h2 { font-size: clamp(30px, 3.8vw, 52px); }
.split__texto p { color: var(--ink-2); }
.split__botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------------------------------------------------------------- vitrine */

/* UMA fileira, nao tres.

   Eram 7 pecas mais um cartaz 2x2 — 11 celulas em 4 colunas, ou seja
   3 fileiras e 2078px de altura: mais que o dobro da janela. Agora sao
   4 pecas e o cartaz ocupando uma celula cada, numa fileira de 5.

   Cinco colunas e incomum de proposito: e o que permite manter QUATRO
   novidades a vista sem empurrar nada para fora da tela. Com quatro
   colunas sobrariam so 3 pecas ao lado do cartaz. */
.vitrine__grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 26px); align-items: start; }
.cartaz {
  /* Uma celula, nao 2x2 — era ele que obrigava a grade a ter 3 fileiras. */
  grid-column: span 1; grid-row: span 1;
  aspect-ratio: var(--foto);
  position: relative; overflow: hidden; background: var(--osso-2);
  display: flex; align-items: flex-end; min-height: 100%;
}
.cartaz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--curva); }
.cartaz:hover img { scale: 1.04; }
.cartaz__conteudo {
  position: relative; z-index: 2; padding: clamp(22px, 3vw, 44px);
  color: #fff; display: grid; gap: 14px; justify-items: flex-start; width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 66%);
}
.cartaz__conteudo h3 { font-size: clamp(28px, 3vw, 44px); }
.cartaz__conteudo p { max-width: 32ch; font-size: 14px; opacity: .92; }

/* --------- cartão de peça (sem preço, por regra) */

.peca { position: relative; display: block; }
/* respiro alternado: a grade respira como página de revista */
/* A escadinha saiu: numa fileira unica ela desalinhava um cartao sozinho. */
.peca__foto { position: relative; overflow: hidden; background: var(--osso-2); aspect-ratio: var(--foto); display: block; }
.peca__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .55s var(--curva), scale 1s var(--curva);
}
.peca__foto img + img { opacity: 0; }
.peca:hover .peca__foto img + img { opacity: 1; }
.peca:hover .peca__foto img { scale: 1.03; }

.peca__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  height: 26px; padding-inline: 11px; display: inline-flex; align-items: center;
  background: var(--osso); color: var(--ink);
  font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
/* aparece no hover, mas nunca é a única forma de chegar lá: o cartão inteiro é link */
.peca__olho {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  height: var(--toque); display: grid; place-items: center;
  background: var(--osso); color: var(--ink);
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity .25s var(--curva);
}
.peca:hover .peca__olho, .peca:focus-visible .peca__olho { opacity: 1; }

.peca__pe { padding-top: 14px; display: grid; gap: 7px; }
.peca__nome { font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.peca__linha { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.peca__cores { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bolha { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--linha-forte); box-shadow: inset 0 0 0 1.5px var(--osso); }
.peca__mais { font-size: 12px; color: var(--ink-3); font-family: var(--corpo); }

/* ---------------------------------------------------------------- faixa */

.faixa { position: relative; min-height: min(76vh, 700px); display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--escuro); }
.faixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .74; }
.faixa__conteudo { position: relative; z-index: 2; color: #fff; display: grid; gap: 18px; justify-items: center; padding: 48px 20px; }
.faixa__conteudo .eyebrow { color: rgba(255, 255, 255, .82); }
.faixa__titulo { font-size: clamp(44px, 7.6vw, 118px); }
.faixa__titulo em { font-style: normal; font-weight: 500; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- tipos */

/* Padding curto e titulo contido: com o cabecalho grande a parede era
   empurrada para fora da tela, e a secao passava de uma janela. */
.tipos { overflow: hidden; background: var(--osso-2); padding-block: clamp(38px, 4.2vw, 64px) 0; }
.tipos .cabeca-secao { margin-bottom: clamp(16px, 2vw, 28px); }
.tipos .titulo-secao { font-size: clamp(28px, 3.4vw, 48px); }
/* ── PAREDE DE PECAS, EM PERSPECTIVA ──────────────────────────────
   Quatro fileiras inclinadas em 3D, com as quatro bordas apagadas.

   O que faz o efeito nao e a quantidade de fotos: e a PROFUNDIDADE
   somada a perda de borda. Fileiras retas leem como listas; o muro
   inclinado tira a referencia de onde comeca e onde termina, e o olho
   desiste de contar. E ai que vira "tem muita coisa aqui".

   `perspective` no pai e a rotacao no filho: aplicar os dois no mesmo
   elemento achata o efeito, porque a perspectiva passa a valer para os
   filhos e nao para ele proprio.

   A mascara cruza dois degrades — horizontal e vertical — com
   `intersect`, para apagar os quatro lados de uma vez. `source-in` e o
   nome antigo da mesma coisa, para o Safari. */
/* O muro e maior que a janela DE PROPOSITO, e este palco corta.

   E o que diferencia a referencia de uma simples grade: voce ve uma
   FATIA de uma parede que continua para todos os lados. Se o muro
   coubesse inteiro na tela, viraria de novo uma lista — com borda,
   comeco e fim.

   Por isso a altura fixa aqui e o overflow: o muro passa de 1600px,
   e a gente mostra 58vh dele. */
.tipos__palco {
  perspective: 1400px;
  margin-inline: -12vw;

  /* SEM corte vertical. Antes o palco tinha altura fixa e overflow, e a
     fileira de cima aparecia partida ao meio — foi o que voce marcou.
     Agora a altura vem do proprio muro: as fotos ficam inteiras, e quem
     dissolve as pontas e so a mascara horizontal.

     O `padding-block` da folga para a projecao 3D, que joga os cantos
     das fileiras para fora da caixa. */
  padding-block: clamp(14px, 2.2vh, 28px);
  display: block;

  /* So as laterais. O degrade vertical saiu junto com o corte: sem
     corte, nao ha o que dissolver embaixo. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tipos__muro {
  display: grid; gap: clamp(10px, 1.1vw, 18px);

  /* LARGURA LIMITADA + overflow: sem isto o muro herda a largura da
     fileira mais larga (~7500px, porque cada fileira leva o acervo
     inteiro duas vezes). Rotacionar em 3D um elemento desse tamanho
     explode a projecao: a perspectiva joga os cantos longe e a
     primeira fileira ia parar 1285px ACIMA do palco — foi o que fez
     o muro sumir.

     Limitando aqui, a rotacao passa a agir sobre uma caixa do tamanho
     da tela, e as fileiras deslizam DENTRO dela. */
  width: 100%; overflow: hidden;

  transform: rotateX(10deg) rotateY(-11deg) rotate(-2.2deg) scale(1.08);
  /* Com o muro limitado a largura da tela, a origem central volta a
     funcionar: a caixa tem o tamanho certo e a rotacao nao a desloca. */
  transform-origin: 50% 50%;
}

/* Esta animacao foi apagada por engano quando troquei as fitas pela
   parede — e ela nao move so a parede: o trilho do Instagram usa a
   mesma. Sem ela, os dois ficaram parados. */
@keyframes deslizar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tipos__fila {
  display: flex; gap: clamp(10px, 1.1vw, 18px); width: max-content;
  animation: deslizar 68s linear infinite;
}
/* Sentidos alternados e velocidades diferentes: fileiras sincronizadas
   denunciam a repeticao no primeiro laco. */
.tipos__fila--2 { animation-direction: reverse; animation-duration: 82s; }

/* Fotos pequenas de proposito: a parede vale pela QUANTIDADE, nao
   pelo tamanho de cada peca — quem quer ver a peca clica na vitrine.
   Grandes, as fileiras enchiam a tela inteira. */
.tipo { position: relative; width: clamp(78px, 7.4vw, 112px); flex: none; }
.tipo img {
  aspect-ratio: var(--foto); width: 100%; object-fit: cover;
  background: var(--osso); border-radius: var(--raio-p);
}

@media (max-width: 720px) {
  /* Menos fileiras no celular: quatro viram um mosaico ilegivel numa
     tela estreita, e o peso de carregar 24 fotos nao se justifica. */
  .tipos__muro { transform: rotateX(9deg) rotateY(-10deg) rotate(-2deg) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .tipos__fila { animation: none; }
  .tipos__muro { transform: none; }
}

/* ---------------------------------------------------------------- tecnologia */

/* ---- cabecalho em tres partes ----
   Titulo | fio | paragrafo de apoio | ver tudo. O fio vertical impede
   que titulo e apoio virem um bloco unico de texto — encostados, o
   olho le os dois como a mesma frase. */
.tecno__cabeca {
  display: grid; align-items: start; gap: clamp(18px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(24px, 3vw, 44px);
}
.tecno__apoio { color: var(--ink-2); max-width: 42ch; font-size: 15px; }

@media (min-width: 861px) {
  .tecno__cabeca {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) auto;
    align-items: center;
  }
  .tecno__apoio {
    padding-left: clamp(18px, 2.4vw, 40px);
    border-left: 1px solid var(--linha-forte);
  }
  .tecno__cabeca .link-risco { justify-self: end; }
}

.tecno__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
/* Cartao com corpo em papel: a foto encosta no topo e o texto mora num
   painel claro embaixo. E isso que faz o conjunto ler como OBJETO, e
   nao como foto com legenda solta. */
.tecno__item {
  display: flex; flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.tecno__corpo {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: clamp(18px, 2vw, 26px);
  flex: 1;
}
.tecno__cabecalho { display: flex; align-items: center; gap: 12px; margin: 0; }
.tecno__icone-anel {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linha-forte); color: var(--ink);
}
.tecno__icone-anel svg { width: 18px; height: 18px; }
/* Fio antes da acao: separa o argumento do convite. */
.tecno__btn { margin-top: auto; }
.tecno__corpo .tecno__btn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px;
  height: 1px; background: var(--linha);
}
.tecno__btn { position: relative; }
.tecno__btn svg { width: 15px; height: 15px; }

/* Mesma correcao da secao de Temas: a foto era medida pela LARGURA da
   coluna (430px em 4:5 = 537px de altura) e a secao passava de 1378px.
   Medindo pela altura disponivel, cabe numa tela. */
/* A caixa tem a proporcao DA FOTO (3:4, `--foto`), nao uma proporcao
   escolhida a parte. Era 4:5, e no desktop virava uma faixa de 282px de
   altura — uma foto 3:4 dentro dela perdia cabeca e pes, e o que sobrava
   era um retalho de tronco. Casando as duas, o `cover` nao corta nada:
   a peca aparece inteira, que e o que faz a secao parecer rica em vez de
   apertada. */
.tecno__foto { display: block; width: 100%; background: var(--osso-2); aspect-ratio: var(--foto); overflow: hidden; border-radius: 0; }
@media (min-width: 861px) {
  .tecno { padding-block: clamp(40px, 4vw, 60px); }
  .tecno .cabeca-secao { margin-bottom: clamp(18px, 2vw, 30px); }
  .tecno .titulo-secao { font-size: clamp(28px, 3.4vw, 48px); }
  /* Sem altura fixa: era ela que achatava a foto no desktop. A
     proporcao da imagem manda, e a coluna define a largura. */
  .tecno__tira { margin-top: clamp(18px, 2.2vw, 30px); padding-top: clamp(14px, 1.8vw, 22px); }
}
.tecno__foto img { width: 100%; height: 100%; object-fit: cover; }
/* O zoom é do container, não da <img>: escalar a imagem direto faz
   ela vazar por cima do texto no Safari, que ignora o overflow do pai
   durante a transição. */
.tecno__foto img { transition: transform .5s var(--curva); }
.tecno__item:hover .tecno__foto img { transform: scale(1.04); }

.tecno__nome {
  font-family: var(--display); font-size: 13px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.tecno__texto { color: var(--ink-2); max-width: 34ch; font-size: 14px; }
/* `margin-top:auto` alinha os botões dos três cartões na mesma linha
   mesmo quando um texto ocupa duas linhas e o outro uma. */

/* ---- tira de atributos ---- */

.tecno__tira {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; list-style: none; text-align: center;
  margin-top: clamp(40px, 5vw, 76px); padding-top: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid var(--linha);
}
.tecno__tira li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tecno__icone svg { width: 26px; height: 26px; color: var(--ink); }
.tecno__rot {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 860px) {
  .tecno__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Com duas colunas o terceiro cartão fica órfão na linha de baixo.
     Ele atravessa as duas para não deixar sobra vazia, mas com a
     largura de UMA coluna e centralizado — antes ele esticava de ponta
     a ponta e a foto era recortada em 16:9 para caber, que é
     exatamente o corte que esta seção deixou de fazer. */
  .tecno__item:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - clamp(9px, 1.2vw, 20px));
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .tecno__grade { grid-template-columns: 1fr; }
  /* Numa coluna so o terceiro cartao volta a ser um cartao comum: nem
     largura reduzida, nem proporcao propria. A regra que forcava 4:5
     aqui era mais um corte — sobra da epoca em que a caixa nao tinha a
     proporcao da foto. */
  .tecno__item:nth-child(3) { width: auto; margin-inline: 0; }
  .tecno__tira { grid-template-columns: 1fr; gap: 26px; }
  .tecno__tira li { flex-direction: row; justify-content: flex-start; gap: 14px; }
}

/* ---------------------------------------------------------------- duplo */

.duplo { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(12px, 1.6vw, 24px); }
/* Estes cartões são links, e precisam parecer link ANTES do mouse
   chegar — num toque não existe hover. Por isso a chamada é um botão
   de contorno em repouso, não um risco discreto: contorno fechado com
   seta lê como "clique", texto sublinhado lê como "leia". */
.banner {
  position: relative; min-height: 360px; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--osso-2);
  cursor: pointer;
  transition: transform .5s var(--mola), box-shadow .5s var(--curva);
}
.banner:nth-child(2) { margin-top: clamp(20px, 4vw, 64px); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--curva); }
.banner:hover img, .banner:focus-visible img { scale: 1.06; }
.banner:hover, .banner:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.banner__txt {
  position: relative; z-index: 2; width: 100%; padding: clamp(22px, 3vw, 44px); color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0) 76%);
  display: grid; gap: 18px; justify-items: flex-start;
}
.banner__txt h3 { font-size: clamp(24px, 2.6vw, 38px); }

/* a chamada, em forma de botão */
.banner .link-risco {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px; background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .35s var(--curva), border-color .35s var(--curva);
}
.banner .link-risco::before { content: none; }   /* o risco do link comum não entra aqui */
.banner .link-risco::after {
  content: "→"; font-size: 14px; letter-spacing: 0;
  transition: translate .4s var(--mola);
}
.banner:hover .link-risco, .banner:focus-visible .link-risco {
  background: rgba(255, 255, 255, .16); border-color: #fff;
}
.banner:hover .link-risco::after { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .banner, .banner img, .banner .link-risco::after { transition: none; }
  .banner:hover { transform: none; }
}

/* ---------------------------------------------------------------- lema */

.lema { text-align: center; position: relative; overflow: hidden; }
.lema__conteudo { position: relative; z-index: 2; }

/* ---- foto de fundo opcional ---- */
.lema__fundo { position: absolute; inset: 0; z-index: 0; }
.lema__fundo img { width: 100%; height: 100%; object-fit: cover; }
/* Veu: a frase e o unico conteudo do bloco, entao ela tem que ganhar
   da foto em qualquer imagem que entre pelo painel. */
.lema__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .52);
}
.lema--foto, .lema--foto .lema__assinatura a { color: #fff; }
.lema--foto .lema p em { color: #fff; }

/* ---- animacao ligada a rolagem ----

   Cada palavra entra deslocada na horizontal e converge para o lugar
   conforme a secao sobe. A conta vem do JS em `--p` (0 quando a secao
   entra por baixo, 1 quando sai por cima; 0.5 no centro da tela).

   A escolha do gesto nao e gratuita: a frase fala de MOVIMENTO, e o
   texto so se assenta quando voce chega nele. Palavras alternam o
   lado — `--d` e 1 ou -1 — para o bloco parecer se juntar, e nao
   deslizar inteiro.

   O `will-change` fica so nas palavras, que sao poucas. */
/* Deslocamento VERTICAL. A versao horizontal fazia as palavras colidirem
   fora do centro da tela e comia o espaco entre elas ("Movimentocomeca").
   Subindo, a metrica horizontal da linha nao muda — a frase continua
   legivel em qualquer ponto da rolagem.

   O `pre` no <i> e o que segura o espaco: cada palavra carrega dentro de
   si o espaco que a seguia, em vez de depender de um no de texto solto
   entre dois inline-block, que colapsa. */
.lema__frase .mov { display: inline-block; }
.lema__frase .mov > i {
  display: inline-block; white-space: pre; font-style: inherit;
  will-change: transform, opacity;
  transform: translateY(calc(var(--sobe, 0) * 1px));
  opacity: var(--vis, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* Quem pediu menos movimento recebe a frase parada, no lugar. */
  .lema__frase .mov > i { transform: none; opacity: 1; }
}
.lema p { font-size: clamp(34px, 5.6vw, 82px); line-height: 1.04; max-width: 17ch; margin-inline: auto; }
.lema p em { font-style: normal; font-weight: 500; letter-spacing: -.02em; }
.lema__assinatura { margin-top: 34px; }

/* ---------------------------------------------------------------- comunidade */

.comu__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.comu__item { overflow: hidden; }
.comu__item .capa { display: block; overflow: hidden; }
.comu__item img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; background: var(--osso-2); transition: scale 1s var(--curva); }
.comu__item:hover img { scale: 1.05; }
.comu__item h3 { margin-top: 16px; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.comu__item p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

.convite { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.convite__cartao {
  aspect-ratio: 1 / 1; background: #f5f1de;
  display: grid; place-items: center; text-align: center; gap: 28px;
  padding: 44px; border: 1px solid var(--linha);
}
.convite__cartao .top { font-family: var(--editorial); font-size: 23px; font-weight: 500; }
.convite__cartao .meio { font-family: var(--editorial); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; }
.convite__cartao .meio small { display: block; font-family: var(--corpo); font-size: 13px; margin-top: 12px; color: var(--ink-2); }
.convite__cartao .base { display: flex; gap: 18px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.convite__texto { display: grid; gap: 18px; }
.convite__texto h3 { font-size: clamp(28px, 3.6vw, 46px); }
.convite__lista { list-style: none; display: grid; gap: 7px; color: var(--ink-2); }

/* ---------------------------------------------------------------- serviço */

.servico { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
.servico__foto { position: relative; min-height: 460px; background: var(--osso-2); }
.servico__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* A foto e mais alta que a coluna, entao o recorte come altura.
     Ancorado no topo, o que se perde e o pe da imagem — joelho e
     chao — em vez dos rostos, que estao nos primeiros 20% do arquivo.
     Vale para qualquer foto que o Lucas suba pelo painel: retrato de
     pessoa sempre tem o assunto em cima. */
  object-position: center top;
}
.servico__texto {
  /* Degrade em vez de chapado: um retangulo de cor unica ao lado de
     uma foto le como buraco na pagina. Vinte pontos de luminancia entre
     o topo e a base bastam para a superficie ter volume — ninguem
     percebe o degrade, todo mundo percebe que deixou de ser um bloco. */
  background: linear-gradient(160deg, var(--escuro-alto), var(--escuro) 62%);
  color: var(--osso); padding: clamp(32px, 5vw, 88px);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.servico__texto .eyebrow { color: rgba(255, 255, 255, .66); }
.servico__texto .eyebrow[data-n]::before { color: rgba(255, 255, 255, .34); }
.servico__texto h2 { font-size: clamp(30px, 3.8vw, 52px); }
.servico__texto p { color: rgba(255, 255, 255, .8); max-width: 46ch; }
.servico__texto ul { list-style: none; display: grid; gap: 9px; color: rgba(255, 255, 255, .8); font-size: 14px; }
.servico__texto ul li { padding-left: 22px; position: relative; }
.servico__texto ul li::before { content: ""; position: absolute; left: 0; top: .66em; width: 11px; height: 1px; background: currentColor; }
.servico__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------------------------------------------------------- instagram */

.insta { overflow: hidden; padding-block: clamp(56px, 7vw, 96px) 0; }
.insta__cabeca { text-align: center; display: grid; gap: 12px; margin-bottom: 38px; }
.insta__cabeca h2 { font-size: clamp(34px, 4.6vw, 62px); }
.insta__cabeca h2 em { font-style: normal; font-weight: 500; letter-spacing: -.02em; }
.insta__trilho { display: flex; gap: 10px; width: max-content; animation: deslizar 68s linear infinite; }
.insta:hover .insta__trilho, .insta:focus-within .insta__trilho { animation-play-state: paused; }
.insta__item { width: clamp(190px, 18vw, 280px); flex: none; position: relative; overflow: hidden; }
.insta__item img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: scale .9s var(--curva); }
.insta__item:hover img { scale: 1.06; }
.insta__item::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .26); opacity: 0; transition: opacity .3s; }
.insta__item:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- rodapé */

/* Tinta fixada de proposito. A cor do texto do rodape vinha de
   `footer_foreground_color` (painel), que estava num bege claro porque
   o tema base assume rodape ESCURO. So que o rodape da WALL e claro —
   dava bege sobre bege e os titulos sumiam. Fixando aqui, o painel nao
   consegue mais lavar o texto. */
.rodape { background: var(--osso-2); border-top: 1px solid var(--linha); margin-top: clamp(56px, 7vw, 100px); color: var(--ink); }
.rodape h4,
.rodape p,
.rodape li a,
.rodape__base,
.rodape__base a,
.news__campo button,
.news__campo input { color: var(--ink); }
.news__campo input::placeholder { color: var(--ink-3); }
/* Duas colunas, do tamanho do que carregam: a lista de e-mail e a de
   ajuda. Antes eram quatro colunas declaradas para tres blocos — com a
   coluna da marca fora, sobrariam duas vazias esticando o resto. O
   `justify-content: start` segura as duas a esquerda em vez de
   espalha-las pela largura toda. */
.rodape__topo {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(150px, 240px);
  justify-content: start;
  gap: clamp(28px, 3.4vw, 64px);
  padding-block: clamp(48px, 6vw, 88px);
}
.rodape h4 { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; }
.rodape ul { list-style: none; display: grid; }
/* A gaveta do menu e a navegacao PRINCIPAL no celular, e os links dela
   tinham 25px de altura — metade do alvo de toque da casa (--toque, 44px).
   No dedo isso e a diferenca entre abrir Feminino e abrir Masculino.
   O rodape ja tinha essa regra desde sempre; a gaveta nao. */
.mega-col li a {
  display: flex; align-items: center; min-height: var(--toque);
}

.rodape li a { display: flex; align-items: center; min-height: var(--toque); font-size: 14px; transition: opacity .2s; }
.rodape li a:hover { opacity: .6; }

.news { display: grid; gap: 16px; max-width: 380px; }
.news p { font-size: 14px; color: var(--ink-2); }
.news__campo { display: flex; border-bottom: 1px solid var(--linha-forte); }
.news__campo input { flex: 1; min-width: 0; background: none; border: 0; padding: 13px 2px; font-size: 15px; }
.news__campo input::placeholder { color: var(--ink-3); }
.news__campo button { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding-inline: 10px; min-height: var(--toque); }
.news__ok { font-size: 14px; color: var(--whats); }

.rodape__foto img { aspect-ratio: var(--foto); width: 100%; object-fit: cover; }

.rodape__base {
  border-top: 1px solid var(--linha); padding-block: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}
.rodape__cnpj { color: var(--ink-3); }
.rodape__cnpj::before { content: "·"; margin-inline: 8px; color: var(--ink-3); }

.rodape__base nav { display: flex; gap: 8px; flex-wrap: wrap; }
.rodape__base nav a { display: inline-flex; align-items: center; min-height: var(--toque); padding-inline: 8px; }

/* ---------------------------------------------------------------- whatsapp */

/* Só o símbolo, e na tinta da casa. O verde do WhatsApp é a cor de
   outra marca: num site de fundo osso ele grita e puxa o olho para
   fora da roupa, que é o assunto. Em tinta escura o botão continua
   sendo o elemento mais contrastado da tela — que é o que um atalho
   fixo precisa ser — sem disputar com a foto. */
.zap {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-zap);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--ink); color: var(--osso); border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  transition: transform .45s var(--mola), background .3s var(--curva);
}
.zap:hover, .zap:focus-visible { transform: scale(1.07); background: #2a2a28; }
.zap svg { width: 26px; height: 26px; }
/* o rótulo continua existindo para leitor de tela */
.zap span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .zap { transition: none; } .zap:hover { transform: none; } }

/* ---------------------------------------------------------------- pop-up */

.pop {
  position: fixed; inset: 0; z-index: var(--z-pop);
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.pop[data-aberto="1"] { opacity: 1; visibility: visible; }
.pop__caixa {
  width: min(900px, 100%); max-height: 92vh; overflow: auto;
  background: var(--papel); display: grid; grid-template-columns: 1fr 1fr;
  scale: .97; transition: scale .3s var(--curva);
}
.pop[data-aberto="1"] .pop__caixa { scale: 1; }
.pop__foto { position: relative; min-height: 400px; background: var(--osso-2); }
.pop__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pop__lado { padding: clamp(26px, 3.6vw, 50px); display: grid; gap: 18px; align-content: center; }
.pop__lado h2 { font-size: clamp(28px, 3.2vw, 42px); }
.pop__lado p { font-size: 14px; color: var(--ink-2); }
.pop__opcoes { display: grid; gap: 8px; }
.pop__opcao {
  min-height: var(--toque); border: 1px solid var(--linha-forte);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.pop__opcao:hover, .pop__opcao[aria-pressed="true"] { background: var(--ink); color: var(--osso); border-color: var(--ink); }
.pop__fechar {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: var(--toque); height: var(--toque); display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); border-radius: 50%;
}
.pop__nao { justify-self: center; font-size: 13px; text-decoration: underline; color: var(--ink-3); min-height: var(--toque); }

/* ---------------------------------------------------------------- listagem */

.migalha { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; padding-block: 24px 0; }
.migalha a:hover { color: var(--ink); }

/* Titulo, ordenacao e filtro na MESMA linha. Antes eram duas faixas
   empilhadas — titulo numa, contagem+ordenacao noutra — e juntas
   comiam 15% da altura da tela antes do primeiro produto. */
.lista__cabeca {
  padding-block: 22px clamp(20px, 2.6vw, 34px);
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.lista__cabeca h1 { font-size: clamp(38px, 6vw, 84px); }
.lista__cabeca p { color: var(--ink-2); margin-top: 14px; max-width: 54ch; }
.lista__controles { display: flex; align-items: center; gap: 14px; }
.lista__filtrar { padding-inline: 22px; }
.lista__filtrar svg { width: 15px; height: 15px; }

/* ---- fita de subcategorias ---- */

.subcats { padding-bottom: clamp(24px, 3vw, 44px); }
.subcats__voltar {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.subcats__voltar:hover { color: var(--ink); }
.subcats__trilho {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(124px, 12vw, 178px);
  gap: clamp(10px, 1.2vw, 18px);
  overflow: auto hidden; scroll-snap-type: x proximity; scrollbar-width: none;
}
.subcats__trilho::-webkit-scrollbar { display: none; }
/* Reaproveita o .cat da home: um so padrao de cartao de categoria. */
.subcats__trilho .cat { scroll-snap-align: start; }
.subcats__trilho .cat__foto { aspect-ratio: 1; }
.subcats__trilho .cat__nome { font-size: 11px; }

.chips { display: flex; gap: 10px; overflow: auto hidden; padding-block: 4px 22px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--toque); padding: 0 17px 0 8px;
  border: 1px solid var(--linha); background: var(--papel);
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  transition: border-color .2s, background .2s, color .2s;
}
.chip img { width: 30px; height: 30px; object-fit: cover; }
.chip:hover { border-color: var(--linha-forte); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--osso); }
/* Chip sem foto: o recuo esquerdo de 8px existe para a miniatura do
   .chip img. Sem imagem, o texto ficava colado numa borda e solto na
   outra.

   O `text-indent` conserta o outro meio-descentramento, o que sobra
   mesmo com padding igual dos dois lados: `letter-spacing` acrescenta o
   espaco DEPOIS de cada letra, inclusive da ultima. Esse rabo de .14em
   entra na conta da largura do texto e empurra tudo para a esquerda.
   Devolver o mesmo .14em como recuo inicial recentra. */
.chip--texto { padding-inline: 17px; justify-content: center; text-indent: .14em; }

.lista__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 12px; border-block: 1px solid var(--linha);
  font-size: 13px; color: var(--ink-2);
}
/* ---- ordenacao ----

   O popup de um <select> nativo e desenhado pelo sistema operacional:
   <option> nao aceita CSS, entao a lista aberta saia com realce azul e
   fonte do Windows, de outro site.

   A saida nao e trocar o <select> por links montados a mao — o comentario
   la em category.tpl explica por que: quem sabe os parametros de ordenacao
   e o `component('sort-by')` da Nuvemshop, e adivinhar URL e como se quebra
   isso na primeira mudanca de plataforma.

   Entao o <select> continua sendo o motor: fica no DOM, recebe o valor e
   dispara o `change` de sempre. So que fica invisivel, e por cima dele o JS
   desenha um botao e uma lista com a tipografia do site. Sem JS, o select
   volta a aparecer e a pagina continua funcionando. */

.lista__ordem { display: flex; align-items: center; gap: 8px; position: relative; }
.lista__ordem select {
  border: 0; background: none; font-size: 12px; font-weight: 500;
  letter-spacing: .14em; min-height: var(--toque); padding-inline: 4px; cursor: pointer;
}
/* So esconde depois que o JS confirmou que vai desenhar o substituto. */
.lista__ordem[data-pronto] select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* O componente `sort-by` da plataforma nao entrega um <select> solto: ele
   vem embrulhado num .form-group (20px de margem embaixo, do CSS do tema
   padrao, que carrega DEPOIS do nosso) e com um <label> "Ordenar por" ao
   lado. O mock nao tem nenhum dos dois — a pilula ja diz o que e, e o
   rotulo repetido roubava 88px da linha e empurrava a pilula para fora
   do eixo do botao de filtrar.

   O label so some quando o substituto esta montado: sem JS nao ha
   pilula, o <select> nativo reaparece e o rotulo volta a ser a unica
   coisa que explica aquele controle. */
.lista__ordem .form-group { margin-bottom: 0; }
.lista__ordem[data-pronto] .form-group > label { display: none; }

.ordem__botao {
  /* "Mais vendidos" quebrava em duas linhas quando a coluna apertava —
     e um rotulo de uma palavra so por linha dentro de uma pilula. */
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--toque); padding-inline: 16px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  cursor: pointer; background: none;
  transition: background .2s var(--curva);
}
.ordem__botao:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ordem__botao svg { width: 13px; height: 13px; transition: rotate .25s var(--curva); }
.ordem__botao[aria-expanded="true"] svg { rotate: 180deg; }

.ordem__lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-painel);
  min-width: 220px; padding: 6px;
  background: var(--osso); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .2s var(--curva), translate .2s var(--curva), visibility .2s;
}
.ordem__lista[data-aberta] { opacity: 1; visibility: visible; translate: 0 0; }

.ordem__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--toque); padding-inline: 14px; border-radius: var(--raio-p);
  font-family: var(--corpo); font-size: 14px; text-align: left;
  color: var(--ink); background: none; border: 0; cursor: pointer; width: 100%;
  transition: background .16s;
}
.ordem__item:hover { background: var(--osso-2); }
.ordem__item[aria-selected="true"] { font-weight: 600; }
.ordem__item[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* A grade ocupa a largura toda, sempre. Os filtros sairam da coluna
   fixa de 240px e viraram painel: numa vitrine de mostruario a foto e
   o argumento, e ceder 240px permanentes a uma coluna que a maioria
   nunca abre encolhia justamente o que vende. */
.lista__corpo, .lista__corpo--simples { display: block; padding-block: 30px 90px; }

.filtros {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-painel, 90);
  width: min(370px, 88vw); padding: 26px clamp(20px, 2.4vw, 32px);
  background: var(--osso); border-left: 1px solid var(--linha);
  display: grid; align-content: start; gap: 4px;
  overflow-y: auto; overscroll-behavior: contain;
  translate: 100% 0; visibility: hidden;
  transition: translate .42s var(--curva), visibility .42s;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .12);
}
body.filtros-abertos .filtros { translate: 0 0; visibility: visible; }

/* Cortina: fecha ao clicar fora, que e o gesto que todo mundo tenta. */
.filtros__cortina {
  position: fixed; inset: 0; z-index: calc(var(--z-painel, 90) - 1);
  background: rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transition: opacity .42s var(--curva), visibility .42s;
}
body.filtros-abertos .filtros__cortina { opacity: 1; visibility: visible; }

.filtros__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--linha);
}
.filtros__topo b {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.filtros__fechar {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; cursor: pointer; color: var(--ink);
  transition: background .2s;
}
.filtros__fechar:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.filtros__fechar svg { width: 17px; height: 17px; }
.filtro { border-bottom: 1px solid var(--linha); }
.filtro > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; min-height: var(--toque);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.filtro > summary::-webkit-details-marker { display: none; }
.filtro > summary::after { content: "+"; font-size: 16px; }
.filtro[open] > summary::after { content: "–"; }
.filtro__corpo { padding-bottom: 16px; display: grid; gap: 2px; }
.opt { display: flex; align-items: center; gap: 11px; min-height: var(--toque); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.opt input { accent-color: var(--ink); width: 16px; height: 16px; cursor: pointer; }

.grade-pecas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.vazio { padding: 70px 0; text-align: center; color: var(--ink-3); }

/* ---------------------------------------------------------------- peça */

.pdp { display: grid; grid-template-columns: 1fr minmax(340px, 460px); gap: clamp(24px, 3.4vw, 64px); padding-block: 22px 90px; align-items: start; }
.pdp__galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdp__galeria img { width: 100%; aspect-ratio: var(--foto); object-fit: cover; background: var(--osso-2); }
.pdp__galeria img:first-child { grid-column: span 2; }

/* ── Galeria da peça da casa ──────────────────────────────────────
   A `.pdp__galeria` original é grade de 2 colunas com <img> filhas
   diretas — desenho para foto grande + miniaturas de detalhe do
   catálogo. A peça da casa tem 5 a 6 fotos POR COR, e empilhá-las
   naquela grade deixava a linha de corte de cada recorte à mostra.
   Aqui é palco único + fita de miniaturas, que é o que aguenta a
   quantidade e deixa a troca de cor visível. */
.pdp__galeria--casa { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pdp__principal {
  width: 100%; aspect-ratio: var(--foto); object-fit: cover;
  background: var(--osso-2); display: block;
}
/* ── Giro 3D da peça ──────────────────────────────────────────────
   O palco e uma caixa 3:4, a mesma das fotos, e o giro mora DENTRO
   dela, por cima da foto. Mesma caixa de proposito: trocar entre foto
   e giro nao pode mexer na altura da pagina — salto de layout a cada
   clique e pior que qualquer ganho de enquadramento.

   Os quadros sao 320x568 (9:16), mais altos que a caixa. A tela e
   encaixada pela ALTURA e centralizada, sobre o mesmo osso do fundo
   das fotos — que e branco nos quadros tambem, entao a emenda nao
   aparece. */
/* ── A CAIXA DA FOTO ──────────────────────────────────────────────
   A coluna da galeria e `1fr` numa tela de 1900px: a foto saia com
   ~1150px de largura e ~1530 de altura, e nao cabia nada na tela junto
   com ela. Travar a LARGURA pela altura da janela mantem o 3:4 e faz a
   peca inteira caber sem rolagem.

   `overflow:hidden` porque o giro vive aqui dentro, em posicao
   absoluta: sem o corte, qualquer sobra dele passava por cima das
   miniaturas — foi o que apareceu no celular. E a `aspect-ratio`
   explicita da altura a caixa antes de a foto `lazy` chegar; sem ela a
   caixa nascia com zero e o conteudo absoluto vazava. */
.pdp__palco {
  position: relative; overflow: hidden;
  aspect-ratio: var(--foto);
  width: min(100%, calc(var(--pdp-alt) * 3 / 4));
  margin-inline: auto;
}
:root { --pdp-alt: min(72vh, 760px); }
.pdp__spin {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--osso-2);
  opacity: 0; transition: opacity .45s var(--curva);
  /* pan-y, nao none. O giro ocupa a foto principal inteira: com
     `touch-action:none` o dedo pousado nele engolia tambem a rolagem
     VERTICAL, e no celular a pessoa ficava presa na peca, sem conseguir
     descer a pagina. Com pan-y o navegador continua dono do movimento
     vertical e so o horizontal vira giro. O MVP usava none porque era
     uma pagina inteira de demonstracao, sem nada abaixo para rolar. */
  touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
/* `pronto` so entra quando o primeiro quadro ja foi desenhado. Ate la a
   foto por baixo e o que se ve — e por isso nao ha tela de carregamento. */
.pdp__spin[data-pronto] { opacity: 1; }
.pdp__spin[hidden] { display: none; }
.pdp__spin[data-arrastando] { cursor: grabbing; }
/* `object-fit` num <canvas> funciona (ele e elemento substituido, como
   img e video) — e e o unico jeito honesto de encaixar 9:16 numa caixa
   3:4 sem deformar e sem vazar.

   Era `height:100%; width:auto`: a mesma armadilha do <iframe> do
   player. `width:auto` em elemento substituido NAO deriva da altura —
   cai na largura intrinseca do canvas, que agora e 720px. No celular
   isso punha um canvas de 720px de largura dentro de uma caixa de
   ~340px, e a sobra passava por cima das miniaturas e do texto. */
.pdp__spin-tela {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block; will-change: transform;
}
.pdp__spin-dica {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--display); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--curva);
}
.pdp__spin-dica svg { width: 13px; height: 13px; opacity: .6; }
.pdp__spin-dica[data-ver] { opacity: 1; }

/* A miniatura do giro se distingue das fotos por um selo, nao por cor:
   e a mesma peca, e uma fita de miniaturas onde uma delas tem outra
   moldura le como erro. */
.pdp__mini--3d { position: relative; }
.pdp__mini--3d span {
  position: absolute; left: 50%; bottom: 5px; translate: -50% 0;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(16, 16, 16, .82); color: var(--osso);
  font-family: var(--display); font-size: 9px; font-weight: 500;
  letter-spacing: .1em;
}

.pdp__minis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 8px;
  overflow: auto hidden; scrollbar-width: none; -ms-overflow-style: none;
}
.pdp__minis::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pdp__mini {
  padding: 0; background: none; border: 1px solid var(--linha); cursor: pointer;
  transition: border-color .2s;
}
.pdp__mini:hover { border-color: var(--linha-forte); }
.pdp__mini[aria-pressed="true"] { border-color: var(--ink); }
.pdp__mini img { width: 100%; aspect-ratio: var(--foto); object-fit: cover; display: block; }

.pdp__lado { position: sticky; top: calc(var(--topo) + 22px); display: grid; gap: 24px; }
.pdp__nome { font-size: clamp(30px, 3.4vw, 46px); }
.pdp__resumo { color: var(--ink-2); }

.bloco { display: grid; gap: 12px; }
.bloco__rot { display: flex; align-items: baseline; gap: 9px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.bloco__rot b { font-weight: 500; }
.bloco__rot span { color: var(--ink-3); letter-spacing: 0; text-transform: none; font-family: var(--corpo); font-size: 13px; }

/* alvo de 44px, bolinha de 32 dentro — o dedo acerta, o olho vê a cor */
.cores { display: flex; gap: 4px; flex-wrap: wrap; }
.cor { width: var(--toque); height: var(--toque); display: grid; place-items: center; background: none; border-radius: 50%; cursor: pointer; }
.cor::after {
  content: ""; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tom); border: 1px solid var(--linha-forte);
  box-shadow: inset 0 0 0 3px var(--osso); transition: box-shadow .2s;
}
.cor[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--osso), 0 0 0 1.5px var(--ink); }

.grade-tam { display: flex; gap: 8px; flex-wrap: wrap; }
.tam {
  min-width: 54px; min-height: var(--toque); padding-inline: 13px;
  border: 1px solid var(--linha); font-size: 13px; font-weight: 500;
  transition: border-color .2s, background .2s, color .2s;
}
.tam:hover { border-color: var(--linha-forte); }
.tam[aria-pressed="true"] { background: var(--ink); color: var(--osso); border-color: var(--ink); }

.aviso-sem-preco { display: flex; gap: 13px; align-items: flex-start; background: var(--osso-2); padding: 17px; font-size: 13px; color: var(--ink-2); }
.aviso-sem-preco svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

.acordeao { border-top: 1px solid var(--linha); }
.acordeao details { border-bottom: 1px solid var(--linha); }
.acordeao summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; min-height: var(--toque);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; font-size: 16px; }
.acordeao details[open] summary::after { content: "–"; }
.acordeao .corpo { padding-bottom: 20px; color: var(--ink-2); font-size: 14px; }

/* ---------------------------------------------------------------- capa de página */

.capa-pagina { position: relative; min-height: min(62vh, 560px); display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--escuro); }
.capa-pagina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.capa-pagina__txt { position: relative; z-index: 2; color: #fff; display: grid; gap: 14px; padding: 48px 20px; }
.capa-pagina__txt .eyebrow { color: rgba(255, 255, 255, .82); }
.capa-pagina__txt h1 { font-size: clamp(42px, 6.6vw, 104px); }

.prosa { max-width: 68ch; margin-inline: auto; display: grid; gap: 20px; }
.prosa p { font-size: clamp(16px, 1.2vw, 17.5px); color: var(--ink-2); }
.prosa p.destaque { font-size: clamp(26px, 3.2vw, 40px); color: var(--ink); line-height: 1.16; }

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 40px); border-top: 1px solid var(--linha); padding-top: 38px; }
.numero b { display: block; font-size: clamp(34px, 4vw, 58px); font-weight: 500; letter-spacing: -.04em; }
.numero span { font-size: 13px; color: var(--ink-3); }

.video-bloco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--escuro); }
.video-bloco img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.video-bloco .reel__play { width: 76px; height: 76px; }

/* ---------------------------------------------------------------- entrada */

/* Revelação: sobe, aparece e sai de foco.

   O desfoque é o que separa isto de um fade comum. Objeto que entra
   em cena vem de fora do plano focal; o olho reconhece isso antes de
   pensar. São 8px que ninguém enxerga sozinhos e todo mundo sente. */
[data-sobe] {
  opacity: 0; translate: 0 26px; filter: blur(8px);
}
[data-sobe].apareceu {
  opacity: 1; translate: 0; filter: blur(0);
  transition: opacity .9s var(--saida),
              translate 1s var(--saida),
              filter .7s var(--saida);
}

/* ---- mola no hover ----
   Cartão que cresce e para é botão. Cartão que cresce, passa um fio
   e volta tem massa. */
.peca__foto, .cat, .comu__item .capa, .mega-peca img, .reel {
  transition: transform .55s var(--mola);
}
.peca:hover .peca__foto,
.cat:hover,
.comu__item:hover .capa { transform: scale(1.025); }

.mega-peca:hover img { transform: scale(1.05); }

/* o link com risco cresce da esquerda, no mesmo compasso */
.link-risco::after, .mega-col li a::after {
  transition: scale .42s var(--mola);
}

/* ---- paralaxe ----
   A foto anda mais devagar que a página. O contêiner corta o que
   sobra, por isso a imagem nasce 8% maior. */
[data-paralaxe] { will-change: transform; }
.faixa, .banner, .split__foto, .servico__foto, .capa-pagina { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  [data-sobe], [data-sobe].apareceu { filter: none; translate: none; opacity: 1; }
  [data-paralaxe] { transform: none !important; }
}

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 1200px) {
  .vitrine__grade { grid-template-columns: repeat(3, 1fr); }
  .vitrine__grade .peca:nth-child(4n+3) { margin-top: 0; }
  .rodape__topo { grid-template-columns: minmax(240px, 1.2fr) minmax(140px, 1fr); }
  .rodape__foto { display: none; }
}

/* A nav de cima cabe até aqui. Abaixo disso ela encostava na marca
   centralizada — o "MOSTRUÁRIO" entrando por baixo do "WALL". Some
   antes de brigar; quem navega usa o menu de tela cheia, que agora
   existe e é melhor. */
@media (max-width: 1240px) {
  .nav { display: none; }
}
@media (max-width: 1120px) {
  .acao .rotulo { display: none; }
}

@media (max-width: 1080px) {
  .comu__grade { grid-template-columns: repeat(2, 1fr); }
  .lista__corpo { grid-template-columns: 1fr; }
  .filtros { position: static; grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__lado { position: static; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .duplo, .servico, .split { grid-template-columns: 1fr; }
  .banner:nth-child(2), .cat:nth-child(even) { margin-top: 0; }
}

@media (max-width: 860px) {
  .convite { grid-template-columns: 1fr; }
  .servico__foto { min-height: 320px; }
  .vitrine__grade { grid-template-columns: repeat(2, 1fr); }
  .cartaz { grid-column: span 2; grid-row: auto; min-height: 400px; }
  .grade-pecas { grid-template-columns: repeat(2, 1fr); }
  .rodape__topo { grid-template-columns: 1fr; }
  .pop__caixa { grid-template-columns: 1fr; }
  .pop__foto { min-height: 200px; }
}

@media (max-width: 560px) {
  .cabeca-secao { align-items: flex-start; }
  .marca__nome { font-size: 19px; letter-spacing: .18em; }
  .tipos__palco { margin-inline: -16vw; }
  .filtros { grid-template-columns: 1fr; }
}


/* ================================================================
   NUVEMSHOP — telas que o site estático não tinha
   ---------------------------------------------------------------- */

/* Modo mostruário: rede de segurança. Se algum trecho da plataforma
   imprimir preço por conta própria, ele não aparece. O interruptor
   do tema decide, mas o CSS garante. */
.mostruario .js-price-display,
.mostruario .item__preco,
.mostruario .pedido__total { display: none; }

/* ---- selo da capa ---- */
.hero__selo {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px; color: #fff;
  font-family: var(--display); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ---- "Confira" nos cartões de categoria ----
   Mesma razão dos cartões editoriais: num toque não existe hover,
   então a afordância precisa estar visível em repouso. */
.cat__confira {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .35s var(--curva), border-color .35s var(--curva);
}
.cat__confira i { font-style: normal; transition: translate .4s var(--mola); }
.cat:hover .cat__confira { background: rgba(255, 255, 255, .2); border-color: #fff; }
.cat:hover .cat__confira i { translate: 4px 0; }

/* ---- as três provas ---- */
.provas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0; }
.provas li {
  padding: 8px 14px; border: 1px solid var(--linha-forte); border-radius: 999px;
  font-family: var(--display); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}

/* ---- telas de conta e formulários ---- */
.conta { padding-block: clamp(48px, 7vw, 110px); }
.conta__topo { margin-bottom: clamp(24px, 3vw, 44px); }
.conta__topo .eyebrow { display: block; margin-bottom: 12px; }
.conta__corpo { max-width: 720px; }

.conta__nav { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.conta__nav a { font-family: var(--display); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
.conta__nav a:hover { color: var(--ink); }

.form { display: grid; gap: 18px; }
.form--estreito { max-width: 460px; }
.form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__ajuda { color: var(--ink-2); margin-bottom: 6px; }
.form__erro {
  padding: 12px 16px; border-radius: var(--raio-p);
  background: #f6e3e1; color: #7d2b25; font-size: 14px;
}
.form__pe { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 4px; }

.campo { display: grid; gap: 7px; }
.campo > span {
  font-family: var(--display); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.campo input, .campo textarea {
  width: 100%; padding: 13px 15px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--corpo); font-size: 15px; color: var(--ink);
  transition: border-color .3s var(--curva);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ink); }

.btn--largo { width: 100%; }

/* ---- listas de pedidos, itens e endereços ---- */
.lista-pedidos, .lista-itens, .lista-enderecos { display: grid; gap: 2px; list-style: none; }

.pedido a, .endereco {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 18px 20px; background: var(--papel);
  transition: background .3s var(--curva);
}
.pedido a:hover { background: var(--osso-2); }
.pedido b { font-family: var(--display); }
.pedido span, .endereco span { font-size: 14px; color: var(--ink-2); }
.pedido__total { margin-left: auto; color: var(--ink) !important; }
.pedido__resumo { margin-bottom: 22px; color: var(--ink-2); }

.item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--papel); }
.item img { border-radius: var(--raio); object-fit: cover; }
.item b { display: block; font-family: var(--display); font-size: 14px; }
.item i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); }
.item__preco { margin-left: auto; font-family: var(--display); }

.endereco { justify-content: space-between; }

/* ---- prosa das páginas institucionais ---- */
.prosa { padding-block: clamp(48px, 7vw, 110px); }
.prosa__topo { margin-bottom: clamp(24px, 3vw, 44px); }
.prosa__corpo { max-width: 68ch; display: grid; gap: 18px; color: var(--ink-2); }
.prosa__corpo h2, .prosa__corpo h3 { color: var(--ink); margin-top: 20px; }

/* ---- paginação e vazios ---- */
.paginacao { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.paginacao a, .paginacao span {
  min-width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--linha); font-family: var(--display); font-size: 13px;
}
.paginacao .active { background: var(--ink); color: var(--osso); border-color: var(--ink); }

.vazio { padding: 40px 0; color: var(--ink-3); }

@media (max-width: 620px) {
  .form__par { grid-template-columns: 1fr; }
}


/* ---- relógio de São Paulo, no pé da capa ----
   Morou aqui uma SEGUNDA declaração de `.hero__relogio`, com
   `position: absolute` — de uma versão do hero em que o relógio era
   filho direto do palco, solto. O HTML de hoje não é esse: o relógio
   mora dentro de `.hero__base` (acima, um flex que também segura o
   "scroll para explorar"), e essa segunda declaração continuava
   vencendo a cascata (vinha depois no arquivo) sem que ninguém
   tivesse trocado o HTML de volta.

   O resultado não era só posição errada: filho `position: absolute`
   de um container flex, com `left` mas sem `right` nem `width`,
   estica para preencher o flex inteiro — regra pouco conhecida do
   próprio Flexbox. A cápsula "São Paulo" virava uma faixa quase do
   tamanho da tela, e o botão "Inspire-se", centralizado por cima,
   caía em cima dela. Era isso que aparecia sobreposto no celular.

   A declaração de verdade — a que o HTML de hoje usa — é a de cima,
   dentro de `.hero__base`, com o ajuste de tamanho para celular no
   media query logo depois dela. */


/* ---- texto da capa, centralizado ----
   O painel deixa de morar no canto e passa a ocupar a tela toda,
   centrando o conteúdo. O relógio continua no pé à esquerda: ele é
   assinatura, não chamada, e não disputa com o título. */
/* O par frase + botao desceu do centro para o terco de baixo, e
   encostou um no outro.

   Centralizado, o texto caia bem no meio do corpo de quem corre no
   video — competia com o assunto da foto em vez de comentar. Embaixo
   ele encontra o rodape natural do enquadramento.

   O gap tambem apertou (ate 22px -> ate 15px): frase e botao sao UMA
   unidade, chamada e acao. Com folga demais o botao parecia solto,
   como se pertencesse a outro bloco. */
.hero__painel {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: end center; justify-items: center;
  gap: clamp(10px, 1vw, 15px);
  padding: 0 var(--gut) clamp(74px, 13vh, 132px);
  text-align: center; color: #fff;
}

.hero__titulo {
  font-family: var(--editorial); font-weight: 300;
  font-size: clamp(32px, 5.2vw, 74px);
  line-height: 1.02; letter-spacing: -.035em;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(8, 10, 10, .35);
}

.hero__bloco { display: grid; justify-items: center; gap: 10px; }

.hero__olho {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 16px rgba(8, 10, 10, .5);
}

.hero__linha {
  font-size: clamp(15px, 1.5vw, 21px);
  color: rgba(255, 255, 255, .9);
  max-width: 34ch;
  text-shadow: 0 1px 20px rgba(8, 10, 10, .4);
}

/* A pílula de contorno: sobre foto, botão cheio vira remendo, mas
   um risco sozinho some no meio da imagem. O contorno fechado
   resolve os dois — lê como botão e não briga com a foto. */
.hero__botao {
  margin-top: clamp(6px, 1vw, 14px);
  display: inline-flex; align-items: center; justify-content: center;
  /* Mesma metrica do .btn. So a pele muda, porque aqui o fundo e video. */
  min-height: var(--toque); padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background .35s var(--curva), border-color .35s var(--curva),
              transform .45s var(--mola);
}
.hero__botao:hover, .hero__botao:focus-visible {
  background: rgba(255, 255, 255, .26);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Com texto no meio da tela, os dois véus das pontas não bastam:
   falta contraste justamente no centro. Uma terceira camada, bem
   fraca e uniforme, segura o título sem chapar a roupa. */
.hero__palco::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: rgba(8, 10, 10, .22);
}

@media (prefers-reduced-motion: reduce) {
  .hero__botao { transition: none; }
  .hero__botao:hover { transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   Recados de formulário — sucesso, erro e aviso.

   Ficam aqui e não no meio do arquivo porque foram acrescentados
   depois, junto com a passagem das páginas de contato, conta e
   carrinho. Mesma família visual do .aviso-sem-preco: fundo osso-2
   e um traço na lateral dizendo de que tipo é o recado.
   ───────────────────────────────────────────────────────────── */
.recado {
  display: grid; gap: 6px;
  background: var(--osso-2);
  border-left: 2px solid var(--ink-3);
  padding: 16px 18px;
  font-size: 14px; color: var(--ink-2);
}
.recado strong { color: var(--ink); font-family: var(--display); font-weight: 500; }
.recado--ok { border-left-color: var(--whats); }
.recado--erro { border-left-color: #a4423f; }

/* Peça sendo consultada no formulário de contato. */
.consulta-peca { display: flex; align-items: center; gap: 14px; }
.consulta-peca img { width: 66px; height: 88px; object-fit: cover; flex: none; }
.consulta-peca p { font-size: 14px; color: var(--ink-2); }

/* Bloco de contatos da loja na página de contato. */
.conta__info { display: grid; gap: 12px; margin-bottom: 32px; }


/* ═════════════════════════════════════════════════════════════
   Páginas que ainda não tinham regra

   O vocabulário do site foi escrito para a home, o catálogo e a
   peça. Blog, conta e a tela de senha usavam classes que nunca
   ganharam regra — apareciam sem estilo nenhum. É isso aqui.

   Nada de invenção: mesmos tokens, mesmo fio de 1px, mesma voz
   de interface em caixa alta. O que muda é só o arranjo.
   ═════════════════════════════════════════════════════════════ */

/* ── Blog: lista ─────────────────────────────────────────────── */

/* A grade do blog é mais larga que a de peças: texto precisa de
   linha maior que foto. Três colunas viram duas cedo. */
.grade-pecas--blog { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 44px); }

.card-blog { display: grid; gap: 0; }
.card-blog__foto { display: block; overflow: hidden; background: var(--osso-2); }
.card-blog__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: scale 1.1s var(--curva);
}
.card-blog__foto:hover img { scale: 1.04; }
.card-blog__corpo { display: grid; gap: 10px; padding-top: 16px; }
.card-blog__titulo { font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }
.card-blog__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-blog__corpo p { font-size: 14px; color: var(--ink-2); }
.card-blog .link-risco { justify-self: start; margin-top: 2px; }

/* ── Blog: post ──────────────────────────────────────────────── */

/* Sangra para fora da coluna de leitura: a foto do post é a única
   coisa que tem licença de ultrapassar as 68ch da prosa. */
.prosa__foto { margin-block: 12px 8px; }
.prosa__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--osso-2); }

.prosa__rodape {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--linha);
  display: grid; gap: 14px; justify-items: start;
}
.prosa__rodape .eyebrow { color: var(--ink-3); }

/* ── Cartão de peça fora do modo mostruário ──────────────────── */
.peca__preco { font-family: var(--display); font-size: 14px; font-weight: 500; color: var(--ink); }

/* ── Conta: endereços ────────────────────────────────────────── */
.conta__enderecos { display: grid; gap: 12px; }
.conta__endereco {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 20px; background: var(--papel);
  border: 1px solid var(--linha);
}
.conta__endereco-linha { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.conta__endereco-linha b { font-family: var(--display); font-weight: 500; color: var(--ink); }

/* ── Conta: resumo do pedido ─────────────────────────────────── */
.conta__resumo { display: grid; gap: 16px; }
.conta__resumo-bloco {
  display: grid; gap: 10px; padding: 20px;
  background: var(--papel); border: 1px solid var(--linha);
}
.conta__resumo-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 14px; color: var(--ink-2);
}
.conta__resumo-linha b { font-family: var(--display); font-weight: 500; color: var(--ink); }

/* ── Tela de senha (loja fechada) ────────────────────────────── */

/* Não passa pelo layout normal: tem <body> próprio, sem cabeçalho
   nem menu. Por isso centraliza tudo na mão. */
.body-password {
  min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--osso); color: var(--ink);
}
.topo__logo { display: grid; place-items: center; padding-block: clamp(28px, 5vw, 56px); }
.topo__logo img { max-width: 190px; height: auto; }
.rodape__fundo {
  padding-block: 28px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--ink-3); text-align: center;
}

/* ── Ajustes de tela estreita ────────────────────────────────── */
@media (max-width: 980px) {
  .grade-pecas--blog { grid-template-columns: repeat(2, 1fr); }
  .conta__endereco { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .grade-pecas--blog { grid-template-columns: 1fr; }
}


/* ── Fita do Instagram alimentada pelo feed nativo ───────────────
   A plataforma injeta <img> com a classe que passamos em
   data-ig-image-class. Ela precisa das mesmas medidas da fita
   curada, senão o post real entra com tamanho de origem. */
.insta__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.insta__pe { padding-top: clamp(20px, 2.4vw, 34px); display: flex; justify-content: center; }


/* ═════════════════════════════════════════════════════════════
   Capa no celular: composicao de story

   No desktop o texto fica centrado no meio da tela. No celular a
   tela e alta e estreita, e centrar tudo joga o texto em cima da
   pessoa — justamente onde a roupa aparece.

   Entao no retrato o painel abre: chamada encostada no alto,
   botao encostado na base, e o meio inteiro livre para a foto.
   E o enquadramento de story, que e como a pessoa ja esta
   acostumada a ver roupa no celular.

   O relogio continua no topo (regra logo acima) e a chamada
   comeca abaixo dele — por isso o padding de cima soma o
   deslocamento do topo mais a altura da linha do relogio.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .hero__painel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    /* Folga maior no topo: o texto encostava no cabecalho. Embaixo
       sobra espaco para o botao e para o relogio, nessa ordem. */
    padding-block: calc(var(--deslocamento-topo) + 13vh) 62px;
  }

  /* Pilula contida, nao barra. Com `width: min(100%,300px)` ela
     esticava de borda a borda e lia como rodape de app, nao como
     convite. Agora o tamanho vem do texto. */
  .hero__botao {
    margin-top: 0;
    width: auto;
    padding-inline: 40px;
  }

  /* No celular a capa E a tela inteira, entao a chamada precisa
     carregar peso — no desktop o video faz esse trabalho sozinho e
     ela pode continuar discreta. Daqui vem a diferenca de escala
     entre as duas versoes: nao e descuido, e divisao de tarefa. */
  .hero__bloco { gap: 14px; }
  .hero__linha {
    font-family: var(--display);
    font-size: clamp(30px, 8.6vw, 46px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
    max-width: 12ch;
    color: #fff;
  }
  .hero__olho { font-size: 10.5px; letter-spacing: .24em; }

  /* O terceiro veu foi feito para segurar texto no centro. Com o
     texto nas pontas ele so escurece a roupa a toa — some. */
  .hero__palco::before { opacity: 0; }

  /* Veu de story.

     O veu do desktop desaparece aos 24% do topo, e no celular a
     manchete cai logo ABAIXO disso — na faixa limpa. Era por isso que
     a frase sumia sobre a roupa clara do corredor.

     Aqui o degrade de cima desce ate 60%, cobrindo a area do texto, e
     o de baixo sobe ate 36% para segurar o botao. O meio continua
     aberto de proposito: e onde fica o rosto, que e o assunto da foto
     — escurecer ali seria pagar legibilidade com a imagem. */
  .hero__palco::after {
    background:
      linear-gradient(to bottom,
        rgba(8, 10, 10, .68) 0%,
        rgba(8, 10, 10, .56) 30%,
        rgba(8, 10, 10, 0) 60%),
      linear-gradient(to top,
        rgba(8, 10, 10, .60) 0%,
        rgba(8, 10, 10, 0) 36%);
  }

  /* Sombra mais fechada: o degrade resolve o fundo geral, a sombra
     resolve o detalhe claro que passa exatamente atras de uma letra. */
  .hero__linha { text-shadow: 0 2px 14px rgba(8, 10, 10, .78), 0 0 40px rgba(8, 10, 10, .5); }
  .hero__olho  { text-shadow: 0 1px 12px rgba(8, 10, 10, .8); }
}


/* ── Cor e tamanho: escolha por radio ────────────────────────────
   .cor e .tam foram escritas para [aria-pressed], que e padrao de
   <button>. Mas quem monta a mensagem do WhatsApp e o site.js, e ele
   le input[type=radio]:checked — trocar por botao quebraria isso.

   Entao o controle e um <label> com radio escondido dentro, e estas
   duas regras espelham o estado selecionado. As originais com
   aria-pressed continuam valendo, caso algum dia virem botao. */
.cor:has(input:checked)::after {
  box-shadow: inset 0 0 0 3px var(--osso), 0 0 0 1.5px var(--ink);
}
.tam { display: inline-grid; place-items: center; cursor: pointer; }
.tam:has(input:checked) {
  background: var(--ink); color: var(--osso); border-color: var(--ink);
}
.cor:focus-within::after, .tam:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }


/* ── Painel de busca ─────────────────────────────────────────────
   Encostado embaixo do cabecalho, ocupando a largura toda. Fica
   sob o cabecalho no empilhamento (z-index 60 contra 70) para a
   lupa continuar a vista e virar o botao que fecha — mesma logica
   do traco que vira X no menu. */
.busca {
  position: fixed; left: 0; right: 0; z-index: 60;
  top: var(--deslocamento-topo);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .07);
}
.busca__caixa { display: flex; align-items: center; gap: 16px; padding-block: clamp(18px, 2.4vw, 30px); }

.busca__form { flex: 1; min-width: 0; }
.busca__grupo { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linha-forte); }
.busca__campo {
  flex: 1; min-width: 0; background: none; border: 0;
  padding: 12px 2px; font-size: clamp(17px, 2vw, 24px); color: var(--ink);
}
.busca__campo:focus { outline: none; }
.busca__campo::placeholder { color: var(--ink-3); }
.busca__enviar {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  min-height: var(--toque); padding-inline: 10px; background: none; cursor: pointer;
}
.busca__sugestoes { position: relative; }
.busca__fechar {
  flex: none; width: var(--toque); height: var(--toque);
  display: grid; place-items: center; background: none; cursor: pointer;
}
.busca__fechar svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .busca__caixa { gap: 8px; }
  .busca__campo { font-size: 16px; }  /* abaixo de 16px o iOS da zoom sozinho */
}


/* ═════════════════════════════════════════════════════════════
   Barras de rolagem

   A barra de rolagem do sistema e cinza de sistema: no fundo osso
   ela aparece como um trilho cinza-azulado de outro projeto, bem
   embaixo de uma fileira de fotos. Nenhum trilho horizontal do
   site pode mostrar essa barra crua.

   Fina, na paleta, e so aparece quando o ponteiro chega perto.
   Some no toque, onde o proprio dedo ja e a barra.

   Firefox usa scrollbar-width/-color; o resto usa ::-webkit-.
   As duas versoes ficam aqui juntas de proposito.
   ═════════════════════════════════════════════════════════════ */

.reels__trilho,
.cats__trilho,
.tipos__trilho,
.insta__trilho,
.chips,
.pop__caixa,
.filtros {
  scrollbar-width: thin;
}

/* ── NENHUM TRILHO MOSTRA BARRA ───────────────────────────────────
   Havia uma barra "discreta" de 3px que aparecia no hover. Na pratica
   ela surgia sobre o cartao — encostava na foto e no cartao da peca — e
   lia como falha de layout, nao como affordance.

   O que diz que da para arrastar sao outras coisas, ja no lugar: a
   beirada do proximo cartao aparecendo, o encaixe do scroll-snap e as
   setas no desktop. A barra nao acrescentava nada.

   Vale para todos os trilhos horizontais e para os paineis que rolam
   na vertical. */
.reels__trilho, .cats__trilho, .chips,
.tipos__trilho, .insta__trilho, .tipos__fila,
.carrossel__trilho, .temas__trilho, .subcats__trilho,
.pop__caixa, .filtros, .gaveta, .player__pista {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reels__trilho::-webkit-scrollbar,
.cats__trilho::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.tipos__trilho::-webkit-scrollbar,
.insta__trilho::-webkit-scrollbar,
.tipos__fila::-webkit-scrollbar,
.carrossel__trilho::-webkit-scrollbar,
.temas__trilho::-webkit-scrollbar,
.subcats__trilho::-webkit-scrollbar,
.pop__caixa::-webkit-scrollbar,
.filtros::-webkit-scrollbar,
.gaveta::-webkit-scrollbar,
.player__pista::-webkit-scrollbar {
  display: none; width: 0; height: 0;
}

/* A barra da pagina inteira tambem e do sistema. */
html {
  scrollbar-width: thin;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--osso); }
body::-webkit-scrollbar-thumb {
  background: var(--linha-forte); border-radius: 999px;
  border: 3px solid var(--osso);
}
body::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }


/* ═════════════════════════════════════════════════════════════
   Player vertical de video

   Fundo quase preto, um video por tela, encaixe na rolagem. Os
   controles sao vidro fosco sobre a imagem: sobre foto, botao
   chapado vira remendo, e texto solto some. O contorno com blur
   le como botao sem brigar com a roupa — e o mesmo raciocinio da
   pilula do hero.

   Os tokens de vidro ficam aqui porque nasceram com o player,
   mas sao para reaproveitar no resto do site.
   ═════════════════════════════════════════════════════════════ */

:root {
  --vidro: rgba(255, 255, 255, .12);
  --vidro-forte: rgba(255, 255, 255, .2);
  --vidro-borda: rgba(255, 255, 255, .28);
  --desfoque: blur(14px) saturate(140%);
  --raio-vidro: 18px;
}

/* Enquanto o player esta aberto a pagina atras nao rola. */
body[data-travado] { overflow: hidden; }

.player {
  position: fixed; inset: 0; z-index: 90;
  background: #06060a;
}
.player[hidden] { display: none; }

.player__pista {
  height: 100dvh; overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.player__pista::-webkit-scrollbar { display: none; }

.player__slide {
  position: relative;
  height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; overflow: hidden;
}
/* ── O QUADRO DO VIDEO ────────────────────────────────────────────
   Os Shorts sao 9:16. Numa tela de PC, deitada, isso tem que virar uma
   coluna central do tamanho de um celular — nao um quadro esticado de
   ponta a ponta com um pedaco gigante da cena.

   A proporcao vive AQUI, na <div>, e nao no <iframe>. Duas tentativas
   anteriores puseram `aspect-ratio` no proprio iframe e nenhuma pegou:
   `aspect-ratio` nao deriva largura em elemento substituido com
   `width:auto` — iframe, video e img caem no tamanho intrinseco ou
   esticam, dependendo do contexto. Numa <div> comum a regra vale.

   O `min` cuida das duas telas: no PC manda a altura (coluna 9:16
   centralizada pelo `place-items` do slide); no celular manda a
   largura, e a altura acompanha sem passar da tela. */
.player__quadro {
  width: min(100vw, calc(100dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: 100dvh;
  position: relative;
  background: #06060a;
  overflow: hidden;
}
.player__quadro video,
.player__quadro iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; display: block; cursor: pointer;
  background: #06060a;
}

/* Video que nao carregou nao pode deixar tela preta muda. */
.player__slide[data-falhou]::after {
  content: "Vídeo indisponível";
  position: absolute; inset: auto 0 50% 0;
  text-align: center; color: rgba(255, 255, 255, .6);
  font-family: var(--display); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
}

/* Pausado ganha um play grande no meio, senao a tela parece travada. */
.player__slide[data-parado="1"]::before {
  content: ""; position: absolute; z-index: 2;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--vidro)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5-11-6.5Z'/%3E%3C/svg%3E")
    center / 26px no-repeat;
  border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  pointer-events: none;
}

/* ---- barra de progresso ---- */
.player__barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 2px; background: rgba(255, 255, 255, .18);
}
.player__barra i { display: block; height: 100%; width: 0; background: #fff; }

/* ---- cartao da peca, em vidro ---- */
.player__peca {
  position: absolute; z-index: 3;
  left: 50%; translate: -50% 0;
  bottom: clamp(26px, 5vh, 54px);
  width: min(420px, calc(100% - 32px));
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px;
  border-radius: var(--raio-vidro);
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  color: #fff;
  transition: background .3s var(--curva), transform .45s var(--mola);
}
.player__peca:hover { background: var(--vidro-forte); transform: translate(-50%, -2px); }
.player__peca img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--raio-p); flex: none; }
.player__peca span { min-width: 0; }
.player__peca b {
  display: block; font-family: var(--display); font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__peca i {
  display: block; font-style: normal; font-size: 12px;
  color: rgba(255, 255, 255, .74);
}
.player__seta { margin-left: auto; font-size: 22px; opacity: .7; }

/* ---- controles ---- */
.player__ui {
  position: absolute; z-index: 4; top: 0; right: 0;
  display: flex; gap: 10px; padding: clamp(14px, 2.4vh, 24px);
}
.player__botao {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  transition: background .3s var(--curva);
}
.player__botao:hover { background: var(--vidro-forte); }
.player__botao svg { width: 19px; height: 19px; }

.player__som .player__som-on { display: none; }
.player__som[aria-pressed="true"] .player__som-on { display: block; }
.player__som[aria-pressed="true"] .player__som-off { display: none; }

/* ---- setas de anterior/proximo ---- */
.player__nav {
  position: absolute; z-index: 4; right: clamp(14px, 2.4vh, 24px);
  top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 10px;
}
/* Ponta da fita: a seta continua no lugar, so perde acao e opacidade —
   sumir ela empurraria a outra e a pessoa perderia a mira do dedo. */
.player__nav .player__botao[disabled] {
  opacity: .35; cursor: default; pointer-events: none;
}
@media (max-width: 640px) {
  /* No celular o gesto de arrastar ja resolve; a seta some para nao
     competir com o cartao da peca, que mora no mesmo canto inferior. */
  .player__nav { display: none; }
}

/* ---- dica de deslizar ---- */
.player__dica {
  position: absolute; z-index: 4; left: 50%; translate: -50% 0;
  top: clamp(70px, 12vh, 110px);
  padding: 9px 16px; border-radius: 999px;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  color: #fff; font-family: var(--display); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity .5s var(--curva);
  pointer-events: none;
}
.player__dica[data-visivel="1"] { opacity: 1; }

/* A regra de tela larga que existia aqui mirava o <iframe> com
   `width:auto` + `aspect-ratio` — e nao funcionava, pelo motivo
   explicado no `.player__quadro`. A proporcao agora e do quadro e vale
   em toda largura, entao aqui sobra so alinhar a barra de progresso
   com a coluna do video. */
@media (min-width: 900px) {
  .player__barra { left: 50%; translate: -50% 0; width: min(56.25vh, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .player__pista { scroll-behavior: auto; }
  .player__peca { transition: none; }
  .player__peca:hover { transform: translate(-50%, 0); }
}


/* ═════════════════════════════════════════════════════════════
   Revelação de título, linha por linha

   O bloco inteiro subindo já existe em [data-sobe]. Isto é outra
   coisa: cada linha do título sobe de tras de um recorte, com um
   atraso a mais que a anterior. O olho le a primeira enquanto a
   segunda ainda esta chegando — e e isso que faz parecer que
   alguem compos a pagina, em vez de o bloco so ter aparecido.

   O recorte e o overflow da .palavra. O padding embaixo com
   margem negativa igual existe porque overflow:hidden corta o
   rabo do "g" e do "ç" — sem essa folga o titulo aparece mutilado
   em portugues.

   O seletor exige [data-fatiado], que so o JS poe. Assim, se o JS
   nao rodar, o titulo simplesmente aparece: nunca fica invisivel.
   ═════════════════════════════════════════════════════════════ */

[data-linhas][data-fatiado] .palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
[data-linhas][data-fatiado] .palavra__i {
  display: inline-block;
  translate: 0 115%;
}
[data-linhas][data-fatiado].apareceu .palavra__i {
  translate: 0 0;
  transition: translate .95s var(--saida);
  transition-delay: calc(var(--l, 0) * 90ms);
}

/* ── Foto que entra por corte ─────────────────────────────────
   A cortina do menu ja faz isso com clip-path, e a foto herda o
   mesmo gesto: a moldura abre de cima para baixo.

   Por que corte e nao escala: a paralaxe escreve scale 1.08
   INLINE nessas mesmas fotos, para ter folga e nao mostrar borda
   ao deslocar. Animar escala aqui seria sobrescrito pelo inline
   — e se vencesse, comeria a folga e a borda apareceria.
   clip-path nao e disputado por ninguem.
   ───────────────────────────────────────────────────────────── */

/* So esconde depois que o JS confirmou que vai revelar. E a mesma
   guarda que [data-linhas] ja usava com [data-fatiado]: sem ela, um
   site.js antigo (ou que nao carregou) deixava a foto clipada em 100%
   — invisivel para sempre. Foi o que sumiu com as fotos da Colecao e
   do Atendimento. */
/* O recorte vai no FILHO, nunca no elemento observado.

   O IntersectionObserver leva em conta o clip-path do proprio alvo:
   com `inset(0 0 100%)` o intersectionRatio e 0 e `isIntersecting`
   fica false PARA SEMPRE — medi os dois estados: 0 com recorte, 1
   sem. O elemento esperava entrar em cena para ser revelado e nunca
   entrava, porque estava recortado a zero. Impasse. Era esta a razao
   de as fotos da Colecao e do Atendimento sumirem mesmo com o JS no ar.

   Recortando o filho, a caixa observada mantem a area inteira, o
   observador dispara e a revelacao acontece.

   O `data-pronto` continua: cobre o outro caso, o de o JS nao estar
   no ar para revelar coisa nenhuma. */
[data-corte][data-pronto] > * {
  clip-path: inset(0 0 100% 0);
}
[data-corte][data-pronto].apareceu > * {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--saida);
}

@media (prefers-reduced-motion: reduce) {
  [data-linhas][data-fatiado] .palavra { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  [data-linhas][data-fatiado] .palavra__i,
  [data-linhas][data-fatiado].apareceu .palavra__i { translate: none; transition: none; }
  [data-corte] > *, [data-corte][data-pronto].apareceu > * { clip-path: none; transition: none; }
}


/* ═════════════════════════════════════════════════════════════
   Cantos arredondados

   O site nasceu com --raio: 2px, que e praticamente canto vivo.
   Como TUDO bebe desse token, subir o valor arredonda botao,
   campo, cartao e etiqueta de uma vez — e a harmonia vem de graca,
   porque ninguem escolheu um raio proprio no meio do caminho.

   Tres degraus, nao um so: um raio unico faz a etiqueta de 30px
   parecer uma pilula e o cartao de 400px parecer quadrado. O raio
   precisa crescer com a peca, mas menos que ela.

   O que ENCOSTA NA BORDA DA TELA fica reto de proposito: hero,
   faixa do lookbook, fita de tipos, bloco de atendimento e rodape.
   Canto arredondado colado no fim do monitor le como erro, nao
   como estilo.
   ═════════════════════════════════════════════════════════════ */

:root {
  --raio-p: 8px;    /* etiquetas, campos, itens de lista */
  --raio: 14px;     /* o padrao: botoes, cartoes, avisos */
  --raio-g: 22px;   /* superficies grandes e paineis */
}

/* ---- media contida (precisa de overflow para o corte pegar) ---- */
.peca__foto,
.cat,
.card-blog__foto,
.split__foto,
.insta__item {
  border-radius: var(--raio);
}

/* Estas nao tinham overflow: sem ele o raio nao corta a foto. */
.cartaz,
.banner,
.reel {
  border-radius: var(--raio);
  overflow: hidden;
}

.tipo img,
.prosa__foto img,
.consulta-peca img { border-radius: var(--raio); }

.reel__peca { border-radius: var(--raio); }
.reel__peca img { border-radius: var(--raio-p); }

/* ---- superficies ---- */
.recado,
.aviso-sem-preco,
.conta__endereco,
.conta__resumo-bloco,
.pedido a { border-radius: var(--raio); }

.campo input,
.campo textarea,
.filtro__corpo .opt { border-radius: var(--raio-p); }

.busca { border-radius: 0 0 var(--raio-g) var(--raio-g); }
.pop__caixa { border-radius: var(--raio-g); overflow: hidden; }

/* A pilula continua pilula: chip, selo e botao do hero ja tem 999px
   e nao entram nesta conta. */

/* ---- vidro ----
   Os tokens nasceram com o player. Aqui eles passam a valer para as
   outras superficies que ja usavam desfoque com valor solto, para
   que "vidro" seja uma coisa so no site inteiro. */
.reel__play {
  background: var(--vidro-forte);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
}

@media (max-width: 620px) {
  /* Em tela estreita o cartao quase encosta na borda: raio menor
     evita que ele pareca uma bolha. */
  :root { --raio: 11px; --raio-g: 16px; }
}

/* ---------------------------------------------------------------- brilho editorial

   Luz localizada, acionada pelo cursor. É deliberadamente discreta: serve
   para dar materialidade às superfícies visuais sem virar efeito de vitrine.
   O JavaScript só habilita isto onde existe mouse; toque e movimento reduzido
   mantêm a composição completamente estática. */
@media (hover: hover) and (pointer: fine) {
  .peca__foto::after,
  .cat::after,
  .cartaz::after,
  .banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      circle 210px at var(--cursor-x, 50%) var(--cursor-y, 50%),
      rgba(255, 255, 255, .20),
      rgba(255, 255, 255, 0) 68%
    );
    transition: opacity .45s var(--curva);
  }

  .peca__foto.tem-foco::after,
  .cat.tem-foco::after,
  .cartaz.tem-foco::after,
  .banner.tem-foco::after { opacity: 1; }

  .hero__palco::before {
    background:
      radial-gradient(58% 56% at var(--cursor-x, 50%) var(--cursor-y, 48%),
        rgba(255, 255, 255, .08),
        rgba(255, 255, 255, 0) 70%),
      rgba(8, 10, 10, .22);
    transition: background .5s var(--curva);
  }
}

@media (prefers-reduced-motion: reduce) {
  .peca__foto::after,
  .cat::after,
  .cartaz::after,
  .banner::after { transition: none; }
}

/* ---------------------------------------------------------------- vitrine / catálogo

   A listagem é uma página editorial, não uma tabela de itens. O grid usa
   colunas estáveis nas vitrines cheias e, quando há uma única peça, mantém
   um card generoso em vez de esticar (ou encolher) a imagem sem critério. */
.lista {
  padding-bottom: clamp(44px, 7vw, 112px);
}

.lista__cabeca {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(28px, 4vw, 58px) clamp(26px, 3vw, 42px);
  border-bottom: 1px solid var(--linha);
}

.lista__cabeca h1 {
  max-width: 12ch;
  font-size: clamp(46px, 5.2vw, 92px);
  line-height: .92;
  letter-spacing: -.055em;
}

.lista__barra {
  min-height: 76px;
  padding-block: 14px;
  border-top: 0;
}

.lista__contagem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lista__contagem::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 10%, transparent);
}

.lista__ordem {
  padding: 5px 0 5px 18px;
  border-left: 1px solid var(--linha);
}

.lista__ordem select {
  font-family: var(--display);
  color: var(--ink);
}

.lista__corpo {
  padding-block: clamp(30px, 4vw, 62px) 0;
}

.grade-pecas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
}

.grade-pecas--unica {
  grid-template-columns: minmax(280px, 460px);
}

.grade-pecas > .peca {
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  text-decoration: none;
}

.grade-pecas .peca__foto {
  width: 100%;
  min-height: 0;
  box-shadow: 0 1px 0 rgba(19, 20, 18, .05);
}

.grade-pecas .peca__pe {
  padding-top: 16px;
  gap: 8px;
}

.grade-pecas .peca__nome {
  font-family: var(--display);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.22;
}

.grade-pecas .peca__linha,
.grade-pecas .peca__mais {
  font-size: 11px;
  letter-spacing: .18em;
}

@media (max-width: 1200px) {
  .grade-pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lista__cabeca { align-items: start; padding-block: 28px 24px; }
  .lista__cabeca h1 { font-size: clamp(44px, 14vw, 68px); }
  .lista__barra { min-height: 0; }
  .lista__ordem { padding-left: 12px; }
  .grade-pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .grade-pecas--unica { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .grade-pecas .peca__pe { padding-top: 11px; gap: 6px; }
  .grade-pecas .peca__nome { font-size: 14px; }
}

/* ═════════════════════════════════════════════════════════════
   CAMADA DE AJUSTE FINAL — telas baixas

   Fica no FIM do arquivo de proposito. Estava no meio e perdia para
   regras de mesma especificidade escritas depois (a foto da secao de
   Tecnologia continuava com a altura antiga). Como camada final, ela
   sempre vence — e e esse o papel dela.
   ═════════════════════════════════════════════════════════════ */
/* ── TELAS BAIXAS ─────────────────────────────────────────────────
   Os respiros do site sao calculados em `vw` — largura. Num notebook
   1366x768 a largura e generosa mas a ALTURA e curta, e o mesmo
   padding que respira num monitor grande empurra a secao para fora da
   tela: 9vw viram 123px em cima e embaixo, 246px so de folga.

   Aqui o respiro passa a ser medido em `vh` e os titulos encolhem um
   degrau. E uma regra so, em vez de perseguir secao por secao — e
   pega qualquer secao nova que vier depois. */
@media (min-width: 861px) and (max-height: 880px) {
  .secao { padding-block: clamp(34px, 5.5vh, 64px); }
  .secao--curta { padding-block: clamp(28px, 4.5vh, 52px); }
  .cabeca-secao { margin-bottom: clamp(14px, 2.4vh, 28px); }
  .titulo-secao { font-size: clamp(26px, 3vw, 42px); }

  /* Os tres que ainda estouravam, medidos pela altura da janela. */
  .reels__trilho { grid-auto-columns: clamp(180px, 15vw, 240px); padding-bottom: 34px; }
  /* A altura de 210px saiu daqui tambem.

     Esta media query e para tela larga e BAIXA (notebook de 768/900px
     de altura), e existia para a secao caber na dobra. So que ela
     achatava a foto em 210px de altura — o mesmo corte que ja tinha
     sido removido nas outras duas regras, sobrevivendo na terceira.
     Era por isso que a peca continuava aparecendo do peito para baixo
     em quase todo notebook.

     Caber na dobra nao vale foto de roupa cortada: quem esta olhando
     tecido precisa ver a peca inteira, e rolar mais um pouco custa
     nada. A proporcao 3:4 manda em toda tela agora. */
  .vitrine__grade .peca__foto,
  .vitrine__grade .cartaz { aspect-ratio: auto; height: min(42vh, 380px); }
  .vitrine__grade .cartaz img { position: absolute; inset: 0; }
}


/* ---------------------------------------------------------------- cartaz de campanha */
/* A arte ocupa a largura do respiro e fala sozinha: sem véu, sem texto
   por cima, sem paralaxe. Ela já tem manchete e logo dentro — ver a
   nota em templates/home.tpl. */
.cartaz-arte { display: grid; justify-items: center; gap: 26px; }
.cartaz-arte img {
  width: 100%; max-width: 1280px; height: auto; display: block;
  border-radius: var(--raio);
}
.cartaz-arte__pe { margin: 0; }