/* ============================================================
   LIXO PREMIUM — FOLHA DE ESTILO ÚNICA
   ============================================================
   Conceito: "engenharia da confiança". Objeto banal tratado com
   rigor industrial. Luz dura, geometria precisa, espaço negativo
   medido (sobra não é espaço negativo, é acidente).

   A gramática vem da EMBALAGEM, não de um moodboard:
     faixa branca → corpo azul → chevron branco com o numeral
     gigante → placa amarela da contagem → rodapé de dados legais.
   O verde aparece UMA vez, no símbolo de reciclagem.

   REGRA DE COR (não se quebra):
     azul    = estrutura. É onde o olho descansa.
     amarelo = AÇÃO. Orçamento: UM preenchimento amarelo por tela.
               Fios, filetes de 3-4px e inset-shadow não contam —
               ficam abaixo de 2% da área e leem como marcação.
     verde   = SÓ reciclagem. Vazou, a mensagem ambiental morre.

   🚫 filter / backdrop-filter: PROIBIDOS. Travam o renderizador
      desta máquina. Zero ocorrência neste arquivo — o gerar.mjs
      falha o build se aparecer.
   ⚠️ z-index:-1 em pseudo-elemento cai atrás do fundo da seção
      e some. Já queimou uma vez (o sublinhado do título).
   ============================================================ */

:root{
  /* ---------- cor (pixels da logo, não estimados) ---------- */
  --azul:        #011540;
  --azul-apoio:  #0a2c6b;
  --azul-leve:   #e7ecf5;
  --amarelo:     #fdbd03;
  --amarelo-esc: #c99200;
  --amarelo-luz: #fff3d1;
  --verde:       #014f01;
  --verde-luz:   #e3efe3;

  --fundo:       #faf8f3;   /* morno, não branco de hospital */
  --fundo-2:     #efece3;
  --texto:       #0e1b33;
  --texto-2:     #4a5266;
  --texto-claro: #f5f3ec;
  --borda:       #dbd6c8;

  --display: 'Playfair Display', Georgia, serif;
  --corpo:   'IBM Plex Sans', system-ui, Arial, sans-serif;
  --mono:    ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --max: 1180px;

  /* ---------- elevação ----------
     Três alturas de verdade. O site antigo tinha UMA sombra no
     arquivo inteiro e por isso parecia chapado. */
  --elev-1: 0 1px 2px rgba(1,21,64,.06), 0 2px 8px rgba(1,21,64,.05);
  --elev-2: 0 2px 4px rgba(1,21,64,.08), 0 10px 26px rgba(1,21,64,.09);
  --elev-3: 0 4px 8px rgba(1,21,64,.10), 0 26px 60px rgba(1,21,64,.14);
  --contato: 0 2px 3px rgba(1,21,64,.22);  /* sombra curta: o objeto toca o chão */

  /* ---------- tipo: escala modular fluida (360 → 1280px) ---------- */
  --t-display: clamp(2.25rem, 1.47rem + 3.48vw, 4.25rem);
  --t-titulo:  clamp(1.75rem, 1.36rem + 1.74vw, 2.75rem);
  --t-sub:     clamp(1.25rem, 1.10rem + 0.65vw, 1.625rem);
  --t-lead:    clamp(1.0625rem, 0.96rem + 0.43vw, 1.3125rem);
  --t-corpo:   clamp(1rem, 0.96rem + 0.16vw, 1.09rem);
  --t-apoio:   .92rem;
  --t-micro:   .775rem;
  /* o numeral gigante da embalagem — a voz tipográfica da marca */
  --t-numeral: clamp(3.5rem, 2.13rem + 6.09vw, 7rem);

  /* ---------- ritmo: base 8 ---------- */
  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem;
  --e5:2rem;  --e6:3rem;   --e7:4rem; --e8:6rem;
  --secao: clamp(3.5rem, 9vw, 6.5rem);
  --curva: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family:var(--corpo); font-size:var(--t-corpo); color:var(--texto);
  background:var(--fundo); line-height:1.6; overflow-x:hidden; max-width:100%;
}
img,svg{ max-width:100%; display:block; }

.wrap{ width:min(100% - 2.5rem, var(--max)); margin-inline:auto; }
.wrap.estreito{ width:min(100% - 2.5rem, 760px); }
section{ position:relative; padding:var(--secao) 0; overflow:hidden; }
/* seções que precisam deixar a sombra da moldura passar */
section.transborda{ overflow:visible; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pula{ position:absolute; left:-999px; top:0; z-index:200; background:var(--azul);
  color:var(--texto-claro); padding:.8rem 1.2rem; border-radius:0 0 8px 0; }
.pula:focus{ left:0; }

/* ---------- tipografia ----------
   Tracking POR NÍVEL: Playfair 800 a 68px precisa fechar
   (-.022em); a 20px, quase nada (-.006em). Um valor único
   deixa o título grande frouxo — era o caso antes. */
h1,h2,h3{ font-family:var(--display); color:var(--azul); text-wrap:balance; }
h1{ font-size:var(--t-display); font-weight:800; line-height:1.02; letter-spacing:-.022em; }
h2{ font-size:var(--t-titulo);  font-weight:700; line-height:1.08; letter-spacing:-.014em; }
h3{ font-size:var(--t-sub);     font-weight:700; line-height:1.22; letter-spacing:-.006em; }
p{ max-width:65ch; }
.centro{ margin-inline:auto; text-align:center; }

.olho{ font-family:var(--corpo); font-weight:600; font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde); }
.olho.amarelo{ color:var(--amarelo-esc); }
.olho.claro{ color:var(--amarelo); }
.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--texto-2); margin-top:var(--e3); }
.micro{ font-size:var(--t-apoio); color:var(--texto-2); margin-top:var(--e2); }
.micro.claro{ color:rgba(245,243,236,.7); }
.micro.claro a{ color:var(--amarelo); }

/* numeral tabular: alinha coluna de ficha técnica */
.num,.ficha dd,.conta .val,.card-spec,.card-litros,.numeros dd{
  font-variant-numeric:tabular-nums lining-nums; }

/* ---------- fluxo ----------
   Mata os margin-top inline. A regra de ouro do ritmo:
   o espaço ANTES de um título é maior que o espaço DEPOIS dele.
   O site antigo fazia o contrário e por isso parecia colado. */
.fluxo > * + *{ margin-top:var(--fl, var(--e3)); }
.fluxo > .olho + *{ --fl:var(--e2); }
.fluxo > h1 + *, .fluxo > h2 + *, .fluxo > h3 + *{ --fl:var(--e3); }
.fluxo > * + .acoes, .fluxo > * + .lista{ --fl:var(--e5); }
.fluxo > * + h2, .fluxo > * + h3{ --fl:var(--e6); }

/* ============================================================
   ASSINATURAS DA MARCA — todas tiradas do objeto, nenhuma de
   moodboard. São quatro.
   ============================================================ */

/* 1. O VINCO — a dobra do saco pegando luz */
.vinco{ position:relative; height:4px; max-width:1100px;
  margin:clamp(2.5rem,6vw,4rem) auto; border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(1,21,64,.10) 18%,
    rgba(1,21,64,.34) 50%, rgba(1,21,64,.10) 82%, transparent 100%); }
