/* ==================================================================
   Ludwig · Catálogo de Cores — folha de estilo
   ================================================================== */

:root{
  --bg:        #0c0b0a;
  --bg-2:      #131211;
  --bg-3:      #1b1917;
  --linha:     rgba(243,236,225,.13);
  --linha-2:   rgba(243,236,225,.28);
  --ink:       #f4efe6;
  --ink-2:     rgba(244,239,230,.66);
  --ink-3:     rgba(244,239,230,.40);
  --ouro:      #c2a06a;
  --ouro-claro:#e0c795;
  --r:         14px;
  --topo-h:    72px;
  --serif:     'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease:      cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:var(--topo-h)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.travado{overflow:hidden}
img{display:block; max-width:100%}
button,input,select{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
::selection{background:var(--ouro); color:#12100e}

h1,h2,h3{font-family:var(--serif); font-weight:300; letter-spacing:-.015em; margin:0; line-height:1.06}
em{font-style:italic; color:var(--ouro-claro)}

.olho{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; font-weight:500;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; border-radius:100px;
  padding:.85em 1.6em; font-size:13.5px; font-weight:500; letter-spacing:.02em;
  transition:.35s var(--ease); border:1px solid transparent; white-space:nowrap;
}
.btn-primario{background:var(--ink); color:#100e0c}
.btn-primario:hover{background:var(--ouro-claro); transform:translateY(-2px)}
.btn-vazado{border-color:var(--linha-2); color:var(--ink)}
.btn-vazado:hover{border-color:var(--ouro); color:var(--ouro-claro); background:rgba(194,160,106,.08)}
.btn-mini{padding:.6em 1.15em; font-size:12.5px}

/* ================= TOPO ================= */
.topo{
  position:fixed; inset:0 0 auto 0; height:var(--topo-h); z-index:60;
  display:flex; align-items:center; gap:32px; padding:0 clamp(18px,4vw,54px);
  background:rgba(12,11,10,.72); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid transparent; transition:.4s var(--ease);
}
.topo.solido{border-bottom-color:var(--linha); background:rgba(12,11,10,.92)}
.marca{display:flex; flex-direction:column; align-items:flex-start; line-height:1; margin-right:auto}
/* align-self impede que o flex em coluna estique a largura da imagem */
.marca-logo{height:38px; width:auto; align-self:flex-start; transition:opacity .3s var(--ease)}
.marca:hover .marca-logo{opacity:.72}
.marca-logo-rodape{height:48px; margin-bottom:6px}
.marca-s{font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; margin-left:2px}
.nav{display:flex; gap:30px; font-size:13px; color:var(--ink-2)}
.nav a{position:relative; padding:4px 0; transition:color .3s}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ouro); transition:right .4s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.btn-busca{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--linha); border-radius:100px; padding:8px 12px 8px 14px; transition:.3s;
}
.btn-busca:hover{border-color:var(--linha-2); color:var(--ink)}
.btn-busca kbd{
  font-family:var(--sans); font-size:10px; border:1px solid var(--linha); border-radius:4px;
  padding:1px 6px; color:var(--ink-3);
}

/* ================= HERO ================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero-fundo{
  position:absolute; inset:-14% -4%; display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr); opacity:.72;
}
.hero-col{display:grid; gap:14px; will-change:transform}
.hero-col img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px}
@keyframes sobe{from{transform:translateY(0)} to{transform:translateY(-50%)}}
@keyframes desce{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.hero-veu{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 78% at 14% 52%, rgba(12,11,10,.97) 16%, rgba(12,11,10,.72) 44%, rgba(12,11,10,.10) 100%),
    linear-gradient(180deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.18) 26%, rgba(12,11,10,.30) 62%, var(--bg) 100%);
}
.hero-conteudo{
  position:relative; z-index:2; padding:calc(var(--topo-h) + 40px) clamp(18px,4vw,54px) 90px;
  max-width:760px;
}
.hero h1{font-size:clamp(44px,7.4vw,104px); margin:0 0 26px}
.hero .sub{max-width:52ch; color:var(--ink-2); font-size:clamp(14.5px,1.35vw,17px); font-weight:300; margin:0 0 38px}
.hero-acoes{display:flex; gap:14px; flex-wrap:wrap}
.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
}
.hero-scroll span{width:52px; height:1px; background:var(--linha-2); position:relative; overflow:hidden}
.hero-scroll span::after{content:''; position:absolute; inset:0; background:var(--ouro); animation:varre 2.4s var(--ease) infinite}
@keyframes varre{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ================= SEÇÕES ================= */
.secao-cab{padding:0 clamp(18px,4vw,54px); max-width:900px; margin-bottom:clamp(34px,5vw,58px)}
.secao-cab h2{font-size:clamp(28px,4vw,52px)}
.secao-txt{color:var(--ink-2); font-weight:300; margin:20px 0 0; max-width:56ch}

/* ================= BARRA / FILTROS ================= */
.catalogo{padding:clamp(80px,10vw,140px) 0 0}
.barra{
  position:sticky; top:var(--topo-h); z-index:40; padding:16px clamp(18px,4vw,54px);
  background:rgba(12,11,10,.9); backdrop-filter:blur(16px);
  border-block:1px solid var(--linha);
  display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;
}
.barra-busca{
  display:flex; align-items:center; gap:9px; border:1px solid var(--linha);
  border-radius:100px; padding:8px 14px; min-width:250px; flex:1 1 250px; max-width:340px;
  color:var(--ink-3); transition:.3s;
}
.barra-busca:focus-within{border-color:var(--ouro); color:var(--ink)}
.barra-busca input{border:0; background:none; outline:none; width:100%; font-size:13.5px}
.barra-busca input::placeholder{color:var(--ink-3)}
.limpa{font-size:20px; line-height:1; color:var(--ink-3); padding:0 2px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  border:1px solid var(--linha); border-radius:100px; padding:7px 14px; font-size:12.5px;
  color:var(--ink-2); transition:.28s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--linha-2); color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#100e0c; font-weight:500}
.chips-sec .chip{font-size:11.5px; padding:6px 12px; color:var(--ink-3)}
.chips-sec .chip.on{background:transparent; border-color:var(--ouro); color:var(--ouro-claro)}
.barra-fim{display:flex; align-items:center; gap:18px; margin-left:auto}
.ordem{display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.ordem select{
  background:transparent; border:1px solid var(--linha); border-radius:100px;
  padding:7px 12px; font-size:12.5px; text-transform:none; letter-spacing:0; color:var(--ink); outline:none;
}
.ordem select option{background:var(--bg-3)}
.contagem{font-size:11.5px; color:var(--ink-3); letter-spacing:.1em; min-width:78px; text-align:right}

/* ================= GRADE ================= */
.grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
  gap:clamp(12px,1.6vw,22px); padding:clamp(26px,4vw,44px) clamp(18px,4vw,54px) 0;
}
.card{
  position:relative; text-align:left; border-radius:var(--r); overflow:hidden;
  background:var(--bg-2); transition:.5s var(--ease); animation:entra .55s var(--ease) both;
}
@keyframes entra{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.card:hover{transform:translateY(-6px)}
.card-img{position:relative; aspect-ratio:1/1.14; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}
.card-img::after{
  content:''; position:absolute; inset:0; opacity:0; transition:.45s var(--ease);
  background:linear-gradient(to top, rgba(8,7,6,.82) 0%, rgba(8,7,6,.12) 45%, transparent 70%);
}
.card:hover .card-img::after, .card:focus-visible .card-img::after{opacity:1}
.card-lupa{
  position:absolute; inset:auto 12px 12px auto; width:34px; height:34px; border-radius:50%;
  background:rgba(244,239,230,.92); color:#100e0c; display:grid; place-items:center;
  opacity:0; transform:scale(.7) translateY(6px); transition:.42s var(--ease);
}
.card:hover .card-lupa{opacity:1; transform:none}
.card-info{padding:14px 15px 17px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card-nome{font-family:var(--serif); font-size:17px; line-height:1.2; letter-spacing:-.01em}
.card-meta{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px}
.card-ponto{width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-top:5px; box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.card.fixado{outline:1px solid var(--ouro); outline-offset:-1px}
.vazio{text-align:center; color:var(--ink-3); padding:70px 20px; font-size:14px}
.vazio button{color:var(--ouro-claro); text-decoration:underline; text-underline-offset:4px}

/* ============ AMBIENTES (seção LP) ============ */
.ambientes-lp{padding:clamp(90px,11vw,150px) 0 clamp(70px,9vw,120px)}
.lp-palco{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);
  gap:clamp(20px,3vw,44px); padding:0 clamp(18px,4vw,54px); align-items:start;
}
.lp-cena{border-radius:var(--r); overflow:hidden; background:var(--bg-2); box-shadow:0 30px 90px -40px rgba(0,0,0,.9)}
.lp-cena svg{display:block; width:100%; height:auto}
.lp-rot{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px}
.lp-lateral h3{font-size:clamp(26px,3vw,40px); margin:0 0 14px}
.lp-nota{color:var(--ink-2); font-weight:300; font-size:14.5px; margin:0 0 26px}
.lp-tabs{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px}
.lp-tiras{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:26px}
.lp-tiras img{
  width:100%; aspect-ratio:1/1.2; object-fit:cover; border-radius:5px; cursor:pointer;
  opacity:.5; transition:.35s var(--ease);
}
.lp-tiras img:hover{opacity:1; transform:translateY(-3px)}
.lp-tiras img.on{opacity:1; outline:1px solid var(--ouro); outline-offset:2px}

/* ================= RODAPÉ ================= */
.rodape{
  border-top:1px solid var(--linha); padding:clamp(40px,5vw,64px) clamp(18px,4vw,54px);
  display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
}
.rodape p{margin:10px 0 0; font-size:12px; color:var(--ink-3)}
.rodape-nota{max-width:48ch; line-height:1.7}

/* ================= VISUALIZADOR ================= */
.visor{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:clamp(0px,2.4vw,32px)}
.visor-fundo{position:absolute; inset:0; background:rgba(6,5,5,.9); backdrop-filter:blur(10px); animation:fade .35s ease both}
@keyframes fade{from{opacity:0} to{opacity:1}}
.visor-caixa{
  position:relative; width:min(1420px,100%); max-height:100%; overflow:auto; overscroll-behavior:contain;
  background:var(--bg-2); border:1px solid var(--linha); border-radius:clamp(0px,1.4vw,18px);
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.32fr);
  animation:sobeIn .45s var(--ease) both;
}
@keyframes sobeIn{from{opacity:0; transform:translateY(24px) scale(.985)} to{opacity:1; transform:none}}
.visor-x{
  position:absolute; top:14px; right:16px; z-index:5; width:38px; height:38px; border-radius:50%;
  background:rgba(12,11,10,.62); border:1px solid var(--linha); font-size:24px; line-height:1;
  color:var(--ink); display:grid; place-items:center; transition:.3s; backdrop-filter:blur(8px);
}
.visor-x:hover{background:var(--ink); color:#100e0c}
.visor-nav{
  position:absolute; top:14px; z-index:5; width:38px; height:38px; border-radius:50%;
  background:rgba(12,11,10,.62); border:1px solid var(--linha); font-size:22px; line-height:1;
  color:var(--ink-2); display:grid; place-items:center; transition:.3s; backdrop-filter:blur(8px);
}
.visor-nav:hover{color:var(--ink); border-color:var(--linha-2); background:rgba(12,11,10,.9)}
.visor-prev{right:106px} .visor-next{right:60px}

.visor-esq{padding:clamp(22px,2.4vw,36px); border-right:1px solid var(--linha); display:flex; flex-direction:column}
.lupa{
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4/3.1;
  cursor:zoom-in; background:var(--bg-3); margin-bottom:24px;
}
.lupa img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.lupa.zoom{cursor:zoom-out}
.lupa.zoom img{transform:scale(3.1); transition:transform .18s linear}
.lupa-dica{
  position:absolute; left:12px; bottom:12px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(10,9,8,.66); border:1px solid var(--linha); border-radius:100px; padding:5px 11px;
  backdrop-filter:blur(6px); pointer-events:none; transition:.3s;
}
.visor-id{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.visor-id h3{font-size:clamp(28px,3.2vw,42px)}
.visor-id .olho{margin-bottom:8px}
.hexbtn{
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:.08em;
  border:1px solid var(--linha); border-radius:100px; padding:8px 14px; color:var(--ink-2);
  transition:.3s; white-space:nowrap;
}
.hexbtn:hover{border-color:var(--ouro); color:var(--ouro-claro)}
.visor-nota{color:var(--ink-2); font-weight:300; font-size:14.5px; margin:18px 0 24px}
.ficha{display:grid; grid-template-columns:auto 1fr; gap:0; margin:0 0 24px; border-top:1px solid var(--linha)}
.ficha dt{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding:13px 0; border-bottom:1px solid var(--linha);
}
.ficha dd{
  margin:0; padding:13px 0; border-bottom:1px solid var(--linha); text-align:right; font-size:13.5px; color:var(--ink);
}
.esp{display:inline-flex; flex-wrap:wrap; gap:5px; justify-content:flex-end}
.esp span{border:1px solid var(--linha); border-radius:5px; padding:2px 7px; font-size:11px; color:var(--ink-2)}
.estrelas{color:var(--ouro); letter-spacing:.22em; font-size:12px}
.visor-acoes{margin-top:auto; padding-top:10px}

.visor-dir{padding:clamp(22px,2.4vw,36px); display:flex; flex-direction:column; min-width:0}
.visor-tabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; padding-right:156px}
.visor-cena{
  border-radius:10px; overflow:hidden; background:var(--bg-3);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.95);
}
.visor-cena svg{display:block; width:100%; height:auto; animation:fade .5s ease both}
.visor-legenda{font-size:12.5px; color:var(--ink-3); margin:14px 0 26px; font-weight:300}
.visor-legenda b{color:var(--ink-2); font-weight:500}
.combina{margin-top:auto; padding-top:26px; border-top:1px solid var(--linha)}
.combina .olho{margin-bottom:12px}
.combina-lista{display:grid; grid-template-columns:repeat(5,1fr); gap:9px}
.combina-item{border-radius:8px; overflow:hidden; text-align:left; transition:.4s var(--ease)}
.combina-item img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px}
.combina-item span{display:block; font-size:11px; color:var(--ink-3); margin-top:7px; line-height:1.3}
.combina-item:hover{transform:translateY(-4px)}
.combina-item:hover span{color:var(--ink)}

/* ================= COMPARADOR ================= */
.doca{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:14px; padding:11px 14px 11px 18px;
  background:rgba(20,18,17,.9); backdrop-filter:blur(20px);
  border:1px solid var(--linha-2); border-radius:100px;
  box-shadow:0 20px 60px -22px rgba(0,0,0,.95); animation:sobeIn .4s var(--ease) both;
  max-width:calc(100vw - 32px);
}
.doca-rot{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0}
.doca-itens{display:flex; gap:7px}
.doca-itens img{width:34px; height:34px; border-radius:8px; object-fit:cover; cursor:pointer; transition:.3s}
.doca-itens img:hover{transform:translateY(-3px); box-shadow:0 0 0 1px var(--ouro)}
.doca-x{font-size:22px; line-height:1; color:var(--ink-3); padding:0 6px}
.doca-x:hover{color:var(--ink)}

.compara{
  position:fixed; inset:0; z-index:95; background:var(--bg); overflow:auto;
  animation:fade .35s ease both;
}
.compara-topo{
  position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:22px clamp(18px,4vw,44px);
  background:rgba(12,11,10,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--linha);
}
.compara-topo h3{font-size:clamp(22px,2.6vw,32px)}
.compara-ctrl{display:flex; align-items:center; gap:16px}
.compara-ctrl .visor-x{position:static}
.compara-grade{
  display:grid; gap:1px; background:var(--linha);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); border-bottom:1px solid var(--linha);
}
.comp-col{background:var(--bg); padding:0 0 26px}
.comp-cena svg{display:block; width:100%; height:auto}
.comp-chapa{height:88px; width:100%; object-fit:cover}
.comp-txt{padding:20px clamp(16px,1.6vw,24px) 0}
.comp-txt h4{font-family:var(--serif); font-weight:300; font-size:24px; margin:0 0 8px}
.comp-txt p{margin:0; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.comp-txt .hexbtn{margin-top:14px}

/* ================= TOAST ================= */
.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%); z-index:120;
  background:var(--ink); color:#100e0c; font-size:12.5px; font-weight:500;
  padding:11px 20px; border-radius:100px; animation:sobeIn .3s var(--ease) both;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.9);
}

