/* =========================================================
   B. Outlet · folha de estilo principal
   Marinho do logo (#051F58) sobre base marfim quente e areia.
   ========================================================= */

@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;1,400&display=swap');

:root{
  /* marca */
  --marinho:#051F58;
  --marinho-esc:#03153D;
  --marinho-cla:#0C3183;
  --areia:#B39A76;          /* bronze suave, só em detalhe */
  --osso:#F4F3F1;           /* fundo das fotos */
  --papel:#FFFFFF;          /* branco, como na referência */
  --branco:#FFFFFF;

  /* texto */
  --tinta:#1A1917;
  --tinta-md:#57534C;
  --tinta-cl:#98938A;

  /* estrutura */
  --linha:rgba(26,25,23,.14);
  --linha-sutil:rgba(26,25,23,.07);
  --alerta:#8C3A2E;

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

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

  --sombra:0 1px 2px rgba(26,25,23,.04), 0 8px 30px rgba(26,25,23,.07);
  --sombra-lg:0 24px 70px rgba(26,25,23,.2);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* o atributo hidden precisa vencer qualquer classe com display próprio */
[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(--marinho); color:#fff}

:focus-visible{outline:2px solid var(--marinho); 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(--marinho); color:#fff; padding:.7rem 1.1rem}

/* ---------- tipografia utilitária ---------- */
.olho{
  font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-cl);
}
.serif{font-family:var(--display); font-weight:300}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.88); 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(26,25,23,.06); border-color:var(--linha)}
.topo__int{
  height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem;
}
.topo__esq{display:flex; align-items:center; gap:.6rem; justify-self:start}
.marca{display:flex; align-items:center; justify-self:center}
.marca img{height:30px; width:auto}
.nav{display:flex; align-items:center; gap:1.9rem}
.nav a{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  color:var(--tinta-md); position:relative; padding:.35rem 0; transition:color .2s;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--areia); transition:width .32s var(--ease);
}
.nav a:hover{color:var(--marinho)}
.nav a:hover::after,.nav a.ativo::after{width:100%}
.nav a.ativo{color:var(--marinho)}

.acoes{display:flex; align-items:center; gap:.35rem; justify-self:end}
.ico{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:var(--marinho); transition:background .22s var(--ease), transform .22s var(--ease);
}
.ico:hover{background:rgba(5,31,88,.07)}
.ico:active{transform:scale(.92)}
.ico svg{width:19px; height:19px}
.menu-btn{display:none}

/* busca expansível */
.busca{
  position:absolute; inset:0; background:var(--papel);
  display:flex; align-items:center; gap:.85rem; padding-inline:var(--pad);
  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-family:var(--sans); font-weight:300;
  padding:.5rem 0; min-width:0;
}
.busca input::placeholder{color:var(--tinta-cl)}
.busca input:focus{outline:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:clamp(2rem,4.5vw,4rem) 0 clamp(2.2rem,4.5vw,3.4rem);
  background:var(--papel);
}
.hero__grade{
  display:grid; grid-template-columns:1fr 1.02fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__texto{text-align:left; max-width:34rem}
.hero__foto{
  margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--osso);
  border-radius:var(--r);
}
.hero__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  animation:revela 1.1s var(--ease);
}
@keyframes revela{from{opacity:0; transform:scale(1.04)}}
.hero__olho{margin-bottom:1.7rem}
.hero h1{
  font-family:var(--display); font-weight:200; margin:0 0 1.4rem;
  font-size:clamp(1.95rem, 4.4vw, 3.3rem); line-height:1.16;
  letter-spacing:-.022em; color:var(--marinho);
}
.hero h1 em{font-style:italic; font-weight:300}
.hero p{
  max-width:44ch; margin:0; color:var(--tinta-md);
  font-size:clamp(.92rem,1.4vw,1.02rem); font-weight:300;
}
.hero__cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.98rem 2.1rem; border-radius:var(--r);
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; font-weight:400;
  transition:transform .2s var(--ease), background .22s, color .22s, box-shadow .25s;
  white-space:nowrap;
}
.btn svg{width:16px; height:16px; flex:none}
.btn--cheio{background:var(--marinho); color:#fff}
.btn--cheio:hover{background:var(--marinho-cla); box-shadow:0 12px 30px rgba(5,31,88,.2)}
.btn--vazio{border:1px solid var(--linha); color:var(--marinho)}
.btn--vazio:hover{background:var(--marinho); color:#fff; border-color:var(--marinho)}
.btn--zap{background:#128C7E; color:#fff}
.btn--zap:hover{background:#0E7365; box-shadow:0 10px 26px rgba(18,140,126,.3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4; pointer-events:none}

/* tarja editorial de garantias */
.tarja{border-block:1px solid var(--linha-sutil); background:var(--papel)}
.tarja__int{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:1.15rem;
}
.tarja__item{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding-inline:1rem; text-align:left; position:relative;
}
.tarja__item + .tarja__item::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--linha-sutil);
}
.tarja__item svg{width:16px; height:16px; color:var(--areia); flex:none}
.tarja__item span{
  font-size:.68rem; letter-spacing:.06em; color:var(--tinta-md);
  font-weight:400; line-height:1.35;
}

/* =========================================================
   BARRA DE FILTROS
   ========================================================= */
.secao{padding:clamp(2.6rem,6vw,4.2rem) 0}
.secao__cab{margin-bottom:2rem; text-align:center}
.secao__cab h2{
  font-family:var(--display); font-weight:250; letter-spacing:-.015em;
  font-size:clamp(1.45rem,2.9vw,2.1rem); margin:.7rem 0 0; color:var(--marinho);
}
.secao__cab::after{
  content:''; display:block; width:38px; height:1px; background:var(--areia);
  margin:1.5rem auto 0;
}

.filtros{
  position:sticky; top:var(--header-h); z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-block:1px solid var(--linha-sutil); padding-block:.85rem; margin-bottom:2.2rem;
}
.filtros__int{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.pills{display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; padding:2px}
.selects{display:flex; gap:.5rem; flex:none}
.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:.18em; text-transform:uppercase; font-weight:400;
  color:var(--tinta-md); transition:all .22s var(--ease); white-space:nowrap;
}
.pill:hover{border-color:var(--marinho); color:var(--marinho)}
.pill.ativo{background:var(--marinho); border-color:var(--marinho); color:#fff}

.ordena{
  display:flex; align-items:center; gap:.4rem; flex:none;
  border:1px solid var(--linha); border-radius:100px; padding:.42rem .5rem .42rem .95rem;
}
.ordena svg{width:14px; height:14px; color:var(--tinta-cl); flex:none}
.ordena select{
  border:0; background:none; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-md); cursor:pointer; padding-right:.4rem;
}
.ordena select:focus{outline:none}

.contagem{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-cl); margin-bottom:1.5rem;
}
.contagem b{color:var(--marinho); font-weight:500}

/* =========================================================
   GRADE DE PRODUTOS
   ========================================================= */
.grade{
  display:grid; gap:clamp(1.6rem,3.4vw,3.2rem) clamp(.8rem,1.8vw,1.8rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 235px), 1fr));
}
.card{position:relative; animation:sobe .5s var(--ease) backwards}
@keyframes sobe{from{opacity:0; transform:translateY(14px)}}

