/* =========================================================
   COCHILO CHIC — estilos
   Conceito: "a noite da família". A página é uma noite que passa:
   o dia em linho (abertura), o anoitecer em Salvador, o aconchego,
   o sono, e de manhã a loja (catálogo) em linho de novo.
   O símbolo de tudo é a lua crescente da marca.

   Índice
   1. Variáveis (cores, fontes, movimento) — claro e escuro
   2. Base
   3. Tela de carregamento
   4. Topo
   5. Abertura
   6. A noite (travessia pela lua e três capítulos)
   7. Vitrine viva
   8. Catálogo
   9. Segunda travessia e Sobre
   10. Frases e depoimentos
   11. Como comprar e perguntas
   12. Rodapé
   13. Camadas: janela do produto e gaveta
   14. Elementos fixos (grão, cursor, botão de ação, voltar ao topo)
   15. Animações
   16. Efeitos de mouse
   17. Movimento reduzido
   ========================================================= */

/* ---------- 1. VARIÁVEIS ---------- */
:root {
  color-scheme: light;

  /* Cores — tema claro. Para mudar uma cor do site, mude aqui. */
  --fundo: #F7F1EA;          /* linho */
  --superficie: #FFFCF8;
  --foto: #EEE3D8;           /* areia: fundo das fotos */
  --texto: #3B2A24;          /* cacau */
  --texto-2: #6F5C53; /* contraste: 4,85:1 na faixa rosa, 5,6:1 no linho */
  --terracota: #B0603F;      /* a lua da marca */
  --botao: #A85C41;
  --botao-hover: #964F36;
  --botao-texto: #FFF8F2;
  --faixa: #F1DED6;          /* rosa-claro */
  --azul: #DCE6EA;           /* azul-bebê */
  --linha: rgba(59, 42, 36, .16);
  --veu: rgba(59, 42, 36, .5);
  --foco: #A85C41;

  /* A noite: azul-anil que aprofunda o azul-bebê das fotos da loja.
     Estas cores não mudam com o tema, porque a noite é sempre noite. */
  --noite: #141A2B;
  --noite-2: #1F2740;
  --luar: #F2E9DC;           /* texto sobre a noite */
  --luar-2: #BDB6B2;         /* texto secundário sobre a noite */
  --lua: #E39A7C;            /* terracota clara: a lua acesa */
  --linha-noite: rgba(242, 233, 220, .18);

  /* Abertura (tecido claro ao vento) */
  --abertura-texto: #3B2A24;
  --abertura-veu: linear-gradient(100deg, rgba(247, 241, 234, .86) 0%, rgba(247, 241, 234, .55) 38%, rgba(247, 241, 234, 0) 70%);
  --particula: 150, 96, 62;  /* poeira de luz (R, G, B) */
  --selo-fundo: rgba(247, 241, 234, .9);

  /* Fontes */
  --serifa: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Curvas de movimento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* interface */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* movimento na tela */
  --ease-gaveta: cubic-bezier(0.32, 0.72, 0, 1);       /* gaveta */
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);       /* cenas de cinema (mergulho, cortina) */

  /* Medidas */
  --pad: clamp(16px, 4vw, 56px);
  --altura-topo: 64px;
  --espaco-secao: clamp(72px, 10vw, 140px);
  --reserva-acao: 96px;      /* espaço livre embaixo para o botão flutuante não cobrir nada */
}

/* Tema escuro quando o aparelho pede e a pessoa não escolheu o claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #1C1512;
    --superficie: #251C18;
    --foto: #2C221D;
    --texto: #F3E8DE;
    --texto-2: #BFA99B;
    --terracota: #E39A7C;
    --botao: #E39A7C;
    --botao-hover: #EBAA90;
    --botao-texto: #2A1A14;
    --faixa: #2E211C;
    --azul: #2F3C42;
    --linha: rgba(243, 232, 222, .16);
    --veu: rgba(20, 13, 10, .62);
    --foco: #E39A7C;
    --abertura-texto: #F7EFE6;
    --abertura-veu: linear-gradient(100deg, rgba(28, 21, 18, .86) 0%, rgba(28, 21, 18, .62) 40%, rgba(28, 21, 18, .25) 75%);
    --particula: 255, 236, 214;
    --selo-fundo: rgba(28, 21, 18, .86);
  }
}

/* Tema escuro escolhido no botão (mesmos valores do bloco acima) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #1C1512;
  --superficie: #251C18;
  --foto: #2C221D;
  --texto: #F3E8DE;
  --texto-2: #BFA99B;
  --terracota: #E39A7C;
  --botao: #E39A7C;
  --botao-hover: #EBAA90;
  --botao-texto: #2A1A14;
  --faixa: #2E211C;
  --azul: #2F3C42;
  --linha: rgba(243, 232, 222, .16);
  --veu: rgba(20, 13, 10, .62);
  --foco: #E39A7C;
  --abertura-texto: #F7EFE6;
  --abertura-veu: linear-gradient(100deg, rgba(28, 21, 18, .86) 0%, rgba(28, 21, 18, .62) 40%, rgba(28, 21, 18, .25) 75%);
  --particula: 255, 236, 214;
  --selo-fundo: rgba(28, 21, 18, .86);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* sem o "flash" cinza ao tocar */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
html.travado { overflow: hidden; } /* trava a rolagem com janela aberta */

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip; /* o site nunca rola para o lado */
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* Toques: resposta imediata e sem selecionar o texto de botões */
a, button, summary, [role="tab"], label.tam { touch-action: manipulation; }
button, summary, [role="tab"], .aba, .card { -webkit-user-select: none; user-select: none; }

h1, h2, h3 { font-family: var(--serifa); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* Rótulo pequeno em caixa-alta (usado na parte "loja": catálogo, janela, rodapé) */
.rotulo {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--texto-2);
}

/* Texto só para leitores de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco visível em tudo, com contorno duplo para aparecer em fundo claro e escuro */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .55); }
main:focus { outline: none; }

.pular {
  position: fixed; left: 12px; top: -80px; z-index: 600;
  background: var(--superficie); color: var(--texto); padding: 12px 16px;
}
.pular:focus { top: 12px; }

/* Link sublinhado */
.link-sub {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: currentColor;
  transition: text-decoration-color 300ms ease, opacity 300ms ease;
}
.link-sub-escuro { color: var(--texto); }

