/* Biblioteca de Skills | página de vendas
   Modelada da página com VSL da Fábrica 3D Lucrativa (mesma ordem, mesmos componentes, coluna única de 520px),
   trocando o preto e dourado pelo preto e laranja do Claude. Poppins em tudo. Aprovado pelo Lucas no quadro G (29-10-2026). */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }

:root {
  --bg: #0b0b0c;
  --s1: #121213;
  --s2: #18181a;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --ink: #f4f1ea;
  --dim: #a6a196;
  --mute: #6e6a62;
  --lar: #D97757;
  --lar-l: #F2A47F;
  --lar-d: #A9502F;
  --creme: #F0EEE6;
  --grad: linear-gradient(135deg, #F7BB9C 0%, #E2855F 38%, #C15F3C 70%, #EE9A74 100%);
  --verde: #22c55e;
  --r: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.6 "Poppins", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; display: block; }
a { color: inherit; }
b, strong { font-weight: 600; color: var(--ink); }
s { color: var(--mute); }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px; }
.lar { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ln { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tipografia (igual a da Fábrica) ---------- */
.eyebrow { margin: 0 0 12px; text-align: center; color: var(--lar); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
/* títulos com um pouco mais de respiro (pedido do Lucas, 29-10-2026: "deixe um pouco mais espaçados os títulos") */
.h1, .h2 { margin: 0 0 16px; text-align: center; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.h1 { font-size: clamp(26px, 7.6vw, 36px); line-height: 1.16; }
.h2 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.18; }
.sub, .txt { margin: 0 auto 24px; max-width: 34em; text-align: center; color: var(--dim); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.sub { font-size: 16px; color: #cfcabe; text-wrap: balance; }

/* ---------- faixa ---------- */
.strip { position: relative; overflow: hidden; margin: 0; height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #EE9A74 0%, #D97757 35%, #C15F3C 70%, #E2855F 100%); color: #1a0f0a; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
.strip-ic { width: 17px; height: 17px; flex: none; }
.strip b { color: #1a0f0a; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.strip-off { flex: none; padding: 4px 9px; border-radius: 99px; background: #141413; color: #F7BB9C; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; line-height: 1.2; }
/* brilho que passa de leve de tempos em tempos (para em menos movimento) */
.strip::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: brilho-faixa 7s ease-in-out infinite; pointer-events: none; }
@keyframes brilho-faixa { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@media (max-width: 370px) { .strip { gap: 6px; padding: 0 8px; } .strip b { font-size: 12px; letter-spacing: .03em; } .strip-off { font-size: 10.5px; padding: 3px 7px; } .strip-ic { width: 15px; height: 15px; } }

/* ---------- topo ---------- */
.hero { padding-top: 30px; padding-bottom: 8px; }
.hero .stats { margin: 20px 0 0; }
/* computador: a composição encolhe pela altura da tela pro botão aparecer sem rolar (1280x720) */
@media (min-width: 700px) {
  /* computador: igual ao celular, a dobra tem a altura da tela e a composição fica com o que sobra (mantendo a proporção),
     então o botão aparece sem rolar em qualquer altura (1280x720 até 1920x1080) */
  .dobra { display: flex; flex-direction: column; height: calc(100vh - 88px); height: calc(100svh - 88px); min-height: 480px; }
  .dobra > .h1, .dobra > .sub, .dobra > .btn { flex: none; }
  .dobra .combo { flex: 1 1 0; min-height: 0; max-height: 680px; height: auto; width: auto; max-width: min(calc(100vw - 32px), 920px); aspect-ratio: 100 / 74; align-self: center; left: auto; transform: none; margin: 0 0 18px; }
}

/* ---------- TOPO: a área de membros por dentro (opção 3 aprovada pelo Lucas, 29-10-2026), rodando sozinha ---------- */
/* topo: peças comuns da área de membros (selo, botões, exemplo da planilha) */
.selo-nova { display: inline-flex; align-items: center; width: fit-content; border-radius: 99px; background: var(--grad); color: #1a0f0a; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.bt-copiar, .bt-baixar { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; white-space: nowrap; }
.bt-copiar { background: var(--grad); color: #1a0f0a; }
.bt-baixar { border: 1px solid var(--line-2); color: var(--ink); background: rgba(255,255,255,.04); }
/* exemplo bonito do resultado (planilha): tudo em em */
.ex { background: #fbf8f2; color: #1f1d1a; border-radius: .9em; padding: .75em; box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.6); }
.ex-top { display: flex; align-items: center; gap: .5em; margin-bottom: .55em; }
.ex-top b { color: #1f1d1a; font-weight: 700; }
.ex-xl { width: 1.7em; height: 1.7em; border-radius: .45em; display: grid; place-items: center; background: #1e8e3e; color: #fff; }
.ex-xl svg { width: 1.05em; height: 1.05em; }
.ex-f { margin-left: auto; padding: .15em .55em; border-radius: 99px; background: #FCEFE9; color: #A9502F; font-weight: 700; font-size: .85em; }
.ex-l { min-width: 0; display: grid; grid-template-columns: .6em minmax(0,1fr) auto auto; align-items: center; gap: .55em; padding: .42em .55em; border-radius: .55em; }
.ex-l:nth-of-type(odd) { background: #f1ebe0; }
.ex-l i { width: .6em; height: .6em; border-radius: 50%; }
.ex-l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-l em { font-style: normal; color: #8a857b; font-size: .9em; }
.ex-l b { color: #1f1d1a; font-weight: 700; }
.ex-total { display: flex; justify-content: space-between; align-items: center; margin-top: .5em; padding: .5em .7em; border-radius: .6em; background: var(--grad); color: #fff; font-weight: 600; }
.ex-total b { color: #fff; font-weight: 800; }

/* MacBook em CSS. A tela é um container: --u = 1% da tela no computador; no celular a tela é estreita,
   então --u cresce e o app mostra menos coisa (sem barra lateral), pra continuar legível */
.mb { position: relative; width: var(--mbw, min(calc((100vw - 32px) / 1.13), 880px)); left: 50%; transform: translateX(-50%); margin-bottom: 30px; }
.mb-tampa { position: relative; padding: 2.1% 2.1% 2.6%; border-radius: 18px 18px 6px 6px; background: #0b0b0c; box-shadow: inset 0 0 0 1px #2f2f33, 0 0 0 1px #000, 0 40px 90px -40px rgba(217,119,87,.6); }
.mb-cam { position: absolute; left: 50%; top: .8%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #222; }
.mb-tela { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #0e0e0f; container: tela / inline-size; }
.mb-base { position: relative; height: clamp(9px, 1.7vw, 18px); margin: 0 -6.5%; border-radius: 2px 2px 16px 16px / 2px 2px 100% 100%; background: linear-gradient(#45444a, #1d1d20 70%); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.mb-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; margin-left: -7.5%; border-radius: 0 0 8px 8px; background: #26262a; }
.mb-app { --u: 1cqw; height: 100%; display: grid; grid-template-columns: calc(18 * var(--u)) minmax(0, 1fr) calc(36 * var(--u)); color: var(--ink); line-height: 1.25; font-size: calc(1.3 * var(--u)); }
.mb-app .app { box-shadow: none; }
.mb-side { padding: calc(2 * var(--u)) calc(1.4 * var(--u)); background: #111112; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); }
.mb-logo { display: flex; align-items: center; gap: calc(.9 * var(--u)); }
.mb-logo span { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(1 * var(--u)); display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.mb-logo svg { width: 55%; height: 55%; }
.mb-logo b { font-size: calc(1.35 * var(--u)); line-height: 1.15; color: var(--ink); }
.mb-rot { margin-top: calc(.8 * var(--u)); font-size: calc(.95 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.mb-cats { display: grid; gap: calc(.3 * var(--u)); }
.mb-cat { display: flex; align-items: center; gap: calc(.8 * var(--u)); padding: calc(.62 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.8 * var(--u)); color: #cfcabe; font-size: calc(1.2 * var(--u)); }
.mb-cat svg { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); color: var(--mute); }
.mb-cat em { flex: 1; font-style: normal; }
.mb-cat i { font-style: normal; font-size: calc(1 * var(--u)); color: var(--mute); }
.mb-cat.on { background: rgba(217,119,87,.14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(217,119,87,.35); }
.mb-cat.on svg, .mb-cat.on i { color: var(--lar-l); }
.mb-promo { margin-top: auto; padding: calc(1.1 * var(--u)); border-radius: calc(1 * var(--u)); border: 1px solid rgba(217,119,87,.4); background: radial-gradient(100% 100% at 100% 0%, rgba(217,119,87,.25), transparent 70%), #161517; font-size: calc(1.05 * var(--u)); color: var(--dim); }
.mb-promo b { display: block; color: var(--lar-l); font-size: calc(1.25 * var(--u)); }
.mb-main { padding: calc(2 * var(--u)); display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); min-width: 0; }
.mb-top { display: flex; gap: calc(1 * var(--u)); }
.mb-busca { flex: 1; display: flex; align-items: center; gap: calc(.8 * var(--u)); height: calc(3.6 * var(--u)); padding: 0 calc(1.2 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--s1); border: 1px solid var(--line-2); color: var(--mute); }
.mb-busca svg { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); }
.mb-sino { position: relative; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(1 * var(--u)); display: grid; place-items: center; background: var(--s1); border: 1px solid var(--line-2); }
.mb-sino svg { width: 45%; height: 45%; }
.mb-sino i { position: absolute; right: 22%; top: 22%; width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); border-radius: 50%; background: var(--lar); }
.mb-nova { display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(1.4 * var(--u)); border: 1px solid rgba(217,119,87,.4); background: radial-gradient(60% 140% at 100% 0%, rgba(217,119,87,.4), transparent 70%), #1a1918; }
.mb-nova > .app { width: calc(5.2 * var(--u)); height: calc(5.2 * var(--u)); border-radius: calc(1.5 * var(--u)); flex: none; }
.mb-nova > .app svg { width: 50%; height: 50%; }
.mb-nova-t { flex: 1; display: grid; gap: calc(.3 * var(--u)); min-width: 0; }
.mb-nova-t .selo-nova { font-size: calc(.85 * var(--u)); padding: calc(.25 * var(--u)) calc(.8 * var(--u)); }
.mb-nova-t b { font-size: calc(1.7 * var(--u)); color: var(--ink); }
.mb-nova-t small { font-size: calc(1.1 * var(--u)); color: var(--dim); }
.mb-ver { padding: calc(.8 * var(--u)) calc(1.3 * var(--u)); border-radius: calc(.8 * var(--u)); background: var(--ink); color: #111; font-weight: 700; font-size: calc(1.1 * var(--u)); white-space: nowrap; }
.mb-sec { display: flex; align-items: baseline; justify-content: space-between; }
.mb-sec b { font-size: calc(1.45 * var(--u)); color: var(--ink); }
.mb-sec small { font-size: calc(1 * var(--u)); color: var(--mute); }
.mb-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1 * var(--u)); }
.mb-card { display: grid; justify-items: start; gap: calc(.35 * var(--u)); padding: calc(1.1 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--s1); border: 1px solid var(--line); }
.mb-card .app { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(1 * var(--u)); margin-bottom: calc(.4 * var(--u)); }
.mb-card .app svg { width: 52%; height: 52%; }
.mb-card b { font-size: calc(1.2 * var(--u)); color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-card small { font-size: calc(.95 * var(--u)); color: var(--dim); }
.mb-copiar { display: inline-flex; align-items: center; gap: calc(.4 * var(--u)); margin-top: calc(.4 * var(--u)); padding: calc(.35 * var(--u)) calc(.7 * var(--u)); border-radius: 99px; border: 1px solid var(--line-2); color: var(--lar-l); font-size: calc(.95 * var(--u)); font-weight: 600; }
.mb-copiar svg { width: calc(1.05 * var(--u)); height: calc(1.05 * var(--u)); }
.mb-painel { padding: calc(2 * var(--u)) calc(1.8 * var(--u)); background: #141315; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; }
.mb-sk { display: flex; align-items: center; gap: calc(1.1 * var(--u)); }
.mb-sk .app { width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: calc(1.3 * var(--u)); flex: none; }
.mb-sk .app svg { width: 52%; height: 52%; }
.mb-sk b { display: block; font-size: calc(1.6 * var(--u)); color: var(--ink); }
.mb-sk small { font-size: calc(1.05 * var(--u)); color: var(--dim); }
.mb-bts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.7 * var(--u)); }
.mb-bts > span { height: calc(3.2 * var(--u)); border-radius: calc(.9 * var(--u)); gap: calc(.5 * var(--u)); font-size: calc(1.1 * var(--u)); }
.mb-bts svg { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); }
.mb-t { margin-top: calc(.3 * var(--u)); font-size: calc(.9 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: var(--lar-l); font-weight: 700; }
.mb-faz { font-size: calc(1.15 * var(--u)); line-height: 1.45; color: var(--dim); }
.mb-passos { display: grid; gap: calc(.5 * var(--u)); }
.mb-passos li { display: flex; align-items: center; gap: calc(.7 * var(--u)); font-size: calc(1.1 * var(--u)); color: #ddd8cc; }
.mb-passos i { flex: none; width: calc(1.9 * var(--u)); height: calc(1.9 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(217,119,87,.15); color: var(--lar-l); font-style: normal; font-weight: 700; font-size: calc(.95 * var(--u)); }
.mb-ex { font-size: calc(1.1 * var(--u)); min-width: 0; max-width: 100%; overflow: hidden; }
.mb-pn > * { min-width: 0; }
/* tela estreita (notebook no celular): sem barra lateral e sem o banner, 2 colunas, painel com o essencial */
@container tela (max-width: 560px) {
  .mb-app { --u: 2.05cqw; grid-template-columns: minmax(0, 1fr) calc(23.5 * var(--u)); }
  .mb-side, .mb-nova, .mb-sec, .mb-so-grande, .mb-copiar, .mb-sino, .mb-t { display: none; }
  .mb-main { padding: calc(1.4 * var(--u)); gap: calc(1 * var(--u)); }
  .mb-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(.8 * var(--u)); }
  .mb-card { padding: calc(.9 * var(--u)); }
  .mb-card:nth-child(n+5) { display: none; }
  .mb-painel { padding: calc(1.4 * var(--u)) calc(1.2 * var(--u)); gap: calc(.7 * var(--u)); }
  .mb-faz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mb-bts { grid-template-columns: 1fr; }
  .mb-bts .bt-baixar { display: none; }
  .ex-l:nth-of-type(3) { display: none; }
}

/* iPhone em CSS (aro de titânio escuro, ilha). Tudo em cqw da tela */
.ip { position: relative; width: var(--ipw, min(84vw, 330px)); aspect-ratio: 9 / 19.3; margin: 0 auto; padding: 3.1%; border-radius: 15% / 7%; background: linear-gradient(145deg, #3b3a3e, #19191b 40%, #2c2b2f); box-shadow: inset 0 0 0 1.5px #55545a, 0 0 0 1px #000, 0 40px 80px -30px rgba(217,119,87,.45); }
.ip-tela { position: relative; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: radial-gradient(110% 40% at 50% 0%, rgba(217,119,87,.14), transparent 70%), #0e0e0f; container-type: inline-size; color: var(--ink); line-height: 1.25; }
.ip-st { display: flex; align-items: center; justify-content: space-between; height: 13cqw; padding: 0 8cqw 0 10cqw; font-size: 4cqw; }
.ip-st b { color: var(--ink); }
.ip-ilha { position: absolute; left: 50%; top: 2.8cqw; width: 30cqw; height: 8.8cqw; margin-left: -15cqw; border-radius: 99px; background: #000; }
.ip-ics { display: flex; gap: 1.2cqw; align-items: center; }
.ip-ics i { width: 4cqw; height: 2.6cqw; border-radius: .8cqw; background: var(--ink); }
.ip-ics i:last-child { width: 6.4cqw; border: .6cqw solid var(--ink); background: linear-gradient(90deg, var(--ink) 70%, transparent 70%); }
.ip-cab { display: flex; align-items: center; gap: 3cqw; padding: 1cqw 5cqw 0; }
.ip-logo { width: 10.4cqw; height: 10.4cqw; border-radius: 3.2cqw; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.ip-logo svg { width: 5.6cqw; height: 5.6cqw; }
.ip-nome { display: grid; flex: 1; min-width: 0; }
.ip-nome b { font-size: 4.5cqw; color: var(--ink); }
.ip-nome small { font-size: 3.1cqw; color: var(--dim); }
.ip-sino { position: relative; width: 9.6cqw; height: 9.6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line-2); color: var(--ink); }
.ip-sino svg { width: 4.8cqw; height: 4.8cqw; }
.ip-sino i { position: absolute; right: 2cqw; top: 2cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--lar); }
.ip-busca { display: flex; align-items: center; gap: 2.4cqw; height: 10.4cqw; margin: 4cqw 5cqw 0; padding: 0 3.6cqw; border-radius: 3.4cqw; background: var(--s1); border: 1px solid var(--line-2); color: var(--mute); font-size: 3.5cqw; }
.ip-busca svg { width: 4.4cqw; height: 4.4cqw; color: var(--dim); }
.ip-chips { display: flex; gap: 2cqw; margin: 3.4cqw 0 0 5cqw; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,#000 80%,transparent); mask-image: linear-gradient(90deg,#000 80%,transparent); }
.ch { flex: none; display: inline-flex; align-items: center; gap: 1.6cqw; height: 8.4cqw; padding: 0 2cqw 0 3.4cqw; border-radius: 99px; background: var(--s1); border: 1px solid var(--line-2); font-size: 3.3cqw; font-weight: 600; color: #d9d4ca; }
.ch i { font-style: normal; min-width: 5.4cqw; height: 5.4cqw; padding: 0 1.2cqw; border-radius: 99px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-size: 2.7cqw; }
.ch.on { background: var(--grad); border-color: transparent; color: #1a0f0a; }
.ch.on i { background: rgba(26,15,10,.16); }
/* modo lista */
.ip-sec { margin: 5cqw 5cqw 2cqw; font-size: 3.8cqw; font-weight: 700; }
.ip-it { display: flex; align-items: center; gap: 3cqw; margin: 0 5cqw; padding: 2.8cqw 0; border-bottom: 1px solid var(--line); }
.ip-it .app { width: 11cqw; height: 11cqw; border-radius: 3.2cqw; flex: none; }
.ip-it .app svg { width: 5.6cqw; height: 5.6cqw; }
.ip-it-t { flex: 1; display: grid; min-width: 0; }
.ip-it-t b { font-size: 3.8cqw; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-it-t small { font-size: 3cqw; color: var(--dim); }
.ip-copiar { width: 8.6cqw; height: 8.6cqw; border-radius: 2.6cqw; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--lar-l); }
.ip-copiar svg { width: 4.4cqw; height: 4.4cqw; }
.ip-tab { position: absolute; left: 3cqw; right: 3cqw; bottom: 3cqw; display: flex; justify-content: space-around; padding: 2.6cqw 0 3.4cqw; border-radius: 6cqw; background: rgba(24,24,26,.92); border: 1px solid var(--line-2); }
.ip-tab span { display: grid; justify-items: center; gap: 1cqw; font-size: 2.6cqw; color: var(--mute); }
.ip-tab span.on { color: var(--lar-l); }
.ip-tab svg { width: 5.4cqw; height: 5.4cqw; }
/* ---------- topo: composição (notebook atrás, celular na frente, 2 cartões flutuando) ---------- */
.combo { position: relative; width: min(calc(100vw - 32px), 920px); left: 50%; transform: translateX(-50%); aspect-ratio: 100 / 74; margin: 4px 0 30px; }
.combo .mb { --mbw: 80%; position: absolute; left: 0; top: 7%; transform: none; margin: 0; }
.combo .ip { --ipw: 27%; position: absolute; right: 0; top: 17%; margin: 0; z-index: 2; }
.flt { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #161517; border: 1px solid var(--line-2);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(217, 119, 87, .12); white-space: nowrap; animation: respira 6s ease-in-out infinite; }
.flt .app { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; flex: none; }
.flt .app svg { width: 19px; height: 19px; }
.flt b { display: block; color: var(--ink); font-size: 14px; line-height: 1.2; }
.flt small { color: var(--dim); font-size: 11.5px; }
.flt .selo-nova { font-size: 9.5px; padding: 3px 8px; margin-bottom: 4px; }
.flt-1 { left: -1%; top: -3%; }
.flt-2 { left: 4%; bottom: 0; animation-delay: -3s; }
.flt-2 .mais { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 15px; }
@keyframes respira { 50% { transform: translateY(-6px); } }

/* ---------- topo: o que o loop mexe ---------- */
/* celular: a lista rola (track), o item tocado acende, o copiar vira check verde, o dedo e o aviso "Copiado!" */
.ip-tela { display: flex; flex-direction: column; }
.ip-lv { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ip-lt { position: relative; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.ip-it { transition: background .3s, box-shadow .3s; border-radius: 3cqw; padding-left: 1.6cqw; padding-right: 1.6cqw; margin: 0 3.4cqw; }
.ip-it.on { background: rgba(217, 119, 87, .12); box-shadow: inset 0 0 0 1px rgba(217, 119, 87, .45); border-bottom-color: transparent; }
.ip-copiar { transition: background .25s, color .25s, border-color .25s; }
.ip-it.ok .ip-copiar { background: var(--verde); border-color: var(--verde); color: #fff; }
.ip-copiar .v { display: none; }
.ip-it.ok .ip-copiar .c { display: none; }
.ip-it.ok .ip-copiar .v { display: block; }
.dedo { position: absolute; left: 0; top: 0; z-index: 4; width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(255, 255, 255, .32); box-shadow: 0 0 0 1.4cqw rgba(255, 255, 255, .14); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .55s cubic-bezier(.3, .7, .2, 1); }
.dedo.on { opacity: 1; }
.dedo.toque { background: rgba(242, 164, 127, .55); }
/* o aviso cobre a barra e o cabeçalho do app (a borda de baixo dele fica na do cabeçalho), nunca a lista */
.ip-toast { position: absolute; left: 4cqw; right: 4cqw; bottom: calc(100% - 26cqw); min-height: 15cqw; z-index: 3; display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 3.4cqw 2.6cqw 2.6cqw; border-radius: 4.4cqw;
  background: #0f2a19; border: 1px solid rgba(34, 197, 94, .55); color: #c9f2d6; font-size: 3.4cqw; font-weight: 600; line-height: 1.25; box-shadow: 0 3cqw 8cqw -2cqw rgba(34, 197, 94, .5);
  opacity: 0; transform: translateY(-3cqw) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.ip-toast.on { opacity: 1; transform: none; }
.ip-toast .tt { min-width: 0; }
.ip-toast .tk { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; }
.ip-toast svg { width: 3.8cqw; height: 3.8cqw; }
.ip-toast b { display: block; color: #fff; }
/* notebook: o card da skill acende e o painel troca (fade); o botão vira "Copiado!" */
.mb-card { transition: box-shadow .3s, background .3s; }
.mb-card.on { background: rgba(217, 119, 87, .1); box-shadow: inset 0 0 0 1px rgba(217, 119, 87, .5); }
.mb-pn { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-height: 0; transition: opacity .25s ease; }
.mb-pn.troca { opacity: 0; }
.bt-copiar { transition: background .25s, color .25s, transform .15s; }
.bt-copiar.aperta { transform: scale(.94); }
.bt-copiar.ok { background: var(--verde); color: #fff; }
/* exemplos bonitos de cada skill (tudo em em: o tamanho vem do .mb-ex) */
.ex-sl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.ex-sl .s { aspect-ratio: 4 / 5; border-radius: .6em; padding: .55em .5em; display: flex; flex-direction: column; justify-content: space-between; background: #F3EFE6; color: #141311; overflow: hidden; }
.ex-sl .s i { font-style: normal; font-size: .72em; font-weight: 700; color: var(--lar-d); }
.ex-sl .s b { color: inherit; font-size: .86em; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.ex-sl .s span { display: block; height: .22em; border-radius: 1em; background: #DDD5C5; margin-top: .3em; }
.ex-sl .capa { background: var(--grad); color: #fff; }
.ex-sl .capa i { color: #fff; opacity: .8; }
/* a coluna e as linhas encolhem (min-width 0) e o texto comprido quebra a linha: nunca passa da borda do exemplo */
.ex-gl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35em; }
.ex-gl p, .ex-gl em { min-width: 0; }
.ex-gl em { line-height: 1.25; overflow-wrap: anywhere; }
.ex-gl p { display: flex; align-items: center; gap: .55em; padding: .45em .6em .45em .45em; border-radius: .6em; background: var(--s2); border: 1px solid var(--line-2); }
.ex-gl b { flex: none; width: 1.6em; height: 1.6em; border-radius: .45em; display: grid; place-items: center; background: var(--grad); color: #1a0f0a; font-size: .8em; }
.ex-gl span { min-width: 0; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }   /* quebra a linha em vez de passar da borda */
.ex-gl em { font-style: normal; text-align: center; color: var(--lar-l); font-weight: 600; font-size: .9em; }
.ex-pdf { position: relative; padding: .8em .9em; border-radius: .7em; background: #fff; color: #1f1f1f; box-shadow: 0 .8em 1.6em -1em rgba(0, 0, 0, .6); }
.ex-pdf .cab { padding-bottom: .5em; margin-bottom: .55em; border-bottom: 1.5px solid var(--lar); }
.ex-pdf .cab b { display: block; color: #1f1f1f; font-size: 1.08em; }
.ex-pdf .cab small { color: #77736a; font-size: .85em; }
.ex-pdf .tag { position: absolute; right: .9em; top: .8em; padding: .15em .5em; border-radius: .35em; background: #d93025; color: #fff; font-size: .75em; font-weight: 700; }
.ex-pdf .t { margin: .35em 0 .2em; font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lar-d); }
.ex-pdf li { position: relative; padding-left: 1em; color: #333; line-height: 1.5; }
.ex-pdf li::before { content: ""; position: absolute; left: .15em; top: .55em; width: .42em; height: .42em; border-radius: 50%; background: var(--lar); }
.ex-pdf .pz li { display: flex; justify-content: space-between; gap: .6em; }
.ex-pdf .pz b { color: #1f1f1f; }

/* ---------- topo no celular: a composição vai de ponta a ponta da tela (sem rolar pro lado) e o celular é o protagonista,
   grande e legível, cortado embaixo com degradê. O notebook fica atrás, como contexto ---------- */
@media (max-width: 699px) {
  /* a dobra tem a altura da tela visível (menos a faixa e o respiro de cima); a composição fica com o que sobrar,
     então o botão sempre fecha a primeira dobra (390x664, 430x740, 375x548, 360x560) */
  .hero { padding-top: 16px; }
  .dobra { display: flex; flex-direction: column; height: calc(100vh - 78px); height: calc(100svh - 78px); max-height: 980px; }
  .dobra > .h1 { margin-bottom: 10px; }
  .dobra > .sub { margin-bottom: 12px; font-size: 15px; line-height: 1.55; }
  .dobra > .btn { flex: none; margin-top: 0; }
  .dobra .combo { flex: 1 1 0; min-height: 190px; width: 100vw; min-width: 0; height: auto; aspect-ratio: auto; overflow: hidden; margin: 0 0 12px; }
  .combo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 4; pointer-events: none; background: linear-gradient(rgba(11, 11, 12, 0), var(--bg)); }
  .combo .mb { --mbw: 74vw; left: 3vw; top: 1vw; }
  .combo .ip { --ipw: 66vw; right: 4vw; top: 13vw; }
  .combo .ip-chips, .combo .ip-sec { display: none; }
  .combo .ip-busca { margin-bottom: 2.6cqw; }
  .ip-nome b { font-size: 5cqw; }
  .ip-nome small, .ip-it-t small { font-size: 3.7cqw; }
  .ip-busca { font-size: 4cqw; }
  .ip-it-t b { font-size: 4.9cqw; }
  .ip-toast { font-size: 4.6cqw; }
  .flt-2 { display: none; }
  .flt { padding: 6px 10px 6px 6px; gap: 7px; border-radius: 12px; }
  .flt .app { width: 28px; height: 28px; border-radius: 8px; }
  .flt .app svg { width: 14px; height: 14px; }
  .flt b { font-size: 12px; }
  .flt .selo-nova { font-size: 8.5px; padding: 2px 6px; margin-bottom: 2px; }
  .flt-1 { left: 3vw; top: 0; }   /* em cima do notebook, sem encostar no celular (que começa logo abaixo) */
}
/* celular baixinho (Safari do iPhone SE, Android com barra): o celular mostra só a lista, sem a busca */
@media (max-width: 699px) and (max-height: 620px) {
  .combo .ip { top: 12.5vw; }
  .combo .ip-busca { display: none; }
  .combo .ip-lv { margin-top: 2.6cqw; }   /* sem a busca, a lista desce um pouco: o aviso "Copiado!" nunca encosta nela */
  .dobra > .sub { font-size: 14px; margin-bottom: 10px; }
}

/* ---------- números lado a lado ---------- */
.stats { margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.stats li { padding: 14px 6px; text-align: center; display: grid; gap: 2px; align-content: start; }
.stats li + li { border-left: 1px solid var(--line); }
.stats b { font-size: 17px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.stats span { color: var(--dim); font-size: 11.5px; line-height: 1.3; }

/* ---------- botões (o mesmo verde da Fábrica) ---------- */
.btn { display: block; width: 100%; padding: 17px 20px; border: 0; border-radius: 14px; cursor: pointer; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, #34d97f 0%, #1fb864 100%); color: #fff; font: 700 16.5px/1.25 "Poppins", sans-serif; letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0, 60, 25, .35); box-shadow: 0 12px 30px -12px rgba(43, 214, 120, .75), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s, filter .2s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.985); }
.btn:focus-visible, .chip:focus-visible, .ver-todas:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--lar-l); outline-offset: 3px; }
.btn--anim { position: relative; overflow: hidden; animation: pulsa-btn 1.8s ease-in-out infinite; }
.btn--anim::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: brilho-btn 2.6s ease-in-out infinite; }
@keyframes pulsa-btn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(52, 217, 127, .22), 0 14px 32px -10px rgba(43, 214, 120, .9); } }
@keyframes brilho-btn { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.wrap > .btn { margin-top: 8px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 14px 0 0; color: var(--mute); font-size: 12px; }
.trust > span { display: inline-block; }
.trust > span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 6px; vertical-align: middle; border-radius: 50%; background: var(--lar); }
.trust .wpp { display: inline-flex; align-items: center; gap: 6px; color: #5fd38a; font-weight: 600; }
.trust .wpp::before { display: none; }
.trust .wpp svg { width: 14px; height: 14px; fill: #25d366; }

/* ---------- seções ---------- */
.sec { padding-top: 76px; }

/* ---------- IAs onde roda, passando ---------- */
.brands { margin-top: 56px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.brands__t { margin: 0 0 10px; text-align: center; color: var(--mute); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.brands__track { display: flex; gap: 12px; width: max-content; animation: corre 34s linear infinite; }
.mk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s1); color: #e8e3d8; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mk svg { width: 17px; height: 17px; fill: var(--c, currentColor); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- skills passando (no lugar da galeria de peças) ---------- */
.gal { display: grid; gap: 14px; overflow: hidden; }
.gal__row { display: flex; gap: 12px; width: max-content; animation: corre 46s linear infinite; }
.gal__row--2 { animation-direction: reverse; animation-duration: 52s; margin-left: -80px; }
.gal figure { width: 150px; }
.gal figcaption { padding-top: 8px; text-align: center; color: var(--dim); font-size: 12px; }
.sk { position: relative; width: 150px; height: 150px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.sk small { position: absolute; left: 10px; top: 9px; font-size: 10px; font-weight: 600; color: var(--dim); }
.app { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 14px 26px -12px rgba(217, 119, 87, .8); }
.app svg { width: 31px; height: 31px; }
.t1 { background: radial-gradient(80% 70% at 50% 45%, rgba(217, 119, 87, .22), transparent 70%), var(--s1); }
.t2 { background: var(--creme); border-color: transparent; }
.t2 small { color: #77736a; }
.t2 .app { background: #141413; color: var(--lar); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .6); }
.t3 { background: var(--grad); border-color: transparent; }
.t3 small { color: rgba(255, 255, 255, .85); }
.t3 .app { background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -12px rgba(80, 30, 10, .6); }
.t4 { background: linear-gradient(160deg, #1d1c1a, #121213); }
.t4 .app { background: var(--creme); color: var(--lar-d); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .7); }

/* ---------- listas e frase ---------- */
.rows { margin: 0 0 32px; border-top: 1px solid var(--line); }
.rows li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: #ddd8cc; }
.rows li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 20px; }
.rows--x li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4b4b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23ff4b4b' fill-opacity='.12' stroke-width='1.6'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.rows--v li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%2322c55e' fill-opacity='.12' stroke-width='1.6'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.6'/%3E%3C/svg%3E"); }
.quote { position: relative; margin: 0 0 8px; padding: 26px 0; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.quote::before, .quote::after { content: ""; position: absolute; left: 50%; width: 40px; height: 1px; transform: translateX(-50%); background: var(--grad); }
.quote::before { top: 0; }
.quote::after { bottom: 0; }

/* ---------- vitrine (biblioteca por categoria, montada do SKILLS) ---------- */
.chips { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.js .chips { display: flex; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s1); color: #d9d4ca; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip i { font-style: normal; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--dim); font-size: 11.5px; font-weight: 700; }
.chip[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: #1a0f0a; }
.chip[aria-pressed="true"] i { background: rgba(26, 15, 10, .16); color: #1a0f0a; }
.conta { margin: 0 0 12px; text-align: center; color: var(--mute); font-size: 12.5px; }
.conta b { color: var(--ink); }
.vt { border-top: 1px solid var(--line); }
.vt:focus { outline: none; }
.vt-grupo { padding: 22px 0 8px; color: var(--lar); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.vk { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vk .app { width: 52px; height: 52px; border-radius: 15px; }
.vk .app svg { width: 25px; height: 25px; }
.vk-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vk-cab b { font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; }
.vk-cab small { flex: none; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--dim); font-size: 10.5px; font-weight: 600; }
.vk-faz { margin-top: 3px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.vk-sai { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.vk-sai span { flex: none; color: var(--lar-l); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* ícone de app de cada categoria */
.g-anuncios { background: var(--grad); }
.g-instagram { background: var(--creme); color: var(--lar-d); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .7); }
.g-vendas { background: #1f1d1b; color: var(--lar); border: 1px solid var(--line-2); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .8); }
.g-video { background: linear-gradient(145deg, #C96A44, #8E3F22); }
.g-design { background: linear-gradient(145deg, #F7C9AE, #E2855F); color: #5a2410; }
.g-documentos { background: linear-gradient(145deg, #F1E3CF, #D7B994); color: #7a3518; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .7); }
.g-ia { background: linear-gradient(145deg, #2A2724, #141312); color: var(--lar-l); border: 1px solid rgba(217, 119, 87, .35); box-shadow: 0 12px 22px -12px rgba(217, 119, 87, .5); }
.ver-todas { display: none; width: 100%; margin-top: 18px; padding: 15px 20px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.js .ver-todas { display: block; }
.js .ver-todas[hidden] { display: none; }
.ver-todas svg { display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; color: var(--lar); }

/* ---------- bônus: um embaixo do outro, todos no mesmo cartão (arte quadrada à esquerda + texto ao lado) ---------- */
.bonus { margin: 0 0 28px; display: grid; gap: 12px; grid-auto-rows: 1fr; }   /* os 3 com a mesma altura */
.bn { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "arte txt" "valor valor"; gap: 12px 14px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 20px;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, #171618, #111112); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -28px rgba(217, 119, 87, .45); }
.bn-txt small { display: block; color: var(--lar); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bn-txt { grid-area: txt; }
.bn-txt h3 { margin: 4px 0 0; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty; }
.bn-txt p { margin: 5px 0 0; color: var(--dim); font-size: 13px; line-height: 1.45; }
/* rodapé do cartão: valor riscado à esquerda e o GRÁTIS à direita */
.bn-valor { grid-area: valor; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 2px 0; border-top: 1px solid var(--line); color: var(--mute); font-size: 12.5px; line-height: 1.3; }
.bn-valor s { color: #ff6b6b; text-decoration-thickness: 1.5px; }
.bn-valor b { padding: 3px 9px; border-radius: 99px; background: rgba(34, 197, 94, .14); border: 1px solid rgba(34, 197, 94, .4); color: #5fd38a; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* o kit das artes: quadrado escuro com brilho, um objeto no meio (medido em cqw = 1% da largura da arte) */
.bn-arte { grid-area: arte; position: relative; aspect-ratio: 1; border-radius: 15px; overflow: hidden; container-type: inline-size; border: 1px solid var(--line-2);
  background: radial-gradient(85% 75% at 50% 35%, var(--brilho, rgba(217, 119, 87, .3)), transparent 72%), linear-gradient(160deg, #1d1c1a, #111112); }
/* 1: a aula (player com play e barra) + as 3 IAs */
/* (o espaço entre as peças vai em margem nos filhos: cqw no gap da própria arte seria medido pela tela, não pela arte) */
.bn-1 { display: grid; place-content: center; justify-items: center; }
.bn-1 .bn-ias { margin-top: 8cqw; }
.bn-player { position: relative; width: 74cqw; aspect-ratio: 16 / 10; border-radius: 6cqw; background: linear-gradient(160deg, #2a2724, #161514); border: 1px solid var(--line-2); display: grid; place-items: center; box-shadow: 0 6cqw 12cqw -6cqw rgba(0, 0, 0, .8); }
.bn-play { width: 20cqw; height: 20cqw; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 3cqw rgba(217, 119, 87, .18), 0 4cqw 10cqw -3cqw rgba(217, 119, 87, .9); }
.bn-play svg { width: 8.6cqw; height: 8.6cqw; margin-left: 1.2cqw; }
.bn-barra { position: absolute; left: 7cqw; right: 7cqw; bottom: 5.4cqw; height: 2cqw; border-radius: 2cqw; background: linear-gradient(90deg, var(--lar) 42%, rgba(255, 255, 255, .14) 42%); }
.bn-ias { display: flex; gap: 4cqw; }
.bn-ias span { width: 17cqw; height: 17cqw; border-radius: 50%; display: grid; place-items: center; background: #1f1e1c; border: 1px solid var(--line-2); color: #ece8df; font-size: 6.4cqw; font-weight: 700; letter-spacing: -.04em; }
.bn-ias svg { width: 8.6cqw; height: 8.6cqw; }
.bn-ias .ia-claude { color: #D97757; }
/* 2: o arquivo da sua skill nascendo (com o + e outro arquivo atrás) */
.bn-2 { display: grid; place-items: center; }
.bn-arq-tras { position: absolute; left: 50%; top: 50%; width: 62cqw; height: 66cqw; margin: -33cqw 0 0 -27cqw; border-radius: 6cqw; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); transform: rotate(9deg); }
.bn-arq { position: relative; width: 70cqw; padding: 7cqw 6cqw 6cqw; border-radius: 6cqw; background: #fbf8f2; color: #141311; transform: rotate(-4deg); box-shadow: 0 8cqw 16cqw -6cqw rgba(0, 0, 0, .7); }
.bn-arq .app { width: 17cqw; height: 17cqw; border-radius: 5cqw; background: #141413; color: var(--lar); box-shadow: none; }
.bn-arq .app svg { width: 9cqw; height: 9cqw; }
.bn-arq b { display: block; margin-top: 5cqw; color: #141311; font-size: 6.2cqw; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; }
.bn-arq i { display: block; height: 2.2cqw; margin-top: 3cqw; border-radius: 2cqw; background: #E6DFD2; }
.bn-arq i + i { width: 66%; }
.bn-mais { position: absolute; right: -5cqw; top: -5cqw; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2cqw #161514, 0 4cqw 8cqw -3cqw rgba(217, 119, 87, .9); }
.bn-mais svg { width: 8cqw; height: 8cqw; }
/* 3: a notificação do grupo no WhatsApp (com outra atrás) */
.bn-3 { --brilho: rgba(37, 211, 102, .24); display: grid; place-content: center; justify-items: center; }
.bn-3 .bn-notif:not(.bn-notif-tras) { margin-top: 7cqw; }
.bn-zap { width: 24cqw; height: 24cqw; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 0 0 3cqw rgba(37, 211, 102, .16), 0 5cqw 12cqw -4cqw rgba(37, 211, 102, .8); }
.bn-zap svg { width: 13cqw; height: 13cqw; fill: #fff; }
.bn-notif { position: relative; width: 84cqw; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3.6cqw; padding: 3.6cqw 4cqw 3.6cqw 3.6cqw; border-radius: 5cqw; background: #222124; border: 1px solid var(--line-2); box-shadow: 0 6cqw 12cqw -6cqw rgba(0, 0, 0, .9); }
.bn-notif-tras { position: absolute; left: 50%; bottom: 16cqw; width: 72cqw; height: 16cqw; margin-left: -36cqw; padding: 0; opacity: .45; background: #1b1a1c; }
.bn-notif .av { width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; }
.bn-notif .av svg { width: 6.6cqw; height: 6.6cqw; }
.bn-notif .tx { display: grid; min-width: 0; line-height: 1.2; }
.bn-notif .tx b { font-size: 5.6cqw; color: var(--ink); }
.bn-notif .tx em { font-style: normal; font-size: 4.6cqw; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-notif > i { font-style: normal; min-width: 7.6cqw; height: 7.6cqw; border-radius: 99px; display: grid; place-items: center; background: #25d366; color: #0b1a10; font-size: 4.6cqw; font-weight: 700; }
@media (min-width: 440px) {
  .bn { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 14px 18px 14px 14px; }
  .bn-txt h3 { font-size: 17px; }
  .bn-txt p { font-size: 13.5px; }
}

/* ---------- por dentro: o acesso chegando no WhatsApp (igual ao app de verdade) ---------- */
.cel { position: relative; width: min(78vw, 300px); margin: 4px auto 32px; border: 8px solid #1c1c1e; border-radius: 42px; overflow: hidden; container-type: inline-size;
  box-shadow: 0 0 0 1px #2c2c2f, 0 30px 70px -25px rgba(217, 119, 87, .35); font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; }
.wz { display: flex; flex-direction: column; aspect-ratio: 9 / 18.5; background: #EFE7DD; color: #111b21; }
.wz-status { display: flex; align-items: center; justify-content: space-between; height: 11cqw; padding: 0 8cqw 0 9cqw; background: #F6F5F3; font-size: 4.2cqw; font-weight: 600; position: relative; }
.wz-status::before { content: ""; position: absolute; left: 50%; top: 2.6cqw; width: 30%; height: 7.2cqw; transform: translateX(-50%); background: #000; border-radius: 99px; }
.wz-status i { width: 7cqw; height: 3.4cqw; border-radius: 1cqw; border: 1.5px solid #111b21; position: relative; }
.wz-status i::after { content: ""; position: absolute; inset: .5cqw; right: 1.6cqw; background: #111b21; border-radius: .4cqw; }
.wz-top { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4cqw 3cqw; background: #F6F5F3; border-bottom: 1px solid #dcd7cf; }
.wz-top .volta { color: #007aff; width: 5.4cqw; height: 5.4cqw; }
.wz-av { width: 10.4cqw; height: 10.4cqw; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; }
.wz-av svg { width: 5.6cqw; height: 5.6cqw; }
.wz-top b { display: block; font-size: 4.3cqw; line-height: 1.2; color: #111b21; font-weight: 600; }
.wz-top small { display: block; font-size: 3.3cqw; color: #667781; }
.wz-msgs { flex: 1; display: flex; flex-direction: column; gap: 2cqw; padding: 4cqw 3.4cqw; overflow: hidden;
  background-color: #EFE7DD; background-image: radial-gradient(rgba(120, 100, 80, .07) 1px, transparent 1.2px); background-size: 5cqw 5cqw; }
.wz-dia { align-self: center; margin-bottom: 1cqw; padding: 1cqw 3cqw; border-radius: 2cqw; background: #fff; color: #54656f; font-size: 3cqw; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.bal { position: relative; max-width: 84%; padding: 1.8cqw 2.6cqw 1.6cqw; border-radius: 2.6cqw; font-size: 3.85cqw; line-height: 1.38; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.bal small { float: right; margin: 1.6cqw 0 -1cqw 2.6cqw; font-size: 2.7cqw; color: #667781; display: inline-flex; align-items: center; gap: .6cqw; }
.bal small svg { width: 4cqw; height: 4cqw; color: #53bdeb; }
.bal-in { align-self: flex-start; background: #fff; }
.bal-out { align-self: flex-end; background: #D9FDD3; }
.bal-in.rabo { border-top-left-radius: 0; }
.bal-out.rabo { border-top-right-radius: 0; }
.bal-in.rabo::before, .bal-out.rabo::before { content: ""; position: absolute; top: 0; width: 2.6cqw; height: 3cqw; }
.bal-in.rabo::before { left: -2.2cqw; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bal-out.rabo::before { right: -2.2cqw; background: #D9FDD3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bal-link { padding: 1.2cqw; width: 84%; }
.wz-prev { border-radius: 1.8cqw; overflow: hidden; background: #f5f6f6; }
.wz-prev-arte { height: 22cqw; background: linear-gradient(135deg, #2a2724, #141312); display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.wz-prev-arte span { width: 10cqw; height: 10cqw; border-radius: 3cqw; display: grid; place-items: center; color: #fff; background: var(--grad); }
.wz-prev-arte span:nth-child(2) { background: var(--creme); color: var(--lar-d); width: 12cqw; height: 12cqw; }
.wz-prev-arte span svg { width: 5cqw; height: 5cqw; }
.wz-prev p { padding: 2cqw 2.4cqw; font-size: 3.4cqw; line-height: 1.3; color: #667781; }
.wz-prev p b { display: block; color: #111b21; font-size: 3.6cqw; }
.bal-link .lk { display: block; padding: 1.6cqw 1.4cqw .4cqw; color: #027eb5; font-size: 3.6cqw; }
.wz-bar { display: flex; align-items: center; gap: 2.4cqw; padding: 2.4cqw 3.4cqw 5cqw; background: #F6F5F3; border-top: 1px solid #dcd7cf; }
.wz-bar span { flex: 1; height: 8.4cqw; border-radius: 99px; background: #fff; border: 1px solid #dcd7cf; }
.wz-bar i { width: 8.4cqw; height: 8.4cqw; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff; }
.wz-bar i svg { width: 4.4cqw; height: 4.4cqw; }
/* os 4 passos (numerados, no jeito da lista da Fábrica) */
.passos { border-top: 1px solid var(--line); }
.passos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.passos .n { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(217, 119, 87, .12); border: 1px solid rgba(217, 119, 87, .3); color: var(--lar-l); font-size: 14px; font-weight: 700; }
.passos b { font-size: 15px; line-height: 1.35; padding-top: 1px; }
.passos span { color: var(--dim); font-size: 14px; line-height: 1.5; }

/* ---------- prova social: prints no formato que vierem, em carrossel; vazio = "Adicionar aqui" ---------- */
.sales { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 8px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: flex-start; }
.sales::-webkit-scrollbar { display: none; }
.sales > * { flex: 0 0 62%; max-width: 250px; scroll-snap-align: start; }
.sales > :first-child { margin-left: auto; }
.sales > :last-child { margin-right: auto; }
.depo img { width: 100%; height: auto; border-radius: 14px; }
.depo figcaption { padding-top: 8px; text-align: center; color: var(--dim); font-size: 12px; }
.depo-vazio { aspect-ratio: 9 / 16; border-radius: 18px; border: 1.5px dashed rgba(217, 119, 87, .45); background: rgba(217, 119, 87, .04); display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--lar-l); font-size: 13.5px; font-weight: 600; }
.depo-vazio i { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(217, 119, 87, .5); position: relative; }
.depo-vazio i::before, .depo-vazio i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; border-radius: 2px; }
.depo-vazio i::after { transform: rotate(90deg); }
.swipe { margin: 10px 0 0; text-align: center; color: var(--mute); font-size: 12px; }
.swipe::after { content: " →"; color: var(--lar); }

/* ---------- preço: plano único no jeito da caixa do Premium ---------- */
.plan { position: relative; margin: 26px 0 0; padding: 30px 18px 22px; border-radius: 20px; text-align: center; border: 1px solid transparent;
  background: linear-gradient(var(--s1), var(--s1)) padding-box, var(--grad) border-box; box-shadow: 0 30px 70px -30px rgba(217, 119, 87, .45); }
.plan__tag { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); margin: 0; padding: 6px 14px; max-width: calc(100% - 24px); border-radius: 999px; white-space: nowrap; background: var(--grad); color: #1a0f0a; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* a "caixa" do produto: o mesmo mockup do topo (notebook + celular), clonado pelo JS e parado. Sem JS: leque de ícones */
.plan__mock { position: relative; margin: 0 0 10px; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 80% at 50% 55%, rgba(217, 119, 87, .3), transparent 70%), #0f0f10; border: 1px solid var(--line); container-type: inline-size; }
.mock-preco { position: relative; aspect-ratio: 16 / 9; }
.mock-preco.tem-combo { aspect-ratio: 100 / 64; }
.leque { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.leque .app { position: absolute; width: 17cqw; height: 17cqw; border-radius: 5cqw; margin: -8.5cqw 0 0 -8.5cqw; }
.leque .app svg { width: 8cqw; height: 8cqw; }
.leque .app:nth-child(1) { transform: translate(-36cqw, 5cqw) rotate(-14deg) scale(.82); }
.leque .app:nth-child(2) { transform: translate(-18cqw, 1cqw) rotate(-7deg) scale(.92); }
.leque .app:nth-child(3) { transform: translate(0, -1cqw) scale(1.12); z-index: 2; }
.leque .app:nth-child(4) { transform: translate(18cqw, 1cqw) rotate(7deg) scale(.92); }
.leque .app:nth-child(5) { transform: translate(36cqw, 5cqw) rotate(14deg) scale(.82); }
.plan__mock > p { position: relative; padding: 0 0 4.5cqw; font-size: 5cqw; font-weight: 700; letter-spacing: -.01em; }
.plan__mock > p span { color: var(--lar-l); }
/* o clone do topo dentro da caixa: proporções fixas (vale no celular e no computador), sem cartões, dedo nem aviso */
.combo.combo--mini { position: absolute; left: 4%; right: 4%; top: 5%; bottom: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; margin: 0; overflow: visible; }
.combo.combo--mini::after { display: none; }
.combo.combo--mini { text-align: left; }
/* a parte do painel que o iPhone cobre fica vazia (o exemplo e os números nunca ficam embaixo dele) */
.combo .mb-painel { padding-right: calc(1.8 * var(--u) + 8cqw); }   /* a caixa de preço é centralizada; o app por dentro não */
.combo.combo--mini .mb { --mbw: 80%; left: 0; top: 0; }
.combo.combo--mini .ip { --ipw: 27%; right: 0; top: 7%; }
.plan__list { margin: 6px 0 16px; text-align: left; border-top: 1px solid var(--line); }
.plan__list li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; color: #ddd8cc; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2855F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 18px; }
.plan__bt { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.plan__bt::before, .plan__bt::after { content: ""; flex: 1; min-width: 6px; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 119, 87, .6)); }
.plan__bt::after { background: linear-gradient(270deg, transparent, rgba(217, 119, 87, .6)); }
.bt__pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(242, 164, 127, .5);
  background: linear-gradient(135deg, rgba(247, 187, 156, .2), rgba(193, 95, 60, .07)); box-shadow: 0 0 18px -6px rgba(217, 119, 87, .7); color: var(--lar-l); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bt__pill svg { width: 13px; height: 13px; }
.plan__bns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.plan__bns li { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 10px 4px 9px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); }
.plan__bns .app { width: 38px; height: 38px; border-radius: 11px; }
.plan__bns .app svg { width: 19px; height: 19px; }
.plan__bns .bn-nome { font-size: 11px; line-height: 1.25; font-weight: 600; color: var(--ink); text-align: center; }
.plan__bns em { font-style: normal; font-size: 10px; color: var(--mute); }
.plan__bns em b { color: #5fd38a; font-weight: 700; }
.plan__buy { padding-top: 14px; border-top: 1px solid var(--line); }
.plan__off { display: block; width: fit-content; margin: 0 auto 8px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #ff4b4b, #c8102e); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(255, 75, 75, .18), 0 8px 18px -8px rgba(255, 60, 60, .9); transform: rotate(-3deg); }
.plan__de { margin: 0; color: var(--mute); font-size: 13.5px; }
.plan__de s { color: #ff6b6b; text-decoration-thickness: 1.5px; }
.plan__price { margin: 0; font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan__once { margin: 2px 0 10px; color: var(--mute); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.wpp-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; color: #7fcf9b; font-size: 12px; }
.wpp-line svg { width: 14px; height: 14px; fill: #25d366; }
.safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--mute); font-size: 12.5px; }
.safe svg { width: 15px; height: 15px; fill: none; stroke: var(--mute); stroke-width: 1.8; }
.plan.is-chegou { animation: chegou 1.6s ease-out; }
@keyframes chegou { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0), 0 30px 70px -30px rgba(217, 119, 87, .45); } 25% { box-shadow: 0 0 0 3px rgba(217, 119, 87, .85), 0 0 34px rgba(217, 119, 87, .45); } }

/* ---------- garantia ---------- */
.guar { padding: 34px 22px 30px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); text-align: center; }
.guar .txt { margin-bottom: 0; }
.seal { display: grid; place-content: center; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid transparent;
  background: linear-gradient(var(--s1), var(--s1)) padding-box, var(--grad) border-box; box-shadow: 0 0 0 6px var(--s1), 0 0 0 7px rgba(217, 119, 87, .3); }
.seal b { font-size: 34px; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }
.seal span { color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-align: center; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 18px 36px 18px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 1.6px solid var(--lar); border-bottom: 1.6px solid var(--lar); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 0 18px; color: var(--dim); font-size: 14.5px; }

/* ---------- quem sou eu ---------- */
.quem-foto { position: relative; width: min(72%, 280px); margin: 0 auto 26px; }
.quem-foto img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(#111, #111) padding-box, var(--grad) border-box; box-shadow: 0 30px 70px -28px rgba(217, 119, 87, .55); }
.quem-arroba { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 99px; background: #111; border: 1px solid rgba(217, 119, 87, .5); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.quem-txt p { margin: 0 0 14px; color: #cfcabe; font-size: 15px; line-height: 1.7; }
.numeros { margin: 22px 0 0; border-top: 1px solid var(--line); }
.numeros li { display: grid; gap: 1px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.numeros b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.numeros span { color: var(--dim); font-size: 13.5px; }

/* ---------- fecho: cartão de entrega no WhatsApp (padrão dos banners de checkout) ---------- */
.end { padding-bottom: 48px; }
.zap { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 10px 18px 10px 12px; border-radius: 14px; background: #0d1811; border: 1.5px solid #25d366; text-align: left;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .08), 0 12px 28px -14px rgba(37, 211, 102, .65); }
.zap__ic svg { width: 36px; height: 36px; fill: #25d366; }
.zap__div { width: 1px; align-self: stretch; background: rgba(37, 211, 102, .4); }
.zap__txt { display: grid; line-height: 1.12; }
.zap__txt small { color: #eaf6ee; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.zap__txt b { color: #3ee07f; font-size: 24px; font-weight: 800; letter-spacing: .01em; }

/* ---------- rodapé ---------- */
.foot { padding: 28px 20px 40px; text-align: center; color: var(--mute); font-size: 11.5px; border-top: 1px solid var(--line); }
.foot p { max-width: 420px; margin: 0 auto 6px; }
.foot__marca { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ink); font-size: 15px; font-weight: 700; }
.foot__marca span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.foot__marca svg { width: 15px; height: 15px; }

/* ---------- barra de comprar fixa (desligada no CONFIG: o Lucas mandou tirar da Fábrica em 18-10-2026) ---------- */
.barra-fixa { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 11, 12, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform .3s ease; }
.barra-fixa.on { transform: none; }
.barra-fixa .wrap { display: flex; align-items: center; gap: 12px; padding: 0; }
.barra-fixa p { display: grid; line-height: 1.15; font-size: 11px; color: var(--mute); white-space: nowrap; }
.barra-fixa p b { font-size: 19px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barra-fixa .btn { flex: 1; padding: 13px 12px; font-size: 15px; }


/* ---------- entrada suave (só com JS; o topo nunca tem) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- telas ---------- */
/* tela baixa (Safari com as barras): o título, o texto e a área de membros aparecem sem rolar */
@media (max-height: 720px) {
  .hero { padding-top: 22px; }
  .hero .h1 { font-size: clamp(24px, 6.9vw, 30px); margin-bottom: 10px; }
  .hero .sub { font-size: 15px; margin-bottom: 18px; }
}
@media (max-width: 370px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .chip { font-size: 13px; padding-left: 12px; }
  .zap__txt b { font-size: 21px; }
  .bonus { gap: 20px 12px; }
}
@media (min-width: 700px) {
  .gal figure, .sk { width: 180px; }
  .sk { height: 180px; }
  .gal .app { width: 74px; height: 74px; border-radius: 21px; }
  .gal .app svg { width: 36px; height: 36px; }
}
/* menos movimento: nada passando nem pulsando; o topo fica no 1º estado */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}