/* ==========================================================================
   INOVAIZE — Camada responsiva global
   Breakpoints de layout do shell (nav, hero, rodape) e ajustes gerais.
   Ajustes especificos de cada secao vivem dentro de sections.css.
   Mobile-first onde possivel; aqui usamos max-width para sobrepor o desktop.
   ========================================================================== */

/* ---------- Ate 1024px: respiro e grids do rodape ---------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* ---------- Ate 920px: nav vira menu mobile ---------- */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

/* Animacao do botao hamburguer -> X quando o menu abre */
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Ate 760px: hero e tipografia ---------- */
@media (max-width: 760px) {
  :root { --section-y: clamp(56px, 9vw, 80px); }

  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 64px; }
  .hero__trust { margin-top: var(--sp-6); }
}

/* ---------- Ate 600px: mobile ---------- */
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__cta .btn { width: 100%; }

  .btn--lg { padding: 15px 22px; }

  /* Reforco anti overflow horizontal em qualquer conteudo */
  .container { padding-inline: 20px; }
}

/* ---------- Ate 380px: telas muito pequenas ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .nav__inner { gap: var(--sp-3); }
}

/* ---------- Telas largas: mostra a flux spine (ja controlada por JS) ---------- */
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}