/* ────────────────────────────────────────────────────────────
   TOKENS — todas as cores foram amostradas das fotos das embalagens
   ──────────────────────────────────────────────────────────── */
:root{
  --ink:        #0C0B09;   /* preto brilhante da embalagem */
  --ink-2:      #17150F;   /* painel escuro */
  --ink-3:      #221E16;   /* linhas sobre o preto */
  --olive:      #2B3117;   /* painel verde-oliva da embalagem Mix */
  --olive-2:    #3D4522;
  --sage:       #9AA463;   /* oliva clareado — cor do produto Mix */
  --brass:      #C08A3E;   /* foil dourado */
  --brass-hi:   #E7C489;   /* brilho da foil */
  --cream:      #EFE6D3;   /* creme do rótulo */
  --cream-2:    #E2D6BC;
  --cream-3:    #D2C3A3;
  --cap:        #6B3F1E;   /* marrom do chapéu do cogumelo */
  --gill:       #D8B37C;   /* lamela / face inferior */

  --accent: var(--brass);
  --accent-soft: rgba(192,138,62,.28);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1240px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{
  outline:2px solid var(--brass-hi);
  outline-offset:3px;
  border-radius:2px;
}

/* ── tipografia ─────────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
  font-weight:500;
  line-height:.94;
  letter-spacing:-.015em;
}
.mono{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.6rem;
  transition:color .6s ease;
}
.eyebrow::before{
  content:"";
  width:2.2rem;height:1px;
  background:currentColor;
  flex:none;
}

/* ── faixas / bandas ────────────────────────────────────────── */
.band{padding:clamp(4.5rem,9vw,8.5rem) var(--pad);position:relative}
.band--dark{background:var(--ink);color:var(--cream)}
.band--cream{background:var(--cream);color:var(--ink)}
.band--olive{background:var(--olive);color:var(--cream)}
.band__inner{max-width:var(--maxw);margin:0 auto}

.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;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'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.section-head{max-width:44ch}
.section-head--moments{max-width:50rem}
.section-head h2{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 90;
  font-weight:500;
  /* 28px a 360px  →  58px a 1440px */
  font-size:clamp(1.6rem,1.05rem + 2.9vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.1rem;
}
.section-head p{margin:0;opacity:.78;max-width:52ch}

/* ────────────────────────────────────────────────────────────
   NAV
   ──────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:.9rem var(--pad);
  background:rgba(12,11,9,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(192,138,62,.16);
}
.nav__brand{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 40;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream);
}
.nav__links{display:flex;gap:1.15rem;align-items:center}
.nav__links a{
  font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;opacity:.72;transition:opacity .2s,color .2s;
}
.nav__links a:hover{opacity:1;color:var(--brass-hi)}
@media (max-width:900px){.nav__links{display:none}}

/* ────────────────────────────────────────────────────────────
   HERO — o disco de lamelas
   ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:clamp(2.5rem,5vw,4.5rem) var(--pad) clamp(3.5rem,6vw,6rem);
  overflow:hidden;
}
.hero__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
}

.hero h1{
  font-family:var(--display);
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-weight:400;
  /* três linhas longas: 28px a 360px → 76px a 1440px */
  font-size:clamp(1.7rem,.75rem + 4.44vw,4.8rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:0 0 1.6rem;
}
.hero h1 em{
  display:inline-block;
  margin-top:.14em;
  font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  color:var(--accent);
  transition:color .6s ease;
}
.hero__lead{
  margin:0 0 2.2rem;
  max-width:46ch;
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  color:rgba(239,230,211,.76);
}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn--solid{background:var(--accent);color:var(--ink);font-weight:500}
.btn--solid:hover{background:var(--brass-hi);transform:translateY(-2px)}
.btn--ghost{border:1px solid rgba(239,230,211,.28);color:var(--cream)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.band--cream .btn--ghost{border-color:rgba(12,11,9,.28);color:var(--ink)}
.band--cream .btn--ghost:hover{border-color:var(--cap);color:var(--cap)}

/* — o disco — */
.disc{
  position:relative;
  width:min(100%,540px);
  margin-inline:auto;
  aspect-ratio:1;
}
.disc__rays{
  position:absolute;inset:-16%;
  width:132%;height:132%;
  overflow:visible;
  animation:spin 260s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* halo quente no lugar do antigo prato creme: agora a embalagem é
   PNG transparente e pode flutuar no escuro, passando do círculo */
.disc__plate{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      color-mix(in srgb, var(--accent) 9%, transparent) 42%,
      transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(28,24,18,.9) 0%, rgba(12,11,9,0) 74%);
  box-shadow:inset 0 0 0 1px var(--accent-soft);
  transition:background .6s ease, box-shadow .6s ease;
}
.disc__plate::before{ /* lamelas do chapéu, quase invisíveis */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(239,230,211,.05) 0deg .35deg, transparent .35deg 1.6deg);
  mask-image:radial-gradient(circle,transparent 34%,#000 70%,transparent 99%);
  -webkit-mask-image:radial-gradient(circle,transparent 34%,#000 70%,transparent 99%);
}

/* a embalagem 3D ultrapassa o círculo — é o que dá profundidade */
.disc__stage{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:58%;
}

/* recorte simples (frente ou verso) usado fora do visualizador 3D */
.pack{
  position:relative;
  aspect-ratio:758/1024;
  overflow:hidden;
}
.pack img{
  position:absolute;top:0;left:0;
  height:100%;width:auto;max-width:none;
}
.pack[data-side="back"] img{left:-100%}

.disc__caption{
  position:absolute;
  left:50%;bottom:-2.9rem;      /* folga para o selo "arraste para girar" */
  transform:translateX(-50%);
  white-space:nowrap;
  color:var(--accent);
  transition:color .6s ease;
}

/* — seletor de produto — */
.switch{
  margin-top:5rem;              /* o selo e a legenda ocupam este espaço */
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.switch__btn{
  flex:1 1 12rem;
  text-align:left;
  padding:.95rem 1.15rem;
  border:1px solid rgba(239,230,211,.16);
  border-radius:14px;
  transition:border-color .3s,background .3s,transform .3s;
}
.switch__btn:hover{border-color:rgba(239,230,211,.38);transform:translateY(-2px)}
.switch__btn[aria-pressed="true"]{
  border-color:var(--accent);
  background:rgba(192,138,62,.09);
}
.switch__btn .sw-tag{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.55;margin-bottom:.35rem;
}
.switch__btn[aria-pressed="true"] .sw-tag{opacity:1;color:var(--accent)}
.switch__btn .sw-name{
  display:block;
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 40;
  font-weight:600;font-size:1.02rem;line-height:1.15;
  letter-spacing:.02em;
}

/* ── faixa de selos ─────────────────────────────────────────── */
.seals{
  border-block:1px solid rgba(192,138,62,.2);
  background:var(--ink-2);
  padding:1.1rem var(--pad);
}
.seals__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;
  justify-content:space-between;
  color:var(--brass);
}
.seals__inner span{display:flex;align-items:center;gap:.55rem}
.seals__inner span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none;
}

/* ────────────────────────────────────────────────────────────
   PROCESSO — sequência real, por isso tem ordem visível
   ──────────────────────────────────────────────────────────── */
.process{margin-top:clamp(3rem,5vw,4.5rem)}
.process__track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  position:relative;
}
.process__track::before{
  content:"";
  position:absolute;top:9px;left:0;right:0;
  height:1px;background:rgba(12,11,9,.2);
}
@media (max-width:760px){
  .process__track{grid-template-columns:1fr;gap:2.2rem}
  .process__track::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
}
.step{position:relative;padding-top:2.4rem}
@media (max-width:760px){.step{padding-top:0;padding-left:2.4rem}}
.step::before{
  content:"";position:absolute;top:4px;left:0;
  width:11px;height:11px;border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 0 1px var(--cap), inset 0 0 0 3px var(--cream);
}
@media (max-width:760px){.step::before{top:6px}}
.step__phase{
  font-family:var(--mono);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cap);opacity:.75;
  margin:0 0 .5rem;
}
.step h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  font-weight:600;font-size:1.5rem;line-height:1.1;
  margin:0 0 .6rem;letter-spacing:-.01em;
}
.step p{margin:0;font-size:.95rem;color:rgba(12,11,9,.72)}