/* Botão principal */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 0 32px;
  background: var(--botao); color: var(--botao-texto);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  text-align: center;
  transition: transform 160ms var(--ease-out), background-color 250ms ease;
}
.botao:active { transform: scale(.97); }
.botao[disabled] { opacity: .5; cursor: not-allowed; }
.botao[disabled]:active { transform: none; }

/* Alternância de visibilidade por tamanho de tela */
.so-desktop, .item-topo.so-desktop { display: none; }
@media (min-width: 1100px) {
  .so-desktop, .item-topo.so-desktop { display: inline-flex; }
  .so-mobile { display: none !important; }
}

/* Aparecer ao rolar (ligado só quando o JS está ativo) */
.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.js .revelar[data-visivel] { opacity: 1; transform: none; }

/* Nota de conteúdo provisório (visível para a cliente, para nada inventado parecer oficial) */
.nota-temporaria { font-size: 13px; color: var(--texto-2); font-style: italic; }

/* ---------- 3. TELA DE CARREGAMENTO ---------- */
.carregador {
  position: fixed; inset: 0; z-index: 500;
  display: none; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 42%, #1F2740 0%, #141A2B 55%, #0D111D 100%);
  color: var(--luar);
}
html.com-carregador { overflow: hidden; }
.com-carregador .carregador { display: grid; }
.carregador-lua { width: 112px; height: 112px; transform: rotate(-12deg); overflow: visible; }
.lua-contorno { fill: none; stroke: rgba(242, 233, 220, .4); stroke-width: 1.1; }
.lua-cheia { fill: var(--lua); }
.carregador-numero {
  font-family: var(--serifa); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: center;
}
.carregador-marca { font-family: var(--serifa); font-style: italic; font-size: 15px; color: var(--luar-2); }

/* ---------- 4. TOPO ---------- */
.topo {
  --lua: #C4704D;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--abertura-texto);
  background: transparent;
  transition: background-color 450ms ease, color 450ms ease, box-shadow 450ms ease, transform 600ms var(--ease-cinema);
}
.topo.solido {
  --lua: var(--terracota);
  background: var(--fundo);
  color: var(--texto);
  box-shadow: 0 1px 0 var(--linha);
}
/* Some ao descer a página e volta ao subir; entra deslizando depois da tela de carregamento */
.topo.escondido, .com-carregador .topo { transform: translateY(-100%); }

.topo-interno {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  height: var(--altura-topo); padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px));
}
.topo-esq { justify-self: start; }
.topo-dir { justify-self: end; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }

.item-topo {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.item-topo svg { flex: none; max-width: none; }
.botao-icone { justify-content: center; min-width: 44px; }

/* Marca */
.marca { text-align: center; line-height: 1; }
.marca-nome {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--serifa); font-size: clamp(14px, 2.1vw, 22px);
  letter-spacing: .2em; margin-right: -.2em; white-space: nowrap;
}
.lua { width: .85em; height: .85em; color: var(--lua); transition: color 450ms ease; }
.marca-por {
  display: block; margin-top: 5px;
  font-family: var(--serifa); font-style: italic; font-size: 11px; letter-spacing: .04em;
  opacity: .92;
}

/* Menu das linhas: painel no celular, linha no computador */
.botao-menu span { display: inline; }
.menu {
  position: fixed; top: calc(var(--altura-topo) + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 4px var(--pad) 24px;
  background: var(--fundo); color: var(--texto);
  box-shadow: 0 1px 0 var(--linha);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s linear 250ms;
}
.menu.aberto { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu .item-topo {
  font-family: var(--serifa); font-size: 1.5rem; letter-spacing: 0; text-transform: none; font-weight: 400;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.menu .item-topo:last-child { border-bottom: 0; }

@media (max-width: 1099px) {
  .topo.menu-aberto { background: var(--fundo); color: var(--texto); box-shadow: 0 1px 0 var(--linha); --lua: var(--terracota); }
}

@media (min-width: 1100px) {
  :root { --altura-topo: 76px; }
  .botao-menu { display: none; }
  .menu {
    position: static; flex-direction: row; gap: 28px; padding: 0;
    background: none; color: inherit; box-shadow: none;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .menu .item-topo {
    font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
    padding: 0; border: 0;
  }
}

/* Sublinhado que cresce ao passar o mouse (só com mouse) */
.item-topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--ease-out);
}
.botao-menu::after, .botao-icone::after { display: none; }

/* Pedido: no celular só o ícone e o número */
.texto-pedido { display: none; }
@media (max-width: 639px) { .icone-pedido { display: block; } }
@media (min-width: 640px) {
  .icone-pedido { display: none; }
  .texto-pedido { display: inline; }
}

/* ---------- 5. ABERTURA ---------- */
/* Tecido creme ao vento (vídeo) + duas fotos da coleção em camadas + poeira de luz */
.abertura {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr; grid-template-areas: "texto" "fotos"; gap: 28px;
  padding: calc(var(--altura-topo) + env(safe-area-inset-top, 0px) + 28px) var(--pad) var(--reserva-acao);
  color: var(--abertura-texto);
  background: #EDE3D7;
}
.abertura-fundo { position: absolute; inset: 0; z-index: -1; }
/* Altura da tela, não da seção (no celular a abertura passa da tela e o vídeo ficaria ampliado) */
.abertura-fundo video { position: sticky; top: 0; width: 100%; height: 100%; max-height: 100vh; max-height: 100svh; object-fit: cover; background: #EDE3D7; }
.abertura-fundo::after { content: ""; position: absolute; inset: 0; background: var(--abertura-veu); pointer-events: none; }
.poeira { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.abertura-texto { grid-area: texto; position: relative; z-index: 2; display: grid; gap: 18px; align-content: start; max-width: 44rem; }
/* Se o JavaScript não rodar, o texto aparece sozinho depois de um instante */
.js .abertura-texto { opacity: 0; animation: mostrar 1ms linear 2.4s forwards; }
.abertura-rotulo { font-family: var(--serifa); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.abertura h1 {
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 1; letter-spacing: -.025em;
  max-width: 11em;
}
.abertura-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 4px; }
.abertura-frete { font-size: 13px; letter-spacing: .04em; opacity: .9; }

/* Linhas do título reveladas uma a uma (o JS separa as palavras em linhas) */
.titulo-linhas .linha { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.titulo-linhas .linha > span { display: inline-block; }

/* Fotos em camadas */
.abertura-fotos { grid-area: fotos; position: relative; z-index: 1; min-height: 46svh; }
.abertura-foto {
  position: absolute; overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--foto);
  box-shadow: 0 40px 80px -36px rgba(59, 42, 36, .55);
}
#foto-esquerda { width: min(58vw, 340px); right: 4vw; top: 0; }
#foto-direita { width: min(36vw, 210px); left: 2vw; bottom: 4%; }
.abertura-fotos.uma #foto-direita { display: none; }
.foto-zoom { position: absolute; inset: 0; }
.foto-zoom picture { display: contents; }
.foto-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Selo giratório */
/* Selo giratório: preso no canto inferior esquerdo da foto principal */
.selo {
  --largura-foto: min(58vw, 340px);
  position: absolute; z-index: 3;
  right: calc(4vw + var(--largura-foto) - 48px); top: calc(var(--largura-foto) * 4 / 3 - 48px);
  width: 96px; height: 96px; border-radius: 50%;
  color: var(--abertura-texto); background: var(--selo-fundo);
  pointer-events: none;
}
.selo svg { width: 100%; height: 100%; overflow: visible; }
.selo text { font-family: var(--serifa); font-style: italic; font-size: 15.5px; fill: currentColor; letter-spacing: .02em; }
.selo-giro { transform-origin: 100px 100px; animation: girar 28s linear infinite; }
.selo-lua { fill: var(--terracota); }

/* Pé da abertura: indicação de rolagem e o botão de pausar o movimento */
.abertura-pe {
  position: absolute; z-index: 3; left: var(--pad); bottom: 22px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px;
  max-width: calc(100% - var(--pad) - 96px); /* não encosta no botão do WhatsApp */
}
.role {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--serifa); font-style: italic; font-size: 15px;
}
.pausar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--abertura-texto); opacity: .8;
  transition: opacity 200ms ease;
}
.pausar .icone-tocar { display: none; }
.pausado .pausar .icone-pausa { display: none; }
.pausado .pausar .icone-tocar { display: block; }
/* Movimento pausado pela pessoa: tudo o que anda sozinho para */
.pausado .selo-giro, .pausado .role-fio::after,
.pausado .vitrine-item.acesa .peca-midia img, .pausado .vitrine-item.acesa .peca-brilho { animation-play-state: paused; }
.role-fio { position: relative; width: 1px; height: 36px; background: currentColor; opacity: .25; overflow: hidden; }
.role-fio::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: currentColor; animation: fio 2.4s var(--ease-in-out) infinite; }

