/* =========================================================
   Délicat · folha de estilo principal
   Rebranding: o teal e o rosa do logo antigo foram rebaixados
   para um verde acinzentado (sage) e um rosa empoeirado, que
   agora só aparecem em detalhe. A página é osso, tinta e ar.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&display=swap');

:root{
  /* marca */
  --sage:#7A928A;           /* antes #69C4B7, dessaturado */
  --sage-esc:#5E756E;
  --sage-cla:#A9BDB6;
  --sage-vel:#EDF1EF;       /* véu, para fundos de seção */
  --rosa:#C1A09B;           /* antes #F39FB1, dessaturado */
  --rosa-vel:#F4EDEB;

  /* superfícies */
  --papel:#FFFFFF;
  --osso:#F7F5F1;           /* fundo das fotos e das seções calmas */
  --osso-fundo:#FBFAF8;

  /* texto */
  --tinta:#1C1B19;
  --tinta-md:#5C5952;
  --tinta-cl:#9A968D;

  /* estrutura */
  --linha:rgba(28,27,25,.13);
  --linha-sutil:rgba(28,27,25,.06);
  --alerta:#8C4A3A;

  /* tipografia */
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* medidas */
  --max:1340px;
  --pad:clamp(1.15rem, 4vw, 3.5rem);
  --header-h:66px;
  --r:2px;

  --sombra:0 1px 2px rgba(28,27,25,.04), 0 10px 34px rgba(28,27,25,.06);
  --sombra-lg:0 24px 70px rgba(28,27,25,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.trava{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--sage); color:#fff}
:focus-visible{outline:2px solid var(--sage); outline-offset:3px; border-radius:1px}

.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.pular{position:absolute; left:-9999px}
.pular:focus{left:1rem; top:1rem; z-index:200; background:var(--tinta); color:#fff; padding:.7rem 1.1rem}

/* ---------- tipografia utilitária ---------- */
.olho{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-cl);
}
.titulo-secao{
  font-size:clamp(1.35rem,3vw,1.9rem); font-weight:200; letter-spacing:.01em;
  line-height:1.2; margin:0;
}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linha-sutil);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.topo.colado{box-shadow:0 1px 20px rgba(28,27,25,.05); border-color:var(--linha)}
.topo__int{
  height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem; position:relative;
}
.topo__esq{display:flex; align-items:center; gap:.4rem; justify-self:start}
.acoes{display:flex; align-items:center; gap:.2rem; justify-self:end}

/* marca: o gato do logo + a palavra em caixa alta espaçada */
.marca{display:flex; align-items:center; gap:.62rem; justify-self:center}
.marca img{height:34px; width:auto}
.marca__nome{
  font-size:.82rem; letter-spacing:.34em; text-transform:uppercase;
  font-weight:300; color:var(--tinta); padding-left:.06em;
}

.nav{display:flex; align-items:center; gap:1.8rem}
.nav a, .nav button{
  font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; font-weight:400;
  color:var(--tinta-md); position:relative; padding:.35rem 0; transition:color .2s;
}
.nav a::after, .nav button::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--sage); transition:width .32s var(--ease);
}
.nav a:hover, .nav button:hover{color:var(--tinta)}
.nav a:hover::after, .nav a.ativo::after, .nav button:hover::after{width:100%}
.nav a.ativo{color:var(--tinta)}

/* =========================================================
   MENU SUSPENSO DAS MARCAS
   Cada categoria do topo abre um painel com a categoria inteira
   de um lado e as marcas dela do outro. O painel só existe se a
   categoria tiver marca com peça: quem monta é o app.js.
   ========================================================= */
.nav__item{position:relative; display:flex; align-items:center}
.nav__item > a::after{background:var(--sage)}

