/* ================================================
   responsive.css – Media queries (tablet e mobile)
   ================================================ */

/* ── Tablet (≤ 1024px) ──────────────────────── */
@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* ── Mobile (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {

  /* Hambúrguer */
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--color-off-white);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-6);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    z-index: 190;
  }
  .nav-links.open    { transform: translateX(0); }
  .nav-links a       { font-size: var(--text-base); padding: var(--space-2) 0; }

  /* Hero */
  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: var(--space-12);
  }
  .hero__desc    { margin-inline: auto; }
  .hero__buttons { justify-content: center; }
  .hero__badges  { justify-content: center; }
  .hero__visual  { display: none; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner  { flex-direction: column; text-align: center; }
  .footer-links  { justify-content: center; }

  /* WhatsApp float – só ícone no mobile */
  .whatsapp-float__label { display: none; }
  .whatsapp-float {
    padding: 14px;
    border-radius: var(--radius-full);
    bottom: 20px;
    right: 20px;
  }
}

/* ── Small mobile (≤ 480px) ─────────────────── */
@media (max-width: 480px) {
  .hero__title { font-size: 2rem; }

  .services__grid,
  .team__grid,
  .testimonials__grid { grid-template-columns: 1fr; }

  .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__buttons { flex-direction: column; align-items: center; }

  .hero__badges { flex-direction: column; align-items: center; }

  .contact__social { flex-direction: column; }
  .contact__social .btn { width: 100%; justify-content: center; }
}