/* ─────────────────────────────────────────────
   Lux Móveis — sistema visual
   Gramática aplicada (ver caplab-efeitos-e-direcao-criativa.md, Parte 2):
   R1 palco neutro domina · R2 acento só em ação · R3 acento marca o ponto,
   não a superfície · R4 fundo rebaixado, branco puro = elevação ·
   R6 hierarquia por escala/peso, nunca por cor · R7 inversão é pontuação ·
   R9 superfícies chapadas · R10 um traço formal (raio) em tudo
   ───────────────────────────────────────────── */

:root{
  /* Paleta derivada da LOGO da Lux (verde #0FA754, amostrado do arquivo da marca).
     O acento é a cor da marca — não uma escolha estética minha. */
  --bg:        #f3f4f2;   /* palco: off-white levemente frio, para o verde não puxar amarelo */
  --surface:   #ffffff;   /* elevação reservada */
  --ink:       #14170f;
  --ink-soft:  #667062;
  --line:      #e0e4dd;
  --accent:    #0fa754;   /* verde da marca. só ação, nunca decoração */
  --accent-dk: #0b7f3f;   /* mesmo verde, para hover/estados */
  --dark:      #10140f;   /* pontuação, uma vez (a cena) */
  --r:         18px;      /* o traço formal, em tudo */
  --pad:       clamp(20px, 5vw, 80px);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.04}
h1{font-size:clamp(34px,6.4vw,86px)}
h2{font-size:clamp(28px,4.6vw,62px)}
h3{font-size:clamp(26px,4vw,54px)}

.eyebrow{
  margin:0 0 14px; font-size:13px; letter-spacing:.02em;
  color:var(--ink-soft); font-weight:500;
}

/* ── botões: acento no ponto de ação, não na superfície (R3) ── */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 22px 7px 7px; text-decoration:none;
  font-size:15px; font-weight:500; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.btn__dot{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:15px; flex:none;
}
.btn:hover{transform:translateY(-2px); border-color:var(--accent)}
.btn:hover .btn__dot{background:var(--accent-dk)}
.btn--lg{font-size:17px; padding:9px 28px 9px 9px}
.btn--lg .btn__dot{width:42px; height:42px}

/* ── topbar ── */
.topbar{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--pad);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.topbar.is-stuck{border-bottom-color:var(--line)}
.topbar__logo{display:flex; align-items:center; text-decoration:none}
.topbar__logo img{height:30px; width:auto}
.topbar__nav{display:flex; gap:26px; font-size:15px}
.topbar__nav a{text-decoration:none; color:var(--ink-soft); transition:color .2s}
.topbar__nav a:hover{color:var(--ink)}

/* ═══ 1. HERO + carrossel cilíndrico ═══ */
.hero{padding:150px 0 0; text-align:center; overflow:hidden}
.hero__head{padding:0 var(--pad); max-width:1100px; margin:0 auto}
.hero__sub{
  max-width:560px; margin:22px auto 0;
  color:var(--ink-soft); font-size:clamp(15px,1.6vw,19px)
}

/* perspective curta = lente grande-angular: é ela que faz as pontas
   avançarem sobre o observador em vez de só inclinarem. */
.cylinder{margin-top:clamp(40px,6vw,80px); perspective:720px; overflow:hidden}
.cylinder__stage{
  position:relative; height:clamp(400px,44vw,600px);
  transform-style:preserve-3d;
}
.cylinder__arms{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  display:flex; gap:clamp(12px,1.6vw,28px); width:max-content;
  transform-style:preserve-3d; will-change:transform;
}
.cyl-card{
  flex:none;
  /* pequeno no centro de propósito: o tamanho que se vê nas pontas é
     ganho pela profundidade, não pela largura do card. */
  width:clamp(118px,9.6vw,178px); aspect-ratio:3/5;
  /* sem backface-visibility: o card vira para dentro da curva e sumiria */
  border-radius:var(--r); overflow:hidden; background:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,.13);
  transform-origin:center center; will-change:transform;
}
.cyl-card img{width:100%; height:100%; object-fit:cover}

