/* ============================================================
   Sonatta by World
   Papel branco, superfícies chapadas, canto reto. Sem vidro, sem
   desfoque, sem sombra: a hierarquia vem de fio, do cinza #F6F6F6
   atrás das fotos e do espaço em branco. Único acento é o bordô.
   Estrutura e valores amostrados da rimowa.com.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* neutros da marca */
  --grafite:   #212121;
  --carvao:    #2F3338;
  --ardosia:   #4E545C;
  --aco:       #B0B7C0;
  --borda:     #DDE0E4;

  /* base: papel branco e um cinza único para as fotos de produto.
     Amostrado da referência: os tiles de catálogo dela são #F6F6F6. */
  --base:      #FFFFFF;
  --base-2:    #FAFAFA;
  --tile:      #F6F6F6;
  --branco:    #FFFFFF;
  /* superficie de caixa: branca no claro, cinza-chumbo no escuro */
  --papel:     #FFFFFF;

  /* acento único da marca: bordô, fixo no site inteiro. Botão, CTA e
     texto de apoio usam sempre esta cor, sem trocar por seção. */
  --accent:      #8F1E15;
  --accent-esc:  #741710;   /* pressionado */
  --accent-luz:  #A62619;   /* topo do degrade do CTA, para dar brilho */
  --accent-tx:   #8F1E15;   /* acento em texto; no claro e o proprio bordo */

  /* superfícies chapadas: sem vidro, sem desfoque, sem sombra.
     A hierarquia vem de fio, cinza de fundo e espaço em branco. */
  --fio:        #E3E3E3;
  --fio-forte:  #C9C9C9;

  /* texto, amostrado da referência: nome do produto em preto puro,
     corpo em #424242 */
  --tinta:     #000000;
  --tx:        #424242;
  --tx-2:      #6E6E6E;
  /* #8C8C8C dava 3,36:1 no branco e 3,22:1 no --base-2, abaixo do
     minimo AA. Este e o tom mais claro que passa nos dois fundos. */
  --tx-3:      #717171;

  /* tipografia: Poppins em todos os papéis. O que separa display, corpo
     e dado passa a ser peso e espacejamento, não família. */
  --display: 'Poppins', system-ui, sans-serif;
  --corpo:   'Poppins', system-ui, sans-serif;
  --dado:    'Poppins', system-ui, sans-serif;

  /* ritmo */
  --gut:  clamp(20px, 4vw, 40px);
  --sec:  clamp(72px, 10vw, 136px);
  --max:  1280px;
  --r:    0px;   /* canto reto em tudo */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--base);
  color: var(--tx);
  font: 400 clamp(15px, 1.02vw, 16.5px)/1.65 var(--corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

/* As manchas de cor desfocadas do fundo saíram junto com o vidro:
   sem superfície translúcida para filtrá-las, viravam só borrão. */
.ambiente { display: none; }

/* ---------- layout ---------- */
.env { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }
.sec { padding-block: var(--sec); position: relative; }

/* ---------- tipografia ---------- */
.display {
  font-family: var(--display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.04;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.05rem, 4.6vw, 3.9rem); letter-spacing: .1em; }
h2.display { font-size: clamp(1.6rem, 3.1vw, 2.5rem); letter-spacing: .09em; }
h3.display { font-size: clamp(1.05rem, 1.6vw, 1.32rem); letter-spacing: .07em; font-weight: 300; }

.rotulo {
  font-family: var(--dado);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-tx);
  margin-bottom: 1.1rem;
}
.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--tx-2); max-width: 56ch; text-wrap: pretty; }
.dado { font-family: var(--dado); font-size: .8rem; letter-spacing: .04em; }

/* Antes era a superfície de vidro. Virou o tile chapado da referência:
   cinza #F6F6F6, canto reto, sem borda e sem sombra. A classe manteve o
   nome para não quebrar o HTML gerado. */
