/* ---------- apresentação: capa ---------- */
.ap-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 76px; }
.ap-hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; margin: 20px 0 16px; letter-spacing: -.02em; }
.ap-hero .lead { max-width: 520px; }
.ap-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ap-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.ap-trust .ic { width: 18px; height: 18px; color: var(--g3); }

.ap-hero-art { position: relative; justify-self: center; width: min(100%, 500px); }
.ap-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: #e8e2d6; box-shadow: 0 40px 80px -30px rgba(16, 35, 26, .45), 0 0 0 1px rgba(16, 35, 26, .06); }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.in .ap-photo img, .ap-photo.in img { transform: none; }
.ap-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 30, 21, .28)); pointer-events: none; }
.ap-hero-art::before { content: ""; position: absolute; inset: 30px -26px -26px 30px; border-radius: 32px; background: linear-gradient(140deg, var(--o2), var(--g3)); opacity: .22; z-index: -1; }

.ap-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 11px; border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 22px 40px -18px rgba(16, 35, 26, .45), 0 0 0 1px rgba(16, 35, 26, .06); animation: apFloat 7s ease-in-out infinite; }
.ap-chip .fi { width: 36px; height: 36px; border-radius: 11px; }
.ap-chip .fi .ic { width: 18px; height: 18px; }
.ap-chip b { display: block; font-size: 13.5px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-chip small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ap-c1 { top: 34px; left: -48px; }
.ap-c2 { bottom: 84px; right: -40px; animation-delay: -2.4s; }
.ap-c3 { bottom: -22px; left: 28px; animation-delay: -4.6s; padding-left: 16px; }
.ap-c4 { bottom: 34px; right: -32px; animation-delay: -1.2s; }
.ap-chip.pop .fi { animation: iconPop .6s cubic-bezier(.2, 1.4, .4, 1); }
.ap-chip.flash { animation: apFloat 7s ease-in-out infinite, apFlash .6s ease; }
@keyframes apFlash { 40% { box-shadow: 0 0 0 6px rgba(232, 116, 42, .22), 0 22px 40px -18px rgba(16, 35, 26, .45); } }
.ap-live { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--g3); flex: none; }
.ap-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--g3); animation: apRing 1.8s ease-out infinite; }
@keyframes apFloat { 50% { transform: translateY(-8px); } }
@keyframes apRing { from { transform: scale(.6); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- para quem ---------- */
.ap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ap-card { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #1a2b23; box-shadow: var(--shadow); isolation: isolate; }
.ap-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); z-index: -1; }
.ap-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 24, 17, 0) 38%, rgba(8, 24, 17, .55) 62%, rgba(8, 24, 17, .9)); }
.ap-card:hover img { transform: scale(1.05); }
.ap-card-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; }
.ap-card-tx span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ap-card-tx span .ic { width: 14px; height: 14px; }
.ap-card-tx h3 { color: #fff; font-size: 22px; font-weight: 700; margin: 12px 0 6px; }
.ap-card-tx p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.ap-segs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; }
.ap-segs small { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.ap-segs span { padding: 6px 13px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink2); }

