/* Pré-venda Pharmapele
   Medidas em unidades da prancheta (1179 de largura).
   --u = 1 unidade da prancheta convertida para a tela. */

@font-face { font-family: Galano; src: url(../fonts/galano-light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Galano; src: url(../fonts/galano-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Galano; src: url(../fonts/galano-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Galano; src: url(../fonts/galano-black.woff2) format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --w: min(100vw, 480px);
  --u: calc(var(--w) / 1179);
  --bg: #0f0f10;
  --gold: #fbc50e;
  --gold-hi: #ffd84a;
  --blue: #0a3fe0;
  --blue-hi: #2f6dff;
  --accent: #fbc50e;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #070707;
  color: #fff;
  font-family: Galano, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lp {
  position: relative;
  width: var(--w);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  box-shadow: 0 0 100px rgba(0, 0, 0, .8);
}

/* ---------- Fundo sobreposto ---------- */
.bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Cenário do topo. Sem imagem, o CSS desenha raios dourados e um chão de pedra. */
.bg-scene {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 157);
  height: calc(var(--u) * 1250);
  background-color: var(--bg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 70% 22% at 50% 66%, rgba(0, 0, 0, .75), transparent 70%),
    radial-gradient(ellipse 120% 30% at 50% 70%, #2a2622 0%, #171513 45%, transparent 75%),
    linear-gradient(162deg, transparent 18%, color-mix(in srgb, var(--accent) 22%, transparent) 26%, transparent 34%),
    linear-gradient(200deg, transparent 22%, color-mix(in srgb, var(--accent) 16%, transparent) 30%, transparent 38%),
    linear-gradient(172deg, transparent 40%, color-mix(in srgb, var(--accent) 10%, transparent) 46%, transparent 52%),
    radial-gradient(ellipse 60% 40% at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.bg-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(calc(var(--u) * 900) calc(var(--u) * 500) at 50% calc(var(--u) * 2150), rgba(251, 197, 14, .07), transparent 70%),
    radial-gradient(calc(var(--u) * 900) calc(var(--u) * 600) at 50% calc(var(--u) * 3000), rgba(10, 63, 224, .16), transparent 70%);
}
.bg-noise {
  position: absolute; inset: 0; opacity: .06; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Topo vermelho com contagem ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: calc(var(--u) * 157);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 50) 0 calc(var(--u) * 70);
  background:
    linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .08) 70%, transparent 85%),
    linear-gradient(180deg, #e80b00, #c10000);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 30) rgba(0, 0, 0, .5);
}
.topbar-label {
  font-weight: 900;
  font-size: calc(var(--u) * 36);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.countdown { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.countdown i { font-style: normal; font-weight: 900; font-size: calc(var(--u) * 36); opacity: .9; margin-top: calc(var(--u) * -20); }
.cd-box {
  width: calc(var(--u) * 132);
  height: calc(var(--u) * 116);
  border-radius: calc(var(--u) * 22);
  background: linear-gradient(180deg, #8f0000, #5a0000);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, .35), 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 6);
}
.cd-box small {
  font-size: calc(var(--u) * 17);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.cd-box b {
  font-weight: 900;
  font-size: calc(var(--u) * 56);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-box b.tick { animation: tick .35s ease; }
@keyframes tick { from { transform: translateY(-12%); opacity: .4; } }

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; align-items: center; }

.pill {
  margin-top: calc(var(--u) * 30);
  height: calc(var(--u) * 90);
  padding: 0 calc(var(--u) * 50);
  border-radius: 999px;
  display: flex; align-items: center; gap: calc(var(--u) * 26);
  background: linear-gradient(180deg, #2a64ff, #0b3fe6);
  border: 1px solid rgba(140, 175, 255, .45);
  box-shadow: 0 0 calc(var(--u) * 50) rgba(30, 90, 255, .55);
  font-size: calc(var(--u) * 28);
  text-transform: uppercase;
  white-space: nowrap;
}
.pill svg { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
.pill b { font-weight: 900; }
.pill i { font-style: normal; margin: 0 calc(var(--u) * 16); opacity: .6; }

.hero-visual {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 640);
  margin-top: calc(var(--u) * 6);
}
.tape {
  position: absolute; z-index: 1;
  left: calc(var(--u) * -300); top: calc(var(--u) * 215);
  width: calc(var(--u) * 1780); height: calc(var(--u) * 100);
  transform: rotate(-7deg);
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #ffd63d, #f5b800);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, .55), 0 0 calc(var(--u) * 40) rgba(251, 197, 14, .25);
}
.tape::before, .tape::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(var(--u) * 4);
  background: #1c1c1c; opacity: .85;
}
.tape::before { top: calc(var(--u) * 10); }
.tape::after { bottom: calc(var(--u) * 10); }
.tape-track { display: flex; width: max-content; animation: faixa 26s linear infinite; }
.tape-track span {
  white-space: nowrap;
  font-weight: 900;
  font-size: calc(var(--u) * 42);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #141414;
}
.tape-track i { font-style: normal; margin: 0 .45em; }
@keyframes faixa { to { transform: translateX(-50%); } }
.hero-product {
  position: absolute; z-index: 2;
  left: 50%; top: calc(var(--u) * -40);
  width: calc(var(--u) * 740); height: calc(var(--u) * 740);
  margin-left: calc(var(--u) * -370);
  object-fit: contain;
  transform: scale(var(--escala, 1));
  transform-origin: 50% 75%;
  filter: drop-shadow(0 calc(var(--u) * 30) calc(var(--u) * 40) rgba(0, 0, 0, .7)) drop-shadow(0 0 calc(var(--u) * 50) color-mix(in srgb, var(--accent) 25%, transparent));
}
.hero-product--placeholder {
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, #333), #1a1a1a 70%);
  font-weight: 900; font-size: calc(var(--u) * 80); text-transform: uppercase;
}
.hero-floor {
  position: absolute; z-index: 1;
  left: 50%; bottom: calc(var(--u) * -10);
  width: calc(var(--u) * 700); height: calc(var(--u) * 90);
  margin-left: calc(var(--u) * -350);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8), transparent 70%);
}

h1 {
  width: calc(var(--u) * 1080);
  margin: calc(var(--u) * 10) 0 0;
  font-weight: 900;
  font-size: calc(var(--u) * 66);
  line-height: calc(var(--u) * 74);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 20) rgba(0, 0, 0, .6);
}
h1 strong {
  display: block;
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--u) * 84);
  line-height: calc(var(--u) * 92);
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-hi), #f2b000);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(var(--u) * 24) rgba(251, 197, 14, .35));
  text-shadow: none;
}
.glow-line {
  width: calc(var(--u) * 820);
  height: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 34);
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  box-shadow: 0 0 calc(var(--u) * 24) rgba(251, 197, 14, .7);
}