@media (min-width: 900px) {
  .abertura {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "texto fotos";
    align-items: center;
    padding-bottom: calc(var(--reserva-acao) + 8px);
  }
  .abertura-texto { align-content: center; padding-bottom: 6vh; }
  .abertura { height: 100vh; height: 100svh; min-height: 620px; }
  .abertura-fotos { min-height: 0; height: 100%; align-self: stretch; }
  #foto-esquerda { width: min(27vw, 440px, 52svh); right: 2vw; top: 2%; }
  #foto-direita { width: min(17vw, 280px, 34svh); left: 0; bottom: 4%; }
  .selo {
    --largura-foto: min(27vw, 440px, 52svh);
    width: 128px; height: 128px;
    right: calc(2vw + var(--largura-foto) - 64px); top: calc(2% + var(--largura-foto) * 4 / 3 - 64px);
  }
}

/* ---------- 6. A NOITE ---------- */
/* Sem o modo cinema (sem JS ou com movimento reduzido): capítulos em blocos empilhados */
.noite { position: relative; background: var(--noite); color: var(--luar); }
.noite-palco { display: grid; gap: clamp(48px, 8vw, 96px); padding: var(--espaco-secao) var(--pad); }
.noite-ceu, .lua-sombra, .capitulo-veu, .noite-progresso { display: none; }
.noite-titulo { font-style: italic; text-align: center; font-size: clamp(3.4rem, 13vw, 11rem); line-height: .9; letter-spacing: -.03em; }
.noite-titulo span { display: inline-block; }
.capitulo { display: grid; gap: 20px; max-width: 1200px; margin-inline: auto; width: 100%; }
.capitulo-midia { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noite-2); }
@media (min-width: 768px) { .capitulo-midia { aspect-ratio: 16 / 9; } }
.capitulo-janela, .capitulo-video { position: absolute; inset: 0; }
.capitulo-video video { width: 100%; height: 100%; object-fit: cover; }
.capitulo-texto { display: grid; gap: 12px; max-width: 34rem; }
.capitulo-nome { display: flex; align-items: baseline; gap: 10px; font-family: var(--serifa); font-style: italic; font-size: 1.05rem; color: var(--luar-2); }
.capitulo-num { font-style: normal; font-size: .85rem; color: var(--lua); }
.capitulo h3 { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.02em; }
.capitulo-p { color: var(--luar-2); font-size: 1.05rem; max-width: 30rem; }
.capitulo-link { color: var(--luar); justify-self: start; }

/* Modo cinema: a seção fica presa na tela e a rolagem conduz a cena */
.cinema .noite { height: 620vh; }
.cinema .noite-palco {
  position: sticky; top: 0; display: block; padding: 0;
  height: 100vh; height: 100svh; overflow: hidden;
}
.cinema .noite-ceu { display: block; position: absolute; inset: 0; }
.cinema .noite-ceu video { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.cinema .noite-ceu::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(31, 39, 64, .35) 0%, rgba(20, 26, 43, .78) 60%, rgba(13, 17, 29, .96) 100%);
}
.estrelas {
  position: absolute; inset: 0; opacity: .7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 12%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 84%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 77% 22%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 61%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 92% 9%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 38%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 46%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 47%, #F2E9DC 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 19% 90%, #F2E9DC 50%, transparent 51%);
}
.cinema .noite-titulo {
  position: absolute; inset: 0; z-index: 4; margin: 0;
  display: grid; place-items: center; pointer-events: none;
  color: var(--luar);
}
.cinema .noite-titulo span { will-change: transform, opacity; }

