/* Identidade Patrocínio (mesma do ERP: login e Café Cru). Camada por cima do CSS da página.
   Títulos Cinzel · texto Playfair Display · detalhes de interface Montserrat. Só aparência. */
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-latin.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap}

:root{
  --verde:#215B40; --verde-claro:#2E7D53; --verde-fundo:#052F1C;
  --laranja:#E17D00; --laranja-texto:#B26200; --ouro:#E3A519;
  --texto:'Montserrat','Segoe UI',Arial,sans-serif;
  --ui:'Montserrat',Arial,sans-serif;
  /* 23/10 04:08 (ordem do Gabriell): site TODO BRANCO, sem modo escuro. O tom exato do branco ele escolhe depois:
     é só trocar --branco (o resto acompanha). Antes: creme do ERP #F5F1E9 e, no fundo, branco gelo #F8F6F1. */
  --branco:#FFFFFF;
  --prata-1:#F4F4F2; --prata-2:var(--branco); --prata-3:#F0F0EE;
  --papel:var(--branco); --papel-2:#F6F6F4; --linha:#E4E4E0;
  --aroma-verde:rgba(33,91,64,.30); --aroma-laranja:rgba(225,125,0,.38);
  --cartao:0 1px 2px rgba(5,47,28,.06),0 8px 22px -6px rgba(5,47,28,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme=dark]{
  --papel:#12241B; --papel-2:#0B1912; --verde-fundo:#052F1C;
  --prata-1:#10201A; --prata-2:#1C2D25; --prata-3:#0E1B15;
  --aroma-verde:rgba(116,219,167,.20); --aroma-laranja:rgba(240,160,64,.34);
  --laranja-texto:#F0A040;
  --cartao:0 2px 4px rgba(0,0,0,.28),0 10px 26px -6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- fundo prata com brilho que corre ---------- */
html{background:var(--branco)} /* 23/10: todo branco (22/10 era #F8F6F1, branco gelo) */
html,body{overflow-x:clip} /* 23/10: nada pode fazer a página "andar de lado" no celular (nem as medidas do 3D da capa) */
body{background:transparent;font-family:var(--texto);font-size:16.5px;line-height:1.72}
body::before{content:none}
:root[data-theme=dark] body::before{background:linear-gradient(115deg,transparent 38%,rgba(116,219,167,.07) 50%,transparent 62%);background-size:260% 100%}
@keyframes brilho{from{background-position:130% 0}to{background-position:-130% 0}}

/* ---------- letras: título Cinzel com régua laranja; interface em Montserrat ---------- */
h1,h2,h3{font-weight:500;letter-spacing:.025em}
.cabeca h2,.chamada h2{padding-bottom:16px;position:relative}.cabeca h2::after,.chamada h2::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--laranja)}
.chamada h2::after{left:50%;transform:translateX(-50%)}
.btn,.olho,.eyebrow,body>header nav a,.sub a,.sub small,.numeros span,.selo-foto,.pend,figcaption,footer h4,footer,.rodape-fim,.nota,.pausar-mov,label,button,input,select,textarea,summary{font-family:var(--ui)}
.lead,.cabeca p{font-weight:400}
.numeros b,.selo-foto b,.item h3,.pack b{font-family:var(--display)}

