/* =========================================================
   Heaven Suplementos — folha de estilo única
   Mobile-first · sem framework
   1. Tokens          8. Identificação    15. Rodapé
   2. Reset           9. Trilhos          16. CTA fixa
   3. Tipografia     10. Produtos         17. Lightbox
   4. Layout         11. Ingredientes     18. Sistema de animação
   5. Botões         12. História         19. Breakpoints
   6. Header         13. Faixa CTA        20. Preferências
   7. Hero           14. FAQ
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* base */
  --ink:        #061a2e;
  --ink-2:      #0b2744;
  --ink-3:      #123354;
  --paper:      #faf8f4;
  --paper-2:    #ffffff;
  --paper-3:    #f2eee7;
  --text:       #16283a;
  --text-soft:  #5d6d7c;
  --text-mute:  #8b98a4;
  --line:       #e6e0d5;
  --line-soft:  #efeae1;

  /* marca */
  --lime:       #a6dd6a;
  --lime-bright:#c2ea86;
  --lime-deep:  #74b93c;
  --teal:       #45b5ae;
  --teal-deep:  #1c7873;   /* contraste AA sobre o marfim */
  --aqua:       #3e9fd0;
  --wa:         #25d366;
  --grad:       linear-gradient(112deg, var(--lime-bright) 0%, var(--teal) 48%, var(--aqua) 100%);
  --grad-soft:  linear-gradient(112deg, rgba(194,234,134,.16), rgba(69,181,174,.16) 48%, rgba(62,159,208,.16));

  /* forma */
  --wrap:       1180px;
  --wrap-narrow:820px;
  --r-sm:       10px;
  --r:          16px;
  --r-lg:       26px;
  --r-xl:       34px;

  /* elevação */
  --sh-1:  0 1px 2px rgba(6,26,46,.04), 0 4px 14px -8px rgba(6,26,46,.18);
  --sh-2:  0 2px 6px rgba(6,26,46,.05), 0 18px 42px -24px rgba(6,26,46,.32);
  --sh-3:  0 30px 70px -34px rgba(6,26,46,.45);
  --sh-float: 0 2px 4px rgba(6,26,46,.04), 0 12px 24px -14px rgba(6,26,46,.2), 0 44px 80px -46px rgba(6,26,46,.45);

  /* movimento — um sistema só, usado em tudo */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --spring:   cubic-bezier(.34,1.4,.64,1);
  --dur-1: .38s;
  --dur-2: .68s;
  --dur-3: 1.05s;
  --stagger: 65ms;

  /* ritmo vertical */
  --sec-y: clamp(4.75rem, 9.5vw, 9rem);
  --gut:   clamp(1.15rem, 4vw, 2rem);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--lime); color:var(--ink); }

:focus-visible{
  outline:2.5px solid var(--aqua);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:#fff;
  padding:.75rem 1.15rem; border-radius:0 0 12px 12px;
  font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* barra de progresso da rolagem */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:3px;
  pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%;
  width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--grad);
  box-shadow:0 0 14px rgba(69,181,174,.55);
}

/* textura de grão — tira o aspecto "chapado" das áreas planas */
.grain{
  position:fixed; inset:0; z-index:100;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ---------- 3. Tipografia ---------- */
.display{
  font-family:"Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight:500;
  font-variation-settings:"opsz" 60, "SOFT" 20;
  letter-spacing:-.024em;
  line-height:1.04;
  text-wrap:balance;
  color:var(--ink);
}
/* cor sólida, não gradiente: `background-clip:text` não sobrevive
   à divisão do título em palavras (cada palavra vira inline-block). */
.display em{
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 60, "SOFT" 40, "WONK" 1;
  color:var(--teal-deep);
}
h1.display{ font-size:clamp(2.45rem, 1.25rem + 4.3vw, 3.85rem); }
h2.display{ font-size:clamp(1.95rem, 1.15rem + 3.3vw, 3.2rem); }

.kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.705rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal);
  margin-bottom:1.15rem;
}
.kicker::before{
  content:""; width:40px; height:2px; border-radius:2px;
  background:var(--grad);
  transform-origin:left;
}
.kicker-light{ color:var(--lime-bright); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.46rem 1.05rem .46rem .78rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  border-radius:999px;
  font-size:clamp(.7rem, .655rem + .2vw, .755rem);
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text-soft);
  margin-bottom:1.5rem;
  box-shadow:0 1px 2px rgba(6,26,46,.03), 0 8px 22px -16px rgba(6,26,46,.4);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lime-deep);
  flex:none;
  animation:pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(166,221,106,.55); }
  55%    { box-shadow:0 0 0 7px rgba(166,221,106,0); }
}

.lead{
  margin-top:1.85rem;
  font-size:clamp(1.05rem, .98rem + .4vw, 1.26rem);
  line-height:1.62;
  color:var(--text-soft);
  max-width:52ch;
  text-wrap:pretty;
}

/* ---------- 4. Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--sec-y); position:relative; }
.section-paper{ background:var(--paper-3); }
.section-ink{
  background:var(--ink);
  color:#e8eef4;
  overflow:hidden;
}
.center{ text-align:center; }

.sec-head{
  max-width:44rem;
  margin-bottom:clamp(2.6rem, 5.5vw, 4rem);
}
.sec-head .sec-sub{
  margin-top:1.15rem;
  color:var(--text-soft);
  font-size:1.04rem;
  max-width:50ch;
  text-wrap:pretty;
}
.sec-head-light .display{ color:#fff; }
.sec-head-light .display em{ color:var(--lime-bright); }
.sec-head-light .sec-sub{ color:#a9bdd0; }

/* elementos decorativos com parallax */
.has-deco{ overflow:hidden; }
.deco{ position:absolute; pointer-events:none; z-index:0; }
.deco-arc{
  top:-8%; right:-14%;
  width:min(560px, 78vw); aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(69,181,174,.22);
  box-shadow:inset 0 0 0 1px rgba(62,159,208,.08);
}
.deco-arc::before{
  content:""; position:absolute; inset:14%;
  border-radius:50%;
  border:1px solid rgba(166,221,106,.22);
}
.deco-arc-left{
  top:auto; bottom:-14%; right:auto; left:-16%;
}
.deco-dots{
  bottom:-6%; left:-8%;
  width:min(420px, 62vw); aspect-ratio:1;
  background-image:radial-gradient(circle, rgba(18,51,84,.16) 1.4px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 68%);
}
.has-deco > .wrap{ position:relative; z-index:1; }