.cinema .capitulo { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
.cinema .capitulo-midia { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.cinema .capitulo-midia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(10, 13, 23, .82) 0%, rgba(10, 13, 23, .35) 38%, rgba(10, 13, 23, 0) 62%);
}
.cinema .capitulo-veu { display: block; position: absolute; inset: 0; z-index: 3; background: #0A0D17; opacity: 0; }
/* O vídeo dentro de cada janela sempre tem o tamanho da tela */
.cinema .capitulo-video { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; height: 100svh; transform: translate(-50%, -50%); }

/* Capítulo 1: a janela é a lua. Um disco (a parte acesa) com uma sombra por cima (a parte escura) */
.cinema .capitulo[data-cap="0"] .capitulo-janela {
  inset: auto; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  border-radius: 50%; overflow: hidden;
  opacity: 0; /* começa invisível: só aparece quando a rolagem chega nela */
  will-change: transform;
}
.cinema .lua-sombra {
  display: block; position: absolute; inset: -1%; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 58% 42%, #1F2740 0%, #141A2B 55%, #0D111D 100%);
  box-shadow: 0 0 0 1px rgba(242, 233, 220, .06) inset;
  will-change: transform;
}
/* Capítulos 2 e 3 começam fechados (recorte zero) e abrem com a rolagem */
.cinema .capitulo[data-cap="1"] .capitulo-janela { clip-path: circle(0% at 50% 50%); }
.cinema .capitulo[data-cap="2"] .capitulo-janela { clip-path: inset(50% 50% 50% 50% round 28px); }

.cinema .capitulo-texto {
  position: absolute; z-index: 5;
  left: max(var(--pad), env(safe-area-inset-left, 0px)); right: var(--pad);
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
}
.titulo-palavras .palavra { display: inline-block; will-change: transform, opacity; }

.cinema .noite-progresso {
  /* longe dos botões fixos (voltar ao topo à esquerda, WhatsApp à direita) */
  position: absolute; z-index: 6; left: calc(var(--pad) + 56px); right: calc(var(--pad) + 72px);
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  font-family: var(--serifa); font-style: italic; font-size: 13px; color: var(--luar-2);
  opacity: 0;
}
.noite-progresso li { display: grid; gap: 8px; }
.noite-barra { display: block; height: 1px; background: var(--linha-noite); overflow: hidden; }
.noite-barra b { display: block; height: 100%; background: var(--lua); transform: scaleX(0); transform-origin: left; }

/* ---------- 7. VITRINE VIVA ---------- */
.vitrine {
  position: relative; isolation: isolate;
  background: var(--noite); color: var(--luar);
  padding: var(--espaco-secao) var(--pad) calc(var(--espaco-secao) + var(--reserva-acao));
}
/* Amanhecer: a noite clareia até o linho do catálogo */
.vitrine::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42vh; z-index: -1;
  background: linear-gradient(to bottom, var(--noite) 0%, #3A3F55 38%, #B9A79C 78%, var(--fundo) 100%);
}
.vitrine-topo { max-width: 1320px; margin: 0 auto clamp(48px, 7vw, 96px); display: grid; gap: 16px; }
.vitrine-topo h2 { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .96; letter-spacing: -.025em; font-style: italic; }
.vitrine-topo p { color: var(--luar-2); max-width: 32rem; font-size: 1.05rem; }
@media (min-width: 900px) {
  .vitrine-topo { grid-template-columns: 1fr 1fr; align-items: end; }
  .vitrine-topo p { justify-self: end; }
}

.vitrine-lista { display: grid; gap: 64px 24px; max-width: 1320px; margin-inline: auto; }
@media (min-width: 700px) { .vitrine-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .vitrine-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 88px 32px; }
  .vitrine-item:nth-child(3n+2) { margin-top: 14vh; }  /* coluna do meio mais baixa: ritmo editorial */
}

.peca { position: relative; display: grid; gap: 20px; }
.peca-midia {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--noite-2); cursor: pointer;
  transform-style: preserve-3d;
}
.peca-midia picture { display: contents; }
.peca-midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.02); }
/* Faixa de luz que atravessa a foto (atmosfera) */
.peca-brilho {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 244, 228, 0) 38%, rgba(255, 244, 228, .22) 50%, rgba(255, 244, 228, 0) 62%);
  transform: translateX(-120%);
}
.peca-selo {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--serifa); font-style: italic; font-size: 14px;
  padding: 4px 10px; background: rgba(20, 26, 43, .72); color: var(--luar);
}
.peca-info { display: grid; gap: 6px; }
.peca-linha { font-family: var(--serifa); font-style: italic; color: var(--luar-2); font-size: 15px; }
.peca-nome { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.08; }
.peca-desc { color: var(--luar-2); font-size: 15px; max-width: 34ch; }
.peca-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.peca-preco { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.peca-botao {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid rgba(242, 233, 220, .45); color: var(--luar);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.peca-botao span { position: relative; z-index: 1; }
.peca-botao:active { transform: scale(.97); }
.ripple {
  position: absolute; z-index: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--lua); pointer-events: none;
}
.vitrine-mais { max-width: 1320px; margin: clamp(56px, 8vw, 112px) auto 0; text-align: center; position: relative; z-index: 1; }
.vitrine-mais .link-sub { color: var(--texto); }

/* Revelação de baixo para cima ao entrar na tela */
.js .vitrine-item .peca-midia { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-cinema); }
.js .vitrine-item .peca-midia img { transform: scale(1.18); transition: transform 1600ms var(--ease-cinema); }
.js .vitrine-item .peca-info { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 200ms; }
.js .vitrine-item[data-visivel] .peca-midia { clip-path: inset(0 0 0 0); }
.js .vitrine-item[data-visivel] .peca-midia img { transform: scale(1.02); }
.js .vitrine-item[data-visivel] .peca-info { opacity: 1; transform: none; }

/* Peça "acesa": no celular, quando passa pelo centro da tela; no computador, com o mouse */
.vitrine-item.acesa .peca-midia img { animation: ken-burns 9s ease-in-out infinite alternate; }
.vitrine-item.acesa .peca-brilho { animation: brilho 2.6s var(--ease-in-out) 1 forwards; }

/* ---------- 8. CATÁLOGO ---------- */
.catalogo { padding: var(--espaco-secao) var(--pad); max-width: 1680px; margin-inline: auto; scroll-margin-top: calc(var(--altura-topo) - 8px); }
.catalogo-topo { text-align: center; display: grid; gap: 10px; margin-bottom: clamp(28px, 5vw, 56px); }

.filtros { display: grid; gap: 4px; margin-bottom: 20px; }
.linha-abas { display: flex; align-items: center; gap: 20px; min-width: 0; }
.rotulo-abas { display: none; }

.abas {
  display: flex; gap: 24px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; position: relative;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  flex: 1;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  position: relative; flex: none; padding: 14px 0; min-height: 44px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--texto-2);
  transition: color 250ms ease;
}
.aba::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--texto); transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--ease-out);
}
.aba[aria-pressed="true"] { color: var(--texto); }
.aba[aria-pressed="true"]::after { transform: scaleX(1); }