/* ---------- topo e fundo das seções deixam o prata aparecer ---------- */
body>header{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(33,91,64,.14)}
:root[data-theme=dark] body>header{background:rgba(5,47,28,.86)}
.faixa,.faixa-alt{background:transparent}
:root[data-theme=dark] .faixa{background:rgba(255,255,255,.03)} :root[data-theme=dark] .faixa-alt{background:rgba(116,219,167,.05)}
.marcas,.capa,.chamada{background:transparent}
.marcas{background:linear-gradient(135deg,#052F1C 0%,#215B40 60%,#0c3a25 100%)}
:root[data-theme=dark] .capa,:root[data-theme=dark] .chamada{background:transparent}

/* ---------- capa: fios de aroma + grão ---------- */
.capa{isolation:isolate}
.capa>.env,.capa>.onda,.capa>.ondas-vivas{position:relative;z-index:1}
canvas.aroma-site{position:fixed;inset:0;width:100%;height:100%;max-width:none;z-index:-1;pointer-events:none;opacity:.95}
.capa-foto{position:relative}
.capa-foto img{border-radius:20px;box-shadow:0 30px 60px -20px rgba(5,47,28,.38)}
.grao-flutuante{position:absolute;z-index:3;top:-58px;right:-22px;width:118px;animation:flutua 7s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(5,47,28,.28))}
.grao-host{display:block;will-change:transform}
.grao-host svg{display:block;width:100%;height:auto}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* abertura do grão: metades entram, listras são "gravadas" uma a uma, brilho passa de tempos em tempos */
.grao-metade-laranja{animation:entra-e 1.1s cubic-bezier(.2,.8,.2,1) both}
.grao-metade-verde{animation:entra-d 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra-e{from{transform:translateX(-48px);opacity:0}to{transform:none;opacity:1}}
@keyframes entra-d{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
.grao-risco{stroke-dasharray:1;stroke-dashoffset:1;animation:risca .55s ease-out forwards;animation-delay:calc(1.0s + var(--i)*.09s)}
@keyframes risca{to{stroke-dashoffset:0}}
.grao-luz{animation:varre 6.5s ease-in-out 3.2s infinite}
@keyframes varre{0%,70%{transform:translateX(0)}100%{transform:translateX(230px)}}

/* ---------- ondas ---------- */
.ondas-vivas{display:block;width:100%;height:132px;margin-top:-2px}
.ondas-rodape{height:150px;margin-bottom:-2px;background:transparent}
.capa>.onda{display:none}

/* ---------- botões no padrão do ERP (relevo + crista laranja) ---------- */
.btn{border-radius:12px;letter-spacing:.02em}
.btn-verde{background:linear-gradient(180deg,#2c6e4f,#215B40);color:#fff;border-color:transparent;box-shadow:0 3px 0 #052F1C,0 8px 16px rgba(5,47,28,.26),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-verde:hover{box-shadow:0 5px 0 #052F1C,0 12px 20px rgba(5,47,28,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-laranja{background:linear-gradient(180deg,#f08f12,#E17D00);color:#2b1700;box-shadow:0 3px 0 #9a5400,0 8px 16px rgba(225,125,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-linha{border-color:var(--verde);color:var(--verde);background:rgba(255,255,255,.4)}
:root[data-theme=dark] .btn-linha{border-color:#74dba7;color:#74dba7;background:transparent}
.btn:active{transform:translateY(1px)}
input,select,textarea{background:#f8f4ee;border:1px solid #cbbfae;border-bottom:2px solid var(--laranja);border-radius:12px;box-shadow:inset 0 2px 4px rgba(5,47,28,.08)}
:root[data-theme=dark] input,:root[data-theme=dark] select,:root[data-theme=dark] textarea{background:#0b1912;border-color:#44584e;border-bottom-color:var(--laranja);color:#EAF0EA}

/* ---------- cartões ---------- */
.pack,.sub,.selo-foto{box-shadow:var(--cartao)}
.item{border-top:3px solid var(--laranja)}

/* ---------- rodapé ---------- */
footer{background:#052F1C;color:#A9BDB0}
footer .rodape-fim{border-top-color:rgba(255,255,255,.12);color:#8FA698}

/* ---------- contorno de luz que segue o mouse (igual ao ERP, 16/10) ---------- */
@media (hover:hover){
  .luz{position:relative}
  .luz::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:radial-gradient(240px circle at var(--luz-x,50%) var(--luz-y,50%),rgba(225,125,0,.9),rgba(33,91,64,.45) 45%,transparent 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .25s ease}
  body>header nav>ul>li>a.luz::after,.sub a.luz::after{inset:0;background:radial-gradient(120px circle at var(--luz-x,50%) var(--luz-y,50%),rgba(225,125,0,.95),rgba(116,219,167,.35) 50%,transparent 75%)}
  .luz:hover::after{opacity:1}
}

/* a página antiga zera TODA animação com "menos movimento"; quando ele liga o movimento no botão, as nossas voltam */
@media (prefers-reduced-motion:reduce){
  html.mov-vivo body::before{animation:brilho 18s linear infinite!important}
  html.mov-vivo .grao-flutuante{animation:flutua 7s ease-in-out infinite!important}
  html.mov-vivo .grao-metade-laranja{animation:entra-e 1.1s cubic-bezier(.2,.8,.2,1) both!important}
  html.mov-vivo .grao-metade-verde{animation:entra-d 1.1s cubic-bezier(.2,.8,.2,1) both!important}
  html.mov-vivo .grao-risco{animation:risca .55s ease-out forwards!important;animation-delay:calc(1.0s + var(--i)*.09s)!important}
  html.mov-vivo .grao-luz{animation:varre 6.5s ease-in-out 3.2s infinite!important}
  html.mov-vivo .luz::after{transition:opacity .25s ease!important}
}

/* ---------- pausar movimento ---------- */
.pausar-mov{position:fixed;left:16px;bottom:16px;z-index:60;border:1px solid rgba(255,255,255,.28);background:rgba(5,47,28,.9);color:#fff;font-weight:600;font-size:13px;padding:10px 16px;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.pausar-mov:hover{background:#215B40} .pausar-mov:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
.sem-mov body::before{animation:none}
.sem-mov .grao-flutuante,.sem-mov .grao-luz{animation:none}
.sem-mov .grao-metade-laranja,.sem-mov .grao-metade-verde{animation:none}
.sem-mov .grao-risco{animation:none;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){html:not(.mov-vivo) body::before,html:not(.mov-vivo) .grao-flutuante,html:not(.mov-vivo) .grao-luz,html:not(.mov-vivo) .grao-metade-laranja,html:not(.mov-vivo) .grao-metade-verde{animation:none}html:not(.mov-vivo) .grao-risco{animation:none;stroke-dashoffset:0}}
@media (max-width:980px){.grao-flutuante{width:84px;top:-38px;right:-8px}.ondas-vivas{height:96px}.ondas-rodape{height:110px}body{font-size:17px}}

/* ---------- capa: vitrine 3D no lugar da foto; fachada vira foto larga em A Indústria ---------- */
.vitrine-capa{position:relative;min-height:560px;border-radius:22px}
.foto-larga{margin:0 0 20px}
.foto-larga img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;border-radius:18px;display:block;box-shadow:0 24px 50px -24px rgba(5,47,28,.4)}
.foto-larga figcaption{font-size:13.5px;color:var(--suave);padding-top:9px}
@media (max-width:980px){.vitrine-capa{min-height:480px}}

/* botão de cotação que acompanha o formato e a cor escolhidos na vitrine */
.vitrine-cta{margin-top:16px}

/* ---------- auditoria Hallmark 16/10: menos "cara de IA" ---------- */
/* 1. rótulo em cima de TODO título é tique de página gerada: some nos cabeçalhos de seção.
      Fica só onde é sequência de verdade (Como funciona) e nos rótulos de conteúdo (Missão/Visão/Valores). */
.secao-head > .eyebrow{display:none}
#processo .secao-head > .eyebrow{display:block}
#registros-e-certificacoes .olho{display:none}
/* 2. ritmo: seções com respiros diferentes (nem todas 88px) */
#marcas{padding:72px 0 96px}
#a-industria{padding-top:110px}
#diferenciais,#processo,#clientes{padding:64px 0}
#faq{padding:72px 0 120px}
/* 3. galeria da indústria: foto larga + duas, em vez de três iguais */
#a-industria .fotos{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:980px){#a-industria .fotos{grid-template-columns:minmax(0,1fr)}}
/* 4. título da capa: quebra equilibrada (não deixa "CAFÉ," sozinho) */
.capa h1,.secao-head h2,.cabeca h2{text-wrap:balance;overflow-wrap:anywhere;min-width:0}
/* 5. "Pedido mínimo a confirmar" não é número: sai do tamanho de destaque */
.numeros b.pend{font-family:var(--ui);font-size:15px;font-weight:600;line-height:1.35;padding-top:8px}
/* 6. botões nunca quebram em duas linhas */
.btn,.chip-btn,body>header nav>ul>li>a{white-space:nowrap}

/* ---------- marcas em 3D (arte real; arrasta e vê o verso) ---------- */
.pacote3d-host{position:relative;height:360px;margin:-6px -8px 4px;cursor:grab;touch-action:pan-y}
.pacote3d-host:active{cursor:grabbing}
.pacote3d__canvas{display:block;width:100%;height:100%}
.pacote3d-host noscript img{height:300px;width:auto;margin:0 auto;display:block}
.pacote3d-lados{display:inline-flex;gap:4px;padding:4px;margin:0 auto 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.pacote3d-lados button{font:600 12.5px var(--ui);color:#C6D3C8;background:transparent;border:0;border-radius:999px;padding:7px 16px;cursor:pointer}
.pacote3d-lados button[aria-pressed=true]{background:#E17D00;color:#2b1700}
.pacote3d-lados button:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
.pack .pacote3d-host + .pacote3d-lados{display:flex;width:max-content}

/* ---------- esteira de embalagens em 5 camadas (infinite marquee arrastável + zoom que gira em 3D; 21/10) ---------- */
.esteira-sec{position:relative;z-index:1;padding:72px 0 10px}
.esteira-cab{text-align:center;max-width:780px}
.esteira-cab h2{font-size:clamp(24px,3.2vw,36px);text-wrap:balance}
.esteira-cab p{margin:12px auto 0;color:var(--suave);font-size:16.5px;max-width:62ch;text-wrap:pretty}
.esteiras{--emb-h:200px;display:grid;gap:18px;margin-top:34px}
.esteira{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.esteira.is-arrastando{cursor:grabbing}
.esteira__rotulo{position:absolute;z-index:2;left:max(18px,5vw);top:6px;display:flex;align-items:center;gap:10px;margin:0;
  font:700 12px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--verde);pointer-events:none}
.esteira__rotulo span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--verde);color:#fff;font-size:11px;letter-spacing:0}
.esteira__trilho{display:flex;width:max-content;will-change:transform}
.esteira__lista{display:flex;align-items:flex-end;gap:34px;margin:0;padding:40px 34px 14px 0;list-style:none}
.emb{flex:none}
.emb__btn{display:block;padding:0;border:0;background:none;cursor:inherit;border-radius:10px}
.emb__btn:focus-visible{outline:3px solid var(--laranja);outline-offset:6px}
.emb__foto{display:block;width:auto;height:calc(var(--emb-h) * var(--esc,1));filter:drop-shadow(0 14px 16px rgba(5,47,28,.22));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;-webkit-user-drag:none}
@media (hover:hover){.emb__btn:hover .emb__foto{transform:translateY(-12px) rotate(-2deg) scale(1.06);filter:drop-shadow(0 22px 22px rgba(5,47,28,.28))}}
.esteira-dica{margin:10px auto 0;text-align:center;font:600 13px var(--ui);color:var(--suave)}
:root[data-theme=dark] .esteira__rotulo{color:#74dba7}
:root[data-theme=dark] .esteira__rotulo span{background:#74dba7;color:#052F1C}
@media (max-width:699px){.esteiras{--emb-h:132px;gap:8px}.esteira-sec{padding-top:48px}.esteira-cab p{font-size:15.5px}.esteira__lista{gap:20px;padding-top:36px}}

/* janela do pacote ampliado: cresce do lugar dele (FLIP) e gira em 3D mostrando o verso */
.emb-zoom{width:min(920px,94vw);max-width:94vw;max-height:94vh;padding:0;border:0;border-radius:22px;background:var(--fundo,var(--branco));color:inherit;overflow:visible}
.emb-zoom::backdrop{background:rgba(5,24,14,.62);backdrop-filter:blur(6px)}
.emb-zoom__caixa{position:relative;display:grid;gap:14px;padding:26px 26px 22px}
.emb-zoom__titulo{margin:0;font:700 13px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--verde);text-align:center}
.emb-zoom__palco{display:grid;place-items:center;height:min(64vh,560px);perspective:1400px;cursor:grab;touch-action:pan-y;outline:none}
.emb-zoom__palco:focus-visible{outline:3px solid var(--laranja);outline-offset:4px;border-radius:14px}
.emb-zoom__carta{position:relative;height:100%;aspect-ratio:.62;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg))}
.emb-zoom__face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.emb-zoom__face img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(0,0,0,.28))}
.emb-zoom__verso{transform:rotateY(180deg)}
.emb-zoom__info{display:grid;align-content:center;gap:12px;width:100%;height:92%;padding:28px 24px;border-radius:18px;background:var(--verde-fundo,#052F1C);color:#F2EBE3;text-align:left;box-shadow:0 24px 40px rgba(0,0,0,.28)}
.emb-zoom__info b{font:700 20px/1.2 var(--ui)}
.emb-zoom__info p{margin:0;font-size:15px;line-height:1.5;color:#e7dccb}
.emb-zoom__min{font:700 13px var(--ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ouro,#E3A519)!important}
.emb-zoom__acoes{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.emb-zoom__acoes [data-girar],.emb-zoom__acoes [data-zap]{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:700 15px var(--ui);text-decoration:none;cursor:pointer}
.emb-zoom__acoes [data-girar]{border:1.5px solid var(--verde);background:transparent;color:var(--verde)}
.emb-zoom__acoes [data-zap]{border:0;background:#25D366;color:#06301a}
.emb-zoom__palco:focus:not(:focus-visible){outline:none}
.emb-zoom__fechar{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(5,47,28,.08);font-size:26px;line-height:1;cursor:pointer;color:inherit}
:root[data-theme=dark] .emb-zoom{background:#0b2418;color:#F2EBE3}
:root[data-theme=dark] .emb-zoom__titulo{color:#74dba7}
@media (prefers-reduced-motion:reduce){.emb__foto{transition:none}}

/* ---------- botões do WhatsApp: verde, ícone e letra do próprio WhatsApp (pedido de 20/10) ---------- */
:root{--zap:#25D366;--zap-claro:#2BE070;--zap-sombra:#0F8F45;--zap-escuro:#128C7E;--zap-tinta:#111B21;--zap-letra:'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif}
.btn.zap{position:relative}
.btn.zap,.fab.zap{display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;isolation:isolate;font-family:var(--zap-letra);font-weight:600;letter-spacing:0;background:var(--zap);color:var(--zap-tinta);border:0;text-decoration:none;box-shadow:0 3px 0 var(--zap-sombra),0 8px 18px rgba(37,211,102,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.zap:hover,.fab.zap:hover{background:var(--zap-claro);box-shadow:0 5px 0 var(--zap-sombra),0 12px 24px rgba(37,211,102,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.zap:focus-visible,.fab.zap:focus-visible{outline:3px solid var(--zap-escuro);outline-offset:3px}
.zap__ico{display:block;flex:none;width:20px;height:20px;fill:currentColor}
/* brilho que passa de tempos em tempos */
.btn.zap::after,.fab.zap::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:zap-brilho 5s ease-in-out 1.2s infinite}
@keyframes zap-brilho{0%,64%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes zap-balanca{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
@media (hover:hover){.btn.zap:hover .zap__ico,.fab.zap:hover .zap__ico{animation:zap-balanca .6s ease}}
/* botão que acompanha a página: pílula verde com onda que pulsa em volta */
.fab.zap{border-radius:999px;padding:11px 20px 11px 13px;font-size:15px;animation:zap-pulso 2.8s ease-out infinite}
.fab.zap .zap__ico{width:28px;height:28px}
@keyframes zap-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 8px 18px rgba(0,0,0,.2)}70%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0),0 8px 18px rgba(0,0,0,.2)}}
/* ícone do topo: bolinha verde com o símbolo branco */
.icon-btn.nav__zap,:root[data-theme] .icon-btn.nav__zap{background:var(--zap);color:#fff;border-radius:50%}
.icon-btn.nav__zap .zap__ico{width:22px;height:22px}
.icon-btn.nav__zap:hover{background:var(--zap-claro)}
.sem-mov .btn.zap::after,.sem-mov .fab.zap::after,.sem-mov .fab.zap,.sem-mov .zap__ico{animation:none}
@media (prefers-reduced-motion:reduce){
  html.mov-vivo .btn.zap::after,html.mov-vivo .fab.zap::after{animation:zap-brilho 5s ease-in-out 1.2s infinite!important}
  html.mov-vivo .fab.zap{animation:zap-pulso 2.8s ease-out infinite!important}
  html.mov-vivo .btn.zap,html.mov-vivo .fab.zap{transition:background .18s,box-shadow .18s,opacity .18s,transform .18s!important}
}
@media (prefers-reduced-motion:reduce) and (hover:hover){html.mov-vivo .btn.zap:hover .zap__ico,html.mov-vivo .fab.zap:hover .zap__ico{animation:zap-balanca .6s ease!important}}

/* ---------- vitrine 3D enxuta dentro da capa (o título já é o da capa) ---------- */
.vitrine-capa .vitrine3d{border-top:0;max-width:none;overflow:visible}
.vitrine-capa .vitrine3d__header,.vitrine-capa .vitrine3d__stage-meta{display:none}
.vitrine-capa .vitrine3d__stage{height:470px;background:radial-gradient(ellipse at 50% 55%,rgba(227,165,25,.14),transparent 62%);border-radius:22px}
.vitrine-capa .vitrine3d__views{top:478px}
.vitrine-capa .vitrine3d__hint{top:530px;font-size:12px}
.capa .selo-foto{display:none}
.vitrine-capa .vitrine3d__footer{margin-top:84px;padding:14px 0 0;border-bottom:0;grid-template-columns:1fr;gap:12px}
.vitrine-capa .vitrine3d__formats{gap:6px}
.vitrine-capa .vitrine3d__format{font-size:12.5px!important;padding:9px 12px;min-height:40px;border-color:rgba(33,91,64,.18)}
.vitrine-capa .vitrine3d__view{font-size:12.5px!important}
.vitrine-capa .vitrine3d__palette{flex-direction:row;justify-content:flex-start;border-left:0;padding-left:0;gap:14px;min-width:0}
.vitrine-capa .vitrine3d__palette-name{font-size:12px}
.capa .grao-flutuante{top:-34px;right:-14px;width:96px}
@media (max-width:699px){
  .vitrine-capa .vitrine3d__stage{height:420px;margin-top:0}
  .vitrine-capa .vitrine3d__views{top:auto;margin:-64px auto 0}
  .vitrine-capa .vitrine3d__hint{top:auto;margin:10px 0 0}
  .vitrine-capa .vitrine3d__footer{margin-top:8px;padding-top:10px}
  .vitrine-capa .vitrine3d__formats{padding:0 0 7px}
  .vitrine-capa .vitrine3d__palette{padding:0}
}

/* ================= pedido de 22/10 (vídeo das 02:32) ================= */
/* títulos: o jeito da capa no site inteiro, em degradê da marca (preto-verde · verde · laranja), um degrau mais grossos */
h1,h2{font-weight:700} /* o arquivo regular da Cinzel só tem 400: o 700 usa o arquivo bold de verdade */
.capa h1,main h2{background:linear-gradient(100deg,#0F1F17 0%,#1A2620 40%,#1F5A3A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:is(.capa h1,main h2) .v{background:linear-gradient(100deg,#1F5A3A 0%,#2E7D53 70%,#3D9466 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:is(.capa h1,main h2) .l{background:linear-gradient(100deg,#B26200 0%,#E17D00 55%,#E3A519 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.marcas h2{background-image:linear-gradient(100deg,#FFFFFF 0%,#EAF0EA 55%,#CFE3D6 100%)}
.marcas h2 .v{background-image:linear-gradient(100deg,#9BE3BD,#74dba7)}
.marcas h2 .l{background-image:linear-gradient(100deg,#F0A040,#E3A519)}
:root[data-theme=dark] :is(.capa h1,main h2){background-image:linear-gradient(100deg,#FFFFFF 0%,#EAF0EA 55%,#CFE3D6 100%)}
:root[data-theme=dark] :is(.capa h1,main h2) .v{background-image:linear-gradient(100deg,#9BE3BD,#74dba7)}
:root[data-theme=dark] :is(.capa h1,main h2) .l{background-image:linear-gradient(100deg,#F0A040,#E3A519)}
.lead,.capa p.lead{font-size:18.5px;line-height:1.6}

/* fundo de traços (fios de aroma) no site inteiro, branco por baixo */
:root[data-theme=dark] html,:root[data-theme=dark]{background:#0B1912}

/* selo Puro Lote no canto da capa: grande, nítido, flutua, gira em 3D com o mouse e leva ao laudo */
.selo-lote{position:absolute;z-index:4;top:-46px;right:-18px;width:158px;display:block;text-decoration:none;perspective:700px;filter:drop-shadow(0 16px 18px rgba(80,50,0,.28));animation:flutua 7s ease-in-out infinite}
.selo-lote__giro{position:relative;display:block;transform-style:preserve-3d;transform:rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg));transition:transform .18s ease-out}
.selo-lote__giro img,.capa-foto .selo-lote img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.selo-lote__giro::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 48%,transparent 60%);background-size:260% 100%;background-position:130% 0;
  -webkit-mask:url('img/selo-puro-lote.webp') center/contain no-repeat;mask:url('img/selo-puro-lote.webp') center/contain no-repeat;animation:selo-brilho 5.5s ease-in-out 1.5s infinite}
@keyframes selo-brilho{0%,62%{background-position:130% 0}100%{background-position:-130% 0}}
.selo-lote:not(.is-mouse) .selo-lote__giro{animation:selo-balanca 9s ease-in-out infinite}
@keyframes selo-balanca{0%,100%{transform:rotateY(-14deg) rotateX(4deg)}50%{transform:rotateY(14deg) rotateX(-3deg)}}
.selo-lote__dica{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);white-space:nowrap;font:700 11.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#7A4A12;background:#FFF7EC;border:1px solid rgba(225,125,0,.45);border-radius:999px;padding:5px 10px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.selo-lote:hover .selo-lote__dica,.selo-lote:focus-visible .selo-lote__dica{opacity:1;transform:translate(-50%,10px)}
.selo-lote:focus-visible{outline:3px solid var(--laranja);outline-offset:6px;border-radius:50%}
@media (max-width:980px){.selo-lote{width:112px;top:-30px;right:-6px}}

/* logo do topo em vetor (nítido em qualquer tela) e em 3D quando o mouse passa */
.marca3d{display:inline-flex;align-items:center;gap:12px;text-decoration:none;perspective:600px}
.marca3d__grao{display:block;width:40px;flex:none;transform-style:preserve-3d;transform:rotateX(var(--mrx,0deg)) rotateY(var(--mry,0deg));transition:transform .2s ease-out;filter:drop-shadow(0 6px 8px rgba(5,47,28,.22))}
.marca3d__grao svg{display:block;width:100%;height:auto}
.marca3d__nome{display:grid;gap:3px;line-height:1;transform:rotateX(var(--mrx2,0deg)) rotateY(var(--mry2,0deg));transition:transform .2s ease-out,text-shadow .2s}
.marca3d__nome b{font:600 21px/1 var(--display);letter-spacing:.26em;color:#215B40}
.marca3d__nome i{font:500 10.5px/1 var(--display);font-style:normal;letter-spacing:.42em;color:#B26200;text-align:center;padding-left:.2em}
.marca3d:hover .marca3d__nome b,.marca3d:focus-visible .marca3d__nome b{text-shadow:1px 1px 0 #1A4A33,2px 2px 0 #163F2C,3px 3px 0 #123524,4px 6px 10px rgba(5,47,28,.3)}
.marca3d:hover .marca3d__nome i,.marca3d:focus-visible .marca3d__nome i{text-shadow:1px 1px 0 #8A4F10,2px 3px 6px rgba(120,70,10,.25)}
.marca3d:hover .marca3d__grao{animation:marca-giro 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes marca-giro{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
:root[data-theme=dark] .marca3d__nome b{color:#EAF0EA} :root[data-theme=dark] .marca3d__nome i{color:#F0A040}
@media (max-width:420px){.marca3d__grao{width:32px}.marca3d__nome b{font-size:17px;letter-spacing:.2em}.marca3d__nome i{font-size:9px;letter-spacing:.34em}}

/* menus na barra de cima (como módulos) até 980 px; abaixo disso, o botão de menu */
@media (min-width:981px) and (max-width:1399px){
  .header__bar{gap:10px}
  .nav__toggle,.header .nav__item>a{padding:12px 11px;font-size:14px}
  .nav-acoes .nav__cta-topo{padding-inline:14px;font-size:14px}
}
@media (min-width:981px) and (max-width:1219px){.nav-acoes .nav__cta-topo{display:none}.icon-btn.nav__zap{display:inline-flex}}
.header .nav__lista{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}

/* "menos movimento" do aparelho zera tudo; com o movimento ligado no botão, as animações novas voltam */
@media (prefers-reduced-motion:reduce){
  html.mov-vivo .selo-lote{animation:flutua 7s ease-in-out infinite!important}
  html.mov-vivo .selo-lote__giro::after{animation:selo-brilho 5.5s ease-in-out 1.5s infinite!important}
  html.mov-vivo .selo-lote:not(.is-mouse) .selo-lote__giro{animation:selo-balanca 9s ease-in-out infinite!important}
  html.mov-vivo .marca3d:hover .marca3d__grao{animation:marca-giro 1.1s cubic-bezier(.2,.8,.2,1)!important}
  html.mov-vivo .selo-lote__giro,html.mov-vivo .marca3d__grao,html.mov-vivo .marca3d__nome{transition:transform .2s ease-out!important}
}
.sem-mov .selo-lote,.sem-mov .selo-lote__giro,.sem-mov .selo-lote__giro::after,.sem-mov .marca3d__grao{animation:none!important}

/* selo como MOEDA em 3D (nota dele 22/10 03:31): gira sozinho, tem espessura dourada, sem fundo nenhum */
.selo-lote{filter:none}
.selo-lote__giro{transform-style:preserve-3d}
.selo-lote__giro img.selo-face{position:relative;display:block;width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 10px 14px rgba(80,50,0,.25))}
.selo-lote__giro img.selo-verso{position:absolute;inset:0;transform:rotateY(180deg) translateZ(7px)}
.selo-borda{position:absolute;inset:0;transform:translateZ(var(--z));background:url('img/selo-puro-lote.webp') center/contain no-repeat;filter:brightness(.5) saturate(1.3);pointer-events:none} /* espessura da moeda com o mesmo desenho do selo: nada aparece por fora */
.selo-lote:not(.is-mouse) .selo-lote__giro{animation:selo-moeda 7s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes selo-moeda{0%{transform:rotateY(0)}38%{transform:rotateY(360deg)}100%{transform:rotateY(360deg)}}
.selo-lote:hover .selo-lote__giro{transition:transform .18s ease-out}
@media (prefers-reduced-motion:reduce){html.mov-vivo .selo-lote:not(.is-mouse) .selo-lote__giro{animation:selo-moeda 7s cubic-bezier(.45,.05,.55,.95) infinite!important}}
.sem-mov .selo-lote:not(.is-mouse) .selo-lote__giro{animation:none!important}

/* tradutor do site no topo (GTranslate grátis; 23/10): troca o idioma sozinho pelo idioma do navegador do visitante */
.tradutor{display:inline-flex;align-items:center}
.tradutor select{height:40px;max-width:150px;padding:0 10px;border:1px solid var(--linha,#DDE1DD);border-bottom:2px solid var(--laranja);border-radius:12px;background:#fff;font:600 13px var(--ui,'Montserrat',sans-serif);color:#1A2620;cursor:pointer;box-shadow:none}
@media (max-width:420px){.tradutor select{max-width:96px;font-size:12px;padding:0 6px}}
:root[data-theme=dark] .tradutor select{background:#0b1912;color:#EAF0EA;border-color:#44584e}
.tradutor select{width:auto;min-width:132px}
/* 23/10: no celular a caixinha do idioma fica estreita (antes empurrava o menu pra fora da tela) */
@media (max-width:520px){.tradutor select{min-width:0!important;width:78px!important;max-width:78px!important;padding:0 4px;font-size:11.5px}.nav-acoes{gap:4px}}
@media (max-width:520px){#tema{display:none}.marca3d{gap:8px}.marca3d__grao{width:30px}.marca3d__nome b{font-size:16px;letter-spacing:.16em}.marca3d__nome i{font-size:8.5px;letter-spacing:.3em}}
@media (max-width:400px){.icon-btn.nav__zap{display:none}}
.marca3d,.marca3d *{unicode-bidi:normal}

/* 23/10 (revisão Codex + Gemini): no celular o 'Pausar movimento' cobria o botão do WhatsApp; sobe pra cima dele */
@media (max-width:600px){.pausar-mov{bottom:84px;padding:8px 13px;font-size:12px}}

/* ---------- 23/10 16:41 (vídeo do Gabriell): fileira de selos 3D na capa, pulando e girando ----------
   Animação "squash and stretch" (achatar e esticar, o princípio de desenho animado): agacha, pula esticado, dá meia-volta
   no ar (mostra as costas), cai achatado e quica. Cada selo sai um tiquinho depois do outro (onda). Sem movimento: parados. */
.selos-pulo{display:flex;align-items:flex-end;gap:clamp(6px,1.1vw,16px);list-style:none;margin:0 0 6px;padding:34px 0 10px;perspective:700px}
.selos-pulo li{position:relative;display:flex;align-items:flex-end}
.selos-pulo img{display:block;height:clamp(36px,4.4vw,62px);width:auto;transform-origin:50% 100%;filter:drop-shadow(0 4px 6px rgba(5,47,28,.22));animation:selo-pula 4.4s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:calc(var(--i)*.32s);will-change:transform}
.selos-pulo li::after{content:'';position:absolute;left:12%;right:12%;bottom:-6px;height:6px;border-radius:50%;background:rgba(5,47,28,.18);filter:blur(2px);animation:selo-sombra 4.4s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:calc(var(--i)*.32s)}
.selos-pulo li:hover img{animation-duration:1.6s}
.selos-pulo li:hover::after{animation-duration:1.6s}
@keyframes selo-pula{
  0%,60%,100%{transform:translateY(0) scale(1,1) rotateY(0)}
  7%{transform:translateY(0) scale(1.14,.82) rotateY(0)}
  16%{transform:translateY(-24px) scale(.9,1.12) rotateY(0)}
  26%{transform:translateY(-32px) scale(1,1) rotateY(180deg)}
  36%{transform:translateY(-22px) scale(.94,1.06) rotateY(360deg)}
  44%{transform:translateY(0) scale(1.16,.8) rotateY(360deg)}
  51%{transform:translateY(-7px) scale(.96,1.04) rotateY(360deg)}
  56%{transform:translateY(0) scale(1.04,.96) rotateY(360deg)}
}
@keyframes selo-sombra{0%,60%,100%{transform:scaleX(1);opacity:1}7%{transform:scaleX(1.15)}26%{transform:scaleX(.55);opacity:.45}44%{transform:scaleX(1.2);opacity:1}}
.sem-mov .selos-pulo img,.sem-mov .selos-pulo li::after{animation:none}
@media (prefers-reduced-motion:reduce){html:not(.mov-vivo) .selos-pulo img,html:not(.mov-vivo) .selos-pulo li::after{animation:none}}
@media (max-width:600px){.selos-pulo{gap:5px;padding-top:28px}}
/* "Torrefação própria · Goiânia-GO · desde 2023" com letra de site fino (antes: letra de sistema, espaçada) */
.capa .olho.olho--fino{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:16px;letter-spacing:.05em;text-transform:none;color:#2b3a32;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.capa .olho.olho--fino::before{content:'';width:30px;height:1px;background:var(--ouro);flex:none}
/* 23/10 17:07 (Gabriell): selos um pouco maiores, esticando mais pra direita e mais pertinho da logo (sem o vão grande em cima) */
.capa{padding-top:22px}
.selos-pulo{width:min(150%,calc(100vw - 64px));justify-content:space-between;padding-top:30px;margin-bottom:10px;position:relative;z-index:3}
.selos-pulo img{height:clamp(44px,5.4vw,80px)}
@media (max-width:980px){.selos-pulo{width:100%}}
@media (max-width:600px){.selos-pulo{padding-top:26px}.selos-pulo img{height:clamp(32px,9.6vw,46px)}}

.selos-pulo li{cursor:pointer}.selos-pulo li.parado img,.selos-pulo li.parado::after{animation-play-state:paused}

/* ---------- 23/10 17:20 (vídeo do Gabriell): menus com o CONTORNO DOURADO e o ALTO RELEVO 3D do ERP ----------
   Receita do chat ERP- OFICIAL (erp-marcas-proprias src/styles/marca.css L290-335, só o visual): anel de 1,5 px feito
   com máscara (sem borda), que acende ao passar o mouse e segue o mouse; ao clicar, a aba "afunda" com o anel dourado. */
body>header nav>ul>li>a,body>header .nav__toggle,.sub a{position:relative;border-radius:10px;isolation:isolate}
body>header nav>ul>li>a::after,body>header .nav__toggle::after,.sub a::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,#e17d00,#e3a519 40%,#74dba7 78%,#e17d00);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
body>header nav>ul>li>a:focus-visible::after,body>header .nav__toggle:focus-visible::after,.sub a:focus-visible::after,
body>header .nav__toggle[aria-expanded=true]::after{opacity:1}
body>header .nav__toggle[aria-expanded=true],body>header nav>ul>li>a:active,body>header .nav__toggle:active,.sub a:active{
  transform:translateY(2px);background:linear-gradient(165deg,#fff 0%,#fdfbf7 55%,#f4efe6 100%);
  box-shadow:0 0 0 2px #f1ce84,0 0 0 5px rgba(241,206,132,.3),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(176,150,98,.22),0 2px 0 #cbbd9f,0 5px 10px rgba(0,0,0,.18)}
@media (hover:hover){
  body>header nav>ul>li>a,body>header .nav__toggle,.sub a{transition:transform 220ms ease,box-shadow 220ms ease,background-color 220ms ease}
  body>header nav>ul>li>a::after,body>header .nav__toggle::after,.sub a::after{transition:opacity 220ms ease}
  body>header nav>ul>li>a:hover,body>header .nav__toggle:hover,.sub a:hover{
    transform:perspective(700px) translateY(-2px);background:linear-gradient(165deg,#fff 0%,#fdfbf7 55%,#f4efe6 100%);
    box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(176,150,98,.22),0 4px 0 #cbbd9f,0 10px 18px rgba(0,0,0,.16)}
  body>header nav>ul>li>a:hover::after,body>header .nav__toggle:hover::after,.sub a:hover::after{opacity:1;
    background:radial-gradient(160px circle at var(--luz-x,50%) var(--luz-y,50%),#e17d00,#e3a519 35%,rgba(116,219,167,.5) 65%,transparent)}
}
@media (hover:none){body>header nav>ul>li>a,body>header .nav__toggle,.sub a{transition:none}}

/* 24/10: logo do órgão em cada registro, como uma placa oficial em 3D. Movimento sério: inclina pouco, devagar, e um reflexo discreto passa de tempos em tempos */
.com-orgao .orgao3d{margin:0 0 14px;perspective:900px;width:min(240px,70%)}
.orgao3d__placa{position:relative;display:block;padding:12px 16px;border-radius:10px;background:#fff;border:1px solid rgba(26,38,32,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -12px rgba(5,47,28,.35),0 2px 0 #d8ddd8;transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-8deg);animation:orgao-placa 9s ease-in-out infinite;overflow:hidden}
.orgao3d__placa img{display:block;width:100%;height:auto}
.orgao3d__placa::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;animation:orgao-reflexo 9s ease-in-out infinite}
@keyframes orgao-placa{0%,100%{transform:rotateX(6deg) rotateY(-8deg)}50%{transform:rotateX(4deg) rotateY(8deg)}}
@keyframes orgao-reflexo{0%,70%{background-position:130% 0}100%{background-position:-130% 0}}
@media (hover:hover){.com-orgao:hover .orgao3d__placa{animation-play-state:paused;transform:rotateX(0) rotateY(0) translateZ(12px);transition:transform .4s ease}}
@media (prefers-reduced-motion:reduce){html.mov-vivo .orgao3d__placa{animation:orgao-placa 9s ease-in-out infinite!important}html.mov-vivo .orgao3d__placa::after{animation:orgao-reflexo 9s ease-in-out infinite!important}}
.sem-mov .orgao3d__placa,.sem-mov .orgao3d__placa::after{animation:none!important}