/* SmartCtrl (página de producto) 2026 — solo se carga en design-and-simulation-software/smartctrl. Todo va bajo #pscsc. */
#pscsc{--r:#c00000;--g:#f4f4f4;--l:#e2e2e2;--ink:#212934;--navy:#14202c;--top:0px;--off:120px;font-family:Helvetica,Arial,sans-serif;color:#333;line-height:1.5;text-align:left}
#pscsc *,#pscsc *::before,#pscsc *::after{box-sizing:border-box}
#pscsc a{text-decoration:none;color:inherit;cursor:pointer}
#pscsc a:focus-visible,#pscsc button:focus-visible,#pscsc .strip:focus-visible{outline:2px solid #fff;outline-offset:2px}
#pscsc .fx a:focus-visible,#pscsc .rail a:focus-visible,#pscsc .strip:focus-visible{outline-color:var(--r)}
#pscsc img{max-width:100%;height:auto}
#pscsc h1,#pscsc h2,#pscsc h3,#pscsc h4{margin:0;padding:0;letter-spacing:0;text-transform:none}
#pscsc p,#pscsc ul{margin:0;padding:0}
#pscsc .in{max-width:1248px;margin:0 auto;padding:0 24px}
#pscsc .sp{height:64px}

/* Portada */
#pscsc .hero{background:var(--navy);color:#fff;padding:54px 0 60px;position:relative;overflow:hidden}
#pscsc .hero::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;border:70px solid rgba(192,0,0,.2);pointer-events:none}
#pscsc .hero .in{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:center}
#pscsc .hero .hl,#pscsc .hero .hs,#pscsc .fxs,#pscsc .cta .in>div{min-width:0}
#pscsc .lw img{display:block;width:250px;margin:0 0 22px}
#pscsc .claim{font:700 15px/1.4 Helvetica,Arial,sans-serif;color:#ff8a8a;margin:0 0 10px}
#pscsc .hero h1{font:300 38px/1.2 Raleway,Helvetica,Arial,sans-serif;color:#fff;text-wrap:balance}
#pscsc .rule{height:5px;background:var(--r);width:320px;max-width:100%;margin:20px 0}
#pscsc .lead{font-size:16.5px;line-height:1.8;color:#cfd8e2}
#pscsc .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
#pscsc .b{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 Raleway,Helvetica,Arial,sans-serif;padding:15px 22px;background:var(--r);color:#fff;border:0;border-radius:0}
#pscsc .b:hover{background:#a00000}
#pscsc .b.o{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
#pscsc .b.o:hover{background:rgba(255,255,255,.12)}
#pscsc .b svg{width:18px;height:18px;flex:none}
#pscsc .cap{font-size:12px;color:#9fb0c1;margin:10px 0 0}

/* Ventana de captura */
#pscsc .win{background:#fff;border:1px solid #cfd6dd;box-shadow:0 6px 22px rgba(20,32,44,.12);border-radius:6px;overflow:hidden;display:inline-block;max-width:100%}
#pscsc .hero .win{display:block;width:100%;border-color:#34475b;box-shadow:0 14px 40px rgba(0,0,0,.45)}
#pscsc .win .tb{background:#eceff2;padding:7px 10px;display:flex;gap:6px;border-bottom:1px solid #dde2e7}
#pscsc .win .tb i{width:9px;height:9px;border-radius:50%;background:#c3cad2;display:block}
#pscsc .win .wi img{display:block;margin:0 auto;width:100%}

/* Títulos de sección */
#pscsc .st{display:flex;align-items:flex-start;gap:14px;margin:0 0 26px}
#pscsc .st .ln{flex:none;width:34px;height:2px;background:var(--r);margin-top:16px}
#pscsc .st h2{font:300 28px/1.25 Raleway,Helvetica,Arial,sans-serif;color:#333}
#pscsc .st p{margin:6px 0 0;font-size:14px;color:#6b6b6b}

