/* Landing do Sistema Semijoias — mesma estrutura de seções do site do Higi App, em versão escura com dourado. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.eyebrow { font: 800 12.5px/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin: 0 0 14px; }
.lp h1, .lp h2, .lp h3 { letter-spacing: -.025em; line-height: 1.1; color: var(--texto); }
.lp h2 { font-weight: 800; font-size: clamp(30px, 4vw, 46px); margin: 0 0 14px; }
.lp h2 em, .lp h1 em { font-style: normal; background: linear-gradient(90deg, #F6D88F, var(--ouro) 60%, #D79F35); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--texto-2); font-size: 18px; max-width: 36em; margin: 0 0 40px; }
.lp section { padding: 88px 0; }
.alt { background: var(--sup); }
.cab-centro { text-align: center; max-width: 820px; margin: 0 auto; }
.cab-centro .sub { margin-left: auto; margin-right: auto; }
.cab-largo { max-width: none; } .cab-largo .sub { max-width: none; }

/* ── Hero ── foto das joias ao fundo, coberta por um véu escuro: o texto fica sobre ~90% de preto */
.hero { padding: 32px 0 96px; position: relative; overflow: hidden; isolation: isolate; }
.hero-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,13,.97) 0%, rgba(11,11,13,.9) 42%, rgba(11,11,13,.45) 100%), linear-gradient(0deg, var(--fundo) 0, transparent 30%); }
.hero .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--ouro-borda); font-size: 13.5px; font-weight: 700; color: var(--ouro-claro); }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 4px rgba(232,182,76,.2); flex-shrink: 0; }
.hero h1 { font-size: clamp(31px, 3.5vw, 47px); font-weight: 800; margin: 22px 0 18px; }
.hero .lead { font-size: 19px; color: var(--texto-2); max-width: 32em; margin: 0; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 20px; }
.micro { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; font-weight: 600; color: var(--texto-2); margin: 0; padding: 0; list-style: none; }
.micro li::before { content: "✓ "; color: var(--ouro); font-weight: 800; }