/* aurora animada nas seções escuras */
.has-aurora{ position:relative; overflow:hidden; }
.aurora{ position:absolute; inset:-15%; pointer-events:none; filter:blur(58px); }
.aurora span{
  position:absolute;
  display:block;
  border-radius:50%;
  opacity:.42;
  will-change:transform;
}
.aurora span:nth-child(1){
  width:46%; padding-top:46%; left:2%; top:-6%;
  background:radial-gradient(circle, rgba(166,221,106,.85), transparent 68%);
  animation:drift-a 22s var(--ease-io) infinite alternate;
}
.aurora span:nth-child(2){
  width:52%; padding-top:52%; right:-6%; top:18%;
  background:radial-gradient(circle, rgba(62,159,208,.9), transparent 68%);
  animation:drift-b 27s var(--ease-io) infinite alternate;
}
.aurora span:nth-child(3){
  width:44%; padding-top:44%; left:26%; bottom:-16%;
  background:radial-gradient(circle, rgba(69,181,174,.8), transparent 68%);
  animation:drift-c 19s var(--ease-io) infinite alternate;
}
.aurora-warm span:nth-child(1){ background:radial-gradient(circle, rgba(194,234,134,.75), transparent 68%); }
@keyframes drift-a{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(14%,10%,0) scale(1.18); } }
@keyframes drift-b{ from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-16%,-8%,0) scale(.9); } }
@keyframes drift-c{ from{ transform:translate3d(0,0,0) scale(.95); } to{ transform:translate3d(10%,-14%,0) scale(1.2); } }
.has-aurora > .wrap{ position:relative; z-index:1; }

/* holofote que segue o ponteiro nas seções escuras */
[data-spotlight]::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(194,234,134,.12), transparent 68%);
  opacity:0;
  transition:opacity .6s var(--ease);
}
[data-spotlight].is-hot::after{ opacity:1; }

/* ---------- 5. Botões ---------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  min-height:52px;
  padding:.9rem 1.65rem;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  font-size:.965rem;
  letter-spacing:-.005em;
  line-height:1.2;
  text-align:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:var(--sh-1);
  -webkit-tap-highlight-color:transparent;
  /* composto por variáveis: o JS mexe só em --bx/--by (efeito magnético) */
  transform:translate3d(var(--bx,0px), calc(var(--by,0px) + var(--lift,0px)), 0);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s var(--ease);
}
.btn.is-magnet{ transition:transform .18s var(--ease-out), box-shadow .35s var(--ease-out); }
.btn:hover{ --lift:-3px; box-shadow:var(--sh-2); }
.btn:active{ --lift:0px; scale:.985; }

/* brilho que atravessa o botão no hover */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 66%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease-out);
}
.btn:hover::before{ transform:translateX(120%); }

.btn-primary{
  --btn-fg:#052033;
  background:var(--grad);
  background-size:190% 100%;
  background-position:0% 50%;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-position .7s var(--ease);
  box-shadow:0 2px 4px rgba(6,26,46,.08), 0 14px 30px -14px rgba(69,181,174,.6);
}
.btn-primary:hover{
  background-position:100% 50%;
  box-shadow:0 4px 10px rgba(6,26,46,.1), 0 24px 46px -18px rgba(69,181,174,.78);
}
.btn-dark{ --btn-bg:var(--ink); }
.btn-dark:hover{ --btn-bg:var(--ink-2); }

.btn-ghost{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  border:1.5px solid var(--line);
  background:rgba(255,255,255,.55);
  box-shadow:none;
}
.btn-ghost:hover{
  border-color:var(--ink);
  background:var(--paper-2);
}
.btn-ghost-light{
  --btn-fg:#fff;
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
}
.btn-ghost-light:hover{
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.1);
}

.btn-wa{
  --btn-bg:var(--ink);
  padding-inline:1.2rem 1.45rem;
  min-height:46px;
  font-size:.9rem;
}
.btn-wa .ico-wa{
  width:19px; height:19px; fill:var(--lime-bright); flex:none;
  transition:transform .4s var(--spring);
}
.btn-wa:hover .ico-wa{ transform:scale(1.16) rotate(-8deg); }
.btn-wa:hover{ --btn-bg:var(--ink-2); }

.btn-lg{ min-height:62px; padding:1.1rem 2.2rem; font-size:1.05rem; }
.btn-block{ display:flex; width:100%; }