.card__foto{
  display:block; width:100%; padding:0;
  position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--osso);
  border-radius:var(--r); margin-bottom:.9rem;
}
.card__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease), opacity .6s var(--ease);
}
.card__foto img.alt{position:absolute; inset:0; opacity:0}
.card:hover .card__foto img.pri{transform:scale(1.045)}
.card:hover .card__foto img.alt{opacity:1; transform:scale(1.045)}
.card__foto--vazia{display:grid; place-items:center; color:var(--tinta-cl)}
.card__foto--vazia svg{width:34px; height:34px; opacity:.4}

.selo{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:.38rem .72rem; border-radius:1px; backdrop-filter:blur(8px);
  background:rgba(255,255,255,.93); color:var(--marinho);
  border:1px solid rgba(5,31,88,.14);
}
.selo--unica{background:rgba(5,31,88,.93); color:#fff; border-color:transparent}

.esgotado{
  position:absolute; inset:0; background:rgba(255,255,255,.78);
  display:grid; place-items:center; z-index:3; backdrop-filter:grayscale(1) blur(1px);
}
.esgotado span{
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--marinho); color:var(--marinho); padding:.5rem 1.1rem;
  background:rgba(255,255,255,.94);
}

.card__marca{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-cl); margin-bottom:.28rem}
.card__nome{
  font-family:var(--display); font-size:.9rem; font-weight:400; line-height:1.45;
  margin:0 0 .45rem; color:var(--tinta); letter-spacing:-.005em;
}
.card__nome a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  background-image:linear-gradient(var(--areia),var(--areia));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s var(--ease);
}
.card:hover .card__nome a{background-size:100% 1px}
.precos{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap}
.preco-de{font-size:.76rem; color:var(--tinta-cl); text-decoration:line-through; text-decoration-thickness:.5px}
.preco-por{font-size:.95rem; font-weight:500; color:var(--marinho)}
.off-txt{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--areia); font-weight:500}
.card__tam{font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-cl); margin-top:.42rem}
.card__tam s{text-decoration-thickness:1px; opacity:.42}

.vazio{text-align:center; padding:4.5rem 1rem; grid-column:1/-1}
.vazio svg{width:40px; height:40px; color:var(--tinta-cl); opacity:.45; margin-bottom:1.2rem}
.vazio h3{font-family:var(--display); font-weight:300; font-size:1.5rem; margin:0 0 .5rem; color:var(--marinho)}
.vazio p{color:var(--tinta-md); margin:0 0 1.6rem; font-weight:300}

/* =========================================================
   FICHA DO PRODUTO (modal)
   ========================================================= */
