/* HoneyRock — camada de movimento (motion.css)
   Carregada depois do CSS de cada página (style.css + gold-buttons.css). Não muda
   cores nem tipografia do "Ruby Forge": só adiciona profundidade (parallax),
   entradas no scroll, fundo ambiente que muda por seção, transições curvas,
   seção de ingredientes "presa" e a pílula de CTA.
   Tudo que se move para com prefers-reduced-motion (bloco no fim).
*/

/* ===== FUNDO AMBIENTE (muda de cor conforme a seção, estilo Gladly) =====
   As seções claras ficam transparentes e deixam ver este fundo fixo. As
   faixas escuras continuam opacas e "passam por cima". */
/* overflow-x:hidden no body (style.css) transforma o body em contêiner de
   rolagem e o menu sticky deixa de grudar; clip corta a sobra sem esse efeito */
body { overflow-x: clip; }
/* a cor de fundo fica no html e o body fica transparente: quando o html tem
   fundo próprio (upsells), o fundo do body é pintado POR CIMA das camadas
   z-index:-1 (fundo ambiente, chuva de gummies) e as esconde */
html { background: #FAF5F2; }
body { background: transparent; }
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-color: #FAF5F2; transition: background-color 1.4s ease;
}
.ambient .blob {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
  transition: transform 1.8s cubic-bezier(.4,0,.2,1), background-color 1.6s ease, opacity 1.6s ease;
  will-change: transform;
}
.blob--1 { top: -35vmax; left: -25vmax; }
.blob--2 { top: -20vmax; right: -30vmax; }
.blob--3 { bottom: -40vmax; left: 10vw; }
/* textura de grão por cima das manchas */
.ambient::after {
  content: ""; position: absolute; inset: 0; opacity: .35; 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 values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* oferta: rubi + dourado quente */
.ambient[data-mood="offer"]          { background-color: #FBF2EC; }
.ambient[data-mood="offer"] .blob--1 { background-color: rgba(232,35,44,.20); transform: translate3d(0,0,0); }
.ambient[data-mood="offer"] .blob--2 { background-color: rgba(242,176,30,.30); transform: translate3d(0,10vh,0); }
.ambient[data-mood="offer"] .blob--3 { background-color: rgba(200,20,30,.12); transform: translate3d(0,0,0); }
/* bônus: dourado */
.ambient[data-mood="gift"]           { background-color: #FBF4E4; }
.ambient[data-mood="gift"] .blob--1  { background-color: rgba(242,176,30,.34); transform: translate3d(20vw,25vh,0); }
.ambient[data-mood="gift"] .blob--2  { background-color: rgba(231,182,76,.28); transform: translate3d(-10vw,40vh,0); }
.ambient[data-mood="gift"] .blob--3  { background-color: rgba(232,35,44,.10); transform: translate3d(30vw,-10vh,0); }
/* ciência: neutro frio, quase branco */
.ambient[data-mood="science"]          { background-color: #F7F4F3; }
.ambient[data-mood="science"] .blob--1 { background-color: rgba(110,11,18,.10); transform: translate3d(50vw,30vh,0); }
.ambient[data-mood="science"] .blob--2 { background-color: rgba(160,150,150,.20); transform: translate3d(-40vw,20vh,0); }
.ambient[data-mood="science"] .blob--3 { background-color: rgba(231,182,76,.14); transform: translate3d(-20vw,0,0); }
/* ingredientes: terroso (raízes, beterraba) */
.ambient[data-mood="earth"]          { background-color: #F6F1E7; }
.ambient[data-mood="earth"] .blob--1 { background-color: rgba(140,110,60,.22); transform: translate3d(10vw,40vh,0); }
.ambient[data-mood="earth"] .blob--2 { background-color: rgba(122,20,60,.16); transform: translate3d(-20vw,50vh,0); }
.ambient[data-mood="earth"] .blob--3 { background-color: rgba(120,140,70,.16); transform: translate3d(40vw,-20vh,0); }
/* FAQ / rótulo: calmo */
.ambient[data-mood="calm"]           { background-color: #FAF6F4; }
.ambient[data-mood="calm"] .blob--1  { background-color: rgba(232,35,44,.08); transform: translate3d(60vw,50vh,0); }
.ambient[data-mood="calm"] .blob--2  { background-color: rgba(231,182,76,.18); transform: translate3d(-50vw,60vh,0); }
.ambient[data-mood="calm"] .blob--3  { background-color: rgba(231,182,76,.10); transform: translate3d(0,0,0); }

.packages-section, .bonus-section, .science-section, .ingredients-section,
.benefits-section, .faq-section, .label-section, .references-section {
  background: transparent !important; border-top: 0 !important;
}
/* vidro fosco nas superfícies que antes eram creme sólido */
.faq-item { background: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(234,221,216,.8); }
.faq-item.open { background: rgba(255,255,255,.85); }
.science-highlight { background: rgba(255,255,255,.6); }
.ingredient-img-wrap { background: rgba(255,255,255,.5); }

/* colmeia nas bordas das seções claras — textura, nunca atrás do texto */
.has-shape::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--honeycomb); background-size: 56px 100px; opacity: .55;
  -webkit-mask-image: radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 70%), radial-gradient(50% 60% at 0% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 70%), radial-gradient(50% 60% at 0% 100%, #000 0%, transparent 70%);
}

/* ===== MENU: vira pílula de vidro ao rolar ===== */
.navbar { transition: top .35s ease, margin .35s ease, border-radius .35s ease, background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
.navbar.nav-float {
  top: 10px; margin: 0 16px; border-radius: 999px;
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(200,20,30,.22);
  box-shadow: 0 12px 34px rgba(23,12,12,.16);
}
.navbar.nav-float .nav-links.open { top: 74px; border-radius: 18px; }

/* ===== HERO · camadas de profundidade ===== */
.hero::before { display: none; } /* a colmeia agora é a camada .fx-comb */
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-layer { position: absolute; will-change: transform; }
.fx-layer > i { display: block; width: 100%; height: 100%; }

.fx-comb {
  inset: -140px -40px;
  background: var(--honeycomb); background-size: 56px 100px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%);
}

.fx-glow { width: 62vw; height: 62vw; max-width: 860px; max-height: 860px; }
.fx-glow > i { border-radius: 50%; animation: glow-breathe 10s ease-in-out infinite; }
.fx-glow--ruby { top: -28%; right: -14vw; }
.fx-glow--ruby > i { background: radial-gradient(closest-side, rgba(232,35,44,.42), rgba(232,35,44,0)); }
.fx-glow--gold { bottom: -42%; left: -18vw; }
.fx-glow--gold > i { background: radial-gradient(closest-side, rgba(231,182,76,.20), rgba(231,182,76,0)); animation-delay: -5s; }
@keyframes glow-breathe {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .85; }
  50%      { transform: scale(1.12) translate3d(-3%, 4%, 0); opacity: 1; }
}

/* contornos de hexágono dourados, cada um numa velocidade */
.fx-hex > i { animation: hex-spin 70s linear infinite; }
.fx-hex svg { width: 100%; height: 100%; overflow: visible; }
.fx-hex polygon { fill: none; stroke: var(--gold); stroke-width: .8; vector-effect: non-scaling-stroke; }
.fx-hex--1 { width: 300px; height: 345px; top: 6%; left: -70px; opacity: .32; }
.fx-hex--2 { width: 140px; height: 161px; top: 58%; right: 5%; opacity: .45; }
.fx-hex--2 > i { animation-duration: 45s; animation-direction: reverse; }
.fx-hex--3 { width: 90px; height: 104px; top: 14%; right: 30%; opacity: .28; }
.fx-hex--3 > i { animation-duration: 55s; }
@keyframes hex-spin { to { transform: rotate(360deg); } }

/* gotas de mel subindo devagar */
.fx-drops span {
  position: absolute; bottom: -20px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE7A0, var(--gold) 55%, rgba(231,182,76,0) 75%);
  box-shadow: 0 0 12px rgba(231,182,76,.55);
  opacity: 0;
  animation: drop-rise var(--t) linear infinite;
  animation-delay: calc(var(--w) * -1);
}
@keyframes drop-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .45; }
  100% { transform: translate3d(18px, -105vh, 0); opacity: 0; }
}