.vidro {
  background: var(--tile);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- botões ---------- */
/* Canto arredondado em cápsula: é o único elemento redondo do site, e
   por isso mesmo puxa o olho para a ação. O resto segue reto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  border-radius: 100px;
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  font-family: var(--display);
  font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s,
              box-shadow .3s, filter .25s, transform .2s;
}
.btn:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* O CTA sólido ganha brilho por três caminhos somados: um degradê que
   sobe o bordô no topo, um fio de luz interno na borda de cima, e um
   halo externo na própria cor. O halo é discreto de proposito, para
   não virar botão de jogo. */
.btn--forte {
  background: linear-gradient(180deg, var(--accent-luz), var(--accent));
  border-color: var(--accent-luz);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 18px -2px rgba(143, 30, 21, .45),
    0 8px 20px -10px rgba(143, 30, 21, .7);
}
.btn--forte:hover {
  background: linear-gradient(180deg, #B62A1D, var(--accent-luz));
  border-color: #B62A1D;
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 0 26px 0 rgba(166, 38, 26, .6),
    0 12px 26px -10px rgba(143, 30, 21, .8);
}
.btn--forte:active { transform: translateY(0); }

.btn .seta { transition: transform .25s; }
.btn:hover .seta { transform: translateX(4px); }

/* variante para uso sobre foto escura */
.btn--claro { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--claro:hover {
  background: var(--papel); border-color: var(--papel); color: var(--tinta);
  box-shadow: 0 0 22px -4px rgba(255,255,255,.35);
}

/* ---------- topo ----------
   Duas fileiras, como na referência: em cima os utilitários com o logo
   centrado, embaixo o menu centrado. Branco chapado, um fio embaixo,
   nada de sombra. Ao rolar, a fileira de cima recolhe e sobra só o menu. */
/* Sem fundo e sem fio: só o texto. Por isso o topo sai do fluxo e rola
   junto com a página em vez de ficar preso — texto sem tarja passando
   por cima de foto de produto fica ilegível. É o mesmo que a referência
   faz: lá o header também é posicionado e some ao rolar. */
.topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border: 0;
}
.topo__util {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; padding-inline: var(--gut);
}
.topo__lado { display: flex; align-items: center; gap: 1.4rem; font-size: .78rem; color: var(--tx); }
.topo__lado--dir { justify-content: flex-end; }
.topo__lado a { transition: color .2s; }
.topo__lado a:hover { color: var(--accent-tx); }
.marca { display: flex; align-items: center; justify-self: center; }
.marca img { height: 30px; width: auto; }

.topo__in {
  display: flex; align-items: center; justify-content: center;
  height: 60px;
  padding-inline: var(--gut);
}
.menu { display: flex; align-items: center; gap: 2.1rem; }
.menu a {
  position: relative;
  padding: .3rem 0;
  font-size: .82rem; letter-spacing: .125em; text-transform: uppercase;
  color: var(--tinta);
  transition: color .2s;
}
.menu a:hover { color: var(--accent-tx); }
/* o estado atual é um fio embaixo, não um preenchimento */
.menu a[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.1rem;
  height: 1px; background: var(--accent);
}
/* o CTA sai do topo: na referência o topo é só navegação */
.topo .btn { display: none; }

/* Sobre a foto do hero o topo inverte: texto e logo em branco, com uma
   sombra fraca para segurar a leitura nos trechos claros da imagem. */
.marca__claro { display: none; }
body:has(.hero) .marca__escuro { display: none; }
body:has(.hero) .marca__claro  { display: block; }
/* No tema escuro o logo preto sumiria: o fundo da pagina e #0B0C0E.
   Vale para todas as paginas, com hero ou sem. */
[data-tema='escuro'] .marca__escuro { display: none; }
[data-tema='escuro'] .marca__claro  { display: block; }
body:has(.hero) .topo__lado,
body:has(.hero) .topo__lado a,
body:has(.hero) .menu a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(10, 13, 18, .55);
}
body:has(.hero) .topo__lado a:hover,
body:has(.hero) .menu a:hover { color: #fff; opacity: .72; }
body:has(.hero) .menu a[aria-current='page']::after { background: #fff; }
body:has(.hero) .hamb span { background: #fff; }
.hamb { display: none; background: none; border: 0; cursor: pointer; padding: .55rem; }
.hamb span { display: block; width: 20px; height: 1.5px; background: var(--tx); margin: 4.5px 0; transition: transform .3s, opacity .3s; }
.hamb[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamb[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* o topo é absoluto e não ocupa espaço: as páginas sem hero precisam
   reservar a altura dele (72 da fileira de cima + 60 do menu) */
main:not(:has(.hero)) { padding-top: calc(132px + clamp(24px, 4vw, 56px)); }

/* ---------- hero ----------
   Sem caixa atrás do título. O texto assenta direto na foto e a
   legibilidade vem de um véu que cobre a largura toda, de baixo
   para cima, seguindo o próprio degradê do amanhecer. */
.hero { position: relative; min-height: min(92svh, 880px); display: flex; align-items: flex-end; overflow: hidden; }
/* O material é 1920×1080, na orientação em que o cliente entregou: a
   cena é vista de dentro da mala, com a modelo deitada no quadro. Foi
   assim que ele pediu. Em tela larga entra quase inteiro; no celular o
   object-position segura o miolo da abertura do zíper. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* O véu existe para o texto branco ler sobre o vídeo, e só isso.
   Foi remedido quadro a quadro depois que o hero voltou à orientação
   original: como o que aparece agora é o forro escuro da mala, e não a
   abertura clara do zíper, sobrou muito contraste. Os valores caíram de
   .88/.55/.36 para .48/.26/.12, o que deixa o vídeo bem mais visível.
   A base também abriu: fechava em .88, o que virava uma tarja preta
   colada no rodapé do hero e escondia o fim do vídeo. Agora fecha em
   .36 e o filme chega até a borda. Medido: título 7,3:1, lede 13,7:1
   e botão 17,7:1 no pior quadro, contra mínimos de 3 e 4,5.
   Mesmo assim o pior instante dos 9 segundos fica em 17:1 no menu e
   12:1 no título, contra mínimos de 4,5 e 3. */
.hero__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,19,24,.48) 0, rgba(16,19,24,.26) 120px, rgba(16,19,24,.12) 30%, rgba(16,19,24,.28) 62%, rgba(16,19,24,.36) 100%),
    linear-gradient(90deg, rgba(16,19,24,.3), rgba(16,19,24,0) 70%);
}
/* O degradê que emendava o hero na base clara foi removido: o corte
   agora é seco, direto do vídeo para o papel branco. */
/* reserva a altura do topo absoluto (132px) e ainda dá respiro */
.hero__in { position: relative; z-index: 1; padding-bottom: clamp(72px, 10vw, 132px); padding-top: calc(132px + clamp(24px, 5vw, 64px)); }
.hero__texto { max-width: 700px; color: #fff; }
.hero .rotulo { color: rgba(255,255,255,.78); }
.hero h1 { margin-bottom: 1.5rem; text-shadow: 0 2px 30px rgba(10,13,18,.5); }
/* monocromático: a segunda linha se separa por peso e opacidade, não por cor */
.hero h1 em { font-style: normal; display: block; color: rgba(255,255,255,.72); }
.hero .lede { color: rgba(255,255,255,.88); margin-bottom: 2.4rem; text-shadow: 0 1px 16px rgba(10,13,18,.6); font-size: clamp(.95rem, 1.15vw, 1.05rem); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- cabeçalho de seção ---------- */
.cab { max-width: 62ch; margin-bottom: clamp(34px, 4.5vw, 58px); }
.cab h2 { margin-bottom: 1rem; }

/* ---------- grade de linhas ----------
   Foto inteira, sem véu e sem texto por cima. A ficha fica embaixo. */
/* Colunas explícitas, não auto-fit: as regras de órfão abaixo dependem
   de saber quantas colunas existem. */
.linhas { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2vw, 28px); }
@media (min-width: 600px)  { .linhas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .linhas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) {
  .linhas { grid-template-columns: repeat(4, 1fr); }
  /* Sobrando dois na última fileira, cada um ocupa duas colunas e a
     fileira fecha. Vale para 6, 10, 14 itens: sempre os dois últimos. */
  .linhas > :nth-child(4n+1):nth-last-child(2),
  .linhas > :nth-child(4n+2):nth-last-child(1) { grid-column: span 2; }
  /* esticado, o quadrado viraria um bloco altíssimo */
  .linhas > :nth-child(4n+1):nth-last-child(2) .linha__midia,
  .linhas > :nth-child(4n+2):nth-last-child(1) .linha__midia { aspect-ratio: 2.1; }
}
/* Tile chapado: cinza só atrás da foto, ficha em papel branco embaixo,
   sem borda, sem sombra, canto reto. */
.linha {
  display: flex; flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}
/* as capas variam de 1:1 a 4:5; quadrado é o corte que menos decepa a mala */
.linha__midia { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--tile); }
.linha__foto { position: absolute; inset: 0; background-size: cover; background-position: center 56%; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.linha:hover .linha__foto { transform: scale(1.05); }
.linha__topo { position: absolute; top: .9rem; left: .9rem; right: .9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.pilula {
  padding: .3rem .7rem; border-radius: 0;
  background: var(--papel);
  border: 1px solid var(--fio);
  color: var(--tinta);
  font-family: var(--dado); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
}
/* Ficha em texto corrido embaixo do tile, sem caixa: nome em preto,
   apoio em cinza, ambos a 14px, como na referência. */
.linha__ficha { padding: .95rem 0 0; border: 0; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.linha__ficha h3 {
  color: var(--tinta);
  font-family: var(--corpo); font-size: .9rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
}
.linha__ficha p { font-size: .88rem; color: var(--tx); }
.linha__pe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .7rem; }
.linha__ver {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--corpo); font-size: .78rem; letter-spacing: normal; text-transform: none;
  color: var(--accent-tx);
}
.linha:hover .linha__ver .seta { transform: translateX(4px); }
.linha__ver .seta { transition: transform .3s; }

/* ---------- vitrine ----------
   Uma fita de largura total: o ciclorama corre contínuo por trás de todos
   os produtos, que são recortes sem fundo. O que separa um item do outro
   é só o espaço, não um quadro. */
.fita { position: relative; margin-top: clamp(34px, 4.5vw, 58px); }
/* Sem scroll-snap de propósito: com ele o Chrome cancelava o scrollBy
   suave das setas e devolvia a fita para a posição anterior. A rolagem
   livre também é o comportamento da referência. */
.fita__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fita__scroll::-webkit-scrollbar { display: none; }
.fita__linha {
  --palco: clamp(230px, 26vw, 360px);
  --item: clamp(280px, 30vw, 430px);
  display: flex;

  /* Largura explícita, e não `max-content`.

     O Safari do iPhone resolve mal `max-content` num filho flex dentro de
     `overflow-x: auto`: a largura usada colapsa para a do contêiner. Como
     o fundo é pintado na caixa do elemento, ele cobria só a primeira tela
     e todos os itens seguintes ficavam sobre o preto. Era o relato do
     cliente, num iPhone 14 Pro, enquanto no desktop parecia certo.

     Com a conta explícita, a caixa tem a largura real do conteúdo em
     qualquer navegador, e o fundo acompanha. O build informa a contagem
     em `--itens`. */
  width: calc(var(--item) * var(--itens, 6));

  /* Uma cópia esticada na largura toda, em vez de repetição: com
     `repeat-x` qualquer desequilíbrio de luz do ciclorama reaparecia a
     cada tile e virava uma faixa escura atravessando o catálogo. */
  /* Duas camadas: o ciclorama por cima e um tom sólido por baixo, os
     dois limitados à faixa do palco. O tom foi amostrado da média do
     próprio ciclorama e só aparece se a imagem falhar — nunca por cima
     dela. A primeira tentativa pôs essa cor no palco, que é filho, e o
     fundo do filho cobriu o do pai: o catálogo inteiro ficou cinza. */
  background:
    var(--fundo) no-repeat top left / 100% var(--palco),
    linear-gradient(#3B3A3A, #3B3A3A) no-repeat top left / 100% var(--palco);
}
.fita__item {
  flex: 0 0 var(--item);
  min-width: 0;              /* senão o conteúdo largo estica o item */
  display: flex; flex-direction: column;
  padding-inline: clamp(8px, 1vw, 16px);
}
.fita__palco {
  height: var(--palco);
  display: grid; place-items: end center;
  padding-bottom: 7%;
}
/* Altura manda, largura acompanha. Limitar pela largura fazia a mala de
   bordo, que é uma peça só e portanto estreita, aparecer maior que um
   conjunto de três: a peça mais alta de cada foto tem de bater.

   A altura sai de calc sobre a mesma variável do palco, não de uma
   porcentagem: como item de grid alinhado ao fim, o bloco de contenção
   fica indefinido e `height: 82%` caía para 82% do tamanho natural da
   imagem, 902px em vez de 295px. */
.fita__palco img {
  height: calc(var(--palco) * .82); width: auto; max-width: none;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.fita__item--recorte .fita__palco img { height: calc(var(--palco) * .86); }
.fita__item:hover .fita__palco img { transform: translateY(-6px) scale(1.02); }
.fita__ficha { display: flex; flex-direction: column; gap: .3rem; padding: 1.05rem .2rem 0; }
.fita__nome  { color: var(--tinta); font-size: .9rem; }
.fita__apoio { color: var(--tx); font-size: .84rem; }
.fita__ficha .amostras { margin-top: .35rem; }

/* setas: círculo branco discreto, como na referência */
.fita__seta {
  position: absolute; top: calc(clamp(230px, 26vw, 360px) / 2); transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel); border: 1px solid var(--fio); color: var(--tinta);
  cursor: pointer;
  transition: opacity .25s, box-shadow .25s;
  box-shadow: 0 2px 10px rgba(16,22,34,.1);
}
.fita__seta:hover { box-shadow: 0 4px 16px rgba(16,22,34,.18); }
.fita__seta--ant  { left: clamp(10px, 2vw, 26px); }
.fita__seta--prox { right: clamp(10px, 2vw, 26px); }
.fita__seta[disabled] { opacity: 0; pointer-events: none; }

/* amostras de cor */
.amostras { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
/* quadradinhas, como na referência, não bolinhas */
.amostra { width: 13px; height: 13px; border-radius: 0; border: 1px solid var(--fio-forte); box-shadow: none; }
.amostras--btn .amostra { width: 26px; height: 26px; cursor: pointer; transition: transform .2s, box-shadow .2s; border-color: var(--fio-forte); }
.amostras--btn .amostra:hover { transform: scale(1.12); }
.amostras--btn .amostra[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--base-2), 0 0 0 4px currentColor; }

/* ---------- assinatura: as três medidas em escala real ---------- */
.escala { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.escala h2.display { font-size: clamp(1.7rem, 2.7vw, 2.5rem); }
/* --px-cm converte centímetro em pixel. Muda por breakpoint para o
   diagrama caber na tela sem perder a proporção entre P, M e G. */
.escala__palco { --px-cm: 4.05; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 42px); padding: clamp(24px, 3.6vw, 50px); border-radius: 0; min-height: calc(74 * var(--px-cm) * 1px + 130px); }
.mala { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
/* A caixa carrega a verdade da escala: largura e altura vêm dos
   centímetros reais. A foto preenche a caixa, então a silhueta sai na
   proporção correta de cada tamanho. */
.mala__corpo {
  width: calc(var(--cm-l) * var(--px-cm) * 1px);
  height: calc(var(--cm-a) * var(--px-cm) * 1px);
  position: relative;
  transform-origin: bottom center;
  animation: sobe .9s cubic-bezier(.2,.8,.3,1) both;
}
.mala__corpo img { width: 100%; height: 100%; object-fit: fill; display: block; }
/* sombra de contato: o render vem sem fundo e ficaria flutuando */
.mala__corpo::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: -9px; height: 16px;
  background: radial-gradient(ellipse at center, rgba(24,32,48,.34), transparent 70%);
  filter: blur(3px);
  z-index: -1;
}
@keyframes sobe { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
.mala__rot { font-family: var(--dado); font-size: .7rem; letter-spacing: .1em; color: var(--tx-2); text-align: center; }
.mala__rot b { display: block; font-size: 1.05rem; letter-spacing: .14em; color: var(--tx); margin-bottom: .18rem; }
.escala__nota { font-size: .82rem; color: var(--tx-3); margin-top: 1.4rem; }
.escala table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; }
.escala th, .escala td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--fio); font-family: var(--dado); font-size: .8rem; }
.escala th { color: var(--tx-3); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }

/* ---------- vitrine: fotos de produto em fundo branco ----------
   As 50 fotos do catálogo têm fundo branco chapado e várias malas
   são brancas, então nada de mix-blend-mode: multiply apagaria o
   produto. O poço da foto é branco puro e a emenda some sozinha. */
.vitrine {
  background: var(--tile);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

/* ---------- detalhes ---------- */
.detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.detalhe { display: flex; flex-direction: column; }
.detalhe__foto { aspect-ratio: 1; display: grid; place-items: center; padding: 8%; }
.detalhe__foto img { width: 100%; height: 100%; object-fit: contain; }
.detalhe__txt { padding: 1.15rem 1.35rem 1.45rem; border-top: 1px solid var(--fio); }
.detalhe__txt h3 { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .09em; font-size: 1.02rem; color: var(--tinta); margin-bottom: .3rem; }
.detalhe__txt p { font-size: .88rem; color: var(--tx-2); }

/* ---------- página de produto ---------- */
.prod { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
/* O ciclorama vem do build em --fundo. Como as fotos agora sao recortes
   com alfa, o produto precisa de um chao: sem isso ficaria boiando num
   retangulo chapado. Cover porque o palco e quase quadrado e o
   ciclorama e largo. */
.galeria__palco {
  aspect-ratio: 4 / 4.4;
  display: grid; place-items: center;
  padding: 6%;
  background: var(--fundo) center bottom / cover no-repeat;
}
.galeria__palco img { width: 100%; height: 100%; object-fit: contain; }
.galeria__tiras { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tira { width: 74px; height: 74px; border-radius: 11px; padding: 6px; background: var(--papel); border: 2px solid var(--fio); cursor: pointer; transition: border-color .2s, transform .2s; }
.tira img { width: 100%; height: 100%; object-fit: contain; }
.tira:hover { transform: translateY(-2px); }
.tira[aria-pressed='true'] { border-color: var(--accent); }

.ficha > * + * { margin-top: 1.5rem; }
.ficha h1 { margin-bottom: .8rem; }
.bloco { padding: 1.35rem 1.5rem; }
.bloco h4 { font-family: var(--dado); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); font-weight: 400; margin-bottom: .85rem; }
.bloco li { position: relative; padding-left: 1.15rem; font-size: .92rem; color: var(--tx-2); }
.bloco li + li { margin-top: .5rem; }
.bloco li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.especs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: 14px; overflow: hidden; }
.especs div { background: var(--papel); padding: .95rem 1.1rem; }
.especs dt { font-family: var(--dado); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: .3rem; }
.especs dd { margin: 0; font-size: .95rem; }

/* modelos de bordo: mesma regra de órfão da grade de linhas */
.modelos { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2vw, 28px); }
@media (min-width: 600px)  { .modelos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .modelos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) {
  .modelos { grid-template-columns: repeat(4, 1fr); }
  .modelos > :nth-child(4n+1):nth-last-child(2),
  .modelos > :nth-child(4n+2):nth-last-child(1) { grid-column: span 2; }
}
.modelo { display: flex; flex-direction: column; overflow: hidden; }
/* O card recebe o mesmo ciclorama da vitrine, vindo do build em --fundo.
   Antes ficava no tile chapado, o que fazia um item do catalogo aparecer
   com fundo diferente do vizinho. `cover` porque o card e quadrado e o
   ciclorama e largo; `bottom` para o piso da imagem bater com o pe do
   produto, que o normalizar-produtos.py apoia numa linha de base comum. */
.modelo__foto {
  aspect-ratio: 1; padding: 7%;
  display: grid; place-items: center;
  background: var(--fundo) center bottom / cover no-repeat;
}
.modelo__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.modelo:hover .modelo__foto img { transform: scale(1.05); }
.foto-catalogo { background: #17191c !important; overflow: hidden; }
.foto-catalogo img { object-fit: cover !important; }
.modelo__variantes { display: flex; gap: 6px; overflow-x: auto; padding-top: 12px; scrollbar-width: thin; }
.modelo__variantes img { flex: 0 0 54px; width: 54px; height: 68px; object-fit: cover; border-radius: 4px; border: 1px solid var(--borda, #444); }
.modelo__txt { padding: 1.2rem 1.35rem 1.45rem; border-top: 1px solid var(--fio); }
.modelo__txt h3 { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: 1.15rem; color: var(--tinta); }
.modelo__med { font-family: var(--dado); font-size: .74rem; color: var(--tx-2); margin: .4rem 0 .8rem; }

/* ---------- accordion ---------- */
.faq { max-width: 860px; }
.item { border-bottom: 1px solid var(--fio); }
.item__bt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1.03rem; transition: color .2s; }
.item__bt:hover { color: var(--accent-tx); }
.item__ico { flex: none; width: 22px; height: 22px; position: relative; }
.item__ico::before, .item__ico::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; transition: transform .3s; }
.item__ico::after { transform: rotate(90deg); }
.item__bt[aria-expanded='true'] .item__ico::after { transform: rotate(0); }
.item__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.3,.8,.3,1); }
.item__corpo > div { overflow: hidden; }
.item__bt[aria-expanded='true'] + .item__corpo { grid-template-rows: 1fr; }
.item__corpo p { color: var(--tx-2); padding-bottom: 1.5rem; max-width: 68ch; }

/* ---------- formulário ---------- */
.form { display: grid; gap: 1rem; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo { display: grid; gap: .45rem; }
.campo label { font-family: var(--dado); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.campo input, .campo textarea, .campo select { padding: .82rem 1rem; border-radius: 11px; border: 1px solid var(--fio-forte); background: var(--papel); transition: border-color .2s, background .2s; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: var(--accent); background: var(--papel); }
.campo textarea { resize: vertical; min-height: 118px; }
.aceite { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--tx-2); }
.aceite input { margin-top: .28rem; accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- chamada ---------- */
.chamada { padding: clamp(34px, 5vw, 68px); text-align: center; position: relative; overflow: hidden; }
.chamada h2 { margin-bottom: 1.1rem; }
.chamada .lede { margin: 0 auto 2rem; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--fio); padding-block: clamp(48px, 6vw, 80px) 2rem; background: var(--base-2); }
.rodape__grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 4vw, 58px); }
.rodape img.logo { height: 34px; margin-bottom: 1.2rem; }
.rodape p { color: var(--tx-2); font-size: .92rem; max-width: 42ch; }
.rodape h5 { font-family: var(--dado); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); font-weight: 400; margin-bottom: 1rem; }
.rodape li + li { margin-top: .55rem; }
.rodape li a, .rodape address a { color: var(--tx-2); font-size: .92rem; transition: color .2s; }
.rodape li a:hover, .rodape address a:hover { color: var(--tx); }
.rodape address { font-style: normal; }
.rodape address a { display: block; }
.rodape address a + a { margin-top: .55rem; }
.rodape__fim { margin-top: clamp(38px, 5vw, 60px); padding-top: 1.6rem; border-top: 1px solid var(--fio); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--dado); font-size: .7rem; letter-spacing: .06em; color: var(--tx-3); }