.ficha{
  position:fixed; inset:0; z-index:120; display:none;
  padding:clamp(0px,3vh,2.5rem) clamp(0px,3vw,2rem);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ficha.aberta{display:block}
.ficha__fundo{
  position:absolute; inset:0; background:rgba(26,25,23,.42);
  backdrop-filter:blur(5px); animation:aparece .3s var(--ease);
}
@keyframes aparece{from{opacity:0}}
.ficha__caixa--simples{
  grid-template-columns:1fr !important; max-width:560px !important;
  max-height:none !important; height:auto !important;
  margin:auto; overflow:visible;
}
.ficha__caixa{
  position:relative; margin:auto; max-width:1060px; width:100%; height:100%;
  max-height:min(100%, 760px); background:var(--papel); border-radius:var(--r);
  box-shadow:var(--sombra-lg); overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr;
  animation:entra .42s var(--ease);
}
@keyframes entra{from{opacity:0; transform:translateY(22px) scale(.985)}}

.ficha__fechar{
  position:absolute; top:.9rem; right:.9rem; z-index:6;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:var(--marinho); box-shadow:var(--sombra);
  transition:transform .2s var(--ease), background .2s;
}
.ficha__fechar:hover{background:#fff; transform:rotate(90deg)}
.ficha__fechar svg{width:17px; height:17px}

/* galeria */
.gal{position:relative; background:var(--osso); display:flex; flex-direction:column; min-height:0}
.gal__palco{position:relative; flex:1; min-height:0; overflow:hidden}
.gal__palco img{width:100%; height:100%; object-fit:cover; animation:aparece .35s var(--ease)}
.gal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:var(--marinho); box-shadow:var(--sombra);
  transition:background .2s, opacity .2s;
}
.gal__nav:hover{background:#fff}
.gal__nav--ant{left:.8rem}
.gal__nav--prox{right:.8rem}
.gal__nav svg{width:16px; height:16px}
.gal__minis{display:flex; gap:.45rem; padding:.7rem; overflow-x:auto; scrollbar-width:none; flex:none}
.gal__minis::-webkit-scrollbar{display:none}
.gal__minis button{
  flex:none; width:52px; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
  border:1px solid transparent; opacity:.55; transition:all .22s var(--ease);
}
.gal__minis button.ativo{opacity:1; border-color:var(--marinho)}
.gal__minis img{width:100%; height:100%; object-fit:cover}

/* detalhes */
.det{padding:clamp(1.5rem,3.2vw,2.8rem); overflow-y:auto; display:flex; flex-direction:column}
.det__marca{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-cl); margin-bottom:.55rem}
.det h2{
  font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.28; margin:0 0 1.1rem; color:var(--marinho); letter-spacing:-.015em;
}
.det__precos{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.35rem}
.det__precos .preco-de{font-size:1rem}
.det__precos .preco-por{font-size:1.75rem; font-weight:500}
.det__off{
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  background:var(--marinho); color:#fff; padding:.3rem .6rem; border-radius:2px;
}
.det__economia{font-size:.8rem; color:var(--tinta-md); font-weight:300; margin-bottom:1.5rem}
.det__parcela{color:var(--tinta-cl)}

.bloco{padding-block:1.15rem; border-top:1px solid var(--linha-sutil)}
.bloco__tit{font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-cl); margin-bottom:.7rem}
.det__desc{font-size:.93rem; color:var(--tinta-md); font-weight:300; line-height:1.72; white-space:pre-line}

.tams{display:flex; gap:.45rem; flex-wrap:wrap}
.tam{
  min-width:46px; padding:.6rem .8rem; border:1px solid var(--linha); border-radius:2px;
  font-size:.76rem; font-weight:500; text-align:center; letter-spacing:.06em;
  transition:all .2s var(--ease);
}
.tam:hover{border-color:var(--marinho)}
.tam.ativo{background:var(--marinho); border-color:var(--marinho); color:#fff}

.fatos{display:grid; gap:.55rem}
.fato{display:flex; justify-content:space-between; gap:1rem; font-size:.83rem}
.fato dt{color:var(--tinta-cl); font-weight:400}
.fato dd{margin:0; color:var(--tinta); font-weight:400; text-align:right}

.det__pe{margin-top:auto; padding-top:1.4rem; display:grid; gap:.6rem}
.det__pe .btn{width:100%; padding-block:1.05rem}
.det__linha2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.det__aviso{
  font-size:.72rem; color:var(--tinta-cl); text-align:center; font-weight:300;
  margin-top:.25rem; line-height:1.5;
}

/* =========================================================
   COMO COMPRAR
   ========================================================= */
.passos{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  max-width:960px; margin-inline:auto;
}
.passo{text-align:center; position:relative}
.passo__n{
  font-family:var(--display); font-size:1.9rem; line-height:1; color:var(--marinho);
  opacity:.26; margin-bottom:.9rem; font-weight:200;
}
.passo h3{
  font-family:var(--display); font-weight:400; font-size:1.02rem; margin:0 0 .55rem; color:var(--marinho);
}
.passo p{font-size:.9rem; color:var(--tinta-md); font-weight:300; margin:0; line-height:1.7}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{background:var(--marinho); color:var(--osso); padding:clamp(3rem,6vw,4.5rem) 0 2rem; margin-top:clamp(2rem,5vw,4rem)}
.rodape__grade{
  display:grid; gap:2.6rem; grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:2.8rem; border-bottom:1px solid rgba(239,235,227,.16);
}
.rodape__marca img{height:38px; width:auto; margin-bottom:1.1rem}
.rodape__marca p{font-size:.88rem; opacity:.72; font-weight:300; max-width:34ch; margin:0 0 1.4rem; line-height:1.75}
.rodape h4{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; opacity:.55; margin:0 0 1.1rem; font-weight:500}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.rodape li a,.rodape li span{font-size:.88rem; opacity:.82; font-weight:300; transition:opacity .2s; display:inline-flex; align-items:center; gap:.5rem}
.rodape li a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.rodape li svg{width:15px; height:15px; flex:none; opacity:.8}

.social{display:flex; gap:.5rem}
.social a{
  width:40px; height:40px; border:1px solid rgba(239,235,227,.26); border-radius:50%;
  display:grid; place-items:center; transition:all .25s var(--ease);
}
.social a:hover{background:var(--osso); color:var(--marinho); border-color:var(--osso); transform:translateY(-2px)}
.social svg{width:17px; height:17px}

.pagto{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem}
.pagto span{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(239,235,227,.26); padding:.3rem .6rem; border-radius:2px; opacity:.75;
}
.rodape__fim{
  padding-top:1.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.72rem; opacity:.55; font-weight:300;
}

/* =========================================================
   BOTÃO FLUTUANTE
   ========================================================= */
.fab{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:80;
  height:54px; padding-inline:1.1rem; border-radius:100px; background:#128C7E; color:#fff;
  display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 28px rgba(18,140,126,.36);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
  transform:translateY(120%); opacity:0;
}
.fab.vis{transform:none; opacity:1}
.fab:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(18,140,126,.45)}
.fab svg{width:24px; height:24px; flex:none}
.fab span{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500}