.mega{
  /* ancorado na borda esquerda do item: centralizar jogava o painel
     para fora da tela, porque o menu fica encostado na lateral */
  position:absolute; top:calc(100% + .35rem); left:0;
  min-width:250px; z-index:95;
  background:var(--papel); border:1px solid var(--linha-sutil); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(28,27,25,.13);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item:hover .mega, .nav__item.aberto .mega{opacity:1; visibility:visible; transform:none}
/* ponte invisível para o mouse não perder o painel no caminho */
.nav__item::after{content:''; position:absolute; top:100%; left:0; right:0; height:.6rem}

.mega--largo{min-width:520px}
.mega__col{padding:1.3rem 1.5rem}

/* o "ver tudo" abre a lista, com um fio separando das marcas */
.mega__tudo{
  display:flex; align-items:baseline; justify-content:space-between; gap:.9rem;
  font-size:.9rem; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--tinta); padding-bottom:.85rem; margin-bottom:.95rem;
  border-bottom:1px solid var(--linha); transition:color .2s;
}
.mega__tudo::after{display:none}
.mega__tudo:hover{color:var(--sage-esc)}
.mega__tudo i{font-style:normal; font-size:.7rem; color:var(--tinta-cl); flex:none}

.mega__col h4{
  font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; font-weight:500;
  color:var(--tinta-cl); margin:0 0 .9rem;
}
.mega__lista{display:flex; flex-direction:column}
.mega__lista--grade{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 1.4rem;
}
.mega__lista a{
  display:flex; align-items:baseline; justify-content:space-between; gap:.9rem;
  padding:.42rem 0; font-size:.87rem; font-weight:300; letter-spacing:0;
  text-transform:none; color:var(--tinta-md);
  border-bottom:1px solid var(--linha-sutil); transition:color .2s, padding-left .22s var(--ease);
}
.mega__lista a::after{display:none}
.mega__lista a:last-child{border-bottom:0}
.mega__lista a:hover{color:var(--tinta); padding-left:.3rem}
.mega__lista i{font-style:normal; font-size:.7rem; color:var(--tinta-cl); flex:none}

.mega__nota{
  font-size:.72rem; line-height:1.6; color:var(--tinta-cl); font-weight:300;
  margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--linha-sutil);
}

.ico{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:var(--tinta); transition:background .22s var(--ease), transform .22s var(--ease);
}
.ico:hover{background:var(--sage-vel)}
.ico:active{transform:scale(.92)}
.ico svg{width:19px; height:19px}
.menu-btn{display:none}