/* faixa de selos/categorias em marquee, sentido oposto ao cilindro */
.trust{margin-top:clamp(36px,5vw,64px); padding-bottom:clamp(40px,6vw,90px)}
.trust__label{margin:0 0 18px; font-size:13px; color:var(--ink-soft)}
.trust__marquee{overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.trust__track{display:flex; gap:52px; width:max-content; will-change:transform}
.trust__track span{
  font-size:14px; letter-spacing:.03em; color:var(--ink-soft);
  text-transform:uppercase; white-space:nowrap
}

/* ═══ 2. CENA 3D com zoom scrub ═══ */
/* Inversão mora AQUI (R7): é o clímax do site — e resolve um problema real,
   porque as fotos do catálogo são packshots de fundo branco. Sobre um palco
   claro elas somem; sobre escuro, o card branco vira moldura e o produto salta. */
.scene{height:420vh; position:relative}
.scene__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center;
  background:var(--dark); color:#fff;
}
.scene__field{position:absolute; inset:0}
.scene-thumb{
  position:absolute; border-radius:var(--r); overflow:hidden;
  width:clamp(90px,11vw,170px); aspect-ratio:1;
  background:#fff; will-change:transform,opacity;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transform-origin:center center;
}
.scene-thumb img{
  width:100%; height:100%; object-fit:cover;
}

.scene__center{position:relative; z-index:2; text-align:center; padding:0 var(--pad)}
.scene__kicker{margin:0 0 18px; font-size:14px; color:rgba(255,255,255,.6); will-change:opacity}
.scene__line{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.6vw,22px); flex-wrap:nowrap;
  font-size:clamp(20px,3.4vw,46px); font-weight:600; letter-spacing:-.03em;
}
.scene__word{white-space:nowrap; will-change:transform}
.scene__slot{
  position:relative;
  flex:none; width:clamp(54px,7vw,104px); aspect-ratio:16/11;
  border-radius:var(--r); overflow:hidden; background:#fff;
  will-change:transform; transform-origin:center center;
}
/* absolute: em fluxo normal o vídeo empilharia abaixo e sumiria no overflow */
.scene__slot img,.scene__slot video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; border:0;
}

.scene__caption{
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(40px,8vh,90px);
  display:flex; flex-direction:column; gap:6px; align-items:center;
  color:#fff; font-size:clamp(17px,2.4vw,30px); font-weight:600;
  letter-spacing:-.02em; text-shadow:0 2px 24px rgba(0,0,0,.5);
  pointer-events:none;
}
.scene__caption span{opacity:0; will-change:opacity}

/* ═══ 3. NÚMEROS ═══ */
.numbers{padding:clamp(80px,12vw,170px) var(--pad); max-width:1240px; margin:0 auto}
.numbers__intro{display:grid; grid-template-columns:1fr 2fr; gap:clamp(24px,5vw,70px); align-items:start}
.numbers__year{font-size:13px; color:var(--ink-soft)}
.numbers__slogan{margin:0; font-size:clamp(18px,2.2vw,28px); letter-spacing:-.02em; line-height:1.35}
.numbers__grid{
  margin-top:clamp(44px,6vw,80px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;
}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,36px);
}
.stat b{display:block; font-size:clamp(38px,5.4vw,72px); font-weight:600; letter-spacing:-.04em; line-height:1}
.stat span{display:block; margin-top:10px; font-size:14px; color:var(--ink-soft)}