/* toast */
.toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,140%); z-index:200;
  background:var(--marinho); color:#fff; padding:.85rem 1.5rem; border-radius:100px;
  font-size:.78rem; letter-spacing:.05em; box-shadow:var(--sombra-lg);
  transition:transform .4s var(--ease); white-space:nowrap;
}
.toast.vis{transform:translate(-50%,0)}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:960px){
  .ficha__caixa{grid-template-columns:1fr; max-height:100%; border-radius:0}
  .gal{max-height:56vh}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:1/-1}
}
@media (max-width:860px){
  /* no celular a imagem vem primeiro, como nas marcas de moda */
  .hero__grade{grid-template-columns:1fr; gap:1.8rem}
  .hero__foto{order:-1; aspect-ratio:4/5; max-height:56vh}
  .hero__texto{text-align:center; max-width:none; margin-inline:auto}
  .hero p{margin-inline:auto}
  .hero__cta{justify-content:center; margin-top:1.7rem}
  .hero{padding-top:1.2rem}
}
@media (max-width:760px){
  :root{--header-h:56px; --pad:1rem}
  body{font-size:15px}
  .tarja__int{grid-template-columns:1fr 1fr; padding-block:.9rem}
  .tarja__item{padding:.5rem .7rem; gap:.45rem}
  .tarja__item span{font-size:.63rem}
  .tarja__item:nth-child(3)::before{display:none}
  .marca img{height:26px}
  .ico{width:34px; height:34px}
  .ico svg{width:17px; height:17px}
  .nav{display:none}
  .menu-btn{display:grid}
  /* dois ícones de cada lado, com o logo no meio */
  #linkInsta{display:none}
  .topo__esq{gap:.15rem}
  .acoes{gap:.15rem}
  .topo__int{grid-template-columns:1fr auto 1fr}
  .grade{grid-template-columns:repeat(2,1fr); gap:1.3rem .7rem}
  .card__nome{font-size:.8rem; line-height:1.4}
  .card__marca{font-size:.55rem; letter-spacing:.16em}
  .preco-por{font-size:.86rem}
  .preco-de{font-size:.68rem}
  .off-txt{font-size:.55rem}
  .preco-alt{font-size:.67rem}
  .card__tam{font-size:.57rem}
  .secao{padding-block:2.2rem}
  .secao__cab{margin-bottom:1.4rem}
  .vitrine__trilho{grid-auto-columns:minmax(144px,168px)}
  .catcard__nome{font-size:.98rem}
  .btn{padding:.82rem 1.4rem; font-size:.63rem; letter-spacing:.16em}
  .contagem{font-size:.6rem; margin-bottom:1rem}
  .pill{font-size:.62rem; padding:.44rem .85rem}
  .ordena{padding:.38rem .45rem .38rem .8rem}
  .ordena select{font-size:.63rem}
  .filtros__int{gap:.6rem}
  .selects{width:100%}
  .ordena{flex:1; justify-content:center; padding-inline:.7rem}
  .ordena select{max-width:100%; text-overflow:ellipsis}
  .det__linha2{grid-template-columns:1fr}
  .fab{height:50px}
  .fab span{display:none}
  .fab{padding-inline:0; width:54px; justify-content:center}
}
@media (max-width:420px){
  .grade{gap:1.3rem .65rem}
  .hero__cta{display:grid; grid-template-columns:1fr; gap:.6rem; width:100%}
  .hero__cta .btn{width:100%; padding-block:.88rem}
}

/* menu mobile */
.gaveta{
  position:fixed; inset:0; z-index:110; visibility:hidden; pointer-events:none;
}
.gaveta.aberta{visibility:visible; pointer-events:auto}
.gaveta__fundo{position:absolute; inset:0; background:rgba(26,25,23,.4); opacity:0; transition:opacity .3s}
.gaveta.aberta .gaveta__fundo{opacity:1}
.gaveta__painel{
  position:absolute; inset-block:0; left:0; width:min(84vw,340px); background:var(--papel);
  transform:translateX(-100%); transition:transform .38s var(--ease);
  padding:1.4rem var(--pad); display:flex; flex-direction:column; gap:.2rem;
}
.gaveta.aberta .gaveta__painel{transform:none}
.gaveta__topo{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.8rem}
.gaveta__topo img{height:26px; width:auto}
.gaveta__painel a.item{
  font-family:var(--display); font-size:1.05rem; font-weight:300; padding:.75rem 0; color:var(--marinho);
  border-bottom:1px solid var(--linha-sutil);
}
.gaveta__pe{margin-top:auto; display:grid; gap:.6rem}

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

/* =========================================================
   PÁGINA DE PRODUTO
   ========================================================= */
.trilha{
  padding:1.6rem 0 .4rem; font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-cl); opacity:.85;
}
.trilha a{transition:color .2s}
.trilha a:hover{color:var(--marinho)}
.trilha span{opacity:.5; padding-inline:.5rem}

.pp{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  padding-block:clamp(1.4rem,3vw,2.6rem) clamp(3rem,6vw,5rem);
}