/* ---------- botão flutuante ---------- */
.zap { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #1FAF54; color: #fff; box-shadow: 0 12px 30px -8px rgba(31,175,84,.55); transition: transform .25s; }
.zap:hover { transform: scale(1.08); }
.zap svg { width: 27px; height: 27px; }

/* ---------- revelação no scroll ----------
   Só esconde se o JS marcou o html. Sem script, ou se o app.js
   quebrar, o conteúdo aparece em vez de sumir para sempre. */
.js [data-revela] { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.js [data-revela].vis { opacity: 1; transform: none; }
.js .hero [data-entra] { opacity: 0; transform: translateY(22px); animation: entra .95s cubic-bezier(.2,.7,.3,1) forwards; }
.js .hero [data-entra='1'] { animation-delay: .1s }
.js .hero [data-entra='2'] { animation-delay: .22s }
.js .hero [data-entra='3'] { animation-delay: .34s }
.js .hero [data-entra='4'] { animation-delay: .46s }
@keyframes entra { to { opacity: 1; transform: none } }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .prod { grid-template-columns: 1fr; }
  .escala { grid-template-columns: 1fr; }
  .escala__palco { --px-cm: 3.2; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__grade > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* No celular sobra uma fileira só: logo centrado e hambúrguer à
     esquerda. A fileira do menu recolhe e o menu vira painel. */
  .topo__util { height: 58px; }
  .topo__lado { display: none; }
  /* Com os dois lados em display:none a marca deixa de ser o segundo
     item da grade e cai na coluna 1, onde o justify-self a centraliza
     dentro do primeiro terco: 84px a esquerda do centro real. Fixar a
     coluna resolve. */
  .marca { grid-column: 2; }
  .topo__in { height: 0; padding: 0; }
  .hamb { display: block; position: absolute; left: var(--gut); top: 10px; z-index: 2; }
  .marca img { height: 26px; }
  /* topo mais baixo aqui: 58px em vez de 132 */
  main:not(:has(.hero)) { padding-top: calc(58px + clamp(20px, 6vw, 40px)); }

  /* O vídeo ocupa o hero inteiro e o texto entra por cima: sem faixa,
     sem degrau, sem separação.

     O `object-position` puxa o corte para 85% da largura porque a moça
     vive entre 69% e 88% do quadro — medido coluna a coluna, o resto é
     forro escuro. Com o corte centralizado, crescer o vídeo cortava a
     cabeça dela. Puxando para a direita, o enquadramento fecha num
     retrato dela com a mala, e a cabeça fica inteira. */
  .hero { background: #0F1216; }
  /* O quadro tem forro escuro nos 30% de cima: medido, o brilho medio la
     e 18 de 255 antes de qualquer veu. Era isso que lia como tarja preta,
     nao falta de video — ele sempre preencheu o hero. Aqui o elemento
     fica 25% mais alto que o hero e sobe, entao a faixa visivel comeca a
     20% do quadro e o topo escuro fica de fora.

     Cortar na vertical aproxima tambem na horizontal, que e como o cover
     funciona. Testei 20% e 28%: em 28% a mala teal sai do quadro. Em 20%
     ela continua la, e e o produto que importa no hero de uma marca de
     malas. */
  .hero__video {
    top: -25%; height: 125%;
    object-fit: cover; object-position: 85% center;
  }

  /* O véu agora fecha embaixo, que é onde o texto assenta, e alivia no
     alto para o rosto aparecer. */
  .hero__veu {
    background: linear-gradient(180deg,
      rgba(16,19,24,.5) 0, rgba(16,19,24,.14) 20%,
      rgba(16,19,24,.3) 44%, rgba(16,19,24,.52) 74%, rgba(16,19,24,.58) 100%);
  }
  .hero__in { padding-top: calc(58px + clamp(28px, 9vw, 64px)); padding-bottom: clamp(40px, 10vw, 68px); }

  /* O texto espera o vídeo respirar antes de entrar. No desktop a
     sequência começa quase imediata; aqui ela segura alguns segundos,
     porque o pedido é ver o filme primeiro. Quem usa movimento
     reduzido recebe tudo visível de saída, pela regra mais abaixo. */
  .js .hero [data-entra] { opacity: 0; transform: translateY(18px); animation: entra .9s cubic-bezier(.2,.7,.3,1) forwards; }
  .js .hero [data-entra='1'] { animation-delay: 2.4s }
  .js .hero [data-entra='2'] { animation-delay: 2.75s }
  .js .hero [data-entra='3'] { animation-delay: 3.1s }
  .js .hero [data-entra='4'] { animation-delay: 3.45s }

  /* No desktop 11px de caixa alta com tracking largo funciona porque a
     tela esta longe. No celular nao: sobe um pouco. */
  .btn { font-size: .78rem; padding: 1rem 1.7rem; }
  .rotulo { font-size: .76rem; letter-spacing: .18em; }
  /* O painel do menu tem fundo branco próprio, então o texto volta a
     ser escuro mesmo na home: sem isto herdaria o branco do hero e
     sumiria dentro do painel. */
  body:has(.hero) .topo .menu a { color: var(--tinta); text-shadow: none; }
  body:has(.hero) .topo .menu a:hover { color: #8F1E15; opacity: 1; }
  body:has(.hero) .topo .menu a[aria-current='page']::after { background: #8F1E15; }
  /* painel colado embaixo da barra, da largura da tela */
  /* ancora no .topo, que é sticky e portanto bloco de contenção */
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .4rem var(--gut) 1rem;
    background: var(--papel);
    border-bottom: 1px solid var(--fio);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .menu[data-aberto='sim'] { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: .95rem .2rem; font-size: .75rem; letter-spacing: .16em; color: var(--tx-2); }
  .menu a + a { border-top: 1px solid var(--fio); }
  .menu a[aria-current='page']::after { left: .2rem; right: auto; width: 14px; bottom: .55rem; }
  .topo .btn { display: none; }
  .dupla { grid-template-columns: 1fr; }
  .escala__palco { --px-cm: 2.1; gap: 8px; padding: 22px 6px; }
  .mala__rot { font-size: .6rem; letter-spacing: .02em; white-space: nowrap; }
  .mala__rot b { font-size: .95rem; }
  .rodape__grade { grid-template-columns: 1fr; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-revela] { opacity: 1; transform: none; }
  .js .hero [data-entra] { opacity: 1; transform: none; }
}

/* ============================================================
   TEMA ESCURO
   Variante para comparacao lado a lado com a versao clara.
   Gerada com: TEMA=escuro node build.mjs
   Vale registrar o que aparece de verdade quando o fundo fecha:
   as 50 fotos de produto tem fundo branco chapado, entao cada
   uma vira um retangulo aceso no meio do preto. O tile cinza e
   as fotos so somem se as imagens forem recortadas em PNG com
   alfa, o que hoje nao existe no acervo.
   ============================================================ */
[data-tema='escuro'] {
  --base:      #0B0C0E;
  --base-2:    #101215;
  --tile:      #16181C;
  --branco:    #0B0C0E;
  --papel:     #131519;

  /* o bordo quase nao separa do preto: 1,9:1 contra o fundo.
     Clareado para #C2402F, que da 4,6:1 e continua bordo. */
  --accent:      #C2402F;
  --accent-esc:  #A63525;
  /* Texto de acento precisa de outra cor que a do botao. O #C2402F da
     3,79:1 sobre o tile escuro, abaixo do minimo para os rotulos de
     12px. Clarea-lo ate passar derrubaria o branco sobre o botao para
     menos de 4:1. Dois papeis, duas cores. */
  --accent-tx:   #E4705F;

  --fio:        #26292E;
  --fio-forte:  #3A3E45;

  --tinta:     #FFFFFF;
  --tx:        #C7CBD1;
  --tx-2:      #9AA0A8;
  --tx-3:      #7C828A;
}

/* o botao vazado usa --tinta na borda e no texto, que agora e branco:
   no hover o preenchimento branco pede texto escuro de volta */
[data-tema='escuro'] .btn:hover { color: var(--base); }
[data-tema='escuro'] .btn--forte,
[data-tema='escuro'] .btn--forte:hover { color: #fff; }

/* no claro o rodape era um cinza quase branco; no escuro precisa de
   um degrau visivel acima do fundo */
[data-tema='escuro'] .rodape { background: var(--base-2); }

/* O remendo de mix-blend-mode que existia aqui saiu: as fotos de
   produto deixaram de ter fundo branco. Agora sao recortes com alfa,
   feitos pelo image_background_remover sobre as fotos reais, entao
   assentam sozinhas em qualquer fundo. */