.datum{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:1.1rem;
  border-top:1px solid rgba(12,11,9,.16);
  color:rgba(12,11,9,.55);
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
}

/* ────────────────────────────────────────────────────────────
   PRODUTOS
   ──────────────────────────────────────────────────────────── */
.products{
  margin-top:clamp(3rem,5vw,4.5rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.card{
  background:var(--cream-2);
  border:1px solid rgba(12,11,9,.1);
  border-radius:20px;
  padding:clamp(1.25rem,2.5vw,2rem);
  display:flex;flex-direction:column;
}
.card__stage{
  width:min(100%,20rem);
  margin:0 auto 4.4rem;         /* espaço para o selo, que fica abaixo da cena */
}

.card__ribbon{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-bottom:.9rem;
}
.card h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 72;
  font-weight:600;
  font-size:clamp(1.5rem,1.2rem + .9vw,2.05rem);
  line-height:1.02;letter-spacing:-.01em;
  margin:0;
}
.card__tag{
  font-family:var(--display);
  font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
  font-size:1.02rem;
  color:var(--cap);
  margin:.35rem 0 1.3rem;
}
.spec{
  border-top:1px solid rgba(12,11,9,.14);
  padding:.72rem 0;
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:1rem;
  align-items:start;
}
.spec dt{
  font-family:var(--mono);
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(12,11,9,.5);
  padding-top:.18rem;
}
.spec dd{margin:0;font-size:.92rem;color:rgba(12,11,9,.86)}
.card__specs{margin:0}
.card__foot{margin-top:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* ── conteúdo de venda dentro do card ───────────────────────── */
.card__kicker{
  color:var(--cap);
  border:1px solid rgba(107,63,30,.32);
  border-radius:999px;
  padding:.3rem .7rem;
  font-size:.58rem;
}
.card__sell{margin:0 0 .9rem;font-size:.94rem;color:rgba(12,11,9,.74);line-height:1.6}
.card__label{color:var(--cap);opacity:.7;margin:1.4rem 0 .8rem;font-size:.6rem}
.highlights{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem}
.highlights li{
  position:relative;padding-left:1.5rem;
  font-size:.92rem;color:rgba(12,11,9,.82);
}
.highlights li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:8px;height:8px;border-radius:50%;
  border:1px solid var(--cap);opacity:.55;
}

/* bloco recolhível: a ficha técnica não precisa estar sempre aberta */
.sheet{border-top:1px solid rgba(12,11,9,.14);margin-bottom:1.4rem}
.sheet > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 0;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(12,11,9,.6);transition:color .2s;
}
.sheet > summary::-webkit-details-marker{display:none}
.sheet > summary:hover{color:var(--ink)}
.sheet .chev{flex:none;transition:transform .3s ease}
.sheet[open] > summary .chev{transform:rotate(180deg)}
.sheet .spec:first-of-type{border-top:0}