/* ---- galeria ---- */
.pgal{display:grid; gap:.7rem}
.pgal__principal{
  position:relative; aspect-ratio:3/4; background:var(--osso);
  border-radius:var(--r); overflow:hidden; cursor:zoom-in;
}
.pgal__principal img{width:100%; height:100%; object-fit:cover; animation:aparece .4s var(--ease)}
.pgal__vazia{display:grid; place-items:center; color:var(--tinta-cl)}
.pgal__vazia svg{width:44px; height:44px; opacity:.4}
.pgal__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--marinho); box-shadow:var(--sombra);
  transition:background .2s, transform .2s var(--ease);
}
.pgal__seta:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.pgal__seta--ant{left:.9rem}
.pgal__seta--prox{right:.9rem}
.pgal__seta svg{width:17px; height:17px}
.pgal__tiras{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.55rem}
.pgal__tiras button{
  aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:var(--osso);
  border:1px solid transparent; opacity:.6; transition:all .28s var(--ease);
}
.pgal__tiras button:hover{opacity:.85}
.pgal__tiras button.on{opacity:1; border-color:var(--marinho)}
.pgal__tiras img{width:100%; height:100%; object-fit:cover}

/* lupa */
.lupa{position:fixed; inset:0; z-index:150; background:rgba(26,25,23,.94); display:none; place-items:center; cursor:zoom-out}
.lupa.on{display:grid}
.lupa img{max-width:96vw; max-height:94vh; object-fit:contain; animation:aparece .3s var(--ease)}
.lupa__x{position:absolute; top:1.2rem; right:1.2rem; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.16); color:var(--papel)}
.lupa__x svg{width:20px; height:20px}

/* ---- detalhes ---- */
.pdet{position:sticky; top:calc(var(--header-h) + 1.6rem)}
.pdet__marca{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-cl); margin:0 0 .7rem}
.pdet h1{
  font-family:var(--display); font-weight:250; letter-spacing:-.018em;
  font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.25; margin:0 0 1.4rem; color:var(--marinho);
}
.pdet__selos{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.pdet__selos .selo{position:static}

.pdet__precos{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.45rem}
.pdet__precos .preco-de{font-size:1.02rem}
.pdet__precos .preco-por{font-size:1.6rem; font-weight:500}
.pdet__precos .off-txt{font-size:.66rem}

.pbloco{padding-block:1.5rem; border-top:1px solid var(--linha-sutil)}
.pbloco__tit{font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tinta-cl); margin:0 0 .9rem}
.pdesc{font-size:.95rem; color:var(--tinta-md); font-weight:300; line-height:1.85; white-space:pre-line; margin:0}

.ptams{display:flex; gap:.45rem; flex-wrap:wrap}
.ptam{
  min-width:50px; padding:.68rem .9rem; border:1px solid var(--linha); border-radius:var(--r);
  font-size:.78rem; letter-spacing:.08em; text-align:center; transition:all .22s var(--ease); background:var(--branco);
}
.ptam:hover{border-color:var(--marinho)}
.ptam.on{background:var(--marinho); border-color:var(--marinho); color:var(--papel)}

.pfatos{display:grid; gap:.7rem; margin:0}
.pfato{display:flex; justify-content:space-between; gap:1.2rem; font-size:.85rem; align-items:baseline}
.pfato dt{color:var(--tinta-cl); font-weight:300; white-space:nowrap}
.pfato dd{margin:0; text-align:right; font-weight:400}
.pfato dd::before{content:''; display:inline-block}

.pacoes{padding-top:1.6rem; display:grid; gap:.65rem}
.pacoes .btn{width:100%; padding-block:1.1rem}
.pacoes__dupla{display:grid; grid-template-columns:1fr 1fr; gap:.65rem}

/* sanfona */
.sanf{border-top:1px solid var(--linha-sutil)}
.sanf__bt{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 0; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marinho); text-align:left;
}
.sanf__bt svg{width:15px; height:15px; flex:none; transition:transform .3s var(--ease); color:var(--tinta-cl)}
.sanf__bt[aria-expanded=true] svg{transform:rotate(45deg)}
.sanf__corpo{display:none; padding-bottom:1.3rem}
.sanf__corpo.on{display:block; animation:aparece .3s var(--ease)}

/* relacionados */
.relac{padding-block:clamp(2.6rem,6vw,4.5rem); border-top:1px solid var(--linha-sutil)}

