/*
 * Design responsivo — equivalente ao padrão MUI sx + breakpoints.
 * Use media queries com estes valores; prefira clamp() para tamanhos fluidos.
 *
 * Breakpoint | min-width | Uso típico
 * -----------|-----------|------------
 * xs         | 0–767     | celular
 * sm         | 768–1023  | tablet
 * md         | 1024–1279 | notebook
 * lg         | 1280–1535 | desktop
 * xl         | 1536+     | monitor grande (tamanhos originais)
 *
 * Tipografia do site: assets/typography-responsive.css
 */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --content-max: 80rem;
}

/* Container fluido — max-width sobe conforme a tela */
.site-container-fluid {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 3rem);
}