/* ══════════════════════════════════════════════════════
   JARDINS DAS NAÇÕES — responsive.css
   ══════════════════════════════════════════════════════ */

/* ── TABLET (até 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__form-card { max-width: 540px; margin: 0 auto; }
  .hero__title { font-size: 44px; }

  /* Números */
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }
  .numeros__item:nth-child(2),
  .numeros__item:nth-child(4) { border-right: none; }
  .numeros__item:nth-child(3),
  .numeros__item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); }

  /* Sobre */
  .sobre__grid { grid-template-columns: 1fr; gap: 48px; }
  .sobre__visual { max-height: 360px; }
  .sobre__visual::before { display: none; }

  /* Diferenciais */
  .diferenciais__grid { grid-template-columns: repeat(2, 1fr); }

  /* Galeria */
  .galeria__header { flex-direction: column; align-items: flex-start; }
  .galeria__sub { text-align: left; max-width: 100%; }
  .galeria__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }
  .galeria__item--main { grid-row: auto; grid-column: 1 / 3; }

  /* Lazer */
  .lazer__grid { grid-template-columns: repeat(2, 1fr); }

  /* Quadras */
  .quadras__grid { grid-template-columns: repeat(2, 1fr); }

  /* Valorização */
  .val__grid { grid-template-columns: 1fr; gap: 48px; }

  /* Localização */
  .loc__grid { grid-template-columns: 1fr; gap: 48px; }
  .loc__mapa { aspect-ratio: 16/9; min-height: unset; max-height: 380px; }

  /* CTA */
  .cta__grid { grid-template-columns: 1fr; gap: 48px; }
  .cta__form-card { padding: 36px 28px; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__legal { text-align: left; grid-column: 1 / 3; }

}

/* ── MOBILE (até 767px) ────────────────────────────────── */
@media (max-width: 767px) {

  /* Layout base */
  .container { padding: 0 20px; }
  .section, .valorizacao, .cta { padding: 56px 0; }
  .lazer, .quadras { padding-bottom: 0; }

  /* Nav */
  .nav__inner { padding: 0 20px; }
  .nav__logo img { height: 28px; }
  .nav__cta { font-size: 10px; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; }

  /* Hero */
  .hero {
    min-height: 100vh;   /* fallback */
    min-height: 100svh;  /* modern browsers — excludes browser chrome */
    padding-top: 88px;
    padding-bottom: 48px;
    align-items: flex-start;
  }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__title { font-size: 32px; }
  .hero__subtitle { font-size: 14px; }
  .hero__badges { gap: 8px; }
  .hero__badges li { font-size: 11px; }
  .hero__btns { flex-direction: column; }
  .btn-ghost, .btn-wpp, .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .hero__form-card { padding: 28px 20px; max-width: 100%; }
  .hero__form-title { font-size: 18px; }

  /* Números */
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }
  .numeros__item { padding: 24px 16px; }
  .numeros__val { font-size: 32px; }
  .numeros__lbl { font-size: 11px; }

  /* Sobre */
  .sobre__grid { grid-template-columns: 1fr; gap: 36px; }
  .sobre__title { font-size: 26px; }
  .sobre__visual { max-height: 260px; }
  .sobre__itens li { flex-wrap: wrap; gap: 4px 16px; }
  .sobre__val { text-align: left; }

  /* Diferenciais */
  .diferenciais__grid { grid-template-columns: 1fr; }
  .diferenciais__title { font-size: 26px; }
  .dif-card { padding: 32px 24px; }

  /* Galeria */
  .galeria { padding: 56px 0; }
  .galeria__header { padding: 0 20px 36px; flex-direction: column; align-items: flex-start; }
  .galeria__title { font-size: 26px; }
  .galeria__grid { padding: 0 20px; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 150px 150px; gap: 3px; }
  .galeria__item--main { grid-row: auto; grid-column: 1 / 3; }
  .galeria__lb-stage { padding: 56px 48px 16px; }
  .galeria__lb-prev, .galeria__lb-next { padding: 12px 16px; }
  .galeria__lb-thumb { flex: 0 0 52px; height: 36px; }

  /* Lazer */
  .lazer__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lazer__title { font-size: 26px; }
  .lazer__item { padding: 24px 12px; }
  .lazer__visual { margin-top: 40px; }

  /* Quadras */
  .quadras__grid { grid-template-columns: 1fr; }
  .quadras__title { font-size: 26px; }
  .quadras__cta { padding: 0 0 48px; }

  /* Valorização */
  .val__grid { grid-template-columns: 1fr; gap: 40px; }
  .val__title { font-size: 28px; }
  .val__cards { grid-template-columns: 1fr 1fr; }
  .val__card-num { font-size: 28px; }
  .val__timeline-box { padding: 28px 20px; }
  .val__value { font-size: 14px; }
  .val__timeline li { gap: 12px; }
  .val__year { width: 30px; }

  /* Localização */
  .loc__grid { grid-template-columns: 1fr; gap: 36px; }
  .loc__title { font-size: 26px; }
  .loc__mapa { aspect-ratio: 4/3; min-height: unset; max-height: unset; }

  /* CTA */
  .cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .cta__title { font-size: 28px; }
  .cta__form-card { padding: 32px 20px; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
  .footer__legal { text-align: left; grid-column: auto; }
  .footer__right { align-items: flex-start; }

  /* WhatsApp flutuante */
  .wpp-float {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    width: 50px;
    height: 50px;
  }
  .wpp-float svg { width: 24px; height: 24px; }

}

/* ── MOBILE PEQUENO (até 400px) ────────────────────────── */
@media (max-width: 400px) {

  .hero__title { font-size: 26px; }
  .hero__subtitle { font-size: 13px; }
  .numeros__val { font-size: 26px; }
  .lazer__grid { grid-template-columns: 1fr; }
  .lazer__title { font-size: 22px; }
  .sobre__title { font-size: 22px; }
  .diferenciais__title { font-size: 22px; }
  .galeria__title { font-size: 22px; }
  .quadras__title { font-size: 22px; }
  .val__title { font-size: 24px; }
  .loc__title { font-size: 22px; }
  .val__cards { grid-template-columns: 1fr; }
  .cta__title { font-size: 24px; }
  .cta__form-card { padding: 24px 16px; }
  .nav__logo img { height: 24px; }

}