/* ==========================================================================
   19. RESPONSIVIDADE
   ========================================================================== */

/* --- A partir de 720px: layout deixa de ser mobile-first ---------------- */
@media (min-width: 720px) {
  :root {
    --container: min(1400px, calc(100vw - 6rem));
  }

  .nav-shell {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
  }

  .site-nav a {
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    letter-spacing: 0.12em;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: transparent;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 3.5rem;
  }

  .section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }

  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }

  .hero-footer {
    padding-inline: 2rem;
    font-size: 0.83rem;
    letter-spacing: 0.32em;
  }

  .hero-footer span:nth-child(2) {
    display: inline;
  }

  .trip-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: start;
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split-layout {
    grid-template-columns: minmax(19rem, 1fr) minmax(0, 1fr);
    gap: 4.8rem;
  }

  .universe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .map-shell {
    --map-height: 28rem;
  }

  .faq-layout {
    grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
    gap: 4.3rem;
  }

  .footer-grid {
    grid-template-columns: 2.4fr 1fr 1fr;
  }
}

/* --- A partir de 980px --------------------------------------------------- */
@media (min-width: 980px) {
  h1 {
    font-size: 3.5rem;
  }

  .universe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-content {
    padding-top: 8rem;
    padding-bottom: 6.9rem;
  }

  .quote-card blockquote {
    font-size: 1.05rem;
  }

  .map-shell {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: stretch;
    height: var(--map-height);
  }

  .map-sidebar-list {
    max-height: none;
  }
}

/* --- A partir de 1200px --------------------------------------------------- */
@media (min-width: 1200px) {
  h1 {
    font-size: 4.2rem;
  }

  .quote-card {
    padding: 2rem;
  }

  .quote-card blockquote {
    max-width: 100%;
  }
}

/* --- Movimento reduzido (acessibilidade) ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee-track,
  .status-pill span,
  body.js .reveal,
  body.js .reveal.is-visible {
    animation: none !important;
    transition: none !important;
  }

  .floating-wa-ping {
    display: none;
  }

  body.js .reveal {
    opacity: 1;
    transform: none;
  }
}