.lead {
  width: calc(var(--u) * 980);
  margin: calc(var(--u) * 30) 0 0;
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 46);
  text-align: center;
  color: rgba(255, 255, 255, .88);
  text-wrap: balance;
}
.lead b { font-weight: 600; color: #fff; }

/* ---------- Card do produto ---------- */
.card {
  width: calc(var(--u) * 1028);
  margin-top: calc(var(--u) * 44);
  padding: calc(var(--u) * 38) calc(var(--u) * 50) calc(var(--u) * 38) calc(var(--u) * 78);
  display: grid; grid-template-columns: calc(var(--u) * 306) 1fr; align-items: center;
  gap: calc(var(--u) * 64);
  border: 1.5px solid rgba(251, 197, 14, .55);
  border-radius: calc(var(--u) * 42);
  background: linear-gradient(160deg, #1b1b1b, #111);
  box-shadow: 0 0 calc(var(--u) * 50) rgba(251, 197, 14, .16), inset 0 0 calc(var(--u) * 40) rgba(251, 197, 14, .05);
}
.card-img {
  width: calc(var(--u) * 306); height: calc(var(--u) * 292);
  border-radius: calc(var(--u) * 34);
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, .45);
}
.card-img img { width: calc(var(--u) * 270); height: calc(var(--u) * 270); object-fit: contain; }
.card-info h2 {
  margin: 0;
  font-weight: 900;
  font-size: calc(var(--u) * 50);
  line-height: 1.05;
  text-transform: uppercase;
}
.card-info p {
  margin: calc(var(--u) * 12) 0 calc(var(--u) * 10);
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 39);
  color: rgba(255, 255, 255, .82);
}
.price {
  display: grid; justify-items: center;
  height: calc(var(--u) * 175);
}
.price > * { grid-area: 1 / 1; }
.price-blur {
  align-self: start;
  font-weight: 900;
  font-size: calc(var(--u) * 140);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #fff;
  filter: blur(calc(var(--u) * 16));
  opacity: .75;
  user-select: none;
}
.price-blur small { font-size: .45em; }
.price-tag {
  position: relative;
  align-self: end;
  transform: rotate(-3deg);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 20);
  height: calc(var(--u) * 87);
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 14);
  background: linear-gradient(180deg, var(--gold-hi), #f5b800);
  color: #111;
  font-weight: 900;
  font-size: calc(var(--u) * 31);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 calc(var(--u) * 34) rgba(251, 197, 14, .45);
}
.price-tag svg { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: none; }

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: calc(var(--u) * 24);
  border: 1px solid rgba(130, 165, 255, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  color: #fff;
  font: 900 calc(var(--u) * 40) / 1 Galano, sans-serif;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 calc(var(--u) * 50) rgba(30, 90, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn .chev { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 calc(var(--u) * 70) rgba(30, 90, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-sm {
  width: calc(var(--u) * 983); height: calc(var(--u) * 120);
  margin-top: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 70) 0 calc(var(--u) * 140);
}
.btn-sm img { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
.btn-lg {
  width: calc(var(--u) * 989); height: calc(var(--u) * 147);
  margin-top: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 70) 0 calc(var(--u) * 130);
  border-radius: calc(var(--u) * 60);
  font-size: calc(var(--u) * 42);
}
.btn-lg img { width: calc(var(--u) * 96); height: calc(var(--u) * 96); }
.btn-lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(47, 109, 255, .55);
  animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso { to { box-shadow: 0 0 0 calc(var(--u) * 28) rgba(47, 109, 255, 0); } }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn[disabled]::before { animation: none; }

/* ---------- Divisor ---------- */
.divisor {
  width: calc(var(--u) * 990);
  margin: calc(var(--u) * 40) auto 0;
  display: flex; align-items: center; gap: calc(var(--u) * 26);
  color: var(--gold);
}
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .16); }
.divisor svg {
  width: calc(var(--u) * 54); height: calc(var(--u) * 54);
  filter: drop-shadow(0 0 calc(var(--u) * 12) rgba(251, 197, 14, .6));
  animation: desce 1.8s ease-in-out infinite;
}
@keyframes desce { 50% { transform: translateY(calc(var(--u) * 8)); } }

/* ---------- Cadastro ---------- */
.cadastro {
  display: flex; flex-direction: column; align-items: center;
  scroll-margin-top: calc(var(--u) * 200);
}
.lead--form { width: calc(var(--u) * 940); margin-top: calc(var(--u) * 14); }
.lead--form b { color: var(--gold); }

form { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * 40); }
.field {
  display: flex; align-items: center;
  gap: calc(var(--u) * 36);
  width: calc(var(--u) * 959);
  height: calc(var(--u) * 106);
  padding: 0 calc(var(--u) * 50);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(var(--u) * 30);
  background: rgba(255, 255, 255, .035);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field + .field { margin-top: calc(var(--u) * 19); }
.field:focus-within {
  border-color: var(--blue-hi);
  background: rgba(30, 90, 255, .08);
  box-shadow: 0 0 0 calc(var(--u) * 6) rgba(47, 109, 255, .22);
}
.field.erro { border-color: #ff5a5a; animation: treme .3s; }
@keyframes treme { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.field-ico { width: calc(var(--u) * 50); height: calc(var(--u) * 50); flex: none; color: #d8d8d8; }
.field input {
  flex: 1; min-width: 0;
  height: 100%;
  border: 0; outline: 0;
  background: transparent;
  color: #fff;
  font: 400 max(16px, calc(var(--u) * 38)) Galano, sans-serif;
}
.field input::placeholder { color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .04em; opacity: 1; }
.field input:focus::placeholder { opacity: .35; }
.ddi {
  display: flex; align-items: center; gap: calc(var(--u) * 16);
  height: calc(var(--u) * 56);
  padding-right: calc(var(--u) * 34);
  border-right: 1px solid rgba(255, 255, 255, .2);
  flex: none;
}
.ddi img { width: calc(var(--u) * 76); height: auto; border-radius: 3px; }
.ddi small { font-size: calc(var(--u) * 30); color: rgba(255, 255, 255, .75); }
.field--phone input { font-size: max(16px, calc(var(--u) * 48)); letter-spacing: .02em; }
.field--phone input::placeholder { text-transform: none; letter-spacing: 0; }

.aceite {
  position: relative;
  display: flex; align-items: flex-start; gap: calc(var(--u) * 26);
  width: calc(var(--u) * 959);
  margin-top: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aceite input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aceite-box {
  flex: none;
  width: calc(var(--u) * 54); height: calc(var(--u) * 54);
  margin-top: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 12);
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .04);
  display: grid; place-items: center;
  color: #111;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.aceite-box svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); opacity: 0; transform: scale(.5); transition: .15s ease; }
.aceite input:checked + .aceite-box { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 24) rgba(251, 197, 14, .5); }
.aceite input:checked + .aceite-box svg { opacity: 1; transform: none; }
.aceite input:focus-visible + .aceite-box { outline: 3px solid var(--blue-hi); outline-offset: 2px; }
.aceite.erro .aceite-box { border-color: #ff5a5a; animation: treme .3s; }
.aceite-txt { font-size: calc(var(--u) * 30); line-height: 1.45; color: rgba(255, 255, 255, .78); }
.aceite-txt a { color: var(--gold); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-erro { min-height: calc(var(--u) * 30); margin: calc(var(--u) * 12) 0 0; color: #ff8a8a; font-size: calc(var(--u) * 30); text-align: center; }
.form-erro + .btn-lg { margin-top: calc(var(--u) * 8); }

.consent {
  width: calc(var(--u) * 860);
  margin: calc(var(--u) * 30) 0 0;
  font-size: calc(var(--u) * 25);
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, .45);
}

.sucesso {
  width: calc(var(--u) * 989);
  margin-top: calc(var(--u) * 50);
  padding: calc(var(--u) * 70) calc(var(--u) * 70) calc(var(--u) * 80);
  border: 1.5px solid rgba(37, 211, 102, .55);
  border-radius: calc(var(--u) * 42);
  background: linear-gradient(160deg, rgba(37, 211, 102, .14), rgba(37, 211, 102, .03));
  box-shadow: 0 0 calc(var(--u) * 50) rgba(37, 211, 102, .15);
  text-align: center;
  animation: aparece .45s ease both;
}
.sucesso-check {
  width: calc(var(--u) * 130); height: calc(var(--u) * 130);
  margin: 0 auto calc(var(--u) * 30);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  font-size: calc(var(--u) * 70); font-weight: 900;
}
.sucesso h3 { margin: 0; font-weight: 900; font-size: calc(var(--u) * 60); text-transform: uppercase; }
.sucesso p { margin: calc(var(--u) * 24) 0 0; font-size: calc(var(--u) * 36); line-height: 1.38; color: rgba(255, 255, 255, .85); }
.indicar {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: calc(var(--u) * 44);
  height: calc(var(--u) * 110);
  padding: 0 calc(var(--u) * 60);
  border-radius: 999px;
  background: #25d366; color: #06301a;
  font-weight: 900; font-size: calc(var(--u) * 34);
  text-transform: uppercase; text-decoration: none;
}
@keyframes aparece { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.rodape {
  padding: calc(var(--u) * 160) 0 calc(var(--u) * 80);
  text-align: center;
  font-size: calc(var(--u) * 24);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .28);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Hub: escolha de oferta (/prevendas/?ref=nome) ---------- */
.topo-fixo { position: sticky; top: 0; z-index: 10; }
.topo-fixo .topbar { position: relative; }
.indicacao {
  display: flex; align-items: center; gap: calc(var(--u) * 26);
  padding: calc(var(--u) * 22) calc(var(--u) * 60);
  background: linear-gradient(180deg, #ffd84a, #f5b800);
  color: #141414;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .45);
}
.indicacao-avatar {
  flex: none;
  width: calc(var(--u) * 92); height: calc(var(--u) * 92);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #141414; color: var(--gold);
  font-weight: 900; font-size: calc(var(--u) * 46);
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(255, 255, 255, .55);
}
.indicacao-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.15; }
.indicacao-txt small { font-size: calc(var(--u) * 28); font-weight: 600; opacity: .75; }
.indicacao-txt b { font-size: calc(var(--u) * 46); font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicacao-selo {
  flex: none;
  padding: calc(var(--u) * 10) calc(var(--u) * 22);
  border-radius: 999px;
  background: #141414; color: var(--gold);
  font-weight: 900; font-size: calc(var(--u) * 26); letter-spacing: .12em;
}

.hub { display: flex; flex-direction: column; align-items: center; padding-bottom: calc(var(--u) * 20); }
.hub h1 { margin-top: calc(var(--u) * 50); }
.hub-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 34);
  width: calc(var(--u) * 1040);
  margin-top: calc(var(--u) * 50);
}
.hub-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 30);
  border: 1.5px solid rgba(251, 197, 14, .45);
  border-radius: calc(var(--u) * 40);
  background: linear-gradient(170deg, #1d1d1d, #111);
  box-shadow: 0 0 calc(var(--u) * 40) rgba(251, 197, 14, .1);
  color: #fff; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hub-card:hover, .hub-card:focus-visible { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 50) rgba(251, 197, 14, .28); outline: 0; }
.hub-card:active { transform: scale(.98); }
.hub-img {
  width: 100%; aspect-ratio: 1 / .9;
  border-radius: calc(var(--u) * 28);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%), #181818;
}
.hub-img img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 16) calc(var(--u) * 20) rgba(0, 0, 0, .6)); }
.hub-nome { margin-top: calc(var(--u) * 22); font-weight: 900; font-size: calc(var(--u) * 40); line-height: 1.05; text-transform: uppercase; }
.hub-desc { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 24); line-height: 1.35; color: rgba(255, 255, 255, .72); flex: 1; }
.hub-btn {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  width: 100%; height: calc(var(--u) * 90);
  margin-top: calc(var(--u) * 22);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  border: 1px solid rgba(130, 165, 255, .55);
  box-shadow: 0 0 calc(var(--u) * 30) rgba(30, 90, 255, .45);
  font-weight: 900; font-size: calc(var(--u) * 32); text-transform: uppercase;
}
.hub-btn svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }

