/* ==========================================================================
   MEGA MAIS ZAP — RESPONSIVE STYLESHEET
   Breakpoints: 1366px, 1024px, 768px, 480px, 360px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop & Laptop Tweaks (<= 1366px)
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  :root {
    --container-max: 1140px;
  }

  .mockup-app {
    height: 420px;
  }
}

/* --------------------------------------------------------------------------
   Tablet Landscape & Small Laptops (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .hero-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-trust-bullets {
    justify-content: center;
  }

  .nav-menu,
  .header-actions .btn-login {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

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

  .solution-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .steps-grid::before {
    display: none;
  }

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

  .reports-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card.popular {
    transform: none;
  }

  .pricing-card.popular:hover {
    transform: translateY(-4px);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .trial-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   Tablet Portrait & Large Mobile (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }

  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .hero-headline {
    font-size: 2.15rem;
  }

  .hero-subheadline {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .problem-solution-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .segments-grid {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .mockup-app {
    grid-template-columns: 1fr;
    height: auto;
  }

  .app-sidebar,
  .app-queue-column {
    display: none;
  }

  .floating-badge {
    position: static;
    margin: 12px 0 0 0;
    box-shadow: var(--shadow-sm);
    justify-content: center;
  }

  .floating-badge.badge-top-left,
  .floating-badge.badge-bottom-right {
    display: none;
  }

  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 580px;
  }

  .trial-card-wrapper {
    padding: 36px 20px;
  }

  .trial-form-box {
    padding: 24px 18px;
  }

  .final-cta-card {
    padding: 48px 20px;
  }

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

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .whatsapp-float-widget {
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-float-btn {
    width: 52px;
    height: 52px;
  }

  .whatsapp-float-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile Devices (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-headline {
    font-size: 1.85rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: 0.975rem;
  }

  .final-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .final-cta-buttons .btn {
    width: 100%;
  }

  .modal-dialog {
    max-width: 95vw;
  }

  .modal-header,
  .modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --------------------------------------------------------------------------
   Extra Small Devices (<= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-headline {
    font-size: 1.65rem;
  }

  .section-tag {
    font-size: 0.75rem;
  }

  .pricing-card {
    padding: 28px 18px;
  }

  .price-val {
    font-size: 2.5rem;
  }
}