/* Why */
#pscsc .wgrp{margin:0 0 22px}
#pscsc .wgrp h4{font:700 12px/1.3 Raleway,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#777;margin:0 0 10px}
#pscsc .wh{display:flex;flex-wrap:wrap;gap:10px}
#pscsc .wh span{border:1px solid #cfcfcf;padding:10px 16px;font-size:14px;font-weight:600;color:#333;background:#fff;display:flex;gap:8px;align-items:center}
#pscsc .wh span::before{content:"";flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--r)}

/* Funciones: raíl + secciones */
#pscsc .flow{display:grid;grid-template-columns:230px minmax(0,1fr);gap:46px;align-items:start}
#pscsc .rail{position:sticky;top:calc(var(--top) + 16px);border-left:2px solid var(--l);padding:4px 0}
#pscsc .rail a{display:block;padding:11px 0 11px 22px;font:600 14px/1.35 Helvetica,Arial,sans-serif;color:#666;margin-left:-2px;border-left:2px solid transparent}
#pscsc .rail a b{display:block;font:800 11px/1.2 Raleway,Helvetica,Arial,sans-serif;letter-spacing:.12em;color:#aaa;margin-bottom:2px}
#pscsc .rail a:hover{color:var(--r)}
#pscsc .rail a.on{color:var(--r);border-left-color:var(--r)}
#pscsc .rail a.on b{color:var(--r)}
#pscsc .fx{padding:6px 0 34px;scroll-margin-top:var(--off)}
#pscsc .fx+.fx{border-top:1px solid var(--l);padding-top:30px}
#pscsc .fn{font:800 13px/1.2 Raleway,Helvetica,Arial,sans-serif;letter-spacing:.14em;color:var(--r);margin:0 0 8px}
#pscsc .fx h3{font:300 28px/1.25 Raleway,Helvetica,Arial,sans-serif;color:var(--ink);margin:0 0 6px}
#pscsc .fx p.d{font-size:16px;line-height:1.8;color:#444}
#pscsc .fx p.d b{color:var(--r)}
#pscsc .fx .vs{margin-top:18px;background:var(--g);padding:20px;text-align:center}
#pscsc .fx .pair{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
#pscsc .fx .win{max-width:100%}

/* Aplicaciones */
#pscsc .strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
#pscsc .strip .sl{flex:none;width:340px;max-width:85%;scroll-snap-align:start}
#pscsc .strip .sl img{display:block;width:100%}
#pscsc .apn{font-size:15px;line-height:1.7;color:#444;margin:20px 0 0;max-width:780px}
#pscsc .apn b{color:var(--r)}

/* Cierre */
#pscsc .cta{background:var(--navy);color:#fff;padding:54px 0}
#pscsc .cta .in{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
#pscsc .cta h2{font:300 30px/1.25 Raleway,Helvetica,Arial,sans-serif;color:#fff;margin:0 0 8px}
#pscsc .cta p{color:#b9c6d3;font-size:15px;line-height:1.7}
#pscsc .cta .acts{margin-top:0;justify-content:flex-end}

@media(max-width:1200px){#pscsc .in{padding:0 30px}}
@media(max-width:1000px){
 #pscsc .hero .in,#pscsc .flow,#pscsc .cta .in{grid-template-columns:minmax(0,1fr)}
 #pscsc .rail{display:none}
 #pscsc .cta .acts{justify-content:flex-start}
}
@media(max-width:620px){
 #pscsc .in{padding:0 20px}
 #pscsc .hero{padding:36px 0 40px}
 #pscsc .hero h1{font-size:30px}
 #pscsc .lw img{width:210px}
 #pscsc .st h2{font-size:24px}
 #pscsc .fx h3{font-size:24px}
 #pscsc .sp{height:44px}
 #pscsc .fx .vs{padding:14px}
 #pscsc .acts .b{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){#pscsc *{scroll-behavior:auto!important}}