.vinco::after{ content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:rgba(255,255,255,.6); }

/* 2. O NÓ — marcador de lista com a forma do nó de fechamento */
.lista{ list-style:none; padding:0; }
.lista li{ position:relative; padding-left:2rem; margin-bottom:.85rem; max-width:60ch; }
.lista li::before{ content:""; position:absolute; left:0; top:.55em;
  width:15px; height:15px; background:var(--amarelo);
  clip-path:polygon(50% 0%,78% 16%,100% 50%,78% 84%,50% 100%,22% 84%,0% 50%,22% 16%); }

/* 3. A LINHA DE TENSÃO — o traço estica sob o cursor.
      Material sob tensão que não rasga. Vem do traço da logo. */
.tensao{ position:relative; color:var(--azul); text-decoration:none;
  font-weight:600; padding-bottom:3px; }
.tensao::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--amarelo); transform:scaleX(.34); transform-origin:left center;
  transition:transform .35s var(--curva); }
.tensao:hover::after,.tensao:focus-visible::after,.tensao.aqui::after{ transform:scaleX(1); }

/* 4. O PICOTE — a perfuração do rolo, com "destaque aqui" impresso.
      Os furos são elipses pintadas NA COR DO FUNDO por cima do
      traço. Sem SVG, sem filter. A aba do canto direito se solta
      sozinha quando entra na tela — reaproveita .rev/.on, zero JS.
      ⚠️ Vive ENTRE seções: section{overflow:hidden} decepa a aba. */
.picote{
  --furo-cor:var(--fundo);
  --traco:rgba(1,21,64,.30);
  position:relative; height:20px; margin-block:clamp(2.5rem,6vw,4rem);
  background-image:
    radial-gradient(ellipse 4.5px 3px at 50% 50%, var(--furo-cor) 99%, transparent 100%),
    linear-gradient(var(--traco), var(--traco));
  background-size:17px 20px, 100% 1.5px;
  background-position:0 50%, 0 50%;
  background-repeat:repeat-x, no-repeat;
}
.picote::after{
  content:""; position:absolute; right:0; top:50%;
  width:clamp(64px,18vw,132px); height:22px;
  background:var(--furo-cor); border-top:1.5px dashed var(--traco);
  transform-origin:right top; transform:rotate(0deg);
  transition:transform .62s cubic-bezier(.34,1.5,.64,1), box-shadow .62s ease;
}
.picote.on::after{ transform:rotate(7deg) translateY(1px); box-shadow:-4px 6px 12px rgba(1,21,64,.14); }
.picote .dica{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  padding-right:.7rem; background:var(--furo-cor);
  font-size:.62rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--texto-2); opacity:.55;
}

/* ---------- botões ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.9rem 1.6rem; border-radius:8px; border:2px solid var(--azul);
  background:transparent; color:var(--azul); font-family:var(--corpo);
  font-weight:700; font-size:.94rem; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, color .25s ease, box-shadow .25s ease; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--amarelo);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--curva); z-index:-1; }
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); }
.btn:active{ transform:scale(.975); }
.btn svg{ flex:none; }
.btn.cheio{ background:var(--amarelo); border-color:var(--amarelo); color:var(--azul);
  box-shadow:var(--elev-1); }
.btn.cheio::before{ background:var(--azul); }
.btn.cheio:hover,.btn.cheio:focus-visible{ color:var(--texto-claro); box-shadow:var(--elev-2); }
.btn.claro{ border-color:rgba(245,243,236,.5); color:var(--texto-claro); }
.btn.claro::before{ background:var(--amarelo); }
.btn.claro:hover,.btn.claro:focus-visible{ color:var(--azul); }
.btn.grande{ min-height:58px; padding:1rem 1.9rem; font-size:1rem; }
.acoes{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--e5); }
.acoes.centro{ justify-content:center; }

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--amarelo); outline-offset:3px; border-radius:5px; }
a,button{ -webkit-tap-highlight-color:rgba(253,189,3,.28); }

/* ---------- topo ---------- */
.topo{ position:sticky; top:0; z-index:60; padding:.7rem 0;
  background:rgba(250,248,243,.94); border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, padding .25s ease; }
.topo.rolado{ box-shadow:0 2px 18px rgba(1,21,64,.10); border-bottom-color:var(--borda); padding:.45rem 0; }
.topo .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topo img{ height:clamp(34px,6vw,46px); width:auto; transition:height .25s ease; }
.topo.rolado img{ height:clamp(30px,5vw,38px); }
.menu{ display:none; gap:1.6rem; }
.menu a{ font-size:.9rem; font-weight:600; color:var(--azul); text-decoration:none; }
@media (min-width:920px){ .menu{ display:flex; } }
.topo .btn{ min-height:44px; padding:.55rem 1.05rem; font-size:.82rem; }
@media (max-width:600px){ .zap-topo span{ display:none; } }

/* ---------- migalha ---------- */
.migalha{ padding:1rem 0 0; font-size:.82rem; color:var(--texto-2); }
.migalha a{ color:var(--texto-2); text-decoration:none; }
.migalha a:hover{ color:var(--azul); text-decoration:underline; }
.migalha span{ opacity:.45; margin:0 .25rem; }
.migalha strong{ color:var(--azul); }

/* ============================================================
   HERO DA HOME
   ============================================================ */
.hero{ padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(3rem,8vw,5.5rem);
  background:
    radial-gradient(900px 520px at 88% 4%, rgba(253,189,3,.16) 0%, rgba(253,189,3,0) 60%),
    linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 100%); }
.hero .grade{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:960px){ .hero .grade{ grid-template-columns:1.02fr .98fr; } }
/* ⚠️ NADA de z-index:-1: o pseudo iria parar atrás do fundo da seção */
.hero h1 em{ font-style:normal; position:relative; white-space:nowrap; }
.hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:-.1em; height:.11em;
  background:var(--amarelo); border-radius:99px; transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--curva) .55s; }
.hero.pronta h1 em::after{ transform:scaleX(1); }
.faixa-confianca{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:var(--e5);
  padding-top:var(--e4); border-top:1px solid var(--borda);
  font-size:.82rem; font-weight:600; color:var(--texto-2); }
.faixa-confianca b{ color:var(--azul); }

/* ============================================================
   O PALCO DO HERO — as coisas caindo dentro do saco
   ============================================================
   REGRA CENTRAL: o objeto some porque o SACO O ESCONDE, não
   porque a opacidade caiu. Os .cai ficam ATRÁS do <svg.saco> e o
   fill opaco #011540 faz o papel de máscara. Oclusão de verdade,
   quadro a quadro, custo zero — sem clip-path animado, sem mask,
   sem filter. (Com formas abstratas azuis ninguém notava; com um
   prato branco, você veria ele encostar no saco e DESBOTAR.)

   A ESCADA DE PINTURA — não é decoração, É o efeito:
     .palco::after  z-index:0   sombra no chão
     .cai           z-index:1   os objetos      ← atrás
     .saco          z-index:2   o saco (máscara)
     .gota          z-index:3   na superfície
   ⚠️ O .saco PRECISA de position:relative. Sem isso ele é
      estático, os .cai são absolutos, e absoluto pinta ACIMA de
      estático mesmo vindo antes no DOM. O efeito inverte e não dá
      erro nenhum no console. Não apagar achando que é supérfluo.

   SÓ transform E opacity SÃO ANIMADOS AQUI. Nada de top/left/
   width/box-shadow/background — o código antigo animava `top` nos
   keyframes cai1/cai2, o que dispara layout a 60fps. Com dois
   objetos passava; com oito, nesta máquina, não passaria.
   ZERO will-change, de propósito: animação de transform já é
   promovida sozinha enquanto roda e a camada é descartada no fim.
   will-change só tornaria a promoção permanente — 8 texturas
   presas na GPU o tempo todo, inclusive quando nada cai.
   ============================================================ */
