/* ==========================================================
   COMPOINT · Sección «Sistemas»  (v3: logos propios + red 3D animada de fondo)
   Todo va dentro de .cps con prefijo cps- para no chocar con Bootstrap 5
   ========================================================== */
.cps{
  --cp-navy:#061427; --cp-navy2:#0b2242; --cp-ink:#e9f1fb; --cp-muted:#94aac4; --cp-line:rgba(148,178,214,.18);
  --cp-blue:#3b9bff; --cp-blue2:#86c5ff; --cp-green:#2fd27a; --cp-orange:#ff7a45;
  --cp-dev:#1a2c44; --cp-dev2:#0d1828; --cp-screen:#f6f9fc; --cp-sink:#0f1c2b; --cp-smuted:#5c6e82; --cp-paper:#fbfaf4;
  --cp-display:"Sora",system-ui,sans-serif; --cp-body:"IBM Plex Sans",system-ui,sans-serif; --cp-mono:"IBM Plex Mono",ui-monospace,monospace;
  position:relative; overflow:hidden; padding-block:72px 80px; scroll-margin-top:90px;
  color:var(--cp-ink); font:400 15px/1.6 var(--cp-body); color-scheme:dark;
  background:radial-gradient(900px 520px at 78% 8%,#143a68 0%,transparent 62%),linear-gradient(180deg,var(--cp-navy2),var(--cp-navy) 70%);
}
.cps *,.cps *::before,.cps *::after{box-sizing:border-box}
.cps p{margin:0}
.cps a{text-decoration:none}
.cps h2,.cps h3{font-family:var(--cp-display);color:var(--cp-ink);text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-.02em}
.cps>.cp-wrap{position:relative;z-index:1}
.cps-net{position:absolute;right:-8%;top:-20px;width:72%;height:620px;opacity:.55;pointer-events:none}

/* encabezado */
.cps-intro{max-width:700px}
.cps-eyebrow{font:600 12px var(--cp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cp-blue2)}
.cps-intro h2{font-weight:800;font-size:clamp(30px,4.6vw,54px);margin-top:12px}
.cps-intro h2 span{color:var(--cp-blue2)}
.cps-lead{color:var(--cp-muted);font-size:17px;max-width:58ch;margin-top:16px!important}

/* pestañas */
.cps-tabs{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;max-width:780px;margin:34px 0 26px}
.cps-tab{--c:var(--cp-blue);text-align:left;cursor:pointer;color:var(--cp-ink);background:rgba(255,255,255,.03);border:1px solid var(--cp-line);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:2px;font:inherit;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.cps-tab--rest{--c:var(--cp-orange)}
.cps-tab:hover{transform:translateY(-2px)}
.cps-tab-k{font:600 11px var(--cp-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cp-muted)}
.cps-tab-n{font:700 20px var(--cp-display);display:flex;align-items:center;gap:10px}
.cps-tab-n::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.cps-tab--main .cps-tab-n{font-size:23px}
.cps-tab[aria-selected="true"]{border-color:var(--c);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,transparent),rgba(255,255,255,.02));box-shadow:0 18px 40px -22px var(--c)}
.cps-tab:focus-visible,.cps-btn:focus-visible{outline:2px solid var(--cp-blue2);outline-offset:3px}