.btn--block{width:100%;justify-content:center;text-align:center;
  letter-spacing:.08em;text-transform:none;font-size:.8rem;line-height:1.3}
.card__foot{margin-top:auto;flex-direction:column;align-items:stretch}

/* ════════════════════════════════════════════════════════════
   VISUALIZADOR 3D DA EMBALAGEM
   As fotos são PNG com fundo transparente, então a embalagem pode
   ser montada como um objeto de verdade: frente, verso e os dois
   vincos laterais. O JS mede a caixa e escreve --thick/--halfw.
   ════════════════════════════════════════════════════════════ */
.v3d{position:relative;width:100%}
.v3d__scene{
  position:relative;
  aspect-ratio:758/1024;
  perspective:1500px;
  perspective-origin:50% 44%;
  touch-action:pan-y;            /* rolar a página continua funcionando */
  cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.v3d__scene:active{cursor:grabbing}
/* Quem recebe o clique é a cena, e só ela. Sem isto, o ponteiro cai em
   cima da <img> e o navegador dispara o arrastar-e-soltar nativo dele,
   engolindo o gesto no meio. */
.v3d__scene *{pointer-events:none}
.v3d__face img{-webkit-user-drag:none;user-drag:none}
.v3d__scene:focus-visible{outline:2px solid var(--brass-hi);outline-offset:8px;border-radius:8px}

.v3d__obj{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  will-change:transform;
  transition:opacity .3s ease;
}
.v3d__obj.is-swapping{opacity:0}

.v3d__face{
  position:absolute;inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  transform:translateZ(var(--halfthick,8px));
}
.v3d__face--back{transform:rotateY(180deg) translateZ(var(--halfthick,8px))}
/* sem drop-shadow aqui: a face tem overflow:hidden e cortaria a sombra.
   Quem faz a sombra é o .v3d__shadow, no chão. */
.v3d__face img{
  position:absolute;top:0;left:0;
  height:100%;width:auto;max-width:none;
}
.v3d__face--back img{left:-100%}

/* os vincos laterais: preto brilhante com um realce de foil no meio */
.v3d__side{
  position:absolute;top:2.5%;bottom:2.5%;
  left:50%;width:var(--thick,16px);
  margin-left:calc(var(--thick,16px) / -2);
  background:linear-gradient(90deg,#000 0%,#17140F 22%,#3B342A 48%,#100D09 74%,#000 100%);
}
.v3d__side--r{transform:translateX(var(--halfw,120px)) rotateY(90deg)}
.v3d__side--l{transform:translateX(calc(var(--halfw,120px) * -1)) rotateY(-90deg)}

/* brilho do plástico, recortado pela própria silhueta do PNG */
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .v3d__gloss{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(102deg,
      transparent 32%,
      rgba(255,255,255,.20) 45%,
      rgba(255,255,255,.05) 52%,
      transparent 64%);
    background-size:260% 100%;
    background-position:var(--sheen,50%) 0;
    mix-blend-mode:screen;
    -webkit-mask-image:var(--maskimg);mask-image:var(--maskimg);
    -webkit-mask-size:200% 100%;mask-size:200% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:var(--maskpos,0% 0%);mask-position:var(--maskpos,0% 0%);
  }
}
.is-file-local .v3d__gloss{display:none}

.v3d__shadow{
  position:absolute;left:50%;bottom:-3%;
  width:62%;height:4%;
  translate:-50% 0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.8) 0%,transparent 72%);
  filter:blur(9px);
  transform:scaleX(var(--shw,1));
  transition:transform .1s linear;
}

