/* =========================================================================
   ALADIN ILUMINAÇÃO — v7 "noturno"
   -------------------------------------------------------------------------
   Direção visual do mockup enviado pelo Ismael: base escura, herói noturno,
   dourado como acento (não como fundo), tipografia caixa-alta com tracking
   largo, cartões técnicos com fio dourado e selos de especificação.
   Sem framework. Uma folha, um arquivo JS.
   ========================================================================= */

:root{
  /* superfícies escuras — pretos quentes, puxados para o marrom da marca */
  --preto:#14110E;
  --preto-2:#1C1815;
  --preto-3:#25201B;
  --fio:#3A322A;

  /* claro */
  --papel:#FAF7F3;
  --papel-2:#FFFFFF;
  --fio-claro:#E8E1D7;

  /* texto */
  --texto:#453D35;
  --titulo:#1A1512;
  --texto-esc:#C4B9AC;   /* corpo sobre fundo escuro */
  --fraco:#8A7E71;

  /* paleta da marca (manual): cobre, dourado, marrom */
  --cobre:#B87333;
  --cobre-esc:#7A4A24;
  --marrom:#5C3A21;
  --ouro:#D4AF37;
  --ouro-claro:#EBCF7A;
  --ouro-fundo:#96751B;
  --ouro-grad:linear-gradient(100deg,#8A6C12 0%,#D4AF37 30%,#F6E7AE 52%,#D4AF37 74%,#8A6C12 100%);
  --cobre-grad:linear-gradient(100deg,#5C3A21 0%,#8E5A2A 30%,#B87333 55%,#8E5A2A 80%,#5C3A21 100%);

  --wa:#25D366;

  --max:1240px;
  --gutter:clamp(20px,4vw,44px);
  --passo:clamp(4rem,8vw,7rem);
  --raio:6px;

  --titulos:"Outfit",system-ui,sans-serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --heroi:url("https://aladiniluminacao.com.br/wp-content/uploads/2024/06/1604671482_ad-118-luminaria-led-publica-ambientacao.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--corpo);font-size:16.5px;line-height:1.72;font-weight:400;
  color:var(--texto);background:var(--papel-2);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,h4{font-family:var(--titulos);color:var(--titulo);line-height:1.18}
h1,h2{font-weight:600;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(1.9rem,3.9vw,3.05rem);line-height:1.1}
h2{font-size:clamp(1.55rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.08rem,1.5vw,1.28rem);font-weight:600}
h4{font-weight:600}
p{text-wrap:pretty}

.centrado{text-align:center}
.centrado .lead{margin-left:auto;margin-right:auto}
.lead{font-size:1.06rem;max-width:64ch;color:var(--texto)}

.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:200;background:var(--ouro);color:#171200;padding:.7rem 1.1rem;border-radius:4px}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
[id]{scroll-margin-top:96px}

/* olho / kicker — a linha dourada curta antes do título */
.olho{
  font-family:var(--titulos);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cobre-esc);margin-bottom:1rem;
  display:flex;align-items:center;gap:.7rem;
}
.centrado .olho{justify-content:center}
.olho::before,.centrado .olho::after{content:"";height:1px;width:26px;background:currentColor;opacity:.55}
.olho::after{content:none}
.escuro .olho,.heroi .olho{color:var(--ouro-claro)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--titulos);font-weight:700;font-size:.82rem;
  letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn svg{width:17px;height:17px;flex:none}
/* o botão principal é o cobre da marca, sólido — dourado fica para o acento */
.btn-ouro{background:var(--cobre-grad);color:#FFF6EC;background-size:180% 100%;background-position:0 0;
  box-shadow:0 6px 18px rgba(92,58,33,.22)}
.btn-ouro:hover{background-position:100% 0;transform:translateY(-1px)}
.btn-dourado{background:var(--ouro-grad);color:#241B00;background-size:180% 100%}
.btn-dourado:hover{background-position:100% 0;transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:#06331A}
.btn-wa:hover{background:#31e277;transform:translateY(-1px)}
.btn-fio{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn-fio:hover{border-color:var(--ouro);color:var(--ouro-claro)}
.btn-fio-esc{background:transparent;color:var(--marrom);border-color:#D9CEBF}
.btn-fio-esc:hover{border-color:var(--cobre);color:var(--cobre-esc);background:#FFFBF6}
.btn-p{padding:.7rem 1.25rem;font-size:.72rem;letter-spacing:.09em}

.seta{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--titulos);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cobre-esc);
}
.escuro .seta{color:var(--ouro-claro)}
.seta::after{content:"→";transition:transform .2s ease}
.cartao:hover .seta::after,.peca:hover .seta::after,.seta:hover::after{transform:translateX(5px)}

/* ---------- cabeçalho ---------- */
.faixa-topo{background:#0D0B09;color:#9A8E80;font-size:.76rem;letter-spacing:.04em;
  border-bottom:1px solid #241F1A}
.faixa-topo .wrap{display:flex;gap:1.8rem;align-items:center;min-height:38px;justify-content:flex-end;flex-wrap:wrap}
.faixa-topo a{text-decoration:none;transition:color .18s ease}
.faixa-topo a:hover{color:var(--ouro-claro)}

header{position:sticky;top:0;z-index:70;background:rgba(20,17,14,.95);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--fio)}
.topo{display:flex;align-items:center;gap:1.5rem;min-height:128px;
  transition:min-height .22s ease}
/* logo colorido, com fundo transparente — nada de filtro.
   Dobrou de 54px para 108px em 13/08/2026, a pedido do Ismael. Para a barra
   fixa não comer meia tela, ela encolhe assim que a página rola: o logo chega
   grande e sai do caminho depois. */
.marca img{height:108px;width:auto;transition:height .22s ease}
header.encolhido .topo{min-height:84px}
header.encolhido .marca img{height:60px}
@media (prefers-reduced-motion:reduce){
  .topo,.marca img{transition:none}
}
footer .marca img{height:64px;margin-bottom:1.2rem}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:.7rem}

nav{display:flex;gap:.2rem;align-items:center}
nav a{
  font-family:var(--titulos);font-weight:600;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:#CFC4B6;text-decoration:none;
  padding:.55rem .85rem;position:relative;transition:color .2s ease;
}
nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.15rem;height:1.5px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
nav a:hover{color:#fff}
nav a:hover::after{transform:scaleX(1)}
nav a[aria-current=page]{color:var(--ouro-claro)}
nav a[aria-current=page]::after{transform:scaleX(1)}
.abrir-menu{display:none;background:none;border:0;padding:.4rem;cursor:pointer;color:#fff}
.abrir-menu svg{width:26px;height:26px}

/* ---------- herói ---------- */
.heroi{
  position:relative;background:var(--preto);color:#fff;overflow:hidden;
  padding:0 0 clamp(2.6rem,5vw,3.6rem);
}
/* ---------- carrossel do herói ---------- */
.carrossel{display:grid}
.slide{
  grid-area:1/1;position:relative;
  padding:clamp(4rem,8vw,6.5rem) 0 clamp(3rem,6vw,4.6rem);
  opacity:0;visibility:hidden;transition:opacity .7s ease;
}
.slide.ativo{opacity:1;visibility:visible}
.slide::before{
  content:"";position:absolute;inset:0;
  background-image:var(--foto);background-size:cover;background-position:center 58%;
  opacity:.66;filter:saturate(.95) contrast(1.03);
}
.slide::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 78% 12%,rgba(184,115,51,.24),transparent 58%),
    linear-gradient(180deg,rgba(20,17,14,.66) 0%,rgba(20,17,14,.38) 42%,rgba(20,17,14,.95) 100%);
}
.slide .wrap{position:relative;z-index:2;max-width:1100px}
.slide h1,.titulo-slide{color:#fff;max-width:17ch;font-family:var(--titulos);
  font-weight:600;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(1.9rem,3.9vw,3.05rem);line-height:1.1}
.slide h1 em,.titulo-slide em{font-style:normal;
  background:var(--ouro-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide .lead{color:#DCD1C3;margin-top:1.5rem;max-width:56ch;font-size:1.08rem}
.slide .acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.4rem}
.slide .nota{margin-top:1.4rem;font-size:.84rem;color:#A0937F;letter-spacing:.02em}

.carro-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(20,17,14,.42);border:1px solid rgba(255,255,255,.28);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.carro-seta svg{width:22px;height:22px}
.carro-seta:hover{background:rgba(184,115,51,.75);border-color:var(--ouro)}
.carro-seta.anterior{left:clamp(8px,2vw,26px)}
.carro-seta.proximo{right:clamp(8px,2vw,26px)}

.carro-pontos{
  position:absolute;left:0;right:0;bottom:clamp(7rem,13vw,9.5rem);z-index:5;
  display:flex;gap:.55rem;justify-content:center;
}
.carro-pontos button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.38);border:0;transition:background .2s ease,width .2s ease;
}
.carro-pontos button[aria-selected=true]{background:var(--ouro);width:26px;border-radius:5px}

/* sem JS, o primeiro slide fica visível e as setas somem */
html:not(.js) .slide{opacity:1;visibility:visible}
html:not(.js) .slide:not(.ativo){display:none}
html:not(.js) .carro-seta,html:not(.js) .carro-pontos{display:none}
.heroi .wrap{position:relative;z-index:2;max-width:1100px}
.heroi h1{color:#fff;max-width:19ch}
.heroi h1 em{font-style:normal;
  background:var(--ouro-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroi .lead{color:#DCD1C3;margin-top:1.6rem;max-width:56ch;font-size:1.1rem}
.heroi .acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.6rem}
.heroi .nota{margin-top:1.5rem;font-size:.84rem;color:#A0937F;letter-spacing:.02em}

/* régua de números sob o herói */
.carrossel > .wrap{grid-area:1/1;align-self:end;position:relative;z-index:4;pointer-events:none}
.regua{position:relative;z-index:2;margin-top:0;
  border-top:1px solid rgba(255,255,255,.13);
  display:grid;grid-template-columns:repeat(5,1fr)}
.regua div{padding:1.6rem 1rem 0;border-right:1px solid rgba(255,255,255,.09)}
.regua div:last-child{border-right:0}
.regua b{display:block;font-family:var(--titulos);font-weight:700;font-size:1.35rem;
  letter-spacing:.03em;color:var(--ouro-claro);line-height:1.2}
.regua span{display:block;margin-top:.3rem;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:#A0937F;font-family:var(--titulos);font-weight:600}

/* ---------- faixa interna (páginas que não são a home) ---------- */
.capa{
  position:relative;background:var(--preto);color:#fff;overflow:hidden;
  padding:clamp(3.6rem,7vw,6rem) 0;
}
.capa::before{content:"";position:absolute;inset:0;background-image:var(--heroi);
  background-size:cover;background-position:center 60%;opacity:.38;filter:saturate(.85)}
.capa::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 82% 8%,rgba(184,115,51,.20),transparent 60%),
             linear-gradient(180deg,rgba(20,17,14,.76),rgba(20,17,14,.95))}
.capa .wrap{position:relative;z-index:2}
.capa h1{color:#fff;max-width:20ch;font-size:clamp(1.8rem,4vw,3rem)}
.capa .lead{color:#D3C8BA;margin-top:1.2rem}
.capa .acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.migalha{font-family:var(--titulos);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#D8B173;margin-bottom:1.1rem}
.migalha a{text-decoration:none;opacity:.75}
.migalha a:hover{opacity:1}

/* ---------- seções ---------- */
section{padding:var(--passo) 0}
.claro{background:var(--papel)}
.escuro{background:var(--preto);color:var(--texto-esc)}
.escuro h2,.escuro h3,.escuro h4{color:#fff}
.escuro .lead{color:#B3A797}
.cabeca{margin-bottom:clamp(2.4rem,4.5vw,3.6rem);max-width:70ch}
.centrado.cabeca{margin-left:auto;margin-right:auto}

/* ---------- cartões de categoria ---------- */
.grade{display:grid;gap:1.4rem}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.cartao{
  background:var(--papel-2);border:1px solid var(--fio-claro);border-radius:var(--raio);
  padding:2.4rem 1.9rem 2rem;text-decoration:none;display:flex;flex-direction:column;
  gap:.85rem;position:relative;overflow:hidden;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.cartao::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ouro-grad);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.cartao:hover{transform:translateY(-3px);border-color:var(--cobre);box-shadow:0 16px 36px rgba(92,58,33,.10)}
.cartao:hover::before{transform:scaleX(1)}
.cartao .ico{color:var(--cobre)}
.cartao .ico svg{width:40px;height:40px;stroke-width:1.15}
.cartao p{font-size:.97rem;flex:1}
.cartao .seta{margin-top:.4rem}
.escuro .cartao{background:var(--preto-2);border-color:var(--fio)}
.escuro .cartao:hover{border-color:var(--cobre);box-shadow:none}
.escuro .cartao p{color:var(--texto-esc)}

/* ---------- produtos ---------- */
/* Padrão CLARO. A versão escura só existe dentro de uma seção escura —
   assim o site respira e não fica pesado de ponta a ponta. */
.peca{
  background:var(--papel-2);border:1px solid var(--fio-claro);border-radius:var(--raio);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.peca:hover{transform:translateY(-4px);border-color:var(--cobre);
  box-shadow:0 16px 34px rgba(92,58,33,.10)}
.peca .foto{aspect-ratio:4/3;background:#fff;overflow:hidden;position:relative}
.peca .foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.peca:hover .foto img{transform:scale(1.05)}
.peca .corpo{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.peca .codigo{
  font-family:var(--titulos);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre-esc);
}
.peca h3{color:var(--titulo);font-size:1.12rem}
.peca p{font-size:.9rem;color:var(--fraco);flex:1;line-height:1.62}
.peca .seta{margin-top:.5rem;color:var(--cobre-esc)}

.escuro .peca{background:var(--preto-2);border-color:var(--fio);box-shadow:none}
.escuro .peca:hover{border-color:var(--cobre);box-shadow:none}
.escuro .peca .codigo,.escuro .peca .seta{color:var(--ouro-claro)}
.escuro .peca h3{color:#fff}
.escuro .peca p{color:var(--texto-esc)}

/* chips técnicos — IP66, potência, garantia */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.chip{
  font-family:var(--titulos);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cobre-esc);border:1px solid var(--fio-claro);
  padding:.28rem .55rem;border-radius:3px;background:#FDF9F4;
}
.escuro .chip{color:#D9CDBE;border-color:var(--fio);background:#211C18}

/* ---------- passos ---------- */
.passos{counter-reset:p;display:grid;gap:1.1rem}
.passo{
  counter-increment:p;background:var(--papel-2);border:1px solid var(--fio-claro);
  border-radius:var(--raio);padding:1.7rem 1.9rem;
  display:grid;grid-template-columns:3.4rem 1fr;gap:1.2rem;align-items:start;
}
.escuro .passo{background:var(--preto-2);border-color:var(--fio)}
.passo::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--titulos);font-weight:700;font-size:1.6rem;line-height:1;
  background:var(--ouro-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.passo h3{margin-bottom:.35rem}
.passo p{font-size:.96rem}
.escuro .passo p{color:var(--texto-esc)}

/* ---------- argumentos ---------- */
.argumentos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fio)}
.argumento{background:var(--preto);padding:2.2rem 1.9rem;transition:background .22s ease}
.argumento:hover{background:var(--preto-2)}
.argumento .ico{color:var(--ouro);margin-bottom:1.1rem}
.argumento .ico svg{width:30px;height:30px;stroke-width:1.25}
.argumento h3{font-size:1.06rem;margin-bottom:.55rem}
.argumento p{font-size:.93rem;color:#9A9AA2}

/* ---------- selos (faixa de credenciais) ---------- */
.selos{background:var(--preto-2);border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);
  padding:1.6rem 0}
.selos .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem}
.selo{display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--titulos);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#8E8E97}
.selo b{font-size:.95rem;font-weight:700;color:var(--ouro-claro);letter-spacing:.06em}

/* ---------- catálogo: barra lateral + grade ---------- */
.catalogo{display:grid;grid-template-columns:270px 1fr;gap:clamp(1.8rem,3.5vw,3rem);align-items:start}
.lado{position:sticky;top:110px}
.lista-cats{display:flex;flex-direction:column;gap:0;align-items:stretch;margin-bottom:2rem}
.lista-cats a{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  font-family:var(--titulos);font-size:.84rem;font-weight:600;color:var(--texto);
  text-decoration:none;padding:.6rem .1rem;border-bottom:1px solid var(--fio-claro);
  transition:color .18s ease,padding-left .18s ease;
}
.lista-cats a b{font-weight:600;font-size:.72rem;color:var(--fraco);letter-spacing:.04em}
.lista-cats a:hover{color:var(--titulo);padding-left:.35rem}
.lista-cats a[aria-current=page]{color:var(--ouro-fundo)}
.lista-cats a[aria-current=page] b{color:var(--ouro-fundo)}
.cartao-ajuda{background:var(--preto);color:var(--texto-esc);border-radius:var(--raio);padding:1.6rem}
.cartao-ajuda h3{color:#fff;font-size:1.02rem;margin-bottom:.6rem}
.cartao-ajuda p{font-size:.9rem;margin-bottom:1.2rem}
.capa-catalogo h1{max-width:22ch}
.nota-capa{margin-top:1.1rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--titulos);font-weight:600;color:var(--ouro-claro)}
.lista .peca:hover{border-color:var(--cobre)}

/* ---------- acordeão de famílias (índice /produtos/) ---------- */
/* <details> puro: abre e fecha sem JavaScript, e o conteúdo continua no HTML
   mesmo fechado — o Google lê tudo. */
.lista > .grade + .grupo{margin-top:2.6rem}
/* o "Catálogo completo" não é uma linha de produto: entra deitado, sozinho,
   antes das famílias */
.grade.tudo{grid-template-columns:1fr}
.grade.tudo .peca{display:grid;grid-template-columns:minmax(0,300px) 1fr;align-items:stretch}
.grade.tudo .foto{height:100%;min-height:190px}
.grade.tudo .corpo{align-self:center}
@media (max-width:760px){
  .grade.tudo .peca{grid-template-columns:1fr}
  .grade.tudo .foto{min-height:0}
}
.grupo{border-top:1px solid var(--fio-claro);padding-top:.2rem}
.grupo + .grupo{margin-top:.2rem}
.grupo summary{
  display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  padding:1.5rem .2rem;transition:color .18s ease;
}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary:hover{color:var(--titulo)}
.grupo summary .ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--fio-claro);background:var(--papel-2);color:var(--cobre);
}
.grupo summary .ico svg{width:22px;height:22px;stroke-width:1.5}
.grupo summary .ico:empty{display:none}
.grupo-txt{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.grupo-txt b{
  font-family:var(--titulos);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.3rem);
  color:var(--titulo);letter-spacing:-.01em;
}
.grupo-txt small{font-size:.86rem;color:var(--texto);line-height:1.45;max-width:62ch}
.grupo-qtd{
  margin-left:auto;flex:none;font-family:var(--titulos);font-weight:600;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);
  white-space:nowrap;
}
.grupo-seta{flex:none;width:22px;height:22px;color:var(--fraco);transition:transform .22s ease}
.grupo[open] > summary .grupo-seta{transform:rotate(180deg)}
.grupo[open] > summary{color:var(--titulo)}
.grupo > .grade{padding:.2rem 0 2.6rem}
@media (max-width:760px){
  /* linha 1: ícone + nome + seta. linha 2: a contagem, alinhada com o nome. */
  .grupo summary{gap:.75rem;padding:1.15rem .1rem;flex-wrap:wrap;row-gap:.35rem}
  .grupo summary .ico{width:38px;height:38px}
  .grupo summary .ico svg{width:19px;height:19px}
  .grupo-txt{flex:1 1 0}
  .grupo-txt small{display:none}
  .grupo-seta{margin-left:0;order:2}
  .grupo-qtd{width:100%;margin-left:0;order:3;padding-left:calc(38px + .75rem)}
}

@media (max-width:900px){
  .catalogo{grid-template-columns:1fr}
  /* no celular os modelos vêm primeiro; a lista de linhas vai para o fim */
  .lista{order:1}
  .lado{position:static;order:2;margin-top:2.6rem;padding-top:2rem;
        border-top:1px solid var(--fio-claro)}
  .lista-cats{max-height:none}
  /* tabela larga (3+ colunas) ganha espaço e rola em vez de esmagar */
  .rolagem-larga table{min-width:480px}
}

/* ---------- ficha de produto ---------- */
.ficha{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ficha-foto{background:#fff;border:1px solid var(--fio-claro);border-radius:var(--raio);
  padding:1.5rem;position:sticky;top:110px}
@media (max-width:900px){
  .ficha{grid-template-columns:1fr;gap:1.8rem}
  .ficha-foto{position:static;padding:1.1rem}
  .ficha-foto img{max-height:62vh}
}
.ficha-foto img{width:100%;height:auto;object-fit:contain}
.ficha-dados h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:1.2rem}
.ficha-dados .texto{max-width:none;font-size:1rem}
.ficha-dados .checklist li::before{border-color:var(--ouro)}
.ficha-dados .acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.capa-produto h1{font-size:clamp(1.6rem,3.2vw,2.5rem);max-width:24ch}

/* ---------- texto corrido ---------- */
.texto{max-width:74ch;font-size:1.04rem}
.texto>*+*{margin-top:1.15rem}
.texto h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin-top:2.8rem;letter-spacing:.04em}
.texto h3{margin-top:2rem;text-transform:none}
.texto ul,.texto ol{padding-left:1.3rem}
.texto li+li{margin-top:.4rem}
.texto strong{font-weight:700;color:var(--titulo)}
.texto a{color:var(--ouro-fundo);text-underline-offset:3px}
.texto table{width:100%;border-collapse:collapse;font-size:.95rem}
/* a tabela rola dentro do próprio quadro — nunca empurra a página */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6rem 0;max-width:100%}
.rolagem table{margin:0}
/* sem isto o item de grade cresce até caber a tabela e estica a página inteira */
.ficha > *,.catalogo > *,.ficha-dados .texto{min-width:0}
.texto th,.texto td{border:1px solid var(--fio-claro);padding:.7rem .85rem;text-align:left}
.texto th{background:var(--papel);font-family:var(--titulos);font-weight:600}
.texto img,.texto iframe,.texto video{max-width:100%;height:auto}
.texto{overflow-wrap:anywhere}

/* ---------- perguntas ---------- */
.faq{max-width:80ch}
.faq details{border-bottom:1px solid var(--fio-claro)}
.escuro .faq details{border-color:var(--fio)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--titulos);font-weight:600;font-size:1.02rem;color:var(--titulo);
}
.escuro .faq summary{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.6rem;top:50%;width:9px;height:9px;
  border-right:1.8px solid var(--ouro);border-bottom:1.8px solid var(--ouro);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 2.5rem 1.5rem 0;font-size:.98rem}

/* ---------- orçamento ---------- */
.orcamento{background:var(--preto);color:var(--texto-esc)}
.orcamento h2,.orcamento h3{color:#fff}
.orcamento .lead{color:#A3A3AB}
.caixa{
  display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start;
}
.checklist{list-style:none;display:grid;gap:.7rem;margin-top:1.8rem}
.checklist li{padding-left:1.8rem;position:relative;font-size:.97rem}
.checklist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-right:1.8px solid var(--ouro);border-bottom:1.8px solid var(--ouro);
  transform:rotate(45deg) translateY(-2px)}

form{background:var(--preto-2);border:1px solid var(--fio);border-radius:var(--raio);
  padding:clamp(1.7rem,3vw,2.4rem)}
.campo{margin-bottom:1.05rem}
.campo label{
  display:block;font-family:var(--titulos);font-weight:700;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:#B9B9C0;margin-bottom:.5rem;
}
.campo input,.campo textarea{
  width:100%;padding:.95rem 1rem;border:1px solid #2E2E38;border-radius:2px;
  font:inherit;font-size:1rem;background:#0B0B0F;color:#fff;transition:border-color .18s ease;
}
.campo input::placeholder,.campo textarea::placeholder{color:#5C5C66}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--ouro)}
.campo textarea{min-height:88px;resize:vertical}
.campo .erro{display:none;color:#E8705F;font-size:.85rem;margin-top:.4rem}
.campo-invalido input,.campo-invalido textarea{border-color:#C0392B}
.campo-invalido .erro{display:block}
form button{width:100%;margin-top:1.3rem}
.nota{font-size:.84rem;color:var(--fraco);margin-top:1.1rem;line-height:1.6}

/* ---------- rodapé ---------- */
footer{background:#0D0B09;color:#9A8E80;padding:var(--passo) 0 0;font-size:.93rem;
  border-top:1px solid var(--fio)}
.grade-rodape{display:grid;grid-template-columns:1.8fr 1fr 1.4fr;gap:2.6rem;padding-bottom:3rem}
footer h4{color:#fff;font-family:var(--titulos);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.2rem}
footer ul{list-style:none;display:grid;gap:.6rem}
footer a{text-decoration:none;transition:color .18s ease}
footer a:hover{color:var(--ouro-claro)}
.base{border-top:1px solid #17171C;padding:1.5rem 0;font-size:.8rem;color:#5C5C66;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- barra do celular ---------- */
.barra-mob{display:none}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .argumentos{grid-template-columns:repeat(2,1fr)}
  .caixa{grid-template-columns:1fr}
  .grade-rodape{grid-template-columns:repeat(2,1fr)}
  .regua{grid-template-columns:repeat(3,1fr);row-gap:1rem}
  .regua div:nth-child(3){border-right:0}
  nav a{padding:.5rem .6rem;font-size:.7rem}
}
@media (max-width:860px){
  header nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:rgba(8,8,10,.985);border-bottom:1px solid var(--fio);
    flex-direction:column;align-items:stretch;padding:.5rem var(--gutter) 1.2rem;
  }
  header nav.aberto{display:flex}
  header nav a{padding:.95rem .4rem;font-size:.8rem;border-bottom:1px solid #15151A}
  header nav a::after{content:none}
  .abrir-menu{display:block}
}
@media (max-width:760px){
  body{padding-bottom:64px}
  .faixa-topo{display:none}
  .topo{min-height:96px}
  .marca img{height:76px}
  header.encolhido .topo{min-height:66px}
  header.encolhido .marca img{height:46px}
  .topo-dir .btn{display:none}
  .g4,.g3,.g2,.argumentos{grid-template-columns:1fr}
  .argumentos{gap:1px}
  .grade-rodape{grid-template-columns:1fr;gap:2.2rem}
  .passo{grid-template-columns:1fr;gap:.6rem}
  /* No celular a régua NÃO pode ficar sobreposta ao slide: em duas colunas ela
     fica alta e cobria o texto do herói. Aqui ela desce para uma faixa própria,
     os pontos entram na linha do meio e as setas somem — quem está no celular
     arrasta. */
  .carro-seta{display:none}
  .carro-pontos{position:static;grid-area:2/1;padding:1.3rem 0 .2rem}
  .carrossel > .wrap{grid-area:3/1;align-self:start;pointer-events:auto}
  .slide{padding-bottom:1.6rem}
  .regua{grid-template-columns:repeat(2,1fr)}
  .regua div{padding-top:1.2rem}
  .regua div:nth-child(2n){border-right:0}
  .selos .wrap{justify-content:flex-start;gap:1rem 1.6rem}

  .barra-mob{
    display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80;
    background:rgba(0,0,0,.97);border-top:1px solid var(--fio);
  }
  .barra-mob a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;
    padding:.72rem .3rem;color:#fff;text-decoration:none;
    font-family:var(--titulos);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .barra-mob a+a{border-left:1px solid var(--fio)}
  .barra-mob svg{width:19px;height:19px}
  .barra-mob .wa{color:#7BF3AC}
  .barra-mob .ouro{color:var(--ouro-claro)}
}

/* ---------- revelação ao rolar (só com JS vivo) ---------- */
.js .revelar{opacity:0;transform:translateY(16px)}
.js .revelar.visivel{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.js .revelar{opacity:1;transform:none}}

/* ---------- blog ---------- */
.capa-post h1{max-width:26ch;font-size:clamp(1.5rem,3vw,2.4rem)}
.capa-post .data{margin-top:1.1rem;font-family:var(--titulos);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro)}
.artigo{max-width:74ch;margin:0 auto}
.artigo .figura{margin-bottom:2.4rem;border-radius:var(--raio);overflow:hidden;background:var(--papel)}
.artigo .figura img{width:100%;height:auto}
.peca-post .foto{aspect-ratio:16/10}
.peca-post .codigo{text-transform:none;letter-spacing:.06em}
.paginacao{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.paginacao a,.paginacao span{
  font-family:var(--titulos);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  padding:.65rem 1rem;border:1px solid var(--fio-claro);border-radius:2px;
  text-decoration:none;color:var(--texto);background:#fff;
}
.paginacao a:hover{border-color:var(--titulo);color:var(--titulo)}
.paginacao [aria-current=page]{background:var(--ouro-grad);color:#140F00;border-color:transparent}

/* ---------- página de destino de anúncio ---------- */
.heroi-curto{padding:clamp(3rem,6vw,5rem) 0 clamp(2.4rem,4vw,3.2rem)}
.heroi-curto h1{max-width:22ch;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.btn-grande{padding:1.25rem 2.6rem;font-size:.92rem}
.btn-grande svg{width:21px;height:21px}

/* ---------- famílias do catálogo na home ---------- */
.familias{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
.familia{background:var(--papel-2);border:1px solid var(--fio-claro);border-radius:var(--raio);
  padding:2.1rem 1.8rem}
.familia .ico{color:var(--ouro);display:block;margin-bottom:1rem}
.familia .ico svg{width:36px;height:36px;stroke-width:1.15}
.familia h3{margin-bottom:.6rem}
.familia p{font-size:.95rem;margin-bottom:1.4rem}
.linhas{list-style:none;display:grid;gap:0}
.linhas a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  font-family:var(--titulos);font-size:.83rem;font-weight:600;color:var(--texto);
  text-decoration:none;padding:.52rem 0;border-top:1px solid var(--fio-claro);
  transition:color .18s ease,padding-left .18s ease}
.linhas li:first-child a{border-top:0}
.linhas a b{font-weight:600;font-size:.72rem;color:var(--fraco)}
.linhas a:hover{color:var(--ouro-fundo);padding-left:.3rem}
.linhas a:hover b{color:var(--ouro-fundo)}
@media (max-width:1080px){.familias{grid-template-columns:1fr}}

/* ---------- galeria do produto ---------- */
.foto-principal img{width:100%;height:auto;object-fit:contain}
.galeria{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.9rem}
.galeria button{
  padding:0;border:1px solid var(--fio-claro);border-radius:2px;background:#fff;
  cursor:pointer;overflow:hidden;aspect-ratio:1;transition:border-color .18s ease;
}
.galeria button:hover{border-color:var(--ouro)}
.galeria button[aria-current=true]{border-color:var(--ouro);border-width:2px}
.galeria img{width:100%;height:100%;object-fit:contain}
@media (max-width:520px){.galeria{grid-template-columns:repeat(4,1fr)}}

/* ---------- busca rápida ---------- */
.abrir-busca{
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:3px;
  color:#CFC4B6;cursor:pointer;padding:.62rem;display:inline-flex;line-height:0;
  transition:border-color .2s ease,color .2s ease;
}
.abrir-busca svg{width:19px;height:19px}
.abrir-busca:hover{border-color:var(--ouro);color:var(--ouro-claro)}

.busca{position:fixed;inset:0;z-index:120;background:rgba(12,10,8,.72);
  backdrop-filter:blur(3px);padding:clamp(1rem,7vh,5rem) var(--gutter) 2rem;overflow-y:auto}
.busca[hidden]{display:none}
.busca-caixa{max-width:720px;margin:0 auto;background:var(--papel-2);
  border-radius:var(--raio);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.busca-campo{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--fio-claro)}
.busca-campo svg{width:20px;height:20px;color:var(--cobre);flex:none}
.busca-campo input{
  flex:1;border:0;outline:0;font:inherit;font-size:1.05rem;color:var(--titulo);
  background:transparent;padding:.45rem 0;min-width:0;
}
.busca-campo input::placeholder{color:#A99C8D}
.fechar-busca{
  border:1px solid var(--fio-claro);background:var(--papel);border-radius:3px;cursor:pointer;
  font-family:var(--titulos);font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fraco);padding:.34rem .55rem;flex:none;
}
.fechar-busca:hover{border-color:var(--cobre);color:var(--cobre-esc)}
.busca-saida{max-height:min(60vh,520px);overflow-y:auto}
.busca-saida:not(.tem){display:none}
.busca-item{
  display:flex;align-items:center;gap:.9rem;padding:.7rem 1.1rem;text-decoration:none;
  border-bottom:1px solid #F1ECE4;
}
.busca-item:hover,.busca-item.aqui{background:#FBF6F0}
.busca-item img,.busca-item .sem-foto{
  width:48px;height:48px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--fio-claro);border-radius:3px;
}
.busca-txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.busca-txt b{font-family:var(--titulos);font-weight:600;font-size:.98rem;color:var(--titulo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busca-txt small{font-size:.76rem;color:var(--fraco);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busca-nada{padding:1.1rem 1.15rem;font-size:.92rem;color:var(--fraco)}
@media (max-width:760px){
  .abrir-busca{padding:.5rem}
  .busca{padding-top:1rem}
  .busca-item img,.busca-item .sem-foto{width:40px;height:40px}
}

/* ---------- fichas técnicas em PDF ---------- */
.fichas{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--fio-claro)}
.fichas h3{font-size:1rem;margin-bottom:.35rem}
.fichas-nota{font-size:.88rem;color:var(--fraco);margin-bottom:1.1rem;max-width:52ch}
.ficha-arq{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;
  border:1px solid var(--fio-claro);border-radius:var(--raio);background:var(--papel-2);
  padding:.85rem 1rem;margin-bottom:.6rem;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ficha-arq:hover{border-color:var(--cobre);transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(92,58,33,.10)}
.ficha-arq > svg{width:26px;height:26px;flex:none;color:var(--cobre)}
.ficha-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.ficha-txt b{font-family:var(--titulos);font-weight:600;font-size:.95rem;color:var(--titulo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-txt small{font-size:.76rem;color:var(--fraco);letter-spacing:.02em}
.ficha-arq .seta{flex:none}
@media (max-width:520px){
  .ficha-arq .seta{display:none}
}

/* imagem de abertura dentro do texto de uma página */
.texto > p > img:only-child{
  width:100%;height:auto;border-radius:var(--raio);
  margin:.4rem 0 2.2rem;box-shadow:0 18px 44px rgba(92,58,33,.14);
}