/* ---------- Oferta liberada: preço visível e compra pelo WhatsApp ---------- */
.price--aberto {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  height: auto; margin-top: calc(var(--u) * 6);
}
.price-de {
  display: inline-block;
  padding: calc(var(--u) * 6) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 10);
  background: var(--gold); color: #111;
  font-weight: 900; font-size: calc(var(--u) * 24); text-transform: uppercase; letter-spacing: .03em;
}
.price-valor {
  margin-top: calc(var(--u) * 8);
  font-weight: 900; font-size: calc(var(--u) * 92); line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 0 calc(var(--u) * 30) rgba(251, 197, 14, .45);
  white-space: nowrap;
}
.compra { padding-top: calc(var(--u) * 10); }
.compra .btn-lg { margin-top: calc(var(--u) * 40); }
.hub-preco { margin-top: calc(var(--u) * 14); font-weight: 900; font-size: calc(var(--u) * 50); line-height: 1; color: var(--gold-hi); text-shadow: 0 0 calc(var(--u) * 24) rgba(251, 197, 14, .4); }
.hub-preco small { display: block; margin-bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 20); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-shadow: none; }

/* ---------- Escolha da quantidade (ex.: PeptiStrong) ---------- */
.faixas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 20);
  width: calc(var(--u) * 1028);
  margin: calc(var(--u) * 34) 0 0; padding: 0; border: 0;
}
.faixas legend {
  grid-column: 1 / -1; float: left; width: 100%;
  margin-bottom: calc(var(--u) * 18);
  text-align: center; font-weight: 900; font-size: calc(var(--u) * 30);
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.faixa { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faixa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.faixa-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(var(--u) * 210);
  padding: calc(var(--u) * 20) calc(var(--u) * 10) calc(var(--u) * 14);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: calc(var(--u) * 30);
  background: rgba(255, 255, 255, .04);
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.faixa-box b { font-weight: 600; font-size: calc(var(--u) * 28); color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.faixa-box strong { margin-top: calc(var(--u) * 8); font-weight: 900; font-size: calc(var(--u) * 46); line-height: 1; color: #fff; white-space: nowrap; }
.faixa-box small { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 22); color: rgba(255, 255, 255, .6); }
.faixa-box em {
  position: absolute; top: calc(var(--u) * -18); left: 50%; transform: translateX(-50%);
  padding: calc(var(--u) * 4) calc(var(--u) * 14);
  border-radius: 999px; background: #25d366; color: #052e16;
  font-style: normal; font-weight: 900; font-size: calc(var(--u) * 18); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.faixa input:checked + .faixa-box {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(251, 197, 14, .18), rgba(251, 197, 14, .06));
  box-shadow: 0 0 calc(var(--u) * 30) rgba(251, 197, 14, .3);
  transform: translateY(-2px);
}
.faixa input:checked + .faixa-box strong { color: var(--gold-hi); }
.faixa input:focus-visible + .faixa-box { outline: 3px solid var(--blue-hi); outline-offset: 2px; }
.aviso-estoque {
  margin: calc(var(--u) * 30) 0 0;
  font-weight: 600; font-size: calc(var(--u) * 28); text-align: center; color: var(--gold);
}