@media (max-width:640px){
  /* no celular o nome já aparece grande logo abaixo */
  .trilha__atual, .trilha__sep2{display:none}
}
@media (max-width:900px){
  .pp{grid-template-columns:1fr; gap:2rem}
  .pdet{position:static}
  .pgal__tiras{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
}
@media (max-width:520px){
  .pacoes__dupla{grid-template-columns:1fr}
}

/* =========================================================
   PREÇO NO PIX E TAMANHOS ESGOTADOS
   ========================================================= */
.preco-pix{
  display:block; width:100%; margin-top:.22rem;
  font-size:.72rem; color:var(--tinta-md); font-weight:400;
}
.preco-pix b{color:var(--marinho); font-weight:500}


.ptam--off{
  position:relative; color:var(--tinta-cl); border-style:dashed; background:transparent;
}
.ptam--off:hover{border-color:var(--tinta-cl); color:var(--tinta-md)}
.ptam--off.on{background:transparent; color:var(--marinho); border-color:var(--marinho); border-style:solid}
.ptam--off.on::after{background:var(--marinho); opacity:.5}
.ptam--off::after{
  content:''; position:absolute; left:12%; right:12%; top:50%;
  height:1px; background:var(--tinta-cl); opacity:.6;
}

/* =========================================================
   AVISE-ME QUANDO VOLTAR
   ========================================================= */
.btn--fino{
  border:1px solid var(--linha); color:var(--marinho); width:100%;
  padding:.82rem 1.2rem; margin-top:.9rem; font-size:.66rem;
}
.btn--fino:hover{border-color:var(--marinho); background:rgba(5,31,88,.04)}
.btn--fino svg{width:15px; height:15px}

.avisar__corpo{padding:clamp(1.8rem,4vw,2.6rem) !important; gap:0}
.avisar__corpo h2{padding-right:3rem}
.avisar__sub{
  font-size:.86rem; color:var(--tinta-md); font-weight:300;
  margin:-.6rem 0 1.6rem; line-height:1.6;
}
.avisar__campo{display:block; margin-bottom:1.1rem}
.avisar__campo > span{
  display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-cl); margin-bottom:.45rem; font-weight:500;
}
.avisar__campo input,.avisar__campo select{
  width:100%; border:1px solid var(--linha); border-radius:var(--r);
  padding:.82rem .95rem; background:var(--branco); font-size:.95rem; font-weight:300;
}
.avisar__campo input:focus,.avisar__campo select:focus{
  outline:none; border-color:var(--marinho); box-shadow:0 0 0 3px rgba(5,31,88,.08);
}
.avisar__campo input.ruim{border-color:var(--alerta)}
.avisar__erro{
  display:block; font-style:normal; font-size:.75rem; color:var(--alerta);
  margin-top:.4rem; min-height:1em;
}
.avisar__nota{
  font-size:.74rem; color:var(--tinta-cl); text-align:center;
  margin:.9rem 0 0; font-weight:300; line-height:1.55;
}
.pcondicao{
  font-size:.78rem; color:var(--tinta-cl); font-weight:300;
  margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--linha-sutil);
}

/* =========================================================
   PREÇO: PIX EM DESTAQUE, PARCELADO COMO APOIO
   ========================================================= */
.preco-tag{
  font-size:.66rem; letter-spacing:.1em; color:var(--tinta-md); font-weight:400;
  margin-left:-.25rem;
}
.preco-alt{
  font-size:.75rem; color:var(--tinta-cl); font-weight:300;
  margin:.28rem 0 0; line-height:1.4;
}
.pdet__precos .preco-tag{font-size:.8rem; margin-left:-.35rem}
.pdet__alt{
  font-size:.88rem; color:var(--tinta-md); font-weight:300;
  margin:.5rem 0 1.9rem; line-height:1.5;
}

/* =========================================================
   MENU SUSPENSO DE CATEGORIAS
   ========================================================= */
.nav{position:static}
.nav__item{position:relative; display:flex; align-items:center}

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--papel); border-top:1px solid var(--linha-sutil);
  box-shadow:0 18px 40px rgba(26,25,23,.09);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:85;
}
.mega.aberto{opacity:1; visibility:visible; transform:none}
.mega__int{
  max-width:var(--max); margin-inline:auto; padding:2.2rem var(--pad) 2.4rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2.4rem;
}
.mega__col h4{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-cl); margin:0 0 1rem; font-weight:500;
}
.mega__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.mega__col a{
  font-size:.87rem; color:var(--tinta-md); font-weight:300;
  transition:color .18s var(--ease); display:inline-block;
}
.mega__col a:hover{color:var(--marinho)}
.mega__col a b{font-weight:400}
.mega__tams{display:flex; flex-wrap:wrap; gap:.4rem}
.mega__tams a{
  min-width:38px; text-align:center; padding:.36rem .55rem;
  border:1px solid var(--linha); border-radius:2px; font-size:.76rem;
}
.mega__tams a:hover{border-color:var(--marinho); color:var(--marinho)}
.mega__todos{
  grid-column:1/-1; padding-top:1.3rem; border-top:1px solid var(--linha-sutil);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--marinho);
}
.mega__todos a{display:inline-flex; align-items:center; gap:.5rem}
.mega__todos a:hover{text-decoration:underline; text-underline-offset:5px}

/* filtros ativos vindos do menu */
.ativos{display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin-bottom:1.1rem}
.ativos__rot{font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-cl)}
.chip-f{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.36rem .5rem .36rem .8rem; border:1px solid var(--linha); border-radius:100px;
  font-size:.72rem; color:var(--marinho); background:var(--branco);
}
.chip-f svg{width:11px; height:11px}
.chip-f:hover{border-color:var(--marinho); background:rgba(5,31,88,.04)}
.chip-f--limpar{border-style:dashed; color:var(--tinta-cl); padding-inline:.8rem}

/* gaveta do celular: sanfona por categoria */
.gav-grupo{border-bottom:1px solid var(--linha-sutil)}
.gav-cab{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 0; font-family:var(--display); font-size:1.05rem; font-weight:300;
  color:var(--marinho); text-align:left;
}
.gav-cab svg{width:14px; height:14px; color:var(--tinta-cl); transition:transform .3s var(--ease)}
.gav-cab[aria-expanded=true] svg{transform:rotate(45deg)}
.gav-corpo{display:none; padding:0 0 1rem .2rem}
.gav-corpo.on{display:block}
.gav-corpo h5{
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-cl); margin:.9rem 0 .55rem; font-weight:500;
}
.gav-corpo ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.gav-corpo a{font-size:.88rem; color:var(--tinta-md); font-weight:300}
.gav-corpo .mega__tams{gap:.35rem}
.gav-corpo .mega__tams a{font-size:.74rem; padding:.3rem .5rem}

@media (max-width:760px){ .mega{display:none} }