/* gummies caindo e girando. Cada span é um "trilho" com a altura do hero:
   translateY(100%) leva a gummy de cima até embaixo, seja qual for a altura. */
.fx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx-gummies span {
  position: absolute; top: -12%; left: var(--x); width: var(--s); height: 112%;
  opacity: 0; animation: gummy-fall var(--t) linear infinite; animation-delay: calc(var(--w) * -1);
}
.fx-gummies svg {
  display: block; width: var(--s); height: var(--s);
  /* halo dourado separa a gummy rubi do fundo vinho */
  filter: blur(var(--b)) drop-shadow(0 0 10px rgba(255,200,120,.45)) drop-shadow(0 10px 12px rgba(0,0,0,.5));
  animation: gummy-spin var(--t) linear infinite; animation-delay: calc(var(--w) * -1);
}
@keyframes gummy-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--o); }
  85%  { opacity: var(--o); }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}
@keyframes gummy-spin {
  0%   { transform: translateX(0) rotate(0deg); }
  50%  { transform: translateX(14px) rotate(calc(var(--r) / 2)); }
  100% { transform: translateX(0) rotate(var(--r)); }
}

/* garrafa flutuando com sombra que respira */
.hero-stage { position: relative; display: flex; justify-content: center; }
.hero-float { animation: bottle-float 6s ease-in-out infinite; position: relative; z-index: 1; }
.hero-floor {
  position: absolute; left: 22%; right: 22%; bottom: -4px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0));
  animation: floor-breathe 6s ease-in-out infinite;
}
@keyframes bottle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floor-breathe { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .65; } }