.palco{
  position:relative;
  z-index:0;                      /* contexto próprio: os z-index daqui
                                     não conversam com .topo (60) nem
                                     com .zap-flutua (80) */
  /* 360px em vez dos 400px de antes: o viewBox do saco cresceu 27%
     para abrir céu acima dele, então o palco precisa encolher um
     pouco para a altura total não estourar o hero. */
  width:min(360px,80vw); margin-inline:auto;

  --ciclo: 12s;                   /* a volta inteira: 4 rodadas de 2 */
  --u: clamp(38px, 13vw, 58px);   /* tamanho-base de um objeto.
                                     Subiu de 46px: a 46 os objetos ficavam
                                     pequenos demais para serem reconhecidos
                                     de relance ao lado de um saco de 200px,
                                     e reconhecer é o ponto inteiro da troca
                                     (antes eram formas abstratas). */
  --queda: 560%;                  /* % da ALTURA DO PRÓPRIO OBJETO — assim a
                                     queda se reescala sozinha de 360px a
                                     1920px, sem media query e sem var() de
                                     distância dentro do keyframe.
                                     Invariante, conferido no navegador:
                                       queda × alt_objeto  >
                                       (0,345 + 0,12) × alt_palco + alt_objeto
                                     ⚠️ Começou em 460% e os três objetos mais
                                     baixos (copo, leite, papel — os de --k
                                     menor) paravam ANTES de cruzar a boca:
                                     ficavam meio à mostra na borda. Sobra é
                                     grátis, porque acontece escondida atrás
                                     do saco; falta é bug bem visível. */
}
.saco{
  position:relative; z-index:2;   /* ⚠️ obrigatório — ver acima */
  width:100%; height:auto; overflow:visible;
  /* 92% = o fundo do saco (y≈306 de 330). Com os 72% de antes a
     base subia e descia e DESCOLAVA da sombra do plinto, que é
     estática. É a diferença entre "saco no chão" e "saco boiando". */
  transform-origin:50% 92%;
}

/* ---- a queda ----
   cubic-bezier(.11,0,.5,0) é a easeInQuad: derivada 0 na saída,
   derivada 2 na chegada. Não é gosto, é s=½gt².
   (A curva antiga, .5,0,.9,.4, tem derivada final 6 — o objeto
   teleporta nos últimos 15%. Passava com forma abstrata; com uma
   lata de refrigerante a pessoa vê o salto.) */
@keyframes lp-cai{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(var(--g0,0deg));
    animation-timing-function:cubic-bezier(.11,0,.5,0);
  }
  1.6%{ opacity:1; }                        /* ~190ms: entra, não pisca */
  9%{                                       /* 1,08s de queda */
    opacity:1;
    transform:translate3d(var(--dx,0%), var(--queda), 0) rotate(var(--g1,0deg));
  }
  /* a opacidade só cai AQUI, com o objeto JÁ escondido atrás do
     saco. É contabilidade, não é o que a pessoa vê. */
  10%,99%{
    opacity:0;
    transform:translate3d(var(--dx,0%), var(--queda), 0) rotate(var(--g1,0deg));
  }
  /* 10%→99% é trecho CONSTANTE: o compositor não recalcula nada
     por 10,7s. Sem a parada em 99% o transform voltaria a zero
     interpolando esse tempo todo — invisível, e queimando quadro. */
  100%{ opacity:0; transform:translate3d(0,0,0) rotate(var(--g0,0deg)); }
}

.cai{
  position:absolute; z-index:1;
  top:-12%;                                 /* estático, nunca animado */
  left:var(--x,50%);
  width:calc(var(--u) * var(--k,1));
  height:calc(var(--u) * var(--k,1));
  margin-left:calc(var(--u) * var(--k,1) / -2);
  opacity:0;                                /* invisível se o JS não rodar */
  pointer-events:none;
}
.cai .obj{ width:100%; height:100%; display:block; overflow:visible; }
.hero.pronta .cai{ animation:lp-cai var(--ciclo) linear var(--t) infinite backwards; }

/* ---- as 4 rodadas ----
   3s entre rodadas: ~1,8s de movimento + 1,2s de saco parado. O
   silêncio é funcional — hero que nunca para é hero do qual se
   rola embora, e é ele que faz a rodada seguinte ser notada.
   Em 6s a pessoa vê 2 rodadas = 4 objetos, que é o bastante para
   entender a ideia sem precisar de paciência.

   --x  TRAVA EM 30%–70%. O vão da boca vai de 23% a 77% (o path:
        x=70→230 de 300). Fora disso o objeto cai AO LADO do saco
        e nunca é ocluído — aparece um prato escorregando pela
        borda de fora. E ninguém em 50% exato: é onde está o nó.
   --g0/--g1  giro, limitado a 22°–122°, NUNCA volta completa: em
        queda livre a rotação real é linear e a translação é
        quadrática, e as duas no mesmo transform dividem a mesma
        curva. Num quarto de volta ninguém percebe; num giro de
        720° percebe na hora. Giro por peso — garrafa e lata giram
        pouco, papel e saquinho giram muito. */
/*                       --x     --k     --g0       --g1      --dx    --t    */
.cai-1{ --x:42%; --k:1.10; --g0:  6deg; --g1:-44deg; --dx:-14%; --t:.35s;  } /* garrafa  */
.cai-2{ --x:61%; --k:.95;  --g0:-12deg; --g1: 58deg; --dx: 10%; --t:.68s;  } /* copo     */
.cai-3{ --x:36%; --k:1.05; --g0:  9deg; --g1:-26deg; --dx:  8%; --t:3.35s; } /* caixa    */
.cai-4{ --x:60%; --k:.92;  --g0: -7deg; --g1: 30deg; --dx:-10%; --t:3.68s; } /* maçã     */
.cai-5{ --x:45%; --k:1.00; --g0:-10deg; --g1: 36deg; --dx: 12%; --t:6.35s; } /* lata     */
.cai-6{ --x:64%; --k:1.15; --g0: 16deg; --g1:-88deg; --dx:-16%; --t:6.68s; } /* saquinho */
.cai-7{ --x:38%; --k:1.20; --g0:-20deg; --g1: 22deg; --dx: 16%; --t:9.35s; } /* prato    */
.cai-8{ --x:57%; --k:.88;  --g0: 14deg; --g1:122deg; --dx:-12%; --t:9.68s; } /* papel    */

