/* ===== Página de venda (mesmo estilo Pop do sistema) ===== */
body.venda{display:block;scroll-behavior:smooth}
.vwrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.vtop{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,40px);background:rgba(255,247,232,.88);backdrop-filter:blur(12px);border-bottom:2.5px solid #14110f}
.vtop .brand{text-decoration:none;color:inherit}
.vnav{display:flex;gap:6px}.vnav a{padding:8px 14px;border-radius:99px;font-weight:700;font-size:14px;text-decoration:none;color:inherit;transition:.15s}
.vnav a:hover{background:#ffe08a}
.vact{display:flex;gap:8px;align-items:center}.vact .btn{text-decoration:none;display:inline-block}
@media(max-width:820px){.vnav{display:none}}
@media(max-width:420px){.vact .btn.ghost{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:clamp(28px,6vw,64px);padding-bottom:clamp(36px,6vw,72px)}
.eyebrow{display:inline-block;padding:7px 14px;border:2.5px solid #14110f;border-radius:99px;background:#d6f5c4;font-weight:800;font-size:13.5px;box-shadow:3px 3px 0 #14110f}
.hero h1{font-size:clamp(36px,5.4vw,64px);margin:22px 0 16px;line-height:1.02}
.hero h1::after{display:none}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:560px;opacity:.88}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 18px}
.big-cta{display:inline-block;text-decoration:none;text-align:center;padding:16px 26px;font-size:17px;border-radius:16px}
.btn.big-cta{width:auto;margin:0}
.mini-pontos{list-style:none;padding:0;display:flex;gap:10px 22px;flex-wrap:wrap;font-size:14.5px;font-weight:600}

/* prévia do app */
.hero-mock{position:relative;min-height:380px}
.mock{border:3px solid #14110f;border-radius:20px;background:#fff;box-shadow:10px 10px 0 #14110f;overflow:hidden;transform:rotate(1.5deg);animation:flut 7s ease-in-out infinite}
@keyframes flut{50%{transform:rotate(1.5deg) translateY(-10px)}}
.mock-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:3px solid #14110f;background:#ffe08a;font-weight:800;font-size:12.5px}
.mock-bar i{width:11px;height:11px;border-radius:50%;border:2px solid #14110f;background:#fff}.mock-bar i:nth-child(1){background:#ff6a1f}.mock-bar i:nth-child(2){background:#ffb703}.mock-bar i:nth-child(3){background:#8ac926}
.mock-bar span{margin-left:8px}
.mock-body{padding:16px;background:#fff7e8}
.m-kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.m-kpi{border:2.5px solid #14110f;border-radius:14px;padding:12px;font-size:12px;display:flex;align-items:center;gap:10px}
.m-kpi small{display:block;color:#6f655a;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}.m-kpi b{font-family:var(--hfont);font-size:clamp(15px,1.8vw,19px);white-space:nowrap}
.m-kpi.y{background:#ffe08a}.m-kpi.g{background:#d6f5c4;flex-direction:column;align-items:flex-start;gap:3px}.m-kpi.r{background:#ffd9c7;flex-direction:column;align-items:flex-start;gap:3px}
.m-ring{width:48px;height:48px;transform:rotate(-90deg);flex:none}.m-ring circle{fill:none;stroke-width:15;stroke-linecap:round}.m-ring .t{stroke:#14110f20}.m-ring .b{stroke:#2f9e44;stroke-dasharray:339;stroke-dashoffset:339;animation:ringin 1.6s .4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ringin{to{stroke-dashoffset:152}}
.m-bars{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.m-row{display:grid;grid-template-columns:118px 1fr 78px 82px;gap:8px;align-items:center;font-size:12px}
.m-row span{font-weight:800;line-height:1.1}.m-row span small{display:block;color:#6f655a;font-weight:500;font-size:10px}
.m-row i{display:block;height:12px;border:2px solid #14110f;border-radius:99px;background:#fff;position:relative;overflow:hidden}
.m-row i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#8a05be,#4b0a8c);animation:barin 1.2s .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes barin{to{width:var(--w)}}
.m-row b{text-align:right;font-size:11.5px}
.m-row em{font-style:normal;font-weight:800;font-size:10px;padding:5px 6px;border:2px solid #14110f;border-radius:8px;background:#fff;text-align:center;white-space:nowrap}.m-row em.ok{background:#b8f2c0}
.m-card{position:absolute;padding:14px 16px;border:3px solid #14110f;border-radius:14px;color:#fff;box-shadow:5px 5px 0 #14110f;font-size:12px;line-height:1.3;animation:flut2 6s ease-in-out infinite}
.m-card b{font-size:17px;display:block}.m-card small{opacity:.9;font-size:11px}
.m-card.c1{left:-22px;bottom:-28px;background:linear-gradient(135deg,#8a05be,#4b0a8c);transform:rotate(-6deg)}
.m-card.c2{right:-14px;top:-26px;background:linear-gradient(135deg,#3b8cff,#1b4fa8);transform:rotate(5deg);animation-delay:-3s}
@keyframes flut2{50%{translate:0 -8px}}
.m-pop{position:absolute;right:18px;bottom:-22px;padding:9px 14px;border:3px solid #14110f;border-radius:99px;background:#8ac926;font-weight:800;font-size:13px;box-shadow:4px 4px 0 #14110f;animation:flut2 5s ease-in-out infinite;animation-delay:-1.5s}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:56px}.hero-mock{max-width:560px;margin:0 auto;width:100%}}
@media(max-width:520px){.m-kpis{grid-template-columns:1fr 1fr}.m-kpi.y{grid-column:1 / -1}.m-row{grid-template-columns:92px 1fr 66px;}.m-row em{display:none}.m-card{display:none}}

/* seções */
.vsec{padding-top:clamp(40px,7vw,84px);padding-bottom:8px}
.vsec h2{font-family:var(--hfont);font-size:clamp(28px,4vw,46px);line-height:1.08;text-align:center;letter-spacing:-.02em}
.vsec .sub{text-align:center;margin:10px auto 36px;color:var(--muted);font-size:17px;max-width:560px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;background:#fff;border:3px solid #14110f;border-radius:20px;padding:26px 24px;box-shadow:6px 6px 0 #14110f}
.step .n{position:absolute;top:-18px;left:20px;width:40px;height:40px;border-radius:50%;background:#ff6a1f;border:3px solid #14110f;display:grid;place-items:center;font-family:var(--hfont);font-weight:800;font-size:19px}
.step h3{margin:6px 0 8px;font-size:19px}.step p{color:#4a4238;line-height:1.55}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border:3px solid #14110f;border-radius:18px;padding:22px;box-shadow:5px 5px 0 #14110f;transition:.2s}
.feat:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #14110f}
.feat:nth-child(3n+1){background:#fff3d6}.feat:nth-child(3n+2){background:#e4f8d8}.feat:nth-child(3n){background:#ffe4d6}
.feat .ico{display:grid;place-items:center;width:50px;height:50px;border:2.5px solid #14110f;border-radius:14px;background:#fff;font-size:24px;margin-bottom:12px}
.feat h3{margin:0 0 6px;font-size:18px}.feat p{color:#4a4238;line-height:1.55;font-size:15px}
@media(max-width:900px){.steps,.feats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps,.feats{grid-template-columns:1fr}}

/* preço */
.preco-card{max-width:480px;margin:0 auto;background:#fff;border:3px solid #14110f;border-radius:26px;padding:34px 30px;box-shadow:10px 10px 0 #14110f;text-align:center;position:relative}
.preco-card .selo{display:inline-block;padding:7px 14px;border:2.5px solid #14110f;border-radius:99px;background:#ffb703;font-weight:800;font-size:13px;letter-spacing:.04em;box-shadow:3px 3px 0 #14110f}
.preco-card .valor{display:flex;align-items:flex-start;justify-content:center;gap:4px;margin:18px 0 0;font-family:var(--hfont);font-weight:800;line-height:1}
.preco-card .valor small{font-size:26px;margin-top:12px}.preco-card .valor b{font-size:clamp(72px,14vw,104px);letter-spacing:-.04em}.preco-card .valor sup{font-size:34px;margin-top:10px}
.preco-card .unico{font-weight:800;margin:4px 0 20px;color:#2f9e44;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.preco-card ul{list-style:none;padding:0;margin:0 0 26px;text-align:left;display:flex;flex-direction:column;gap:10px;font-weight:600}
.preco-card ul li{padding:10px 14px;background:#fff7e8;border:2px solid #14110f;border-radius:12px}
.preco-card .btn{display:block;width:100%}
.preco-card .mini{margin-top:14px}

/* faq e final */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:3px solid #14110f;border-radius:16px;box-shadow:4px 4px 0 #14110f;padding:0}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:24px;font-weight:800;line-height:1;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open]{background:#fff7e8}.faq details p{padding:0 20px 18px;color:#4a4238;line-height:1.6}
.final{text-align:center;padding-bottom:56px}
.final p{margin:10px 0 24px;font-size:18px;color:#4a4238}
.vfoot{border-top:3px solid #14110f;background:#fff;padding:20px clamp(16px,4vw,40px);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:600;font-size:14px;position:relative;z-index:1}
.vfoot a{color:inherit}

/* animação de entrada ao rolar */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.mock,.m-card,.m-pop{animation:none}}

/* topo: botão de acesso ao sistema */
.btn.acesso{background:#14110f;color:#fff;border-color:#14110f;box-shadow:3px 3px 0 #ff6a1f;white-space:nowrap}
.btn.acesso:hover{background:#2b2622}
@media(max-width:520px){.hide-xs{display:none!important}.vact .btn.acesso{padding:9px 12px;font-size:12.5px}}
.ja-tem{margin-top:14px;font-size:14.5px;font-weight:600}.ja-tem a{color:#14110f;font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px}
.final .ja-tem{margin-top:18px}

/* conteúdo acima das formas decorativas do fundo */
body.venda main{position:relative;z-index:1}
.bg i{opacity:.55}

/* ===== novidades da página ===== */
/* hero: sobra e aviso */
.m-sobra{margin-top:12px;padding:9px 12px;border:2.5px solid #14110f;border-radius:12px;background:#fff;font-size:12.5px;font-weight:700}
.m-sobra b{font-family:var(--hfont);font-size:14px}
.m-notif{position:absolute;left:-14px;top:-44px;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border:3px solid #14110f;border-radius:16px;background:#fff;box-shadow:5px 5px 0 #14110f;font-size:12px;line-height:1.25;z-index:3;animation:flut2 5.5s ease-in-out infinite;animation-delay:-2s}
.m-notif>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#ffb703;border:2px solid #14110f;font-size:16px}
.m-notif b{display:block;font-size:12.5px}.m-notif small{color:#6f655a;font-size:11px}
@media(max-width:520px){.m-notif{left:6px;top:-22px}}

/* faixa de diferenciais */
.strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:6px;padding-bottom:6px}
.strip span{padding:9px 16px;border:2.5px solid #14110f;border-radius:99px;background:#fff;font-weight:800;font-size:14px;box-shadow:3px 3px 0 #14110f}
.strip span:nth-child(odd){background:#fff3d6}.strip span:nth-child(even){background:#e4f8d8}

/* 4 passos */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.steps.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps.four{grid-template-columns:1fr}}

/* telas por dentro */
.peeks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.peek{background:#fff;border:3px solid #14110f;border-radius:20px;box-shadow:6px 6px 0 #14110f;padding:18px;display:flex;flex-direction:column;gap:10px}
.peek:nth-child(1){background:#fff3d6}.peek:nth-child(2){background:#e4f8d8}.peek:nth-child(3){background:#ffe4d6}
.pk-head{font-weight:800;font-size:15px}
.pk-big{padding:12px 14px;border:2.5px solid #14110f;border-radius:14px;background:#fff}
.pk-big small{display:block;color:#6f655a;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.pk-big b{font-family:var(--hfont);font-size:30px;letter-spacing:-.02em}
.pk-line{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;border:2px solid #14110f;border-radius:12px;background:#fff;font-size:13.5px}
.pk-line.ok{background:#b8f2c0;font-weight:800}
.pk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid #14110f;border-radius:12px;background:#fff}
.pk-list li>span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:2px solid #14110f;background:#fff0c9;font-size:17px}
.pk-list li>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pk-list b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pk-list small{color:#6f655a;font-size:11.5px}
.pk-list em{font-style:normal;font-weight:800;font-size:12.5px;white-space:nowrap}
.pk-list em.paid{padding:5px 9px;border:2px solid #14110f;border-radius:9px;background:#b8f2c0;font-size:11.5px}
.pk-list em.todo{padding:5px 9px;border:2px solid #14110f;border-radius:9px;background:#fff;font-size:11.5px;box-shadow:2px 2px 0 #14110f}
.pk-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk-toggle span{padding:8px 6px;border:2px solid #14110f;border-radius:10px;background:#fff;font-weight:800;font-size:12px;text-align:center}
.pk-toggle span.on{background:#ffd23f;box-shadow:2px 2px 0 #14110f}
.peek p{margin-top:auto;color:#4a4238;font-size:14px;line-height:1.5}
@media(max-width:1000px){.peeks{grid-template-columns:1fr 1fr}.peek:nth-child(3){grid-column:1 / -1}}
@media(max-width:640px){.peeks{grid-template-columns:1fr}}

/* salário ou diária */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.duo-card{background:#fff3d6;border:3px solid #14110f;border-radius:20px;box-shadow:6px 6px 0 #14110f;padding:26px 24px}
.duo-card.alt{background:#e4f8d8}
.duo-card .ico{display:grid;place-items:center;width:52px;height:52px;border:2.5px solid #14110f;border-radius:14px;background:#fff;font-size:26px;margin-bottom:12px}
.duo-card h3{margin:0 0 8px;font-size:20px}.duo-card p{color:#4a4238;line-height:1.6}
@media(max-width:700px){.duo{grid-template-columns:1fr}}

/* celular */
.cel{display:grid;grid-template-columns:320px 1fr;gap:clamp(28px,5vw,64px);align-items:center;max-width:980px;margin:0 auto}
.phone{position:relative;width:290px;margin:0 auto;border:4px solid #14110f;border-radius:42px;background:#14110f;box-shadow:10px 10px 0 #ff6a1f;padding:10px}
.ph-notch{position:absolute;left:50%;top:12px;width:96px;height:22px;transform:translateX(-50%);background:#14110f;border-radius:99px;z-index:2}
.ph-screen{border-radius:32px;min-height:470px;background:linear-gradient(160deg,#ffb703,#ff6a1f 55%,#c2410c);padding:46px 14px 16px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.ph-time{font-family:var(--hfont);font-weight:800;font-size:54px;color:#fff;text-align:center;letter-spacing:-.03em;text-shadow:3px 3px 0 #14110f;margin-bottom:8px}
.ph-notif{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:18px;background:rgba(255,255,255,.96);font-size:12px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.25);position:relative}
.ph-notif .n-ico{flex:none;width:30px;height:30px;border-radius:9px;background:#ff6a1f;border:2px solid #14110f;display:grid;place-items:center;font-weight:800;color:#14110f}
.ph-notif b{display:block;font-size:12.5px;margin-bottom:2px}.ph-notif small{color:#4a4238;font-size:11.5px}
.ph-notif em{position:absolute;right:12px;top:10px;font-style:normal;font-size:10px;color:#8a7f74}
.ph-notif.soft{opacity:.92;transform:scale(.97)}
.ph-home{margin-top:auto;display:flex;justify-content:space-around;padding:10px;border-radius:22px;background:rgba(20,17,15,.78)}
.ph-home span{font-size:22px}
.cel-list{display:flex;flex-direction:column;gap:18px}
.cel-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:3px solid #14110f;border-radius:18px;box-shadow:5px 5px 0 #14110f;padding:18px 20px}
.cel-item:nth-child(odd){background:#fff3d6}.cel-item:nth-child(even){background:#e4f8d8}
.cel-item .ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border:2.5px solid #14110f;border-radius:14px;background:#fff;font-size:24px}
.cel-item h3{margin:0 0 4px;font-size:18px}.cel-item p{color:#4a4238;line-height:1.55;font-size:15px}
@media(max-width:860px){.cel{grid-template-columns:1fr}}

/* recursos: faixa extra */
.ext{text-align:center;margin:26px auto 0;max-width:820px;padding:14px 18px;border:2.5px dashed #14110f;border-radius:16px;background:#fff7e8;font-weight:600;line-height:1.7}