/* ==== Tablet: 901px - 1023px ====
   Above the single mobile breakpoint (900px) the site behaves like desktop:
   full inline nav, no drawer, two-column grids. This file only tightens
   spacing so the two-column sections don't feel cramped at this width. */
@media (min-width: 901px) and (max-width: 1023px) {
  header nav { display: flex; }
  header .kb-cta { display: inline-block; }
  #kb-hamburger { display: none; }

  .kb-problemas-grid,
  .kb-compromisso-inner,
  .kb-contato-inner {
    gap: 40px;
  }
  .kb-case { grid-template-columns: minmax(0, 1fr); }

  /* KPI tiles: 2x2 here too, same as mobile — the 4-across row is desktop-only. */
  .kb-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Short viewport in this width range too (small tablet/laptop landscape). */
@media (min-width: 901px) and (max-width: 1023px) and (max-height: 700px) {
  #topo { padding: 40px var(--space-section-x) 32px; }
  .kb-tag { margin-bottom: 20px; }
  #topo h1 { font-size: clamp(32px, 5.5vw, 60px); margin-bottom: 16px; }
  .kb-lede { font-size: 16px; margin-bottom: 20px; }
  .kb-hero-actions { margin-bottom: 28px; }
  .kb-stat { padding: 16px 18px; }
  .kb-stat-value { font-size: 32px; }
}