/* ===== BRILHO PASSANDO NOS CTAs ===== */
.hero-cta-btn, .faq-cta-btn, .cta-gold { position: relative; }
.shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.shine::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 34%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-20deg);
  animation: cta-shine 4s ease-in-out infinite;
}
@keyframes cta-shine {
  0%       { transform: translateX(-160%) skewX(-20deg); }
  30%, 100% { transform: translateX(330%) skewX(-20deg); }
}

/* ===== HEXÁGONOS GRANDES NO FUNDO DAS SEÇÕES CLARAS ===== */
/* clip (não hidden): hidden vira contêiner de rolagem e quebra o sticky dos ingredientes */
.has-shape { position: relative; overflow: clip; }
.has-shape > .container { position: relative; z-index: 1; }
.bg-shape {
  position: absolute; z-index: 0; pointer-events: none; will-change: transform;
  width: min(640px, 90vw); aspect-ratio: 100 / 115;
}
.bg-shape > i {
  display: block; width: 100%; height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, rgba(232,35,44,.08) 0%, rgba(231,182,76,.16) 55%, rgba(231,182,76,0) 100%);
  animation: hex-spin 90s linear infinite;
}
.bg-shape--a { top: -12%; right: -14%; }
.bg-shape--b { top: 18%; left: -18%; }
.bg-shape--b > i { animation-direction: reverse; background: linear-gradient(200deg, rgba(231,182,76,.16) 0%, rgba(232,35,44,.07) 60%, rgba(232,35,44,0) 100%); }
.bg-shape--c { bottom: -20%; right: -10%; width: min(520px, 80vw); }

/* ===== TRANSIÇÕES CURVAS ENTRE FAIXAS =====
   O recorte é uma máscara (a seção clara de trás é transparente, então não
   dá para "pintar" a curva); o SVG só desenha a borda dourada. */