/* quando a categoria não tem filtro útil, resta só o atalho */
.mega__int:has(> .mega__todos:only-child){padding-block:1.6rem}
.mega__int > .mega__todos:only-child{border-top:0; padding-top:0}

/* =========================================================
   DESTAQUES (trilho horizontal)
   ========================================================= */
.vitrine{padding-block:clamp(2.4rem,5vw,3.6rem) 0}
.vitrine__cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.4rem;
}
.vitrine__cab h2{
  font-family:var(--display); font-weight:250; letter-spacing:.02em;
  font-size:.7rem; text-transform:uppercase; margin:0; color:var(--tinta-cl);
}
.vitrine__trilho{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(168px, 232px);
  gap:clamp(.8rem,1.8vw,1.6rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.6rem; margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  scrollbar-width:thin; scrollbar-color:var(--linha) transparent;
}
.vitrine__trilho > *{scroll-snap-align:start}
.vitrine__trilho::-webkit-scrollbar{height:3px}
.vitrine__trilho::-webkit-scrollbar-thumb{background:var(--linha); border-radius:3px}
.vitrine__trilho::-webkit-scrollbar-track{background:transparent}
.vitrine .card{animation:none}
.vitrine .card__foto{margin-bottom:.75rem}
.vitrine .card__marca{font-size:.55rem; letter-spacing:.2em; margin-bottom:.3rem}
.vitrine .card__nome{font-size:.8rem; font-weight:300; line-height:1.45; margin-bottom:.3rem}
.vitrine .preco-por{font-size:.82rem; font-weight:400}
.vitrine .precos{gap:.4rem; align-items:baseline}
.vitrine .off-txt{font-size:.56rem}

.setas{display:none; gap:.4rem}
.seta{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linha);
  display:grid; place-items:center; color:var(--marinho); transition:all .2s var(--ease);
}
.seta:hover{border-color:var(--marinho); background:rgba(5,31,88,.04)}
.seta svg{width:14px; height:14px}
@media (hover:hover) and (min-width:761px){ .setas{display:flex} }

/* =========================================================
   CATEGORIAS (lista editorial, sem imagem)
   ========================================================= */
.vitrines-cat{padding-block:clamp(2.6rem,5.5vw,4.2rem)}
.catlista{max-width:620px; margin-inline:auto; border-top:1px solid var(--linha-sutil)}
.catlinha{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.15rem .2rem; border-bottom:1px solid var(--linha-sutil);
  transition:padding-inline .3s var(--ease), color .25s;
}
.catlinha:hover{padding-inline:.7rem .2rem}
.catlinha__nome{
  font-family:var(--display); font-weight:250; letter-spacing:-.012em;
  font-size:clamp(1.25rem,2.4vw,1.65rem); color:var(--marinho);
}
.catlinha__n{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-cl); white-space:nowrap;
}
.cattodos{
  display:block; text-align:center; margin-top:2rem;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--marinho);
}
.cattodos span{
  display:inline-block; padding-bottom:.3rem;
  border-bottom:1px solid var(--areia); transition:border-color .25s;
}
.cattodos:hover span{border-color:var(--marinho)}

/* =========================================================
   CARREGAMENTO POR ROLAGEM
   ========================================================= */
.sentinela{height:1px; margin-top:2rem}

/* =========================================================
   SACOLA
   ========================================================= */
.ico--sacola{position:relative}
.sacola-n{
  position:absolute; top:2px; right:1px; min-width:16px; height:16px;
  border-radius:100px; background:var(--marinho); color:#fff;
  font-size:.58rem; font-weight:600; display:grid; place-items:center;
  padding-inline:4px; line-height:1;
}

.sac{position:fixed; inset:0; z-index:130; visibility:hidden; pointer-events:none}
.sac.aberta{visibility:visible; pointer-events:auto}
.sac__fundo{position:absolute; inset:0; background:rgba(26,25,23,.42); opacity:0; transition:opacity .3s}
.sac.aberta .sac__fundo{opacity:1}
.sac__painel{
  position:absolute; inset-block:0; right:0; width:min(100%,420px);
  background:var(--papel); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .38s var(--ease);
  box-shadow:var(--sombra-lg);
}
.sac.aberta .sac__painel{transform:none}
.sac__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad); border-bottom:1px solid var(--linha-sutil); flex:none;
}
.sac__topo h2{
  font-family:var(--display); font-weight:300; font-size:1.15rem;
  color:var(--marinho); margin:0; letter-spacing:-.01em;
}
.sac__corpo{flex:1; overflow-y:auto; padding:.4rem var(--pad)}
.sac__vazia{text-align:center; padding:3.5rem 0}
.sac__vazia p{color:var(--tinta-md); font-weight:300; margin:0 0 1.4rem}

.sac__item{
  display:grid; grid-template-columns:62px 1fr auto; gap:.9rem;
  align-items:start; padding:1rem 0; border-bottom:1px solid var(--linha-sutil);
}
.sac__foto{width:62px; aspect-ratio:3/4; background:var(--osso); border-radius:2px; overflow:hidden; display:block}
.sac__foto img{width:100%; height:100%; object-fit:cover}
.sac__marca{font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-cl); margin:0 0 .2rem}
.sac__nome{
  font-size:.85rem; line-height:1.35; color:var(--tinta); display:block; margin-bottom:.25rem;
}
.sac__tam{font-size:.68rem; color:var(--tinta-cl); margin:0 0 .3rem}
.sac__preco{font-size:.82rem; color:var(--marinho); font-weight:500; margin:0}
.sac__preco span{color:var(--tinta-cl); font-weight:300; font-size:.72rem}
.sac__tirar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:var(--tinta-cl); transition:all .2s;
}
.sac__tirar:hover{background:var(--osso); color:var(--alerta)}
.sac__tirar svg{width:13px; height:13px}