/* busca expansível dentro do cabeçalho */
.busca{
  position:absolute; inset:0; background:var(--papel);
  display:flex; align-items:center; gap:.85rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.busca.aberta{opacity:1; visibility:visible; transform:none}
.busca input{
  flex:1; border:0; background:none; font-size:1rem; font-weight:300;
  letter-spacing:.01em; padding:.5rem 0;
}
.busca input::placeholder{color:var(--tinta-cl)}
.busca svg{width:19px; height:19px; color:var(--tinta-cl); flex:none}

/* =========================================================
   MENU LATERAL (celular)
   ========================================================= */
.drawer{
  position:fixed; inset:0 auto 0 0; width:min(88vw,370px); z-index:120;
  background:var(--papel); transform:translateX(-101%);
  transition:transform .38s var(--ease); display:flex; flex-direction:column;
  box-shadow:var(--sombra-lg);
}
.drawer.aberto{transform:none}
.drawer__topo{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding-inline:1.4rem; border-bottom:1px solid var(--linha-sutil); flex:none;
}
.drawer__corpo{overflow-y:auto; padding:1.6rem 1.4rem 2.4rem; flex:1}
.drawer__grupo{margin-bottom:1.9rem}
.drawer__grupo h4{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--tinta-cl); margin:0 0 .85rem;
}
.drawer__grupo a{
  display:block; padding:.5rem 0; font-size:.95rem; font-weight:300;
  border-bottom:1px solid var(--linha-sutil); transition:padding-left .22s var(--ease), color .2s;
}
.drawer__grupo a:hover{padding-left:.4rem; color:var(--sage-esc)}
.drawer__pe{
  padding:1.4rem; border-top:1px solid var(--linha-sutil); flex:none;
  display:flex; flex-direction:column; gap:.7rem;
}
.cortina{
  position:fixed; inset:0; background:rgba(28,27,25,.36); z-index:110;
  opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s;
  backdrop-filter:blur(2px);
}
.cortina.aberta{opacity:1; visibility:visible}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; border-radius:var(--r); transition:all .24s var(--ease);
  border:1px solid transparent; text-align:center; line-height:1.2;
}
.btn svg{width:17px; height:17px; flex:none}
.btn--tinta{background:var(--tinta); color:#fff}
.btn--tinta:hover{background:#000}
.btn--zap{background:var(--sage); color:#fff}
.btn--zap:hover{background:var(--sage-esc)}
.btn--linha{border-color:var(--linha); color:var(--tinta); background:transparent}
.btn--linha:hover{border-color:var(--tinta); background:var(--tinta); color:#fff}
.btn--bloco{width:100%}
.btn[disabled]{opacity:.4; pointer-events:none}

/* =========================================================
   ABERTURA
   ========================================================= */
.hero{
  position:relative; background:var(--osso-fundo);
  border-bottom:1px solid var(--linha-sutil);
}
.hero__int{
  display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3.2rem,8vw,6.5rem);
}
.hero--comfoto .hero__int{grid-template-columns:1fr 1fr}
.hero__texto{max-width:34rem}
.hero__olho{margin-bottom:1.5rem}
.hero h1{
  font-size:clamp(2.1rem,6.2vw,3.9rem); font-weight:200; line-height:1.07;
  letter-spacing:-.015em; margin:0 0 1.5rem;
}
.hero h1 em{font-style:italic; font-weight:200}
.hero p{
  font-size:1.02rem; color:var(--tinta-md); font-weight:300;
  max-width:31rem; margin:0 0 2.2rem; line-height:1.75;
}
.hero__acoes{display:flex; flex-wrap:wrap; gap:.7rem}
.hero__foto{
  aspect-ratio:4/5; background:var(--osso); overflow:hidden; border-radius:var(--r);
}
.hero__foto img{width:100%; height:100%; object-fit:cover}

/* marca-d'água do gato, discreta, no canto da abertura */
.hero__gato{
  position:absolute; right:-2%; bottom:-6%; width:min(30vw,300px);
  opacity:.05; pointer-events:none; user-select:none;
}
.hero--comfoto .hero__gato{display:none}

/* tarja de selos */
.selos{
  background:var(--sage-vel); border-bottom:1px solid var(--linha-sutil);
  overflow:hidden;
}
.selos ul{
  list-style:none; margin:0; padding:.95rem 0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:.6rem clamp(1.4rem,4vw,3.4rem);
}
.selos li{
  font-size:.63rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:400; color:var(--sage-esc); display:flex; align-items:center; gap:.55rem;
}
.selos li::before{
  content:''; width:3px; height:3px; border-radius:50%; background:var(--sage);
  flex:none;
}

/* =========================================================
   FILTROS
   ========================================================= */
.filtros{
  position:sticky; top:var(--header-h); z-index:70; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha-sutil); padding-block:.85rem;
}
.filtros__int{display:flex; align-items:center; gap:1rem}
.pills{
  display:flex; gap:.45rem; overflow-x:auto; flex:1; scrollbar-width:none;
  -ms-overflow-style:none; padding-block:.15rem;
}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex:none; padding:.5rem 1.05rem; border:1px solid var(--linha); border-radius:100px;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  color:var(--tinta-md); white-space:nowrap; transition:all .22s var(--ease);
}
.pill:hover{border-color:var(--tinta-cl); color:var(--tinta)}
.pill.ativo{background:var(--tinta); border-color:var(--tinta); color:#fff}
.pill span{opacity:.5; margin-left:.4em; font-size:.94em}

.ordena{
  flex:none; border:1px solid var(--linha); border-radius:100px; padding:.5rem 2rem .5rem 1rem;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-md);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A968D' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center/13px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}

/* =========================================================
   GRADE DE PEÇAS
   ========================================================= */
.contagem{
  padding-block:1.8rem .4rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-cl);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
/* etiqueta da marca escolhida, com o × para voltar ao catálogo todo */
.tira-filtro{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .55rem .3rem .8rem; border-radius:100px;
  background:var(--sage-vel); color:var(--sage-esc);
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  transition:background .2s;
}
.tira-filtro:hover{background:#DFE7E3}
.tira-filtro svg{width:12px; height:12px}

/* marca da peça, ao lado da categoria */
.info__marca{
  margin-left:.6rem; padding-left:.6rem; border-left:1px solid var(--linha);
  color:var(--sage-esc);
}
.grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(1.3rem,2.6vw,2.4rem) clamp(.9rem,2vw,1.8rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}

.card{display:flex; flex-direction:column; position:relative}
.card__midia{position:relative; margin-bottom:.95rem}
.card__foto{
  display:block; position:relative; aspect-ratio:4/5; background:var(--osso);
  overflow:hidden; border-radius:var(--r);
}
.card__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.card__foto img.b{position:absolute; inset:0; opacity:0}
.card:hover .card__foto img.a{opacity:0}
.card:hover .card__foto img.b{opacity:1}
.card:hover .card__foto img{transform:scale(1.035)}
.card__foto.carregando{background:linear-gradient(100deg,var(--osso) 30%,#EFECE7 50%,var(--osso) 70%) var(--osso); background-size:220% 100%; animation:brilho 1.4s linear infinite}
@keyframes brilho{to{background-position:-220% 0}}

.tarja{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  padding:.32rem .68rem; font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; border-radius:var(--r);
  background:rgba(255,255,255,.94); color:var(--tinta); backdrop-filter:blur(4px);
}
.tarja--esgotado{background:rgba(28,27,25,.82); color:#fff}
.tarja--novo{background:var(--sage); color:#fff}

.card__cat{
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-cl); margin-bottom:.4rem;
}
.card__nome{
  font-size:.88rem; font-weight:300; line-height:1.4; margin:0 0 .5rem;
  color:var(--tinta); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  /* duas linhas reservadas: assim os preços da mesma fileira se alinham */
  min-height:2.8em;
}
.card__preco{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap}
.card__preco b{font-size:.96rem; font-weight:400; letter-spacing:.01em}
.card__pix{font-size:.68rem; color:var(--sage-esc); font-weight:400}
.card.esgotada .card__foto img{opacity:.42}
.card.esgotada .card__preco b{color:var(--tinta-cl); text-decoration:line-through; text-decoration-thickness:1px}

/* botão de WhatsApp que aparece sobre a foto ao passar o mouse */
.card__zap{
  position:absolute; right:.65rem; bottom:.65rem; z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.95); color:var(--sage-esc); box-shadow:var(--sombra);
  opacity:0; transform:translateY(6px); transition:all .26s var(--ease);
}
.card__midia:hover .card__zap, .card__zap:focus-visible{opacity:1; transform:none}
.card__zap:hover{background:var(--sage); color:#fff}
.card__zap svg{width:18px; height:18px}

/* estado vazio */
.vazio{
  grid-column:1/-1; text-align:center; padding:clamp(3.5rem,10vw,7rem) 1rem;
}
.vazio img{width:72px; margin:0 auto 1.6rem; opacity:.32}
.vazio h3{font-size:1.15rem; font-weight:300; margin:0 0 .6rem}
.vazio p{color:var(--tinta-md); font-size:.92rem; margin:0 0 1.8rem}

/* =========================================================
   PÁGINA DA PEÇA
   ========================================================= */
.migalha{
  padding-block:1.5rem .3rem; font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-cl);
}
.migalha a:hover{color:var(--tinta)}
.migalha span{margin-inline:.5rem; opacity:.5}

.peca{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  padding-block:1.6rem clamp(3rem,7vw,5.5rem); align-items:start;
}
.galeria{display:grid; gap:.7rem; position:sticky; top:calc(var(--header-h) + 1.4rem)}
.galeria__principal{
  aspect-ratio:4/5; background:var(--osso); overflow:hidden; border-radius:var(--r);
  cursor:zoom-in; position:relative;
}
.galeria__principal img{width:100%; height:100%; object-fit:cover}
.galeria__tiras{display:flex; gap:.55rem; overflow-x:auto; scrollbar-width:none}
.galeria__tiras::-webkit-scrollbar{display:none}
.galeria__tiras button{
  flex:none; width:72px; aspect-ratio:4/5; background:var(--osso); overflow:hidden;
  border-radius:var(--r); opacity:.5; transition:opacity .22s var(--ease), box-shadow .22s;
}
.galeria__tiras button.ativo{opacity:1; box-shadow:inset 0 0 0 1px var(--tinta)}
.galeria__tiras button:hover{opacity:1}
.galeria__tiras img{width:100%; height:100%; object-fit:cover}

.info__cat{margin-bottom:.9rem}
.info h1{
  font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:200; line-height:1.18;
  letter-spacing:-.01em; margin:0 0 .5rem;
}
.info__cod{
  font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-cl); margin-bottom:1.7rem;
}
.precos{
  display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap;
  padding-bottom:1.5rem; margin-bottom:1.7rem; border-bottom:1px solid var(--linha-sutil);
}
.precos__valor{font-size:1.85rem; font-weight:300; letter-spacing:-.01em}
.precos__pix{
  font-size:.8rem; color:var(--sage-esc); font-weight:400;
  background:var(--sage-vel); padding:.32rem .75rem; border-radius:100px;
}
.precos.esgotado .precos__valor{color:var(--tinta-cl); text-decoration:line-through}

.aros{margin-bottom:1.7rem}
.aros__rotulo{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-md); margin-bottom:.75rem; font-weight:500;
}
.aros__lista{display:flex; flex-wrap:wrap; gap:.45rem}
.aro{
  min-width:44px; padding:.55rem .8rem; border:1px solid var(--linha); border-radius:var(--r);
  font-size:.78rem; font-weight:300; text-align:center; transition:all .2s var(--ease);
}
.aro:hover{border-color:var(--tinta)}
.aro.ativo{background:var(--tinta); border-color:var(--tinta); color:#fff}
.aro.fora{opacity:.34; pointer-events:none; text-decoration:line-through}

.acoes-peca{display:grid; gap:.65rem; margin-bottom:1.9rem}
.acoes-peca .aviso{
  font-size:.72rem; color:var(--tinta-cl); text-align:center; line-height:1.5;
}

.descricao{
  font-size:.93rem; line-height:1.85; color:var(--tinta-md); font-weight:300;
  white-space:pre-line; margin-bottom:1.9rem;
}

/* sanfona de informações */
.sanfona{border-top:1px solid var(--linha-sutil)}
.sanfona__item{border-bottom:1px solid var(--linha-sutil)}
.sanfona__cab{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:500; text-align:left;
}
.sanfona__cab svg{width:15px; height:15px; flex:none; transition:transform .3s var(--ease); color:var(--tinta-cl)}
.sanfona__item.aberto .sanfona__cab svg{transform:rotate(45deg)}
.sanfona__corpo{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease);
}
.sanfona__item.aberto .sanfona__corpo{grid-template-rows:1fr}
.sanfona__corpo>div{overflow:hidden}
.sanfona__corpo p{
  font-size:.88rem; line-height:1.8; color:var(--tinta-md); margin:0 0 1.1rem; font-weight:300;
}

/* lightbox da foto */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(28,27,25,.94);
  display:grid; place-items:center; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.aberto{opacity:1; visibility:visible}
.lightbox img{max-width:92vw; max-height:90vh; object-fit:contain}
.lightbox__fechar{position:absolute; top:1.3rem; right:1.5rem; color:#fff; font-size:1.9rem; line-height:1}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); color:#fff;
  width:48px; height:48px; display:grid; place-items:center; opacity:.7;
}
.lightbox__nav:hover{opacity:1}
.lightbox__nav.ant{left:1rem}
.lightbox__nav.prox{right:1rem}
.lightbox__nav svg{width:26px; height:26px}

/* relacionadas */
.relacionadas{
  padding-block:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--linha-sutil);
}
.relacionadas__cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1.8rem;
}

/* =========================================================
   FAIXA EDITORIAL
   ========================================================= */
.faixa{
  background:var(--osso); border-block:1px solid var(--linha-sutil);
  padding-block:clamp(3rem,7vw,5.5rem); text-align:center;
}
.faixa__int{max-width:44rem; margin-inline:auto}
.faixa img{width:64px; margin:0 auto 1.8rem; opacity:.55}
.faixa h2{
  font-size:clamp(1.3rem,3.2vw,1.85rem); font-weight:200; line-height:1.35;
  margin:0 0 1.1rem; letter-spacing:-.005em;
}
.faixa p{color:var(--tinta-md); font-size:.96rem; line-height:1.8; margin:0 0 2rem}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{background:var(--tinta); color:#EDEBE7; padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.rodape__grade{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.rodape__marca img{width:150px; margin-bottom:1.3rem}
.rodape__marca p{
  font-size:.85rem; line-height:1.8; color:rgba(237,235,231,.62); font-weight:300;
  max-width:23rem; margin:0;
}
.rodape h4{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:rgba(237,235,231,.5); margin:0 0 1.1rem;
}
.rodape__col a, .rodape__col p{
  display:block; font-size:.85rem; font-weight:300; color:rgba(237,235,231,.8);
  padding:.28rem 0; margin:0; transition:color .2s;
}
.rodape__col a:hover{color:#fff}
.rodape__fim{
  padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem;
  align-items:center; justify-content:space-between;
}
.rodape__fim p{
  font-size:.7rem; color:rgba(237,235,231,.42); margin:0; font-weight:300;
}
.sociais{display:flex; gap:.5rem}
.sociais a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:rgba(237,235,231,.8); transition:all .22s var(--ease);
}
.sociais a:hover{background:#fff; color:var(--tinta); border-color:#fff}
.sociais svg{width:17px; height:17px}

/* =========================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================= */
.zap-flut{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:80;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--sage); color:#fff; box-shadow:0 6px 26px rgba(28,27,25,.22);
  transition:transform .26s var(--ease), background .26s;
}
.zap-flut:hover{background:var(--sage-esc); transform:scale(1.06)}
.zap-flut svg{width:26px; height:26px}
.zap-flut.recolhido{opacity:0; visibility:hidden; transform:scale(.7) translateY(10px)}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1000px){
  .peca{grid-template-columns:1fr; gap:2rem}
  .galeria{position:static}
  .rodape__grade{grid-template-columns:1fr 1fr; gap:2.4rem}
  .rodape__marca{grid-column:1/-1}
}
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:grid}
  .hero--comfoto .hero__int{grid-template-columns:1fr}
  .hero__foto{aspect-ratio:3/2; order:-1}
  .marca img{height:30px}
  .marca__nome{font-size:.74rem; letter-spacing:.3em}
}
@media (max-width:560px){
  :root{--header-h:58px}
  .grade{grid-template-columns:repeat(2,1fr); gap:1.4rem .8rem}
  .card__nome{font-size:.8rem}
  .card__preco b{font-size:.88rem}
  .card__zap{display:none}
  .galeria__tiras button{width:60px}
  .precos__valor{font-size:1.55rem}
  .rodape__grade{grid-template-columns:1fr}
  .selos ul{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-inline:var(--pad)}
  .selos li{white-space:nowrap}
  .filtros__int{gap:.6rem}
  .ordena{padding:.5rem 1.7rem .5rem .8rem}
  .hero__acoes{display:grid; grid-template-columns:1fr; gap:.6rem}
  .card__nome{min-height:2.8em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* aparece conforme rola */
.surge{opacity:0; transform:translateY(14px)}
.surge.visivel{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}