/* selo de convite — precisa ser visível, não um fio de texto */
.v3d__hint{
  position:absolute;left:50%;bottom:-2.6rem;translate:-50% 0;
  white-space:nowrap;
  display:flex;align-items:center;gap:.55rem;
  margin:0;padding:.55rem 1rem;
  border-radius:999px;
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 13%,rgba(12,11,9,.85));
  backdrop-filter:blur(6px);
  font-size:.62rem;
  pointer-events:none;
  transition:opacity .5s ease, translate .5s ease;
  animation:hintPulse 2.6s ease-in-out infinite;
}
.band--cream .v3d__hint{
  color:var(--cap);
  border-color:rgba(107,63,30,.4);
  background:rgba(255,255,255,.72);
}
.v3d__hint svg{flex:none;animation:hintRock 2.6s ease-in-out infinite}
@keyframes hintPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent)}
  50%    {box-shadow:0 0 0 7px transparent}
}
@keyframes hintRock{
  0%,100%{transform:rotate(-24deg)}
  50%    {transform:rotate(24deg)}
}
.v3d.is-touched .v3d__hint{opacity:0;translate:-50% 6px}

/* ────────────────────────────────────────────────────────────
   COMBO
   ──────────────────────────────────────────────────────────── */
.combo{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:900px){.combo{grid-template-columns:1fr;gap:2.5rem}}