.cta-row{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:2.15rem;
}
.cta-row .btn{ flex:1 1 auto; }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(250,248,244,.6);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease-out);
}
.site-header.is-stuck{
  border-bottom-color:var(--line-soft);
  background:rgba(250,248,244,.9);
  box-shadow:0 10px 32px -26px rgba(6,26,46,.6);
}
/* esconde ao descer, mostra ao subir */
.site-header.is-hidden{ transform:translateY(-102%); }
.header-inner{
  display:flex; align-items:center; gap:1rem;
  min-height:66px;
}
.brand{ display:flex; align-items:center; flex:none; }
.brand-logo{
  width:auto; height:22px;
  transition:transform .45s var(--spring);
}
.brand:hover .brand-logo{ transform:scale(1.045); }
.nav-desktop{
  display:none;
  margin-inline:auto;
  /* com cinco itens a barra encosta na CTA a 900px; o gap acompanha a largura */
  gap:clamp(1.15rem, 2.1vw, 2.1rem);
  font-size:.925rem; font-weight:500;
}
.nav-desktop a{
  position:relative;
  color:var(--text-soft);
  padding-block:.35rem;
  transition:color .25s var(--ease);
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px;
  background:var(--grad);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav-desktop a:hover{ color:var(--ink); }
.nav-desktop a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-desktop a.is-current{ color:var(--ink); }
.nav-desktop a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta{ margin-left:auto; }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom:clamp(3rem, 6vw, 4.75rem);
  overflow:hidden;
}
.hero-aura{
  position:absolute; inset:-20% -20% auto -20%;
  height:min(1000px, 105vw);
  pointer-events:none;
  filter:blur(52px);
}
.hero-aura .blob{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
.blob-a{
  width:40%; padding-top:40%; left:6%; top:2%;
  background:radial-gradient(circle, rgba(166,221,106,.55), transparent 66%);
  animation:drift-a 20s var(--ease-io) infinite alternate;
}
.blob-b{
  width:44%; padding-top:44%; right:4%; top:-4%;
  background:radial-gradient(circle, rgba(62,159,208,.48), transparent 66%);
  animation:drift-b 25s var(--ease-io) infinite alternate;
}
.blob-c{
  width:38%; padding-top:38%; left:38%; top:26%;
  background:radial-gradient(circle, rgba(69,181,174,.4), transparent 68%);
  animation:drift-c 17s var(--ease-io) infinite alternate;
}
.hero-grid{
  position:relative;
  display:grid;
  gap:clamp(2rem, 5vw, 3rem);
}
.hero-copy{ max-width:36rem; }

.ticks{
  display:grid; gap:.75rem;
  margin-top:2rem;
}
.ticks li{
  position:relative;
  padding-left:2.05rem;
  font-size:1rem;
  color:var(--text);
  line-height:1.5;
}
.ticks li::before{
  content:"";
  position:absolute; left:0; top:.08em;
  width:21px; height:21px; border-radius:50%;
  background:var(--grad);
  opacity:.22;
}
.ticks li::after{
  content:"";
  position:absolute; left:6px; top:.42em;
  width:9px; height:5px;
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

.hero-art{
  position:relative;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  min-height:min(60vw, 420px);
}
.hero-glow{
  position:absolute;
  width:min(560px, 94%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,255,255,.5) 44%, transparent 68%);
  filter:blur(6px);
}
/* anéis concêntricos: dão profundidade e reagem ao scroll.
   `inset:0 + margin:auto` centraliza sem gastar transform (que é do parallax). */
.hero-ring{
  position:absolute;
  inset:0; margin:auto;
  width:min(430px, 76%); height:min(430px, 76%);
  border-radius:50%;
  border:1px solid rgba(18,51,84,.14);
  will-change:transform;
}
.hero-ring::after{
  content:""; position:absolute; inset:-1px;
  border-radius:50%;
  border:1.5px solid transparent;
  background:conic-gradient(from 0deg, transparent 58%, rgba(69,181,174,.75), rgba(166,221,106,.7), transparent) border-box;
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  animation:spin 16s linear infinite;
}
.hero-ring-2{
  width:min(580px, 100%); height:min(580px, 100%);
  border-color:rgba(18,51,84,.08);
  border-style:dashed;
}
.hero-ring-2::after{
  animation-duration:28s; animation-direction:reverse;
  background:conic-gradient(from 180deg, transparent 66%, rgba(62,159,208,.6), transparent) border-box;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Palco dos potes — mesma caixa da antiga imagem única (1200×768),
   só que agora cada pote é uma camada própria. O `transform` do palco é do
   parallax; por isso a entrada dos potes acontece um nível abaixo. */
.hero-bottles{
  position:relative;
  flex:0 0 auto;
  width:112%;
  max-width:none;
  aspect-ratio:1200 / 768;
  will-change:transform;
}

/* O slot é só o lugar do pote em cena: posição e profundidade. Não recebe
   `transform` — quem se mexe é o pote lá dentro, com `transform` (entrada)
   e `translate` (flutuação). */
.bottle-slot{
  position:absolute;
  display:block;
}
.bottle{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  transform-origin:50% 100%;
  /* atraso de entrada e, depois dela, o início da flutuação */
  --bd:calc(120ms + var(--o,0) * 170ms);
  animation:float-y var(--fdur,7s) var(--ease-io) calc(var(--bd) + 1.05s) infinite alternate;
  will-change:transform;
}
@keyframes float-y{ from{ translate:0 -6px; } to{ translate:0 10px; } }

/* Profundidade: quanto mais atrás o pote está, menor, mais alto na cena
   e mais suave a sombra. As medidas reproduzem o enquadramento original. */
.slot-black       { left:28.5%; width:30.8%; bottom:3%;   z-index:4; }
.slot-plus        { left:54.6%; width:24.6%; bottom:8.7%; z-index:3; }
.slot-equilibrium { left:6.5%;  width:25.5%; bottom:4.9%; z-index:2; }
.slot-men         { left:74.1%; width:21.4%; bottom:14%;  z-index:1; }

.bottle-black{
  filter:drop-shadow(0 34px 44px rgba(6,26,46,.4));
  --fdur:7s;
}
.bottle-plus{
  filter:drop-shadow(0 26px 34px rgba(6,26,46,.3));
  --fdur:6.2s;
}
.bottle-equilibrium{
  filter:drop-shadow(0 26px 34px rgba(6,26,46,.3));
  --fdur:6.6s;
}
.bottle-men{
  filter:drop-shadow(0 20px 28px rgba(6,26,46,.26));
  --fdur:5.8s;
}

/* faíscas flutuantes */
.hero-spark{
  position:absolute;
  border-radius:50%;
  will-change:transform;
}
.spark-1{
  width:11px; height:11px; left:9%; top:22%;
  background:var(--lime);
  box-shadow:0 0 0 6px rgba(166,221,106,.16), 0 0 24px rgba(166,221,106,.75);
  animation:float-y 5.5s var(--ease-io) infinite alternate-reverse;
}
.spark-2{
  width:7px; height:7px; right:12%; bottom:20%;
  background:var(--aqua);
  box-shadow:0 0 0 5px rgba(62,159,208,.16), 0 0 20px rgba(62,159,208,.7);
  animation:float-y 6.8s var(--ease-io) .8s infinite alternate;
}

/* Diferenciais */
.trust{
  display:grid;
  gap:1px;
  margin-top:clamp(2.25rem, 5vw, 3.5rem);
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
}
.trust li{
  display:flex; align-items:center;
  gap:.85rem;
  padding:.95rem 1.15rem;
  background:var(--paper-2);
  transition:background-color .35s var(--ease);
}
.trust li:hover{ background:#fff; }
.trust-ico{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:12px;
  background:var(--grad-soft);
  flex:none;
  transition:transform .5s var(--spring);
}
.trust li:hover .trust-ico{ transform:scale(1.12) rotate(-6deg); }
.trust-ico svg{ width:19px; height:19px; fill:var(--ink-3); }
.trust b{
  font-size:.98rem; font-weight:700; color:var(--ink);
  letter-spacing:-.01em;
}
.trust span:last-child{
  font-size:.86rem; color:var(--text-soft);
  margin-left:.4rem;
}

/* ---------- 8. Identificação (dores) ---------- */
.pain-grid{
  display:grid; gap:1rem;
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.pain{
  position:relative;
  display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.6rem 1.45rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s var(--ease);
}
.pain.is-tilting{ transition:transform .1s linear, box-shadow .45s var(--ease-out); }
.pain::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--grad);
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease-out);
}
.pain::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(340px circle at var(--px,50%) var(--py,50%), rgba(69,181,174,.09), transparent 70%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.pain:hover{ --ty:-4px; box-shadow:var(--sh-float); }
.pain:hover::before{ transform:scaleY(1); }
.pain:hover::after{ opacity:1; }
.pain-num{
  font-family:"Fraunces", Georgia, serif;
  font-size:1.75rem; font-weight:300;
  font-variation-settings:"opsz" 40;
  line-height:1;
  flex:none;
  padding-top:.1em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateZ(24px);
}
.pain p{
  font-size:1.02rem;
  line-height:1.55;
  color:var(--text);
  text-wrap:pretty;
  transform:translateZ(14px);
}

/* ---------- 9. Trilhos horizontais ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex;
  gap:clamp(.85rem, 2.4vw, 1.4rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--gut);
  padding-block:.5rem 1.75rem;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > li{
  flex:0 0 auto;
  scroll-snap-align:center;
}

.rail-video > li{ width:min(76vw, 300px); }
/* mesma moldura em degradê dos cards de antes e depois */
.vcard{
  position:relative;
  padding:3px;
  border:0;
  background:var(--grad);
  border-radius:calc(var(--r-lg) + 3px);
  box-shadow:0 2px 6px rgba(6,26,46,.06), 0 20px 44px -22px rgba(69,181,174,.5);
  will-change:transform;
  transition:box-shadow .45s var(--ease-out);
}
.vcard:hover{
  box-shadow:0 6px 14px rgba(6,26,46,.08), 0 34px 62px -26px rgba(69,181,174,.7);
}
/* o recorte vive aqui dentro, para o degradê continuar aparecendo na borda */
.vcard-inner{
  display:block; position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink);
  aspect-ratio:9/16;
}
.vcard video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  background:var(--ink);
}

