/* ==========================================================================
   SKYTORM — responsividade
   O layout é reorganizado por faixa, não apenas reduzido.
   ========================================================================== */

/* --- Notebook / tablet largo --- */
@media (max-width: 1080px) {
  .site-nav { gap: 1.5rem; }
  .site-nav ul { gap: 1.4rem; }

  .col-heading { grid-column: 1 / span 6; }
  .col-body { grid-column: 7 / span 6; }

  .offer-text,
  .offer-reverse .offer-text { grid-column: 1 / span 6; }
  .offer-media,
  .offer-reverse .offer-media { grid-column: 7 / span 6; grid-row: auto; }

  .hero-graphic { width: 40%; opacity: 0.6; }
}

/* --- Tablet: colunas empilham, ordem editorial preservada --- */
@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--c-profundo);
    border-bottom: 1px solid var(--c-linha);
    padding: 6.5rem var(--gutter) 2.5rem;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0.4s;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; }
  .site-nav ul { flex-direction: column; width: 100%; gap: 0; }
  .site-nav ul li { border-top: 1px solid var(--c-linha); }
  .site-nav ul a {
    display: block;
    padding: 1.1rem 0;
    font-size: var(--step-1);
    border-bottom: 0;
  }
  .site-nav ul a.is-active { color: var(--c-laranja); }
  .nav-cta { margin-top: 2rem; align-self: stretch; text-align: center; }

  .nav-toggle { display: inline-flex; }

  .grid,
  .offer { grid-template-columns: 1fr; }
  .col-heading,
  .col-body,
  .offer-text,
  .offer-media,
  .offer-reverse .offer-text,
  .offer-reverse .offer-media { grid-column: 1 / -1; }

  .col-heading { margin-bottom: 1.5rem; }
  .offer-media { margin-top: 2rem; }
  .offer-reverse .offer-media { grid-row: auto; }

  .contact-data { grid-template-columns: repeat(2, 1fr); }

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

/* --- Smartphone --- */
@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
  .hero-graphic {
    inset: auto -30% -4% auto;
    width: 78%;
    height: 42%;
    opacity: 0.35;
  }
  .hero-lead { font-size: var(--step-0); }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  .hero-foot { margin-top: 3rem; }

  .gaps-list li { grid-template-columns: 1fr; gap: 0.35rem; }
  .traits > div { grid-template-columns: 1fr; gap: 0.4rem; }

  .contact-data { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-actions { gap: 0.75rem; }
  .contact-actions .btn { flex: 1 1 100%; text-align: center; }

  .footer-brand { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}