/* as embalagens flutuam soltas no verde — não precisam mais de painel */
.combo__art{padding:0 0 .5rem}
.combo__pair{
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(.25rem,1.5vw,1rem);
}
/* a sombra fica no wrapper, não na img: .pack tem overflow:hidden */
.combo__pack{flex:1 1 0;max-width:15rem;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
.combo__pack--a{transform:rotate(-4deg) translateY(1.5%)}
.combo__pack--b{transform:rotate(4deg)}
.combo__seal{
  text-align:center;color:var(--brass-hi);opacity:.7;
  margin:1.6rem 0 0;font-size:.6rem;
}

.combo__copy h2{
  font-size:clamp(1.8rem,1.1rem + 3.1vw,3.5rem);
  line-height:1;letter-spacing:-.02em;margin:0 0 1.1rem;
}
.combo__lead{margin:0 0 1.6rem;color:rgba(239,230,211,.8);max-width:48ch}
.combo__list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.6rem}
.combo__list li{
  position:relative;padding-left:1.7rem;
  color:rgba(239,230,211,.9);font-size:.95rem;
}
.combo__list li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:10px;height:10px;border-radius:2px;
  background:var(--brass);
}
.cta .btn--solid,.combo .btn--solid{background:var(--cream);color:var(--olive)}
.cta .btn--solid:hover,.combo .btn--solid:hover{background:#fff}

/* ────────────────────────────────────────────────────────────
   DIFERENCIAIS — sem caixas, só tipografia e fios
   ──────────────────────────────────────────────────────────── */
.edges{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.8rem,3.5vw,3rem);
}
.edge{padding-top:1.3rem;border-top:1px solid rgba(192,138,62,.45)}
.edge h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  font-weight:600;font-size:1.35rem;line-height:1.12;
  margin:0 0 .6rem;letter-spacing:-.01em;
  color:var(--cream);
}
.edge p{margin:0;font-size:.92rem;color:rgba(239,230,211,.68);line-height:1.6}

/* ────────────────────────────────────────────────────────────
   PERGUNTAS FREQUENTES
   ──────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(2.5rem,5vw,4rem);max-width:60rem}
.qa{border-bottom:1px solid rgba(12,11,9,.16)}
.qa:first-child{border-top:1px solid rgba(12,11,9,.16)}
.qa > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 40;
  font-weight:600;font-size:1.1rem;line-height:1.25;
  transition:color .2s;
}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:hover{color:var(--cap)}
.qa > summary::after{
  content:"";flex:none;width:13px;height:13px;
  background:currentColor;opacity:.55;
  transition:transform .3s ease;
  /* sinal de + que vira − */
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
}
.qa[open] > summary::after{transform:rotate(45deg)}
.qa > p{
  margin:0 0 1.4rem;max-width:62ch;
  color:rgba(12,11,9,.72);font-size:.95rem;
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.qa[open]:not(.is-closing) > p{opacity:1;transform:none}

/* ── canais no fechamento ───────────────────────────────────── */
.channels{
  margin-top:2.6rem;padding-top:1.8rem;
  border-top:1px solid rgba(239,230,211,.16);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;
}
.channel{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,230,211,.62);transition:color .2s;
}
.channel:not(.channel--static):hover{color:var(--brass-hi)}
.channel--static{cursor:default}

/* ────────────────────────────────────────────────────────────
   NUTRIÇÃO
   ──────────────────────────────────────────────────────────── */
.nutri__head{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:space-between;align-items:flex-end;
  margin-bottom:2.4rem;
}
.basis{display:flex;gap:.35rem;padding:.28rem;border:1px solid rgba(239,230,211,.18);border-radius:999px}
.basis button{
  padding:.55rem 1.1rem;border-radius:999px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;transition:background .25s,opacity .25s,color .25s;
}
.basis button[aria-pressed="true"]{background:var(--brass);color:var(--ink);opacity:1;font-weight:500}

