/* Saber Motor - hoja de plano. Mobile-first. Fuentes autoalojadas (OFL). */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#14324F; --panel:#0F2840; --ink:#F4F1EA; --acc:#F27A1A; --tinta:#0B1D2E;
  --line:rgba(244,241,234,.55); --faint:rgba(244,241,234,.16);
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);background-color:var(--bg);
  background-image:
    linear-gradient(rgba(244,241,234,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.075) 1px,transparent 1px),
    linear-gradient(rgba(244,241,234,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.035) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
  font:400 1.0625rem/1.55 var(--body)}
a{color:var(--ink)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
p{margin:.6rem 0;max-width:62ch}
ul{margin:0;padding:0;list-style:none}

/* Marco del plano */
.hoja{margin:10px;border:1px solid var(--line);position:relative}
.hoja::before{content:"";position:absolute;inset:5px;border:1px solid var(--faint);pointer-events:none}
@media(min-width:700px){.hoja{margin:18px}}
.cinta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);position:relative;background:var(--bg)}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:700 1.5rem/1 var(--cond);letter-spacing:.02em}
.marca img{display:block;border-radius:50%}
.mono{font:400 .8rem/1.4 var(--mono);color:rgba(244,241,234,.8)}

/* Portada */
.portada{display:flex;flex-direction:column}
.izq{display:contents}
.txt{order:1;padding:2rem 1.1rem 1rem;position:relative}
h1{margin:0 0 1rem;font:700 clamp(3.1rem,15vw,6.4rem)/.9 var(--cond);letter-spacing:-.005em;max-width:9ch}
.valida{font-size:1.2rem;line-height:1.4;font-weight:600;max-width:30ch}
.fig{order:2;position:relative}
.fig-in{padding:0 1.1rem;display:flex;flex-direction:column;justify-content:center}
.js .fig{height:240svh}
.js .fig-in{position:sticky;top:0;height:100svh;padding-top:.8rem;padding-bottom:.8rem}
.cap{margin:0 0 .4rem}
#fig-svg{display:block;width:100%;height:auto;max-height:calc(100svh - 6rem)}
.js #fig-svg{flex:1;min-height:0}
.cue{margin:.3rem 0 0;transition:none}
.sello{position:absolute;right:1.4rem;bottom:1.6rem;transform:rotate(-5deg);border:2px solid var(--acc);color:var(--acc);padding:.12rem .45rem;font:400 .66rem/1.35 var(--mono);text-align:center;background:rgba(20,50,79,.82)}
.ley{order:3;padding:1rem 1.1rem 2.5rem}
.ley ol{margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem;max-width:44ch}
.ley li{display:grid;grid-template-columns:1.9rem 1fr;gap:.7rem;align-items:start}
.n{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border:1.5px solid var(--ink);border-radius:50%;font:400 .85rem/1 var(--mono);background:var(--bg)}
.ley strong{font-weight:600}
.ley .mono{margin:0}

@media(min-width:900px){
  .portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start}
  .izq{display:block;position:sticky;top:0;min-height:100svh;padding:2.5rem 2rem 2rem 2rem;align-self:start;display:flex;flex-direction:column;justify-content:center}
  .txt,.ley{padding:0}
  .ley{padding-top:1.6rem}
  .ley ol{max-width:none}
  .fig{border-left:1px solid var(--line)}
  .fig-in{padding:0 2rem}
  h1{font-size:clamp(4rem,7.2vw,7.2rem)}
}

/* Secciones */
.sec{padding:3rem 1.1rem;border-top:1px solid var(--line)}
@media(min-width:900px){.sec{padding:3.5rem 2rem}.sec>*{max-width:46rem}.sec.ancha>*{max-width:none}}
h2{margin:0 0 .9rem;font:700 clamp(2.2rem,8vw,3.4rem)/.95 var(--cond)}
.nota{font-size:.95rem;color:rgba(244,241,234,.85)}
.aviso{margin:1.2rem 0 1.4rem;padding:.8rem 1rem;border:1px solid var(--ink);border-left:6px solid var(--acc);background:var(--panel);font-weight:600;max-width:62ch}
.aviso .mono{display:block;margin-bottom:.2rem;font-weight:400}