.sac__pe{flex:none; padding:1.1rem var(--pad) 1.3rem; border-top:1px solid var(--linha); background:var(--papel)}
.sac__linha{display:flex; justify-content:space-between; align-items:baseline; font-size:.85rem; margin-bottom:.4rem}
.sac__linha span{color:var(--tinta-md); font-weight:300}
.sac__linha b{font-weight:500; color:var(--tinta)}
.sac__linha--pix b{color:var(--marinho); font-size:1.05rem}
.sac__pe .btn{width:100%; margin-top:.9rem; padding-block:1rem}
.sac__nota{font-size:.68rem; color:var(--tinta-cl); text-align:center; margin:.7rem 0 0; font-weight:300; line-height:1.5}
.sac__nota.ruim{color:#a8322f}

/* aviso de reposição sem WhatsApp */
.avisar__ok{text-align:center; padding:1.4rem 0 .4rem}
.avisar__ok svg{width:34px; height:34px; color:var(--marinho); margin-bottom:.9rem}
.avisar__ok h3{font-family:var(--display); font-weight:300; font-size:1.2rem; color:var(--marinho); margin:0 0 .5rem}
.avisar__ok p{font-size:.87rem; color:var(--tinta-md); font-weight:300; margin:0; line-height:1.6}

/* selo de desconto no trilho de destaques */
.vitrine .precos{align-items:baseline}
.vitrine .preco-de{font-size:.68rem}
.catlinha__seta{font-size:.9rem; color:var(--tinta-cl); transition:transform .3s var(--ease)}
.catlinha:hover .catlinha__seta{transform:translateX(4px); color:var(--marinho)}

/* =========================================================
   AJUSTES: GRUPO CLICÁVEL, GAVETA E TARJA NO CELULAR
   ========================================================= */
.mega__col h4 a{
  color:var(--tinta-cl); transition:color .2s var(--ease);
  border-bottom:1px solid transparent; padding-bottom:.15rem;
}
.mega__col h4 a:hover{color:var(--marinho); border-color:var(--areia)}

.gav-grupos{list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.1rem}
.gav-grupos a{
  display:block; padding:.6rem 0; font-size:.92rem; font-weight:300;
  color:var(--tinta-md); border-bottom:1px solid var(--linha-sutil);
}
.gav-grupos a:hover{color:var(--marinho)}
.gav-grupos--tudo a{color:var(--marinho); border-bottom:0; font-weight:400}

@media (max-width:760px){
  /* a tarja tem que caber em uma linha só */
  .tarja__int{grid-template-columns:repeat(4,1fr); padding-block:.75rem}
  .tarja__item{
    flex-direction:column; gap:.3rem; text-align:center; padding:0 .3rem;
  }
  .tarja__item::before{display:none}
  .tarja__item + .tarja__item::before{display:none}
  .tarja__item svg{width:14px; height:14px}
  .tarja__item span{font-size:.53rem; line-height:1.25; letter-spacing:.01em}
}


/* ---------- consulta de CEP ---------- */
.cep{margin:1.15rem 0 0}
.cep__tit{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-cl); margin:0 0 .5rem}
.cep__linha{display:flex; gap:.5rem}
.cep__campo{
  flex:1 1 auto; min-width:0; padding:.72rem .85rem;
  border:1px solid var(--linha); border-radius:var(--r);
  font:inherit; font-size:.85rem; color:var(--tinta); background:#fff;
}
.cep__campo:focus{outline:none; border-color:var(--tinta)}
.cep__campo.ruim{border-color:#a8322f}
.cep__bt{flex:0 0 auto; padding-left:1.15rem; padding-right:1.15rem}
.cep__saida{margin:.6rem 0 0; font-size:.78rem; line-height:1.55; color:var(--tinta-cl)}
.cep__saida b{color:var(--tinta); font-weight:500}
.sac__pe .cep{margin:0 0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--linha)}
.sac__pe .cep__bt{width:auto; margin-top:0; padding-block:.72rem}

/* ---------- dados do pedido, antes do pagamento ---------- */
.ped{margin-top:1rem; border-top:1px solid var(--linha); padding-top:1rem}
.ped__tit{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-cl); margin:0 0 .75rem}
.ped__gr{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.ped__c--full{grid-column:1 / -1}
.ped__c{display:flex; flex-direction:column; gap:.28rem}
.ped__c span{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-cl)}
.ped__c input{
  padding:.62rem .7rem; border:1px solid var(--linha); border-radius:var(--r);
  font:inherit; font-size:.82rem; color:var(--tinta); background:#fff; min-width:0;
}
.ped__c input:focus{outline:none; border-color:var(--tinta)}
.ped__c input.ruim{border-color:#a8322f}
.ped__erro{margin:.6rem 0 0; font-size:.74rem; color:#a8322f; min-height:1em}
.ped #pedEnviar{width:100%; margin-top:.5rem}
.ped #pedVoltar{width:100%; margin-top:.5rem}

/* ---------- pedido em análise ---------- */
.analise{text-align:center; padding:1.4rem .2rem}
.analise h3{font-size:1.05rem; font-weight:400; margin:0 0 .5rem}
.analise p{font-size:.82rem; line-height:1.6; color:var(--tinta-cl); margin:0 0 1rem}
.analise .btn{width:100%}