.nutri-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.nutri-table th,.nutri-table td{
  padding:.85rem .6rem;
  text-align:right;
  border-bottom:1px solid rgba(239,230,211,.1);
}
.nutri-table th:first-child,.nutri-table td:first-child{text-align:left;padding-left:0}
.nutri-table td:last-child,.nutri-table th:last-child{padding-right:0}
.nutri-table thead th{
  font-family:var(--mono);
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--brass);
  border-bottom-color:rgba(192,138,62,.4);
  padding-bottom:.7rem;
  vertical-align:bottom;
}
.nutri-table tbody th{
  font-weight:400;font-size:.95rem;
  color:rgba(239,230,211,.9);
}
.nutri-table tbody td{
  font-family:var(--mono);
  font-size:.9rem;letter-spacing:.01em;
  color:var(--cream);
}
.nutri-table td.vd{color:rgba(239,230,211,.45);font-size:.8rem}
.nutri-table tbody tr:hover td,.nutri-table tbody tr:hover th{background:rgba(192,138,62,.06)}
.nutri-note{
  margin:1.4rem 0 0;
  font-size:.78rem;line-height:1.55;
  color:rgba(239,230,211,.45);
  max-width:70ch;
}
@media (max-width:620px){
  .nutri-table{table-layout:fixed}
  .nutri-table th,.nutri-table td{padding:.7rem .15rem;font-size:.7rem}
  .nutri-table th:first-child{width:36%}
  .nutri-table th:nth-child(2),.nutri-table th:nth-child(4){width:20%}
  .nutri-table th.vd{width:12%}
  .nutri-table tbody th{overflow-wrap:anywhere}
  .nutri-table tbody td{font-size:.68rem}
}

/* ────────────────────────────────────────────────────────────
   COMO COMER
   ──────────────────────────────────────────────────────────── */
.uses{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1px;
  background:rgba(12,11,9,.14);
  border-block:1px solid rgba(12,11,9,.14);
}
.use{background:var(--cream);padding:clamp(1.4rem,2.4vw,2rem) clamp(1.1rem,2vw,1.6rem)}
.use h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 40;
  font-weight:600;font-size:1.18rem;margin:0 0 .55rem;line-height:1.15;
}
.use p{margin:0;font-size:.9rem;color:rgba(12,11,9,.7)}
.use__mark{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cap);opacity:.6;margin-bottom:.8rem;
}

/* ────────────────────────────────────────────────────────────
   CTA + RODAPÉ
   ──────────────────────────────────────────────────────────── */
.cta__inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.cta h2{
  font-family:var(--display);
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-weight:400;
  font-size:clamp(1.9rem,1.1rem + 3.6vw,4.4rem);
  line-height:.98;letter-spacing:-.025em;
  margin:0 0 1.1rem;
}
.cta p{margin:0 auto 2.4rem;max-width:46ch;color:rgba(239,230,211,.72)}
.cta .actions{justify-content:center}
.cta .eyebrow{justify-content:center;color:var(--sage)}
.cta .eyebrow::after{
  content:"";
  width:2.2rem;height:1px;
  background:currentColor;
  flex:none;
}
.cta .btn--solid{background:var(--cream);color:var(--olive)}
.cta .btn--solid:hover{background:#fff}

.footer{
  background:var(--ink);
  padding:clamp(3rem,5vw,4.5rem) var(--pad) 2.5rem;
  border-top:1px solid rgba(192,138,62,.16);
}
.footer__inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:2.2rem;
}
.footer h4{
  font-family:var(--mono);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-weight:400;margin:0 0 .8rem;
}
.footer p{margin:0 0 .4rem;font-size:.85rem;color:rgba(239,230,211,.62);line-height:1.6}
.footer__brand{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 60;
  font-weight:600;font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 .6rem;color:var(--cream);
}
.footer__sig{
  font-family:var(--display);font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
  font-size:1.05rem;color:var(--brass);margin:.2rem 0 0;
}
.footer__base{
  max-width:var(--maxw);margin:2.6rem auto 0;
  padding-top:1.4rem;
  border-top:1px solid rgba(239,230,211,.09);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  color:rgba(239,230,211,.35);
}

/* ── revelação no scroll ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ════════════════════════════════════════════════════════════
   CELULAR E TABLET
   ════════════════════════════════════════════════════════════ */

/* nada de hover grudado em tela de toque */
@media (hover:none){
  .btn:hover,.switch__btn:hover{transform:none}
  .use:hover{background:var(--cream)}
}