.rail-res > li,
.rail-feedback > li{ width:min(64vw, 250px); }
.shot{
  display:block; position:relative;
  width:100%;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  background:var(--paper-2);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.shot img{
  width:100%; height:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  transition:transform .8s var(--ease-out), filter .5s var(--ease);
}
.shot-zoom{
  position:absolute; right:.75rem; bottom:.75rem;
  width:36px; height:36px; border-radius:50%;
  background:rgba(6,26,46,.55);
  backdrop-filter:blur(6px);
  display:grid; place-items:center;
  opacity:0; transform:scale(.7);
  transition:opacity .35s var(--ease), transform .45s var(--spring);
}
.shot-zoom::before,
.shot-zoom::after{
  content:""; position:absolute;
  background:#fff; border-radius:2px;
}
.shot-zoom::before{ width:13px; height:2px; }
.shot-zoom::after{ width:2px; height:13px; }
.shot:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }
.shot:hover img{ transform:scale(1.06); }
.shot:hover .shot-zoom,
.shot:focus-visible .shot-zoom{ opacity:1; transform:scale(1); }

/* --- antes e depois e prints: moldura em degradê (o mesmo do botão principal) --- */
.rail-res .shot,
.rail-feedback .shot{
  padding:3px;
  border:0;
  background:var(--grad);
  border-radius:calc(var(--r-lg) + 3px);
  box-shadow:0 2px 6px rgba(6,26,46,.06), 0 20px 44px -22px rgba(69,181,174,.5);
}
.rail-res .shot:hover,
.rail-feedback .shot:hover{
  box-shadow:0 6px 14px rgba(6,26,46,.08), 0 34px 62px -26px rgba(69,181,174,.7);
}
/* o recorte vive aqui dentro, senão o zoom no hover cobriria a moldura */
.shot-inner{
  display:block; position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
}

