/* Kit Descoberta — design system mobile da Aurore (ver DESIGN-SYSTEM.md).
   Pensado pra 360–430px. No desktop a coluna fica centralizada em 480px e pronto. */

:root {
  --ink: #202020;
  --text: #333333;
  --mute: #8e8e8e;
  --line: #cacaca;
  --line-soft: #e6e6e6;
  --bg: #ffffff;
  --soft: #f5f5f5;
  --red: #cc0909;
  --red-dark: #a80707;
  --pink: #f9d5dc;
  --pink-soft: #fdeef2;
  --gold: #c9a24a;
  --star: #f5b301;
  --ok: #1d8a4a;
  --ok-soft: #e8f6ee;
  --warn-bg: #fff3c4;
  --warn-ink: #6b4f00;
  --err: #cc0909;
  --shadow: 0 0 4px rgba(0, 0, 0, .25);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, .14);
  --radius: 9px;
  --body: 'Overpass', Helvetica, Arial, sans-serif;
  --display: 'Poppins', Helvetica, Arial, sans-serif;
  --dock-h: 96px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
body.has-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap { width: 100%; max-width: 480px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.num { font-variant-numeric: tabular-nums; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 18px; height: 18px; }
.ico.xs { width: 14px; height: 14px; }
.ex { display: inline-block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border: 1px dashed var(--line); padding: 2px 5px 1px; border-radius: 3px; vertical-align: middle; white-space: nowrap; font-weight: 700; line-height: 1.2; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.center { text-align: center; }
.red { color: var(--red); }
.strike { text-decoration: line-through; color: var(--mute); }

/* Tipos da Aurore */
.sec-title { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0; line-height: 1.2; }
.sec-title small { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; text-transform: none; color: var(--mute); margin-top: 4px; }
.lbl { font-size: 14px; text-transform: uppercase; color: var(--ink); letter-spacing: .02em; font-weight: 400; }
.brand { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.pname { font-size: 14px; color: var(--text); margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 5px; font-size: 12px; background: #fff; }
.tag { display: inline-block; background: var(--ink); color: #fff; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px 3px; font-weight: 700; line-height: 1; }
.tag.red { background: var(--red); }
.totalchip { display: inline-block; background: var(--soft); padding: 10px 14px 8px; font-size: 14px; font-weight: 700; border-radius: 3px; }

/* ---------- Cabeçalho mobile ---------- */
.promo { background: var(--pink); color: var(--ink); font-size: 12.5px; text-align: center; }
.promo .wrap { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; }
.promo b { display: inline-block; border: 1.5px solid var(--ink); border-radius: 20px; padding: 4px 10px 2px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.store { background: #fff; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line-soft); }
.store .wrap { display: flex; align-items: center; height: 64px; gap: 10px; }
.store .lft { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.store .rgt { display: flex; align-items: center; gap: 14px; }
.mark { font-family: var(--body); font-weight: 800; font-size: 20px; letter-spacing: .3em; text-transform: uppercase; line-height: 1; text-decoration: none; padding-top: 3px; }
.iconbtn { background: none; border: 0; padding: 4px; color: var(--ink); display: flex; }
.iconbtn .ico { width: 24px; height: 24px; stroke-width: 1.5; }
.iconbtn.burger .ico { width: 28px; height: 28px; stroke-width: 2.6; }
.backbtn { display: flex; align-items: center; gap: 0; background: none; border: 0; padding: 4px 6px 4px 0; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.backbtn .ico { width: 24px; height: 24px; stroke-width: 2; }
.navbar { background: #fff; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.navbar::-webkit-scrollbar { display: none; }
.navbar .row { display: flex; height: 38px; padding: 0 8px; }
.navbar a { flex: none; display: flex; align-items: center; padding: 0 12px; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.navbar a.active { font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.navbar a.block { background: var(--ink); color: #fff; font-weight: 700; margin: 6px 4px; padding: 0 10px; font-size: 11px; }
.navbar a.block.red { background: var(--red); }
.crumbs { font-size: 13px; color: var(--mute); padding: 12px 0 0; }
.crumbs b { color: var(--ink); font-weight: 400; }

/* Barra do timer */
.timerbar { background: var(--ink); color: #fff; font-size: 12.5px; }
.timerbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.timerbar .t48 { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .04em; }

/* ---------- Botões ---------- */
.btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 2px 18px 0; border: 0; border-radius: 23px; background: var(--red); color: #fff; font-family: var(--body); font-size: 15px; font-weight: 500; text-decoration: none; text-align: center; transition: transform .15s ease, background .2s ease; }
.btn:hover { background: var(--red-dark); }
.btn:active { transform: scale(.985); }
.btn .ico { width: 20px; height: 20px; }
.btn.black { background: var(--ink); font-family: var(--display); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; min-height: 48px; border-radius: 28px; }
.btn.black:hover { background: #000; }
.btn.outline { background: #fff; color: var(--ink); border: 2px solid var(--ink); font-family: var(--display); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; min-height: 48px; border-radius: 28px; }
.btn.outline:hover { background: var(--soft); }
.btn.flat { border-radius: 0; min-height: 40px; font-size: 14px; }
.btn.sm { min-height: 40px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; font-size: 14px; color: var(--ink); }

/* ---------- Cards e campos ---------- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 14px; }
.card .lbl { display: block; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 700; }
.field label .optl { color: var(--mute); font-weight: 400; }
.field input, .field select { height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 15px 9px; font-size: 15px; background: #fff; width: 100%; transition: border-color .15s ease; }
.field input:focus, .field select:focus { outline: 0; border-color: var(--ink); }
.field.err input { border-color: var(--err); }
.field .msg { font-size: 12.5px; color: var(--err); font-weight: 700; }
.field .msg[hidden] { display: none; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr; gap: 0 10px; }

/* ---------- Transições ---------- */
.view { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.stagger > *:nth-child(1) { animation-delay: .03s } .stagger > *:nth-child(2) { animation-delay: .09s } .stagger > *:nth-child(3) { animation-delay: .15s } .stagger > *:nth-child(4) { animation-delay: .21s } .stagger > *:nth-child(5) { animation-delay: .27s } .stagger > *:nth-child(6) { animation-delay: .33s }
@keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .view, .stagger > * { animation: none !important; } }

/* ---------- Home (primeira página) ---------- */
.banner { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 20% 100%, #ff5a6e 0%, #cc0909 45%, #9e0606 100%); color: #fff; min-height: 300px; display: flex; flex-direction: column; justify-content: center; padding: 26px 20px 24px; isolation: isolate; }
.banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 80% 20%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(50% 35% at 15% 20%, rgba(255, 200, 210, .25), transparent 70%); z-index: -1; }
.banner .stripes { position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: repeating-linear-gradient(135deg, #fff 0 14px, #202020 14px 28px); opacity: .95; transform: rotate(-10deg); z-index: -1; }
.banner .stripes.s2 { left: -40px; top: -40px; width: 110px; height: 110px; border-radius: 30% 70% 60% 40%; }
.banner .seal { position: absolute; left: 16px; top: 16px; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; text-align: center; gap: 2px; }
.banner .seal i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: block; }
.banner .eyebrow { font-family: var(--body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin-left: 84px; }
.banner .sub { font-family: var(--body); font-weight: 400; font-size: 15px; margin: 10px 0 2px; }
.banner .big { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: .95; letter-spacing: -.03em; }
.banner .big small { font-size: 26px; letter-spacing: 0; vertical-align: top; margin-right: 2px; font-weight: 600; }
.banner .was { font-size: 14px; margin-top: 8px; opacity: .9; }
.banner .was s { opacity: .8; }
.banner .cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.banner .cta i { width: 0; height: 0; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: block; }
.banner .vials { position: absolute; right: 18px; top: 24px; display: flex; gap: 4px; transform: rotate(6deg); }
.banner .vials .vial { width: 26px; height: 72px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.shortcuts { display: flex; gap: 14px; overflow-x: auto; padding: 18px 20px 6px; scrollbar-width: none; }
.shortcuts::-webkit-scrollbar { display: none; }
.sc { flex: none; width: 92px; text-align: center; }
.sc i { width: 76px; height: 76px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.sc i.red { background: var(--red); }
.sc i .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.sc i b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.sc span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; line-height: 1.25; }
.hometitle { padding: 18px 0 4px; }
.hometitle h1 { font-family: var(--display); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.2; }
.hometitle p { font-size: 13.5px; color: var(--text); margin-top: 6px; }

/* Quiz */
.quiz { padding: 16px 0 32px; }
.progress { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin: 10px 0 16px; }
.progress i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.qhead { display: flex; justify-content: space-between; align-items: baseline; }
.qhead .n { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.question { font-size: 21px; font-weight: 800; margin: 4px 0 16px; line-height: 1.2; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts.three { grid-template-columns: 1fr; }
.opt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; background: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 12px; min-height: 96px; font-weight: 700; font-size: 14px; line-height: 1.2; transition: transform .15s ease, background .15s ease, color .15s ease; }
.opts.three .opt { flex-direction: row; align-items: center; min-height: 60px; }
.opt .ico { width: 28px; height: 28px; stroke-width: 1.5; }
.opt:active, .opt.picked { background: var(--ink); color: #fff; transform: scale(.98); }
.textq { position: relative; }
.textq input { height: 48px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px 10px; width: 100%; font-size: 16px; }
.textq input:focus { outline: 0; border-color: var(--ink); }
.suggest { position: absolute; left: 0; right: 0; top: 52px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 5; overflow: hidden; }
.suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.row2 { display: flex; gap: 10px; margin-top: 12px; }
.row2 .btn { flex: 1; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 16px 0 4px; font-size: 11px; color: var(--mute); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.trust span { display: inline-flex; align-items: center; gap: 5px; }
.trust .ico { width: 14px; height: 14px; }

/* Captura */
.capture { padding: 18px 0 40px; }
.capture h1 { font-size: 24px; font-weight: 800; margin: 6px 0 4px; }
.capture p.lead { color: var(--text); margin-bottom: 18px; font-size: 14px; }
.note { font-size: 12.5px; color: var(--mute); text-align: center; margin-top: 4px; }

/* Verificação */
.verify { padding: 40px 0 48px; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.chk { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; }
.chk.on { opacity: 1; transform: none; }
.chk i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; background: #fff; }
.chk.on i { border-color: var(--ink); background: var(--ink); color: #fff; animation: pop .35s cubic-bezier(.3, 1.4, .5, 1); }
.chk i .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.inside { text-align: center; }
.inside .big { width: 88px; height: 88px; border-radius: 50%; background: var(--ink); color: #fff; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; animation: pop .5s cubic-bezier(.3, 1.4, .5, 1); }
.inside .big .ico { width: 44px; height: 44px; stroke-width: 2.2; }
.inside h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.inside p { font-size: 16px; color: var(--text); margin-bottom: 22px; }

/* ---------- Mini VSL ---------- */
.vslbox { background: #0f0f10; border-radius: 10px; overflow: hidden; position: relative; aspect-ratio: 9 / 13; max-height: 460px; margin: 0 auto; color: #fff; width: 100%; max-width: 320px; }
.vslbox.compact { aspect-ratio: 16 / 10; max-width: none; max-height: 240px; border-radius: 0; }
.vslbox .cover { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 100%, #3b2b31 0%, #121214 60%); }
.vslbox .cover .shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding-bottom: 8%; opacity: .55; }
.vslbox .cover .shelf .bottle { width: 20%; height: auto; filter: grayscale(.2) brightness(1.1); }
.vslbox .cover .person { position: absolute; left: 50%; top: 8%; width: 58%; transform: translateX(-50%); opacity: .9; }
.vslbox .cover .person svg { width: 100%; height: auto; }
.vslbox.compact .cover .person { width: 34%; top: 4%; }
.vslbox .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); border: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.vslbox .play .ico { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 3px; }
.vslbox .lbl { position: absolute; left: 12px; top: 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; background: rgba(255, 255, 255, .14); padding: 5px 8px 4px; border-radius: 4px; backdrop-filter: blur(6px); color: #fff; }
.vslbox .mute { position: absolute; right: 10px; top: 10px; background: rgba(255, 255, 255, .14); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.vslbox .mute .ico { width: 18px; height: 18px; }
.vslbox .bigtxt { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font-family: var(--display); font-weight: 700; font-size: 34px; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.vslbox.compact .bigtxt { top: 26%; font-size: 28px; }
.vslbox .cap { position: absolute; left: 12px; right: 12px; bottom: 22px; text-align: center; font-size: 14px; line-height: 1.35; font-weight: 700; opacity: 0; transition: opacity .3s; }
.vslbox.compact .cap { font-size: 13px; bottom: 16px; }
.vslbox .cap span { background: rgba(0, 0, 0, .55); padding: 3px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.vslbox .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); }
.vslbox .bar i { display: block; height: 100%; width: 0; background: #fff; }
.vslbox.playing .play { display: none; }
.vslbox.playing .cap, .vslbox.playing .bigtxt { opacity: 1; }
.vslbox.playing .cover .person { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateX(-50%) translateY(4px); } }
.vslpage { padding: 20px 0 40px; }
.vslpage h1 { font-size: 22px; font-weight: 800; margin: 6px 0 14px; }
.vsl-line { font-size: 12.5px; color: var(--mute); text-align: center; margin: 10px 0 14px; font-weight: 700; }

/* ---------- Página de resultado = página de produto ---------- */
.resultbanner { background: var(--ink); color: #fff; padding: 22px 0 22px; }
.resultbanner .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.resultbanner h1 { font-size: 16px; font-weight: 400; margin-top: 8px; color: rgba(255, 255, 255, .85); }
.resultbanner h1 b { display: block; font-family: var(--display); font-weight: 700; font-size: 34px; text-transform: uppercase; color: #fff; letter-spacing: -.01em; line-height: 1.05; margin-top: 4px; }
.resultbanner .line { font-size: 14px; color: rgba(255, 255, 255, .75); margin-top: 8px; font-style: italic; }
.pdp { padding-bottom: 20px; }
.gal { position: relative; background: #fff; padding: 10px 0 0; }
.gal .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal .track::-webkit-scrollbar { display: none; }
.gal .slide { flex: none; width: 100%; scroll-snap-align: center; height: 290px; display: flex; align-items: center; justify-content: center; }
.gal .fav { position: absolute; right: 0; top: 12px; color: var(--ink); background: none; border: 0; padding: 4px; }
.gal .fav .ico { width: 26px; height: 26px; }
.gal .arr { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink); padding: 8px 0; }
.gal .arr.l { left: -6px; } .gal .arr.r { right: -6px; }
.gal .arr .ico { width: 26px; height: 26px; stroke-width: 2; }
.dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 14px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--ink); }
.trio { display: flex; gap: 6px; align-items: flex-end; justify-content: center; }
.trio .pf { text-align: center; width: 31%; }
.trio .pf .bottle { width: 100%; height: 150px; }
.trio .pf b { display: block; font-size: 12px; margin-top: 4px; }
.trio .pf span { display: block; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.kitart { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.kitart .vial { width: 48px; height: 140px; }
.kitart .profilecard { width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 10px 12px; box-shadow: var(--shadow); transform: rotate(-4deg); font-size: 10px; line-height: 1.3; }
.kitart .profilecard .mk { font-weight: 800; letter-spacing: .3em; font-size: 9px; text-transform: uppercase; margin-bottom: 6px; }
.kitart .profilecard .who { font-size: 12.5px; font-weight: 800; }
.kitart .profilecard .pp { color: var(--mute); font-style: italic; margin-bottom: 6px; }
.kitart .profilecard .k { color: var(--text); }
.kitart .profilecard .code { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .1em; border-top: 1px dashed var(--line); padding-top: 5px; }
.brandrow { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 4px; }
.brandrow .share { background: none; border: 0; padding: 2px; color: var(--ink); }
.ratingchip { margin: 10px 0 14px; }
.ratingchip .stars { color: var(--star); display: flex; gap: 1px; }
.ratingchip .stars .ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.ratingchip .sep { width: 1px; height: 16px; background: var(--line); }
.ratingchip b { font-weight: 700; }
.pricerow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.pricerow .p { font-size: 22px; font-weight: 700; line-height: 1.1; }
.pricerow .p small { display: block; font-size: 12px; font-weight: 500; color: var(--ink); margin-top: 3px; }
.pricerow .p small s { color: var(--mute); }
.ptschip { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 6px; text-align: left; display: flex; align-items: center; gap: 8px; }
.ptschip b { display: block; font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.ptschip span { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ptschip i { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-style: normal; flex: none; }
.card.pdpcard { padding: 22px 20px; }
.selectpill { display: flex; justify-content: space-between; align-items: center; height: 46px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; font-size: 14px; margin-bottom: 14px; }
.selectpill .ico { width: 22px; height: 22px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; width: 80px; background: #fff; border: 0; padding: 0; text-align: center; }
.thumb .box { width: 64px; height: 64px; margin: 0 auto 6px; border: 1.5px solid var(--line-soft); border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 1px; background: #fff; }
.thumb.on .box { border: 2px solid var(--ink); }
.thumb .box .vial { width: 15px; height: 48px; }
.thumb .box .bottle { width: 18px; height: 28px; }
.thumb span { display: block; font-size: 10.5px; line-height: 1.2; color: var(--ink); font-weight: 700; }
.thumb.on span { text-decoration: underline; }
.picker { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.picker .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.picker .pk { background: #fff; border: 1.5px solid var(--line-soft); border-radius: 6px; padding: 6px 2px; text-align: center; font-size: 9.5px; font-weight: 700; line-height: 1.15; }
.picker .pk .bottle { width: 100%; height: 50px; margin-bottom: 4px; }
.picker .pk.on { border: 2px solid var(--ink); }
.picker .hint { font-size: 12.5px; color: var(--mute); margin: 8px 0 0; font-weight: 700; }
.kitline { font-size: 13px; color: var(--text); margin-top: 10px; }
.kitline b { color: var(--ink); }
.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.blk { background: var(--soft); border-radius: 6px; padding: 12px 10px 10px; }
.blk b { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.05; }
.blk b.red { color: var(--red); }
.blk span { display: block; font-size: 11.5px; color: var(--text); line-height: 1.25; margin-top: 2px; }
.scarce { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.scarce .left b { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; }
.scarce .left span { display: block; font-size: 11px; color: var(--mute); font-weight: 700; margin-top: 2px; }
.scarce .bar { flex: 1; height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.scarce .bar i { display: block; height: 100%; background: var(--red); border-radius: 3px; }
.scarce .right { text-align: right; font-size: 11px; color: var(--mute); font-weight: 700; }
.scarce .right b { display: block; font-family: var(--display); font-size: 14px; color: var(--ink); }
.anchor { font-size: 13px; color: var(--text); margin-top: 12px; }
.anchor b { color: var(--ink); }
.shipline { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.shipline:last-child { border-bottom: 0; }
.shipline .ico { color: var(--ink); }
.shipline b { display: block; }
.shipline span { font-size: 12.5px; color: var(--mute); }
.shipline .pr { margin-left: auto; font-weight: 700; }
.shipline .pr.free { color: var(--ok); }
.acc { border-top: 1px solid var(--line-soft); }
.acc details { border-bottom: 1px solid var(--line-soft); }
.acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 17px; font-weight: 600; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { width: 24px; height: 24px; stroke-width: 1.5; }
.acc summary .pm { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.acc summary .pm::before { content: "+"; font-size: 18px; line-height: 1; font-weight: 400; margin-top: -1px; }
.acc details[open] summary .pm::before { content: "−"; }
.acc .body { padding: 0 0 18px; font-size: 14px; color: var(--text); line-height: 1.5; }
.acc .body p + p { margin-top: 8px; }
.eq { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 10px; }
.eq .v { text-align: center; }
.eq .v b { display: block; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink); }
.eq .v b.red { color: var(--red); }
.eq .v span { font-size: 10.5px; color: var(--mute); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.eq .arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.eq .arrow .ico { width: 18px; height: 18px; }
.plist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pl { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 6px; padding: 8px 12px; }
.pl .bottle { width: 40px; height: 54px; flex: none; }
.pl .t { flex: 1; min-width: 0; }
.pl .t b { display: block; font-size: 13.5px; color: var(--ink); }
.pl .t span { font-size: 11px; color: var(--mute); }
.pl .pr { text-align: right; font-size: 11px; color: var(--mute); line-height: 1.3; }
.pl .pr s { display: block; }
.pl .pr b { display: block; font-family: var(--display); font-size: 17px; color: var(--red); font-weight: 700; }
.whylist { display: flex; flex-direction: column; gap: 10px; }
.why { display: flex; gap: 12px; align-items: flex-start; }
.why .vial { width: 22px; height: 60px; flex: none; }
.why b { display: block; font-size: 14px; color: var(--ink); }
.why p { font-size: 13.5px; }
.prize { background: linear-gradient(135deg, #1a1a1c, #2b2227); color: #fff; text-align: center; padding: 24px 20px; border-radius: var(--radius); margin: 16px 0; }
.prize .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.prize b { display: block; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; color: #f0cf7a; letter-spacing: -.02em; margin: 8px 0; }
.prize p { font-size: 13px; color: rgba(255, 255, 255, .8); }

/* Avaliações (bloco cinza) */
.reviews { background: var(--soft); padding: 18px 20px 20px; margin: 20px 0 0; }
.reviews .top { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.reviews .top .stars { color: var(--star); display: flex; }
.reviews .top .stars .ico { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.reviews .top .n { font-weight: 700; font-size: 15px; }
.reviews .top .sep { width: 1px; height: 18px; background: var(--line); }
.reviews .rec { font-size: 14px; margin: 10px 0 14px; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.barrow { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.barrow .st { width: 30px; display: flex; align-items: center; gap: 2px; }
.barrow .st .ico { width: 11px; height: 11px; fill: var(--ink); stroke: none; }
.barrow .b { flex: 1; height: 8px; background: #bdbdbd; border-radius: 4px; overflow: hidden; }
.barrow .b i { display: block; height: 100%; background: var(--star); }
.barrow .c { width: 28px; text-align: right; }
.rhead { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; }
.rhead h3 { font-size: 22px; font-weight: 600; }
.rcard { background: #fff; border-radius: var(--radius); padding: 14px; font-size: 13.5px; margin-bottom: 10px; }
.rcard .stars { color: var(--star); display: flex; gap: 1px; margin-bottom: 6px; }
.rcard .stars .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rcard .stars .ico.off { color: #d6d6d6; }
.rcard .who { font-size: 12px; color: var(--mute); margin-bottom: 6px; }
.rcard .who b { color: var(--ink); }
.rcard p { color: var(--text); line-height: 1.45; }
.rcard .ph { margin-top: 8px; height: 56px; border-radius: 6px; background: linear-gradient(135deg, #f3e4e8, #e5d2d8); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.guarantee { display: flex; gap: 12px; align-items: center; background: var(--ok-soft); border-radius: var(--radius); padding: 14px; margin-top: 12px; }
.guarantee .ico { width: 30px; height: 30px; color: var(--ok); }
.guarantee b { display: block; font-size: 14px; }
.guarantee span { font-size: 13px; color: var(--text); }
.seals { display: flex; gap: 8px; margin-top: 12px; }
.seal { flex: 1; border: 1px solid var(--line-soft); background: #fff; border-radius: 6px; padding: 8px 6px; text-align: center; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.seal b { display: block; color: var(--ink); font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* Barra fixa de compra (como a página de produto) */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dock .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: var(--dock-h); padding-bottom: 14px; }
.dock .dp { flex: 1; min-width: 0; }
.dock .dp .pts { display: inline-flex; align-items: center; gap: 5px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px 3px; border-radius: 3px; margin-bottom: 8px; }
.dock .dp .pts i { width: 12px; height: 12px; border-radius: 50%; background: #fff; display: block; }
.dock .dp b { display: block; font-size: 18px; font-weight: 700; line-height: 1; }
.dock .dp span { display: block; font-size: 11.5px; color: var(--ink); margin-top: 3px; }
.dock .dp span s { color: var(--mute); }
.dock .btn { width: auto; flex: none; min-height: 45px; padding: 2px 16px 0; font-size: 14px; }

/* ---------- Checkout ---------- */
.checkout { padding: 14px 0 30px; }
.checkout h1 { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 14px; }
.ship { display: flex; flex-direction: column; gap: 10px; }
.shipopt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; background: #fff; text-align: left; width: 100%; }
.shipopt.on { border-color: var(--ink); }
.shipopt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.shipopt.on .radio { border-color: var(--ink); }
.shipopt.on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.shipopt .t { flex: 1; }
.shipopt .t b { display: block; font-size: 14.5px; }
.shipopt .t span { font-size: 12.5px; color: var(--mute); }
.shipopt .pr { font-weight: 700; font-size: 15px; }
.shipopt .pr.free { color: var(--ok); }
.alert { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 12px 14px; font-size: 13px; font-weight: 700; margin-top: 10px; }
.alert .ico { width: 20px; height: 20px; flex: none; stroke-width: 2; }
.summary .ln { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.summary .ln.total { font-weight: 700; font-size: 18px; border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 10px; }
.paybox { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--ink); border-radius: 8px; padding: 12px 14px; margin: 12px 0 16px; }
.paybox .ico { width: 28px; height: 28px; color: #32bcad; }
.paybox b { display: block; font-size: 14.5px; }
.paybox span { font-size: 12.5px; color: var(--mute); }

/* Pix */
.pix { padding: 22px 0 40px; text-align: center; }
.pix h1 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.pix .amt { font-family: var(--display); font-weight: 700; font-size: 32px; margin: 8px 0 14px; }
.qr { width: 200px; height: 200px; margin: 0 auto 10px; background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pixcode { display: flex; gap: 8px; align-items: stretch; margin: 14px 0; }
.pixcode input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 12px; color: var(--mute); }
.pixcode button { flex: none; width: 44px; border: 1px solid var(--ink); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; }
.pixcode button.ok { background: var(--ink); color: #fff; }
.expire { font-size: 13px; color: var(--mute); font-weight: 700; margin-bottom: 18px; }
.expire b { font-family: var(--display); color: var(--ink); }

/* Confirmação */
.done { padding: 26px 0 40px; }
.done .big { width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: #fff; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; animation: pop .5s cubic-bezier(.3, 1.4, .5, 1); }
.done .big .ico { width: 38px; height: 38px; stroke-width: 2.4; }
.done h1 { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 18px; }
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.info { background: var(--soft); border-radius: 6px; padding: 12px; }
.info span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-bottom: 4px; }
.info b { display: block; font-family: var(--display); font-size: 16px; line-height: 1.15; }
.info.full { grid-column: 1 / -1; }
.info.code b { font-size: 24px; letter-spacing: .08em; color: var(--red); }
.early { display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 14px; margin: 14px 0 18px; }
.early .ico { width: 28px; height: 28px; flex: none; }
.early b { display: block; font-size: 15px; }
.early span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* ---------- Upsell = listagem ---------- */
.upsell { padding: 0 0 90px; }
.flash { background: var(--red); color: #fff; padding: 18px 20px; }
.flash .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75); font-weight: 700; }
.flash h1 { font-family: var(--display); font-weight: 700; font-size: 19px; text-transform: uppercase; margin: 6px 0 10px; line-height: 1.2; }
.flash .tm { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.flash .tm b { font-family: var(--display); font-size: 20px; background: rgba(0, 0, 0, .25); padding: 2px 8px 0; border-radius: 4px; }
.listhead { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 12px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }
.prod { position: relative; display: flex; flex-direction: column; }
.prod .off { position: absolute; left: 0; top: 0; z-index: 2; }
.prod .fav { position: absolute; right: 0; top: 0; color: var(--ink); z-index: 2; }
.prod .bottle { width: 100%; height: 150px; margin: 8px 0 4px; }
.prod .b { font-size: 16px; font-weight: 700; text-transform: uppercase; margin-top: 10px; }
.prod .n { font-size: 13.5px; color: var(--text); min-height: 2.6em; line-height: 1.3; margin: 2px 0 2px; }
.prod .n2 { font-size: 12px; color: var(--mute); margin-bottom: 8px; }
.prod s { font-size: 12.5px; color: var(--mute); display: block; }
.prod .p { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.prod .pix-l { font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 0; }
.prod .btn { margin-top: 0; }
.prod.bought .btn { background: var(--ok); }
.listbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; }
.listbar > * { flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 15px; }
.listbar .l { background: var(--ink); color: #fff; letter-spacing: .1em; text-transform: uppercase; }
.listbar .r { color: var(--ink); }
.listbar .r b { font-family: var(--display); font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 30px; font-size: 13.5px; font-weight: 700; z-index: 70; box-shadow: var(--shadow-lg); animation: rise .3s ease; white-space: nowrap; }

/* Painel interno */
.panel { padding: 26px 0 60px; }
.panel h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.panel .links { display: flex; flex-direction: column; gap: 10px; }
.panel code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--soft); padding: 2px 6px; border-radius: 4px; }

/* Modo teste */
.testbar { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 6px; background: var(--warn-bg); color: var(--warn-ink); border: 1.5px dashed var(--warn-ink); border-radius: 30px; padding: 6px 6px 6px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow-lg); }
.testbar button { background: var(--warn-ink); color: #fff; border: 0; border-radius: 20px; padding: 7px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.testbar button.x { background: none; color: var(--warn-ink); padding: 4px; display: flex; }
body.has-dock .testbar { bottom: calc(var(--dock-h) + 10px + env(safe-area-inset-bottom, 0px)); }
body.has-listbar .testbar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* Rodapé */
.foot { background: var(--ink); color: rgba(255, 255, 255, .75); font-size: 12.5px; margin-top: 28px; }
.foot .stripes { height: 6px; background: repeating-linear-gradient(90deg, #fff 0 12px, #202020 12px 24px); }
.foot .wrap { padding: 26px 20px 30px; display: flex; flex-direction: column; gap: 14px; }
.foot .mark { color: #fff; font-size: 16px; }
.foot .cols { display: flex; flex-direction: column; gap: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.foot .cols span { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 10px; }
.foot .pay { display: flex; gap: 8px; }
.foot .pay i { display: block; width: 44px; height: 26px; border-radius: 4px; background: #fff; opacity: .9; }

/* ---------- Fluxo v3: mini VSL primeiro, mecanismo + quiz, kit com 4 ---------- */
.vsllanding { padding: 16px 0 28px; }
.vsllanding .kicker { display: inline-block; background: var(--red); color: #fff; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px 4px; }
.vsllanding h1 { font-family: var(--display); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.2; margin: 10px 0 14px; }
.vsllanding .vslbox { max-width: none; max-height: 470px; }
.vsllanding .btn { margin-top: 2px; }

.banner.small { min-height: 200px; padding: 20px 20px 18px; }
.banner.small .big { font-size: 56px; }
.banner.small .eyebrow { margin-left: 84px; }
.banner.small .vials { top: auto; bottom: 18px; right: 22px; }
.banner.small .vials .vial { width: 22px; height: 62px; }
.banner.small .stripes { right: auto; left: auto; top: -46px; right: -46px; bottom: auto; width: 120px; height: 120px; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px 0 6px; text-align: center; }
.hs i { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-family: var(--display); font-weight: 700; font-size: 22px; font-style: normal; }
.hs i.red { background: var(--red); }
.hs b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.hs span { display: block; font-size: 11.5px; color: var(--text); line-height: 1.25; margin-top: 2px; }
.mech { font-size: 13.5px; color: var(--text); background: var(--soft); border-radius: 6px; padding: 12px 14px 10px; margin-top: 10px; }

/* 4 frascos na galeria e no cartão */
.trio { gap: 4px; }
.trio .pf { width: 24%; }
.trio .pf .bottle { height: 120px; }
.trio .pf b { font-size: 11px; }
.trio .pf span { font-size: 8.5px; }
.kitart { gap: 6px; }
.kitart .vial { width: 34px; height: 104px; }
.kitart .profilecard { width: 128px; }
.thumb .box .vial { width: 12px; height: 46px; }
.thumb span em { display: block; font-style: normal; font-size: 9px; color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* Montador do kit */
.selectpill.warn { border-color: var(--red); color: var(--red); }
.selectpill .ico { stroke-width: 2; }
#builder .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#builder .pk { position: relative; background: #fff; border: 1.5px solid var(--line-soft); border-radius: 6px; padding: 8px 2px 6px; text-align: center; line-height: 1.1; transition: border-color .15s ease, transform .15s ease, opacity .15s ease; opacity: .55; }
#builder .pk.on { border: 2px solid var(--ink); opacity: 1; }
#builder .pk:active { transform: scale(.96); }
#builder .pk .bottle { width: 100%; height: 52px; margin-bottom: 4px; }
#builder .pk b { display: block; font-size: 9.5px; }
#builder .pk small { display: block; font-size: 7.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .02em; margin-top: 2px; }
#builder .pk .ck { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; }
#builder .pk.on .ck { background: var(--ink); border-color: var(--ink); color: #fff; }
#builder .pk .ck .ico { width: 10px; height: 10px; stroke-width: 3; opacity: 0; }
#builder .pk.on .ck .ico { opacity: 1; }
#builder .hint { font-size: 12.5px; color: var(--mute); margin: 10px 0 0; }

/* Resumo do kit no checkout */
.kitsum { display: flex; align-items: center; gap: 14px; }
.kitsum .vs { display: flex; gap: 2px; flex: none; }
.kitsum .vs .vial { width: 16px; height: 50px; }
.kitsum .t b { display: block; font-size: 14.5px; }
.kitsum .t span { display: block; font-size: 12.5px; color: var(--text); margin: 2px 0 6px; }
.kitsum .link { font-size: 13px; }

/* Upsell com 15 produtos */
.flash .fsub { font-size: 13.5px; margin: -4px 0 10px; opacity: .9; }
.prod .bottle { height: 140px; }
.banner.small .seal { left: auto; right: 16px; top: 16px; }
.banner.small .eyebrow { margin-left: 0; }
.banner.small .stripes { display: none; }


/* ---------- Versão minimalista ---------- */
.promo .wrap { min-height: 42px; }
.promo b { font-size: 10px; padding: 3px 9px 2px; }
.store .wrap { height: 60px; }
.vsllanding { padding: 14px 0 30px; }
.vsllanding h1 { font-size: 19px; }
.vsllanding .vslbox { max-height: 440px; }
.offerstrip { display: flex; align-items: center; gap: 12px; padding: 14px 0 0; }
.offerstrip .vs { display: flex; gap: 2px; flex: none; }
.offerstrip .vs .vial { width: 14px; height: 44px; }
.offerstrip .t b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.offerstrip .t span { display: block; font-size: 14px; margin-top: 2px; }
.offerstrip .t span s { color: var(--mute); font-size: 12px; }
.offerstrip .t span em { font-style: normal; color: var(--red); font-weight: 700; }
.quiz { padding: 10px 0 36px; }
.question { font-size: 20px; }
.opt { min-height: 88px; }
.capture h1 { font-size: 22px; margin: 6px 0 16px; }
.capture .card { padding: 20px 18px 18px; }
.pdp .crumbs { padding-top: 10px; }
.gal .slide { height: 250px; }
.trio .pf .bottle { height: 110px; }
.pname { font-size: 13.5px; }
.you { font-size: 14px; color: var(--text); margin: 10px 0 2px; }
.you b { color: var(--ink); }
.ratingchip { margin: 8px 0 12px; }
.ratingchip .chip { padding: 5px 9px 4px; font-size: 11.5px; }
.pricerow { margin-bottom: 14px; }
.pricerow .p { font-size: 24px; }
.ptschip { padding: 7px 10px 5px; }
.ptschip b { font-size: 13px; }
.bhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bcount { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.bcount.warn { color: var(--red); }
#builder .pk { padding: 8px 2px 6px; }
#builder .hint { margin-top: 10px; }
.perks3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 10px; }
.perks3 > div { text-align: center; padding: 10px 4px 8px; border: 1px solid var(--line-soft); border-radius: 6px; }
.perks3 .ico { width: 22px; height: 22px; margin: 0 auto 6px; stroke-width: 1.5; }
.perks3 b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.15; }
.perks3 span { display: block; font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.scarceline { font-size: 12px; color: var(--mute); text-align: center; margin: 0 0 12px; }
.scarceline b { color: var(--ink); font-family: var(--display); font-size: 13px; }
.pdp .acc { margin-top: 18px; }
.acc summary { font-size: 15.5px; padding: 14px 0; }
.acc .body p + p { margin-top: 10px; }
.reviews.min { padding: 16px 20px 14px; margin-top: 8px; }
.reviews.min .top { margin-bottom: 12px; }
.reviews.min .rcard { padding: 12px 14px; }
.kitsum { padding: 2px 0 16px; }
.checkout h1 { margin-bottom: 10px; }
.checkout .card { padding: 18px; }
.done .infos { margin: 10px 0; }
.early { margin: 12px 0 16px; }
.flash { padding: 16px 20px; }
.flash h1 { margin: 0 0 8px; font-size: 18px; }
.upsell { padding-bottom: 20px; }
.listhead { padding: 14px 0 10px; }
.prod .bottle { height: 130px; }
.prod .n { min-height: 0; }
.prod .n2 { display: none; }
.foot.min .wrap { gap: 8px; padding: 22px 20px 26px; }
.foot.min .tiny { font-size: 11px; color: rgba(255, 255, 255, .5); }
.dock .dp b { font-size: 20px; }
.dock .dp span { font-size: 12px; }
.dock .dp .pts { display: none; }

/* Banner do kit no lugar da galeria */
.gal.photo { padding: 12px 0 16px; }
.gal.photo img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.gal.photo .fav { top: 22px; right: 10px; background: rgba(255, 255, 255, .85); border-radius: 50%; padding: 6px; }

/* Indicador animado pra tocar e escolher */
#builder .pk.nudge { opacity: 1; border-color: var(--ink); animation: nudgering 1.6s ease-in-out infinite; }
@keyframes nudgering { 0%, 100% { box-shadow: 0 0 0 0 rgba(32, 32, 32, .35); } 50% { box-shadow: 0 0 0 7px rgba(32, 32, 32, 0); } }
#builder .pk.nudge .ck { animation: nudgeck 1.6s ease-in-out infinite; }
@keyframes nudgeck { 0%, 100% { transform: scale(1); border-color: var(--line); } 50% { transform: scale(1.25); border-color: var(--ink); } }
#builder .pk .tap { position: absolute; right: -6px; bottom: 38px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(204, 9, 9, .35); animation: tapbounce 1.6s ease-in-out infinite; pointer-events: none; }
#builder .pk .tap .ico { width: 17px; height: 17px; stroke-width: 1.8; }
@keyframes tapbounce { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-6px, -8px) scale(.9); } 55% { transform: translate(-6px, -8px) scale(1.05); } }
.bcount.warn { animation: countblink 1.6s ease-in-out infinite; }
@keyframes countblink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #builder .pk.nudge, #builder .pk.nudge .ck, #builder .pk .tap, .bcount.warn { animation: none; } }

/* Demo animada: mão tocando frasco por frasco */
#builder .grid5 { position: relative; }
#hand { position: absolute; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(204, 9, 9, .4); pointer-events: none; transition: left .45s cubic-bezier(.3, .8, .3, 1), top .45s cubic-bezier(.3, .8, .3, 1), transform .18s ease; transform: translate(6px, 10px) rotate(-8deg); }
#hand .ico { width: 19px; height: 19px; stroke-width: 1.8; }
#hand.down { transform: translate(2px, 4px) scale(.82) rotate(-8deg); }
#builder .pk { overflow: hidden; }
#builder .pk.press { transform: scale(.93); border-color: var(--ink); opacity: 1; background: var(--soft); }
#builder .pk .ripple { position: absolute; left: 50%; top: 55%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(204, 9, 9, .28); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(12); opacity: 0; } }
#builder .pk.nudge, #builder .pk .tap { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) { #hand { display: none; } }

/* Benefícios com copy */
.perks { border-top: 1px solid var(--line-soft); margin: 4px 0 14px; }
.perk { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.perk .pn { flex: none; width: 92px; text-align: center; }
.perk .pn .ico { width: 22px; height: 22px; margin: 0 auto 6px; stroke-width: 1.5; }
.perk .pn b { display: block; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -.01em; }
.perk:first-child .pn b { color: var(--red); }
.perk .pn span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-top: 4px; }
.perk .pt { flex: 1; min-width: 0; }
.perk .pt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.perk .pt p { font-size: 13px; color: var(--text); line-height: 1.45; }
.perks3 { display: none; }
.perk .pn { width: 98px; }
.perk .pn b.long { font-size: 16px; white-space: nowrap; }

/* Copy do perfil, tom Aurore */
.you { margin: 12px 0 4px; }
.you .y1 { font-size: 15px; color: var(--ink); }
.you .y1 b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.you .y2 { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-top: 6px; }
.you .y2 em { font-style: normal; font-weight: 700; color: var(--ink); }
.you .y3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-top: 8px; }

/* Montador empilhado: uma linha por perfume */
#builder .grid5 { display: flex; flex-direction: column; gap: 6px; }
#builder .pk { display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 12px 6px 8px; min-height: 58px; opacity: 1; border: 1.5px solid var(--line-soft); border-radius: 8px; }
#builder .pk .bottle { width: 40px; height: 52px; margin: 0; flex: none; }
#builder .pk b { display: block; font-size: 14px; line-height: 1.15; flex: 1; }
#builder .pk b small { display: block; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; font-weight: 700; }
#builder .pk > small { display: none; }
#builder .pk .ck { position: static; width: 22px; height: 22px; margin-left: auto; flex: none; }
#builder .pk .ck .ico { width: 13px; height: 13px; }
#builder .pk:not(.on) { opacity: .75; }
#builder .pk:not(.on) .bottle { filter: grayscale(.4); }
#builder .pk.on { border: 1.5px solid var(--ink); background: var(--soft); }
#builder .pk.press { transform: scale(.985); }
#builder .pk .ripple { left: auto; right: 10px; top: 50%; }

/* Logo oficial */
.mark { display: flex; align-items: center; padding: 0; }
.logo { height: 15px; width: auto; display: block; }
.store .logo { height: 15px; }
.foot .logo.inv { height: 13px; filter: invert(1); opacity: .95; margin-bottom: 4px; }

/* Rodapé reto, logo pequeno */
.foot .stripes { display: none; }
.foot.min .wrap { align-items: flex-start; }
.foot .logo.inv { width: 112px; height: auto; max-width: 112px; align-self: flex-start; flex: none; margin-bottom: 6px; }

/* Foto do kit nas miniaturas */
.thumb-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; display: block; }
.kitsum .thumb-img { width: 72px; height: 72px; }

/* Primeira página leve + VSL em formato stories */
.vsllanding .kicker.soft { background: none; color: var(--mute); padding: 0; font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .14em; }
.vsllanding h1.light { font-family: var(--body); font-weight: 400; font-size: 22px; text-transform: none; line-height: 1.3; margin: 8px 0 16px; color: var(--ink); }
.vsllanding h1.light span { color: var(--mute); }
.vsllanding .note { margin-top: 12px; }
.story { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; margin: 0 auto 16px; border-radius: 22px; overflow: hidden; background: #111; color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.story .scover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform: scale(1.04); transition: transform 60s linear; }
.story.playing .scover { transform: scale(1.18); }
.story .sshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, .75) 100%); }
.story .sbar { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 4px; }
.story .sbar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; display: block; }
.story .sbar i b { display: block; height: 100%; width: 0; background: #fff; }
.story .shead { position: absolute; left: 12px; right: 10px; top: 22px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.story .sav { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 14px; flex: none; }
.story .sname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.story .sname small { font-weight: 400; opacity: .85; font-size: 11.5px; }
.story .mute { position: static; width: 32px; height: 32px; background: rgba(0, 0, 0, .35); border: 0; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.story .mute .ico { width: 17px; height: 17px; }
.story .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; color: #fff; }
.story .play .ico { width: 68px; height: 68px; padding: 20px 17px 20px 23px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); fill: currentColor; stroke: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.story .play:active .ico { transform: scale(.94); }
.story .play span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.story .bigtxt { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--display); font-weight: 700; font-size: 36px; letter-spacing: -.01em; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.story .cap { position: absolute; left: 14px; right: 14px; bottom: 18px; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 600; opacity: 0; transition: opacity .3s; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.story.playing .play { display: none; }
.story.playing .cap, .story.playing .bigtxt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .story .scover { transition: none; } }

/* Quiz: respira e centraliza */
.quiz { min-height: calc(100dvh - 120px); display: flex; flex-direction: column; justify-content: center; padding: 28px 0 40px; }
.quiz .progress { margin: 0 0 22px; height: 3px; }
.quiz .qhead { margin-bottom: 8px; }
.quiz .qhead .n.soft { color: var(--line); }
.quiz .question { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0 0 22px; letter-spacing: -.01em; }
.opts { gap: 12px; }
.opt { min-height: 124px; padding: 16px 14px 14px; gap: 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line-soft); font-size: 15px; font-weight: 600; }
.opt i { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s ease; }
.opt i .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.opt:active i, .opt.picked i { background: rgba(255, 255, 255, .14); }
.opt:active, .opt.picked { box-shadow: none; }
.opts.three .opt { min-height: 72px; padding: 12px 16px; }
.qnote { text-align: center; font-size: 12.5px; color: var(--mute); margin-top: 20px; }
.textq input { height: 52px; }
.row2 { margin-top: 14px; }

.quiz.first { min-height: 0; justify-content: flex-start; padding-top: 22px; }

/* Scrollbar fina e preta */
html { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #000; }

/* Fantasma da seleção: mostra o estado "escolhido" a 40% pra ensinar o toque */
#builder .pk { position: relative; }
#builder .pk.ghost::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--soft); opacity: .4; pointer-events: none; animation: ghostin .35s ease both; z-index: 0; }
#builder .pk.ghost .ck { background: rgba(32, 32, 32, .4); border-color: rgba(32, 32, 32, .4); color: #fff; }
#builder .pk.ghost .ck .ico { opacity: .9; }
#builder .pk > * { position: relative; z-index: 1; }
#builder .pk.on.ghost::after { border-style: dashed; background: transparent; }
@keyframes ghostin { from { opacity: 0; } to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { #builder .pk.ghost::after { animation: none; } }

/* ---------- Benefícios v2: gift card, sorteio e frete ---------- */
.perks2 { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 16px; }
.perk2 .pt b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.perk2 .pt p { font-size: 13.5px; color: var(--text); line-height: 1.45; }
.perk2.gift .pt { margin-top: 14px; }
/* Gift card */
.gc-wrap { perspective: 1200px; }
.gc-scene { transform-style: preserve-3d; }
.gc { position: relative; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden; color: #fff; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #2a2a2e 0%, #121214 45%, #1f1b1d 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: rotateY(-70deg) translateY(16px); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.gc-wrap.in .gc { transform: rotateY(0) translateY(0); opacity: 1; animation: gcfloat 5s ease-in-out 1.1s infinite; }
@keyframes gcfloat { 0%, 100% { transform: rotateY(0) translateY(0) rotateX(0); } 50% { transform: rotateY(-4deg) translateY(-4px) rotateX(2deg); } }
.gc::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 14px); pointer-events: none; }
.gc-holo { position: absolute; right: -30%; top: -40%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 207, 122, .28), rgba(240, 207, 122, 0) 60%); pointer-events: none; }
.gc-shine { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.gc-wrap.in .gc-shine { animation: gcshine 4.2s ease-in-out 1.2s infinite; }
@keyframes gcshine { 0% { left: -60%; opacity: 0; } 8% { opacity: 1; } 30% { left: 120%; opacity: 1; } 31%, 100% { left: 120%; opacity: 0; } }
.gc-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.gc-top img { width: 96px; height: auto; filter: invert(1); opacity: .95; }
.gc-top span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #f0cf7a; font-weight: 700; }
.gc-amt { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: .95; letter-spacing: -.03em; position: relative; background: linear-gradient(180deg, #fff 0%, #f0cf7a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gc-amt small { font-size: 22px; letter-spacing: 0; vertical-align: top; margin-right: 4px; font-weight: 600; }
.gc-sub { font-size: 11.5px; color: rgba(255, 255, 255, .78); position: relative; margin-top: -4px; }
.gc-bot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; font-family: var(--display); }
.gc-bot span { display: block; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 600; }
.gc-bot b { display: block; font-size: 15px; letter-spacing: .14em; font-weight: 600; margin-top: 2px; }
.gc-bot .r { text-align: right; }
.gc-bot .r b { color: #f0cf7a; }
/* Sorteio */
.lucky { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 20px 18px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #3a2d1e 0%, #141416 55%, #0e0e10 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }
.lucky::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(240, 207, 122, .25); pointer-events: none; }
.lk-eyebrow { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.lk-amt { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: -.02em; margin: 8px 0 6px;
  background: linear-gradient(100deg, #b9892c 0%, #f6e3a1 35%, #c9a24a 50%, #fff2c2 65%, #b9892c 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: scale(.85); opacity: 0; transition: transform .8s cubic-bezier(.2, 1.4, .4, 1), opacity .5s ease; }
.lucky.in .lk-amt { transform: scale(1); opacity: 1; animation: goldshift 3.5s linear .8s infinite; }
@keyframes goldshift { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.lk-txt { font-size: 13.5px; color: rgba(255, 255, 255, .78); line-height: 1.45; margin: 0 auto 14px; max-width: 320px; }
.lk-txt b { color: #fff; }
.lk-ticket { position: relative; margin: 0 auto 10px; max-width: 280px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(240, 207, 122, .55); border-radius: 10px; padding: 12px 16px 10px;
  transform: translateY(14px); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1) .35s, opacity .5s ease .35s; }
.lucky.in .lk-ticket { transform: none; opacity: 1; animation: tkfloat 4s ease-in-out 1.3s infinite; }
@keyframes tkfloat { 50% { transform: translateY(-3px); } }
.lk-ticket span { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; }
.lk-ticket b { display: block; font-family: var(--display); font-size: 24px; letter-spacing: .12em; color: #f0cf7a; margin: 3px 0 2px; }
.lk-ticket em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .6); }
.lk-cut { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #141416; transform: translateY(-50%); border: 1px dashed rgba(240, 207, 122, .55); }
.lk-cut.l { left: -8px; } .lk-cut.r { right: -8px; }
.lucky .ex { color: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .3); }
.lucky .sp { position: absolute; width: 10px; height: 10px; background: #f6e3a1; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.lucky.in .sp { animation: twinkle 2.6s ease-in-out infinite; }
.lucky .sp.a { left: 8%; top: 18%; } .lucky .sp.b { right: 10%; top: 14%; animation-delay: .6s !important; width: 14px; height: 14px; }
.lucky .sp.c { left: 16%; bottom: 26%; animation-delay: 1.2s !important; } .lucky .sp.d { right: 18%; bottom: 20%; animation-delay: 1.8s !important; width: 8px; height: 8px; }
.lucky .sp.e { left: 50%; top: 10%; animation-delay: 2.2s !important; width: 7px; height: 7px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
/* Frete */
.perk2.ship { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 4px; border-top: 1px solid var(--line-soft); }
.perk2.ship .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; }
.perk2.ship .ic .ico { width: 22px; height: 22px; stroke-width: 1.5; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill { font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px 4px; color: var(--ink); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .gc, .lk-amt, .lk-ticket { transition: none; transform: none; opacity: 1; } .gc-wrap.in .gc, .gc-wrap.in .gc-shine, .lucky.in .lk-amt, .lucky.in .lk-ticket, .lucky.in .sp { animation: none; } }
.perk2.ship { flex-direction: row; }
.perk2.ship .pt { flex: 1; min-width: 0; }

/* Gift card v2: branco, escondido até o toque */
.gc-wrap { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gc-scene { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.gc-wrap.open .gc-scene { transform: rotateY(180deg); }
.gc-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gc-face.back { background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); transform: translateY(16px); opacity: 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.gc-wrap.in .gc-face.back { transform: none; opacity: 1; }
.gc-face.back::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 18px); }
.gc-face.back img { width: 120px; height: auto; filter: invert(1); position: relative; }
.gc-tap { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 30px; padding: 11px 18px 10px; font-size: 13.5px; font-weight: 700; animation: tapnudge 1.8s ease-in-out infinite; }
.gc-tap .ico { width: 18px; height: 18px; stroke-width: 1.8; }
@keyframes tapnudge { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.gc-hint { position: relative; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.gc-face.front { transform: rotateY(180deg); }
.gc, .gc-wrap.in .gc { background: #fff; color: var(--ink); border: 1px solid var(--line-soft); box-shadow: 0 14px 34px rgba(0, 0, 0, .14); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; opacity: 1; transform: none; animation: none; }
.gc::before { background: none; }
.gc-holo { display: none; }
.gc-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, #fff 14px 28px); }
.gc-shine { background: linear-gradient(100deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 100%); }
.gc-wrap.open .gc-shine { animation: gcshine 4.2s ease-in-out .9s infinite; }
.gc-wrap.in .gc-shine { animation: none; }
.gc-top img { filter: none; opacity: 1; width: 96px; }
.gc-top span { color: var(--ink); background: var(--ink); color: #fff; padding: 4px 8px 3px; font-size: 9px; }
.gc-amt { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); }
.gc-sub { color: var(--text); }
.gc-bot span { color: var(--mute); }
.gc-bot b { color: var(--ink); }
.gc-bot .r b { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .gc-scene { transition: none; } .gc-tap { animation: none; } }
.gc-wrap .gc-face.front, .gc-wrap.in .gc-face.front { transform: rotateY(180deg); }
.gc-wrap .gc-face.back { transform: translateY(16px); }
.gc-wrap.in .gc-face.back { transform: none; }
.gc-face { transition: visibility 0s linear .45s, transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.gc-wrap:not(.open) .gc-face.front { visibility: hidden; }
.gc-wrap.open .gc-face.back { visibility: hidden; }
.gc-wrap.in .gc-face.back { opacity: 1; }
.gift-head { margin: 6px 0 14px; }
.gift-head .eyebrow { display: block; margin-bottom: 6px; }
.gift-head h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 6px; }
.gift-head p { font-size: 14px; color: var(--text); line-height: 1.45; }

/* ---------- Gift card raspadinha ---------- */
.gc-wrap { position: relative; perspective: none; cursor: default; }
.gc-wrap .gc { position: relative; opacity: 1; transform: none; }
.gc-wrap .gc-face, .gc-scene { display: none; }
.gc-scratch { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; touch-action: none; cursor: grab; z-index: 3; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); transition: opacity .6s ease, transform .6s ease; }
.gc-scratch:active { cursor: grabbing; }
.gc-wrap.done .gc-scratch { opacity: 0; transform: scale(1.06); pointer-events: none; }
.gc-wrap.done .gc { animation: gcpop .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gcpop { 0% { transform: scale(.98); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
.gc-wrap.done .gc-shine { animation: gcshine 1.6s ease-out .15s 1, gcshine 4.2s ease-in-out 3s infinite; }
.gc-wrap .gc-shine { background: linear-gradient(100deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, 0) 100%); z-index: 2; }
.gc-hint { position: absolute; left: 50%; top: 50%; z-index: 4; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); pointer-events: none; animation: scratchpath 2.8s ease-in-out infinite; }
.gc-hint .ico { width: 22px; height: 22px; stroke-width: 1.8; }
@keyframes scratchpath { 0% { transform: translate(-90px, -26px) scale(.9); } 12% { transform: translate(-90px, -26px) scale(1); } 30% { transform: translate(80px, -14px) scale(1); } 50% { transform: translate(-80px, 6px) scale(1); } 70% { transform: translate(85px, 24px) scale(1); } 88% { transform: translate(-60px, 34px) scale(1); } 100% { transform: translate(-90px, -26px) scale(.9); } }
.gc-flakes { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.gc-flakes i { position: absolute; display: block; border-radius: 1px; background: linear-gradient(135deg, #f4f4f4, #9d9d9d); box-shadow: 0 0 2px rgba(0, 0, 0, .25); animation: flake .85s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes flake { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gc-hint { animation: none; } .gc-wrap.done .gc, .gc-wrap.done .gc-shine { animation: none; } }

/* ---------- Gift card: deslize pra desbloquear ---------- */
.gc-wrap { --x: 0px; position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.gc-wrap * { -webkit-user-drag: none; }
.gc-wrap.drag { cursor: grabbing; }
.gc-cover { position: absolute; inset: 0; z-index: 3; border-radius: 16px; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; clip-path: inset(0 0 0 var(--x) round 16px); overflow: hidden; }
.gc-cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 18px); }
.gc-cover img { width: 118px; height: auto; filter: invert(1); position: relative; }
.gc-cover-txt { position: relative; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.gc-cover-txt::before { content: ""; width: 18px; height: 2px; background: linear-gradient(90deg, transparent, #fff); }
.gc-cover-txt::after { content: ""; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-left: -4px; }
.gc-cover-sub { position: relative; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.gc-bar { position: absolute; top: -6px; bottom: -6px; left: var(--x); width: 16px; margin-left: -8px; z-index: 4; border-radius: 8px; pointer-events: none;
  background: linear-gradient(90deg, #8f8f8f 0%, #f5f5f5 28%, #c4c4c4 50%, #ffffff 72%, #9a9a9a 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .35), inset 0 0 6px rgba(255, 255, 255, .6); }
.gc-bar::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 5px); }
.gc-bar .knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: linear-gradient(135deg, #ffffff, #bdbdbd); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
.gc-bar .knob .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.gc-wrap.anim .gc-cover, .gc-wrap.anim .gc-bar { transition: clip-path .55s cubic-bezier(.2, .8, .2, 1), left .55s cubic-bezier(.2, .8, .2, 1); }
.gc-wrap:not(.drag):not(.done):not(.anim) .gc-bar { animation: barnudge 2.2s ease-in-out infinite; }
.gc-wrap:not(.drag):not(.done):not(.anim) .gc-cover { animation: covernudge 2.2s ease-in-out infinite; }
@keyframes barnudge { 0%, 100% { left: var(--x); } 40% { left: calc(var(--x) + 34px); } 60% { left: calc(var(--x) + 34px); } }
@keyframes covernudge { 0%, 100% { clip-path: inset(0 0 0 var(--x) round 16px); } 40% { clip-path: inset(0 0 0 calc(var(--x) + 34px) round 16px); } 60% { clip-path: inset(0 0 0 calc(var(--x) + 34px) round 16px); } }
.gc-wrap.done .gc-bar { opacity: 0; transition: left .55s cubic-bezier(.2, .8, .2, 1), opacity .3s ease .45s; }
.gc-wrap.done .gc-cover { pointer-events: none; }
.gc-wrap.done .gc { animation: gcpop .7s cubic-bezier(.2, 1.4, .4, 1) .3s; }
.gc-wrap.done .gc-shine { animation: gcshine 1.6s ease-out .5s 1, gcshine 4.2s ease-in-out 3s infinite; }
.gc-scratch, .gc-hint, .gc-flakes { display: none; }
@media (prefers-reduced-motion: reduce) { .gc-bar, .gc-cover { animation: none !important; } }
.lk-ticket b .blur { filter: blur(6px); user-select: none; -webkit-user-select: none; }
.lk-ticket b .blur { display: inline-block; filter: blur(4px); opacity: .9; }
.lk-ticket b .blur { filter: blur(2.5px); opacity: 1; letter-spacing: .14em; }
.lk-ticket b .blur { display: inline-block; font: inherit; color: inherit; text-transform: none; letter-spacing: .14em; margin: 0; filter: blur(3px); }
/* Sorteio v2: claro e neutro, só o valor em cor */
.lucky { background: var(--soft); color: var(--ink); box-shadow: none; border: 1px solid var(--line-soft); }
.lucky::after { display: none; }
.lk-eyebrow { color: var(--mute); }
.lk-amt { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--red); }
.lucky.in .lk-amt { animation: none; }
.lk-txt { color: var(--text); }
.lk-txt b { color: var(--ink); }
.lk-ticket { background: #fff; border: 1px dashed var(--line); }
.lk-ticket span { color: var(--mute); }
.lk-ticket b { color: var(--ink); }
.lk-ticket em { color: var(--mute); }
.lk-cut { background: var(--soft); border: 1px dashed var(--line); }
.lucky .ex { color: var(--mute); border-color: var(--line); }
.lucky .sp { background: var(--red); opacity: 0; }
.lucky.in .sp { animation: twinkle 2.6s ease-in-out infinite; }
/* Sorteio v3: vermelho de campanha */
.lucky { background: radial-gradient(120% 90% at 50% 0%, #ff3b45 0%, #cc0909 45%, #9e0606 100%); color: #fff; border: 0; box-shadow: 0 16px 36px rgba(204, 9, 9, .3); padding: 24px 20px 20px; }
.lucky::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 24px); pointer-events: none; }
.lucky::after { display: block; border: 1px solid rgba(255, 255, 255, .25); }
.lk-eyebrow { color: rgba(255, 255, 255, .78); position: relative; }
.lk-amt { color: #fff; font-size: 62px; text-shadow: 0 6px 24px rgba(0, 0, 0, .25); position: relative; }
.lucky.in .lk-amt { animation: amtpulse 2.8s ease-in-out 1s infinite; }
@keyframes amtpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lk-txt { color: rgba(255, 255, 255, .92); position: relative; }
.lk-txt b { color: #fff; }
.lk-ticket { background: var(--ink); border: 1px dashed rgba(255, 255, 255, .55); color: #fff; }
.lk-ticket span { color: rgba(255, 255, 255, .6); }
.lk-ticket b { color: #fff; }
.lk-ticket em { color: rgba(255, 255, 255, .65); }
.lk-cut { background: #c30909; border: 1px dashed rgba(255, 255, 255, .55); }
.lucky .ex { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .5); position: relative; }
.lucky .sp { background: #fff; }
.lucky .sp.b { width: 18px; height: 18px; }
.lk-head { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* ---------- Checkout v2 ---------- */
.steps { display: flex; gap: 6px; margin: 12px 0 8px; }
.steps span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 8px 0 6px; border-top: 3px solid var(--line-soft); }
.steps span.on { color: var(--ink); border-top-color: var(--ink); }
.checkout h1 { margin-bottom: 12px; }
.card.ck { padding: 18px 16px 16px; }
.ckhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ckhead .lbl { margin: 0; }
.ckwhy { font-size: 12px; color: var(--mute); text-align: right; }
.field { margin-bottom: 12px; }
.field label { font-size: 12.5px; color: var(--text); }
.field .inp { position: relative; }
.field input { height: 52px; font-size: 16px; padding-right: 40px; border-radius: 10px; }
.field .okmark { position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ok); color: #fff; display: none; align-items: center; justify-content: center; }
.field .okmark .ico { width: 13px; height: 13px; stroke-width: 3; }
.field.ok .okmark { display: flex; }
.field.ok input { border-color: var(--ok); }
.field.err input { border-color: var(--err); background: #fff7f7; }
.cepstatus { font-size: 12.5px; font-weight: 700; margin: -4px 0 12px; }
.cepstatus.busy { color: var(--mute); }
.cepstatus.err { color: var(--err); }
.hide { display: none !important; }
.addrview { display: flex; flex-direction: column; gap: 2px; background: var(--soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; }
.addrview b { font-size: 14.5px; }
.addrview span { color: var(--text); }
.addrview .link { align-self: flex-start; margin-top: 6px; font-size: 13px; }
.addrview:empty { display: none; }
.card.ck > .link { display: block; margin: -2px 0 14px; font-size: 13px; color: var(--mute); }
.card.ck .ship { margin-top: 4px; }
.who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.who b { font-size: 15px; }
.who span { color: var(--mute); font-size: 13px; }
.dock.paybar .dp b { font-size: 22px; }
.dock.paybar .btn { padding: 2px 22px 0; }
.card.ck > .link[hidden] { display: none !important; }

/* ---------- Checkout por etapas ---------- */
.steps { display: flex; gap: 6px; margin: 14px 0 6px; }
.steps .st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border-bottom: 3px solid var(--line-soft); transition: color .25s ease, border-color .25s ease; }
.steps .st i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--display); font-size: 12px; transition: all .25s ease; }
.steps .st i .ico { width: 13px; height: 13px; stroke-width: 3; }
.steps .st.on { color: var(--ink); border-bottom-color: var(--ink); }
.steps .st.on i { border-color: var(--ink); background: var(--ink); color: #fff; }
.steps .st.done { color: var(--ink); border-bottom-color: var(--ink); }
.steps .st.done i { border-color: var(--ok); background: var(--ok); color: #fff; }
.steps .st[disabled] { cursor: default; }
.checkout h1 { margin: 16px 0 4px; }
.cklead { font-size: 14px; color: var(--text); margin-bottom: 14px; }
.ckpane { animation: ckfwd .45s cubic-bezier(.2, .8, .2, 1) both; }
.ckpane.back { animation-name: ckback; }
@keyframes ckfwd { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ckback { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.rev { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rev:last-child { border-bottom: 0; padding-bottom: 2px; }
.rev:first-child { padding-top: 0; }
.rev span { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.rev b { display: block; font-size: 14.5px; margin: 2px 0; }
.rev em { font-style: normal; font-size: 12.5px; color: var(--text); }
.rev .link { flex: none; font-size: 13px; }
.dock.paybar .btn.black { min-height: 46px; font-size: 12.5px; letter-spacing: .1em; }
.dock.paybar .btn .ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .ckpane { animation: none; } }

/* ---------- Loja relâmpago v2 (formato de campanha) ---------- */
.upsell { padding: 0 0 80px; }
.upbanner { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 26px 20px 24px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 15% 100%, #ff4d5a 0%, #cc0909 45%, #9e0606 100%); }
.upbanner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 85% 15%, rgba(255, 255, 255, .22), transparent 70%); }
.upbanner .stripes { position: absolute; right: -36px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; background: repeating-linear-gradient(135deg, #fff 0 14px, #202020 14px 28px); transform: rotate(-10deg); z-index: -1; }
.upbanner .stripes.s2 { left: -50px; top: -50px; right: auto; bottom: auto; width: 120px; height: 120px; border-radius: 30% 70% 60% 40%; }
.upbanner .kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.upbanner .big { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: .95; text-transform: uppercase; letter-spacing: -.02em; margin: 10px 0 4px; }
.upbanner .big b { font-size: 92px; display: block; letter-spacing: -.04em; }
.upbanner .sub { font-size: 15px; font-weight: 700; }
.upbanner .count { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.upbanner .count b { font-family: var(--display); font-size: 26px; letter-spacing: .04em; background: var(--ink); padding: 6px 12px 4px; border-radius: 6px; }
.upbanner .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.upbanner .cta i { width: 0; height: 0; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: block; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips .chip { flex: none; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); border-radius: 30px; padding: 9px 14px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.chips .chip.on { background: var(--ink); color: #fff; }
.upsell .sec-title { margin: 14px 0 12px; }
.feat { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 14px; scrollbar-width: none; }
.feat::-webkit-scrollbar { display: none; }
.prod.big { flex: none; width: 62%; scroll-snap-align: start; }
.prod { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 10px 14px; }
.prod .pic { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #faf6f0, #f1eae0); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.prod .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.prod .pic .bottle { width: 62%; height: 78%; margin: 0; }
.prod .pic .tag { position: absolute; left: 8px; z-index: 2; }
.prod .pic .tag.off { top: 8px; }
.prod .pic .tag:not(.off) { top: 32px; background: var(--ink); }
.prod .pic .fav { position: absolute; right: 6px; top: 6px; z-index: 2; background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.prod .pic .fav .ico { width: 18px; height: 18px; }
.prod .bottle { height: auto; margin: 0; }
.prod > .fav, .prod > .off { display: none; }
.prod .btn.flat { border-radius: 6px; min-height: 40px; font-size: 13.5px; }
.prod .b { font-size: 13px; margin-top: 10px; }
.prod .n { font-size: 12.5px; min-height: 2.6em; }
.prod s { font-size: 12px; }
.prod .p { font-size: 20px; }
.prod .pix-l { font-size: 10.5px; letter-spacing: .06em; }
.prod.big .b { font-size: 14px; }
.prod.big .p { font-size: 22px; }
.listbar .l .ico { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Kit fechado: vitrine dos 4 ---------- */
.kitcards { margin: 14px 0 6px; }
.kc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.kc-n { font-size: 12px; color: var(--mute); font-weight: 700; }
.kc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kc { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px 14px; }
.kc-pic { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #f6ecde; margin-bottom: 10px; }
.kc-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transition: transform .6s ease; }
.kc:active .kc-pic img { transform: scale(1.04); }
.kc-b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.kc-n2 { font-size: 15px; font-weight: 700; margin: 2px 0 4px; }
.kc-adj { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.kc-d { font-size: 12px; color: var(--text); line-height: 1.4; }
.kitcards .hint { font-size: 12.5px; color: var(--mute); margin: 10px 0 0; }
/* frascos em foto nas galerias */
.trio.photos .pf img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #f6ecde; margin-bottom: 6px; }
.done .trio.photos { gap: 6px; }
#builder, .gc-wrap .gc-hint { display: none; }

/* Vídeo de unboxing no lugar da foto do kit */
.gal.video .galvid { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius); display: block; background: #f6ecde; }

/* ===== fotos de clientes nas avaliações ===== */
.rpics { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rpic { flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #f3f3f3; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; transition: transform .18s ease; }
.rpic:active { transform: scale(.96); }
.rpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpics-tag { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 24px 16px; opacity: 0; transition: opacity .22s ease; }
.lightbox.on { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; transform: scale(.94); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.lightbox.on img { transform: scale(1); }
.lightbox .lb-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; }
.lightbox .lb-x .ico { width: 18px; height: 18px; stroke: #fff; }

/* ---------- Pesquisa de Perfil Olfativo (quiz v4): lista editorial, só toque ---------- */
.quiz { justify-content: flex-start; padding: 26px 0 40px; }
.quiz.first { padding-top: 20px; }
.qbrand { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.qbrand .cnt { letter-spacing: .08em; color: var(--mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.qbrand .cnt b { color: var(--ink); font-weight: 600; }
.qsteps { display: flex; gap: 4px; margin: 12px 0 26px; }
.qsteps i { flex: 1; height: 2px; background: var(--line-soft); position: relative; overflow: hidden; }
.qsteps i.s-done { background: var(--ink); }
.qsteps i.s-now::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: qfill .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes qfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.qintro { font-size: 14px; line-height: 1.5; color: var(--text); padding: 0 0 20px; margin: 0 0 22px; border-bottom: 1px solid var(--line-soft); }
.qtag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.qtag::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.quiz .question { font-family: var(--body); font-size: 25px; font-weight: 300; line-height: 1.22; letter-spacing: -.015em; margin: 10px 0 8px; color: var(--ink); text-wrap: balance; }
.qsub { font-size: 14px; line-height: 1.45; color: var(--mute); margin: 0 0 22px; }
.quiz .opts, .quiz .opts.three { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-soft); }
.quiz .opt, .quiz .opts.three .opt { flex-direction: row; align-items: center; gap: 14px; min-height: 76px; padding: 14px 4px 13px; background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; color: var(--ink); transform: none; transition: background .2s ease, padding .2s ease; -webkit-tap-highlight-color: transparent; }
.quiz .opt i { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); transition: background .2s ease, color .2s ease; }
.quiz .opt i .ico { width: 21px; height: 21px; stroke-width: 1.4; }
.quiz .opt .ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.quiz .opt .ot b { font-size: 16px; font-weight: 600; line-height: 1.2; }
.quiz .opt .ot small { font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--mute); }
.quiz .opt .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.quiz .opt .mark .ico { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.4; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.quiz .opt:active { background: var(--soft); color: var(--ink); }
.quiz .opt.picked { background: none; color: var(--ink); padding-left: 8px; }
.quiz .opt.picked i { background: var(--ink); color: #fff; }
.quiz .opt.picked .mark { background: var(--ink); border-color: var(--ink); }
.quiz .opt.picked .mark .ico { opacity: 1; transform: none; }
.quiz .opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.quiz .qnote { font-size: 12px; letter-spacing: .04em; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .qsteps i.s-now::after { animation: none; } .quiz .opt, .quiz .opt .mark .ico { transition: none; } }

/* Mini VSL com vídeo real: preenche o card 9:16 sem sair da proporção */
.story .svid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* Capa em GIF: aparece antes do play; o vídeo entra por cima quando toca */
.story .svid { opacity: 0; transition: opacity .25s ease; }
.story.playing .svid { opacity: 1; }
.story .scover { transform: none; }
.story.playing .scover { transform: none; }

/* Headline da primeira tela: quantidade e preço em destaque */
.vsllanding h1.hero-offer { display: flex; align-items: stretch; margin: 10px 0 0; font-family: var(--display); color: var(--ink); text-transform: none; line-height: 1; }
.hero-offer .ho-q { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--ink); }
.hero-offer .ho-q b { font-size: 84px; font-weight: 600; line-height: .8; letter-spacing: -.04em; }
.hero-offer .ho-q span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; }
.hero-offer .ho-p { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 8px; padding-left: 16px; }
.hero-offer .ho-p s { grid-column: 1 / -1; font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--mute); align-self: start; }
.hero-offer .ho-p em { order: -1; grid-column: 1 / -1; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.hero-offer .ho-p strong { grid-column: 1 / -1; display: flex; align-items: flex-start; font-size: 60px; font-weight: 600; letter-spacing: -.035em; line-height: .86; color: var(--red); white-space: nowrap; }
.hero-offer .ho-p strong small { font-size: 18px; font-weight: 600; letter-spacing: 0; margin: 4px 5px 0 0; }
.hero-offer .ho-p strong sup { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.hero-sub { font-size: 14px; color: var(--mute); margin: 14px 0 16px; }
@media (max-width: 370px) { .hero-offer .ho-q b { font-size: 72px; } .hero-offer .ho-p strong { font-size: 52px; } }
.hero-offer .ho-p s { order: -2; }
.hero-offer .ho-p em { margin: 2px 0 4px; }

/* Headline variação B: bloco preto, tipografia empilhada */
.vsllanding h1.hero-b { display: block; margin: 12px 0 0; padding: 22px 20px 18px; background: var(--ink); color: #fff; border-radius: 14px; font-family: var(--display); text-transform: none; line-height: 1; }
.hero-b > span { display: block; }
.hero-b .hb-l1 { font-size: 38px; font-weight: 500; letter-spacing: -.03em; }
.hero-b .hb-l1 b { font-weight: 600; }
.hero-b .hb-l2 { display: flex; align-items: flex-start; margin-top: 8px; font-size: 76px; font-weight: 600; letter-spacing: -.045em; line-height: .88; color: var(--pink); white-space: nowrap; }
.hero-b .hb-l2 em { font-style: normal; font-size: 38px; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: #fff; margin-right: 12px; align-self: flex-end; }
.hero-b .hb-l2 small { font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 6px 5px 0 0; }
.hero-b .hb-l2 sup { font-size: 30px; letter-spacing: -.02em; margin-top: 4px; }
.hero-b .hb-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); font-family: var(--body); font-size: 13px; font-weight: 400; }
.hero-b .hb-foot s { color: rgba(255, 255, 255, .6); }
.hero-b .hb-foot i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12px; background: var(--red); color: #fff; padding: 4px 8px 3px; border-radius: 4px; }
.hero-b .hb-foot u { text-decoration: none; margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 370px) { .hero-b .hb-l1, .hero-b .hb-l2 em { font-size: 34px; } .hero-b .hb-l2 { font-size: 66px; } }

/* Headline variação C: só tipografia, sem caixas */
.vsllanding h1.hero-c { display: block; margin: 10px 0 0; text-transform: none; color: var(--ink); }
.hero-c .hc-t { display: block; font-family: var(--body); font-size: 30px; font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.hero-c .hc-p { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-family: var(--display); }
.hero-c .hc-p b { font-size: 46px; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
.hero-c .hc-p s { font-family: var(--body); font-size: 16px; font-weight: 400; color: var(--mute); }
.hero-c + .hero-sub { margin-top: 8px; }

/* Etiqueta Pré-Black Friday com prazo */
.pbf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbf > b { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; line-height: 1; padding: 8px 10px 7px; }
.pbf-when { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--red); white-space: nowrap; }
.pbf-when i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pbfblink 1.4s ease-in-out infinite; }
@keyframes pbfblink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pbf-kit { font-size: 13px; color: var(--mute); margin: 10px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.pbf-kit b { color: var(--ink); font-weight: 700; }
.pbf-kit + h1.hero-c { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .pbf-when i { animation: none; } }

/* Etiqueta variação B: contagem regressiva + barra de kits */
.pbf2 { margin: 0 0 16px; }
.pbf2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pbf2-t { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.pbf2-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pbfblink 1.4s ease-in-out infinite; }
.pbf2-c { font-family: var(--display); font-size: 11px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbf2-c b { font-size: 15px; font-weight: 600; color: var(--ink); margin-left: 3px; }
.pbf2-bar { height: 3px; background: var(--line-soft); margin: 10px 0 7px; }
.pbf2-bar i { display: block; height: 100%; background: var(--red); }
.pbf2-bot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.pbf2-bot b { color: var(--ink); font-weight: 700; }
.pbf2 + h1.hero-c { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .pbf2-t i { animation: none; } }
.promo span { white-space: nowrap; }
.promo .wrap { gap: 8px; }
@media (max-width: 370px) { .promo { font-size: 12px; } .promo b { letter-spacing: .1em; padding: 3px 8px 2px; } }

/* Fotos das avaliações maiores e com indicação de toque para ampliar */
.rpics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.rpic { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
.rpic::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14 5h5v5M10 19H5v-5M19 5l-6 6M5 19l6-6%27/%3E%3C/svg%3E") center / 14px no-repeat; }
.rpics-tag { grid-column: 1 / -1; margin: 2px 0 0; }

/* Fim do vídeo: último quadro desfocado + chamada com seta apontando pro botão */
.story .svid { transition: opacity .25s ease, filter .5s ease, transform .5s ease; }
.story.ended .svid { filter: blur(9px) brightness(.72); transform: scale(1.1); }
.story .endcard { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; background: none; border: 0; color: #fff; text-align: center; -webkit-tap-highlight-color: transparent; }
.story.ended .endcard { display: flex; }
.endcard .ec-t { display: flex; flex-direction: column; font-family: var(--display); font-weight: 600; font-size: 27px; line-height: 1.12; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.endcard .ec-t b { font-weight: 600; opacity: 0; animation: ecrise .45s cubic-bezier(.2, .8, .2, 1) forwards; }
.endcard .ec-t b:nth-child(2) { animation-delay: .12s; }
.endcard .ec-pill { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: #f0284a; padding: 6px 12px 5px; border-radius: 20px; opacity: 0; animation: ecpop .4s cubic-bezier(.3, 1.5, .5, 1) .32s forwards; }
.endcard .ec-arrow { margin-top: 10px; opacity: 0; animation: ecrise .4s ease .5s forwards, ecbounce 1s ease-in-out .9s infinite; }
.endcard .ec-arrow .ico { width: 54px; height: 54px; stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
@keyframes ecrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ecpop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ecbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.story.ended ~ .btn { animation: ecbtn 1.2s ease-in-out .9s infinite; }
@keyframes ecbtn { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 9, 9, .45); } 50% { transform: scale(1.025); box-shadow: 0 0 0 10px rgba(204, 9, 9, 0); } }
@media (prefers-reduced-motion: reduce) { .endcard .ec-t b, .endcard .ec-pill, .endcard .ec-arrow { animation: none; opacity: 1; } .story.ended ~ .btn { animation: none; } }

/* Cartão final em GIF (img/mini-vsl-fim.gif, gerado por motion/endcard-gravar.mjs) */
.story.ended .svid { filter: none; transform: none; }
.story .endcard { padding: 0; background: #fff; animation: none; }
.story.ended .endcard { display: block; animation: ecfade .35s ease both; }
.story .endcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story.ended .sbar, .story.ended .shead { z-index: 4; }
@keyframes ecfade { from { opacity: 0; } to { opacity: 1; } }

/* Código de rastreio na confirmação do pedido */
.done .info.track b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 19px; font-weight: 700; letter-spacing: .08em; }
.done .info.track .tnote { display: block; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.done .info.track > span:first-child { display: flex; align-items: center; gap: 8px; }
.done .info.track .ex { display: inline-block; width: auto; margin: 0; }

/* Tela de carregamento: logo + barra */
.loader { position: fixed; inset: 0; z-index: 120; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; transition: opacity .25s ease; }
.loader.on { opacity: 1; }
.loader img { width: 168px; height: auto; display: block; }
.loader .lbar { width: 168px; height: 2px; background: var(--line-soft); overflow: hidden; }
.loader .lbar i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: lfill 3s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes lfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Loja relâmpago v2: cards no padrão de vitrine, com fotos reais ---------- */
.upsell .pgrid { gap: 26px 12px; }
.prod.v2 { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.prod.v2 .pic { aspect-ratio: 1; border-radius: 10px; background: #f5f5f5; margin-bottom: 10px; }
.prod.v2 .pic.pack img { object-fit: contain; object-position: 50% 50%; padding: 11%; box-sizing: border-box; mix-blend-mode: multiply; }
.prod.v2 .pic .tag, .prod.v2 .pic .tag:not(.off) { top: 8px; left: 8px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 3px; }
.prod.v2 .pic .fav { right: 6px; top: 6px; width: 30px; height: 30px; background: #fff; }
.prod.v2 .pic .fav .ico { width: 16px; height: 16px; }
.prod.v2 .b { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 0; }
.prod.v2 .n { font-size: 13.5px; line-height: 1.3; color: var(--text); min-height: 2.6em; margin: 3px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod.v2 .pr { display: flex; align-items: baseline; gap: 8px; }
.prod.v2 .p { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.1; color: var(--ink); }
.prod.v2 .offp { font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--red); }
.prod.v2 s { font-size: 12px; color: var(--mute); margin-top: 2px; }
.prod.v2 .pix-l { font-family: var(--body); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); margin: 1px 0 10px; }
.prod.v2 .btn.flat { margin-top: auto; min-height: 40px; border-radius: 30px; font-size: 13px; background: var(--ink); }
.prod.v2.bought .btn.flat { background: var(--ok); }
.prod.v2.big { width: 58%; }
.prod.v2.big .p { font-size: 21px; }
.feat { gap: 12px; padding-bottom: 18px; }
.upsell .feat { padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
.prod.v2 .pic.pack img { padding: 7%; }

/* Banner da loja relâmpago v2: preto, tipografia limpa, faixa listrada no pé */
.upbanner.v2 { display: block; min-height: 0; padding: 22px 0 0; background: var(--ink); color: #fff; }
.upbanner.v2::before { display: none; }
.upbanner.v2 .kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; opacity: 1; color: var(--pink); }
.upbanner.v2 .kicker .ico { width: 14px; height: 14px; stroke-width: 2; }
.upbanner.v2 .big { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.08; letter-spacing: -.025em; text-transform: none; margin: 10px 0 6px; color: #fff; }
.upbanner.v2 .sub { font-size: 14px; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.upbanner.v2 .count { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding: 12px 0 14px; border-top: 1px solid rgba(255, 255, 255, .18); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.upbanner.v2 .count b { background: none; padding: 0; border-radius: 0; font-size: 24px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.upbanner.v2 .stripe { height: 10px; background: repeating-linear-gradient(90deg, #fff 0 10px, var(--ink) 10px 20px); }

/* Decantes de 10 ml na loja relâmpago: foto 4:5 em destaque, duas fotos que se alternam */
.prod.v2.dec .pic { aspect-ratio: 4 / 5; background: #f3e9dc; border-radius: 12px; }
.prod.v2.dec .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.prod.v2.dec .pic img.alt { opacity: 0; animation: decswap 7s ease-in-out infinite; }
@keyframes decswap { 0%, 38% { opacity: 0; } 48%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
.prod.v2.dec .pic .tag { z-index: 3; }
.prod.v2.dec .pic .fav { z-index: 3; }
.prod.v2.dec .n { min-height: 0; margin-bottom: 2px; font-size: 14px; }
.prod.v2.dec .n b { font-weight: 700; color: var(--ink); }
.prod.v2.dec .fam { font-size: 12.5px; color: var(--mute); margin-bottom: 9px; }
.prod.v2.dec .p { font-size: 22px; color: var(--red); }
.prod.v2.dec.big { width: 66%; }
.prod.v2.dec .btn.flat { background: var(--red); min-height: 44px; font-size: 14px; }
.prod.v2.dec.bought .btn.flat { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .prod.v2.dec .pic img.alt { animation: none; } }

/* Modo teste: cartão com os dados que já vêm preenchidos */
.testinfo { margin: 16px 0 0; padding: 12px 14px; background: var(--warn-bg); color: var(--warn-ink); border: 1.5px dashed var(--warn-ink); border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
.testinfo dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; }
.testinfo dt { font-weight: 700; }
.testinfo dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; user-select: all; }

/* Cartão de crédito desativado no checkout (instabilidade temporária) */
.paybox.off { border: 1.5px dashed #cfcfcf; background: #f7f7f7; margin-top: -6px; cursor: not-allowed; }
.paybox.off .ico { color: #a8a8a8; }
.paybox.off b { color: #8e8e8e; }
.paybox.off b em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e8e8e; background: #e9e9e9; border-radius: 10px; padding: 2px 7px 1px; margin-left: 6px; vertical-align: 1px; }
.paybox.off span { color: #9a9a9a; }

/* ---------- Confirmação (#b/done) mais leve: menos negrito, cartões brancos com borda fina ---------- */
.done { padding: 30px 0 40px; }
.done .big { width: 56px; height: 56px; background: #e8f4ec; color: var(--ok); margin-bottom: 18px; }
.done .big .ico { width: 26px; height: 26px; stroke-width: 2; }
.done h1 { font-family: 'Overpass', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 6px; }
.done h1 b { font-weight: 600; }
.done .dlead { text-align: center; font-size: 14px; color: var(--mute); margin: 0 0 22px; }
.done .infos { gap: 10px; margin: 0 0 12px; }
.done .info { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; }
.done .info span { font-weight: 500; font-size: 10px; letter-spacing: .12em; color: var(--mute); margin-bottom: 6px; }
.done .info b { font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--ink); }
.done .info.code b { font-weight: 500; font-size: 22px; letter-spacing: .1em; color: var(--red); }
.done .info b.kl { font-family: 'Overpass', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.45; }
.done .info .tnote { display: block; margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--mute); }
.done .info.track b { font-weight: 500; font-size: 17px; letter-spacing: .1em; }
.done .early { background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; }
.done .early .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.done .early b { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.done .early span { color: var(--mute); font-size: 12.5px; line-height: 1.4; }

/* Pix real: QR da Velani, carregando, erro e passo a passo */
.qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr.loading { display: flex; align-items: center; justify-content: center; background: var(--soft); border-style: dashed; }
.qr .spin { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--ink); animation: pixspin .8s linear infinite; }
@keyframes pixspin { to { transform: rotate(360deg); } }
.pixerr { margin: 10px 0 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: 10px; text-align: center; }
.pixerr p { margin: 0 0 12px; color: var(--ink); font-size: 14px; }
.pixsteps { margin: 6px 0 16px; padding: 0 0 0 20px; text-align: left; font-size: 13px; color: #555; line-height: 1.55; }
.pixsteps b { color: var(--ink); font-weight: 600; }

/* Sorteio: "R$ 100 mil" sempre numa linha, tamanho acompanha a largura do celular */
.lk-amt { white-space: nowrap; font-size: clamp(40px, 13.5vw, 62px); }
.lk-eyebrow { text-wrap: balance; }

/* Avatar da consultora (Marina) no topo da mini VSL */
.story .sav { overflow: hidden; padding: 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.story .sav img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Página "Espera" (retenção com desconto, ao sair do Pix) */
.retain { padding: 34px 0 40px; text-align: center; }
.retain h1 { font-family: 'Overpass', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; margin: 6px 0 10px; }
.retain h1 b { display: block; font-weight: 600; }
.retain .rlead { font-size: 14.5px; color: #555; margin: 0 auto 18px; max-width: 320px; line-height: 1.45; }
.retain .rprice { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 6px; }
.retain .rprice s { font-size: 17px; color: var(--mute); }
.retain .rprice b { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -.02em; color: var(--red); }
.retain .rship { font-size: 13.5px; color: #555; margin: 0 0 14px; }
.retain .rship b { color: var(--ink); font-weight: 600; }
.retain .rnote { font-size: 12px; color: var(--mute); margin: 0 0 18px; }
.retain .rno { display: block; margin: 16px auto 0; color: var(--mute); font-size: 13.5px; }