/* Original ROW product layouts and the preserved three-phone hero. */
.sistem-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sistem-product-stage{--side-width:240px;--side-height:448px;--center-width:270px;--center-height:520px;--phone-gap:7%;--side-angle:5deg;--center-lift:-15px}
.sistem-product-stage .product-phone[data-slot]{position:absolute;top:50%;width:var(--side-width);height:var(--side-height);margin:0;left:50%;transition:left 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1),width 1.1s cubic-bezier(.22,.61,.36,1),height 1.1s cubic-bezier(.22,.61,.36,1);will-change:transform,left}
.sistem-product-stage .product-phone[data-slot="left"]{left:calc(50% - (var(--center-width) + var(--side-width))/2 - var(--phone-gap));transform:translate(-50%,-50%) rotate(calc(-1 * var(--side-angle)));z-index:1}
.sistem-product-stage .product-phone[data-slot="center"]{width:var(--center-width);height:var(--center-height);transform:translate(-50%,-50%) translateY(var(--center-lift));z-index:3}
.sistem-product-stage .product-phone[data-slot="right"]{left:calc(50% + (var(--center-width) + var(--side-width))/2 + var(--phone-gap));transform:translate(-50%,-50%) rotate(var(--side-angle));z-index:2}
.phone-carousel-controls{display:flex;justify-content:center;align-items:center;gap:17px;margin-top:33px;color:#8d909c;font-size:10px}
.phone-carousel-controls>span{color:#41444d}.phone-carousel-controls button{padding:8px 0;color:#b0b5c2;font-size:10px}.phone-carousel-controls button:hover{color:#fff}.phone-carousel-controls button:disabled{color:#707583;cursor:default}.phone-carousel-controls button>span{margin-left:9px}

.screen-gallery{background:radial-gradient(ellipse at 50% 35%,#26354b 0,#131e2e 50%,#101722 100%);border:1px solid #2d3b50;border-radius:18px;overflow:hidden;padding:23px 26px 22px;min-width:0}
.screen-gallery-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.075em;color:#8195b3;margin-bottom:24px}.screen-gallery-top .screen-index{color:#b0c1d9;white-space:nowrap;font-variant-numeric:tabular-nums}
.screen-figure{text-align:center}.screen-expand{display:block;position:relative;padding:0;margin:auto;width:250px;max-width:100%;background:#101117;border:1px solid #77849570;box-shadow:0 20px 50px #0006;border-radius:25px;overflow:hidden;line-height:0;transition:border-color .3s}.screen-expand:hover{border-color:#afc8f7}.screen-main-image{display:block;width:100%;height:auto;aspect-ratio:1170/2532;object-fit:contain;background:#f5f6f8}
.screen-expand-label{position:absolute;right:12px;bottom:13px;display:flex;align-items:center;gap:8px;line-height:1;font-size:9px;background:#0e1729e8;color:white;backdrop-filter:blur(12px);padding:10px 12px;border-radius:20px;box-shadow:0 5px 20px #0002}.screen-expand-label svg{height:11px;width:11px}
.screen-title{font-size:11px;color:#bac8dc;line-height:1.6;margin-top:19px}
.screen-thumbs{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#526884 transparent;margin-top:23px;padding:3px 3px 10px;scroll-snap-type:x proximity}
/* Override the captures' native height so thumbnails retain their proportions. */
.screen-thumb{flex:none;position:relative;width:50px;height:auto;min-height:0;padding:3px;border:1px solid #4e617b70;border-radius:7px;background:#182233;overflow:hidden;scroll-snap-align:start;transition:border-color .2s,transform .2s;opacity:.6;line-height:0}.screen-thumb[aria-pressed="true"]{border-color:#9dbcf6;opacity:1}.screen-thumb:hover{opacity:1;transform:translateY(-2px)}.screen-thumb img{display:block;width:100%;height:auto;aspect-ratio:1170/2532;object-fit:contain;border-radius:4px;background:#fafafa}.screen-thumb>span{position:absolute;right:3px;bottom:3px;background:#0e1528ed;color:#dbe7ff;font-size:6px;line-height:1;padding:4px;border-radius:3px}.screen-thumb:focus-visible{outline-offset:1px}

.screen-modal-open{overflow:hidden}
.screen-dialog{width:min(700px,calc(100vw - 32px));height:min(92vh,1100px);max-height:92vh;max-width:none;padding:0;border:1px solid #3b4c65;border-radius:16px;background:#121c2b;color:#e0e8f3;overflow:hidden}
.screen-dialog[open]{display:flex;flex-direction:column}.screen-dialog::backdrop{background:#020711d9;backdrop-filter:blur(10px)}
.screen-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 23px;border-bottom:1px solid #34435b;flex:none}
.sistem-page .screen-dialog-header h2{font-family:Helvetica,Arial,sans-serif;font-size:17px;text-transform:none;letter-spacing:-.025em;font-weight:400;line-height:1.4}.screen-dialog-close{display:flex;gap:16px;align-items:center;font-size:11px;color:#a8bad3;flex:none;padding:5px}.screen-dialog-close>span{font-size:24px;font-weight:300}.screen-dialog-content{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:25px}.screen-dialog-content img{width:min(100%,520px);height:auto;margin:auto;border-radius:12px;object-fit:contain}

/* Captures use the approved colored stages and condensed editorial design. */
.sistem-feature-panel .screen-gallery{background:#bccae4;border:0;color:#24364b}
#panel-agenda .screen-gallery{background:#f0d38f}
#panel-caja .screen-gallery{background:#d1cddd}
#panel-equipo .screen-gallery{background:#c8d5cf}
.sistem-ai .screen-gallery{background:#d9cdeb;border:0;color:#3a294d;transform:rotate(-2deg)}
.screen-gallery-top{color:#53687e}.screen-gallery-top .screen-index{color:#3e536c}
.screen-title{color:#465c76}.screen-thumbs{scrollbar-color:#8699b3 transparent}
.screen-thumb{background:#7f95b1;border-color:#7a8fa9;opacity:.65}
.screen-thumb[aria-pressed="true"]{border-color:#2c4f87;opacity:1}
.screen-expand{width:235px;border-color:#8493a4;box-shadow:0 20px 50px #1a253a30}
.collage-real-shot{position:absolute;right:5%;bottom:0;width:42%;max-width:210px;padding:0;border:1px solid #ffffffb0;border-radius:18px;overflow:hidden;background:#f4f5f8;box-shadow:0 18px 45px #0004;line-height:0;transition:transform .35s}
.collage-real-shot:hover{transform:translateY(-5px)}
.collage-real-shot>img{width:100%;height:auto;aspect-ratio:1170/2532;object-fit:contain}
.collage-real-shot>span{position:absolute;bottom:11px;left:11px;right:11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:15px;padding:9px 11px;background:#17253ce8;color:white;font-size:8px;line-height:1}
.collage-real-shot>span>svg{width:11px;height:11px}.collage-clients .collage-real-shot{right:0}
.sistem-feature-panel{align-items:center}
.sistem-page .screen-dialog-header h2{font-family:Helvetica,Arial,sans-serif;font-size:17px;text-transform:none;letter-spacing:-.025em;line-height:1.4}
@media(max-width:1100px){.sistem-product-stage{--side-width:215px;--side-height:420px;--center-width:245px;--center-height:490px;--phone-gap:5%}.screen-gallery{padding:20px}.screen-gallery-top{font-size:7px}.screen-expand{width:220px}.collage-real-shot{max-width:190px}}
@media(max-width:800px){.sistem-product-stage{--side-width:180px;--side-height:365px;--center-width:205px;--center-height:435px;--phone-gap:3%}.screen-gallery{width:100%;padding:24px 28px}.screen-gallery-top{font-size:8px}.screen-expand{width:250px}.screen-thumbs{gap:12px}.screen-thumb{width:49px}.sistem-ai .screen-gallery{transform:none}.collage-real-shot{width:54%;max-width:175px}}
@media(max-width:540px){.sistem-product-stage{--side-width:132px;--side-height:285px;--center-width:161px;--center-height:330px;--phone-gap:10px;--side-angle:7deg;--center-lift:-10px}.phone-carousel-controls{font-size:9px;margin-top:24px;gap:13px}.phone-carousel-controls button{font-size:9px}.screen-gallery{padding:20px 17px 17px;border-radius:13px}.screen-gallery-top{font-size:6px;margin-bottom:20px}.screen-expand{width:230px;border-radius:22px}.screen-title{font-size:10px;margin-top:17px}.screen-expand-label{font-size:8px;padding:9px 11px}.screen-thumbs{gap:9px;margin-top:20px;padding-bottom:8px}.screen-thumb{width:44px}.screen-thumb>span{font-size:5px}.collage-real-shot{width:49%;max-width:180px;border-radius:14px}.collage-real-shot>span{font-size:7px;padding:8px;left:8px;right:8px;bottom:8px}.sistem-tab-list button span{font-size:12px}.screen-dialog{width:calc(100vw - 20px);height:92vh;border-radius:12px}.screen-dialog-header{padding:16px;gap:12px}.sistem-page .screen-dialog-header h2{font-size:14px}.screen-dialog-close{font-size:10px;gap:8px}.screen-dialog-content{padding:14px}.screen-dialog-content img{border-radius:9px}}
.sistem-case-study{background:#111925;border-bottom:1px solid #2b3545}
.case-study-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:50px;margin-bottom:42px}
.case-study-heading h2{margin-top:25px}
.case-study-intro{max-width:350px;margin-left:auto}
.case-study-intro>p{font-size:16px;line-height:1.7;color:#b2bdcc}
.case-study-intro>a{display:inline-flex;align-items:center;gap:18px;font-size:12px;margin-top:24px;padding-bottom:9px;border-bottom:1px solid #65748d}
.case-study-intro>a>svg{width:17px;height:17px}
.case-study-video{margin:0}
.case-video-frame{position:relative;width:100%;aspect-ratio:16/9;min-height:200px;overflow:hidden;border-radius:15px;background:#050505}
.case-video-cover{display:grid;place-items:center;position:absolute;inset:0;color:#fff}
.case-video-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-video-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000c,transparent 45%)}
.case-video-play{position:relative;z-index:1;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#5482ff;box-shadow:0 8px 30px #0005;transition:background .2s,transform .2s}
.case-video-play>svg{width:32px;height:32px;margin-left:3px}
.case-video-cover:hover .case-video-play{background:#7096ff;transform:scale(1.06)}
.case-video-cover:focus-visible{outline-offset:-5px}
.case-video-label{position:absolute;z-index:1;bottom:28px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.045em}
.case-video-label>span{font-variant-numeric:tabular-nums;letter-spacing:0}
.case-video-frame>iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.case-study-video>figcaption{color:#8999ae;font-size:11px;margin-top:16px}
@media(max-width:800px){.case-study-heading{gap:30px}.case-study-intro>p{font-size:14px}.case-video-play{width:66px;height:66px}}
@media(max-width:540px){.case-study-heading{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.case-study-heading h2{font-size:65px}.case-study-intro{margin-left:0;max-width:300px}.case-study-intro>a{margin-top:18px;font-size:11px}.case-video-frame{border-radius:11px}.case-video-play{width:56px;height:56px}.case-video-play>svg{width:25px;height:25px}.case-video-label{bottom:16px;left:17px;right:17px;font-size:8px}.case-study-video>figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sistem-product-stage .product-phone[data-slot]{transition:none;will-change:auto}.screen-thumb,.collage-real-shot,.case-video-play{transition:none}.case-video-cover:hover .case-video-play{transform:none}}