.v-win{position:absolute;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 50px 100px -40px rgba(10,42,87,.4)}
.v-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid #EDF1F7}
.v-bar i{width:10px;height:10px;border-radius:50%;background:#E3E8F0}
.v-bar i:nth-child(1){background:#FF8A7A}.v-bar i:nth-child(2){background:#FFC24D}.v-bar i:nth-child(3){background:#3FD8A0}
.v-bar span{margin-left:10px;padding:4px 12px;border-radius:8px;background:#F3F6FB;font-size:12px;color:#5A6A80}
.bl{font-style:normal;filter:blur(5px);user-select:none}
.stack .ph img.scr{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.stack .ph.nav img.scr{animation:navph var(--dur,20s) cubic-bezier(.55,0,.25,1) var(--del,0s) infinite}
@keyframes navph{0%,8%{object-position:50% 0%}16%,24%{object-position:50% 18%}32%,40%{object-position:50% 38%}48%,56%{object-position:50% 60%}66%,76%{object-position:50% 85%}88%{object-position:50% 85%}96%,100%{object-position:50% 0%}}
/* CapFlow */
.cf-vp{position:relative;height:calc(100% - 38px);overflow:hidden}
.cf{position:absolute;left:0;top:0;width:1000px;height:var(--ch,620px);transform:scale(var(--k,.6));transform-origin:0 0;display:grid;grid-template-columns:220px 1fr;font-family:Figtree,system-ui,sans-serif;color:#0B1626}
.cf-side{background:#0B1530;color:#C9D3EA;padding:18px 12px;display:flex;flex-direction:column;gap:3px;font-size:14px}
.cf-logo{display:flex;align-items:center;gap:8px;padding:0 6px}.cf-logo svg{width:32px}.cf-logo b{color:#fff;font-size:22px;letter-spacing:.02em;font-weight:700}
.cf-tag{font-size:9px;letter-spacing:.14em;color:#7E8CB0;padding:2px 6px 8px}
.cf-h{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7E8CB0;padding:12px 8px 4px}
.cf-side a{padding:9px 10px;border-radius:9px;transition:background .3s,color .3s}
.cf-side a.on{background:#1A3CF0;color:#fff;font-weight:600}
.cf-side a.press{background:#22357A}
.cf-btn{margin-top:auto;padding:11px;border-radius:10px;background:#1A3CF0;color:#fff;text-align:center;font-weight:600}
.cf-main{position:relative;background:#F7F9FD;overflow:hidden;display:flex;flex-direction:column}
.cf-top{flex:none;height:44px;background:#0B1530;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 16px;font-size:13px;color:#C9D3EA}
.cf-top i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#E2406F;color:#fff;font-size:11px;display:grid;place-items:center}
.cf-sel{border:1px solid #3A55C8;border-radius:7px;padding:4px 12px}
.cf-view{position:absolute;inset:44px 0 0 0;overflow:hidden;opacity:0;transition:opacity .45s}
.cf-view.on{opacity:1}
.cf-sc{padding:26px 34px 40px;display:grid;gap:18px;transition:transform 3.4s cubic-bezier(.45,.05,.3,1)}
.cf-sc.jump{transition:none}
.cf-eb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1A3CF0}
.cf-sc h4{margin:-12px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.cf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cf-k3{grid-template-columns:repeat(3,1fr)}
.cf-k{background:#fff;border-radius:12px;padding:16px;border:1px solid #E4E9F3;border-top:3px solid var(--c);display:grid;gap:6px}
.cf-k small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5A6A80}.cf-k b{font-size:22px}.cf-k span{font-size:11px;color:#5A6A80}
.bl{font-style:normal;filter:blur(5px);user-select:none}
.cf-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-card{background:#fff;border-radius:12px;border:1px solid #E4E9F3;padding:16px 18px;display:grid;gap:12px;align-content:start}
.cf-card>b{font-size:14px;font-weight:600}
.cf-line{width:100%;height:150px}
.cf-donut{display:flex;align-items:center;gap:24px;height:150px}
.cf-donut i{width:130px;height:130px;border-radius:50%;background:conic-gradient(#C5D0FF 0 3%,#7E98FF 3% 11%,#1A3CF0 11% 47%,#0B1530 47%);-webkit-mask:radial-gradient(circle,transparent 38px,#000 39px);mask:radial-gradient(circle,transparent 38px,#000 39px)}
.cf-donut ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12px}.cf-donut li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:7px}
.cf-bars{display:flex;align-items:flex-end;gap:12px;height:130px;border-bottom:1px solid #E4E9F3}.cf-bars i{flex:1;height:var(--h);background:var(--c);border-radius:5px 5px 0 0}
.cf table{width:100%;border-collapse:collapse;font-size:13px}
.cf th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5A6A80;font-weight:600;padding:0 8px 10px}
.cf td{padding:10px 8px;border-top:1px solid #EEF1F7}
.cf-av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font-size:10px;font-weight:700;margin-right:10px;vertical-align:middle}
.cf td em{font-style:normal;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px}
.cf .ok{background:#DDF7EC;color:#138A5E}.cf .wa{background:#FFF3D6;color:#A86E00}.cf .bad{background:#FFE7E3;color:#C2382B}
.cf-tools{display:flex;justify-content:space-between;gap:12px}
.cf-search{flex:1;max-width:340px;padding:10px 14px;border-radius:9px;background:#fff;border:1px solid #E4E9F3;font-size:13px;color:#8A97AB}
.cf-new{padding:10px 16px;border-radius:9px;background:#1A3CF0;color:#fff;font-size:13px;font-weight:600}
.cf-ptr{position:absolute;z-index:5;left:var(--px,700px);top:var(--py,380px);width:26px;height:26px;transition:left 1s cubic-bezier(.5,0,.2,1),top 1s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.cf-ptr svg{width:100%;height:100%;transition:transform .15s}
.cf-ptr.click svg{transform:scale(.8)}
.cf-ptr::after{content:"";position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;border:2px solid #7FC0FF;opacity:0;transform:scale(.3)}
.cf-ptr.click::after{animation:ripple .5s ease-out}
@keyframes ripple{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}

/* demo apple: CapFlow dentro de laptop / tarjeta */
.cfscreen .v-win,.cfbox .v-win{position:absolute;inset:0;border-radius:0;box-shadow:none}
.cfbox{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.6)}
.cfscreen{background:#fff}
.cfscreen,.cfbox{text-align:left;letter-spacing:0}