/* ── tablet / paisagem estreita ─────────────────────────────── */
@media (max-width:940px){
  .hero{padding-bottom:clamp(2.5rem,5vw,3.5rem)}
  .hero__copy{max-width:34rem;margin-inline:auto;text-align:center}
  .hero__copy .eyebrow{justify-content:center}
  .hero__lead{margin-inline:auto}
  .actions{justify-content:center}
  .disc{width:min(100%,440px)}
  .switch{max-width:34rem;margin-inline:auto}
}

/* ── celular ────────────────────────────────────────────────── */
@media (max-width:640px){

  .hero h1 em{margin-top:.24em}

  /* o disco cresce e o anel de lamelas sangra para fora da tela,
     de propósito — o R0 dos raios é recalculado pelo JS */
  .disc{width:min(100%,380px)}
  .disc__plate{inset:5%}
  /* a legenda desce para fora do disco (o disco tem aspect-ratio fixo,
     então ela precisa continuar absoluta, ancorada em top:100%) */
  .disc__caption{
    top:100%;bottom:auto;width:100%;
    white-space:normal;text-align:center;
    margin-top:2.2rem;letter-spacing:.12em;
  }
  .switch{margin-top:5.6rem;gap:.45rem}
  .switch__btn{flex:1 1 100%;padding:.85rem 1rem}

  /* faixa de selos: duas colunas em vez de space-between torto */
  .seals{padding-block:1rem}
  .seals__inner{
    display:grid;grid-template-columns:1fr 1fr;
    gap:.6rem 1rem;justify-content:start;
  }
  .seals__inner span:last-child{grid-column:1 / -1}

  /* ficha técnica empilhada — rótulo em cima, valor embaixo */
  .spec{grid-template-columns:1fr;gap:.3rem;padding:.8rem 0}
  .spec dt{padding-top:0}

  /* alvos de toque com no mínimo 44px */
  .card__foot .btn{min-height:44px;padding-block:.8rem}
  .basis button{min-height:40px}

  .card{border-radius:16px}
  .card__stage{width:min(100%,15rem);margin-bottom:4.2rem}

  /* tabela: cabe sem rolagem lateral */
  .nutri__head{gap:1.1rem;margin-bottom:1.8rem}
  .basis{width:100%;justify-content:stretch}
  .basis button{flex:1;text-align:center;padding-inline:.5rem}
  .nutri-table th,.nutri-table td{padding:.65rem .3rem}
  .nutri-table tbody th{font-size:.85rem;line-height:1.25}
  .nutri-table tbody td{font-size:.76rem}
  .nutri-table thead th{font-size:.55rem;letter-spacing:.1em}

  /* linha do processo: os passos viram lista vertical */
  .process{margin-top:2.5rem}
  .datum{flex-direction:column;gap:.4rem}

  /* rodapé alinhado à esquerda, sem space-between quebrado */
  .footer__base{
    justify-content:flex-start;gap:.5rem 1.4rem;
    font-size:.6rem;
  }
  .footer__inner{gap:1.8rem}

  /* combo: as embalagens ficam retas para não desperdiçar largura */
  .combo__art{padding:1.2rem .9rem 1rem;border-radius:18px}
  .combo__pair{gap:.5rem}
  .combo__pack--a,.combo__pack--b{transform:none}
  .combo__list li{font-size:.9rem}

  /* diferenciais e perguntas */
  .edges{gap:1.6rem}
  .edge h3{font-size:1.2rem}
  .qa > summary{font-size:1rem;gap:1rem;padding:1.05rem 0}
  .qa > summary::after{width:12px;height:12px}

  /* canais empilhados e centralizados */
  .channels{flex-direction:column;align-items:center;gap:.95rem;margin-top:2rem}

  /* botão de compra do card */
  .btn--block{font-size:.74rem;padding:.85rem 1rem}
  .card__kicker{font-size:.55rem;padding:.25rem .6rem}
}

/* ── celular pequeno ────────────────────────────────────────── */
@media (max-width:380px){
  .seals__inner{grid-template-columns:1fr}
  .seals__inner span:last-child{grid-column:auto}
  .nutri-table tbody th{font-size:.8rem}
  .btn{padding:.8rem 1.15rem;font-size:.65rem}
  .actions{width:100%}
  .actions .btn{flex:1 1 100%;justify-content:center}
}

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