/* ═══════════════════════════════════════════════════════════
   FMV Engenharia — responsive.css
   Breakpoints: 1100px · 768px · 600px · 480px · 375px
═══════════════════════════════════════════════════════════ */

/* ── Tablet largo (≤ 1100px) ── */
@media (max-width: 1100px) {
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .detail-grid.reverse { direction: ltr; }
  .sobre-grid   { gap: 4rem; }
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* Nav */
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

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

/* ── Tablet médio (≤ 768px) ── */
@media (max-width: 768px) {
  /* Scroll padding — navbar menor em tablet */
  html { scroll-padding-top: 70px; }

  /* Grids */
  .sobre-grid,
  .porq-grid,
  .contato-grid { grid-template-columns: 1fr; gap: 3rem; }

  /* Sobre visual */
  .sobre-img-accent { display: none; }
  .sobre-badge      { left: 0; }

  /* Hero stats — 2 colunas em tablet */
  .hero-stats .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }

  /* Pillars */
  .sobre-pillars { grid-template-columns: 1fr 1fr; }

  /* Por que visual */
  .porq-visual { grid-template-columns: 1fr 1fr; }
  .porq-stat:first-child { grid-column: 1 / -1; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top    { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }

  /* Section padding reduzido */
  .section-pad { padding: 5rem 0; }

  /* Service Pages */
  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-detail-hero { margin-bottom: 3rem; }
  .cta-box { padding: 3rem 1.5rem; }
  .cta-box h3 { font-size: 1.6rem; }

  /* Parceiros */
  .parceiros-grid { gap: 1.5rem 2rem; }

  /* Serviços grid em tablet */
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
  html { scroll-padding-top: 65px; }

  /* Serviços: 1 coluna */
  .servicos-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero-actions  { flex-direction: column; align-items: stretch; }
  .btn           { justify-content: center; text-align: center; }

  /* Hero stats — 2 colunas em mobile */
  .hero-stats .container {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
  }

  .stat-number   { font-size: 2rem; }
  .hero-stats    { padding-bottom: 2rem; }

  /* Sobre pillars: 1 coluna */
  .sobre-pillars { grid-template-columns: 1fr; }

  /* Formulário */
  .contato-form  { padding: 1.5rem; }

  /* Container padding */
  .container { padding: 0 1.25rem; }

  /* FAQ */
  .faq-grid { gap: 1.5rem; }

  /* Por que visual */
  .porq-visual { grid-template-columns: 1fr; }

  /* Parceiros em mobile */
  .parceiros-grid { gap: 1rem 1.5rem; }
  .parceiro-item  { font-size: 1.1rem; }

  /* Footer */
  .footer-top { gap: 2rem; }
}

/* ── Mobile pequeno (≤ 480px) ── */
@media (max-width: 480px) {
  html { scroll-padding-top: 60px; }

  /* Tipografia ajustada */
  h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  /* Hero stats: 2x2 garantido */
  .hero-stats .container {
    grid-template-columns: 1fr 1fr;
  }

  /* Serviço card padding */
  .servico-card { padding: 2rem 1.5rem; }

  /* Contato info */
  .contato-info p { font-size: 0.95rem; }

  /* Formulário select/input */
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 1rem; } /* evita zoom automático no iOS */

  /* CTA box */
  .cta-box { padding: 2.5rem 1.25rem; }
  .cta-box p { font-size: 1rem; }
}

/* ── Mobile extra pequeno (≤ 375px) ── */
@media (max-width: 375px) {
  .container { padding: 0 1rem; }

  .btn { padding: 0.8rem 1.5rem; font-size: 0.85rem; }

  .nav-cta { padding: 0.45rem 1rem; }

  /* Hero content mais compacto */
  .hero-content { padding-top: 4rem; }
}

/* ── Preferência por menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

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

  .fade-up {
    opacity: 1;
    animation: none;
  }
}

/* ── Modo escuro do sistema (opcional, respeitando preferência) ── */
@media (prefers-color-scheme: dark) {
  /* O site tem paleta própria — não alterar cores automaticamente */
}