/* ============================================================
   BREAKPOINTS RESPONSIVOS — ajustes globais e de layout
   Ajustes específicos de cada seção estão nos próprios arquivos CSS.
   ============================================================ */

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --text-hero: 48px;
    --text-4xl:  40px;
    --text-3xl:  32px;
    --text-2xl:  26px;
  }

  .container {
    padding: 0 var(--spacing-xl);
  }

  .section-title {
    font-size: var(--text-2xl);
  }
}

/* ── Mobile (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-hero: 36px;
    --text-4xl:  32px;
    --text-3xl:  26px;
    --text-2xl:  22px;
    --text-xl:   20px;
    --spacing-2xl: 60px;
    --spacing-xl:  40px;
  }

  .container {
    padding: 0 var(--padding-mobile);
  }

  .section-header {
    margin-bottom: var(--spacing-xl);
  }

  .btn {
    font-size: var(--text-sm);
    padding: 13px 24px;
  }
}

/* ── Mobile pequeno (≤ 375px) ───────────────────────────── */
@media (max-width: 375px) {
  :root {
    --text-hero: 30px;
    --text-3xl:  22px;
    --text-2xl:  20px;
    --padding-mobile: 20px;
  }
}