/* ==========================================================================
   Temperale A Granel — Lagoa da Prata/MG
   Direção de arte em ../../spec-visual.md. Nada aqui é decidido na hora:
   toda cor tem papel, todo espaço sai de token, todo salto é proposital.
   Sem dependência externa, sem fonte de terceiro, CSP-safe.
   ========================================================================== */

:root{
  /* ---- ESCURO: o hero e os blocos de respiro ---- */
  --carvao:#0A0607;
  --vinho:#4E0F14;
  --vinho-2:#6B1219;
  --vinho-3:#3A0A0E;

  /* ---- MARCA: vermelho é acento e CTA, nunca cobre foto ----
     O vivo só em peça grande (wordmark, borda, ícone): com texto
     pequeno ele dá 4,06:1 e reprova em AA. O escuro dá 5,37:1. */
  --verm:#E03127;
  --verm-2:#C1261D;

  /* ---- DOURADO: só sobre escuro, igual ao logo ---- */
  --ouro:#F2C46A;
  --ouro-2:#F7D9A0;

  /* ---- CLARO ---- */
  --off:#FAF7F2;
  --off-2:#F2EBE1;
  --branco:#FFFFFF;

  /* ---- TINTA ---- */
  --tinta:#241C1A;
  --tinta-2:#4A403B;
  --tinta-3:#6E625C;
  --linha:#E7DDCE;

  --fonte:system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ---- TIPOGRAFIA: razão 1,333 (perfect fourth) ---- */
  --t-xs:.75rem;    --t-sm:.875rem;   --t-base:1rem;
  --t-md:1.125rem;  --t-lg:1.333rem;  --t-xl:1.777rem;
  --t-2xl:2.369rem; --t-3xl:3.157rem; --t-4xl:4.209rem;

  /* ---- ESPAÇO: base 4px. Nenhum número solto no CSS ---- */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;
  --e-5:1.5rem; --e-6:2rem;   --e-7:2.5rem; --e-8:3rem;
  --e-9:4rem;   --e-10:5rem;  --e-11:6rem;  --e-12:8rem;

  /* ---- RAIO: por hierarquia, nunca tudo igual ---- */
  --r-sm:6px; --r-md:14px; --r-lg:26px; --r-full:999px;

  --wrap:1220px;
  --topo-h:76px;
}

/* ============================ BASE ============================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* header é fixed: sem isto toda âncora para escondida atrás dele */
  scroll-padding-top:calc(var(--topo-h) + var(--e-4));
}
body{
  margin:0;
  font-family:var(--fonte);
  font-size:clamp(16px,.95rem + .2vw,17.5px);
  line-height:1.62;
  color:var(--tinta);
  background:var(--off);
  overflow-x:hidden;
}
img,svg,iframe{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}