/* Fichas tecnicas */
.fichas{display:grid;gap:1.6rem}
@media(min-width:900px){.fichas{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}}
.ficha{border:1px solid var(--line);background:var(--panel);position:relative;display:flex;flex-direction:column}
.ficha::before,.ficha::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--acc);pointer-events:none}
.ficha::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.ficha::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.ficha-top{padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.ref{font:400 .8rem/1.4 var(--mono);color:rgba(244,241,234,.85)}
.ficha h3{margin:0;padding:.8rem .8rem .7rem;font:700 1.85rem/1 var(--cond)}
.ficha dl{margin:0;display:grid;grid-template-columns:6.3rem 1fr;border-top:1px solid var(--line);flex:1}
.ficha dt,.ficha dd{margin:0;padding:.55rem .8rem;border-bottom:1px solid var(--faint);font-size:.95rem;line-height:1.4}
.ficha dt{font:400 .78rem/1.5 var(--mono);color:rgba(244,241,234,.78);border-right:1px solid var(--faint)}
.ficha dd li{margin:0 0 .35rem;padding-left:.9rem;position:relative}
.ficha dd li:last-child{margin-bottom:0}
.ficha dd li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:2px;background:var(--ink)}
.niv{display:inline-flex;align-items:center;gap:.3rem}
.niv i{display:inline-block;width:.8rem;height:.8rem;border:1.5px solid var(--ink)}
.niv i.on{background:var(--ink)}
.niv span{margin-left:.4rem}
.ficha-pie{padding:.9rem .8rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.btn{display:inline-block;min-height:44px;padding:.65rem 1.1rem;background:var(--acc);color:var(--tinta);font:700 1.15rem/1.2 var(--cond);letter-spacing:.02em;text-decoration:none;border:0;border-radius:0}
.btn:hover{background:var(--ink)}
.btn.off{background:transparent;color:rgba(244,241,234,.85);border:1px dashed var(--line);cursor:not-allowed}
.btn.off:hover{background:transparent}
.mini{font:400 .75rem/1.3 var(--mono);color:rgba(244,241,234,.8)}

/* Videos y redes */
.lista{border:1px solid var(--line);background:var(--panel)}
.lista .cab{display:grid;grid-template-columns:1fr;padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.vacio{margin:0;padding:1rem .8rem;max-width:none}
.vid{display:block;padding:.8rem;border-bottom:1px solid var(--faint);text-decoration:none}
.vid:hover{background:rgba(244,241,234,.08)}
#redes{display:flex;flex-wrap:wrap;gap:.7rem}
.red{padding:.65rem 1.1rem;font:700 1.15rem/1.2 var(--cond);text-decoration:none;border:1px solid var(--line);background:var(--panel);min-height:44px}
a.red:hover{background:var(--ink);color:var(--tinta)}
.red.off{color:rgba(244,241,234,.78);border-style:dashed}

/* Cajetin */
.cajetin{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.cajetin>div{padding:.55rem .8rem;border-bottom:1px solid var(--faint);border-right:1px solid var(--faint)}
.cajetin>div:nth-child(2n){border-right:0}
.cajetin .t{grid-column:1/-1;border-right:0}
.cajetin b{display:block;font:700 1.35rem/1.1 var(--cond)}
.cajetin .mono{display:block;font-size:.72rem}
.cajetin .nt{grid-column:1/-1;border-right:0;border-bottom:0}
.cajetin .nt p{margin:.2rem 0 0;font-size:.92rem;max-width:none}
.cajetin .num{font-weight:600;margin-right:.2rem}
.cajetin .nt a{font:400 .85rem var(--mono)}
@media(min-width:700px){
  .cajetin{grid-template-columns:2fr 1fr 1fr 1fr 1fr}
  .cajetin .t{grid-column:auto;border-right:1px solid var(--faint)}
  .cajetin>div:nth-child(2n){border-right:1px solid var(--faint)}
  .cajetin>div:nth-child(6){border-right:0}
  .cajetin .nt{grid-column:1/-1}
}
.pie{padding:.9rem 1.1rem;border-top:1px solid var(--line)}

/* Sin JS: figura montada, sin recorrido */
.sin-js-note{display:none}

@media (prefers-reduced-motion:reduce){.js .fig{height:auto}.js .fig-in{position:static;height:auto;padding-top:1rem;padding-bottom:1rem}.js #fig-svg{flex:none;max-height:none}}