/* Páginas de sistemas: héroe con captura, módulos, galería con ampliación, pasos y casos de uso. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.sp-hero{position:relative;padding:150px 0 80px;overflow:hidden;isolation:isolate}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(760px 380px at 90% 0%,rgba(255,90,0,.22),transparent 65%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 44px;-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent);opacity:.9}
.back{display:flex;width:fit-content;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--tx-2);margin-bottom:30px;transition:color .2s}
.back:hover{color:var(--or)}
.sp-hero .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.sp-hero h1{font-size:clamp(36px,4.6vw,62px);margin-top:18px;color:var(--tx)}
.sp-hero .lead{color:var(--tx-2);max-width:52ch}
.sp-hero .hero-act{margin-top:32px}
.sp-note{margin-top:16px;font-size:12.5px;color:var(--tx-3);font-weight:600}

/* Ventana con captura */
.win{border:1px solid var(--card-b);border-radius:18px;background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow)}
.win-bar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--card)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--tx-3);opacity:.45}
.win img{width:100%;height:auto;background:#fff}
.phone-shot{border-radius:26px;overflow:hidden;border:1px solid var(--card-b);box-shadow:var(--shadow);background:var(--bg-2);max-width:420px;margin-inline:auto}
.phone-shot img{width:100%;height:auto}

/* Datos destacados */
.sp-facts{padding:0 0 30px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--card-b);background:var(--card);border-radius:18px;font-weight:700;font-size:15px;line-height:1.3}
.fact .chip{width:44px;height:44px;border-radius:14px;flex:none}
.fact .chip .i{width:21px;height:21px}

.sp-sec{padding:90px 0}
.sp-alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.sp-p{color:var(--tx-2);font-size:17.5px;max-width:60ch;margin-top:18px}
.sp-bul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.sp-bul li{display:flex;gap:14px;align-items:flex-start;font-weight:600}
.sp-bul .i{width:22px;height:22px;color:var(--or);margin-top:2px}

/* Tarjetas de módulos */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.mod{padding:24px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-content:start}
.mod .chip{width:42px;height:42px;border-radius:13px}
.mod .chip .i{width:20px;height:20px}
.mod h3{align-self:center;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.mod p{grid-column:1/-1;color:var(--tx-2);font-size:15px}
.mod ul{grid-column:1/-1;list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;color:var(--tx-2);font-size:14.5px}
.mod li{display:flex;gap:10px}
.mod li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);margin-top:9px;flex:none}

/* Galería */
.gal-h{margin:44px 0 18px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gal figure{margin:0}
.gal .wide{grid-column:1/-1}
.shot-btn{display:block;width:100%;text-align:left;border:1px solid var(--card-b);border-radius:18px;overflow:hidden;background:var(--bg-2);position:relative;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.shot-btn:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.45);box-shadow:0 26px 50px -28px rgba(255,90,0,.4)}
.shot-btn img{width:100%;height:auto;background:#fff}
.shot-btn::after{content:"Ampliar";position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(7,13,19,.78);color:#fff;font-size:12px;font-weight:700;opacity:0;transform:translateY(6px);transition:all .3s var(--ease)}
.shot-btn:hover::after,.shot-btn:focus-visible::after{opacity:1;transform:none}
.gal figcaption{margin-top:10px;font-size:14px;color:var(--tx-2);font-weight:600}

/* Chips de indicadores */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips span{padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:700;color:var(--tx-2)}

/* Pasos */
.sp-steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.sp-steps li{padding:24px;border:1px solid var(--card-b);background:var(--card);border-radius:20px;position:relative}
.sp-steps .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--or);color:var(--or);font-weight:800;font-size:15px}
.sp-steps h3{font-size:18px;font-weight:800;margin-top:16px;letter-spacing:-.015em}
.sp-steps p{color:var(--tx-2);font-size:14.5px;margin-top:8px}

.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.case{padding:22px 24px;border-left:3px solid var(--or);background:var(--card);border-radius:0 16px 16px 0}
.case b{display:block;font-size:16px;margin-bottom:4px}
.case span{color:var(--tx-2);font-size:14.5px}

.benef{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.benef div{padding:22px 24px;border:1px solid var(--card-b);border-radius:18px;background:var(--card)}
.benef b{display:block;font-size:16px;margin-bottom:6px}
.benef span{color:var(--tx-2);font-size:14.5px}

.sp-end{padding:20px 0 120px}
.sp-cta{padding:clamp(34px,5vw,60px);border-radius:32px;text-align:center;background:radial-gradient(800px 320px at 50% 0%,rgba(255,90,0,.35),transparent 65%),linear-gradient(135deg,#101c27,#070d13);border:1px solid rgba(255,255,255,.1);color:#f3f6f8}
.sp-cta h2{margin:0 auto;max-width:22ch;font-size:clamp(28px,3.6vw,44px)}
.sp-cta p{color:#b8c4cd;max-width:56ch;margin:16px auto 0}
.sp-cta .hero-act{justify-content:center}
.sp-cta .btn-g{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.sp-others{margin-top:34px;text-align:center;color:var(--tx-2);font-size:15px}
.sp-others a{color:var(--or);font-weight:700}

/* Ampliación de capturas */
#lb{width:min(1400px,96vw);max-width:none;padding:0;background:var(--bg-2);border-radius:20px;overflow:hidden}
#lb::backdrop{background:rgba(3,7,11,.82);backdrop-filter:blur(6px)}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.lb-top p{font-weight:700;font-size:15px}
.lb-top small{display:block;color:var(--tx-3);font-weight:600;font-size:12.5px}
.lb-body{position:relative;background:#fff;max-height:78vh;overflow:auto}
.lb-body img{width:100%;height:auto;display:block}
.lb-nav{display:flex;gap:8px;flex:none}
.lb-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;line-height:1;transition:border-color .2s}
.lb-nav button:hover{border-color:var(--or)}

@media (max-width:1100px){
  .facts{grid-template-columns:1fr 1fr}
  .mods,.benef{grid-template-columns:1fr 1fr}
  .sp-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .sp-hero .wrap,.sp-two{grid-template-columns:1fr}
  .sp-hero{padding:130px 0 60px}
}
@media (max-width:640px){
  .facts,.mods,.benef,.sp-steps,.cases,.gal{grid-template-columns:1fr}
  .sp-sec{padding:64px 0}
  .fact{padding:14px 16px}
  .lb-top{padding:12px 14px}
}