/* =========================================================================
   Catálogo digital Vaeso 026 — folha de estilo.

   Segue o design system da marca: verde como âncora, off-white como única
   superfície clara, tipografia carregando o peso visual, espaço generoso.
   Sem gradiente, sem vidro, sem sombra decorativa — a foto do produto é que
   dá profundidade.

   Escrito primeiro para o CELULAR. As media queries só acrescentam colunas.
   ========================================================================= */

@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-55Rg.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-65Md.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-75Bd.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --verde:#375249;  --off:#F5F0E8;  --off2:#EAE3D6;  --preto:#1A1A1A;
  --tiffany:#A8D8D0; --rosa:#F2C4C4;
  --fio:rgba(26,26,26,.10);
  --fio-off:rgba(245,240,232,.16);
  --m:20px;                       /* margem lateral única, em toda tela */
  --topo:60px;                    /* altura da barra */
  --mola:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--off); color:var(--preto);
  font-family:'Neue Haas Grotesk', -apple-system, system-ui, sans-serif;
  font-weight:500; font-size:16px; line-height:1.45;
  letter-spacing:-.01em; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------------------------------------------------------- barra fixa --- */
.barra{
  position:fixed; inset:0 0 auto 0; height:var(--topo); z-index:40;
  display:flex; align-items:center; gap:14px; padding:0 var(--m);
  background:var(--verde); color:var(--off);
}
.barra .marca{ height:19px; width:auto; }
.barra .voltar{ display:none; margin-left:-6px; padding:6px; }
body.interna .barra .voltar{ display:block; }
.barra .fim{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.barra button{ padding:9px; border-radius:50%; display:grid; place-items:center; }
.barra button:active{ background:rgba(245,240,232,.14); }
.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }

main{ padding-top:var(--topo); min-height:100vh; }

/* -------------------------------------------------------------- menu ----- */
.veu{
  position:fixed; inset:0; z-index:45; background:rgba(26,26,26,.42);
  opacity:0; pointer-events:none; transition:opacity .28s var(--mola);
}
.veu.on{ opacity:1; pointer-events:auto; }
.menu{
  position:fixed; z-index:50; top:0; right:0; bottom:0; width:min(84vw,360px);
  background:var(--verde); color:var(--off); overflow-y:auto;
  transform:translateX(100%); transition:transform .32s var(--mola);
  padding:0 0 40px; -webkit-overflow-scrolling:touch;
}
.menu.on{ transform:none; }
.menu .cab{
  height:var(--topo); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--m);
  border-bottom:1px solid var(--fio-off);
}
.menu .cab span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.62; }
.menu .grupo{ padding:26px var(--m) 0; }
.menu .grupo h3{
  margin:0 0 2px; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55;
}
.menu .grupo p{ margin:0 0 12px; font-size:13px; opacity:.6; font-weight:400; }
.menu a{
  display:flex; align-items:baseline; gap:10px; padding:11px 0;
  border-top:1px solid var(--fio-off); font-size:17px;
}
.menu a b{ font-weight:500; }
.menu a i{ font-style:normal; font-size:12px; opacity:.55; margin-left:auto; }

/* -------------------------------------------------------------- home ----- */
.capa{
  position:relative; background:var(--verde); color:var(--off);
  padding:44px var(--m) 40px; overflow:hidden;
}
.capa .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.62; margin-bottom:22px; }
.capa h1{
  margin:0; font-weight:700; font-size:clamp(46px,15vw,86px); line-height:.92;
  letter-spacing:-.035em;
}
.capa .logo{ height:clamp(30px,9vw,52px); width:auto; margin:14px 0 0; }
.capa p{ margin:22px 0 0; max-width:30ch; font-size:15px; opacity:.78;
  font-weight:400; }
.capa .num{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--fio-off);
  display:flex; gap:26px; font-size:13px; opacity:.72;
}
.capa .num b{ display:block; font-size:26px; font-weight:700; opacity:1;
  letter-spacing:-.02em; }

