.layout{
display:grid;
grid-template-columns:248px minmax(0,1fr);
align-items:start;
}
.lateral{
position:sticky; top:var(--topo); align-self:start;
height:calc(100dvh - var(--topo));
overflow-y:auto; overscroll-behavior:contain;
padding:18px 12px 28px;
border-right:1px solid var(--borda);
background:color-mix(in srgb,var(--painel) 60%,transparent);
scrollbar-width:thin; scrollbar-color:var(--borda-forte) transparent;
}
.lateral::-webkit-scrollbar{width:8px}
.lateral::-webkit-scrollbar-thumb{background:var(--borda-forte); border-radius:99px}
.lateral::-webkit-scrollbar-track{background:transparent}
.grupo{margin-bottom:18px}
.grupo:last-child{margin-bottom:0}
.grupo > h3{
font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--texto-3);
margin:0 0 6px; padding:0 10px;
}
.lat-link{
position:relative; display:flex; align-items:center; gap:10px;
padding:7px 10px; border-radius:9px; color:var(--texto-2);
font-size:14.5px; line-height:1.35; font-weight:500;
transition:background .13s, color .13s, padding-left .13s;
}
.lat-link:hover{background:var(--alto); color:var(--texto); text-decoration:none; padding-left:14px}
.lat-link:focus-visible{outline:2px solid var(--ciano); outline-offset:-2px}
.lat-link .ico{
width:22px; height:22px; flex:none; display:grid; place-items:center;
font-size:14px; line-height:1; border-radius:6px;
background:color-mix(in srgb,var(--cor,var(--texto-3)) 18%,transparent);
transition:transform .16s ease;
}
.lat-link:hover .ico{transform:scale(1.12) rotate(-6deg)}
.lat-link[aria-current="page"]{
background:color-mix(in srgb,var(--ciano) 14%,transparent);
color:var(--ciano); font-weight:600;
}
.lat-link[aria-current="page"]::before{
content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
border-radius:0 3px 3px 0; background:var(--ciano);
}
.lat-link .conta{
margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--texto-3);
background:var(--alto); border-radius:5px; padding:1px 6px; flex:none;
}
.conteudo{min-width:0}
.conteudo .secao{max-width:1000px; margin:0}
.abrir-menu{display:none}
.veu{display:none}
@media (max-width:900px){
.layout{grid-template-columns:minmax(0,1fr)}
.abrir-menu{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; flex:none; border-radius:10px; cursor:pointer;
background:none; border:1px solid transparent; color:var(--texto-2);
}
.abrir-menu:hover{background:var(--alto); color:var(--texto)}
.abrir-menu:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}
.lateral{
position:fixed; top:0; left:0; z-index:70;
width:272px; height:100dvh; padding-top:16px;
background:var(--painel);
border-right:1px solid var(--borda-forte);
box-shadow:8px 0 34px -12px rgba(0,0,0,.7);
transform:translateX(-100%); transition:transform .2s ease;
}
.lateral.aberta{transform:none}
.veu{
display:block; position:fixed; inset:0; z-index:65;
background:rgba(0,0,0,.55); opacity:0; pointer-events:none;
transition:opacity .2s ease;
}
.veu.on{opacity:1; pointer-events:auto}
.conteudo .secao{max-width:none}
}
@media (min-width:901px){ .lateral[hidden]{display:block!important} }