/* ==========================================================
   responsive.css — Breakpoints
   Desktop -> Notebook -> Tablet -> Smartphone
   ========================================================== */

/* Notebook (<= 1280px) */
@media (max-width: 1280px) {
  :root { --sp-7: 5.5rem; --fs-3xl: 4rem; }
}

/* Tablet (<= 960px) */
@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .section { padding: var(--sp-6) 0; }
}

/* Mobile (<= 720px) — menu hambúrguer */
@media (max-width: 720px) {
  .hamburger { display: flex; }

  /* Remove backdrop-filter no mobile para que o .nav (position:fixed)
     escape do containing block do header e cubra a viewport inteira. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }

  .nav {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
    transition: transform var(--t-med), opacity var(--t-med), visibility 0s linear var(--t-med);
    z-index: 90;
    padding: var(--sp-6) var(--sp-3) var(--sp-3);
  }
  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: transform var(--t-med), opacity var(--t-med), visibility 0s;
  }
  .nav__list { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .nav__link { font-size: 1.5rem; font-weight: 600; color: var(--text); }

  .hero__title { font-size: clamp(2rem, 9vw, 3rem); }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--sp-1); text-align: center; }

  .btn--press { font-size: 0.7rem; padding: 14px 22px; }
}

/* Small phone (<= 380px) */
@media (max-width: 380px) {
  .container { padding: 0 var(--sp-2); }
  .hero__eyebrow { font-size: 0.65rem; }
}