/* ---- o impacto: UMA deformação por RODADA, não por objeto ----
   8 pancadas em 12s (uma a cada 1,4s) seria tremedeira. 4 em 12s
   é exatamente o ritmo de hoje: a mesma calma, com 4× mais coisa.
   Os dois objetos da rodada aparecem numa envoltória de DUPLA
   BATIDA a ~230ms de distância — acima de ~400ms o cérebro lê
   dois eventos, abaixo de ~120ms lê um só; 230ms lê "caíram duas
   coisas", que é um evento composto.

   A PANCADA DIMINUI A CADA RODADA (4,6→3,6→2,7→1,9%): o saco está
   enchendo e cede menos. Aí o recomeço do loop, com a pancada
   grande de novo, lê como SACO NOVO em vez de vídeo repetindo.
   Custa zero — é a mesma animação única.

   🔴 A deformação SAIU do <path> e foi para o <svg>. Animar
   transform em sub-elemento de SVG é o único ponto deste efeito
   que o Chrome pode decidir rodar na main thread, repintando o
   SVG inteiro a cada quadro. O <svg> é uma caixa CSS normal:
   promoção garantida. De brinde, o saco inteiro cede — inclusive
   o nó amarelo — que é o que um saco de verdade faz.
   Sem curva declarada, de propósito: as paradas estão a 90-200ms
   uma da outra e nessa escala linear e ease caem no mesmo pixel.
   Quem faz o ritmo é a POSIÇÃO das paradas, não a curva. */
.hero.pronta .saco{ animation:lp-impacto var(--ciclo) linear infinite; }
@keyframes lp-impacto{
  0%,11.7%{ transform:scale(1,1); }
  12.5%{ transform:scale(1.046,.954); }   /* rodada 1 — saco vazio, a maior */
  13.6%{ transform:scale(.988,1.014); }
  14.4%{ transform:scale(1.026,.974); }   /* o 2º objeto */
  15.6%{ transform:scale(.994,1.007); }
  17.3%,36.7%{ transform:scale(1,1); }
  37.5%{ transform:scale(1.036,.964); }   /* rodada 2 */
  38.6%{ transform:scale(.991,1.011); }
  39.4%{ transform:scale(1.020,.980); }
  40.6%{ transform:scale(.995,1.005); }
  42.3%,61.7%{ transform:scale(1,1); }
  62.5%{ transform:scale(1.027,.973); }   /* rodada 3 */
  63.6%{ transform:scale(.993,1.008); }
  64.4%{ transform:scale(1.015,.985); }
  65.6%{ transform:scale(.996,1.004); }
  67.3%,86.7%{ transform:scale(1,1); }
  87.5%{ transform:scale(1.019,.981); }   /* rodada 4 — quase não cede */
  88.6%{ transform:scale(.995,1.006); }
  89.4%{ transform:scale(1.011,.989); }
  90.6%{ transform:scale(.997,1.003); }
  92.3%,100%{ transform:scale(1,1); }     /* 0,9s de ar limpo na emenda */
}

/* ---- pausa fora da tela: o JS só troca ESTA classe ---- */
.palco.parado .cai,
.palco.parado .saco,
.palco.parado .gota,
.palco.parado .poca{ animation-play-state:paused; }
/* ---- as coisas que caem ----
   ⚠️ O código antigo animava `top` em dois `<span>` coloridos —
   um deles VERDE, o que quebrava a regra do projeto (o site
   pintava lixo com a cor reservada à reciclagem).
   Agora são 8 objetos de verdade em SVG, e animam SÓ transform
   e opacity: animar `top` dispara layout a cada quadro, para
   cada objeto, e esta máquina já congela o renderizador com
   facilidade. Com dois passava; com oito, não passaria. */
/* ---- o líquido que fica DENTRO do saco ----
   O argumento é a leitura: líquido que chega e NÃO atravessa.
   Nasce logo depois do miolo de maçã (o 4º objeto, que é quem traz
   o líquido) e não sai mais. Fica dentro da silhueta azul por
   construção — não depende de a animação estar bem calibrada. */
.poca{ opacity:0; transform-origin:150px 243px; transform:scaleX(.15); }
.hero.pronta .poca{ animation:lp-poca var(--ciclo) ease-out infinite; }
@keyframes lp-poca{
  0%,40%  { opacity:0; transform:scaleX(.15); }
  47%     { opacity:1; transform:scaleX(1); }
  96%     { opacity:1; transform:scaleX(1); }
  100%    { opacity:0; transform:scaleX(.15); }   /* recomeça: saco novo */
}
/* ---- a gota ----
   🔴 A versão antiga escorria pela parede EXTERNA do saco, de
   cima até perto do chão. A leitura literal disso é "o saco
   está molhado por fora" — ou seja, VAZOU. E a legenda logo
   abaixo diz "não vaza": a peça brigava consigo mesma, e quem
   perdia era o argumento central do produto.
   Agora ela escorre um trecho curto, DESACELERA e TRAVA na
   metade do corpo. Nunca chega perto da borda de baixo, nunca
   cruza o contorno. "Chega até aqui e para" já é o argumento.
   Cor: branco translúcido chapado. O gradiente azul de antes
   lia "água limpa" (falso para lixo) e qualquer tom âmbar leria
   "chorume" (verdadeiro e nojento). Branco translúcido lê como
   brilho no filme — preciso e sem agredir. */
.gota{ position:absolute; z-index:3;
  left:57%; top:34%; width:11px; height:15px; opacity:0;
  background:rgba(255,255,255,.5);
  border-radius:50% 50% 50% 0; }
.hero.pronta .gota{ animation:lp-gota var(--ciclo) linear infinite; }
@keyframes lp-gota{
  0%,41%  { opacity:0; transform:translate3d(0,0,0) rotate(45deg); }
  43%     { opacity:1; transform:translate3d(1px,3px,0) rotate(45deg);
            animation-timing-function:cubic-bezier(.3,0,.15,1); }
  50%     { opacity:1; transform:translate3d(6px,24px,0) rotate(45deg); }
  /* trava aqui e FICA: o líquido chega até este ponto e para.
     Nunca alcança a borda de baixo, nunca cruza o contorno. */
  54%,96% { opacity:1; transform:translate3d(7px,29px,0) rotate(45deg); }
  100%    { opacity:0; transform:translate3d(7px,29px,0) rotate(45deg); }
}
/* o plinto: dá chão ao objeto. Sem ele, o SVG flutua. */
/* a sombra no chão. bottom:0 (era -18px): com o viewBox estendido
   para cima, a base do saco caiu para ~96,7% da altura do palco —
   a -18px a sombra ficava 35px abaixo do saco, descolada dele. */
.palco::after{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:14px;
  border-radius:50%; background:radial-gradient(ellipse at center, rgba(1,21,64,.16), rgba(1,21,64,0) 70%); }
.legenda-palco{ text-align:center; margin-top:2rem; font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--texto-2); font-weight:600; }

