.hide{display:none!important}

/* ---------- ultrawide: não deixa a leitura esticar sem limite ---------- */
@media(min-width:2000px){ .wrap{--maxw:1900px} }

/* ---------- notebook: o painel do wizard sai antes de espremer o conteúdo ---------- */
@media(max-width:1400px){
  .colside{display:none}
  .kpis.k4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- telas médias: kanban rola na horizontal em vez de espremer ---------- */
@media(max-width:1180px){
  .crumb{display:none}                      /* o título já diz onde estamos */
  .side{width:204px}
  .wrap{padding:22px 20px 48px}
  .kb{display:flex;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}
  .kb .kcol{flex:1 0 300px;scroll-snap-align:start}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .kpi .v{font-size:22px}
}

/* ---------- tablet: sidebar vira menu deslizante ---------- */
@media(max-width:980px){
  .side{position:fixed;top:0;left:0;bottom:0;height:auto;z-index:50;width:250px;transform:translateX(-100%);
        transition:transform .22s cubic-bezier(.3,.8,.4,1);background:var(--pop);border-right:1px solid var(--line2)}
  .side.open{transform:none;box-shadow:0 0 60px var(--sh2)}
  .menubtn{display:flex}
  .top{padding:12px 16px;gap:10px}
  .top .iconbtn{display:none}               /* busca e sino cedem espaço para a ação da tela */
  .topacts .btn:not(.pri){display:none}     /* só a ação principal sobrevive */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:1fr 1fr}
}

/* ---------- celular ---------- */
@media(max-width:720px){
  .wrap{padding:18px 14px 44px}
  .top h1{font-size:15px}
  .topacts .btn{padding:8px 12px;font-size:12.5px}
  .grid,.grid3,.routes,.nexts,.vars,.imp-b,.det{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .kb .kcol,.kb6 .kcol{flex:1 0 84vw}
  .hero h2{font-size:23px}
  .fbar{gap:6px}
  .fbar input,.fbar select,.fbar .fbtn{font-size:12px}
  .mdl{padding:18px}
  .steps .step{min-width:112px}
  table{font-size:12px}
}