/* ================= RESPONSIVO ================= */
@media (max-width:1080px){
  .visor-caixa{grid-template-columns:1fr}
  .visor-esq{border-right:0; border-bottom:1px solid var(--linha)}
  .visor-tabs{padding-right:0}
  .lp-palco{grid-template-columns:1fr}
  .combina-lista{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:760px){
  :root{--topo-h:62px}
  .nav{display:none}
  .btn-busca span, .btn-busca kbd{display:none}
  .btn-busca{padding:9px}
  .hero-fundo{grid-template-columns:repeat(4,1fr); opacity:.38}
  .hero-veu{background:
    radial-gradient(140% 90% at 30% 42%, rgba(12,11,10,.96) 22%, rgba(12,11,10,.6) 62%, rgba(12,11,10,.3) 100%),
    linear-gradient(180deg, rgba(12,11,10,.94) 0%, rgba(12,11,10,.45) 34%, var(--bg) 100%)}
  .grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .barra{gap:10px 12px; padding:12px clamp(14px,4vw,24px)}
  .barra-fim{width:100%; justify-content:space-between; margin-left:0}
  .chips-sec{display:none}
  .lp-tiras{grid-template-columns:repeat(8,1fr)}
  .combina-lista{grid-template-columns:repeat(3,1fr)}
  .visor{padding:0}
  .visor-caixa{border-radius:0; min-height:100%}
  .doca{bottom:12px; padding:9px 12px 9px 14px; gap:10px}
  .doca-rot{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}