/* ═══ 4. CATÁLOGO ═══ */
.catalogo{padding:clamp(60px,9vw,130px) var(--pad); max-width:1400px; margin:0 auto}
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.chip{
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:999px; padding:8px 17px; font:inherit; font-size:14px;
  cursor:pointer; transition:all .2s;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

.grid{
  margin-top:36px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  opacity:0; transform:translateY(18px);
}
.card.is-in{opacity:1; transform:none}
.card:hover{transform:translateY(-4px)}
.card__ph{aspect-ratio:1; background:var(--bg); position:relative; overflow:hidden}
.card__ph img{width:100%; height:100%; object-fit:cover; transform:scale(1.12)}
.card__ph[data-missing="1"]::after{
  content:attr(data-nome); position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:18px;
  font-size:12px; color:var(--ink-soft);
  background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 9px,#ece7e0 9px,#ece7e0 18px);
}
.card__body{padding:16px 18px 20px}
.card__cat{font-size:12px; color:var(--ink-soft)}
.card__nome{margin:5px 0 0; font-size:16px; font-weight:500; letter-spacing:-.01em; line-height:1.3}
.card__med{margin:9px 0 0; font-size:13px; color:var(--ink-soft)}
.catalogo__nota{margin-top:28px; font-size:13px; color:var(--ink-soft)}

/* ═══ 5. PAINÉIS STICKY (R7: inversão só no último) ═══ */
.panels{margin-top:clamp(40px,6vw,90px)}
.panel{
  position:sticky; top:0; min-height:78vh;
  padding:clamp(70px,11vw,150px) var(--pad);
  background:var(--bg); border-top:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.panel p:not(.eyebrow){max-width:52ch; margin:22px 0 0; color:var(--ink-soft); font-size:clamp(15px,1.7vw,19px)}
.panel--dark{background:var(--dark); color:#fff; border-top-color:var(--dark)}
.panel--dark .eyebrow,.panel--dark p:not(.eyebrow){color:rgba(255,255,255,.62)}

/* ═══ 6. DEPOIMENTOS ═══ */
.depo{padding:clamp(70px,10vw,140px) var(--pad); max-width:1240px; margin:0 auto}
.depo__grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:26px}
.depo__head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px}
.depo__stars{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft)}
.depo__stars img{height:17px; width:auto}
.depo blockquote{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(22px,2.6vw,32px);
  font-size:clamp(15px,1.6vw,18px); letter-spacing:-.01em;
  display:flex; flex-direction:column; gap:16px;
}
.depo blockquote p{margin:0}
.depo cite{
  margin-top:auto; font-style:normal; font-size:13px; color:var(--ink-soft);
  display:flex; align-items:center; gap:9px;
}
.depo cite b{
  font-weight:500; color:var(--ink); font-size:14px;
}
.depo cite::before{
  content:''; width:26px; height:1px; background:var(--accent); flex:none;
}

/* ═══ 7. RODAPÉ ═══ */
.foot{padding:clamp(60px,9vw,120px) var(--pad) 40px; border-top:1px solid var(--line)}
.foot__cta{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:28px}
.foot__cols{
  margin-top:clamp(50px,7vw,100px); display:grid; gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-top:34px; border-top:1px solid var(--line);
}
.foot h4{margin:0 0 12px; font-size:13px; font-weight:500; color:var(--ink-soft)}
.foot p{margin:0; font-size:15px; line-height:1.75}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__cats{color:var(--ink-soft); font-size:14px}
.foot__legal{margin-top:46px; font-size:12px; color:var(--ink-soft)}

/* ═══ cursor customizado ═══ */
.cursor{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  width:11px; height:11px; border-radius:50%; background:var(--accent);
  transform:translate(-50%,-50%); mix-blend-mode:normal;
  transition:width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1),
             border-radius .28s, opacity .2s;
  display:grid; place-items:center; opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-label{width:70px; height:70px; border-radius:var(--r)}
.cursor__label{
  color:#fff; font-size:12px; opacity:0; transition:opacity .2s; white-space:nowrap
}
.cursor.is-label .cursor__label{opacity:1}
@media (hover:none){.cursor{display:none}}

/* ═══ responsivo ═══ */
@media (max-width:820px){
  .topbar__nav{display:none}
  .numbers__intro{grid-template-columns:1fr}
  .scene{height:340vh}
  .scene__line{font-size:clamp(17px,5vw,26px)}
}

/* ═══ acessibilidade: movimento reduzido ═══ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .scene{height:auto}
  .scene__sticky{position:relative; height:auto; padding:80px 0}
  .scene__field{display:none}
  .scene__slot{width:min(560px,80vw); aspect-ratio:16/9}
  .scene__caption{position:static; color:var(--ink); text-shadow:none; margin-top:28px}
  .scene__caption span{opacity:1}
  .card{opacity:1; transform:none}
  .panel{position:static; min-height:0}
  .cursor{display:none}
}