/* ---------- faixa dos atributos ---------- */
.faixa{ background:var(--azul); color:var(--texto-claro); }
.faixa h2,.faixa h3{ color:var(--texto-claro); }
.atributos{ display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:var(--e6); }
@media (min-width:640px){ .atributos{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .atributos{ grid-template-columns:repeat(4,1fr); } }
/* .035 de fill fica ABAIXO do limiar de percepção na maioria dos
   monitores: os cards liam como texto solto. .06 resolve. */
.atr{ padding:1.6rem 1.4rem; border:1px solid rgba(245,243,236,.22); border-radius:12px;
  background:rgba(255,255,255,.06); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.atr:hover{ transform:translateY(-5px); border-color:rgba(253,189,3,.5); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.atr .ico{ width:44px; height:44px; margin-bottom:1rem; }
.atr .ico svg{ width:100%; height:100%; }
.atr p{ color:rgba(245,243,236,.76); font-size:.94rem; margin-top:.5rem; }

/* ---------- comparativo ---------- */
.duas{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .duas{ grid-template-columns:1fr 1fr; } .duas.inv .txt{ order:2; } }

.contas{ border:1px solid var(--borda); border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:var(--elev-2); }
.conta{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.3rem; border-bottom:1px solid var(--borda); }
.conta:last-child{ border-bottom:none; }
/* era um bloco amarelo de largura inteira — exatamente o que a
   regra proíbe. Vira um fio. */
.conta.bom{ background:#fff; box-shadow:inset 4px 0 0 var(--amarelo); }
.conta.bom .rot{ font-weight:700; }
.conta .rot{ font-weight:600; font-size:.95rem; }
.conta .val{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--azul); }
.conta.ruim .val{ color:#9a2b25; }

/* ---------- faixa de capacidades ---------- */
.capacidades{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--e5); }
.cap{
  display:flex; align-items:baseline; gap:.4rem;
  padding:.7rem 1.1rem; border:1px solid var(--borda); border-radius:8px;
  background:#fff; box-shadow:var(--elev-1); font-variant-numeric:tabular-nums;
}
.cap b{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--azul); }
.cap i{ font-style:normal; color:var(--texto-2); font-size:.8rem; font-weight:600; }
.cap s{ text-decoration:none; color:var(--amarelo-esc); font-weight:800; }

/* ---------- alternador ---------- */
.chaves{ display:inline-flex; padding:5px; gap:4px; border-radius:999px;
  background:var(--fundo-2); border:1px solid var(--borda); margin-top:var(--e4); }
.chaves button{ min-height:44px; padding:.6rem 1.25rem; border:none; border-radius:999px;
  background:transparent; font-family:var(--corpo); font-weight:600; font-size:.9rem;
  color:var(--texto-2); cursor:pointer; transition:background .25s ease, color .25s ease; }
.chaves button[aria-selected="true"]{ background:var(--azul); color:var(--texto-claro); }
/* align-items:start mata o vão morto embaixo do painel mais curto */
.paineis{ display:grid; align-items:start; margin-top:var(--e5); }
.painel{ grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity .28s ease, transform .28s var(--curva), visibility 0s .28s; }
.painel[data-ativo="sim"]{ opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .28s ease .04s, transform .28s var(--curva) .04s, visibility 0s; }

/* ---------- reciclável ---------- */
.verde-bloco{ background:var(--verde-luz); }
.selo-verde{ display:inline-flex; align-items:center; gap:.9rem; padding:.7rem 1.2rem;
  border:2px solid var(--verde); border-radius:999px; color:var(--verde); font-weight:700;
  font-size:.9rem; letter-spacing:.04em; }
.selo-verde svg{ width:26px; height:26px; flex:none; }

/* ---------- lojista ---------- */
.lojista{ background:var(--azul); color:var(--texto-claro); }
.lojista h2,.lojista h3{ color:var(--texto-claro); }
.lojista .lead{ color:rgba(245,243,236,.78); }
.lojista .lista li{ color:rgba(245,243,236,.9); }
.caixa-escura{ border:1px solid rgba(245,243,236,.2); border-radius:14px; padding:1.8rem;
  background:rgba(255,255,255,.05); }
.caixa-escura p{ color:rgba(245,243,236,.78); margin-top:.7rem; }

/* ============================================================
   PÁGINA DE PRODUTO
   ============================================================ */
.prod-topo{ padding-top:var(--e5); background:linear-gradient(180deg, var(--fundo), var(--fundo-2)); }
.prod-grade{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:960px){ .prod-grade{ grid-template-columns:.94fr 1.06fr; } }

/* ---- o palco da etiqueta ----
   Placa de espécime: passe-partout, plinto azul e uma linha de
   horizonte em 62%. A etiqueta atravessa a divisa — topo branco
   dela contra o claro, corpo azul contra o azul. Sem horizonte,
   PNG grande = flutuação. */
.palco-etiqueta{
  --sangria:1.02;
  --horizonte:62%;
  position:relative; isolation:isolate;
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2.5rem) clamp(2rem,6vw,3.5rem);
  border-radius:18px;
  background:linear-gradient(180deg,
    var(--fundo-2) 0%, var(--fundo-2) var(--horizonte),
    var(--azul) var(--horizonte), var(--azul) 100%);
}
/* Queda de luz. Fica ACIMA do fundo e ABAIXO da moldura (z-index:2)
   — sem z-index negativo.

   🔴 12/09/2026: aqui havia `mix-blend-mode:multiply` e ele CONGELOU
   o renderizador desta máquina — screenshot do Chrome estourando em
   30s enquanto o JS da página continuava respondendo. Mesmo sintoma
   exato do `filter`. A regra do projeto proibia `filter` e
   `backdrop-filter` pelo NOME; o problema é a família inteira de
   composição fora da árvore normal. Medido: a home (sem blend)
   fotografa na hora, a de produto (com blend) travava sempre.
   Resolvido com alfa normal, que dá a mesma leitura de luz dura. */
.palco-etiqueta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:
    radial-gradient(120% 80% at 22% 6%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 78% 104%, rgba(1,21,64,.30) 0%, rgba(1,21,64,0) 62%);
  pointer-events:none;
}
@media (max-width:560px){ .palco-etiqueta{ --horizonte:68%; } }

.moldura{
  position:relative; z-index:2;
  width:min(440px,88%); margin-inline:auto;
  aspect-ratio:4/5; padding:10px; background:#fff;
  border:1px solid var(--borda); border-radius:4px;   /* quase reto: esquadro */
  box-shadow:var(--contato), 0 18px 40px rgba(1,21,64,.18), 0 44px 90px rgba(1,21,64,.14);
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
}
.moldura::after{ content:""; position:absolute; inset:10px;
  border:1px solid rgba(1,21,64,.14); pointer-events:none; }
.moldura img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(var(--sangria)); }
.moldura:hover,.moldura:focus-within{
  transform:translateY(-4px);
  box-shadow:0 3px 4px rgba(1,21,64,.20), 0 26px 54px rgba(1,21,64,.22), 0 60px 110px rgba(1,21,64,.16);
}
.foto-nota{ position:relative; z-index:2; margin-top:var(--e4); text-align:center;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,243,236,.72); max-width:none; }