.curved-top, .curved-bottom { --cv: 44px; position: relative; overflow: hidden; }
.curved-top    { --mt: radial-gradient(75% var(--cv) at 50% 0,    transparent calc(100% - 1px), #000 100%); }
.curved-bottom { --mb: radial-gradient(75% var(--cv) at 50% 100%, transparent calc(100% - 1px), #000 100%); }
.curved-top:not(.curved-bottom) { -webkit-mask-image: var(--mt); mask-image: var(--mt); }
.curved-bottom:not(.curved-top) { -webkit-mask-image: var(--mb); mask-image: var(--mb); }
.curved-top.curved-bottom {
  -webkit-mask-image: var(--mt), var(--mb); mask-image: var(--mt), var(--mb);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.curve {
  position: absolute; left: 0; width: 100%; height: calc(var(--cv) * 48 / 44);
  display: block; pointer-events: none; z-index: 2;
}
.curve--top { top: 0; }
.curve--bottom { bottom: 0; transform: scaleY(-1); }
.curve .edge { fill: none; stroke: var(--gold); stroke-width: 3; vector-effect: non-scaling-stroke; }

.guarantee-section.curved-top,
.guarantee-section.curved-bottom { border-top: 0 !important; border-bottom: 0 !important; }
.guarantee-section.curved-top    { padding-top: 100px !important; }
.guarantee-section.curved-bottom { padding-bottom: 100px !important; }
.claim-strip.curved-top { padding-top: 88px; }
.claim-strip.curved-top::before { display: none; } /* a borda da curva faz o papel da linha dourada */
.science-band { position: relative; overflow: hidden; }
.science-band > .container { position: relative; z-index: 1; }
.science-band.curved-bottom { padding-bottom: 100px; }

/* garantia: colmeia + raios dourados girando atrás do selo */
.guarantee-section > div { position: relative; z-index: 1; }
.guarantee-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--honeycomb); background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(45% 80% at 85% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(45% 80% at 85% 50%, #000 0%, transparent 75%);
}
.guarantee-section > div > div:first-child { position: relative; }
.guarantee-section > div > div:first-child::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(231,182,76,.22) 0deg 6deg, rgba(231,182,76,0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: hex-spin 50s linear infinite;
}

/* pacotes: holofote girando atrás do card de 6 potes */
.packages-grid { position: relative; }
.packages-grid::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 45%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(242,176,30,.20) 0deg 5deg, rgba(242,176,30,0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  animation: hex-spin 60s linear infinite;
}

/* foto da faixa de ciência, bem apagada, com parallax */
.band-photo {
  position: absolute; inset: -30% 0; z-index: 0; will-change: transform;
  background: url(../images/honeyrock-science-1.jpg) center 30% / cover no-repeat;
  opacity: .16; filter: grayscale(.4) contrast(1.1);
}
.science-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgba(232,35,44,.28) 0%, rgba(0,0,0,0) 62%),
              linear-gradient(180deg, rgba(28,10,11,.35), rgba(28,10,11,.85));
}

/* fotos do artigo: parallax interno + card de vidro com o dado do estudo */
.science-media { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 12px 30px rgba(23,12,12,.18); }
.science-media img { box-shadow: none; scale: 1.2; will-change: transform; }
.glass-stat {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 12px;
  color: #fff; background: rgba(26,8,10,.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.22);
}
.glass-stat b { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; color: #FFE27A; }
.glass-stat span { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.88); }

/* ===== PRODUTO: faixa escura de "revelação" com órbita de ingredientes ===== */
.product-section.is-dark {
  position: relative; overflow: hidden; padding: 150px 0;
  background:
    radial-gradient(45% 55% at 28% 55%, rgba(232,35,44,.42) 0%, rgba(232,35,44,0) 70%),
    radial-gradient(40% 50% at 85% 20%, rgba(231,182,76,.14) 0%, rgba(231,182,76,0) 70%),
    linear-gradient(180deg, #1A0507 0%, var(--onyx) 100%);
  /* bordas se dissolvem no fundo ambiente, sem corte seco */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.product-section.is-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--honeycomb); background-size: 56px 100px; opacity: .8;
  -webkit-mask-image: radial-gradient(50% 60% at 28% 55%, #000 0%, transparent 80%);
          mask-image: radial-gradient(50% 60% at 28% 55%, #000 0%, transparent 80%);
}
.product-section.is-dark > .container { position: relative; z-index: 1; }
.is-dark .product-eyebrow { color: var(--gold); font-family: 'Oswald', sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; }
.is-dark .product-title { color: var(--ivory); font-size: clamp(48px, 8vw, 104px); }
.is-dark .product-title .accent {
  background: linear-gradient(180deg, #FF6A6A 0%, var(--red-bright) 50%, #B3121B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-dark .product-tagline { color: rgba(247,238,234,.78); }
.is-dark .product-copy p { color: rgba(247,238,234,.82); }
.is-dark .product-copy b { color: #fff; }

.orbit { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; }
.orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__lines line {
  stroke: var(--gold); stroke-opacity: .55; stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 7; animation: dash-flow 1.6s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: 20; } }
.orbit__ring {
  position: absolute; left: 50%; top: 52%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px dashed rgba(231,182,76,.35);
  box-shadow: inset 0 0 80px rgba(232,35,44,.25);
}
/* centrada por inset (o transform é do parallax) */
.orbit .orbit__bottle {
  position: absolute; inset: 12% 24% 8%; width: 52%; height: 80%; max-height: none; object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(232,35,44,.5)) drop-shadow(0 24px 30px rgba(0,0,0,.6));
}
.orbit__chip { position: absolute; z-index: 2; width: 96px; margin: -48px 0 0 -48px; }
.orbit__float { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: chip-float 5s ease-in-out infinite; animation-delay: var(--f); }
.orbit__chip img {
  width: 76px; height: 76px; max-height: none; object-fit: cover; border-radius: 16px; filter: none;
  border: 2px solid var(--gold); box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 5px rgba(231,182,76,.12);
}
.orbit__chip figcaption {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ivory); background: rgba(26,8,10,.7); border: 1px solid rgba(231,182,76,.4);
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ===== INGREDIENTES: seção "presa" com palavras gigantes (desktop) ===== */
.ing-story { display: none; }
@media (min-width: 992px) {
  .ingredients-grid { display: none; }
  .ing-story { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; margin-top: 30px; }
  .ing-story__stage {
    position: sticky; top: 96px; align-self: start;
    height: calc(100vh - 120px); max-height: 760px;
    display: flex; flex-direction: column; justify-content: center; gap: 22px;
  }
  .ing-story__media {
    position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
    box-shadow: 0 24px 50px rgba(23,12,12,.24); border: 2px solid rgba(255,255,255,.7);
  }
  .ing-story__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.12); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .ing-story__media img.is-on { opacity: 1; transform: none; }
  .ing-story__count {
    position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 5px 12px; border-radius: 20px;
    font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.5px; color: rgba(255,255,255,.8);
    background: rgba(26,8,10,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .ing-story__count b { color: #FFE27A; }
  .ing-story__copy { position: relative; max-width: 440px; min-height: 150px; }
  .ing-story__item {
    position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none;
  }
  .ing-story__item.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
  .ing-story__latin { font-size: 13px; font-style: italic; color: var(--muted); }
  .ing-story__role { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--gold-ink); line-height: 1.2; margin: 2px 0 8px; }
  .ing-story__desc { font-size: 16px; line-height: 1.65; color: #43454f; }

  .ing-story__words { list-style: none; padding: 4vh 0 10vh; }
  .ing-story__words li {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
    padding: 17vh 0; text-align: right;
  }
  .ing-story__words .n { font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px; color: rgba(23,12,12,.3); transition: color .5s; }
  .ing-story__words .w {
    position: relative; font-family: var(--font-display); text-transform: uppercase;
    font-size: clamp(56px, 6.6vw, 104px); line-height: 1; letter-spacing: .5px;
    color: rgba(23,12,12,.12); transition: color .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    transform: scale(.94); transform-origin: right center;
  }
  .ing-story__words .w::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg, var(--red-bright), var(--gold));
    transform: scaleX(0); transform-origin: right; transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .ing-story__words li.is-on .w { color: var(--ink); transform: none; }
  .ing-story__words li.is-on .w::after { transform: scaleX(1); }
  .ing-story__words li.is-on .n { color: var(--gold-ink); }
}

/* ===== MARQUEE DE CONFIANÇA (faixa de frete grátis) ===== */
.shipping-strip { padding-bottom: 0; overflow: hidden; }
.ticker {
  margin-top: 22px; padding: 10px 0;
  background: rgba(26,5,7,.28); border-top: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__row { display: flex; flex: none; }
.ticker__row span {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 1.6px; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.ticker__row span::after { content: "★"; color: var(--amber); font-size: 12px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ===== ENTRADAS NO SCROLL (classes postas pelo motion.js) ===== */
.rv {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1), filter .9s ease;
  transition-delay: var(--d, 0s);
}
.rv.rv-pop  { transform: translate3d(0, 34px, 0) scale(.93); }
.rv.rv-seal { transform: rotate(-24deg) scale(.7); }
.rv.rv-blur { filter: blur(12px); transform: translate3d(0, 16px, 0); }
.rv.in { opacity: 1; transform: none; filter: none; }
.ingredient-card .ingredient-img-wrap img { transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.ingredient-card.rv:not(.in) .ingredient-img-wrap img { transform: scale(1.18); }

/* card de 6 potes "respira" para puxar o olho */
.pkg-card.featured { animation: featured-glow 3.2s ease-in-out infinite; }
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 20px 44px rgba(200,20,30,.26); }
  50%      { box-shadow: 0 20px 44px rgba(200,20,30,.26), 0 0 0 7px rgba(232,35,44,.12); }
}

[data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== PÍLULA DE CTA FIXA =====
   Desktop: pílula centralizada no rodapé da tela (como a da Gladly).
   Mobile: barra de largura total. */
.sticky-cta {
  position: fixed; z-index: 350; display: flex; align-items: center; gap: 12px;
  left: 50%; bottom: 22px; padding: 6px 6px 6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(42,13,16,.92) 0%, rgba(18,6,7,.92) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 2px solid var(--gold);
  transform: translate(-50%, 160%); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.sticky-cta.show { transform: translate(-50%, 0); box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 6px rgba(231,182,76,.16); }
.sticky-cta img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.sticky-cta__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sticky-cta__txt b { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; color: var(--ivory); letter-spacing: .3px; white-space: nowrap; }
.sticky-cta__txt span { font-size: 12px; font-weight: 600; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .cta-gold vem do gold-buttons.css com width:100% e padding de upsell */
.sticky-cta .sticky-cta__btn {
  flex: none; width: auto; margin: 0 0 0 8px; white-space: nowrap; border-radius: 999px !important;
  font-size: 16px !important; padding: 12px 24px !important;
}

@media (max-width: 767px) {
  body { padding-bottom: 76px; }
  .sticky-cta {
    left: 0; right: 0; bottom: 0; gap: 10px; padding: 9px 12px; border-radius: 0;
    border-width: 2px 0 0; transform: translateY(115%);
  }
  .sticky-cta.show { transform: none; box-shadow: 0 -10px 26px rgba(0,0,0,.35); }
  .sticky-cta img { width: 52px; height: 52px; }
  .sticky-cta__txt { flex: 1; }
  .sticky-cta__txt b { font-size: 15px; }
  .sticky-cta__txt span { font-size: 11.5px; }
  .sticky-cta .sticky-cta__btn { border-radius: 6px !important; padding: 13px 20px !important; margin: 0; }

  .navbar.nav-float { margin: 0 10px; }
  .curved-top, .curved-bottom { --cv: 22px; }
  .guarantee-section.curved-top    { padding-top: 70px !important; }
  .guarantee-section.curved-bottom { padding-bottom: 70px !important; }
  .claim-strip.curved-top { padding-top: 62px; }
  .science-band.curved-bottom { padding-bottom: 72px; }
  .fx-hex--1 { width: 200px; height: 230px; left: -90px; }
  .fx-hex--3 { display: none; }
  .fx-gummies span:nth-child(n+6) { display: none; }
  .fx-glow { width: 110vw; height: 110vw; }
  .product-section.is-dark { padding: 110px 0; }
  .orbit { max-width: 340px; }
  .orbit__chip { width: 72px; margin: -36px 0 0 -36px; }
  .orbit__chip img { width: 56px; height: 56px; border-radius: 12px; }
  .orbit__chip figcaption { font-size: 10px; padding: 1px 7px; }
  .glass-stat b { font-size: 28px; }
  .packages-grid::before { width: 600px; height: 600px; margin: -300px 0 0 -300px; top: 20%; }
}

/* ===== DEMAIS PÁGINAS DO FUNIL (dtc, upsells, obrigado, institucionais) ===== */
/* chuva de gummies numa camada fixa atrás da página: aparece nas margens e
   some atrás dos cards, sem disputar o clique com a oferta */
.mx-rain { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mx-rain .fx-gummies svg { filter: blur(var(--b)) drop-shadow(0 0 8px rgba(255,200,120,.35)) drop-shadow(0 10px 14px rgba(23,12,12,.28)); }

/* upsells: o wrapper tinha fundo branco inline */
.mx-shell { background: transparent !important; }
.upcard .uc-cta { position: relative; }
.upcard { animation: featured-glow 3.2s ease-in-out infinite; }

/* institucionais: o topo em degradê branco escondia o fundo ambiente */
.page-hero { background: transparent !important; }

/* ===== MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {
  .fx-glow > i, .fx-hex > i, .fx-drops span, .hero-float, .hero-floor,
  .shine::before, .bg-shape > i, .pkg-card.featured, .ticker__track,
  .packages-grid::before, .guarantee-section > div > div:first-child::before,
  .orbit__float, .orbit__lines line { animation: none; }
  .fx-drops, .fx-gummies { display: none; }
  .ticker__track { width: auto; justify-content: center; }
  .ticker__row + .ticker__row { display: none; }
  .ticker__row { flex-wrap: wrap; justify-content: center; }
  .sticky-cta, .ambient, .ambient .blob, .navbar { transition: none; }
}