/* panel */
.cps-panel{--c:var(--cp-blue);--cdark:#061423;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:38px;border:1px solid var(--cp-line);border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));overflow:hidden;box-shadow:0 40px 80px -50px #000}
.cps-panel--rest{--c:var(--cp-orange)}
.cps-panel.cps-enter{animation:cpsPanelIn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes cpsPanelIn{from{opacity:0;transform:perspective(1400px) rotateY(-7deg) translateY(16px)}to{opacity:1;transform:none}}
.cps-wm{position:absolute;right:26px;bottom:18px;width:230px;max-width:50%;height:auto;opacity:.08;filter:blur(1px);pointer-events:none;z-index:0}
.cps-copy{display:flex;flex-direction:column;gap:18px;position:relative;z-index:1;min-width:0}
.cps-kicker{font:600 12px var(--cp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.cps-copy h3{font-weight:800;font-size:clamp(28px,3.3vw,42px)}
.cps-copy h3 span{color:var(--c)}
.cps-desc{color:var(--cp-muted);max-width:52ch}
.cps-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cps-feat{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:12px;border:1px solid var(--cp-line);border-radius:13px;background:rgba(255,255,255,.03);transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out,border-color .25s,background .25s}
.cps-feat:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent)}
.cps-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 17%,transparent)}
.cps-feat b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.cps-feat div>span{display:block;font-size:12.5px;color:var(--cp-muted);line-height:1.4;margin-top:2px}
.cps-terms{display:flex;flex-wrap:wrap;gap:8px}
.cps-terms span{font:500 11.5px var(--cp-mono);padding:4px 10px;border:1px dashed var(--cp-line);border-radius:999px}
.cps-ctas{display:flex;flex-wrap:wrap;gap:10px}
.cps-btn{display:inline-block;font:600 14.5px var(--cp-body);padding:12px 20px;border-radius:12px;transition:transform .2s,box-shadow .2s,background .2s}
.cps-btn--pri{background:var(--c);color:var(--cdark)!important;box-shadow:0 12px 28px -12px var(--c)}
.cps-btn--pri:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px var(--c)}
.cps-btn--ghost{border:1px solid var(--cp-line);color:var(--cp-ink)!important}
.cps-btn--ghost:hover{background:rgba(255,255,255,.06)}
.cps-contact{font:500 12.5px var(--cp-mono);color:var(--cp-muted)}
.cps-contact a{color:var(--cp-muted)}

/* escena 3D */
.cps-viz{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1;min-width:0}
.cps-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:1/.86;perspective:1500px;perspective-origin:50% 28%}
.cps-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(15deg + var(--ty,0deg))) rotateY(calc(-17deg + var(--tx,0deg))) rotateZ(1.5deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cps-scene>*{position:absolute}
.cps-floor{left:4%;right:4%;bottom:0;height:24%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);transform:translateZ(-50px);filter:blur(8px)}
.cps-dev{transform:translateZ(var(--z,0px));border-radius:2.3cqw;padding:1.3cqw;background:linear-gradient(145deg,var(--cp-dev),var(--cp-dev2));border:1px solid rgba(255,255,255,.09);
  box-shadow:1px 1px 0 #26395360,2px 2px 0 #1f3049,3px 3px 0 #1a293f,4px 4px 0 #152335,5px 5px 0 #111d2c,6px 6px 0 #0d1723,0 4cqw 6cqw -1cqw rgba(0,0,0,.65)}
.cps-scr{position:relative;height:100%;background:var(--cp-screen);color:var(--cp-sink);border-radius:1.3cqw;padding:2cqw;display:flex;flex-direction:column;gap:1.1cqw;overflow:hidden;font-size:clamp(8px,1.9cqw,13px);line-height:1.35}
.cps-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.55) 0%,transparent 35%);pointer-events:none}
.cps-scr-h{display:flex;justify-content:space-between;gap:6px;font:600 clamp(7px,1.5cqw,11px) var(--cp-mono);letter-spacing:.06em;color:var(--cp-smuted);white-space:nowrap}
.cps-live{color:#16a35a}
.cps-live::before{content:"";display:inline-block;width:.9cqw;height:.9cqw;min-width:5px;min-height:5px;border-radius:50%;background:#16a35a;margin-right:.6cqw;vertical-align:middle;animation:cpsPulse 1.4s infinite}
@keyframes cpsPulse{50%{opacity:.25}}
.cps-chip{--z:120px;transform:translateZ(var(--z));animation:cpsBob 5.5s ease-in-out infinite;font:600 clamp(8px,1.75cqw,12px) var(--cp-mono);white-space:nowrap;color:var(--cp-ink);padding:.9cqw 1.7cqw;border-radius:999px;background:rgba(9,28,52,.88);border:1px solid rgba(134,197,255,.3);box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.6)}
.cps-chip::before{content:"";display:inline-block;width:.9cqw;height:.9cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--cp-green);margin-right:.8cqw;vertical-align:middle;box-shadow:0 0 8px var(--cp-green)}
@keyframes cpsBob{0%,100%{transform:translateZ(var(--z)) translateY(0)}50%{transform:translateZ(var(--z)) translateY(-1.6cqw)}}