.ferramentas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 32px; margin-top: 12px; }
.campo { display: flex; align-items: center; gap: 12px; }
.campo-busca { flex: 1 1 220px; max-width: 420px; }
.campo input, .campo select {
  width: 100%; min-height: 44px;
  background: transparent; color: var(--texto);
  border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
  font: inherit; font-size: 16px; padding: 8px 0; /* 16px: o iPhone não dá zoom no campo */
  transition: border-color 250ms ease;
}
.campo select { width: auto; padding-right: 8px; cursor: pointer; }
.campo select option { background: var(--superficie); color: var(--texto); }
.campo input:focus, .campo select:focus { border-bottom-color: var(--texto); outline: none; }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.campo input::placeholder { color: var(--texto-2); opacity: 1; }

.contagem { margin: 20px 0 20px; }
.estado-grade { padding: 56px 0; text-align: center; color: var(--texto-2); display: grid; gap: 12px; justify-items: center; }

@media (min-width: 768px) {
  .linha-abas { justify-content: center; }
  .rotulo-abas { display: block; min-width: 40px; }
  .abas { overflow: visible; flex-wrap: wrap; margin-inline: 0; padding-inline: 0; flex: 0 1 auto; gap: 8px 32px; }
  .filtros { gap: 0; }
}

/* Grade: 2 colunas no celular, 3 no tablet, 4 no computador */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
@media (min-width: 768px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 20px; } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; } }

/* Peças surgem de baixo para cima, em cascata */
.js .card-item .card-foto { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-cinema); }
.js .card-item .card-info { opacity: 0; transform: translateY(10px); transition: opacity 800ms var(--ease-out) 160ms, transform 800ms var(--ease-out) 160ms; }
.js .card-item[data-visivel] .card-foto { clip-path: inset(0 0 0 0); }
.js .card-item[data-visivel] .card-info { opacity: 1; transform: none; }

.card { display: block; width: 100%; text-align: left; }
.card-foto { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--foto); overflow: hidden; }
.card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 800ms var(--ease-out); }
.card-foto.esgotada { opacity: .6; }
.card-info { display: grid; gap: 3px; padding-top: 14px; }
.card-nome { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; line-height: 1.4; }
.card-preco { font-size: 14px; }

.selo-card {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--azul); color: var(--texto);
  padding: 5px 9px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}

/* Prévia borrada enquanto a foto carrega */
.com-previa { background-size: cover; background-position: 50% 30%; }

/* Ilustração da peça no cabide (quando não há foto) */
.ilustracao { position: absolute; inset: 0; display: block; color: var(--texto-2); }
.ilustracao svg { width: 100%; height: 100%; transform-origin: 50% 8%; }

/* ---------- 9. SEGUNDA TRAVESSIA E SOBRE ---------- */
.travessia { position: relative; background: var(--fundo); }
.travessia-palco { padding: var(--espaco-secao) var(--pad) 32px; text-align: center; }
.travessia-janela { display: none; }
.travessia-titulo { font-size: clamp(2.6rem, 8vw, 7.2rem); line-height: .95; letter-spacing: -.03em; }
.metade { display: inline-block; }
.metade-b { font-style: italic; }