/* ---------- jornada ---------- */
.jr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.jr-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jr-tabs button { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); text-align: left; cursor: pointer; font: inherit; color: inherit; overflow: hidden; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; }
.jr-tabs button:hover { border-color: var(--g3); }
.jr-tabs button > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 800 15px Poppins, sans-serif; background: var(--gl); color: var(--g2); transition: background .25s, color .25s; }
.jr-tabs b { display: block; font-size: 15.5px; color: var(--ink); }
.jr-tabs small { color: var(--muted); font-size: 13.5px; }
.jr-tabs button.on { background: #fff; border-color: color-mix(in srgb, var(--g3) 45%, var(--line)); box-shadow: var(--shadow); transform: translateX(6px); }
.jr-tabs button.on > span { background: var(--g); color: #fff; }
.jr-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--o), var(--g3)); transform-origin: 0 50%; transform: scaleX(0); }
.jr-tabs button.on .jr-bar { animation: jrBar var(--jr-dur, 5s) linear forwards; }
.jr.paused .jr-tabs button.on .jr-bar { animation-play-state: paused; }
@keyframes jrBar { to { transform: scaleX(1); } }
.jr-stage { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.jr-stage .halo { width: min(420px, 95%); }
.jr-phone { position: relative; width: 300px; height: 600px; border-radius: 44px; background: linear-gradient(145deg, #1d2c25, #0b1510 60%); padding: 12px; box-shadow: inset 0 0 0 2px #34453c, inset 0 0 0 4px #0b1510, 30px 46px 70px -24px rgba(16, 35, 26, .55); animation: floatY 7s ease-in-out infinite; }
.jr-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #fbf6ef; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(26px) scale(.98); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.scr.out { transform: translateX(-26px) scale(.98); }

/* tela 1: loja */
.scr.on .s-item { animation: apItemIn .5s cubic-bezier(.2, .9, .3, 1.1) both; }
.scr.on .s-item.a2 { animation-delay: .1s; }
.scr.on .s-item.a3 { animation-delay: .2s; }
@keyframes apItemIn { from { opacity: 0; transform: translateY(14px); } }
.scr.on .a1 .s-add { animation: apTap .5s 1.6s both; }
@keyframes apTap { 50% { transform: translateY(3px) scale(.88); box-shadow: 0 0 0 7px rgba(242, 106, 27, .22); } }
.scr[data-s="0"] .s-cart { animation: none; opacity: 0; transform: translateY(16px); }
.scr.on[data-s="0"] .s-cart { animation: apCartIn .45s 2s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes apCartIn { to { opacity: 1; transform: none; } }

/* tela 2: produto */
.sp-hero { height: 150px; background: radial-gradient(circle at 50% 60%, #ffd2a8, #f6a15a 55%, #e9772c); display: grid; place-items: center; color: #fff; }
.sp-hero .ic { width: 64px; height: 64px; filter: drop-shadow(0 8px 14px rgba(120, 50, 0, .35)); }
.scr.on .sp-hero .ic { animation: apPop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes apPop { from { transform: scale(.6) rotate(-10deg); } }
.sp-in { flex: 1; padding: 12px 14px; overflow: hidden; }
.sp-t { display: block; font: 800 17px Poppins, sans-serif; color: #2b1a10; }
.sp-d { display: block; font-size: 11.5px; color: #8b7465; margin-bottom: 8px; }
.sp-g { margin-top: 9px; border-radius: 12px; background: #fff; border: 1px solid #f0e4d6; overflow: hidden; }
.sp-gh { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #f6efe6; }
.sp-gh b { font-size: 12px; color: #2b1a10; }
.sp-gh .req { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #2b1a10; color: #fff; text-transform: uppercase; }
.sp-gh .req.opt { background: #eadfd2; color: #6b4a33; }
.sp-o { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #f6efe6; font-size: 12px; color: #2b1a10; }
.sp-o span { flex: 1; }
.sp-o em { font-style: normal; font-size: 11px; color: #8b7465; font-weight: 600; }
.sp-o i { width: 16px; height: 16px; border: 2px solid #d9c9b8; border-radius: 50%; flex: none; transition: .2s; }
.sp-o i.c { border-radius: 5px; }
.scr.on .sp-o i.k1 { animation: apCheck .3s .8s forwards; }
.scr.on .sp-o i.k2 { animation: apCheck .3s 1.8s forwards; }
@keyframes apCheck { to { border-color: #f26a1b; background: #f26a1b; box-shadow: inset 0 0 0 3px #fff; } }
.scr.on .sp-o i.c.k2 { animation-name: apCheckBox; }
@keyframes apCheckBox { to { border-color: #f26a1b; background: #f26a1b; } }
.sp-foot { display: flex; gap: 8px; align-items: center; padding: 10px 12px 14px; background: #fff; border-top: 1px solid #f0e4d6; font-size: 12px; }
.sp-foot > span { padding: 8px 10px; border-radius: 10px; border: 1px solid #f0e4d6; font-weight: 800; white-space: nowrap; }
.sp-foot b { flex: 1; padding: 10px 12px; border-radius: 10px; background: #f26a1b; color: #fff; text-align: center; }
.sp-foot em { font-style: normal; }
.scr.on .sp-foot b { animation: apBtn .5s 2.6s; }
@keyframes apBtn { 50% { transform: scale(.95); filter: brightness(1.1); } }

/* tela 3: pix */
.px-in { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 50px 22px 20px; text-align: center; }
.px-in > small { color: #8b7465; font-size: 12px; }
.px-v { font: 800 26px Poppins, sans-serif; color: #2b1a10; margin-bottom: 16px; }
.px-qr { width: 170px; height: 170px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #f0e4d6; display: grid; grid-template-columns: repeat(21, 1fr); gap: 1px; box-shadow: 0 10px 24px -14px rgba(90, 40, 10, .4); }
.px-qr i { border-radius: 1px; background: #1c1c1c; }
.px-qr i.w { background: transparent; }
.px-copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 14px; border-radius: 10px; background: #2b1a10; color: #fff; font-size: 12px; font-weight: 700; }
.px-copy .ic { width: 14px; height: 14px; }
.px-wait { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; color: #8b7465; }
.spin-d { width: 14px; height: 14px; border: 2px solid #eadfd2; border-top-color: #f26a1b; border-radius: 50%; animation: spin .8s linear infinite; }
.px-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; background: linear-gradient(160deg, #1f6b4c, #174d38); color: #fff; opacity: 0; transform: scale(1.05); }
.scr.on .px-ok { animation: apOk .5s 2.2s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes apOk { to { opacity: 1; transform: none; } }
.px-check { width: 76px; height: 76px; border-radius: 50%; background: #2ee59d; color: #0b3324; display: grid; place-items: center; margin-bottom: 10px; box-shadow: 0 0 0 10px rgba(46, 229, 157, .18), 0 0 0 22px rgba(46, 229, 157, .08); }
.px-check .ic { width: 38px; height: 38px; stroke-width: 3; }
.scr.on .px-check { animation: apPop .6s 2.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.px-ok b { font: 800 19px Poppins, sans-serif; }
.px-ok small { font-size: 12.5px; opacity: .85; }

/* tela 4: painel */
.scr[data-s="3"] { background: #f4f6f5; padding: 44px 12px 12px; gap: 10px; }
.pn-top { display: flex; justify-content: space-between; align-items: center; }
.pn-top b { font: 800 18px Poppins, sans-serif; }
.pn-open { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--g2); background: var(--gl); padding: 4px 9px; border-radius: 99px; }
.pn-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--g3); }
.pn-new { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 14px; background: #fff; border: 1.5px solid var(--o); box-shadow: 0 12px 26px -14px rgba(232, 116, 42, .7); opacity: 0; transform: translateY(-14px); }
.scr.on .pn-new { animation: apNew .55s .6s cubic-bezier(.2, 1.2, .4, 1) forwards; }
@keyframes apNew { to { opacity: 1; transform: none; } }
.pn-bell { width: 34px; height: 34px; border-radius: 10px; background: var(--ol); color: var(--o); display: grid; place-items: center; flex: none; }
.pn-bell .ic { width: 18px; height: 18px; }
.scr.on .pn-bell .ic { animation: apRing2 .9s 1.1s 2; transform-origin: 50% 10%; }
@keyframes apRing2 { 15%, 45%, 75% { transform: rotate(16deg); } 30%, 60%, 90% { transform: rotate(-16deg); } }
.pn-new b { display: block; font-size: 13px; }
.pn-new small { font-size: 11px; color: var(--muted); }
.pn-col h4 { display: flex; align-items: center; gap: 6px; margin: 4px 2px 6px; font: 700 11.5px Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pn-col h4 i { width: 8px; height: 8px; border-radius: 50%; }
.c1 { background: var(--o); } .c2 { background: #e0a21a; } .c3 { background: #3b6fd8; }
.pn-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 11px; margin-bottom: 7px; border-radius: 12px; background: #fff; border: 1px solid #e3e8e5; font-size: 12px; }
.pn-card b { font-size: 12.5px; }
.pn-card small { flex: 1 1 100%; order: 3; color: var(--muted); font-size: 11px; }
.pn-card em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--g2); }
.pn-card.hot { border-color: var(--o); opacity: 0; transform: scale(.94); }
.scr.on .pn-card.hot { animation: apHot .45s 1.4s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes apHot { to { opacity: 1; transform: none; } }

/* tela 5: acompanhamento */
.scr[data-s="4"] { background: linear-gradient(180deg, #fff3e8, #fbf6ef 45%); }
.tk-push { position: absolute; top: 40px; left: 10px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 30px -14px rgba(16, 35, 26, .45); opacity: 0; transform: translateY(-30px); }
.scr.on .tk-push { animation: apPush 3.6s .9s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes apPush { 0% { opacity: 0; transform: translateY(-30px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
.tk-push .fi { width: 32px; height: 32px; border-radius: 9px; }
.tk-push b { display: block; font-size: 12.5px; }
.tk-push small { font-size: 11.5px; color: var(--muted); }
.tk-in { padding: 120px 20px 20px; }
.tk-in > small { color: #8b7465; font-size: 12px; }
.tk-in > b { display: block; font: 800 22px Poppins, sans-serif; color: #2b1a10; }
.tk-eta { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 18px; padding: 6px 11px; border-radius: 99px; background: #fff; border: 1px solid #f0e4d6; font-size: 12px; font-weight: 600; color: #6b4a33; }
.tk-eta .ic { width: 14px; height: 14px; color: #f26a1b; }
.tk-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.tk-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: #eadfd2; }
.tk-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13.5px; color: #a8968a; }
.tk-steps li .ic { position: relative; z-index: 1; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #fff; border: 2px solid #eadfd2; flex: none; }
.tk-steps li.done { color: #2b1a10; }
.tk-steps li.done .ic { background: var(--g3); border-color: var(--g3); color: #fff; stroke-width: 3; }
.tk-steps li.now { color: #2b1a10; font-weight: 700; }
.tk-steps li.now .ic { border-color: #f26a1b; color: #f26a1b; box-shadow: 0 0 0 0 rgba(242, 106, 27, .4); }
.scr.on .tk-steps li.now .ic { animation: apNow 1.6s ease-out infinite; }
@keyframes apNow { 70% { box-shadow: 0 0 0 10px rgba(242, 106, 27, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 106, 27, 0); } }
.scr.on .tk-steps li { animation: apItemIn .45s both; }
.scr.on .tk-steps li:nth-child(2) { animation-delay: .1s; }
.scr.on .tk-steps li:nth-child(3) { animation-delay: .2s; }
.scr.on .tk-steps li:nth-child(4) { animation-delay: .3s; }

/* ---------- recursos ---------- */
.ap-feat { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 60px; align-items: center; }
.ap-feat-art { position: relative; width: min(100%, 460px); justify-self: center; }
.ap-feat-art::before { content: ""; position: absolute; inset: -26px 30px 30px -26px; border-radius: 32px; background: linear-gradient(140deg, var(--g3), var(--o2)); opacity: .2; z-index: -1; }
.ap-feat-copy h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin: 10px 0 8px; }
.ap-sub { color: var(--muted); font-size: 16px; margin: 0 0 26px; }
.ap-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-f { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; }
.ap-f:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--g3) 35%, var(--line)); }
.ap-f > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--gl); color: var(--g2); flex: none; }
.ap-f:nth-child(even) > .ic { background: var(--ol); color: var(--o); }
.ap-f b { display: block; font: 700 15px Poppins, sans-serif; color: var(--ink); }
.ap-f small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }

/* ---------- segurança ---------- */
.ap-safe { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 44px; border-radius: 28px; background: radial-gradient(600px 260px at 0% 0%, rgba(232, 116, 42, .3), transparent 70%), linear-gradient(140deg, #1f6b4c, #0f2a1f); color: #fff; box-shadow: var(--shadow-lg); }
.ap-safe h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; margin-bottom: 14px; }
.ap-safe-copy p { color: rgba(255, 255, 255, .82); font-size: 16px; margin: 0; }
.ap-safe-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-safe-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s; }
.ap-safe-list li:hover { background: rgba(255, 255, 255, .12); }
.ap-safe-list li > span { width: 38px; height: 38px; border-radius: 12px; background: rgba(46, 229, 157, .16); color: #6ff0bb; display: grid; place-items: center; flex: none; }
.ap-safe-list .ic { width: 19px; height: 19px; }
.ap-safe-list b { display: block; font-size: 15px; color: #fff; }
.ap-safe-list small { color: rgba(255, 255, 255, .72); font-size: 13.5px; }

/* ---------- cta final ---------- */
.ap-final { position: relative; border-radius: 30px; overflow: hidden; isolation: isolate; background: #0f2a1f; box-shadow: var(--shadow-lg); }
.ap-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.ap-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 32, 23, .96) 0%, rgba(10, 32, 23, .86) 48%, rgba(10, 32, 23, .35) 100%); }
.ap-final-in { max-width: 600px; padding: 54px 50px; color: #fff; }
.ap-final h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; margin: 10px 0 24px; }
.ap-steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.ap-steps li { display: flex; align-items: center; gap: 14px; }
.ap-steps li > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--o2), var(--o)); color: #fff; font: 800 15px Poppins, sans-serif; box-shadow: 0 8px 16px -8px rgba(232, 116, 42, .8); }
.ap-steps b { display: block; font-size: 16px; color: #fff; }
.ap-steps small { color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.ap-cta-b { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .ap-hero, .jr, .ap-safe, .ap-feat { grid-template-columns: 1fr; }
  .ap-hero { gap: 48px; }
  .ap-hero-art { width: min(100%, 440px); }
  .jr-stage { order: -1; }
  .ap-feat { gap: 44px; }
  .ap-feat-copy { order: -1; }
}
@media (max-width: 760px) {
  .ap-cards { grid-template-columns: 1fr; gap: 14px; }
  .ap-card { aspect-ratio: 16 / 11; }
  .ap-card-tx { padding: 20px; }
}
@media (max-width: 680px) {
  .ap-hero { padding-top: 26px; padding-bottom: 60px; gap: 40px; }
  .ap-hero-art { width: calc(100% - 28px); }
  .ap-c1 { left: -14px; top: 18px; }
  .ap-c2 { right: -14px; bottom: 70px; }
  .ap-c3 { left: 16px; bottom: -18px; }
  .ap-c4 { right: -12px; }
  .ap-chip { padding: 9px 12px 9px 9px; }
  .ap-chip .fi { width: 32px; height: 32px; }
  .ap-chip b { font-size: 12.5px; }
  .ap-chip small { font-size: 11px; }
  .ap-hero-art::before { inset: 20px -14px -14px 20px; }
  .jr-phone { width: 270px; height: 540px; }
  .jr-tabs button { padding: 12px 14px; }
  .jr-tabs button.on { transform: none; }
  .jr-tabs small { display: none; }
  .ap-feats { grid-template-columns: 1fr; }
  .ap-feat-art { width: calc(100% - 20px); }
  .ap-safe { padding: 28px 20px; }
  .ap-safe-list { grid-template-columns: 1fr; }
  .ap-final::before { background: linear-gradient(180deg, rgba(10, 32, 23, .72) 0%, rgba(10, 32, 23, .94) 55%); }
  .ap-final-in { padding: 34px 22px; }
  .ap-cta-b, .ap-cta-b .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ap *, .ap *::before, .ap *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}