/* Manual de KeyStage */
.man .mwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,4vw,70px);max-width:1320px;margin:0 auto;padding:110px var(--gut) 60px}
.mtoc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.mtoc>b{display:block;font:600 13px var(--sans);color:var(--mute);margin:0 0 10px}
.mtoc nav,.mtoc-m nav{display:grid;gap:2px}
.mtoc a,.mtoc-m a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:10px;text-decoration:none;color:var(--ink2);font-size:14.5px;line-height:1.3;transition:background .2s,color .2s}
.mtoc a i,.mtoc-m a i{font-style:normal;font-size:12px;color:var(--dim);min-width:1.4em}
.mtoc a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.mtoc a.on{background:rgba(227,38,45,.16);color:#fff}
.mtoc a.on i{color:var(--ks2)}
.mtoc-m{display:none}
.mhead h1{font-size:clamp(40px,5.4vw,76px);margin:14px 0 16px}
.mhead .lead{margin:0 0 10px}
.mbody{min-width:0;max-width:920px}
.msec{padding:70px 0 10px;border-top:1px solid var(--line);margin-top:60px;scroll-margin-top:80px}
.msec h2{display:flex;gap:16px;align-items:baseline;font:600 clamp(28px,3vw,40px)/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 22px}
.msec h2 i{font-style:normal;font:500 .55em var(--sans);color:var(--ks2);min-width:1.6em}
.msec h3{font:600 21px var(--sans);letter-spacing:-.01em;margin:38px 0 12px}
.msec p,.msec li{color:var(--ink2);font-size:17px;line-height:1.6}
.msec .lead{font-size:clamp(18px,1.6vw,21px)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.feat-grid div{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--bg2)}
.feat-grid b{display:block;margin-bottom:4px}
.feat-grid span{color:var(--mute);font-size:15px}
ul.check{list-style:none;padding:0;margin:14px 0}
ul.check li{position:relative;padding:6px 0 6px 30px}
ul.check li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2px solid var(--ks2);border-bottom:2px solid var(--ks2);transform:rotate(-45deg)}
ol.steps{list-style:none;counter-reset:st;padding:0;margin:16px 0 22px;display:grid;gap:10px}
ol.steps li{counter-increment:st;position:relative;padding:14px 16px 14px 56px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
ol.steps li::before{content:counter(st);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ks);color:#fff;font:700 14px var(--sans)}
.callout{margin:20px 0;padding:16px 18px 16px 50px;border-radius:14px;position:relative;font-size:16px;color:var(--ink2);background:rgba(48,140,255,.08);border:1px solid rgba(48,140,255,.25)}
.callout::before{content:"i";position:absolute;left:16px;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--sans);background:#2f7ff0;color:#fff}
.callout.warn{background:rgba(255,170,40,.08);border-color:rgba(255,170,40,.3)}
.callout.warn::before{content:"!";background:#e39a1c}
.table-wrap{overflow-x:auto;margin:16px 0}
table.mt{width:100%;border-collapse:collapse;font-size:15px}
table.mt th,table.mt td{text-align:left;vertical-align:top;padding:12px 12px;border-bottom:1px solid var(--line)}
table.mt th{font:600 13px var(--sans);color:var(--mute)}
table.mt td:first-child{font-weight:600;white-space:nowrap}

/* capturas con números */
.shot{margin:26px 0 34px}
.shot .frame{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)}
.shot .frame img{display:block;width:100%;height:auto}
.shot .frame.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:none;box-shadow:none;max-width:520px;margin:0 auto}
.shot .frame.duo img{border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.pin{position:absolute;z-index:3;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid #fff;background:var(--ks);color:#fff;font:700 13.5px/1 var(--sans);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 4px rgba(227,38,45,.35),0 6px 16px rgba(0,0,0,.6);transition:transform .2s;padding:0}
.pin:hover,.pin.hl{transform:scale(1.18)}
.box{position:absolute;z-index:2;border:2px solid var(--ks2);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.box.hl{opacity:1}
.shot figcaption p{margin:12px 2px 6px;color:var(--mute);font-size:15px}
ol.legend{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
ol.legend li{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:10px;font-size:15px;line-height:1.4;color:var(--ink2);cursor:default;transition:background .2s}
ol.legend li b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ks);color:#fff;font:700 12px var(--sans);margin-top:1px}
ol.legend li.hl{background:rgba(227,38,45,.14)}
.msec details{border-bottom:1px solid var(--line)}
.msec summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font:600 18px var(--sans);position:relative}
.msec summary::-webkit-details-marker{display:none}
.msec summary::after{content:"+";position:absolute;right:6px;top:14px;font:300 26px var(--sans);color:var(--ks2)}
.msec details[open] summary::after{content:"–"}
.msec details p{margin:0 0 18px}
.mfoot{margin-top:60px;color:var(--dim);font-size:13px}

@media (max-width:1000px){
  .man .mwrap{grid-template-columns:1fr;padding-top:96px}
  .mtoc{display:none}
  .mtoc-m{display:block;margin:20px 0 0;border:1px solid var(--line);border-radius:14px;padding:4px 12px}
  .mtoc-m summary{cursor:pointer;padding:12px 2px;font-weight:600}
}
@media (max-width:640px){
  .feat-grid,ol.legend{grid-template-columns:1fr}
  .pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11.5px;border-width:1.5px;box-shadow:0 0 0 3px rgba(227,38,45,.35)}
  .shot .frame{border-radius:10px}
  .msec{padding-top:46px;margin-top:40px}
  .msec p,.msec li{font-size:16px}
}