/* ── Aparelhos ── */
.mac-tela { background: #050506; border-radius: 16px 16px 0 0; padding: 2.4% 2.4% 2.8%; box-shadow: 0 34px 70px -30px rgba(0,0,0,.9), 0 0 0 1px #2A2A30 inset; }
.mac-tela img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 3px; background: #111; }
.mac-base { position: relative; height: 13px; margin: 0 -6.5%; background: linear-gradient(#3A3A42, #1C1C21); border-radius: 0 0 14px 14px / 0 0 12px 12px; box-shadow: 0 16px 24px -14px rgba(0,0,0,.9); }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 5px; transform: translateX(-50%); background: #111; border-radius: 0 0 8px 8px; }
.iphone { position: relative; aspect-ratio: 820 / 1757; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }
.iphone::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url('img/lp-iphone-moldura.webp') center / 100% 100% no-repeat; pointer-events: none; }
.iphone-tela { position: absolute; left: 4.2%; right: 4.1%; top: 1.6%; bottom: 1.6%; overflow: hidden; border-radius: 15.4% / 6.8%; background: var(--barra, #111114); display: flex; flex-direction: column; }

/* Hero: iPhone real em perspectiva saindo da borda de baixo, com duas cenas (assistente → sistema no celular) */
.vitrine { position: relative; align-self: end; height: 560px; margin-bottom: -96px; clip-path: inset(-80px -400px 0 -400px); display: flex; justify-content: center; align-items: flex-start; padding: 0 0 0 40px; }
.iphone3d { position: relative; width: 340px; aspect-ratio: 760 / 1664; flex-shrink: 0; margin-top: 4px; }   /* sem filter aqui: filtro em ancestral do texto também falha no Firefox */
.i3-vao { position: absolute; inset: 0; overflow: hidden; }
.iphone-tela.i3-tela { left: 0; top: 0; right: auto; bottom: auto; width: 300px; height: 673px; border-radius: 0; transform-origin: 0 0; }
.i3-moldura { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)); }
.cena { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .7s ease, transform .7s ease; }
.cena-app { opacity: 0; transform: translateY(18px); }
.vitrine[data-cena="app"] .cena-chat { opacity: 0; transform: translateY(-18px); }
.vitrine[data-cena="app"] .cena-app { opacity: 1; transform: none; }
.vitrine .cena-chat .chat-corpo { padding-bottom: var(--corte, 110px); }

/* Assistente da loja (conversa em HTML, sem imagem) */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0F0F12; margin-top: 17%; }
.chat-topo { display: flex; align-items: center; gap: 9px; padding: 8px 12px 10px; border-bottom: 1px solid #23232A; color: var(--texto); font-size: 12px; }
.chat-topo b { display: block; font-size: 12.5px; }
.chat-topo small { color: var(--ok); font-size: 10px; font-weight: 700; }
.chat-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F4D58D, #C9962F); color: #1A1305; flex-shrink: 0; }
.chat-corpo { list-style: none; margin: 0; flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; justify-content: flex-end; font-size: 11.5px; line-height: 1.4; }
.chat-msg { max-width: 88%; padding: 7px 10px; border-radius: 12px; color: var(--texto); position: relative; }
.chat-eu { align-self: flex-end; background: linear-gradient(180deg, #F0C463, var(--ouro)); color: #1A1305; font-weight: 700; border-bottom-right-radius: 3px; }
.chat-ela { align-self: flex-start; background: #1E1E24; border: 1px solid #2B2B33; border-bottom-left-radius: 3px; }
.chat-card { display: block; margin-top: 6px; background: #141418; border: 1px solid #2B2B33; border-radius: 9px; padding: 7px 9px; }
.chat-card b { display: block; font-size: 16px; color: var(--ouro-claro); letter-spacing: -.02em; }
.chat-card small { color: var(--texto-2); font-size: 10px; }
.chat-card em { font-style: normal; color: var(--ok); font-weight: 800; font-size: 10px; }
.chat-linha { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #2B2B33; font-size: 10.5px; }
.chat-linha:last-child { border-bottom: 0; }
.chat-linha em { font-style: normal; font-weight: 800; color: var(--aviso); }
.chat-botoes { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.chat-botoes span { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--ouro-borda); color: var(--ouro-claro); font-weight: 700; font-size: 10px; }
.chat-digitando { align-self: flex-start; background: #1E1E24; border-radius: 12px; padding: 9px 12px; display: flex; gap: 4px; }
.chat-digitando i { width: 5px; height: 5px; border-radius: 50%; background: var(--texto-2); animation: pulo 1s infinite; }
.chat-digitando i:nth-child(2) { animation-delay: .15s; } .chat-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 50% { transform: translateY(-4px); } }
.chat.anima [data-passo] { display: none; }
.chat.anima [data-passo].on { display: flex; animation: entra .4s ease-out both; }
.chat.anima .chat-msg.on { display: block; }
.chat:not(.anima) [data-digitando] { display: none; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Início do app no celular (HTML) */
.app-home { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 54px 12px 0; background: linear-gradient(#1A1710 0 176px, #0F0F12 176px); color: var(--texto); font-size: 11px; line-height: 1.3; }
.ah-topo { display: flex; align-items: center; justify-content: space-between; }
.ah-topo img { height: 20px; width: auto; }
.ah-bt { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--ouro-claro); display: grid; place-items: center; }
.ah-bt i { position: absolute; top: -4px; right: -6px; font: 800 8.5px/1 var(--fonte); font-style: normal; background: var(--ouro); color: #1A1305; border-radius: 999px; padding: 2px 4px; }
.ah-linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ah-fat small { font-size: 11.5px; color: var(--texto-2); }
.ah-periodo { display: inline-flex; align-items: center; gap: 4px; background: rgba(232,182,76,.14); color: var(--ouro-claro); border-radius: 8px; padding: 4px 7px; font-size: 10px; font-weight: 700; }
.ah-fat b { display: block; font-size: 29px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ouro-claro); }
.ah-var { font-size: 10.5px; color: var(--texto-2); }
.ah-var span { background: var(--ok-fundo); color: var(--ok); font-weight: 800; border-radius: 999px; padding: 2px 7px; margin-right: 3px; }
.ah-kpis { display: grid; grid-template-columns: repeat(3, 1fr); background: #18181D; border: 1px solid #26262D; border-radius: 14px; padding: 10px 4px; text-align: center; }
.ah-kpis b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.ah-kpis small { color: var(--texto-3); font-size: 9.5px; }
.ah-graf { background: #18181D; border: 1px solid #26262D; border-radius: 14px; padding: 10px 11px; }
.ah-graf .ah-linha b { font-size: 11px; } .ah-graf em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--ouro); }
.ah-barras { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 8px; }
.ah-barras i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: #4A3D20; }
.ah-barras i:last-child { background: var(--ouro); }
.ah-sec b { font-size: 13px; font-weight: 800; } .ah-sec span { font-size: 10px; font-weight: 700; color: var(--ouro); }
.ah-item { display: flex; align-items: center; gap: 8px; background: #18181D; border: 1px solid #26262D; border-radius: 12px; padding: 8px 10px; }
.ah-item .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 9px; color: #fff; background: var(--c); flex-shrink: 0; }
.ah-item > span:not(.av) { flex: 1; min-width: 0; font-weight: 700; font-size: 11px; } .ah-item small { display: block; font-weight: 600; color: var(--texto-3); font-size: 9.5px; }
.ah-item em { font-style: normal; font-weight: 800; font-size: 11px; color: var(--ouro-claro); }

.chamada { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: 232px; padding: 11px 14px; background: rgba(22,22,26,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--linha-2); border-radius: 16px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.7); font-size: 13.5px; line-height: 1.3; color: var(--texto);
    opacity: 0; transform: translateX(-14px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.chamada.on { opacity: 1; transform: none; }
.chamada b { display: block; font-size: 14px; }
.chamada small { color: var(--texto-2); font-size: 12.5px; }
.chamada .ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.chamada[data-lado="d"] { right: 0; } .chamada[data-lado="e"] { left: 0; }

/* ── Ícones ── */
.ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ouro-fundo); color: var(--ouro); flex-shrink: 0; }
.ico-p { width: 40px; height: 40px; border-radius: 12px; }

/* ── Pilares ── */
.pilares { border-top: 1px solid var(--linha); padding: 32px 0 8px; }
.pilares ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pilares li { position: relative; overflow: hidden; isolation: isolate; padding: 22px 22px 26px; border-radius: 20px; text-align: center;
    background: linear-gradient(160deg, #1D1A12 0%, #121215 100%); border: 1px solid var(--ouro-borda); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); }
.pilares .ico { margin-bottom: 14px; width: 46px; height: 46px; background: rgba(232,182,76,.16); color: var(--ouro-claro); }
.pilares .pilar-fundo { position: absolute; right: -26px; bottom: -30px; z-index: -1; color: var(--ouro); opacity: .07; pointer-events: none; line-height: 0; }
.pilares strong { display: block; font-size: 20px; font-weight: 800; color: var(--texto); }
.pilares li > span:not(.ico):not(.pilar-fundo) { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-2); font-weight: 600; line-height: 1.45; }

/* ── Pergunte à assistente ── */
.cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.cmd { background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; }
.cmd q { display: block; background: linear-gradient(180deg, #F0C463, var(--ouro)); color: #1A1305; font-weight: 700; border-radius: 12px 12px 3px 12px; padding: 10px 12px; font-size: 14.5px; margin-bottom: 14px; quotes: none; }
.cmd q::before { content: "✦ "; opacity: .6; }
.cmd h3 { font-size: 17.5px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.cmd h3 .ico { width: 34px; height: 34px; border-radius: 10px; }
.cmd p { margin: 0; font-size: 14.5px; color: var(--texto-2); }

/* ── Passos ── */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passos li { background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 26px; counter-increment: p; }
.passos .ico { position: relative; margin-bottom: 16px; }
.passos .ico::after { content: counter(p); position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ouro); color: #1A1305; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--fundo); }
.passos h3 { font-size: 19px; margin: 0 0 6px; }
.passos p { margin: 0; color: var(--texto-2); font-size: 15.5px; }
.como { background: radial-gradient(900px 400px at 50% 0, rgba(232,182,76,.12), transparent 70%), #14120D; border-top: 1px solid #2A2416; border-bottom: 1px solid #2A2416; }
.como .passos li { text-align: center; background: rgba(255,255,255,.03); border-color: rgba(232,182,76,.18); }
.como .passos .ico { background: rgba(232,182,76,.14); color: var(--ouro-claro); }
.como .passos .ico::after { border-color: #14120D; }

/* ── Três jeitos de usar ── */
.usos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.uso { background: var(--card); border: 1px solid var(--linha); border-radius: 22px; padding: 18px 18px 24px; }
.uso-midia { height: 250px; border-radius: 16px; background: radial-gradient(400px 200px at 50% 0, rgba(232,182,76,.16), transparent 70%), var(--card-2); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 26px; margin-bottom: 20px; }
.uso-midia.foto { padding: 0; display: block; }
.uso-midia.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uso-midia .mac { width: 88%; margin-top: 18px; }
.uso-midia .iphone { width: 168px; flex-shrink: 0; }
/* Tela do app desenhada em 300px e reduzida por transform (zoom quebrava o texto no Firefox) */
.uso-midia .iphone .app-home { flex: none; width: 300px; height: 652px; transform: scale(var(--k, .515)); transform-origin: 0 0; padding-top: 50px; }
.uso h3 { font-size: 19px; margin: 0 0 6px; padding: 0 6px; }
.uso p { margin: 0; font-size: 15px; color: var(--texto-2); padding: 0 6px; }

/* ── O sistema completo ── folha que sobe sobre a seção anterior, com selo no meio da borda */
.sistema-vitrine { max-width: 900px; margin: 0 auto 48px; padding: 0 7%; }
.sistema-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sistema-topo .sub { margin-bottom: 0; }
.sistema-topo .sistema-vitrine { max-width: none; margin: 0; padding: 0 6%; }
.sistema-folha { position: relative; isolation: isolate; margin-top: 8px; padding-top: 120px !important; padding-bottom: 160px !important; border-radius: 56px 56px 0 0;
    background: radial-gradient(900px 380px at 50% 0, rgba(232,182,76,.10), transparent 70%), linear-gradient(180deg, #141417 0, var(--fundo) 640px);
    box-shadow: 0 -1px 0 #2A2A31, 0 -30px 60px -40px rgba(232,182,76,.25); }
.sistema-folha::before { content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 70%); height: 1px; transform: translateX(-50%); z-index: -1; background: linear-gradient(90deg, transparent, rgba(232,182,76,.7), transparent); }
.sistema-selo { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px;
    border-radius: 999px; background: var(--card); border: 1px solid var(--ouro-borda); box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); font-size: 13.5px; font-weight: 800; color: var(--texto); white-space: nowrap; }
.sistema-selo i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro); color: #1A1305; font-style: normal; box-shadow: 0 0 0 5px rgba(232,182,76,.14); }
.sistema-divisor { display: flex; align-items: center; gap: 22px; padding: 96px 0 40px; }
.sistema-divisor::before, .sistema-divisor::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #4A3D20); }
.sistema-divisor::after { background: linear-gradient(90deg, #4A3D20, transparent); }
.sistema-divisor span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--ouro-borda);
    color: var(--ouro); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.faq-sec { padding-bottom: 200px !important; }
.final-sobe { position: relative; z-index: 2; margin-top: -120px; margin-bottom: 88px; }
.folha-planos { padding-bottom: 96px !important; }

/* ═══════════ MINI-TELAS (dados de exemplo) ═══════════ */
.viz { --s: 1; font-size: calc(14px * var(--s)); position: relative; width: 100%; height: 100%; color: var(--texto); }
.tela { background: #17171C; border: 1px solid #2A2A31; border-radius: 1.2em; box-shadow: 0 1.6em 3.4em -1.6em rgba(0,0,0,.8); padding: 1.3em; height: 100%; display: flex; flex-direction: column; gap: 1em; overflow: hidden; }
.tela-topo { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.tela-topo small { color: var(--texto-2); font-weight: 700; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; }
.tela-topo .pill { font-size: .78em; font-weight: 700; padding: .35em .8em; border-radius: 999px; background: var(--ouro-fundo); color: var(--ouro-claro); }
.entra { opacity: 0; transform: translateY(.7em); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.on .entra { opacity: 1; transform: none; }

/* 1 · Painel */
.vp-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .7em; }
.vp-kpis > div { background: #1F1F25; border-radius: .9em; padding: .8em .9em; }
.vp-kpis small { display: block; color: var(--texto-2); font-size: .76em; font-weight: 600; }
.vp-kpis b { display: block; font-size: 1.45em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vp-kpis > div:first-child { background: linear-gradient(135deg, #3A2F14, #221C0E); border: 1px solid var(--ouro-borda); }
.vp-kpis > div:first-child b { color: var(--ouro-claro); }
.vp-kpis em { font-style: normal; font-size: .72em; font-weight: 700; color: var(--ok); }
.vp-graf { flex: none; height: 9em; display: flex; align-items: flex-end; gap: .5em; padding-top: .5em; border-bottom: 1px solid #2A2A31; }
.vp-graf i { flex: 1; height: 0; border-radius: .45em .45em .15em .15em; background: linear-gradient(180deg, #6B5626, #3A2F14); transition: height .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 90ms + 200ms); }
.vp-graf i:last-child { background: linear-gradient(180deg, #F4D58D, var(--ouro)); }
.on .vp-graf i { height: var(--h); }
.vp-meses { display: flex; gap: .5em; font-size: .7em; color: var(--texto-3); font-weight: 600; }
.vp-meses span { flex: 1; text-align: center; }
.vp-alerta { display: flex; align-items: center; gap: .6em; font-size: .82em; font-weight: 600; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); color: #FCD98A; border-radius: .8em; padding: .55em .8em; }
.vp-alerta i { width: .55em; height: .55em; border-radius: 50%; background: var(--aviso); box-shadow: 0 0 0 .3em rgba(251,191,36,.18); flex-shrink: 0; }

/* 2 · Cadastro com IA */
.vi-barra { height: .6em; border-radius: 999px; background: #26262D; overflow: hidden; }
.vi-barra::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro-claro)); transition: width 2.2s cubic-bezier(.2,.8,.2,1) .3s; }
.on .vi-barra::after { width: 78%; }
.vi-progresso { display: flex; justify-content: space-between; font-size: .78em; font-weight: 700; color: var(--texto-2); margin-top: -.4em; }
.vi-lista { display: grid; gap: .55em; }
.vi-item { display: flex; align-items: center; gap: .8em; padding: .55em .65em; border-radius: .9em; background: #1F1F25; }
.vi-foto { width: 2.8em; height: 2.8em; border-radius: .6em; flex-shrink: 0; background: radial-gradient(circle at 35% 35%, #F6E0A4 0 18%, transparent 19%), radial-gradient(circle at 65% 60%, #E8B64C 0 22%, transparent 23%), linear-gradient(135deg, #2A2A31, #121215); }
.vi-item div { flex: 1; min-width: 0; font-weight: 700; font-size: .86em; line-height: 1.25; }
.vi-item div small { display: block; color: var(--texto-3); font-weight: 600; font-size: .86em; }
.vi-item em { font-style: normal; font-size: .72em; font-weight: 800; padding: .3em .65em; border-radius: 999px; background: var(--ok-fundo); color: var(--ok); white-space: nowrap; }
.vi-item.gerando em { background: var(--ouro-fundo); color: var(--ouro-claro); }

/* 3 · Precificação */
.vpr-servico { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1.05em; gap: .6em; }
.vpr-servico span { font-size: .72em; font-weight: 700; color: var(--ouro-claro); background: var(--ouro-fundo); padding: .3em .7em; border-radius: 999px; white-space: nowrap; }
.vpr-corpo { display: grid; grid-template-columns: 1fr auto; gap: 1.2em; align-items: center; flex: 1; }
.vpr-linhas { display: grid; gap: .5em; }
.vpr-linha { display: grid; grid-template-columns: 6.6em 1fr 3.4em; align-items: center; gap: .6em; font-size: .82em; font-weight: 600; color: var(--texto-2); }
.vpr-linha b { text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.vpr-linha u { text-decoration: none; height: .55em; border-radius: 999px; background: #26262D; overflow: hidden; }
.vpr-linha u::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c, #B98A2C); transition: width .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 120ms + 200ms); }
.on .vpr-linha u::after { width: var(--w); }
.vpr-anel { --p: 0; width: 8.4em; height: 8.4em; border-radius: 50%; display: grid; place-items: center; text-align: center;
    background: radial-gradient(closest-side, #17171C 78%, transparent 79%), conic-gradient(var(--ouro) calc(var(--p) * 1%), #26262D 0); transition: --p 1.4s cubic-bezier(.2,.8,.2,1) .5s; }
.on .vpr-anel { --p: 63; }
.vpr-anel b { display: block; font-size: 1.9em; letter-spacing: -.03em; color: var(--ouro-claro); line-height: 1; }
.vpr-anel small { font-size: .72em; font-weight: 700; color: var(--texto-2); }
.vpr-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #2A2A31; padding-top: .8em; font-weight: 700; font-size: .9em; gap: .6em; }
.vpr-total strong { font-size: 1.5em; letter-spacing: -.02em; color: var(--ouro-claro); white-space: nowrap; }

/* 4 · Maletas na rua e 5 · Clientes/revendedoras (lista) */
.vc-lista { display: grid; gap: .5em; }
.vc-cli { display: flex; align-items: center; gap: .75em; padding: .6em .7em; border-radius: .9em; background: #1F1F25; }
.vc-cli .av { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--c); font-size: .85em; flex-shrink: 0; }
.vc-cli div { flex: 1; min-width: 0; font-weight: 700; font-size: .9em; line-height: 1.25; }
.vc-cli div small { display: block; color: var(--texto-3); font-weight: 600; font-size: .85em; }
.vc-cli em { font-style: normal; font-size: .75em; font-weight: 800; padding: .35em .7em; border-radius: 999px; background: #26262D; color: var(--texto-2); white-space: nowrap; }
.vc-cli.quente em { background: var(--alerta-fundo); color: #FCA5A5; }
.vc-aviso { margin-top: auto; display: flex; align-items: center; gap: .6em; font-size: .82em; font-weight: 700; color: #FCA5A5; background: var(--alerta-fundo); border-radius: .8em; padding: .6em .8em; border: 1px solid rgba(248,113,113,.25); }
.vc-aviso b { width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: var(--alerta); color: #fff; font-size: .85em; flex-shrink: 0; }

/* 5 · Conferência do acerto */
.vo-fila { display: grid; gap: .45em; align-content: start; }
.vo-item { display: flex; align-items: center; gap: .7em; font-size: .85em; font-weight: 700; padding: .55em .7em; border-radius: .8em; background: #1F1F25; }
.vo-item span { flex: 1; } .vo-item small { color: var(--texto-3); font-weight: 600; }
.vo-item em { font-style: normal; font-size: .82em; font-weight: 800; padding: .25em .6em; border-radius: 999px; }
.vo-item em.vendeu { background: var(--ok-fundo); color: var(--ok); }
.vo-item em.voltou { background: #26262D; color: var(--texto-2); }
.vo-total { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.vo-total > div { border-radius: .9em; padding: .7em .85em; background: #1F1F25; }
.vo-total small { display: block; font-size: .74em; font-weight: 600; color: var(--texto-2); }
.vo-total b { font-size: 1.25em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vo-total .com b { color: var(--ouro-claro); }

/* 6 · Catálogo da revendedora */
.vk-link { display: flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 700; background: #1F1F25; border-radius: 999px; padding: .45em .8em; color: var(--texto-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vk-link b { color: var(--ouro-claro); }
.vk-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.vk-prod { background: #1F1F25; border-radius: .9em; padding: .5em; font-size: .78em; font-weight: 700; line-height: 1.25; }
.vk-prod .vi-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: .6em; margin-bottom: .4em; }
.vk-prod small { display: block; color: var(--ouro-claro); font-weight: 800; }
.vk-pedido { margin-top: auto; display: flex; align-items: center; gap: .7em; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); border-radius: .9em; padding: .6em .8em; font-size: .82em; font-weight: 700; }
.vk-pedido b { width: 1.8em; height: 1.8em; border-radius: .6em; display: grid; place-items: center; background: var(--ok); color: #05210F; flex-shrink: 0; }
.vk-pedido small { display: block; color: var(--texto-2); font-weight: 600; }

/* 7 · Clube de pontos */
.vav-nota { display: flex; align-items: center; gap: .8em; }
.vav-nota > b { font-size: 2.3em; letter-spacing: -.04em; line-height: 1; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.vav-nota small { color: var(--texto-2); font-weight: 600; font-size: .8em; display: block; }
.vav-barras { display: grid; gap: .45em; }
.vav-barras > div { display: grid; grid-template-columns: 5.6em 1fr 2.8em; gap: .6em; align-items: center; font-size: .8em; font-weight: 700; color: var(--texto-2); }
.vav-barras u { text-decoration: none; height: .6em; border-radius: 999px; background: #26262D; overflow: hidden; }
.vav-barras u::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c, var(--ouro)); transition: width .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 140ms + 250ms); }
.on .vav-barras u::after { width: var(--w); }
.vav-barras em { font-style: normal; text-align: right; color: var(--texto); }
.vav-com { background: #1F1F25; border-radius: .9em; padding: .65em .8em; font-size: .82em; font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: .6em; }
.vav-com small { display: block; margin-top: .15em; color: var(--texto-3); font-size: .9em; }
.vav-com em { margin-left: auto; font-style: normal; font-size: .82em; font-weight: 800; padding: .25em .6em; border-radius: 999px; background: var(--ouro-fundo); color: var(--ouro-claro); white-space: nowrap; }

/* 8 · Financeiro */
.vf-topo { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.vf-topo > div { border-radius: .9em; padding: .75em .9em; background: #1F1F25; }
.vf-topo small { display: block; font-size: .76em; font-weight: 600; color: var(--texto-2); }
.vf-topo b { font-size: 1.35em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vf-topo .rec b { color: var(--ok); }
.vf-eqs { display: grid; gap: .65em; flex: 1; align-content: center; }
.vf-eq { display: grid; grid-template-columns: 7em 1fr 4.6em; gap: .7em; align-items: center; font-size: .85em; font-weight: 700; }
.vf-eq b { text-align: right; font-variant-numeric: tabular-nums; }
.vf-eq u { text-decoration: none; height: 1.1em; border-radius: .45em; background: #26262D; overflow: hidden; }
.vf-eq u::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro-claro)); transition: width 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 140ms + 250ms); }
.on .vf-eq u::after { width: var(--w); }
.vf-nota { font-size: .78em; font-weight: 700; color: var(--texto-2); display: flex; align-items: center; gap: .5em; }
.vf-nota i { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); }

/* ═══════════ Passos na rolagem com celular fixo ═══════════ */
.o3-grade { display: grid; grid-template-columns: 1fr 440px; gap: 64px; }
.o3-passos { position: relative; }
.o3-passos::before { content: ""; position: absolute; left: 27px; top: 36vh; bottom: 36vh; width: 2px; background: var(--linha); }
.o3-passo { min-height: 72vh; display: flex; align-items: center; position: relative; padding-left: 84px; }
.o3-passo .num { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 18px;
    background: var(--card); border: 2px solid var(--linha-2); color: var(--texto-3); transition: all .35s; }
.o3-passo.ativo .num { background: var(--ouro); border-color: var(--ouro); color: #1A1305; box-shadow: 0 10px 24px -8px rgba(232,182,76,.6); }
.o3-passo h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.1; margin: 8px 0 12px; font-weight: 800; transition: color .35s; color: #4D4B46; }
.o3-passo .tag { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4D4B46; transition: color .35s; }
.o3-passo p { margin: 0; font-size: 17px; color: #4D4B46; max-width: 30em; transition: color .35s; }
.o3-passo.ativo h3 { color: var(--texto); } .o3-passo.ativo .tag { color: var(--ouro); } .o3-passo.ativo p { color: var(--texto-2); }
.o3-passo .so-celular { display: none; }
.o3-fixo { position: sticky; top: 90px; height: calc(100vh - 120px); max-height: 760px; display: grid; place-items: center; }
.o3-aparelho { position: relative; width: 340px; aspect-ratio: 820 / 1757; filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.o3-aparelho::after { content: ""; position: absolute; inset: 0; background: url('img/lp-iphone-moldura.webp') center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
.o3-tela { position: absolute; left: 4.2%; right: 4.1%; top: 1.6%; bottom: 1.6%; border-radius: 15.4% / 6.8%; overflow: hidden; background: #0F0F12; }
.o3-tela .barra-app { height: 22%; background: linear-gradient(180deg, #2A2312, #15130D); color: var(--texto); padding: 22% 8% 0; font-weight: 800; font-size: 15px; display: flex; align-items: flex-start; gap: 6px; }
.o3-tela .barra-app small { display: block; font-weight: 600; font-size: 11.5px; color: var(--ouro-claro); }
.o3-cena { position: absolute; left: 4%; right: 4%; top: 17%; bottom: 12%; opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.o3-cena.ativa { opacity: 1; transform: none; }
.tab-app { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: #16161A; border-top: 1px solid #26262D; display: flex; align-items: center; justify-content: space-around; font-size: 10.5px; font-weight: 700; color: var(--texto-3); padding: 0 6% 4%; }
.tab-app b { width: 40px; height: 40px; border-radius: 50%; background: var(--ouro); color: #1A1305; display: grid; place-items: center; font-size: 18px; margin-top: -22px; box-shadow: 0 8px 18px -6px rgba(232,182,76,.6); }
.o3-cena .viz { --s: .74; }
.o3-cena .tela { height: auto; }
.o3-cena .vpr-corpo { grid-template-columns: 1fr; justify-items: center; }
.o3-cena .vpr-linhas { width: 100%; }
.o3-cena .vp-kpis { grid-template-columns: 1fr 1fr; } .o3-cena .vp-kpis > div:first-child { grid-column: span 2; }
.o3-cena .vp-graf { min-height: 9em; }
.o3-cena .vf-eq { grid-template-columns: 6em 1fr 4.4em; }

/* ── Do pedido ao caixa ── */
.fluxo { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; position: relative; counter-reset: f; }
.fluxo::before { content: ""; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, #4A3D20, var(--ouro), #4A3D20); }
.fluxo li { padding: 0 14px; position: relative; text-align: center; }
.fluxo li::before { counter-increment: f; content: counter(f); width: 44px; height: 44px; border-radius: 50%; background: var(--ouro); color: #1A1305; display: grid; place-items: center; font-weight: 800; margin: 0 auto 14px; position: relative; box-shadow: 0 0 0 6px var(--sup); }
.fluxo h3 { font-size: 17.5px; margin: 0 0 6px; }
.fluxo p { margin: 0; font-size: 15px; color: var(--texto-2); }
.duas-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; margin: 0 auto 52px; }
.duas-fotos figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--linha); }
.duas-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.duas-fotos figcaption { position: absolute; left: 12px; top: 12px; background: rgba(11,11,13,.82); color: var(--texto); font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linha-2); }
.duas-fotos figure:last-child figcaption { background: var(--ouro); color: #1A1305; border-color: var(--ouro); }

/* ── Captação de revendedoras (animação: perfil → formulário → painel) ── */
.dir { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dir > * { min-width: 0; }
.dir ul.lista-ok { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.dir ul.lista-ok li { position: relative; padding-left: 30px; color: var(--texto-2); font-size: 16px; }
.dir ul.lista-ok li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ouro-fundo); color: var(--ouro); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.busca { position: relative; min-width: 0; }
.bu-janela { border-radius: 20px; background: #141418; border: 1px solid var(--linha-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); overflow: hidden; }
.bu-barra { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #1C1C21; border-bottom: 1px solid #2A2A31; }
.bu-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3A3A42; } .bu-barra i:first-child { background: #FF6159; } .bu-barra i:nth-child(2) { background: #FFBD2E; } .bu-barra i:nth-child(3) { background: #28C941; }
.bu-barra span { flex: 1; margin-left: 10px; background: #0F0F12; border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--texto-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-palco { position: relative; height: 360px; }
.bu-cena { position: absolute; inset: 0; padding: 22px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.bu-cena.on { opacity: 1; transform: none; }
/* perfil (rede social genérica) */
.bu-perfil { display: flex; flex-direction: column; gap: 14px; }
.bu-pf-topo { display: flex; align-items: center; gap: 16px; }
.bu-pf-av { width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: conic-gradient(#F4D58D, #E8B64C, #B98A2C, #F4D58D); flex-shrink: 0; }
.bu-pf-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #111; border: 3px solid #141418; color: var(--ouro); }
.bu-pf-num { display: flex; gap: 18px; font-size: 12px; color: var(--texto-2); text-align: center; } .bu-pf-num b { display: block; color: var(--texto); font-size: 15px; }
.bu-pf-bio { font-size: 13.5px; line-height: 1.45; color: var(--texto); } .bu-pf-bio b { display: block; font-size: 14.5px; } .bu-pf-bio small { color: var(--texto-2); }
.bu-pf-link { display: inline-flex; align-items: center; gap: 6px; color: #8AB4F8; font-weight: 700; font-size: 13.5px; padding: 6px 10px; margin-left: -10px; border-radius: 8px; transition: background .2s; }
.bu-pf-link.ativo { background: rgba(138,180,248,.14); }
.bu-pf-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: auto; }
.bu-pf-grade i { aspect-ratio: 1; border-radius: 4px; background: radial-gradient(circle at 40% 40%, rgba(244,213,141,.8) 0 14%, transparent 15%), linear-gradient(135deg, #2A2A31, #121215); }
/* formulário */
.bu-form { padding: 0; background: linear-gradient(#1A1710 0 92px, #0F0F12 92px); }
.bu-fm-topo { display: flex; align-items: center; gap: 8px; color: var(--texto); font-weight: 800; font-size: 15px; padding: 18px 22px; }
.bu-fm-topo img { height: 22px; width: auto; }
.bu-fm-corpo { margin: 0 22px; background: #17171C; border: 1px solid #2A2A31; border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.bu-fm-corpo > b { font-size: 16px; }
.bu-chips { display: flex; gap: 6px; flex-wrap: wrap; } .bu-chips span { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: #26262D; color: var(--texto-2); } .bu-chips span.on { background: var(--ouro); color: #1A1305; }
.bu-fm-corpo label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--texto-2); }
.bu-fm-corpo label span { display: block; min-height: 34px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #34343C; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.bu-enviar { display: block; text-align: center; padding: 11px; border-radius: 10px; background: var(--ouro); color: #1A1305; font-weight: 800; font-size: 14px; transition: transform .15s, filter .2s; } .bu-enviar.ativo { transform: scale(.97); filter: brightness(.9); }
/* painel */
.bu-painel { background: #0F0F12; padding: 0; }
.bu-pa-topo { display: flex; align-items: center; justify-content: space-between; background: #1A1710; border-bottom: 1px solid #2A2416; color: var(--texto); padding: 12px 22px; font-weight: 800; font-size: 13px; }
.bu-pa-topo img { height: 18px; width: auto; }
.bu-toast { position: absolute; left: 50%; top: 58px; transform: translate(-50%, -16px); opacity: 0; display: flex; align-items: center; gap: 10px; background: var(--texto); color: #15120B; border-radius: 14px; padding: 10px 16px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); white-space: nowrap; z-index: 2; }
.bu-toast.on { opacity: 1; transform: translate(-50%, 0); } .bu-toast b { display: block; font-size: 13.5px; } .bu-toast small { font-size: 11.5px; opacity: .7; } .bu-toast i { font-style: normal; font-size: 18px; }
.bu-cand { margin: 66px 22px 12px; background: #17171C; border: 1px solid #2A2A31; border-left: 4px solid var(--ouro); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.bu-nota { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: radial-gradient(closest-side, #17171C 76%, transparent 77%), conic-gradient(var(--ouro) calc(var(--p) * 1%), #26262D 0); font-weight: 800; font-size: 16px; color: var(--ouro-claro); }
.bu-cand-l { flex: 1; min-width: 0; } .bu-cand-l b { display: block; font-size: 14.5px; } .bu-cand-l small { display: block; font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.bu-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 22px; } .bu-tags span { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--ouro-fundo); color: var(--ouro-claro); border: 1px solid var(--ouro-borda); }
.bu-mouse { position: absolute; left: 70%; top: 80%; z-index: 5; transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), transform .15s; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.bu-mouse.clica { transform: scale(.8); }

/* ── Segurança ── */
.seg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.seg li { background: var(--card); border: 1px solid var(--linha); border-radius: 20px; padding: 26px; }
.seg .ico { margin-bottom: 16px; }
.seg h3 { font-size: 19px; margin: 0 0 8px; }
.seg p { margin: 0; font-size: 15.5px; color: var(--texto-2); }

/* ── Planos ── */
.planos-topo { text-align: center; }
.planos-topo .sub { margin-left: auto; margin-right: auto; }
.periodos { display: inline-flex; gap: 4px; padding: 5px; background: var(--card); border: 1px solid var(--linha-2); border-radius: 999px; }
.periodos button { border: 0; background: transparent; font: 700 15px var(--fonte); color: var(--texto-2); padding: 10px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.periodos button small { font-size: 11.5px; font-weight: 800; color: var(--ok); background: var(--ok-fundo); padding: 2px 7px; border-radius: 999px; }
.periodos button.ativo { background: var(--ouro); color: #1A1305; }
.periodos button.ativo small { background: rgba(26,19,5,.14); color: #1A1305; }
.periodos-linha { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 34px; }
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plano { background: var(--card); border: 1px solid var(--linha); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; position: relative; }
.plano.destaque { border: 2px solid var(--ouro); background: radial-gradient(500px 220px at 50% 0, rgba(232,182,76,.12), transparent 70%), var(--card); box-shadow: 0 20px 60px -30px rgba(232,182,76,.55); }
.plano-selo { position: absolute; top: -13px; left: 28px; background: var(--ouro); color: #1A1305; font: 800 11.5px var(--fonte); letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; }
.plano h3 { font-size: 24px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.plano h3 .ico { width: 34px; height: 34px; border-radius: 10px; }
.plano .desc { color: var(--texto-2); font-size: 15px; min-height: 3em; margin: 0 0 16px; }
.plano-preco { min-height: 128px; }
.plano .de { display: block; color: var(--texto-3); font-size: 15px; margin-bottom: 4px; }
.plano .valor { font-weight: 800; font-size: 42px; letter-spacing: -.03em; line-height: 1; }
.plano .valor .un { font-size: 15px; font-weight: 600; color: var(--texto-2); letter-spacing: 0; }
.plano .fatura { margin: 10px 0 0; font-size: 14px; color: var(--texto-2); }
.plano .fatura b { color: var(--texto); }
.plano .economia { display: inline-block; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--ok); background: var(--ok-fundo); padding: 4px 10px; border-radius: 999px; }
.plano ul { list-style: none; padding: 0; margin: 18px 0 26px; flex: 1; }
.plano li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; border-bottom: 1px solid #22222A; color: var(--texto); }
.plano li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2.5px solid var(--ouro); border-bottom: 2.5px solid var(--ouro); transform: rotate(-45deg); }
.plano li.nao { color: var(--texto-3); } .plano li.nao::before { border-color: #4D4B46; }
.planos-nota { margin: 26px auto 0; font-size: 14.5px; color: var(--texto-2); text-align: center; max-width: 46em; }
.planos-aviso { text-align: center; color: var(--texto-2); background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 28px; max-width: 620px; margin: 0 auto; }

/* ── FAQ ── */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linha); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 17.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ouro); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--texto-2); margin: 10px 0 0; max-width: 46em; }
.faq details p strong { color: var(--texto); }

/* ── CTA final ── */
.final { position: relative; isolation: isolate; overflow: hidden; background: #14120D; border: 1px solid var(--ouro-borda); border-radius: 28px; padding: 72px 40px; text-align: center; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.final-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,13,.94) 0%, rgba(11,11,13,.82) 50%, rgba(11,11,13,.6) 100%); }
.final h2 { max-width: 15em; margin: 0 auto 14px; }
.final p { color: var(--texto-2); max-width: 34em; margin: 0 auto 28px; font-size: 18px; }

/* ── Blog na landing ── */
.blog-lp-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-lp-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.blog-lp-card:hover { transform: translateY(-2px); border-color: var(--ouro-borda); }
.blog-lp-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--card-2); }
.blog-lp-corpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.blog-lp-cat { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.blog-lp-card h3 { font-size: 18.5px; line-height: 1.3; margin: 0; }
.blog-lp-card p { margin: 0; color: var(--texto-2); font-size: 15px; }
.blog-lp-pe { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--texto-3); }
.blog-lp-pe span { color: var(--ouro); font-weight: 700; }
.blog-lp-todos { margin-top: 30px; text-align: center; }

/* ── Para quem é ── */
.publicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.publicos li { background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; }
.publicos .ico { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; }
.publicos h3 { font-size: 17px; margin: 0 0 6px; }
.publicos p { margin: 0; font-size: 14.5px; color: var(--texto-2); }

/* ── White label: a mesma tela trocando de marca, cor e endereço ── */
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wl > * { min-width: 0; }
.wl-oque { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--ouro-borda); border-radius: 16px; padding: 16px 18px; margin: -12px 0 22px; }
.wl-oque p { margin: 0; font-size: 15.5px; color: var(--texto-2); }
.wl-oque b { color: var(--texto); }
.wl .lista-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl .lista-ok li { position: relative; padding-left: 30px; color: var(--texto-2); font-size: 16px; }
.wl .lista-ok li b { color: var(--texto); }
.wl .lista-ok li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ouro-fundo); color: var(--ouro); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.wl-url { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; color: var(--ouro-claro); background: rgba(232,182,76,.1); padding: 1px 7px; border-radius: 6px; }
.wl-demo { --m: #E58FA6; --m2: #3A1E28; position: relative; padding: 0 0 40px 0; }
.wl-demo * { transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease; }
.wl-demo .bu-barra span { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.wl-demo .bu-barra svg { color: var(--ok); }
.wl-demo .bu-barra b { color: var(--texto); font-weight: 700; }
.wl-tela { background: #F7F5F2; color: #1C1A17; }
.wl-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--m2); color: #fff; }
.wl-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; } .wl-logo svg { color: var(--m); }
.wl-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--m); color: var(--m2); }
.wl-corpo { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 16px 18px 18px; }
.wl-kpi { background: #fff; border: 1px solid #ECE7E0; border-radius: 12px; padding: 10px 12px; }
.wl-kpi small { display: block; font-size: 11px; color: #7A746B; font-weight: 600; } .wl-kpi b { font-size: 18px; letter-spacing: -.02em; }
.wl-kpi-1 { background: var(--m); border-color: var(--m); color: var(--m2); } .wl-kpi-1 small { color: var(--m2); opacity: .8; }
.wl-graf { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; height: 96px; background: #fff; border: 1px solid #ECE7E0; border-radius: 12px; padding: 12px; }
.wl-graf i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--m); opacity: .35; }
.wl-graf i:last-child { opacity: 1; }
.wl-botao { grid-column: 1 / -1; justify-self: end; padding: 9px 16px; border-radius: 999px; background: var(--m2); color: #fff; font-size: 13px; font-weight: 800; }
.wl-app { position: absolute; left: -22px; bottom: 0; display: grid; justify-items: center; gap: 6px; padding: 14px 16px 10px; border-radius: 22px; background: rgba(22,22,26,.92); border: 1px solid var(--linha-2); box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wl-icone { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(150deg, var(--m), var(--m2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(0,0,0,.7); }
.wl-app small { font-size: 11.5px; font-weight: 700; color: var(--texto); }
.wl-cores { position: absolute; right: 18px; bottom: 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.wl-cores i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); }
.wl-cores i[data-wl-cor="1"] { background: var(--m); } .wl-cores i[data-wl-cor="2"] { background: var(--m2); }

/* ── E muito mais ── */
.mais { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mais li { position: relative; background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; transition: border-color .2s, transform .2s; }
.mais li:hover { border-color: var(--ouro-borda); transform: translateY(-2px); }
.mais .ico { margin-bottom: 14px; }
.mais h3 { font-size: 17px; margin: 0 0 6px; }
.mais p { margin: 0; font-size: 14.5px; color: var(--texto-2); line-height: 1.5; }
.mais-destaque { grid-column: span 2; display: grid; grid-template-columns: 1fr .9fr; gap: 18px; align-items: center; background: radial-gradient(420px 220px at 100% 0, rgba(232,182,76,.18), transparent 70%), linear-gradient(160deg, #1D1A12, var(--card)) !important; border-color: var(--ouro-borda) !important; }
.mais-portal { display: grid; gap: 8px; background: #0F0F12; border: 1px solid #2A2A31; border-radius: 16px; padding: 14px; font-size: 13px; }
.mais-portal > b { font-size: 14.5px; margin-bottom: 2px; }
.mais-portal span { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #1A1A1F; border-radius: 10px; padding: 8px 10px; font-weight: 800; color: var(--ouro-claro); }
.mais-portal small { color: var(--texto-2); font-weight: 600; font-size: 12px; flex: 1; }
.mais-portal u { text-decoration: none; width: 60px; height: 6px; border-radius: 999px; background: #2A2A31; overflow: hidden; } .mais-portal u::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--ouro); }
@media (max-width: 960px) {
    .wl { grid-template-columns: 1fr; gap: 40px; }
    .mais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .wl > div:first-child { text-align: center; } .wl .sub { margin-left: auto; margin-right: auto; }
    .wl-oque, .wl .lista-ok { text-align: left; }
    .wl-app { left: 6px; padding: 10px 12px 8px; } .wl-icone { width: 44px; height: 44px; border-radius: 12px; }
    .wl-corpo { grid-template-columns: 1fr 1fr; } .wl-kpi-1 { grid-column: 1 / -1; }
    .mais { gap: 10px; } .mais li { padding: 16px 14px; } .mais h3 { font-size: 15.5px; } .mais p { font-size: 13.5px; }
    .mais-destaque { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wl-demo * { transition: none; } .mais li { transition: none; } }

@media (max-width: 960px) {
    .sistema-topo { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
    .sistema-topo .sistema-vitrine { padding: 0 4%; }
    .hero .wrap, .dir { grid-template-columns: 1fr; }
    .hero::before { background: linear-gradient(180deg, rgba(11,11,13,.95) 0%, rgba(11,11,13,.88) 55%, rgba(11,11,13,.75) 100%); }
    .vitrine { width: 100%; max-width: 480px; margin: 24px auto -96px; height: 470px; padding: 0; --corte: 135px; }
    .iphone3d { width: 300px; }
    .usos, .seg { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .cmds { grid-template-columns: 1fr 1fr; }
    .publicos { grid-template-columns: 1fr 1fr; }
    .o3-grade { grid-template-columns: 1fr; } .o3-fixo { display: none; }
    .o3-passos::before { display: none; }
    .o3-passo { min-height: 0; padding: 0 0 48px; display: block; }
    .o3-passo .num { position: static; transform: none; margin-bottom: 10px; width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
    .o3-passo h3 { color: var(--texto); } .o3-passo .tag { color: var(--ouro); } .o3-passo p { color: var(--texto-2); }
    .o3-passo .so-celular { display: block; margin-top: 20px; }
    .o3-passo .so-celular .tela { height: auto; }
    .o3-passo .so-celular .viz { --s: .9; }
    .planos { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .blog-lp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-lp-grade > :nth-child(3) { display: none; }
    .pilares ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .passos { grid-template-columns: 1fr; }
    .fluxo { grid-template-columns: 1fr 1fr; gap: 22px; }
    .fluxo::before { display: none; }
}
@media (max-width: 600px) {
    .bu-palco { height: 400px; } .bu-cena { padding: 16px; } .bu-fm-corpo, .bu-cand, .bu-tags { margin-left: 14px; margin-right: 14px; } .bu-toast { white-space: normal; width: 86%; }
    .sistema-divisor { padding: 64px 0 28px; gap: 12px; } .sistema-divisor span { font-size: 11.5px; padding: 8px 12px; white-space: normal; text-align: center; }
    .faq-sec { padding-bottom: 140px !important; } .final-sobe { margin-top: -80px; margin-bottom: 56px; }
    .sistema-folha { border-radius: 32px 32px 0 0; padding-top: 84px !important; padding-bottom: 72px !important; }
    .lp section { padding: 64px 0; }
    .hero { padding: 20px 0 64px; }
    .sub { font-size: 17px; }
    /* No celular as listas longas viram carrossel de arrastar (menos rolagem até os planos) */
    .cmds, .blog-lp-grade, .publicos { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; }
    .cmds::-webkit-scrollbar, .blog-lp-grade::-webkit-scrollbar, .publicos::-webkit-scrollbar { display: none; }
    .cmds > *, .blog-lp-grade > *, .publicos > * { scroll-snap-align: center; }
    .o3-passo .so-celular .viz { --s: .8; }
    .blog-lp-grade > :nth-child(3) { display: flex; }
    .vitrine { height: 430px; margin-bottom: -64px; --corte: 125px; }
    .iphone3d { width: 270px; }
    .chamada { max-width: 172px; padding: 9px 11px; font-size: 12px; gap: 8px; }
    .chamada b { font-size: 12.5px; } .chamada small { font-size: 11.5px; }
    .chamada .ico { width: 28px; height: 28px; }
    .pilares strong { font-size: 17px; }
    .pilares li { padding: 18px 14px 20px; border-radius: 18px; }
    .pilares li > span:not(.ico):not(.pilar-fundo) { font-size: 13px; }
    .pilares .pilar-fundo svg { width: 110px; height: 110px; }
    .duas-fotos { gap: 10px; margin-bottom: 40px; }
    .duas-fotos figcaption { left: 8px; top: 8px; font-size: 12px; }
    .sistema-vitrine { padding: 0 4%; margin-bottom: 36px; }
    .periodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
    .periodos button { justify-content: center; padding: 11px 6px; border-radius: 14px; }
    .final { padding: 48px 22px; border-radius: 22px; }
    .hero .wrap > div:first-child, .sistema-topo > div:first-child, .dir > div:first-child { text-align: center; }
    .sistema-topo .sub, .dir .sub, .hero .lead { margin-left: auto; margin-right: auto; }
    .dir ul.lista-ok { text-align: left; }
    .hero .selo { font-size: 11.5px; padding: 7px 12px; text-align: left; }
    .hero .micro, .hero .ctas { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-lp-card, .chamada, .cena, .o3-cena, .entra { transition: none; }
    .chat-digitando i { animation: none; }
}