/* ============================================================
   RESPONSIVE.CSS — Breakpoints e adaptações mobile/tablet
   ------------------------------------------------------------
   Mantemos todos os media queries em UM ÚNICO arquivo, no
   final da cascata, para que sempre vençam as regras dos
   arquivos anteriores. Breakpoints:
     - 1100px : tablets (ajusta apenas a grade de produtos)
     - 900px  : tablets pequenos / mobile (reorganização ampla)
     - 540px  : smartphones em retrato
   ============================================================ */


/* ------------------------------------------------------------
   1100px — em tablets, a loja passa de 4 para 3 colunas.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ------------------------------------------------------------
   900px — reorganização ampla para mobile/tablet pequeno.
   - Nav reduz padding e esconde links centrais
   - Seções perdem o padding lateral generoso
   - Hero esconde o visual do drone à direita
   - Grades viram 1 ou 2 colunas conforme o caso
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* NAV mais compacto, logo menor, links escondidos */
  nav            { padding: 12px 22px; }
  .logo-wrap img { height: 42px; }
  .nav-links     { display: none; }

  /* Padding geral reduzido nas seções */
  section            { padding: 80px 22px; }
  .showreel-section  { padding: 0 22px 80px; }

  /* Hero: o drone à direita some, textos colam à esquerda */
  .hero-left   { padding: 0 22px; }
  .hero-right  { display: none; }
  .hero-stats  { bottom: 88px; right: 22px; }

  /* Grades — quase tudo vira 1 coluna */
  .svc-grid    { grid-template-columns: 1fr; }
  .port-grid   { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pi          { grid-column: span 1 !important; height: 200px; }
  .about-inner { grid-template-columns: 1fr; }
  .about-vis   { height: 280px; }
  .proc-steps  { grid-template-columns: 1fr 1fr; }
  .testi-grid  { grid-template-columns: 1fr; }

  /* Footer fica em 2 colunas e abas da loja empilham */
  footer       { grid-template-columns: 1fr 1fr; gap: 36px; }
  .market-tabs { flex-direction: column; }

  /* Loja em 2 colunas */
  .prod-grid   { grid-template-columns: repeat(2, 1fr); }
}


/* ------------------------------------------------------------
   540px — smartphones em retrato.
   ------------------------------------------------------------ */
@media (max-width: 540px) {
  .prod-grid  { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 20px; }
}