/* Compoint Punto */
.cps-tablet{--z:30px;left:1%;top:7%;width:51%;height:52%}
.cps-prod{font:600 clamp(9px,2.6cqw,17px) var(--cp-display)}
.cps-wrow{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.cps-weight{font:600 clamp(20px,7.6cqw,48px)/1 var(--cp-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cps-weight small{font-size:.38em;color:var(--cp-smuted);margin-left:.3em}
.cps-stable{font:600 clamp(6px,1.3cqw,10px) var(--cp-mono);letter-spacing:.08em;padding:.3cqw .8cqw;border-radius:.6cqw;background:#e4ebf2;color:var(--cp-smuted);transition:.3s}
.cps-stable.is-on{background:#d7f5e4;color:#118a4a}
.cps-prow{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--cp-smuted)}
.cps-prow b{color:var(--cp-sink);font:700 clamp(9px,2.5cqw,16px) var(--cp-display)}
.cps-printbtn{margin-top:auto;text-align:center;border-radius:.9cqw;padding:1.1cqw;font:600 clamp(8px,1.8cqw,12px) var(--cp-body);background:var(--cp-sink);color:#fff;transition:background .3s,box-shadow .3s}
.cps-printbtn.is-active{background:var(--cp-blue);box-shadow:0 0 0 .6cqw rgba(59,155,255,.25)}
.cps-printer{--z:30px;left:9%;top:61%;width:32%;height:11%;border-radius:1.6cqw}
.cps-printer::before{content:"58 mm";position:absolute;left:8%;top:22%;font:600 clamp(6px,1.2cqw,9px) var(--cp-mono);color:#7d93ad;letter-spacing:.08em}
.cps-printer::after{content:"";position:absolute;left:12%;right:12%;bottom:12%;height:.7cqw;min-height:3px;border-radius:2px;background:#050b14}
.cps-paper{left:12.5%;top:71.3%;width:25%;height:28%;overflow:hidden;transform:translateZ(31px)}
.cps-ticket{position:absolute;inset:0 0 auto 0;background:var(--cp-paper);color:#20262e;font:500 clamp(6.5px,1.5cqw,10.5px)/1.45 var(--cp-mono);padding:1.4cqw 1.7cqw 2cqw;box-shadow:0 1cqw 2cqw rgba(0,0,0,.35);transform:translateY(-104%);transition:transform 1.3s cubic-bezier(.4,.1,.3,1)}
.cps-ticket.is-out{transform:translateY(0)}
.cps-ticket b{display:block;font-size:1.25em}
.cps-barcode{height:3.4cqw;margin-top:.8cqw;background:repeating-linear-gradient(90deg,#20262e 0 2px,transparent 2px 3px,#20262e 3px 4px,transparent 4px 7px,#20262e 7px 10px,transparent 10px 11px)}
.cps-link{left:0;top:0;width:100%;height:100%;transform:translateZ(45px);pointer-events:none;overflow:visible}
.cps-link path{fill:none;stroke:var(--cp-blue2);stroke-width:2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;opacity:.3}
.cps-link.is-flow path{opacity:1;animation:cpsDash .5s linear infinite}
@keyframes cpsDash{to{stroke-dashoffset:-20}}
.cps-caja{--z:70px;right:1%;top:17%;width:43%;height:57%}
.cps-scanline{position:absolute;left:4%;right:4%;top:24%;height:2px;background:#ff3b3b;box-shadow:0 0 10px 2px rgba(255,59,59,.55);opacity:0;z-index:2}
.cps-caja.is-scanning .cps-scanline{opacity:1;animation:cpsScan .8s ease-in-out 2 alternate}
@keyframes cpsScan{from{top:24%}to{top:60%}}
.cps-cline{display:flex;justify-content:space-between;gap:6px;padding:1cqw 0;border-bottom:1px solid #e3e9f0;opacity:0;transform:translateX(-1.5cqw);transition:.45s}
.cps-cline.is-on{opacity:1;transform:none}
.cps-cline span{color:var(--cp-smuted)}
.cps-sum{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.cps-sum b{font:800 clamp(12px,3.6cqw,24px) var(--cp-display)}
.cps-pay{display:flex;justify-content:space-between;color:var(--cp-smuted);font-size:.9em;font-variant-numeric:tabular-nums}
.cps-paid{margin-top:auto;text-align:center;border-radius:1cqw;padding:1.2cqw;font:800 clamp(9px,2.3cqw,15px) var(--cp-display);letter-spacing:.14em;background:var(--cp-green);color:#03240f;opacity:0;transform:scale(.7)}
.cps-paid.is-on{opacity:1;transform:scale(1);transition:.5s cubic-bezier(.3,1.6,.5,1)}
.cps-drawer{--z:62px;right:-1%;top:76%;width:47%;height:9%;border-radius:1.2cqw}
.cps-drawer::after{content:"";position:absolute;left:38%;right:38%;top:42%;height:.8cqw;min-height:3px;border-radius:2px;background:#33475f}
.cps-p-c1{right:-2%;top:2%}
.cps-p-c2{left:-1%;top:-1%;--z:140px;animation-delay:-2s}
.cps-p-c3{right:6%;bottom:3%;--z:110px;animation-delay:-3.5s}

.cps-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cps-steps li{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--cp-line);border-radius:12px;font-size:13px;color:var(--cp-muted);line-height:1.25;transition:.35s}
.cps-steps b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--cp-mono);border:1px solid var(--cp-line);transition:.35s}
.cps-steps li.is-on{color:var(--cp-ink);border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.cps-steps li.is-on b{background:var(--c);color:var(--cdark);border-color:var(--c)}

/* Restaurant Monitor */
.cps-dash{--z:10px;left:0;top:5%;width:72%;height:64%}
.cps-base{--z:10px;left:-3%;top:69.5%;width:78%;height:5%;border-radius:.6cqw .6cqw 2cqw 2cqw;padding:0}
.cps-base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:35%;border-radius:0 0 1cqw 1cqw;background:#0a1320}
.cps-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.cps-kpi{background:#eef3f8;border-radius:1cqw;padding:1cqw 1.2cqw}
.cps-kpi small{display:block;font-size:.82em;color:var(--cp-smuted)}
.cps-kpi b{font:700 clamp(10px,2.9cqw,19px) var(--cp-display);font-variant-numeric:tabular-nums}
.cps-rbars{display:flex;flex-direction:column;gap:.8cqw;font-size:.9em}
.cps-rb{display:grid;grid-template-columns:22% 1fr 19%;gap:1cqw;align-items:center}
.cps-trk{height:1.2cqw;min-height:5px;border-radius:99px;background:#e3eaf2;overflow:hidden}
.cps-fill{display:block;height:100%;border-radius:99px;background:var(--cp-orange);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cps-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--cp-smuted)}
.cps-spark{margin-top:auto}
.cps-spark-h{display:flex;justify-content:space-between;font-size:.85em;color:var(--cp-smuted)}
.cps-peak{color:#c2461a;font-weight:600}
.cps-spark svg{display:block;width:100%;height:7cqw;margin-top:.5cqw}
.cps-ticks{position:relative;height:1.4em;font:500 clamp(6px,1.3cqw,10px) var(--cp-mono);color:var(--cp-smuted)}
.cps-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.cps-ticks span:first-child{transform:none}
.cps-phone{--z:110px;right:1%;top:12%;width:30%;height:78%;border-radius:4.2cqw;padding:1.1cqw}
.cps-phone .cps-scr{border-radius:3.3cqw;padding:3.4cqw 1.4cqw 1.4cqw;gap:1cqw;background:#eef3f8}
.cps-phone .cps-scr::before{content:"";position:absolute;top:1.1cqw;left:38%;right:38%;height:1.2cqw;border-radius:99px;background:#0d1828}
.cps-orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9cqw}
.cps-o{background:#fff;border:1px solid #e1e8f0;border-radius:1.2cqw;padding:1cqw 1.2cqw;font-size:.88em}
.cps-o div{display:flex;justify-content:space-between;align-items:center}
.cps-o b{font-variant-numeric:tabular-nums}
.cps-o>span{display:block;color:var(--cp-smuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.3cqw}
.cps-o.is-new{animation:cpsOrderIn .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cpsOrderIn{from{opacity:0;transform:translateY(-40%) scale(.92)}}
.cps-pf{font:700 clamp(6px,1.25cqw,9px) var(--cp-mono);letter-spacing:.04em;color:#fff;padding:.25cqw .8cqw;border-radius:99px;background:#3b5b85}
.cps-pf[data-p="Didi"]{background:#f07a2b}.cps-pf[data-p="Rappi"]{background:#ec3f2f}.cps-pf[data-p="Uber Eats"]{background:#139e57}
.cps-toast{--z:160px;left:26%;top:-3%;transform:translateZ(var(--z));display:flex;align-items:center;gap:1.2cqw;background:rgba(255,255,255,.97);color:var(--cp-sink);border-radius:1.6cqw;padding:1.1cqw 1.8cqw 1.1cqw 1.1cqw;font-size:clamp(8px,1.75cqw,12px);line-height:1.3;box-shadow:0 3cqw 5cqw -1.5cqw rgba(0,0,0,.6);white-space:nowrap}
.cps-toast i{flex:none;width:3.6cqw;height:3.6cqw;min-width:18px;min-height:18px;border-radius:1cqw;background:#1fae5c;display:grid;place-items:center;color:#fff}
.cps-toast small{display:block;font-size:.95em;color:var(--cp-smuted)}
.cps-toast.is-pop{animation:cpsPop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes cpsPop{from{opacity:0;transform:translateZ(var(--z)) translateY(2cqw) scale(.85)}}
.cps-r-c1{left:-2%;bottom:6%;--z:90px}
.cps-r-c2{left:40%;bottom:0%;--z:130px;animation-delay:-2.5s}

/* responsive */
@media (max-width:991.98px){.cps-panel{grid-template-columns:1fr;padding:24px;gap:30px}.cps-tabs{grid-template-columns:1fr}.cps-viz{padding-top:28px}.cps-toast{top:1%}}
.cps-contact a:hover{color:var(--cp-ink)}
@media (max-width:575.98px){.cps{padding-block:56px 60px}.cps-feats{grid-template-columns:1fr}.cps-steps li{font-size:11.5px;padding:8px;gap:6px}.cps-steps b{width:20px;height:20px}.cps-net{width:120%;right:-40%;opacity:.35}}
@media (prefers-reduced-motion:reduce){.cps-chip,.cps-live::before,.cps-panel.cps-enter{animation:none}.cps-scene,.cps-feat{transition:none}}

/* logos propios de cada sistema */
.cps-plogo{display:flex;align-items:center;gap:10px}
.cps-plogo img{width:40px;height:40px;flex:none}
.cps-plogo-w{font:800 17px var(--cp-display);letter-spacing:.07em;color:#fff}
.cps-plogo-w em{font-style:normal;color:#5fae46;margin-left:6px}
.cps-tab .cps-tab-n::before{display:none}
.cps-tab .cps-tab-n img{width:24px;height:24px;flex:none}
.cps-plogo-w--rm{display:flex;flex-direction:column;line-height:1.1}
.cps-plogo-w--rm small{font:600 12px var(--cp-body);letter-spacing:.02em;color:#86efac;margin-top:2px}
.cps-descarga{font-size:12.5px;line-height:1.5;color:var(--cp-muted);max-width:56ch;border-left:2px solid color-mix(in srgb,var(--c) 60%,transparent);padding-left:10px}
.cps-descarga b{color:var(--cp-ink);font-weight:600}