/* etiquetas: "Antes" em cima, "Depois" embaixo */
.ba{
  position:absolute; left:.6rem;
  padding:.32rem .72rem;
  border-radius:999px;
  font-size:.615rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  line-height:1;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.ba-antes{
  top:.6rem;
  background:rgba(6,26,46,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.ba-depois{
  bottom:.6rem;
  background:var(--grad);
  color:#052033;
  box-shadow:0 6px 18px -8px rgba(6,26,46,.7);
}

/* ---------- 10. Produtos ---------- */
/* Sem trilho e sem rolagem: a linha inteira cabe na tela. O número de colunas
   sobe com a largura (1 → 2 → 3 → 5) e os cards crescem em altura, não em
   largura — por isso `minmax(0,1fr)`, que deixa a coluna encolher de verdade. */
.prod-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(.7rem, 1.4vw, 1.15rem);
  padding:.65rem 0 1.25rem;
}
.prod-grid > .prod{ min-width:0; }
.prod{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.11);
  overflow:hidden;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;
  transition:transform .6s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.prod.is-tilting{ transition:transform .1s linear, border-color .4s var(--ease), box-shadow .5s var(--ease-out); }
.prod::before{
  content:"";
  position:absolute; inset:0;
  background:var(--v-grad);
  opacity:.13;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
/* reflexo de vidro que segue o ponteiro */
.prod::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,0%), rgba(255,255,255,.16), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.prod:hover{
  --ty:-8px;
  border-color:rgba(255,255,255,.26);
  box-shadow:0 44px 80px -44px rgba(0,0,0,.8);
}
.prod:hover::before{ opacity:.24; }
.prod:hover::after{ opacity:1; }

.prod[data-variant="plus"]       { --v-grad:linear-gradient(160deg,#8fdc5e,#2fb6a4 55%,#0d2f43); --v-color:#9fe06f; }
.prod[data-variant="equilibrium"]{ --v-grad:linear-gradient(160deg,#d24bb0,#6c3fb5 55%,#241a4d); --v-color:#e274c8; }
.prod[data-variant="black"]      { --v-grad:linear-gradient(160deg,#4a9ae0,#1c5da5 55%,#07182d); --v-color:#63b0e8; }
.prod[data-variant="men"]        { --v-grad:linear-gradient(160deg,#3b7fc4,#134a86 55%,#061529); --v-color:#5aa0dc; }
/* O Fire escurece no topo e clareia até a base. O overlay de `.prod::before`
   segue a mesma direção para não lavar o topo no hover. */
.prod[data-variant="fire"]{
  --fire-gold:#e1b84b;
  --v-grad:linear-gradient(160deg,#0d2439,#2b6ea0 55%,#5aa8d8);
  --v-color:var(--fire-gold);
  background:linear-gradient(180deg,#0a1e33 0%,#153a5c 48%,#2d6791 100%);
}
.prod[data-variant="fire"] .prod-tag{ color:var(--fire-gold); }
.prod[data-variant="fire"] .prod-list li::before{
  background:var(--fire-gold);
  box-shadow:0 0 0 3px rgba(225,184,75,.14), 0 0 10px rgba(225,184,75,.42);
}

.prod-flag{
  position:absolute; top:1rem; right:1rem; z-index:3;
  padding:.36rem .82rem;
  border-radius:999px;
  background:var(--grad);
  color:#052033;
  font-size:.665rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  transform:translateZ(50px);
}

.prod-shot{
  position:relative;
  display:grid; place-items:center;
  padding:2.2rem 1rem 1.15rem;
  min-height:240px;
}
.prod-halo{
  position:absolute;
  width:215px; height:215px; border-radius:50%;
  background:radial-gradient(circle, var(--v-color) 0%, transparent 66%);
  opacity:.3;
  filter:blur(26px);
  transition:opacity .5s var(--ease), transform .7s var(--ease-out);
}
.prod:hover .prod-halo{ opacity:.55; transform:scale(1.12); }
.prod-shot img{
  position:relative;
  width:auto; height:200px;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.5));
  transform:translateZ(46px);
  transition:transform .6s var(--ease-out);
}
.prod:hover .prod-shot img{ transform:translateZ(64px) translateY(-6px) scale(1.04); }

.prod-body{
  position:relative;
  display:flex; flex-direction:column;
  flex:1;
  padding:0 1.45rem 1.55rem;
  transform:translateZ(22px);
}
.prod-tag{
  font-size:.685rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--v-color);
  margin-bottom:.5rem;
}
.prod-name{
  font-family:"Fraunces", Georgia, serif;
  font-size:1.52rem; font-weight:500;
  font-variation-settings:"opsz" 40, "SOFT" 20;
  letter-spacing:-.022em;
  line-height:1.14;
  color:#fff;
}
.prod-desc{
  margin-top:.35rem;
  font-size:.925rem;
  color:#9fb4c8;
  line-height:1.45;
}

.meter{ margin:1.2rem 0 1.3rem; }
.meter-label{
  display:block;
  font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:#8ba3ba;
  margin-bottom:.5rem;
}
.meter-track{
  display:block;
  position:relative;
  height:5px; border-radius:99px;
  background:rgba(255,255,255,.11);
  overflow:hidden;
}
.meter-fill{
  display:block;
  position:relative;
  height:100%; width:var(--lvl);
  border-radius:99px;
  background:var(--grad);
  transform-origin:left;
}
/* A barra só começa vazia se o JS estiver de pé para enchê-la de volta;
   sem JS ela já nasce cheia, em vez de ficar invisível para sempre. */
.js .meter-fill{
  transform:scaleX(0);
  transition:transform 1.15s var(--ease-out);
}
.js .meter-fill.is-full{ transform:scaleX(1); }
/* brilho que percorre a barra */
.meter-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform:translateX(-100%);
  animation:sheen 3.4s var(--ease-io) 1.2s infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-100%); } 45%,100%{ transform:translateX(220%); } }

.prod-list{
  display:grid; gap:.6rem;
  margin-bottom:1.55rem;
  flex:1;
}
.prod-list li{
  position:relative;
  padding-left:1.35rem;
  font-size:.9rem;
  line-height:1.45;
  color:#c3d3e0;
}
.prod-list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--v-color);
}
/* Nas cápsulas os itens ficam um embaixo do outro, separados só pela própria
   entrelinha. O Fire fica de fora: são seis itens de texto mais longo e sem
   respiro eles viram um bloco só. Vence o `gap` do breakpoint de 900px por
   especificidade, então não precisa de override lá. */
.prod:not([data-variant="fire"]) .prod-list{ gap:0; }
.prod .btn-primary{ margin-top:auto; padding-inline:.8rem; }

/* ---------- 11. Ingredientes ---------- */
.ing-grid{
  display:grid; gap:1rem;
}
.ing{
  position:relative;
  padding:1.65rem 1.5rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ing.is-tilting{ transition:transform .1s linear, box-shadow .45s var(--ease-out); }
.ing::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(300px circle at var(--px,50%) var(--py,50%), rgba(166,221,106,.13), transparent 68%);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.ing:hover{ --ty:-5px; box-shadow:var(--sh-float); }
.ing:hover::after{ opacity:1; }
.ing-mark{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:15px;
  background:var(--grad-soft);
  border:1px solid var(--line-soft);
  margin-bottom:1.1rem;
  transform:translateZ(26px);
  transition:transform .55s var(--spring);
}
.ing:hover .ing-mark{ transform:translateZ(34px) scale(1.08) rotate(-5deg); }
.ing-mark svg{ width:23px; height:23px; color:var(--ink-3); }
/* traço que se desenha quando o card entra na tela.
   pathLength="1" no SVG normaliza o comprimento — nada de medir com JS. */
.ing-mark svg path,
.ing-mark svg circle{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.ing-mark svg :nth-child(1){ transition-delay:.2s; }
.ing-mark svg :nth-child(2){ transition-delay:.34s; }
.ing-mark svg :nth-child(3){ transition-delay:.48s; }
.ing.is-in .ing-mark svg path,
.ing.is-in .ing-mark svg circle{ stroke-dashoffset:0; }
.ing h3{
  font-family:"Fraunces", Georgia, serif;
  font-size:1.26rem; font-weight:500;
  font-variation-settings:"opsz" 36, "SOFT" 20;
  letter-spacing:-.018em;
  color:var(--ink);
  margin-bottom:.45rem;
  transform:translateZ(16px);
}
.ing p{
  font-size:.945rem;
  color:var(--text-soft);
  line-height:1.55;
  text-wrap:pretty;
  transform:translateZ(8px);
}

/* ---------- 12. História da fundadora ----------
   (Os prints do WhatsApp não têm CSS próprio: usam os cards `Feedback` 9:16
   do trilho `.rail-feedback`, que herda o visual de `.shot` da seção 9.) */
.story{
  display:grid;
  gap:clamp(2rem, 4.5vw, 3rem);
  align-items:center;
}
.story-media{ margin:0; }
/* moldura em degradê — a mesma dos cards de vídeo e de antes e depois */
.story-frame{
  position:relative;
  padding:3px;
  background:var(--grad);
  border-radius:calc(var(--r-lg) + 3px);
  box-shadow:var(--sh-3);
}
.story-stack{
  position:relative;
  display:block;
  aspect-ratio:9/16;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-2);
}
.story-slide{
  position:absolute; inset:0;
  opacity:0;
}
/* a capa é o estado de repouso: é ela que aparece sem JS, na impressão
   e para quem pediu menos movimento */
.story-slide:first-child{ opacity:1; }
.story-slide img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.story-tag{
  position:absolute; left:.75rem; bottom:.75rem;
  padding:.34rem .82rem;
  border-radius:999px;
  background:rgba(6,26,46,.72);
  color:#e8eef4;
  font-size:.685rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.story-tag-hoje{ background:var(--grad); color:#052033; }

/* A troca só começa quando a seção entra na tela: animação infinita fora do
   campo de visão é composição jogada fora. Três fotos, 4s cada. */
.story-media.is-in .story-slide{ animation:story-cross 12s var(--ease-io) infinite; }
.story-media.is-in .story-slide:nth-child(1){ animation-name:story-cross-first; }
.story-media.is-in .story-slide:nth-child(2){ animation-delay:4s; }
.story-media.is-in .story-slide:nth-child(3){ animation-delay:8s; }

@keyframes story-cross{
  0%           { opacity:0; }
  6.67%,33.33% { opacity:1; }
  40%,100%     { opacity:0; }
}
/* a capa já nasce visível — com o mesmo keyframe das outras ela piscaria
   ao entrar na tela, saindo de opacidade 1 para 0 antes de voltar */
@keyframes story-cross-first{
  0%,33.33%  { opacity:1; }
  40%,93.33% { opacity:0; }
  100%       { opacity:1; }
}

.story-dots{
  display:flex; justify-content:center; gap:.42rem;
  margin-top:1.05rem;
}
.story-dots span{
  position:relative; overflow:hidden;
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.2);
}
.story-dots span::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:var(--grad);
  opacity:0;
}
.story-dots span:first-child::after{ opacity:1; }
.story-media.is-in .story-dots span::after{ animation:story-cross 12s var(--ease-io) infinite; }
.story-media.is-in .story-dots span:nth-child(1)::after{ animation-name:story-cross-first; }
.story-media.is-in .story-dots span:nth-child(2)::after{ animation-delay:4s; }
.story-media.is-in .story-dots span:nth-child(3)::after{ animation-delay:8s; }

.story-caption{
  margin-top:.85rem;
  font-size:.845rem;
  line-height:1.5;
  color:#8fa5ba;
  text-align:center;
  text-wrap:pretty;
}

.story-text > * + *{ margin-top:1.05rem; }
.story-text p{
  color:#b9cbdb;
  font-size:1.025rem;
  line-height:1.72;
  text-wrap:pretty;
}
.story-text strong{ color:#fff; font-weight:600; }
.story-text .story-quote{
  margin:1.7rem 0;
  padding-left:1.3rem;
  border-left:2px solid var(--lime);
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(1.18rem, 2vw, 1.45rem);
  font-weight:400;
  font-variation-settings:"opsz" 40, "SOFT" 20;
  line-height:1.34;
  letter-spacing:-.015em;
  color:#fff;
  text-wrap:balance;
}
.story-text .story-welcome{
  margin-top:1.7rem;
  color:#fff;
  font-size:1.1rem;
  font-weight:600;
}
.story-text .story-sign{
  display:flex; align-items:center; gap:.75rem;
  margin-top:1.1rem;
  font-size:.885rem;
  letter-spacing:.02em;
  color:#93a9bd;
}
.story-text .story-sign::before{
  content:"";
  flex:0 0 34px; height:2px; border-radius:2px;
  background:var(--grad);
}


/* ---------- 13. Faixa CTA ---------- */
.cta-band{
  position:relative;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  text-align:center;
}
.cta-inner{ position:relative; max-width:44rem; }
.cta-inner .kicker{ justify-content:center; }
.cta-inner .display{ color:#fff; }
.cta-text{
  margin:1.35rem auto 2.3rem;
  color:#b3c5d6;
  font-size:1.06rem;
  line-height:1.62;
  max-width:44ch;
  text-wrap:pretty;
}
.cta-note{
  margin-top:1.25rem;
  font-size:.865rem;
  color:#8ea4b8;
}

/* ---------- 14. FAQ ---------- */
.faq-list{
  border-top:1px solid var(--line);
  margin-bottom:clamp(2.25rem, 4.5vw, 3.25rem);
}
.faq-item{
  border-bottom:1px solid var(--line);
  position:relative;
}
.faq-item::before{
  content:"";
  position:absolute; inset:0 -1.25rem;
  border-radius:var(--r);
  background:var(--paper-2);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
  z-index:-1;
}
.faq-item[open]::before{ opacity:1; }
.faq-item summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.35rem .25rem;
  cursor:pointer;
  list-style:none;
  font-weight:600;
  font-size:1.045rem;
  line-height:1.45;
  color:var(--ink);
  transition:color .25s var(--ease), padding-left .4s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{ flex:1; text-wrap:pretty; }
.faq-item summary::after{
  content:"";
  flex:none;
  width:27px; height:27px;
  margin-top:.1em;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:
    linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat;
  transition:transform .48s var(--ease-out), border-color .35s var(--ease), background-size .48s var(--ease-out);
}
.faq-item[open] summary::after{
  transform:rotate(180deg);
  border-color:var(--teal);
  background-size:11px 1.5px, 0 1.5px;
}
.faq-item summary:hover{ color:var(--teal); padding-left:.6rem; }
.faq-inner{
  padding:0 3rem 1.6rem .25rem;
  color:var(--text-soft);
  font-size:.99rem;
  line-height:1.68;
}
.faq-inner p + p,
.faq-inner ul + p{ margin-top:.85rem; }
.faq-inner ul{
  display:grid; gap:.5rem;
  margin-top:.8rem;
}
.faq-inner li{
  position:relative;
  padding-left:1.15rem;
}
.faq-inner li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--teal);
}
.faq-inner b{ color:var(--ink); font-weight:700; }

@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq-item::details-content{
    block-size:0;
    overflow:hidden;
    opacity:0;
    transition:block-size .45s var(--ease-out), opacity .35s var(--ease) .06s, content-visibility .45s allow-discrete;
  }
  .faq-item[open]::details-content{ block-size:auto; opacity:1; }
}

/* ---------- 15. Rodapé ---------- */
.site-footer{
  position:relative;
  background:var(--ink);
  color:#9db1c4;
  padding-block:clamp(3.25rem, 6vw, 5rem) clamp(2rem, 4vw, 2.5rem);
  font-size:.9rem;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(760px, 110%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(166,221,106,.5), rgba(62,159,208,.5), transparent);
}
.foot-top{
  position:relative;
  display:grid; gap:2rem;
  padding-bottom:2.25rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.foot-logo{
  width:auto; height:26px;
  /* o SVG entra por <img>, então currentColor não vale: inverte para branco */
  filter:brightness(0) invert(1);
}
.foot-tagline{
  margin-top:.85rem;
  font-family:"Fraunces", Georgia, serif;
  font-size:1.04rem;
  font-style:italic;
  font-variation-settings:"opsz" 30, "SOFT" 40;
  color:var(--lime-bright);
}
.foot-nav{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  font-weight:500;
}
.foot-nav a{
  position:relative;
  transition:color .25s var(--ease);
}
.foot-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background:var(--lime-bright);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.foot-nav a:hover{ color:#fff; }
.foot-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.foot-cta{
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
}
.foot-phone{
  font-weight:600; font-size:1.04rem; color:#fff;
  letter-spacing:.01em;
  transition:color .25s var(--ease);
}
.foot-phone:hover{ color:var(--lime-bright); }

.foot-disclaimer{
  position:relative;
  display:grid; gap:.5rem;
  padding-block:2rem;
  font-size:.795rem;
  line-height:1.6;
  color:#6f8399;
  max-width:70ch;
}
.foot-bottom{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  justify-content:space-between;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.795rem;
  color:#6f8399;
}

/* ---------- 16. CTA fixa (mobile) ---------- */
.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(250,248,244,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line-soft);
  transform:translateY(115%);
  transition:transform .5s var(--ease-out);
}
.sticky-cta.is-on{ transform:translateY(0); }
.sticky-cta .ico-wa{ width:19px; height:19px; fill:#052033; }
.sticky-cta[hidden]{ display:none; }

/* ---------- 17. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:clamp(1rem, 4vw, 2.5rem);
  background:rgba(6,26,46,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb-stage{
  margin:0;
  max-width:min(100%, 620px);
  max-height:100%;
  display:grid; place-items:center;
}
.lb-stage img{
  max-width:100%;
  max-height:min(84vh, 900px);
  width:auto;
  border-radius:var(--r);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:scale(.92) translateY(14px);
  transition:transform .5s var(--ease-out);
}
.lightbox.is-open .lb-stage img{ transform:scale(1) translateY(0); }
.lb-close,
.lb-nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.6rem; line-height:1;
  transition:background-color .28s var(--ease), transform .35s var(--spring);
}
.lb-close:hover,
.lb-nav:hover{ background:rgba(255,255,255,.24); transform:scale(1.09); }
.lb-close{ top:clamp(.75rem, 3vw, 1.5rem); right:clamp(.75rem, 3vw, 1.5rem); }
.lb-nav{ top:50%; margin-top:-23px; font-size:2rem; padding-bottom:.18em; }
.lb-prev{ left:clamp(.4rem, 2vw, 1.5rem); }
.lb-next{ right:clamp(.4rem, 2vw, 1.5rem); }
body.lb-lock{ overflow:hidden; }

/* =========================================================
   18. Sistema de animação
   Um único conjunto de variantes, acionado por IntersectionObserver.
   Sem JS, tudo aparece normalmente (a regra só vale com .js).
   ========================================================= */
/* Usa as propriedades independentes `translate`/`scale` em vez de `transform`:
   assim o reveal não sobrescreve o tilt 3D dos cards, que vive em `transform`. */
.js [data-anim]{ --d:0ms; }

/* sobe e aparece */
.js [data-anim="up"]{
  opacity:0;
  translate:0 26px;
  transition:opacity var(--dur-2) var(--ease-out) var(--d), translate var(--dur-2) var(--ease-out) var(--d);
}
/* sobe com escala — usado no hero */
.js [data-anim="rise"]{
  opacity:0;
  translate:0 34px;
  scale:.965;
  transition:opacity var(--dur-3) var(--ease-out) var(--d),
             translate var(--dur-3) var(--ease-out) var(--d),
             scale var(--dur-3) var(--ease-out) var(--d);
}
.js [data-anim="up"].is-in,
.js [data-anim="rise"].is-in{ opacity:1; translate:none; scale:1; }

/* filete do kicker que se estica + texto que aparece */
.js [data-anim="line"]{
  opacity:0;
  transition:opacity var(--dur-1) var(--ease) var(--d);
}
.js [data-anim="line"]::before{
  transform:scaleX(0);
  transition:transform var(--dur-2) var(--ease-out) calc(var(--d) + 90ms);
}
.js [data-anim="line"].is-in{ opacity:1; }
.js [data-anim="line"].is-in::before{ transform:scaleX(1); }

/* filhos em cascata */
.js [data-anim="stagger"] > *{
  opacity:0;
  translate:0 30px;
  transition:opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.js [data-anim="stagger"].is-in > *{ opacity:1; translate:none; }

/* palavras dos títulos, com máscara */
.js .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.16em;
  margin-bottom:-.16em;
  padding-right:.06em;
  margin-right:-.06em;
}
.js .w > i{
  display:inline-block;
  font-style:inherit;
  transform:translate3d(0,110%,0) rotate(2.5deg);
  opacity:0;
  transition:transform .92s var(--ease-out), opacity .55s var(--ease);
  transition-delay:calc(var(--wi,0) * 42ms + var(--d));
}
.js [data-anim="words"].is-in .w > i{ transform:none; opacity:1; }

/* potes do hero: cada um entra em cena na sua vez, vindo do seu lado do palco.
   Aqui a entrada é `transform` (e não `translate`) de propósito: `translate`
   está reservado para a flutuação contínua, então as duas convivem no
   mesmo elemento. O parallax, por sua vez, mora no palco, um nível acima. */
.js .hero-bottles .bottle{
  opacity:0;
  transform:translate(var(--fx,0), var(--fy,14%)) rotate(var(--fr,0deg)) scale(var(--fs,.9));
  /* o filtro fica fora do atraso de entrada: ele é do hover, não da chegada */
  transition:opacity .55s var(--ease-out) var(--bd),
             transform .95s var(--spring) var(--bd),
             filter .45s var(--ease);
}
.js .hero-art.is-in .bottle{ opacity:1; transform:none; }

/* o Black sobe do chão, no centro; os outros deslizam de fora para dentro */
.js .bottle-black      { --fy:15%; --fs:.88; }
.js .bottle-equilibrium{ --fx:-40%; --fy:11%; --fr:-7deg; }
.js .bottle-plus       { --fx:36%;  --fy:10%; --fr:6deg; }
.js .bottle-men        { --fx:54%;  --fy:8%;  --fr:9deg; }

/* ---------- 19. Breakpoints ---------- */

/* ≥ 480px */
@media (min-width:30em){
  .trust{ grid-template-columns:repeat(3,1fr); }
  .trust li{
    flex-direction:column; justify-content:center;
    gap:.15rem;
    padding:1.4rem .7rem;
    text-align:center;
  }
  .trust-ico{ margin-bottom:.45rem; }
  .trust b{ font-size:1rem; }
  .trust span:last-child{ margin-left:0; }
  .cta-row .btn{ flex:0 1 auto; }
  .prod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ≥ 640px */
@media (min-width:40em){
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .ing-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .prod-body{ padding-inline:1.15rem; }
  .prod .btn{ padding-inline:.65rem; font-size:.9rem; }
  .rail-video > li{ width:min(42vw, 290px); }
  .rail-res > li,
  .rail-feedback > li{ width:min(36vw, 250px); }
  .foot-top{ grid-template-columns:1fr auto; align-items:start; }
  .foot-nav{ grid-column:1; }
  .foot-cta{ grid-row:1 / span 2; grid-column:2; align-items:flex-end; text-align:right; }
}

/* ≥ 900px */
@media (min-width:56.25em){
  html{ scroll-padding-top:96px; }
  .header-inner{ min-height:78px; }
  .brand-logo{ height:25px; }
  .nav-desktop{ display:flex; }
  .nav-cta{ margin-left:0; }

  .hero{ padding-top:clamp(3rem, 4vw, 5.25rem); }
  .hero-grid{
    grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(2rem, 4vw, 3.5rem);
  }
  .hero-art{ order:2; min-height:480px; }

  .pain-grid{ grid-template-columns:repeat(4,1fr); gap:1.15rem; }
  .pain{ flex-direction:column; gap:1rem; padding:1.85rem 1.5rem; }
  .pain-num{ font-size:2rem; }

  /* Cinco cards em uma linha só. Como a coluna fica estreita, o miolo encolhe
     junto: tipografia e respiros acompanham a largura entre 900px e 1180px. */
  .prod-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .prod{ border-radius:clamp(22px, 2.4vw, 34px); }
  .prod-shot{ padding:1.75rem .75rem .95rem; min-height:clamp(158px, 17vw, 205px); }
  .prod-shot img{ height:clamp(128px, 14.6vw, 175px); }
  .prod-halo{ width:158px; height:158px; }
  .prod-body{ padding:0 clamp(.9rem, 1.6vw - .05rem, 1.2rem) clamp(1.1rem, 1.7vw + .1rem, 1.4rem); }
  .prod-tag{ font-size:clamp(.585rem, .43vw + .19rem, .655rem); letter-spacing:.1em; }
  .prod-name{ font-size:clamp(1.14rem, 1.7vw + .16rem, 1.44rem); }
  .prod-desc{ font-size:clamp(.805rem, .43vw + .41rem, .875rem); }
  .meter{ margin:1rem 0 1.1rem; }
  .meter-label{ font-size:clamp(.605rem, .34vw + .29rem, .66rem); letter-spacing:.1em; }
  .prod-list{ gap:.5rem; margin-bottom:1.2rem; }
  .prod-list li{ font-size:clamp(.785rem, .43vw + .39rem, .855rem); padding-left:1.1rem; }
  .prod-list li::before{ width:5px; height:5px; }
  .prod .btn{ min-height:46px; padding-inline:.5rem; font-size:clamp(.815rem, .43vw + .42rem, .885rem); }
  .prod-flag{ top:.75rem; right:.75rem; padding:.3rem .62rem; font-size:.58rem; letter-spacing:.08em; }

  .ing-grid{ grid-template-columns:repeat(5,1fr); }
  .ing{ padding:1.6rem 1.3rem; }
  .ing h3{ font-size:1.16rem; }
  .ing p{ font-size:.895rem; }

  /* Fotos à esquerda, história ao lado. Centralizado no eixo vertical porque
     a coluna de texto é bem mais alta que o retrato. */
  .story{ grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:clamp(2.5rem, 4.5vw, 4rem); }
  .story-text{ max-width:58ch; }

  /* trilhos viram grades centradas no desktop */
  .rail{
    justify-content:center;
    padding-inline:var(--gut);
    overflow-x:visible;
    flex-wrap:wrap;
  }
  .rail-video > li{ width:280px; }
  .rail-res > li{ width:236px; }
  .rail-feedback > li{ width:260px; }

  .faq-item summary{ padding-block:1.55rem; font-size:1.1rem; }
}

/* ≥ 1120px */
@media (min-width:70em){
  .rail-res > li{ width:250px; }
  .rail-feedback > li{ width:272px; }
}

/* dispositivos sem ponteiro fino: nada de tilt nem holofote.
   O grão sai junto — um overlay fixo com mix-blend-mode custa caro na rolagem. */
@media (hover:none),(pointer:coarse){
  .prod,.pain,.ing{ transform:translateY(var(--ty,0px)); }
  .prod::after,.pain::after,.ing::after,[data-spotlight]::after{ display:none; }
  .grain{ display:none; }
}

/* ---------- 20. Preferências do usuário ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-anim]{ opacity:1 !important; translate:none !important; scale:1 !important; }
  .js [data-anim="stagger"] > *{ opacity:1 !important; translate:none !important; }
  .js .w > i{ opacity:1 !important; transform:none !important; }
  .js [data-anim="line"]::before{ transform:scaleX(1) !important; }
  .js .hero-bottles .bottle{ opacity:1 !important; transform:none !important; translate:none !important; }
  .ing-mark svg path,.ing-mark svg circle{ stroke-dashoffset:0 !important; }
  .meter-fill{ transform:scaleX(1) !important; }
  /* sem troca de fotos: fica só a capa, que é o estado de repouso da pilha */
  .story-slide{ opacity:0 !important; }
  .story-slide:first-child{ opacity:1 !important; }
  .story-dots span::after{ opacity:0 !important; }
  .story-dots span:first-child::after{ opacity:1 !important; }
  .grain{ display:none; }
}

@media print{
  .site-header,.sticky-cta,.lightbox,.rail-wrap,.grain,.scroll-progress,.aurora,.deco,.hero-aura{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; }
  .section-ink,.cta-band,.site-footer{ background:#fff !important; color:#000 !important; }
  .prod-name,.cta-inner .display,.sec-head-light .display{ color:#000 !important; }
  .js [data-anim],.js [data-anim="stagger"] > *{ opacity:1 !important; translate:none !important; scale:1 !important; }
  .js .w > i{ opacity:1 !important; transform:none !important; }
  .js .hero-bottles .bottle{ opacity:1 !important; transform:none !important; translate:none !important; }
}