.bloco{ padding:38px var(--m) 4px; }
.bloco h2{
  margin:0; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(26,26,26,.5);
}
.bloco .chamada{ margin:4px 0 18px; font-size:15px; font-weight:400;
  color:rgba(26,26,26,.62); }

.grade{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.cartao{
  display:block; background:#FDFCF8; border:1px solid var(--fio);
  border-radius:16px; overflow:hidden;
  transition:transform .22s var(--mola);
}
.cartao:active{ transform:scale(.985); }
/* 🔴 A ALTURA É DO CONTAINER, NUNCA DO CONTEÚDO. Com a foto em `height:100%`
   dentro de uma caixa cuja altura vem do `aspect-ratio`, a conta fica circular
   e o navegador desempata pelo conteúdo: os cartões nasciam com 199, 225, 210px
   — cada um de uma altura, numa grade que só funciona se todos forem iguais.
   Tirando a foto do fluxo (`position:absolute`), quem manda é a proporção. */
.cartao .foto{
  position:relative; aspect-ratio:1; overflow:hidden; background:#FDFCF8;
}
.cartao .foto img{
  position:absolute; inset:14px; width:calc(100% - 28px);
  height:calc(100% - 28px); object-fit:contain;
}
.cartao .foto.cheia img{ inset:0; width:100%; height:100%; object-fit:cover; }
.cartao .txt{ padding:11px 14px 14px; border-top:1px solid var(--fio); }
.cartao .txt b{ display:block; font-weight:500; font-size:15px;
  letter-spacing:-.015em; }
.cartao .txt span{ display:block; margin-top:3px; font-size:12px;
  color:rgba(26,26,26,.55); font-weight:400; }

/* --------------------------------------------------------- categoria ----- */
.cena{
  position:relative; margin-bottom:6px; background:var(--verde);
  aspect-ratio:4/5; max-height:74vh; overflow:hidden;
}
.cena img{ width:100%; height:100%; object-fit:cover; }
.cena .veu2{
  position:absolute; inset:0 0 auto 0; height:62%;
  background:linear-gradient(to bottom, rgba(18,18,18,.5), rgba(18,18,18,0));
}
.cena .frase{
  position:absolute; left:var(--m); right:var(--m); top:26px; margin:0;
  color:var(--off); font-weight:500; font-size:clamp(26px,7.6vw,40px);
  line-height:1.06; letter-spacing:-.03em; max-width:16ch;
}

.tit{ padding:30px var(--m) 0; }
.tit .linha{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(26,26,26,.5); }
.tit h1{ margin:6px 0 0; font-size:clamp(30px,8.6vw,44px); font-weight:700;
  letter-spacing:-.03em; line-height:1; }
.tit p{ margin:12px 0 0; font-size:15px; font-weight:400;
  color:rgba(26,26,26,.66); max-width:44ch; }

.tamanho{ padding:34px var(--m) 0; }
.tamanho > h2{
  margin:0 0 14px; font-size:26px; font-weight:700; letter-spacing:-.025em;
}
/* a ficha técnica: rótulo em cima, valor embaixo, dois por linha */
.ficha{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--fio); border:1px solid var(--fio); border-radius:14px;
  overflow:hidden; margin-bottom:18px;
}
.ficha div{ background:var(--tiffany); padding:11px 14px; }
/* 🔴 NÚMERO ÍMPAR DE CAMPOS DEIXAVA UM BURACO. A ficha é uma grade de 2 colunas
   com o fio feito de `gap` sobre fundo — com 3 campos, a 4ª célula não existe e
   o fundo cinza aparecia como um retângulo vazio ao lado de "Caixa master",
   lendo como dado que faltou carregar. O último campo passa a ocupar a linha. */
.ficha div:last-child:nth-child(odd){ grid-column:1 / -1; }
.ficha dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); margin:0; }
.ficha dd{ margin:2px 0 0; font-size:16px; font-weight:700;
  letter-spacing:-.02em; }