/* ---- o chevron: roubado direto da embalagem ---- */
.chevron{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.9rem 1.6rem .9rem 2.6rem; background:#fff; color:var(--azul);
  box-shadow:var(--elev-2);
  clip-path:polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
}
.chevron .valor{ font-family:var(--display); font-weight:800; font-size:var(--t-numeral);
  line-height:.88; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.chevron .unid{ font-family:var(--corpo); font-weight:700; font-size:var(--t-apoio);
  letter-spacing:.22em; text-transform:uppercase; margin-top:.35rem; }

/* A placa da contagem — o par do chevron na embalagem.
   Na embalagem ela é AMARELA, mas aqui não pode ser: o orçamento
   é de UM preenchimento amarelo por tela e ele já está no botão
   "Pedir no WhatsApp". Em azul, o par branco+azul mantém o mesmo
   arranjo de dois blocos que a pessoa reconhece do pacote, e o
   amarelo continua querendo dizer "clique aqui".
   ⚠️ font-size: o `+` do clamp PRECISA de espaço dos dois lados.
   Escrito como `1.2rem+2.6vw`, a declaração inteira é inválida e
   o navegador a descarta EM SILÊNCIO — foi assim que este número
   apareceu com 17px em vez de 51px, sem erro nenhum no console. */
.placa-un{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.9rem 1.5rem; border-radius:8px; background:var(--azul); color:var(--texto-claro);
  box-shadow:var(--contato); border-top:4px solid var(--amarelo);
}
.placa-un b{ font-family:var(--display); font-weight:800;
  font-size:clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.placa-un span{ font-size:.66rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-top:.4rem; opacity:.78; }
.par-numeros{ display:flex; align-items:stretch; gap:var(--e3); flex-wrap:wrap; margin-top:var(--e4); }

.selos{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin-top:var(--e4); padding:0; }
.selos li{ font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.35rem .7rem; border:1px solid rgba(1,21,64,.28); border-radius:999px; color:var(--azul); }
.selos .selo-reforco{ background:var(--azul); color:var(--texto-claro); border-color:var(--azul); }
.selos .selo-recicla{ color:var(--verde); border-color:rgba(1,79,1,.45); }

/* ---- ficha técnica: placa de especificação ----
   Fio de 1px, rótulo em maiúscula pequena letterspaced, valor em
   numeral tabular. Vignelli. Nada de ornamento. */
.prod-ficha{ background:var(--fundo-2); }
.ficha{ border:1px solid var(--borda); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:var(--elev-2); max-width:720px; }
.ficha-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3);
  padding:var(--e3) var(--e4); background:var(--azul); color:var(--texto-claro); }
.ficha-topo h3{ color:var(--texto-claro); }
.ficha-topo .lote{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,243,236,.62); }
.ficha dl{ display:grid; grid-template-columns:1fr auto; margin:0; }
.ficha dt,.ficha dd{ padding:.85rem var(--e4); border-top:1px solid var(--borda); margin:0; }
.ficha dl > dt:first-of-type,.ficha dl > dt:first-of-type + dd{ border-top:none; }
.ficha dt{ font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-2); align-self:center; }
.ficha dd{ font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--azul);
  text-align:right; letter-spacing:-.01em; }
.ficha dd .un{ font-family:var(--corpo); font-weight:600; font-size:.8em; color:var(--texto-2);
  margin-left:.25em; letter-spacing:0; }
/* o único traço amarelo da ficha, na linha que mais importa */
.ficha dd.destaque{ font-size:1.85rem; }
.ficha dt.destaque{ box-shadow:inset 3px 0 0 var(--amarelo); }
.ficha dt.destaque,.ficha dd.destaque{ background:linear-gradient(90deg, rgba(253,189,3,.10), transparent 70%); }

/* o EAN como plaqueta estampada. ⚠️ NÃO desenhar código de barras
   falso em CSS: uma barra que não escaneia ao lado de um EAN real
   é mentira visual, e a marca inteira é feita de precisão. */
.ean{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  flex-wrap:wrap; padding:var(--e3) var(--e4); border-top:1px solid var(--borda);
  background:var(--fundo-2); }
.ean-rot{ font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-2); }
.ean-num{ font-family:var(--mono); font-size:1.02rem; font-weight:600; color:var(--azul);
  letter-spacing:.13em; padding:.45rem .8rem; background:#fff; border:1px solid var(--borda);
  border-radius:4px; box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(1,21,64,.06); }
.ficha-nota{ font-size:.86rem; color:var(--texto-2); margin-top:var(--e3); max-width:60ch; }

/* ---- mesmo saco, outro pacote ---- */
.prod-irmao{ background:var(--fundo); }
.comparaBox{ max-width:660px; margin:var(--e5) auto 0; text-align:center; }
.compara{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--borda);
  border-radius:12px; overflow:hidden; box-shadow:var(--elev-2); }
.compara th,.compara td{ padding:.85rem .9rem; border-bottom:1px solid var(--borda); font-size:.95rem; }
.compara thead th{ background:var(--azul); color:var(--texto-claro); font-family:var(--display);
  font-weight:700; font-size:1.05rem; }
.compara thead th span{ display:block; font-family:var(--corpo); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(245,243,236,.65); margin-top:.25rem; }
.compara thead .col-aqui{ box-shadow:inset 0 -3px 0 var(--amarelo); }
.compara tbody th{ text-align:left; font-weight:600; color:var(--texto-2); font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; }
.compara td{ text-align:center; font-variant-numeric:tabular-nums; }
.compara .igual{ color:var(--texto-2); }
.compara .difere{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--azul); }
.compara tr:last-child th,.compara tr:last-child td{ border-bottom:none; }
.compara-nota{ margin:var(--e3) auto var(--e4); font-size:.92rem; color:var(--texto-2); max-width:52ch; }

/* ---- segurança ---- */
.avisos{ display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:var(--e5); }
@media (min-width:700px){ .avisos{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .avisos{ grid-template-columns:repeat(3,1fr); } }
.aviso{ padding:1.3rem; border:1px solid var(--borda); border-radius:10px; background:#fff;
  box-shadow:var(--elev-1); }
.aviso h3{ font-size:1.08rem; }
.aviso p{ margin-top:.5rem; font-size:.92rem; color:var(--texto-2); }
/* a advertência assumida é o bloco mais importante da página:
   marca que diz o que o produto NÃO faz compra crédito para
   tudo que diz que faz. */
.aviso.destaque{ grid-column:1/-1; border-color:rgba(1,21,64,.3); box-shadow:inset 4px 0 0 var(--amarelo), var(--elev-1); }
@media (min-width:700px){ .aviso.destaque{ grid-column:span 2; } }

.prod-fecha{ background:var(--azul); color:var(--texto-claro); }
.prod-fecha h2{ color:var(--texto-claro); }
.prod-fecha .lead{ color:rgba(245,243,236,.8); }

/* ============================================================
   GRADE DE PRODUTOS
   ============================================================
   Ordenada POR LITRAGEM, não por linha: a comparação que o
   cliente faz de verdade ("quantos vêm no pacote?") acontece na
   horizontal. Separar as linhas em dois blocos transformaria a
   segunda em "a pior" automaticamente.
   ============================================================ */
.grade-prod{ display:grid; gap:clamp(.75rem,2.5vw,1.4rem); margin-top:var(--e5);
  grid-template-columns:repeat(auto-fill, minmax(min(152px,100%),1fr)); }
@media (min-width:600px){ .grade-prod{ grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); } }
@media (min-width:980px){ .grade-prod{ grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); } }

