*{box-sizing:border-box}
html,body{height:100%}
html { font-size: 11px; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--s-16);
}

.topo{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topo-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-12);
  padding: var(--s-12) var(--s-16);
  max-width:var(--container);
  margin:0 auto;
  flex-wrap: wrap;
}
.logo{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.logo strong{font-size:var(--fs-16)}
.logo span{font-size:var(--fs-12); color:var(--muted)}
.nav{
  display:flex;
  gap: var(--s-12);
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  font-size:var(--fs-14);
  color:var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
}
.nav a.ativo{color:var(--text); background:#f3f4f6}
main{padding-bottom: 90px}

@media (max-width: 520px){
  .topo-inner{padding: 10px 12px}
  .logo{width:100%}
  .nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap: nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex: 0 0 auto; padding: 8px 10px}
}

@media (max-width: 520px){
  :root{
    --fs-12: 11px;
    --fs-14: 12px;
    --fs-16: 13px;
    --fs-18: 15px;
    --fs-20: 16px;
    --fs-24: 18px;
    --fs-28: 20px;
    --fs-32: 22px;
  }
}