/* ------------------------------------------------------------- ficha ----- */
.peca{ padding:0 0 40px; }
.peca .grande{
  background:#FDFCF8; aspect-ratio:1; display:grid; place-items:center;
  padding:26px; border-bottom:1px solid var(--fio);
}
.peca .grande img{ max-height:100%; width:auto; object-fit:contain; }
.peca .info{ padding:24px var(--m) 0; }
.peca .info .de{ font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); }
.peca .info h1{ margin:8px 0 0; font-size:clamp(26px,7.4vw,36px);
  font-weight:700; letter-spacing:-.03em; line-height:1.05; }
.cod{
  display:inline-flex; align-items:baseline; gap:9px; margin-top:16px;
  background:var(--verde); color:var(--off); padding:9px 17px;
  border-radius:999px;
}
.cod i{ font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.66; }
.cod b{ font-size:17px; font-weight:700; letter-spacing:.01em; }
.cenafoto{ margin-top:24px; border-radius:16px; overflow:hidden;
  border:1px solid var(--fio); }

/* a pílula da cor, com a cor medida na própria foto */
.corpin{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  padding:7px 15px; border-radius:999px; font-size:14px; font-weight:500;
  background:var(--cor,var(--off2)); color:var(--off);
}
.corpin.clara{ color:var(--preto); box-shadow:inset 0 0 0 1px rgba(26,26,26,.18); }

/* ------------------------------------------------------------- busca ----- */
.busca{ padding:26px var(--m) 40px; }
.busca .campo{
  display:flex; align-items:center; gap:11px; background:#FDFCF8;
  border:1px solid var(--fio); border-radius:999px; padding:13px 18px;
}
.busca input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:16px;
  outline:none;
}
.busca input::placeholder{ color:rgba(26,26,26,.4); }
.busca .resumo{ margin:20px 0 12px; font-size:13px; font-weight:400;
  color:rgba(26,26,26,.55); }
.lista{ display:flex; flex-direction:column; gap:1px; background:var(--fio);
  border:1px solid var(--fio); border-radius:14px; overflow:hidden; }
.lista a{ display:flex; align-items:center; gap:14px; padding:11px 14px;
  background:#FDFCF8; }
.lista .th{ width:46px; height:46px; flex:none; display:grid;
  place-items:center; }
.lista .th img{ max-height:100%; width:auto; object-fit:contain; }
.lista .nm{ min-width:0; }
.lista .nm b{ display:block; font-weight:500; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lista .nm span{ font-size:12px; color:rgba(26,26,26,.55); font-weight:400; }
.lista .sk{ margin-left:auto; font-size:13px; font-weight:700;
  color:var(--verde); letter-spacing:.01em; }

.vazio{ padding:40px 0; text-align:center; color:rgba(26,26,26,.5);
  font-weight:400; }

/* ------------------------------------------------------------- rodapé ---- */
.rodape{
  margin-top:46px; padding:34px var(--m) 40px; background:var(--verde);
  color:var(--off);
}
.rodape img{ height:26px; width:auto; opacity:.9; }
.rodape p{ margin:16px 0 0; font-size:13px; opacity:.7; font-weight:400;
  max-width:34ch; }
.rodape .baixar{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:12px 20px; border:1px solid var(--fio-off); border-radius:999px;
  font-size:14px;
}

/* --------------------------------------------------------- telas maiores - */
@media (min-width:600px){
  :root{ --m:32px; }
  .grade{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .ficha{ grid-template-columns:repeat(4,1fr); }
  .cena{ aspect-ratio:16/9; }
}
@media (min-width:980px){
  :root{ --m:48px; }
  .grade{ grid-template-columns:repeat(4,1fr); }
  .capa{ padding:70px var(--m) 60px; }
  .peca{ display:grid; grid-template-columns:1fr 1fr; gap:40px;
    align-items:start; padding:0 var(--m) 60px; }
  .peca .grande{ border:1px solid var(--fio); border-radius:18px;
    margin-top:30px; }
  .peca .info{ padding:30px 0 0; }
  main > .interno{ max-width:1180px; margin:0 auto; }
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}