.card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--borda); border-radius:10px; text-decoration:none; color:inherit;
  box-shadow:var(--elev-1);
  transition:transform .3s var(--curva), box-shadow .3s var(--curva); }
/* A PILHA: folhas sólidas atrás, sem blur. Mais unidades no
   pacote = mais folhas. Comunica "vem mais coisa" sem comunicar
   "é melhor" — que é o erro que os NOMES das linhas já cometem. */
.card[data-pilha="mais"]{
  box-shadow:
    4px 4px 0 -1px #fff, 4px 4px 0 0 var(--borda),
    8px 8px 0 -2px #fff, 8px 8px 0 -1px var(--borda),
    var(--elev-1);
  margin-right:8px; margin-bottom:8px;
}
.card:hover,.card:focus-visible{ transform:translateY(-5px); box-shadow:var(--elev-2); }
.card[data-pilha="mais"]:hover,.card[data-pilha="mais"]:focus-visible{
  box-shadow:
    4px 4px 0 -1px #fff, 4px 4px 0 0 var(--borda),
    8px 8px 0 -2px #fff, 8px 8px 0 -1px var(--borda),
    var(--elev-2);
}
.card-thumb{ position:relative; aspect-ratio:4/5; background:var(--fundo-2); overflow:hidden;
  border-bottom:1px solid var(--borda); border-radius:9px 9px 0 0; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  transition:transform .5s var(--curva); }
.card:hover .card-thumb img{ transform:scale(1.055); }
/* a placa de unidades: AZUL por padrão, AMARELA só sob o cursor.
   Assim existe, de fato, UM amarelo por tela em qualquer instante. */
.card-unid{ position:absolute; right:8px; bottom:8px; z-index:2;
  display:flex; flex-direction:column; align-items:center; line-height:1;
  padding:.5rem .7rem; border-radius:6px; background:var(--azul); color:var(--texto-claro);
  box-shadow:var(--contato);
  transition:background .28s ease, color .28s ease, transform .28s var(--curva); }
.card-unid b{ font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.card-unid span{ font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:.8; margin-top:.2rem; }
.card:hover .card-unid,.card:focus-visible .card-unid{ background:var(--amarelo); color:var(--azul);
  transform:translateY(-2px); }
.card-corpo{ padding:var(--e3); display:flex; flex-direction:column; gap:.35rem; flex:1; }
.card-litros{ font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1;
  color:var(--azul); letter-spacing:-.025em; }
.card-litros small{ font-family:var(--corpo); font-weight:600; font-size:.52em; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-2); margin-left:.3em; }
.card-spec{ font-size:.83rem; color:var(--texto-2); }
/* chip da linha: IDÊNTICO para as duas. Só a palavra muda.
   Codificar as linhas por cor criaria tier na hora. */
.chip{ align-self:flex-start; margin-top:auto; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); padding:.28rem .55rem;
  border:1px solid rgba(1,21,64,.28); border-radius:999px; }
.card-corpo::after{ content:""; height:2px; margin-top:var(--e2); background:var(--amarelo);
  transform:scaleX(.2); transform-origin:left center; transition:transform .45s var(--curva); }
.card:hover .card-corpo::after,.card:focus-visible .card-corpo::after{ transform:scaleX(1); }

/* cabeçalho de cada litragem no catálogo */
.litragem-titulo{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  margin-top:var(--e7); padding-bottom:var(--e2); border-bottom:1px solid var(--borda); }
.litragem-titulo h3{ font-size:1.5rem; }
.litragem-titulo span{ font-size:.86rem; color:var(--texto-2); }

/* tabela "mesmo saco" do catálogo */
.tab-linhas{ width:100%; border-collapse:collapse; margin-top:var(--e5); background:#fff;
  border:1px solid var(--borda); border-radius:12px; overflow:hidden; box-shadow:var(--elev-1); }
.tab-linhas th,.tab-linhas td{ padding:.9rem 1rem; border-bottom:1px solid var(--borda);
  font-size:.94rem; text-align:left; vertical-align:top; }
.tab-linhas thead th{ background:var(--azul); color:var(--texto-claro); font-family:var(--display);
  font-size:1.05rem; }
.tab-linhas thead th span{ display:block; font-family:var(--corpo); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(245,243,236,.65); margin-top:.25rem; }
.tab-linhas tbody th{ font-weight:600; color:var(--texto-2); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; width:30%; }
.tab-linhas tr:last-child th,.tab-linhas tr:last-child td{ border-bottom:none; }

/* ---------- passos de "como comprar" ---------- */
.passos{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:var(--e5); counter-reset:passo; }
@media (min-width:820px){ .passos{ grid-template-columns:repeat(3,1fr); } }
.passo{ position:relative; padding:1.6rem 1.4rem 1.4rem; border:1px solid var(--borda);
  border-radius:12px; background:#fff; box-shadow:var(--elev-1); }
.passo::before{ counter-increment:passo; content:counter(passo);
  font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1;
  color:var(--azul); opacity:.16; display:block; margin-bottom:.4rem; }
.passo h3{ font-size:1.15rem; }
.passo p{ margin-top:.5rem; font-size:.94rem; color:var(--texto-2); }

/* cartão de identificação da empresa — B2B copia e cola na Receita */
.cartao-empresa{ border:1px solid var(--borda); border-radius:14px; background:#fff;
  padding:clamp(1.4rem,4vw,2.2rem); box-shadow:var(--elev-2); }
.cartao-empresa dl{ display:grid; gap:.7rem 1.4rem; grid-template-columns:1fr; margin-top:var(--e3); }
@media (min-width:620px){ .cartao-empresa dl{ grid-template-columns:auto 1fr; } }
.cartao-empresa dt{ font-size:var(--t-micro); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--texto-2); }
.cartao-empresa dd{ font-weight:600; color:var(--azul); }
.cartao-empresa .selecionavel{ user-select:all; font-family:var(--mono); letter-spacing:.04em; }

/* ---------- FAQ ---------- */
.faq{ margin-top:var(--e6); border-top:1px solid var(--borda); }
.faq details{ border-bottom:1px solid var(--borda); }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0;
  position:relative; font-weight:600; font-size:1.03rem; color:var(--azul);
  transition:color .2s ease, padding-left .28s var(--curva); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--azul-apoio); padding-left:.55rem; }
.faq summary::after{ content:""; position:absolute; right:.4rem; top:1.5rem;
  width:11px; height:11px; border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:rotate(45deg); transition:transform .3s ease; }
.faq details[open] summary{ box-shadow:inset 3px 0 0 var(--amarelo); padding-left:.8rem; }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .resp{ padding:0 0 1.3rem; color:var(--texto-2); }
.faq .resp a{ color:var(--azul); }
.faq .resp .btn{ margin-top:var(--e3); min-height:44px; font-size:.85rem; padding:.6rem 1.1rem; }

/* ---------- contato ---------- */
.contato{ background:var(--fundo-2); }
.email-discreto{ margin-top:var(--e4); font-size:.92rem; color:var(--texto-2); }

