/* ==========================================================================
   RESPONSIVE.CSS - Breakpoints inteligentes RESPONSERV
   4 faixas: mobile, phablet/tablet, laptop, desktop amplo
   ========================================================================== */

@media (max-width: 768px) {
  .hamburger { display: inline-flex; }

  .nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-5);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-backdrop);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    transform: translateX(110%);
  }

  .nav.active { transform: translateX(0); }
  .nav-list,
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: var(--space-3);
    --grid-min: 100%;
    --grid-min-sm: 100%;
    --grid-min-lg: 100%;
  }

  .container { padding-inline: var(--container-padding); }
  .section-header { margin-bottom: var(--space-5); }
  .section-header h2 { font-size: var(--fs-2xl); }

  .header .container { gap: var(--space-3); }
  .logo img { max-width: 148px; }

  .nav {
    inset: var(--header-height) 0 0 auto;
    width: min(100%, 360px);
    height: calc(100dvh - var(--header-height));
    padding: var(--space-6) var(--space-4);
  }

  .nav-list,
  .nav-actions,
  .search-wrapper,
  .search-input.active,
  .nav-actions .btn { width: 100%; }

  .nav-list { gap: var(--space-2); }
  .nav-link {
    width: 100%;
    justify-content: center;
    padding-block: var(--space-3);
    font-size: var(--fs-md);
  }

  .hero {
    padding-top: calc(var(--header-height) + var(--space-7));
    text-align: center;
  }

  .hero .container,
  .highlights-grid,
  .about-intro-grid,
  .service-detail-item,
  .contact-layout,
  .blog-grid,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .hero-content {
    align-items: center;
    max-width: 100%;
  }

  .hero-content h1 { font-size: var(--fs-4xl); }
  .hero-cta, .cta-form { flex-direction: column; width: 100%; }
  .hero-cta .btn, .cta-form .btn { width: 100%; }

  .hero-visual { min-height: 340px; height: auto; }
  .hero-main-card { width: min(100%, 310px); height: 350px; }
  .hero-float-card-1,
  .hero-float-card-2 { display: none; }

  .services-filter-header,
  .blog-filter-header {
    align-items: stretch;
    text-align: center;
  }

  .services-tabs {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .tab-btn { width: 100%; }
  .blog-item { grid-template-columns: 1fr; }
  .blog-item-thumb { width: 100%; height: 190px; }
  .highlights-media, .values-grid, .solutions-grid { grid-template-columns: 1fr; }
  .media-card, .about-intro-visual, .service-detail-visual { min-height: 250px; height: auto; aspect-ratio: 4 / 3; }
  .service-detail-benefits, .form-group-row { grid-template-columns: 1fr; }

  .contact-form-panel,
  .testimonial-card,
  .value-card,
  .solution-card-body,
  .solution-card-header,
  .blog-featured-info { padding: var(--space-4); }

  .footer-top,
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand,
  .footer-socials,
  .footer-bottom { align-items: center; justify-content: center; }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --container-padding: var(--space-4);
    --grid-min: 240px;
    --grid-min-sm: 220px;
    --grid-min-lg: 280px;
  }

  .nav {
    inset: var(--header-height) 0 0 auto;
    width: min(88vw, 420px);
    height: calc(100dvh - var(--header-height));
  }

  .nav-list,
  .nav-actions { width: 100%; }

  .hero .container,
  .highlights-grid,
  .about-intro-grid,
  .service-detail-item,
  .contact-layout,
  .blog-grid,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .hero-content {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  .hero-cta { justify-content: center; }
  .hero-visual { max-width: 520px; margin-inline: auto; }
  .highlights-media, .values-grid, .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-detail-benefits, .form-group-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-item { grid-template-columns: 140px 1fr; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root {
    --container-padding: var(--space-5);
    --grid-min: 280px;
    --grid-min-sm: 240px;
    --grid-min-lg: 300px;
  }

  .hamburger { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-height) 0 0 auto;
    width: min(420px, 70vw);
    height: calc(100dvh - var(--header-height));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-7) var(--space-5);
    transform: translateX(110%);
  }

  .nav.active { transform: translateX(0); }
  .nav-list, .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-link { display: flex; padding-block: var(--space-3); }
  .search-wrapper, .search-input.active, .nav-actions .btn { width: 100%; }

  .hero .container,
  .highlights-grid,
  .contact-layout { grid-template-columns: 1fr; }

  .hero-content {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  .hero-cta { justify-content: center; }
  .hero-visual { max-width: 560px; margin-inline: auto; }
  .values-grid, .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.2fr repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hamburger { display: none; }
  .nav {
    position: static;
    height: auto;
    width: auto;
    transform: none;
    flex-direction: row;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  .services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .values-grid, .solutions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr); }
}

@media (min-width: 1280px) {
  .container { max-width: var(--container-wide); }
  .hero .container { grid-template-columns: minmax(0, 0.95fr) minmax(480px, 1.05fr); }
  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--header-height) + var(--space-4)); }
  .hero .container { min-height: auto; }
  .hero-visual { height: 320px; }
  .nav { padding-block: var(--space-4); }
}