:root{
  --oliva:#22412B; --oliva-2:#2E5A3B; --salmoura:#E8ECDD; --kraft:#D9C08E; --kraft-2:#EADBB8;
  --ouro:#D4AD52; --tinta:#17241B; --branco:#FFFFFF; --cinza:#55635A; --linha:#C9D1BB;
  --zap:#1F8F4E; --erro:#A63A24;
  --larg:1180px; --r:10px;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.55;color:var(--tinta);background:var(--salmoura);font-variation-settings:"wdth" 100}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.2vw,46px);font-variation-settings:"wdth" 78;font-weight:850}
h3{font-size:20px;font-variation-settings:"wdth" 90}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:8px;background:var(--ouro);color:var(--tinta);padding:10px 14px;z-index:99;border-radius:6px}
.pular:focus{left:12px}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:4px}
.faixa{max-width:var(--larg);margin:0 auto;padding:0 24px}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid transparent;
  font:700 16px/1 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.botao svg{width:20px;height:20px;fill:currentColor}
.botao-ouro{background:var(--ouro);color:var(--tinta)}
.botao-ouro:hover{background:#E2BE66}
.botao-linha{border-color:rgba(255,255,255,.55);color:var(--branco)}
.botao-linha:hover{border-color:var(--branco);background:rgba(255,255,255,.08)}
.botao-zap{background:var(--zap);color:var(--branco)}
.botao-zap:hover{background:#18763F}
.botao-escuro{background:var(--oliva);color:var(--branco)}
.botao-escuro:hover{background:var(--oliva-2)}
.botao-grande{width:100%;min-height:56px;font-size:18px}
.botao[disabled]{opacity:.6;cursor:wait}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:var(--oliva);color:var(--branco);border-bottom:1px solid rgba(255,255,255,.08)}
.topo .faixa{display:flex;align-items:center;gap:28px;height:72px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;font-size:21px;font-variation-settings:"wdth" 82;letter-spacing:-.01em}
.marca img{border-radius:10px}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{text-decoration:none;font-weight:600;font-size:16px;opacity:.88;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{opacity:1;border-color:var(--ouro)}
.topo-zap{min-height:42px;padding:0 18px;font-size:15px}
.menu-botao{display:none;margin-left:auto;width:46px;height:46px;border:0;background:transparent;color:var(--branco);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-botao span{display:block;width:24px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-botao[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* abertura */
.abertura{background:var(--oliva);color:var(--branco);overflow:hidden;position:relative}
.abertura::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:var(--salmoura);clip-path:polygon(0 100%,100% 100%,100% 0)}
.abertura-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;padding-top:64px;padding-bottom:0}
.abertura-texto{padding-bottom:84px}
.abertura h1{font-size:clamp(38px,5.4vw,66px);font-variation-settings:"wdth" 72;font-weight:850;line-height:1.02;letter-spacing:-.015em;max-width:15ch;text-wrap:balance}
.abertura-sub{margin-top:24px;font-size:19px;line-height:1.6;color:#D6E0CF;max-width:54ch}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.prateleira{margin:0;align-self:end;transform:translateY(2px)}
.prateleira svg{width:100%;height:auto}
.rotulo-marca{font:800 13px var(--f);fill:#3B2E14;letter-spacing:.08em;font-variation-settings:"wdth" 80}
.rotulo-peso{font:900 54px var(--f);fill:var(--oliva);font-variation-settings:"wdth" 70}
.rotulo-sub{font:700 10px var(--f);fill:#5B4A26;letter-spacing:.14em}
.rotulo-p{font-size:9.5px}.rotulo-pm{font-size:38px}
.rotulo-pp{font-size:6.5px;letter-spacing:.04em}.rotulo-ppm{font-size:22px}
@media (prefers-reduced-motion:no-preference){
  .prateleira g{animation:chega .7s cubic-bezier(.2,.8,.2,1) both}
  .prateleira g:nth-of-type(1){animation-delay:.25s}
  .prateleira g:nth-of-type(2){animation-delay:.12s}
  .prateleira g:nth-of-type(3){animation-delay:0s}
}
@keyframes chega{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* resumo */
.numeros{padding:30px 0 6px}
.numeros-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.numeros p{font-size:15.5px;color:var(--cinza);line-height:1.45;padding-left:16px;border-left:3px solid var(--kraft)}
.numeros strong{display:block;color:var(--tinta);font-size:22px;font-weight:800;font-variation-settings:"wdth" 82;margin-bottom:2px}

/* seções */
.secao{padding:88px 0}
.secao-clara{background:var(--branco)}
.secao-kraft{background:var(--kraft-2)}
.cabeca{max-width:680px;margin-bottom:36px}
.cabeca p{margin-top:14px;font-size:18px;color:var(--cinza);line-height:1.6}

/* linhas de produtos */
.linhas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:36px}
.linha{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--branco);border:2px solid transparent;border-radius:var(--r);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,background .15s}
.linha:hover{border-color:var(--linha)}
.linha[aria-pressed="true"]{border-color:var(--oliva);background:#F6F8F0}
.linha svg{flex:0 0 44px;width:44px;height:44px}
.linha b{display:block;font-size:16px;line-height:1.2;font-variation-settings:"wdth" 88}
.linha small{display:block;color:var(--cinza);font-size:14px;margin-top:2px}

/* catálogo */
.catalogo{background:var(--branco);border-radius:16px;padding:28px}
.busca-linha{display:flex;gap:12px;flex-wrap:wrap}
.busca{flex:1 1 320px;display:flex;align-items:center;gap:10px;border:2px solid var(--linha);border-radius:999px;padding:0 18px;background:var(--branco)}
.busca:focus-within{border-color:var(--oliva)}
.busca svg{width:20px;height:20px;fill:none;stroke:var(--cinza);stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.busca input{border:0;outline:0;font:inherit;min-height:46px;width:100%;background:transparent;color:var(--tinta)}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{border:1.5px solid var(--linha);background:var(--branco);border-radius:999px;padding:8px 14px;font:600 14.5px var(--f);color:var(--tinta);cursor:pointer}
.chip:hover{border-color:var(--oliva)}
.chip[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:var(--branco)}
.contagem{margin-top:18px;color:var(--cinza);font-size:15px}
.produtos{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px}
.produto{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid #E3E8D8}
.produto-peso{flex:0 0 64px;height:64px;border-radius:8px;background:var(--salmoura);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:850;font-variation-settings:"wdth" 70;color:var(--oliva);font-size:19px;line-height:1;text-align:center;overflow:hidden}
.produto-peso small{font-size:11px;font-weight:600;color:var(--cinza);margin-top:3px;font-variation-settings:"wdth" 90}
.produto-peso img{width:100%;height:100%;object-fit:cover}
.produto b{display:block;font-size:16px;line-height:1.3;font-weight:650}
.produto span{display:block;font-size:14px;color:var(--cinza);margin-top:3px}
.produto .selo{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:#6B4E12;background:#F3E5BF;padding:2px 8px;border-radius:999px}
.vazio{grid-column:1/-1;padding:28px 0;color:var(--cinza)}
.vazio a{font-weight:700;color:var(--oliva)}
.mais{margin-top:20px;text-align:center}
.mais button{background:transparent;border:2px solid var(--oliva);color:var(--oliva)}
.mais button:hover{background:var(--oliva);color:var(--branco)}

/* passos */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding-top:78px}
.passos li::before{content:counter(p);position:absolute;top:0;left:0;font-weight:900;font-size:64px;line-height:1;color:var(--kraft);font-variation-settings:"wdth" 62}
.passos li::after{content:"";position:absolute;top:30px;left:58px;right:-28px;height:2px;background:repeating-linear-gradient(90deg,var(--kraft) 0 8px,transparent 8px 14px)}
.passos li:last-child::after{display:none}
.passos p{margin-top:10px;color:var(--cinza);line-height:1.6}

/* para quem */
.quem-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.quem{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 36px}
.quem li{padding-top:18px;border-top:3px solid var(--oliva)}
.quem p{margin-top:8px;color:var(--cinza);line-height:1.55}

/* seja cliente */
.cliente-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.cliente-texto p{margin-top:16px;font-size:18px;line-height:1.6;color:#3F4A3A}
.cliente-texto .pequeno{font-size:16px}
.cliente-texto a{font-weight:700;color:var(--oliva)}
.formulario{background:var(--branco);border-radius:16px;padding:30px;display:grid;gap:16px;box-shadow:0 1px 0 #CDB98A,0 18px 40px -24px rgba(60,45,10,.35)}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:15px}
.campo label i{font-style:normal;font-weight:500;color:var(--cinza);font-size:13px;margin-left:4px}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;color:var(--tinta);border:1.5px solid #C7CDBC;border-radius:8px;padding:11px 13px;background:var(--branco);width:100%;min-height:48px}
.campo textarea{resize:vertical;min-height:84px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--oliva);box-shadow:0 0 0 3px rgba(34,65,43,.15)}
.campo [aria-invalid="true"]{border-color:var(--erro)}
.cnpj-linha{display:flex;gap:8px}
.cnpj-linha input{flex:1;font-size:18px;letter-spacing:.02em}
.cnpj-linha .botao{border-radius:8px;min-height:48px;padding:0 16px;font-size:15px}
.dica{font-size:14px;color:var(--cinza);min-height:1em}
.dica.ok{color:var(--zap);font-weight:600}
.dica.erro{color:var(--erro);font-weight:600}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.isca{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#3F4A3A;line-height:1.45;cursor:pointer}
.aceite input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--oliva);flex:0 0 auto}
.aceite a{color:var(--oliva);font-weight:600}
.resposta{border-radius:10px;padding:16px 18px;font-size:16px;line-height:1.5}
.resposta b{display:block;font-size:18px;margin-bottom:4px}
.resposta.ok{background:#E3F1E6;color:#174A27}
.resposta.aviso{background:#FBF1D9;color:#5B4310}
.resposta.erro{background:#F8E3DD;color:#6E2414}
.resposta a{font-weight:700;color:inherit}
.formulario.enviado > :not(.resposta){display:none}

/* contato */
.contato{background:var(--tinta);color:var(--branco)}
.contato .cabeca p{color:#B9C6B4}
.contato-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.canais{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.canais a{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid rgba(255,255,255,.14);text-decoration:none}
.canais a:hover span{color:var(--ouro)}
.canais b{font-size:15px;color:#B9C6B4;font-weight:600}
.canais span{font-size:21px;font-weight:700;font-variation-settings:"wdth" 88;line-height:1.35}

/* rodapé */
.rodape{background:#0F1912;color:#AAB7A6;font-size:14.5px;padding:34px 0 96px}
.rodape-grade{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:center}
.rodape-marca{display:flex;gap:14px;align-items:center}
.rodape-marca img{border-radius:9px}
.rodape-marca b{display:block;color:var(--branco);font-size:16px}
.rodape nav{display:flex;gap:22px;flex-wrap:wrap}
.rodape nav a{text-decoration:none;color:#D6E0CF}
.rodape nav a:hover{color:var(--ouro)}
.rodape-copia{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}

.zap-flutuante{position:fixed;right:18px;bottom:18px;z-index:30;width:60px;height:60px;border-radius:50%;background:var(--zap);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.45)}
.zap-flutuante svg{width:32px;height:32px;fill:var(--branco)}
.zap-flutuante:hover{background:#18763F}

/* telas menores */
@media (max-width:1020px){
  .linhas{grid-template-columns:repeat(2,1fr)}
  .produtos{grid-template-columns:repeat(2,1fr)}
  .quem-grade,.cliente-grade,.contato-grade{grid-template-columns:1fr;gap:32px}
}
@media (max-width:860px){
  .menu-botao{display:flex}
  .topo-zap{display:none}
  .menu{position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--oliva);padding:8px 24px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:none}
  .menu.aberto{display:flex}
  .menu a{padding:14px 0;font-size:18px;border-bottom:1px solid rgba(255,255,255,.08)}
  .abertura-grade{grid-template-columns:1fr;gap:8px;padding-top:44px}
  .abertura-texto{padding-bottom:12px}
  .prateleira{max-width:520px;width:100%;margin:0 auto}
  .numeros-grade{grid-template-columns:1fr;gap:16px}
  .passos{grid-template-columns:1fr;gap:28px}
  .passos li::after{display:none}
  .secao{padding:64px 0}
}
@media (max-width:600px){
  body{font-size:16px}
  .faixa{padding:0 16px}
  .topo .faixa{height:64px}
  .menu{top:64px;padding:8px 16px 18px}
  html{scroll-padding-top:74px}
  .marca{font-size:19px}.marca img{width:38px;height:38px}
  .abertura h1{font-size:36px}
  .abertura-sub{font-size:17px}
  .acoes .botao{flex:1 1 100%}
  .linhas{grid-template-columns:1fr 1fr;gap:8px}
  .linha{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .linha svg{width:36px;height:36px;flex-basis:36px}
  .linha b{font-size:15px}
  .catalogo{padding:18px 14px;border-radius:12px;margin:0 -4px}
  .produtos{grid-template-columns:1fr}
  .quem{grid-template-columns:1fr;gap:24px}
  .formulario{padding:20px 16px}
  .dupla{grid-template-columns:1fr}
  .cnpj-linha{flex-direction:column}
  .canais a{grid-template-columns:1fr;gap:4px}
  .canais span{font-size:18px}
  .rodape-grade{grid-template-columns:1fr}
}
.limpar{margin-left:8px;border:0;background:none;color:var(--oliva);font:700 15px var(--f);text-decoration:underline;cursor:pointer;padding:4px}
.produto em.selo{font-style:normal}

.produto .pedir{margin-left:auto;align-self:center;flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--zap);text-decoration:none;border:1.5px solid currentColor;border-radius:999px;padding:6px 11px;white-space:nowrap}
.produto .pedir:hover{background:var(--zap);color:#fff}
.produto > div:nth-child(2){flex:1;min-width:0}