/* ---------- rodapé ---------- */
.rodape{ background:var(--azul); color:rgba(245,243,236,.82); padding:var(--e7) 0 var(--e5); }
.rodape .wrap{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:780px){ .rodape .wrap{ grid-template-columns:1.5fr 1fr 1fr; } }
.rodape a{ color:rgba(245,243,236,.82); text-decoration:none; }
.rodape a:hover{ color:var(--amarelo); }
.rodape h4{ font-family:var(--corpo); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amarelo); margin-bottom:.9rem; }
.rodape .marca-rod{ background:#fff; border-radius:10px; padding:.7rem .9rem; display:inline-block; }
.rodape .marca-rod img{ height:40px; width:auto; }
.rod-sobre{ margin-top:1.2rem; font-size:.94rem; color:rgba(245,243,236,.72); max-width:40ch; }
.rod-cnpj{ margin-top:1rem; font-size:.82rem; line-height:1.7; color:rgba(245,243,236,.58);
  user-select:all; max-width:44ch; }
.rod-links{ display:flex; flex-direction:column; gap:.55rem; font-size:.94rem; }
/* os links do rodapé usam a assinatura que já existe no site */
.rod-links a{ position:relative; align-self:flex-start; padding-bottom:2px; }
.rod-links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--amarelo); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--curva); }
.rod-links a:hover::after{ transform:scaleX(1); }
.fim{ border-top:1px solid rgba(245,243,236,.16); margin-top:var(--e5); padding-top:1.4rem;
  font-size:.82rem; color:rgba(245,243,236,.55); grid-column:1/-1; }
.fim-nota{ display:block; margin-top:.4rem; }
.fim-nota a{ color:rgba(245,243,236,.75); text-decoration:underline; }

/* ============================================================
   BOTÃO FLUTUANTE DO WHATSAPP — em TODAS as páginas
   ============================================================
   O reconhecimento do WhatsApp vem do GLIFO (balão + fone), não
   do círculo verde. Por isso o botão é AZUL da marca: o verde
   continua reservado à reciclagem e o site não fica igual aos
   outros quatro milhões.
   O amarelo dele é um filete de 4px na borda — menos de 1% da
   área, então não gasta o "um amarelo por tela" do CTA.
   ============================================================ */
.zap-flutua{
  position:fixed; z-index:80;
  right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:56px; padding:0 1.15rem 0 1.05rem;
  border-radius:10px; border:none; text-decoration:none;
  background:var(--azul); color:var(--texto-claro);
  font-family:var(--corpo); font-weight:700; font-size:.9rem;
  box-shadow:0 3px 5px rgba(1,21,64,.20), 0 14px 34px rgba(1,21,64,.26);
  overflow:hidden; isolation:isolate;
  transition:transform .28s var(--curva), box-shadow .28s var(--curva);
}
/* o filete amarelo = a linha de tensão, na vertical */
.zap-flutua::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--amarelo); transform-origin:center; transform:scaleY(.42);
  transition:transform .5s var(--curva);
}
.zap-flutua:hover::before,.zap-flutua:focus-visible::before{ transform:scaleY(1); }
.zap-flutua:hover,.zap-flutua:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 4px 6px rgba(1,21,64,.22), 0 20px 46px rgba(1,21,64,.30);
}
.zap-flutua-ico{ display:flex; }
/* o micro-movimento: a tensão ESTICA uma vez a cada 9s.
   Não pula, não pisca, não implora. E só começa depois que a
   pessoa rolou — um botão fixo que nasce junto com o hero
   compete com o CTA principal. */
@media (prefers-reduced-motion:no-preference){
  .zap-flutua[data-rolou="sim"]::before{ animation:tensiona 9s ease-in-out infinite 3s; }
}
@keyframes tensiona{
  0%,82%,100%{ transform:scaleY(.42); }
  88%{ transform:scaleY(1); }
  94%{ transform:scaleY(.42); }
}

/* ---------- barra fixa no celular ----------
   No celular o botão NÃO flutua sobre a barra: a barra assume.
   Os dois brigando pelo mesmo canto da tela é erro clássico. */
.barra-mob{ position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; gap:.6rem; padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(250,248,243,.97); border-top:1px solid var(--borda);
  box-shadow:0 -4px 20px rgba(1,21,64,.08); }
.barra-mob .btn{ flex:1; min-height:48px; font-size:.85rem; }
@media (min-width:900px){ .barra-mob{ display:none; } }
@media (max-width:899px){
  body{ padding-bottom:76px; }
  .zap-flutua{ display:none; }
}

/* ============================================================
   REVELAÇÃO
   ============================================================
   Stagger por --i em vez das antigas .d1..d4: não tem limite de
   4 e o teto de 5 impede que o 9º card de uma grade entre com
   630ms de atraso — que é quando stagger vira lentidão.
   ============================================================ */
.rev{ opacity:0; transform:translateY(14px);
  transition:opacity .62s var(--curva), transform .62s var(--curva);
  transition-delay:calc(var(--i, 0) * 70ms); }
.rev.on{ opacity:1; transform:none; }
.rev.esq{ transform:translate3d(-18px,0,0); }
.rev.dir{ transform:translate3d(18px,0,0); }
.rev.zoom{ transform:scale(.985); }
/* compatibilidade com o markup antigo */
.rev.d1{ --i:1 } .rev.d2{ --i:2 } .rev.d3{ --i:3 } .rev.d4{ --i:4 }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rev{ opacity:1; transform:none; transition:none; }
  .saco,.cai,.gota,.poca,.zap-flutua::before{ animation:none !important; }
  /* Parado, a cena não fica VAZIA nem congelada no meio: vira uma
     FOTOGRAFIA composta. Um objeto — o mais reconhecível — metade
     fora e metade já engolido pela boca. A oclusão por ordem de
     pintura funciona parada exatamente igual, então o meio-objeto
     lê como desenho intencional, não como bug de render.
     Os 130% saem da conta: para o centro do objeto cair sobre a
     linha da boca ele precisa andar 141% da própria altura no
     desktop e 118% no celular; 130% fica no meio e tolera ±20%
     sem ninguém notar. */
  .saco{ transform:none; }
  .cai{ opacity:0; }
  .cai-1{ opacity:1; transform:translate3d(var(--dx),130%,0) rotate(var(--g1)); }
  .poca{ opacity:1; transform:scaleX(1); }
  /* a gota parada no flanco, sem o contexto da queda, leria como
     mancha no saco — que é o oposto do argumento. Fora. */
  .gota{ opacity:0; }
  .hero h1 em::after{ transform:scaleX(1); transition:none; }
  .btn,.atr,.tensao::after,.topo,.card,.card-thumb img,.card-unid,.moldura{ transition:none; }
  .picote::after{ transition:none; transform:rotate(4deg); }
}

@media print{
  .topo,.barra-mob,.palco,.acoes,.btn,.zap-flutua,.picote{ display:none !important; }
  *{ background:#fff !important; color:#000 !important; box-shadow:none !important; }
  .rev{ opacity:1 !important; transform:none !important; }
  .ficha,.compara{ border:1px solid #000 !important; }
}