.cinema .travessia { height: 280vh; }
.cinema .travessia-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0; display: grid; place-items: center; background: var(--fundo); isolation: isolate; }
.cinema .travessia-janela {
  display: block; position: absolute; inset: 0;
  clip-path: inset(38% 41% 38% 41% round 18px);
  will-change: clip-path;
}
.travessia-midia { position: absolute; inset: 0; will-change: transform; }
.travessia-midia video { width: 100%; height: 100%; object-fit: cover; }
/* Título em "diferença": escuro sobre o linho e claro sobre o vídeo, sem perder a leitura */
.cinema .travessia-titulo { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; padding-inline: var(--pad); color: #fff; mix-blend-mode: difference; }
.cinema .metade { will-change: transform, opacity; }

.sobre { position: relative; isolation: isolate; color: #F7EFE6; padding: var(--espaco-secao) var(--pad); }
.sobre-fundo { position: absolute; inset: 0; z-index: -1; background: #3B2A24; }
/* O vídeo tem a altura da tela (e acompanha a rolagem), não a da seção: numa seção alta ele ficaria muito ampliado */
.sobre-fundo video { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; object-fit: cover; }
.sobre-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28, 21, 18, .72), rgba(28, 21, 18, .58) 50%, rgba(28, 21, 18, .8)); }
.sobre-miolo { max-width: 1240px; margin-inline: auto; display: grid; gap: clamp(48px, 7vw, 88px); }
.sobre-texto { display: grid; gap: 1.1em; }
.sobre-texto p { font-family: var(--serifa); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.5; max-width: 34ch; }
.sobre-fotos { position: relative; height: clamp(440px, 62vw, 700px); }
.sobre-foto { position: absolute; overflow: hidden; aspect-ratio: 3 / 4; background: #2C221D; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); will-change: transform; }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sobre-foto:nth-child(1) { width: 52%; left: 0; top: 4%; }
.sobre-foto:nth-child(2) { width: 42%; right: 0; top: 0; }
.sobre-foto:nth-child(3) { width: 38%; left: 34%; bottom: 0; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid rgba(247, 239, 230, .24); padding-top: 28px; }
.numero dt { font-family: var(--serifa); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; color: #F2C8B4; }
.numero dd { font-size: 14px; color: rgba(247, 239, 230, .78); margin-top: 8px; max-width: 18ch; }
@media (min-width: 960px) {
  .sobre-miolo { grid-template-columns: 1fr 1fr; grid-template-areas: "texto fotos" "numeros fotos"; align-items: start; }
  .sobre-texto { grid-area: texto; padding-top: 4vh; }
  .sobre-fotos { grid-area: fotos; }
  .numeros { grid-area: numeros; align-self: end; }
}

/* ---------- 10. FRASES E DEPOIMENTOS ---------- */
.depoimentos { background: var(--faixa); padding-bottom: var(--espaco-secao); overflow: hidden; }
.faixa-frases { padding-block: clamp(40px, 6vw, 84px); border-bottom: 1px solid var(--linha); overflow: hidden; }
.faixa-trilho {
  display: flex; width: max-content; align-items: center; gap: .55em;
  font-family: var(--serifa); font-style: italic; font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: 1.1;
  white-space: nowrap; color: var(--texto);
}
.faixa-lua { width: .42em; height: .42em; color: var(--terracota); flex: none; transform: rotate(-12deg); }
/* Sem animação (movimento reduzido ou sem JS), as frases quebram linha normalmente */
.faixa-trilho.parada { width: auto; flex-wrap: wrap; white-space: normal; padding-inline: var(--pad); justify-content: center; font-size: clamp(1.8rem, 4vw, 3rem); }

.depo-miolo { max-width: 920px; margin: clamp(56px, 7vw, 96px) auto 0; padding-inline: var(--pad); text-align: center; display: grid; gap: 28px; justify-items: center; }
.depo-miolo h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.depo-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.depo-aba {
  position: relative; min-height: 44px; padding: 10px 0;
  font-family: var(--serifa); font-style: italic; font-size: 1.05rem; color: var(--texto-2);
  transition: color 250ms ease;
}
.depo-aba::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--terracota); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
.depo-aba[aria-selected="true"] { color: var(--texto); }
.depo-aba[aria-selected="true"]::after { transform: scaleX(1); }
.depo-painel blockquote { font-family: var(--serifa); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.32; max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.depo-painel figcaption { margin-top: 18px; color: var(--texto-2); font-size: 14px; }
.depo-painel:not([hidden]) { animation: aparecer 500ms var(--ease-out); }

/* ---------- 11. COMO COMPRAR E PERGUNTAS ---------- */
.como-comprar { background: var(--fundo); padding: var(--espaco-secao) var(--pad); }
.como-miolo { max-width: 1120px; margin-inline: auto; text-align: center; display: grid; gap: 10px; }
.passos { display: grid; gap: 40px; margin-top: clamp(32px, 5vw, 56px); text-align: left; }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.passo { border-top: 1px solid var(--linha); padding-top: 24px; display: grid; gap: 10px; align-content: start; }
.passo-num { font-family: var(--serifa); font-size: 3.2rem; line-height: 1; color: var(--terracota); margin-bottom: 8px; }
.passo h3 { font-size: 1.5rem; }
.passo p { color: var(--texto-2); max-width: 32ch; }

.perguntas { max-width: 880px; margin: clamp(80px, 10vw, 140px) auto 0; }
.perguntas-titulo { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 16px 0;
  font-family: var(--serifa); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.25;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta-sinal { position: relative; flex: none; width: 16px; height: 16px; transition: transform 240ms var(--ease-out); }
.pergunta-sinal::before, .pergunta-sinal::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.pergunta-sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta-sinal { transform: rotate(45deg); }
.resposta { overflow: hidden; }
.resposta p { color: var(--texto-2); padding: 0 40px 24px 0; max-width: 60ch; }
.resposta .nota-temporaria { display: block; margin-top: 6px; }

/* ---------- 12. RODAPÉ ---------- */
.rodape {
  background: var(--noite); color: var(--luar);
  padding: clamp(56px, 8vw, 96px) var(--pad) calc(28px + var(--reserva-acao) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.rodape .rotulo { color: var(--luar-2); margin-bottom: 8px; }
.rodape-colunas { display: grid; gap: 32px; max-width: 1120px; }
@media (min-width: 768px) { .rodape-colunas { grid-template-columns: repeat(3, 1fr); } }
.rodape a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.rodape :focus-visible { outline-color: var(--luar); }
.atendimento { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--luar-2); margin-top: 2px; }
.atendimento-ponto { width: 8px; height: 8px; border-radius: 50%; background: #8A8F9E; flex: none; }
.atendimento.aberto .atendimento-ponto { background: #8FC7A4; box-shadow: 0 0 0 4px rgba(143, 199, 164, .18); }
.rodape-nome {
  font-family: var(--serifa); letter-spacing: .04em; line-height: 1; white-space: nowrap;
  font-size: min(9vw, 10rem); margin: clamp(48px, 8vw, 96px) 0 28px;
}
.js .rodape-nome { transform: translateY(40%); opacity: 0; transition: transform 1400ms var(--ease-cinema), opacity 1000ms var(--ease-out); }
.js .rodape-nome[data-visivel] { transform: none; opacity: 1; }
.rodape-fim { display: grid; gap: 6px; font-size: 12px; letter-spacing: .04em; color: var(--luar-2); }
@media (min-width: 768px) { .rodape-fim { grid-auto-flow: column; justify-content: space-between; } }

/* ---------- 13. CAMADAS (janela do produto e gaveta) ---------- */
.camada {
  position: fixed; inset: 0; z-index: 100;
  visibility: hidden;
  transition: visibility 0s linear 450ms;
}
.camada[data-aberto] { visibility: visible; transition-delay: 0s; }
.fundo-camada { position: absolute; inset: 0; background: var(--veu); opacity: 0; transition: opacity 450ms var(--ease-out); }
.camada[data-aberto] .fundo-camada { opacity: 1; }
.painel:focus { outline: none; }

.fechar, .fechar-simples { display: grid; place-items: center; width: 44px; height: 44px; }
.fechar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 5; background: var(--superficie); color: var(--texto); }

.janela {
  position: fixed; inset: 0;
  background: var(--superficie); color: var(--texto);
  opacity: 0; transform: translateY(24px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.camada[data-aberto] .janela { opacity: 1; transform: none; }
.janela-conteudo { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.janela-foto { position: relative; aspect-ratio: 3 / 4; background: var(--foto); }
.janela-foto picture { display: contents; }
.janela-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.janela-info { padding: 28px var(--pad) calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; align-content: start; }
.janela-info h2 { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.5rem, 3vw, 2rem); }
.produto-preco { font-size: 1.15rem; }
.produto-descricao { color: var(--texto-2); max-width: 52ch; }
.produto-tecido { display: flex; gap: 14px; align-items: baseline; font-size: 15px; padding-block: 12px; border-block: 1px solid var(--linha); margin-bottom: 8px; }

.tamanhos { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.tamanhos legend { padding: 0; margin-bottom: 10px; }
.tamanhos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-kit, .nota-tam { font-size: 14px; padding: 10px 14px; background: var(--azul); color: var(--texto); margin-bottom: 14px; }
.tam { position: relative; display: block; }
.tam input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tam span {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px;
  border: 1px solid var(--linha); font-size: 14px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tam input:checked + span { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.tam input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 3px; }
.tam input:disabled { cursor: not-allowed; }
.tam input:disabled + span { text-decoration: line-through; color: var(--texto-2); opacity: .5; }

.bloco-qtd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); }
.qtd button { width: 44px; height: 44px; font-size: 18px; transition: background-color 160ms ease; }
.qtd output { min-width: 40px; text-align: center; font-size: 15px; }
.erro { min-height: 1.5em; margin-bottom: 8px; font-size: 14px; color: #A0472B; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .erro { color: #F0A98D; } }
:root[data-tema="escuro"] .erro { color: #F0A98D; }

@media (min-width: 900px) {
  .janela {
    inset: 0; margin: auto;
    width: min(1080px, calc(100% - 48px)); height: min(740px, calc(100% - 48px));
  }
  .janela-conteudo { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .janela-foto { aspect-ratio: auto; height: 100%; }
  .janela-info { overflow-y: auto; padding: 56px 48px 40px; overscroll-behavior: contain; }
  .fechar { top: 16px; right: 16px; }
}

.gaveta {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--superficie); color: var(--texto);
  transform: translateX(100%);
  transition: transform 500ms var(--ease-gaveta);
}
.camada[data-aberto] .gaveta { transform: none; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 24px; border-bottom: 1px solid var(--linha); }
.gaveta-topo h2 { font-size: 1.6rem; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.gaveta-rodape { padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); display: grid; gap: 14px; }
.total { display: flex; align-items: baseline; justify-content: space-between; }
.total strong { font-family: var(--serifa); font-weight: 400; font-size: 1.6rem; }
.nota { font-size: 13px; color: var(--texto-2); text-align: center; }
.pedido-vazio { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 64px 0; color: var(--texto-2); }
.gaveta-corpo .aviso-kit { margin: 16px 0 0; }

.item-pedido { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.mini { position: relative; aspect-ratio: 3 / 4; background: var(--foto); overflow: hidden; }
.mini picture { display: contents; }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-info { display: grid; gap: 2px; align-content: start; min-width: 0; }
.item-nome { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; line-height: 1.4; }
.item-tam { font-size: 14px; color: var(--texto-2); }
.item-preco { font-size: 14px; }
.item-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.qtd-pequena button { width: 40px; height: 40px; }
.qtd-pequena output { min-width: 32px; }
.remover { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; color: var(--texto-2); min-height: 44px; padding-inline: 4px; }

/* ---------- 14. ELEMENTOS FIXOS ---------- */
/* Grão de filme sutil sobre o site inteiro */
.grao {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background-image: url("../imagens/grao.png"); background-size: 160px 160px;
  opacity: .05;
}

/* Cursor: um ponto que cresce sobre as peças (só com mouse) */
.cursor { display: none; }

/* Botão de ação: WhatsApp, ou o resumo do pedido quando há peças escolhidas */
.acao {
  position: fixed; z-index: 70;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.com-carregador .acao, .com-carregador .voltar-topo, html.travado .acao, html.travado .voltar-topo { opacity: 0; pointer-events: none; }
.acao-whats {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--botao); color: var(--botao-texto);
  box-shadow: 0 18px 36px -16px rgba(59, 42, 36, .6);
  transition: transform 160ms var(--ease-out), background-color 250ms ease;
}
.acao-whats:active { transform: scale(.95); }
.acao.com-pedido .acao-whats { display: none; }
.barra-pedido {
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: var(--noite); color: var(--luar);
  border: 1px solid rgba(242, 233, 220, .14);
  box-shadow: 0 18px 40px -18px rgba(10, 13, 23, .8);
}
.barra-resumo { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.barra-resumo strong { font-weight: 500; }
.barra-enviar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--lua); color: #2A1A14;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; white-space: nowrap;
  transition: transform 160ms var(--ease-out);
}
.barra-enviar:active { transform: scale(.97); }
.barra-pedido:not([hidden]) { animation: subir 400ms var(--ease-out); }
@media (max-width: 559px) {
  .acao.com-pedido { left: max(16px, env(safe-area-inset-left, 0px)); }
  .acao.com-pedido .barra-pedido { width: 100%; justify-content: space-between; }
}

.voltar-topo {
  position: fixed; z-index: 69;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.voltar-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 559px) { .com-pedido ~ .voltar-topo { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- 15. ANIMAÇÕES ---------- */
@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes mostrar { to { opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes fio {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@keyframes ken-burns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.5%, -2%); }
}
@keyframes brilho { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes balancar {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(2.6deg); }
  55%  { transform: rotate(-1.8deg); }
  80%  { transform: rotate(.7deg); }
  100% { transform: rotate(0); }
}

/* ---------- 16. EFEITOS DE MOUSE (só em aparelhos com mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  .item-topo:hover::after { transform: scaleX(1); }
  .botao:hover { background: var(--botao-hover); }
  .link-sub:hover { text-decoration-color: transparent; }
  .aba:hover, .depo-aba:hover { color: var(--texto); }
  .card:hover .card-foto img { transform: scale(1.04); }
  .card:hover .ilustracao svg { animation: balancar 1.8s var(--ease-in-out); }
  .tam input:not(:disabled):not(:checked):hover + span { border-color: var(--texto); }
  .qtd button:hover { background: var(--foto); }
  .remover:hover { color: var(--texto); }
  .peca-botao:hover { border-color: var(--lua); }
  .acao-whats:hover { background: var(--botao-hover); }
  .pausar:hover { opacity: 1; }
  .voltar-topo:hover { border-color: var(--texto); }

  .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none;
    width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
    background: var(--lua); color: #2A1A14;
    opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.12);
    will-change: transform;
  }
  .cursor.ativo { opacity: 1; transition: opacity 200ms ease; }
  html.travado .cursor, html.com-carregador .cursor { opacity: 0; } /* janela aberta: só o cursor normal */
  .cursor-rotulo { font-family: var(--serifa); font-style: italic; font-size: 15px; opacity: 0; transition: opacity 200ms ease; }
  .cursor.grande .cursor-rotulo { opacity: 1; }
}

/* ---------- 17. MOVIMENTO REDUZIDO ---------- */
/* Menos movimento: nada de cenas presas, paralaxe, cursor ou faixa andando.
   O site continua completo, com fotos e posters no lugar dos vídeos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .abertura-texto { opacity: 1; animation: none; }
  .js .revelar, .js .card-item .card-foto, .js .card-item .card-info,
  .js .vitrine-item .peca-midia, .js .vitrine-item .peca-midia img, .js .vitrine-item .peca-info,
  .js .rodape-nome { opacity: 1; transform: none; clip-path: none; transition: none; }
  .card-foto img { transition: none; }
  .card:hover .card-foto img { transform: none; }
  .card:hover .ilustracao svg { animation: none; }
  .selo-giro, .role-fio::after, .vitrine-item.acesa .peca-midia img, .vitrine-item.acesa .peca-brilho { animation: none; }
  .pausar { display: none; } /* nada se move sozinho: o botão não é necessário */
  .aba::after, .item-topo::after, .depo-aba::after { transition: none; }
  .depo-painel:not([hidden]) { animation: none; }
  .cursor { display: none !important; }
  /* Janela e gaveta só aparecem com um fade curto, sem deslizar */
  .janela, .gaveta { transform: none !important; }
  .fundo-camada, .janela, .gaveta, .camada, .menu, .topo { transition-duration: 150ms; transition-delay: 0s; }
  .camada { transition-delay: 150ms; }
  .camada[data-aberto] { transition-delay: 0s; }
  .gaveta { opacity: 0; }
  .camada[data-aberto] .gaveta { opacity: 1; }
  .menu { transform: none; }
}

/* ---------- Acessibilidade e celular (revisão de 14/10/2026) ---------- */
/* A barra fixa do pedido nunca cobre o item que recebe foco */
html { scroll-padding-bottom: calc(var(--reserva-acao) + env(safe-area-inset-bottom, 0px)); }

/* "Ver todas as peças": fica sobre a parte escura do amanhecer, com texto claro (contraste 14:1) */
.vitrine::after { height: calc(var(--espaco-secao) + var(--reserva-acao)); }
.vitrine-mais .link-sub { color: var(--luar); }

/* Texto dos capítulos sobre o vídeo: véu só embaixo, atrás do texto (o vídeo fica claro e visível);
   a sombra suave no texto garante a leitura sobre as partes claras do vídeo */
.cinema .capitulo-midia::after {
  background: linear-gradient(to top, rgba(10, 13, 23, .78) 0%, rgba(10, 13, 23, .42) 28%, rgba(10, 13, 23, 0) 52%);
}
.cinema .capitulo-texto { text-shadow: 0 1px 2px rgba(10, 13, 23, .55), 0 0 18px rgba(10, 13, 23, .45); }
.capitulo-nome { color: var(--luar); }

/* Abertura no celular: o véu clareia de cima para baixo, atrás do texto */
.abertura-frete { opacity: 1; }
@media (max-width: 899px) {
  :root { --abertura-veu: linear-gradient(to bottom, rgba(247, 241, 234, .86), rgba(247, 241, 234, .7) 46%, rgba(247, 241, 234, 0) 62%); }
  :root[data-tema="escuro"] { --abertura-veu: linear-gradient(to bottom, rgba(28, 21, 18, .86), rgba(28, 21, 18, .7) 46%, rgba(28, 21, 18, 0) 62%); }
}
@media (max-width: 899px) and (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --abertura-veu: linear-gradient(to bottom, rgba(28, 21, 18, .86), rgba(28, 21, 18, .7) 46%, rgba(28, 21, 18, 0) 62%); }
}

/* Bordas de campo e de botões de tamanho visíveis (contraste mínimo 3:1) */
.campo input, .campo select { border-bottom-color: var(--texto-2); }
.tam span, .qtd { border-color: var(--texto-2); }

/* Tamanho esgotado: riscado e tracejado, mas ainda legível para quem enxerga pouco */
.tam input:disabled + span { opacity: 1; color: var(--texto-2); text-decoration: line-through; border-style: dashed; }

/* Alvos de toque de no mínimo 44 px */
.qtd-pequena button { width: 44px; height: 44px; }
.aba { min-width: 44px; }
.abas { padding-block: 6px; } /* o contorno de foco não fica cortado nas abas que rolam */

/* Menu do celular com texto ampliado: rola em vez de sair da tela */
@media (max-width: 1099px) {
  .menu { max-height: calc(100svh - var(--altura-topo) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
}

/* Abertura: a capa do vídeo já aparece antes do JavaScript (primeira imagem mais rápida) */
.abertura-fundo { background: #EDE3D7 url("../videos/abertura-1600.webp") center / cover no-repeat; }
@media (orientation: portrait) { .abertura-fundo { background-image: url("../videos/abertura-720.webp"); } }

/* Catálogo: reserva espaço enquanto as peças carregam (a página não "pula") */
.grade:empty, #vitrine-lista:empty { min-height: 60vh; }

@media (prefers-reduced-motion: reduce) {
  .barra-pedido:not([hidden]) { animation: none; }
}

/* Aviso visível nas cenas com pessoas de banco de imagens (licença do Pexels: não sugerir que usam as peças) */
.capitulo-credito { display: none; }
.cinema .capitulo-credito {
  display: block; position: absolute; z-index: 2; margin: 0;
  top: calc(var(--altura-topo) + env(safe-area-inset-top, 0px) + 10px); right: var(--pad);
  font-size: 11px; letter-spacing: .06em; color: var(--luar); opacity: .78; pointer-events: none;
}

/* Subtítulo do catálogo (texto fixo: aparece também para quem lê a página sem JavaScript) */
.catalogo-sub { max-width: 46ch; margin: 0 auto; color: var(--texto-2); font-size: 15px; }

/* Ajuste final (14/10/2026): sem filtros escurecendo os vídeos do anoitecer e dos capítulos.
   A leitura do texto fica garantida pela sombra nas letras. */
.cinema .noite-ceu video { opacity: 1; }
.cinema .noite-ceu::after { background: none; }
.cinema .capitulo-midia::after { background: none; }
.cinema .capitulo-veu { display: none; }
.cinema .capitulo-texto { text-shadow: 0 1px 3px rgba(10, 13, 23, .8), 0 0 22px rgba(10, 13, 23, .6); }

/* "Para esta noite" no celular: a versão itálica da fonte tem traços muito finos (o "T" fica difícil de ler).
   Em telas pequenas o título usa a versão em pé, um pouco mais encorpada. */
@media (max-width: 767px) {
  .vitrine-topo h2 { font-style: normal; font-weight: 500; letter-spacing: -.01em; line-height: 1.02; }
}

/* "Para esta noite" no celular: a fonte Bodoni tem traços finos demais nessa tela (o "t" quase some),
   então o título usa a fonte do texto (Jost), de traço firme. No computador continua em Bodoni. */
@media (max-width: 767px) {
  .vitrine-topo h2 { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(2.3rem, 11vw, 3.2rem); letter-spacing: -.02em; line-height: 1.05; }
}