/* ════════════════════════════════════════════════════════════════
   responsive.css — Todos os @media queries
   
   ESTRATÉGIA: Mobile-First
   → CSS base (sem @media) = celular pequeno
   → Aqui AMPLIAMOS para telas maiores
   
   BREAKPOINTS:
   480px  → celulares grandes
   768px  → tablets / desktop pequeno
   1024px → laptops
   1280px → desktops grandes
   ════════════════════════════════════════════════════════════════ */

/* ─── 480px ── celulares grandes ─────────────────────────────── */
@media (min-width: 480px) {
  /* Galeria: 3 colunas */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Plataformas: 2 colunas */
  .plat-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── 768px ── tablets ───────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --nav-h:    72px;
    --footer-h: 80px;
  }

  /* NAV: mostra links desktop + botão MENU, esconde hamburguer */
  .nav-links        { display: flex; }
  .btn-menu-desktop { display: inline-flex; }
  .hamburger        { display: none; }

  /* HERO: alinha à esquerda no tablet+ */
  .hero { text-align: left; }
  .hero-content { max-width: 640px; margin-inline: 0; text-align: left; }
  .hero-btns { justify-content: flex-start; }
  .scroll-hint { align-items: flex-start; }

  /* GALERIA: 4 colunas */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  /* PLATAFORMAS: 2 colunas, full-width */
  .plat-grid { grid-template-columns: 1fr 1fr; max-width: var(--mx); }

  /* FOOTER TEXTUAL: linha horizontal */
  .site-footer-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; }

  /* FOOTER FIXO: ícones maiores */
  .footer-icon { width: 42px; height: 42px; border-radius: 12px; }
  .footer-btn  { max-width: 100px; font-size: 11px; }
}

/* ─── 1024px ── laptops ──────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --nav-h: 76px; }

  /* GALERIA: 5 colunas */
  .gallery-grid { grid-template-columns: repeat(5, 1fr); }

  /* PLATAFORMAS: 3 colunas */
  .plat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 1280px ── desktops grandes ────────────────────────────── */
@media (min-width: 1280px) {
  .hero-content { max-width: 760px; }
}

/* ─── Movimento reduzido (acessibilidade) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .fire-text,
  .hero-title .accent { animation: none !important; background-position: 0% 50% !important; }
  .ember, .nav-logo-photo::before, .wa-float::before { animation: none !important; }
}