.spine{position:fixed;left:0;top:0;bottom:0;width:14px;background:var(--zone);z-index:80;transition:background .25s}
.spine span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--zone-ink);opacity:.85}
@media(max-width:900px){body{padding-left:7px}.spine{width:7px}.spine span{display:none}}

/* topo fixo */
header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:9px 22px 0;max-width:1240px;margin:0 auto}
.brand{font-weight:700;font-size:16px;letter-spacing:-.005em}
.brand em{font-style:normal;color:var(--muted);font-weight:400;font-size:12.5px;margin-left:9px}
@media(max-width:640px){.brand em{display:none}}
.segs{display:flex;gap:2px;background:var(--rule2);border-radius:6px;padding:2px}
.segs button{border:0;background:none;font-family:inherit;font-size:13px;color:var(--ink2);
  padding:5px 13px;border-radius:4px;cursor:pointer}
.segs button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* estrutura */
.shell{max-width:1240px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:372px minmax(0,1fr);gap:34px;align-items:start}
.side{position:sticky;top:var(--h);max-height:calc(100vh - var(--h) - 10px);overflow-y:auto;padding:16px 0 30px;scrollbar-width:thin}
.main{padding:18px 0 70px;min-width:0}
@media(max-width:980px){
  .shell{grid-template-columns:1fr;gap:0;padding:0 18px}
  .side{position:static;max-height:none;overflow:visible;padding:12px 0 40px}
  body.aberto .side{display:none}
  body:not(.aberto) .main{display:none}
}

.rodape{max-width:1240px;margin:0 auto;padding:26px 22px 60px;font-size:12px;color:var(--muted);border-top:1px solid var(--rule);line-height:1.55}