/* minúsculo, pesado e apertado — a leitura do wordmark */
h1,h2,h3{
  margin:0;font-weight:800;line-height:1.06;
  letter-spacing:-.035em;text-transform:lowercase;
  /* Distribui as linhas em vez de encher a primeira e largar uma palavra
     sozinha embaixo. Sem isso, "escolha e peça pelo WhatsApp" deixava
     "WhatsApp" órfã em todas as larguras, e "moído na hora" largava "hora".
     Navegador antigo ignora e quebra como antes — degrada sem quebrar. */
  text-wrap:balance;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,36px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pular{position:absolute;left:-9999px;top:0;background:var(--vinho);color:#fff;padding:var(--e-3) var(--e-5);z-index:300}
.pular:focus{left:0}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:var(--r-sm)}
.sec-clara :focus-visible,.faq :focus-visible{outline-color:var(--verm-2)}

/* dado ainda não confirmado com o cliente */
.edit{
  background:linear-gradient(transparent 60%,rgba(242,196,106,.5) 60%);
  border-bottom:1px dashed rgba(224,49,39,.6);
}
.sec-escura .edit{background:linear-gradient(transparent 60%,rgba(242,196,106,.3) 60%);border-bottom-color:rgba(242,196,106,.7)}

/* ============================ MOVIMENTO ============================
   Cascata em CSS puro: não depende do JS carregar. */
.sobe{opacity:0;transform:translateY(22px);animation:sobe .75s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes sobe{to{opacity:1;transform:none}}

/* delays em classe, não em style inline: a CSP usa style-src 'self',
   e atributo style no HTML exigiria 'unsafe-inline' */
.d1{--d:.12s} .d2{--d:.26s} .d3{--d:.48s} .d4{--d:.62s} .d5{--d:.76s}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.vis{opacity:1;transform:none}

/* ============================ WORDMARK ============================
   É o logo de verdade em PNG com fundo transparente, extraído do arquivo
   que a loja mandou (fotos-originais/logo.png). Não é texto e não é SVG
   redesenhado: a marca é um broto em laços contínuos e a tipografia é uma
   sans arredondada específica — tentar reproduzir foi o que gerou o galho
   errado que ficou no ar até 06/08.

   Como o PNG já é amarelo, não há mais cor pra trocar entre o estado
   transparente e o sólido do header. Uma imagem, os dois estados. */
.wm{display:inline-flex;align-items:center;text-decoration:none}
.wm img{display:block;width:auto;height:38px}
/* o logo do header é link pro topo, então é alvo de toque: 44px de altura */
.topo .wm{min-height:44px}
.wm-rodape img{height:34px}

/* ============================ TOPO ============================
   Nasce transparente sobre o hero e vira sólido ao rolar. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.topo-in{display:flex;align-items:center;gap:var(--e-4);min-height:var(--topo-h)}
.topo .wm{margin-right:auto}

/* estado transparente: os links em claro sobre a foto.
   O logo não entra aqui — é PNG e já vem amarelo nos dois estados. */
.nav a{color:var(--off)}

/* Estado sólido: vermelho da marca com wordmark dourado — é o logo deles,
   literalmente. Usa o vermelho escuro e não o vivo porque o dourado sobre o
   vivo dá 2,67:1 e reprova; sobre o #C1261D dá 3,53:1 e passa em texto grande.
   Os links do nav vão em off-white (5,37:1) porque são texto pequeno. */
.topo.solido{
  background:var(--verm-2);
  border-bottom-color:rgba(58,10,14,.5);
  box-shadow:0 10px 34px -22px rgba(58,10,14,.9);
}
.topo.solido .nav a{color:var(--off)}
.topo.solido .nav a:hover{background:rgba(10,6,7,.22);color:#fff}
.topo.solido .nav .nav-cta{background:var(--ouro);color:var(--vinho-3)}
.topo.solido .nav .nav-cta:hover{background:var(--ouro-2);color:var(--vinho-3)}
.topo.solido .menu-btn{border-color:rgba(250,247,242,.45);background:rgba(10,6,7,.22)}
.topo.solido .menu-btn span{background:var(--off)}

.nav{display:flex;align-items:center;gap:var(--e-1)}
.nav a{
  text-decoration:none;padding:var(--e-3) var(--e-4);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;
  transition:background .2s,color .2s;
}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav .nav-cta{
  background:var(--verm-2);color:#fff;margin-left:var(--e-3);
  padding:var(--e-3) var(--e-5);font-weight:700;border-radius:var(--r-full);
}
.nav .nav-cta:hover,.topo.solido .nav .nav-cta:hover{background:var(--verm);color:#fff}
.topo.solido .nav .nav-cta{color:#fff}

.menu-btn{
  display:none;width:46px;height:46px;
  border:1.5px solid rgba(250,247,242,.4);
  background:rgba(10,6,7,.3);border-radius:12px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  transition:border-color .3s,background .3s;
}
.menu-btn span{display:block;width:19px;height:2px;background:var(--off);border-radius:2px;transition:transform .22s,opacity .18s,background .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ BOTÕES ============================
   1 primário + 1 link secundário. Nunca dois sólidos lado a lado. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:54px;padding:var(--e-4) var(--e-6);
  background:var(--verm-2);color:#fff;text-decoration:none;
  border-radius:var(--r-full);font-weight:700;font-size:var(--t-base);letter-spacing:-.01em;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.btn:hover{background:var(--verm);transform:translateY(-2px)}
.btn svg{flex:none;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}

.btn-ouro{
  background:var(--ouro);color:var(--vinho-3);
  box-shadow:0 14px 40px -18px rgba(242,196,106,.9);
}
.btn-ouro:hover{background:var(--ouro-2);color:var(--vinho-3)}

/* o secundário é link, não botão — item 6 do checklist */
.link-sec{
  display:inline-flex;align-items:center;gap:var(--e-2);
  min-height:54px;padding-inline:var(--e-2);
  color:var(--off);text-decoration:none;font-weight:600;font-size:var(--t-base);
  border-bottom:1.5px solid rgba(250,247,242,.35);
  transition:border-color .25s,color .25s;
}
.link-sec:hover{border-bottom-color:var(--ouro);color:var(--ouro)}
.link-sec svg{transition:transform .25s}
.link-sec:hover svg{transform:translateX(3px)}

/* ============================ HERO ============================ */
.hero{
  position:relative;overflow:hidden;
  min-height:min(94vh,900px);
  display:flex;flex-direction:column;
  background:var(--carvao);
}

.hero-foto{
  position:absolute;inset:0;display:block;
}
.hero-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;
  transform-origin:62% 42%;
  animation:kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Escurecimento NEUTRO caminhando pro vinho — item 1 do checklist.
   O preto segura o contraste; o vinho conversa com os ocres dos potes
   em vez de cobri-los, que é o que o vermelho chapado fazia. */
.hero-veu{
  position:absolute;inset:0;
  background:
    linear-gradient(102deg,
      rgba(8,5,6,.94) 0%,
      rgba(26,8,11,.9) 26%,
      rgba(78,15,20,.7) 54%,
      rgba(107,18,25,.4) 78%,
      rgba(122,22,28,.22) 100%),
    radial-gradient(118% 92% at 10% 44%, rgba(0,0,0,.5), transparent 64%),
    linear-gradient(to top, rgba(10,6,7,.92) 0%, rgba(10,6,7,.35) 22%, transparent 42%);
}

/* grão: SVG em data URI, que a CSP já libera via img-src data: */
.hero-grao{
  position:absolute;inset:0;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-in{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--topo-h) + var(--e-9)) var(--e-9);
}

/* selo com o broto do logo — o detalhe que só esse cliente tem */
.hero-selo{
  display:inline-flex;align-items:center;gap:var(--e-3);
  align-self:flex-start;
  padding:var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  border:1px solid rgba(242,196,106,.32);
  border-radius:var(--r-full);
  background:rgba(10,6,7,.34);
  margin-bottom:var(--e-6);
}
.hero-selo img{flex:none;display:block;width:auto;height:22px}
.hero-selo span{
  font-size:var(--t-xs);letter-spacing:.19em;text-transform:uppercase;
  font-weight:700;color:var(--ouro-2);
}

/* o salto de 2,4× é o que separa hero profissional de template */
.hero h1{
  font-size:clamp(2.5rem,1.4rem + 5vw,var(--t-4xl));
  color:var(--off);margin-bottom:var(--e-5);max-width:17ch;
}
.h1-fraca{
  display:block;
  font-size:.4em;font-weight:500;letter-spacing:-.015em;
  color:rgba(250,247,242,.76);
  margin-bottom:var(--e-2);
}
.h1-forte{display:block}
.h1-forte em{font-style:normal;color:var(--ouro)}

.hero-sub{
  font-size:clamp(1.05rem,.98rem + .42vw,var(--t-md));
  color:rgba(250,247,242,.85);max-width:44ch;margin-bottom:var(--e-7);
}
.hero-sub strong{color:var(--ouro-2);font-weight:700}
.hero-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-6)}

/* A barra de prova saiu do hero (05/08): estava poluindo o topo.
   O 4,8 do Google migrou pra seção "A loja", onde é contexto e não ruído. */

.hero-scroll{
  position:absolute;left:50%;bottom:var(--e-6);
  transform:translateX(-50%);z-index:3;
  /* a seta desenhada tem 26px; a área clicável precisa de 44 */
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:rgba(250,247,242,.6);text-decoration:none;
  animation:pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{transform:translate(-50%,0);opacity:.55}50%{transform:translate(-50%,7px);opacity:1}}

/* ============================ SEÇÕES ============================ */
.sec{padding-block:clamp(3.5rem,7vw,var(--e-11))}
.sec-clara{background:var(--off)}
.sec-clara-2{background:var(--off-2);border-block:1px solid var(--linha)}
.sec-escura{background:var(--vinho-2);color:var(--off)}

.sec-cab{max-width:56ch;margin-bottom:var(--e-7)}
.olho{
  font-size:var(--t-xs);letter-spacing:.19em;text-transform:uppercase;
  font-weight:700;color:var(--verm-2);margin-bottom:var(--e-3);
}
.sec-escura .olho{color:var(--ouro)}
.sec-cab h2{font-size:clamp(1.85rem,1.3rem + 2.3vw,var(--t-3xl));color:var(--vinho);margin-bottom:var(--e-3)}
.sec-escura .sec-cab h2{color:#fff}
.sec-sub{color:var(--tinta-3);font-size:var(--t-md);max-width:52ch}
.sec-escura .sec-sub{color:rgba(250,247,242,.8)}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-7)}
.chip{
  border:1.5px solid var(--linha);background:var(--branco);color:var(--tinta-3);
  padding:var(--e-3) var(--e-5);border-radius:var(--r-full);cursor:pointer;
  font-size:var(--t-sm);font-weight:500;min-height:44px;
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{border-color:var(--verm);color:var(--verm-2)}
.chip.is-on{background:var(--vinho);border-color:var(--vinho);color:#fff;font-weight:700}

/* ---------- produtos ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--e-4)}
.card{
  display:flex;flex-direction:column;
  background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--r-md);overflow:hidden;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.card:hover{
  transform:translateY(-5px);border-color:var(--verm);
  box-shadow:0 22px 44px -28px rgba(78,15,20,.6);
}
.card[hidden]{display:none}
.card-destaque{border-color:var(--ouro);border-width:2px}

/* ---------- o topo do card: foto ou selo ----------          (14/08/2026)
   Os dois blocos usam a MESMA proporção. Não é capricho: na grade, card com
   foto e card ainda sem foto ficam na mesma altura e o título de todos cai na
   mesma linha. Com alturas diferentes a fileira vira escada.

   Sem moldura própria e sem círculo: a foto sangra na largura toda e herda o
   canto arredondado do próprio card, que já tem `overflow:hidden`. Moldura
   dentro de moldura é o que faz card de produto parecer template.

   ⚠️ Era 8:7 até 24/08/2026. Virou 1:1 — o porquê está em `.card-foto`. */
.card-selo,.card-foto{
  flex:none;width:100%;aspect-ratio:1/1;
  border-bottom:1px solid var(--linha);
}

.card-selo{
  background-color:var(--off-2);
  background-repeat:no-repeat;background-position:center;
  background-size:74px 74px;
}
.card-destaque .card-selo{background-color:#FBF0DC}

/* A FOTO DE PRODUTO — 1:1 desde 24/08/2026.       (era 8:7, de 14/08 a 24/08)
   `object-fit:cover` aqui NUNCA corta nada: o arquivo já é 1:1, exatamente a
   proporção do slot. O cover está só como rede de segurança pra o dia em que
   entrar uma foto fora do padrão.

   POR QUE O 8:7 MORREU. Ele foi calibrado em 14/08 contra fotos GERADAS, todas
   de bancada, onde o topo do quadro era parede vazia: aparar 12,5% ali não
   custava nada e fazia a linha da bancada alinhar de card em card.

   O lote real de 22/08 não é assim. Aplicar o mesmo corte quebrou 5 das 15,
   medido foto a foto:
     · Café, Castanha-de-caju, Castanha-do-pará, Semente de abóbora — são
       dispensadores na parede vermelha. O produto ocupa o quadro INTEIRO na
       vertical: o corte de topo decepa a tampa e o tubo vira cano sem começo
     · Óleo de coco — 4:3 deitada. Aparar largura decepa os potes das pontas
   E a razão que sustentava o 8:7 já não existia: das 15, três são na parede
   vermelha (sem bancada nenhuma) e duas são prateleira. A "prateleira única"
   que o alinhamento criava morreu com o lote.

   POR QUE 1:1. Doze das quinze fotos JÁ SÃO quadradas (1254x1254) e entram sem
   recorte nenhum, na resolução em que foram editadas. Só três precisam de
   aparo — Café (retrato), Kit e Óleo (deitadas) — e as três têm sobra de
   quadro. Recorte central nelas, conferido uma a uma. */
.card-foto{
  display:block;object-fit:cover;
  background:var(--off-2);
  /* ⚠️ `height:auto` NÃO é decorativo, é o que faz o `aspect-ratio` valer.
     O `<img>` carrega width="760" height="760" no HTML (e deve carregar, é o
     que evita salto de layout enquanto a foto não chegou). Esses atributos
     entram como dica de apresentação, e como a regra acima declara `width`
     mas não `height`, a altura caía nos 760px do atributo em vez de acompanhar
     a largura real do card.
     `aspect-ratio` só calcula uma dimensão quando a OUTRA é `auto`. */
  height:auto;
}

.card-selo[data-ico="granola"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 24h32c0 9-7 14-16 14S8 33 8 24Z'/%3E%3Ccircle cx='18' cy='17' r='3'/%3E%3Ccircle cx='27' cy='13' r='3'/%3E%3Ccircle cx='33' cy='19' r='3'/%3E%3C/svg%3E")}
.card-selo[data-ico="castanha"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24 8c8 0 13 7 13 15s-6 17-13 17-13-9-13-17S16 8 24 8Z'/%3E%3Cpath d='M24 14v22M18 21c3 2 9 2 12 0M18 30c3 2 9 2 12 0'/%3E%3C/svg%3E")}
.card-selo[data-ico="fruta"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='24' cy='28' r='13'/%3E%3Cpath d='M24 15v-5M24 10c0-4 4-6 8-6 0 4-3 6-8 6Z'/%3E%3C/svg%3E")}
.card-selo[data-ico="coco"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='19' cy='20' r='2.4'/%3E%3Ccircle cx='29' cy='20' r='2.4'/%3E%3Cpath d='M18 30c4 3 8 3 12 0'/%3E%3C/svg%3E")}
.card-selo[data-ico="grao"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='16' cy='18' rx='5' ry='8' transform='rotate(-20 16 18)'/%3E%3Cellipse cx='30' cy='16' rx='5' ry='8' transform='rotate(18 30 16)'/%3E%3Cellipse cx='23' cy='32' rx='5' ry='8' transform='rotate(-6 23 32)'/%3E%3C/svg%3E")}
.card-selo[data-ico="farinha"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14h14l4 26H13Z'/%3E%3Cpath d='M17 14c0-4 3-6 7-6s7 2 7 6'/%3E%3Cpath d='M19 24h10'/%3E%3C/svg%3E")}
.card-selo[data-ico="tempero"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='15' y='17' width='18' height='23' rx='3'/%3E%3Cpath d='M18 17v-4h12v4'/%3E%3Cpath d='M21 9h6'/%3E%3Cpath d='M20 26h8M20 32h8'/%3E%3C/svg%3E")}
.card-selo[data-ico="cha"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22h20v8a10 10 0 0 1-20 0Z'/%3E%3Cpath d='M32 24h3a4 4 0 0 1 0 8h-3'/%3E%3Cpath d='M18 15c0-3 2-4 2-6M25 15c0-3 2-4 2-6'/%3E%3C/svg%3E")}
.card-selo[data-ico="pote"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='16' width='20' height='24' rx='3'/%3E%3Cpath d='M17 16v-4h14v4'/%3E%3Cpath d='M20 27h8'/%3E%3C/svg%3E")}
.card-selo[data-ico="kit"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='19' width='11' height='21' rx='2'/%3E%3Crect x='22' y='13' width='11' height='27' rx='2'/%3E%3Crect x='35' y='24' width='5' height='16' rx='2'/%3E%3C/svg%3E")}
.card-selo[data-ico="cafe"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='24' cy='24' rx='11' ry='15' transform='rotate(-18 24 24)'/%3E%3Cpath d='M20 11c-3 8-2 18 3 25'/%3E%3C/svg%3E")}
.card-selo[data-ico="semente"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234E0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 12c5 0 8 5 8 11s-3 11-8 11-8-5-8-11 3-11 8-11Z' transform='rotate(-18 18 23)'/%3E%3Cpath d='M32 18c4 0 7 4 7 9s-3 9-7 9-7-4-7-9 3-9 7-9Z' transform='rotate(14 32 27)'/%3E%3C/svg%3E")}

/* link dentro da descrição do card (o café aponta pra própria seção) */
.card-txt a{color:var(--verm-2);font-weight:700;text-underline-offset:2px}

.card-txt{padding:var(--e-5) var(--e-5) var(--e-4);flex:1}
/* `balance` entrou em 24/08/2026, junto com as 2 colunas no celular: a calha do
   título estreitou e as palavras começaram a ficar sozinhas na última linha.

   ⚠️ O palpite aqui é `pretty` — é a propriedade que existe pra matar órfã. Ela
   NÃO serve neste caso: medido em 360px, `pretty` deixa as MESMAS 7 órfãs que
   `normal`, e `balance` derruba pra 2. O motivo é que estes títulos têm 3 ou 4
   palavras curtas; o problema não é a última linha ser curta demais (que é o
   que o `pretty` ataca), é a primeira encher demais.

   As 2 que sobram — "especiarias" e "suplementação" — são IRREDUTÍVEIS por CSS
   e não adianta insistir: em "temperos E especiarias" e "kits DE suplementação"
   a palavra do meio tem 1 e 2 letras, então qualquer quebra possível larga a
   longa sozinha. Ali a saída é encurtar o título, e isso é decisão de texto. */
.card-txt h3{font-size:var(--t-md);color:var(--vinho);margin-bottom:var(--e-2);text-wrap:balance}
.card-txt p{font-size:var(--t-sm);color:var(--tinta-3);margin-bottom:var(--e-3)}
.tag{
  display:inline-block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--vinho);background:var(--off-2);
  padding:var(--e-1) var(--e-3);border-radius:var(--r-sm);
}
.tag-forte{color:#7A4A05;background:#FBE9C6}

.card-cta{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:var(--e-3) var(--e-4);margin:0 var(--e-4) var(--e-4);
  border:1.6px solid var(--vinho);border-radius:var(--r-full);
  text-decoration:none;font-weight:700;font-size:var(--t-sm);color:var(--vinho);
  transition:background .2s,color .2s;
}
.card-cta:hover{background:var(--vinho);color:#fff}

.grade-vazio{margin-top:var(--e-6);color:var(--tinta-3);text-align:center}

.faixa-cta{
  margin-top:var(--e-8);padding:var(--e-7) clamp(var(--e-5),4vw,var(--e-8));
  background:var(--vinho);border-radius:var(--r-lg);color:var(--off);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-5);
}
.faixa-cta p{font-size:var(--t-md);font-weight:600;max-width:42ch;letter-spacing:-.015em}

/* ---------- como pedir ----------
   Fecha o trio. O creme mais fundo (--off-2) continua sendo o que distingue
   do sorvete; o que entrou foi o brilho dourado, que é a terceira variação
   da mesma lógica radial do café e do sorvete. Aqui os dois brilhos ficam
   em cantos opostos na diagonal, e não no eixo vertical — a seção é de
   largura cheia, não de duas colunas, e o desenho acompanha. */
.como{
  background:
    radial-gradient(78% 56% at 90% 6%, rgba(242,196,106,.2), transparent 62%),
    radial-gradient(72% 52% at 4% 98%, rgba(107,18,25,.05), transparent 64%),
    var(--off-2);
}
/* caminho, confirmação e conversa: clareza e facilidade, no marrom da tinta */
.como .sec-arte{color:var(--tinta-2)}
.arte-caminho{width:260px;top:11%;right:4%;opacity:.09}
/* na margem direita, abaixo do texto do passo 3: em 13% ele cruzava a
   última linha e ainda ficava cortado pela borda da seção */
.arte-confere{width:76px;bottom:7%;right:4%;opacity:.075;transform:rotate(-6deg)}
.arte-balao{width:92px;bottom:16%;left:3%;opacity:.07;transform:rotate(7deg)}

.passos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--e-6);position:relative;
}
.passos li{position:relative;padding-right:var(--e-4)}
/* linha ligando os passos — some no último e no empilhamento */
.passos li:not(:last-child)::after{
  content:"";position:absolute;top:26px;left:74px;right:var(--e-4);
  height:1.5px;background:repeating-linear-gradient(90deg,var(--linha) 0 7px,transparent 7px 14px);
}
.num{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--vinho);color:var(--ouro);
  font-size:var(--t-lg);font-weight:800;margin-bottom:var(--e-4);
  position:relative;z-index:1;
}
.passos h3{font-size:var(--t-md);color:var(--vinho);margin-bottom:var(--e-2)}
.passos p{color:var(--tinta-3);font-size:var(--t-sm)}

/* ==========================================================================
   O TRIO — café · sorvete · como pedir                          (14/08/2026)
   --------------------------------------------------------------------------
   As três desciam como blocos estranhos entre si: o café tinha atmosfera
   (gradiente + brilho + grão) e os outros dois eram preenchimento chapado,
   #FAF7F2 e #F2EBE1. A passagem do café pro sorvete era um corte reto de
   quase-preto pra quase-branco.

   O que faz as três lerem como PARENTES, e não como uma seção só:
     1. a MESMA textura de grão, com a opacidade calibrada por fundo
     2. o MESMO traço de desenho: hairline de 1,5px que NÃO engorda quando o
        motivo cresce (vector-effect), extremidade redonda, sem preenchimento
     3. a MESMA lógica de brilho radial — um quente e um frio em cantos opostos
     4. uma PONTE de cor: o topo do sorvete começa rosado e desce pro creme,
        e o pé do café tem um brilho dourado, como luz vazando pra próxima

   O que faz cada uma continuar DISTINTA: fundo (escuro / creme / creme-2),
   matiz do desenho (branco / vermelho / marrom) e motivo (grão e fumaça /
   casquinha e frescor / caminho e clareza).
   ========================================================================== */

.cafe,.sorvete,.como{position:relative}
/* ⚠️ O `.cafe` fica FORA do `overflow:hidden` de propósito, e isso não é
   descuido: o arco do pé dele precisa sangrar 2px pra baixo, atravessando a
   fronteira com o sorvete. Com o clipe aqui, a sangria morria e voltava o fio
   escuro no celular — foi exatamente o defeito de 17/08. O que o clipe
   protegia já está protegido: a camada de arte (`.sec-arte`, logo abaixo) se
   recorta sozinha, e é o único filho do café que estoura a caixa. */
.sorvete,.como{overflow:hidden}
/* o conteúdo sobe acima da camada de arte, sempre */
.cafe-in,.sorvete-in,.como > .wrap{position:relative;z-index:1}

/* --- 1. grão de papel, o mesmo SVG nas três --- */
.cafe::before,.sorvete::before,.como::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* sobre escuro o grão precisa de overlay pra aparecer; sobre creme ele
   precisa de multiply e de MUITO menos opacidade, senão vira sujeira */
.cafe::before{opacity:.045;mix-blend-mode:overlay}
.sorvete::before{opacity:.03;mix-blend-mode:multiply}
.como::before{opacity:.035;mix-blend-mode:multiply}

/* --- 2. a camada de desenho: mesma regra de traço nas três --- */
.sec-arte{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sec-arte svg{
  position:absolute;display:block;
  fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* O traço fica com a MESMA espessura ótica em todo motivo, do grande ao
   pequeno. É isso que faz os desenhos das três seções lerem como a mesma
   mão. Sem isto, o motivo grande vira traço grosso e o pequeno some. */
.sec-arte svg *{vector-effect:non-scaling-stroke}

/* ---------- café moído na hora ----------
   Seção de experiência, não de catálogo. O argumento é sensorial: o cliente
   vê o grão virar pó na frente dele. É o que um marketplace não copia. */
.cafe{
  /* altura do arco. Encolhe no celular de propósito: com
     preserveAspectRatio="none" a curva mantém a altura em px e só o eixo X
     comprime, então altura fixa numa tela de 390 vira cúpula íngreme em vez
     de arco largo. O que precisa ficar constante é a RAZÃO flecha/largura,
     e é ela que o clamp segura em ~4% no desktop e ~7% no celular. */
  --onda-h:clamp(40px,6vw,106px);
  /* o arco ocupa o pé da seção, então o conteúdo precisa dessa folga a mais
     embaixo, senão o CTA "Escolher meu café" encosta na curva */
  padding-bottom:calc(clamp(3.5rem,7vw,var(--e-11)) + var(--onda-h));
  background:
    radial-gradient(88% 120% at 84% 16%, rgba(107,18,25,.6), transparent 62%),
    /* luz vazando no pé, na direção do sorvete: é metade da ponte entre as
       duas seções, a outra metade é o topo rosado do sorvete */
    radial-gradient(130% 42% at 50% 106%, rgba(242,196,106,.12), transparent 68%),
    linear-gradient(158deg,#170D0A 0%,var(--carvao) 52%,#1E0F0C 100%);
  color:var(--off);
}

/* O ARCO — passagem café → sorvete.

   ⚠️ DUAS defesas contra o fio escuro, e as duas precisam existir. O fio já
   voltou uma vez (17/08, visto no iPhone de verdade, não no inspecionar)
   porque a primeira estava escrita mas MORTA: o `bottom:-1px` de antes era
   cortado pelo `overflow:hidden` que o café herdava da regra do trio. Sangria
   que o pai recorta não é sangria.

   1. `bottom:-2px` — o arco ATRAVESSA a fronteira em vez de encostar nela.
      Encostado, ele termina cravado no limite da seção, e aí basta o Safari
      arredondar meio pixel pra o #1E0F0C do pé do café virar fio de largura
      inteira. Atravessando, o que sobra do lado de baixo é creme sobre creme:
      invisível. O `z-index:2` é o que permite isso — o café não abre contexto
      de empilhamento (`position:relative` com `z-index:auto`), então o arco
      sobe pra camada 2 da raiz e pinta POR CIMA do sorvete, que vem depois.
      Mexeu no z-index de um dos dois? A sangria some por baixo do sorvete.

   2. a faixa de creme chapado, aqui embaixo — a defesa contra a rasterização
      do SVG, que a sangria sozinha não cobre. */
.onda{
  /* a cor do creme vive AQUI, num lugar só. Ela é usada pelo arco (fill do
     path) e pela faixa de baixo, e as duas TÊM que ser o mesmo valor: 2
     pontos de diferença entre elas já lê como rebordo seguindo a curva.
     De onde sai o número: ver o aviso antes de `.onda path`. */
  --onda-cor:#F2DFDA;
  position:absolute;left:0;right:0;bottom:-2px;
  height:var(--onda-h);z-index:2;pointer-events:none;line-height:0;
  /* 4px do MESMO creme do arco, em CSS chapado, ATRÁS do svg (fundo de
     elemento pinta abaixo dos filhos). Se o WebKit devolver a última linha do
     SVG translúcida — e é o suspeito de sempre com `preserveAspectRatio` e
     escala não inteira —, o que aparece por baixo é este creme, não o café.
     Retângulo de CSS não tem borda antialiasada pra vazar.
     Custo: nos 2px acima da fronteira, nos cantos extremos onde a curva já
     está na base, o creme come ~2px de largura do escuro. Medido, e some. */
  background:linear-gradient(var(--onda-cor),var(--onda-cor)) left bottom/100% 4px no-repeat;
}
/* ⚠️ NÃO botar filtro nem brilho aqui. As duas coisas já estiveram neste
   bloco, pra "suavizar" a crista, e as duas viraram defeito visível — o
   cliente apontou as duas no mesmo print:

   1. `filter:blur(.8px)` no svg. Filtro de CSS rasteriza o elemento numa
      camada própria e amostra o lado de FORA da caixa como transparente.
      A base do arco ficava semitransparente e o marrom do café aparecia por
      baixo: faixa de #e4d2cc contra #f2dfda — 13 pontos, largura inteira,
      colada na fronteira. Linha de verdade, medida, pior que a original.
   2. `::before` com radial dourado, pra baixar o contraste no encontro.
      Clareava o pé do café de #2e1c13 pra #47311e: 21 pontos numa mancha
      larga, que lê como um BLOCO a mais entre as seções — exatamente o que
      o arco existe pra evitar.

   O que vale aqui é aresta limpa: a curva encosta o creme no escuro e o
   antialias do navegador resolve sozinho. Medido em 1280 e 390: pior caso de
   1 pixel de meio-tom por coluna, e em boa parte das colunas nenhum. */
.onda svg{display:block;width:100%;height:100%}

/* ⚠️ #F2DFDA é a cor MEDIDA na primeira linha do sorvete renderizado, não a
   que está escrita no `background` dele. As duas não batem: o `.sorvete`
   declara #F4E1DB no primeiro stop e sai #F2DFDA na tela, porque o grão
   (`::before`, multiply .03) escurece 2 pontos por cima.

   A primeira versão usou #F7EDE7 — o valor "certo" no papel — e deu um
   REBORDO CLARO de 12 pontos seguindo a curva inteira, visível no desktop e
   no celular. Faixa de 55px de altura: diferença de 5% em G e B não passa
   despercebida.

   Mexeu no fundo do sorvete, no grão ou na opacidade dele? Mede de novo a
   primeira linha e traz o número pra `--onda-cor`, lá em cima — é de lá que
   este fill e a faixa de baixo saem. Não estima no olho. */
.onda path{fill:var(--onda-cor)}
/* grãos e fumaça, em branco quase apagado */
.cafe .sec-arte{color:#fff}
/* encostado na margem esquerda: em 4% ele entrava por baixo do "seu
   cafezinho", e desenho atrás de título vira ruído, não textura */
.arte-grao-a{width:112px;top:9%;left:-1%;opacity:.09;transform:rotate(-8deg)}
.arte-grao-b{width:92px;bottom:12%;left:15%;opacity:.07;transform:rotate(14deg)}
.arte-grao-c{width:74px;top:64%;left:1%;opacity:.055;transform:rotate(-24deg)}
.arte-fumaca{width:180px;top:4%;right:6%;opacity:.11}
.cafe-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(var(--e-7),5vw,var(--e-11));align-items:center;
}
.cafe .olho{color:var(--ouro)}
.cafe h2{font-size:clamp(1.95rem,1.3rem + 2.6vw,var(--t-3xl));color:#fff;margin-bottom:var(--e-4)}
.cafe h2 em{font-style:normal;color:var(--ouro)}
.cafe-lead{color:rgba(250,247,242,.86);max-width:46ch;margin-bottom:var(--e-6);font-size:var(--t-md)}

.cafe-passos{display:flex;flex-direction:column;gap:var(--e-4);margin-bottom:var(--e-7)}
.cafe-passo{display:flex;align-items:flex-start;gap:var(--e-4)}
.cafe-passo-ico{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(242,196,106,.42);
  background:rgba(242,196,106,.08);color:var(--ouro);
}
.cafe-passo b{display:block;color:#fff;font-size:var(--t-base);margin-bottom:2px;font-weight:700}
.cafe-passo span{color:rgba(250,247,242,.72);font-size:var(--t-sm)}

/* a linha de gramatura: o argumento do granel, visualizado */
.cafe-gramas{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);
  padding:var(--e-4) var(--e-5);margin-bottom:var(--e-6);
  border:1px solid rgba(242,196,106,.26);border-radius:var(--r-md);
  background:rgba(10,6,7,.4);
}
.cafe-gramas b{color:var(--ouro);font-size:var(--t-lg);font-weight:800;letter-spacing:-.03em}
.cafe-gramas span{color:rgba(250,247,242,.74);font-size:var(--t-sm)}

.cafe-arte{position:relative;display:flex;align-items:center;justify-content:center}

/* Foto do moedor, 900x1200. Era um disco de 50% de raio até 14/08: o moedor é
   um móvel ALTO, e o círculo cortava fora a xícara em cima e a boca de saída
   embaixo — as duas coisas que a seção está contando em texto. Virou moldura
   3:4 em pé, que é o formato do próprio objeto.
   O gradiente continua embaixo como base de cor, caso a foto falhe. */
/* A foto entra por <img>, não por `background-image`.
   Fundo de CSS não aceita `loading="lazy"`: o moedor (144 KB) descia no
   carregamento INICIAL do celular, disputando banda com a foto do hero, e
   respondia por 26% do peso da página. Como <img> ele só baixa quando a
   seção chega perto da tela. De quebra fica igual ao disco do sorvete, que
   já era <img> — a moldura do trio passou a ser a mesma nos dois lados.
   O gradiente fica como base de cor, caso a foto falhe. */
.cafe-disco{
  position:relative;overflow:hidden;
  width:min(100%,340px);aspect-ratio:3/4;border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(242,196,106,.18), rgba(107,18,25,.3) 58%, rgba(10,6,7,.4) 100%);
  border:1px solid rgba(242,196,106,.26);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.cafe-disco img{width:100%;height:100%;object-fit:cover;display:block}
/* Véu quente, só pra foto não brigar com o dourado do texto. Bem mais leve que
   o de antes (chegava a .5): a máquina é preta sobre parede clara e o véu
   pesado apagava o brilho do cone de saída, que é o detalhe que vende. */
.cafe-disco::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(23,13,10,.1) 0%, rgba(107,18,25,.12) 60%, rgba(10,6,7,.28) 100%);
}

/* ---------- sorvete de casquinha ---------- */
/* Segundo pilar de mecanismo único, ao lado do café: a arte usa a MESMA
   moldura 3:4 em pé do moedor, só que com borda vermelho-marca em vez de
   dourada. Mesma família, seção diferente.
   Era um disco redondo de 300px até 14/08. A foto nova é a máquina no meio
   da loja — parede vermelha, prateleira, piso — e o círculo cortava fora
   todo o contexto, que é o que faz a foto valer. */
/* A PONTE. O topo entra rosado, herdando o calor do vinho que acabou de sair
   do café, e desce pro creme normal em 40% da altura. Junto com o brilho
   dourado no pé do café, o corte reto vira passagem.
   O brilho vermelho fica no alto e o frio no pé — invertido em relação ao
   café de propósito: mesma lógica, sentido trocado, que é o que distingue
   sem estranhar. */
.sorvete{
  background:
    radial-gradient(70% 50% at 92% 96%, rgba(107,18,25,.045), transparent 66%),
    /* O rosado do topo era um radial `at 50% -8%`, e isso foi um erro assim
       que o arco entrou: radial varia ao longo do X, então a cor da PRIMEIRA
       linha do sorvete mudava do centro pra borda, e nenhum preenchimento
       chapado no arco conseguia casar com ela. Dava um rebordo claro de 12
       pontos seguindo a curva.
       Agora o rosado está no primeiro stop de um gradiente VERTICAL: cor
       constante em toda a largura na linha da emenda, que é o que permite o
       arco casar exatamente. */
    linear-gradient(180deg,#F4E1DB 0%,var(--off) 44%,var(--off) 100%);
}
/* casquinha, frescor e folha, no vermelho da marca bem apagado */
.sorvete .sec-arte{color:var(--verm-2)}
.arte-casquinha{width:104px;top:7%;left:3%;opacity:.1;transform:rotate(-9deg)}
.arte-folha{width:86px;bottom:14%;right:5%;opacity:.085;transform:rotate(12deg)}
.arte-frescor{width:64px;top:16%;right:12%;opacity:.11}
.arte-gota{width:46px;bottom:26%;left:8%;opacity:.08}

.sorvete-in{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(var(--e-7),5vw,var(--e-11));align-items:center;
}
.sorvete-arte{order:-1;display:flex;justify-content:center}
.sorvete-disco{
  position:relative;
  width:min(100%,360px);aspect-ratio:3/4;border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(224,49,39,.28);
  box-shadow:0 30px 70px -40px rgba(78,15,20,.5);
}
.sorvete-disco img{width:100%;height:100%;object-fit:cover;display:block}
.sorvete-disco::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(224,49,39,.1) 0%, transparent 55%, rgba(78,15,20,.14) 100%);
}

/* O vinho vem do .sec-cab h2, que rege TODO título de seção do site. Este
   estava sem cor e caía no --tinta quase-preto: mesma altura de página que o
   "como fazer seu pedido", cor de título diferente. Era o deslize mais
   visível dos três blocos. */
.sorvete-txt h2{font-size:clamp(1.85rem,1.3rem + 2.3vw,var(--t-3xl));color:var(--vinho);margin-bottom:var(--e-4)}
.sorvete-txt h2 em{font-style:normal;color:var(--verm-2)}
.sorvete-lead{color:var(--tinta-3);max-width:48ch;margin-bottom:var(--e-5);font-size:var(--t-md)}

.sorvete-selo{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-6)}
.sorvete-selo span{
  padding:var(--e-2) var(--e-4);border-radius:var(--r-full);
  border:1px solid rgba(224,49,39,.3);background:rgba(224,49,39,.06);
  color:var(--verm-2);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}

/* A seção "Clube do Livro" (.clube-*) saiu em 14/08 junto com o CSS dela: o
   clube é interno, só de funcionário, e como seção de site convidava o
   cliente pra uma coisa que não é aberta a ele. A regra .sec-escura fica —
   é a seção do café que usa a família escura agora. */

/* ---------- FAQ ---------- */
.faq{max-width:820px;display:flex;flex-direction:column;gap:var(--e-3)}
.faq-item{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{border-color:var(--vinho)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-5);cursor:pointer;list-style:none;
  font-weight:700;font-size:var(--t-base);color:var(--vinho);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2.2px solid var(--verm);border-bottom:2.2px solid var(--verm);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq-corpo{padding:0 var(--e-5) var(--e-5);color:var(--tinta-3);font-size:var(--t-sm)}
.faq-corpo p + p{margin-top:var(--e-3)}
.faq-corpo a{color:var(--verm-2);font-weight:600}

/* ---------- a loja ---------- */
.loja-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--e-7),5vw,var(--e-10));align-items:center}
.loja-txt h2{font-size:clamp(1.85rem,1.3rem + 2.3vw,var(--t-3xl));color:var(--vinho);margin-bottom:var(--e-4)}
.loja-lead{font-size:var(--t-md);color:var(--tinta-3);font-style:italic;margin-bottom:var(--e-5);max-width:42ch}

/* o 4,8 do Google, que saiu do hero e virou contexto aqui */
.selo-google{
  display:inline-flex;align-items:center;gap:var(--e-3);
  padding:var(--e-3) var(--e-5);margin-bottom:var(--e-6);
  border:1px solid var(--linha);border-radius:var(--r-full);
  background:var(--branco);
}
.selo-google b{font-size:var(--t-lg);font-weight:800;letter-spacing:-.03em;color:var(--vinho);line-height:1}
.selo-google .estrelas{color:#E8A93B;letter-spacing:.08em;font-size:var(--t-sm)}
.selo-google span{font-size:var(--t-sm);color:var(--tinta-3)}
.dados{margin-bottom:var(--e-6)}
.dados > div{
  padding:var(--e-4) 0;border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:112px 1fr;gap:var(--e-4);align-items:start;
}
.dados dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--verm-2);font-weight:800;padding-top:4px}
.dados dd{font-size:var(--t-base);line-height:1.5}
.dados a{color:var(--vinho);font-weight:600;text-underline-offset:3px}

.loja-mapa{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linha);background:var(--off-2)}
.loja-mapa iframe{width:100%;height:100%;min-height:390px;border:0;display:block}

/* ============================ RODAPÉ ============================ */
.rodape{background:var(--vinho-3);color:rgba(250,247,242,.78);padding-block:var(--e-9)}
.rodape-in{display:flex;flex-wrap:wrap;gap:var(--e-6) var(--e-8);align-items:flex-start;justify-content:space-between}
.rodape-nota{font-size:var(--t-sm);margin-top:var(--e-3)}
.rodape-nav{display:flex;flex-wrap:wrap;gap:0 var(--e-5);padding-top:var(--e-1)}
/* 44px de altura: são 7 links empilhados no celular e a 31px eles ficavam
   colados. O gap vertical saiu porque a própria altura já separa. */
.rodape-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  font-size:var(--t-sm);text-decoration:none;color:rgba(250,247,242,.82);
}
.rodape-nav a:hover{color:var(--ouro)}

/* ============================ ZAP ============================ */
.zap{
  position:fixed;right:18px;bottom:18px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  transition:transform .2s;
}
.zap:hover{transform:scale(1.07)}

/* ============================ RESPONSIVO ============================ */
@media (max-width:980px){
  .loja-in,.cafe-in,.sorvete-in{grid-template-columns:1fr}
  /* Empilhado, as molduras 3:4 sobem de 190px pra 260px: em pé elas ficam
     estreitas demais no valor antigo e a máquina vira miniatura. */
  .cafe-arte{order:-1;justify-content:flex-start}
  .cafe-disco{width:min(100%,260px)}
  .sorvete-arte{justify-content:flex-start}
  .sorvete-disco{width:min(100%,260px)}
  .loja-mapa iframe{min-height:300px}
  .passos li:not(:last-child)::after{display:none}

  /* Empilhado não sobra margem lateral, e desenho atrás de texto vira
     sujeira. Fica só UM motivo por seção, o maior, encostado num canto
     que o conteúdo não ocupa. O trio continua sendo trio: mesmo traço,
     mesma lógica, só que em dose de celular.

     O `.sec-arte` na frente NÃO é enfeite: `.sec-arte svg` já declara
     `display:block` e pesa (0,1,1) — classe + tipo. Um seletor de classe
     sozinho pesa (0,1,0) e PERDE, esteja dentro do media query ou não.
     Sem este prefixo o `display:none` é simplesmente ignorado, e foi
     exatamente o que aconteceu na primeira tentativa. */
  .sec-arte .arte-grao-b,.sec-arte .arte-grao-c,
  .sec-arte .arte-frescor,.sec-arte .arte-gota,
  .sec-arte .arte-confere,.sec-arte .arte-balao{display:none}

  .arte-grao-a{width:92px;top:auto;bottom:3%;left:auto;right:5%;opacity:.07}
  .arte-fumaca{width:120px;top:2%;right:3%;opacity:.09}
  .arte-casquinha{width:76px;top:3%;left:auto;right:5%;opacity:.09}
  .arte-folha{width:66px;bottom:5%;right:6%;opacity:.07}
  /* inteiro dentro da tela: em -4% o arco saía pela direita e sobrava só a
     bolinha da ponta esquerda, que lia como sujeira e não como caminho */
  .arte-caminho{width:150px;top:auto;bottom:5%;right:3%;opacity:.075}
}

@media (max-width:900px){
  /* a foto vertical assume e o texto desce: os potes ficam por cima do título */
  .hero{min-height:min(96vh,860px)}
  .hero-foto img{
    object-position:center 24%;
  }
  .hero-veu{
    background:
      linear-gradient(to top,
        rgba(8,5,6,.97) 26%,
        rgba(38,10,14,.92) 48%,
        rgba(78,15,20,.6) 72%,
        rgba(107,18,25,.3) 100%),
      radial-gradient(100% 60% at 50% 100%, rgba(0,0,0,.45), transparent 70%);
  }
  .hero-in{justify-content:flex-end;padding-block:calc(var(--topo-h) + var(--e-10)) var(--e-6)}
  .hero h1{max-width:none}
  .hero-scroll{display:none}

  /* O menu vira hambúrguer aqui, não em 760.
     Em 768 os links + o CTA não cabiam numa linha: o nav quebrava em duas e o
     botão vermelho subia por cima do ramo dourado. O corte certo é onde o nav
     de desktop deixa de caber, e isso acontece em 900. O JS usa o mesmo
     número. (O nav encolheu de 6 pra 5 links quando o Clube do Livro saiu em
     14/08, mas o ponto de corte continua valendo.) */
  .menu-btn{display:flex}
  /* menu do celular também em vermelho, pra não quebrar a identidade */
  .nav{
    position:fixed;inset:var(--topo-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--verm-2);border-bottom:1px solid rgba(58,10,14,.5);
    box-shadow:0 20px 40px -26px rgba(58,10,14,.95);
    padding:var(--e-4) clamp(18px,4vw,36px) var(--e-6);
    transform:translateY(-135%);opacity:0;pointer-events:none;
    transition:transform .3s ease,opacity .22s ease;
    max-height:calc(100dvh - var(--topo-h));overflow-y:auto;
  }
  .nav.aberto{transform:none;opacity:1;pointer-events:auto}
  .nav a,.topo .nav a,.topo.solido .nav a{color:var(--off);padding:var(--e-4) var(--e-3);font-size:var(--t-base);border-radius:10px}
  .nav a:hover,.topo.solido .nav a:hover{background:rgba(10,6,7,.25)}
  .nav .nav-cta,.topo .nav .nav-cta,.topo.solido .nav .nav-cta{
    background:var(--ouro);color:var(--vinho-3);
    margin:var(--e-3) 0 0;justify-content:center;
  }
}

@media (max-width:760px){
  .hero-acoes{gap:var(--e-4)}
  .hero-acoes .btn{width:100%}

  /* Filtros: no celular eles quebravam em linhas irregulares (1+2+2) e
     ficavam tortos. Viram trilho horizontal, que é o padrão de app: uma
     linha só, rolando dentro do próprio bloco e sangrando até a borda. */
  .filtros{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(clamp(18px,4vw,36px) * -1);
    padding-inline:clamp(18px,4vw,36px);
    padding-bottom:var(--e-1);
  }
  .filtros::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}

  .faixa-cta{flex-direction:column;align-items:flex-start}
  .faixa-cta .btn{width:100%}
  .grade{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:var(--e-3)}
  .dados > div{grid-template-columns:1fr;gap:var(--e-1)}
  .rodape-in{flex-direction:column}
}

/* ---------- celular: DUAS colunas de card ----------          (24/08/2026)
   O `auto-fill minmax(215px,1fr)` acima cai sozinho pra 1 coluna por volta de
   450px de tela. Numa grade de 15 cards isso vira ~15.000px de rolagem — o
   visitante desiste antes do produto que ele queria.

   Aqui a contagem é FIXA em 2, não negociada com o `auto-fill`: num iPhone de
   390px sobram 354px de conteúdo, dois cards de ~171px. Menor que no desktop,
   e é justamente por isso que o miolo aperta o respiro junto — senão o texto
   fica numa calha de 100px e o card parece quebrado.

   `minmax(0,1fr)` e não `1fr`: o mínimo automático de um item de grid é
   `auto`, e um título longo (Kit de suplementação) empurraria a coluna pra
   fora da tela. O zero é o que autoriza o card a encolher. */
@media (max-width:560px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}
  .card-txt{padding:var(--e-3) var(--e-3) var(--e-2)}
  .card-txt h3{font-size:var(--t-base)}
  /* `--t-xs` e não `--t-sm`: "Pedir no WhatsApp" pede 109,4px de largura, e em
     14px isso não cabe na calha de um card de duas colunas — quebrava em duas
     linhas nos QUINZE botões. Medido no navegador, não estimado.
     Encolher a fonte, não a frase: o texto do botão é o que o cliente lê. */
  .card-cta{margin:0 var(--e-3) var(--e-3);padding:var(--e-2) var(--e-3);font-size:var(--t-xs)}
}

/* Abaixo de 400px (iPhone SE e companhia) a coluna cai pra 156px e a conta não
   fecha nem em 12px: o botão pede 109,4px e sobram 102,0px. Faltam 7,4px.
   Em vez de espremer a fonte de novo, o respiro do card aperta de 12px pra 8px
   — texto e botão JUNTOS, senão o botão desalinha do parágrafo acima dele.
   Isso devolve 124px de calha: 14,6px de folga, não 0,6px. */
@media (max-width:400px){
  .card-txt{padding:var(--e-2) var(--e-2)}
  .card-cta{margin:0 var(--e-2) var(--e-2);padding:var(--e-2)}
  .zap{right:14px;bottom:14px;width:54px;height:54px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sobe,.reveal{opacity:1;transform:none}
  .hero-foto img{animation:none}
  .hero-scroll{animation:none}
}

@media print{
  .topo,.zap,.filtros,.hero-scroll{display:none}
  body{background:#fff}
  .hero-foto,.hero-veu,.hero-grao{display:none}
}