/* =========================================================
   Responsivo — 1920 / 1440 / 1024 / 768 / 390 / 320
   ========================================================= */

@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .hero { padding-top: calc(var(--header-h) + 80px); }
}

@media (max-width: 1280px) {
  .main-nav { gap: 20px; }
  .nav-link { padding: 10px 10px; }
  .nav-link::after { left: 10px; right: 10px; }
  .service-grid { gap: 12px; }
  .feature-list li { padding: 4px 10px; gap: 10px; }
}

@media (max-width: 1180px) {
  .nav-actions .btn-outline { display: none; }
  .features-bar { flex-direction: column; align-items: stretch; gap: 18px; }
  .features-title { max-width: none; }
  .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ----- Menu mobile (tablet e celular) ----- */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .site-header { background: rgba(3, 11, 27, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(0, 140, 255, 0.18); }
  .brand img { width: 168px; }

  .menu-toggle {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px;
    background: rgba(0, 140, 255, 0.08); border: 1px solid var(--border-strong); color: var(--text); cursor: pointer;
  }
  .menu-toggle .icon { width: 24px; height: 24px; }
  .menu-toggle .icon-close { display: none; }
  .nav-open .menu-toggle .icon-open { display: none; }
  .nav-open .menu-toggle .icon-close { display: block; }

  .main-nav {
    /* o header usa backdrop-filter, que vira referência do position:fixed; por isso a altura é explícita */
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
    padding: 24px 24px 40px; overflow-y: auto;
    background: rgba(3, 11, 27, 0.98);
    border-top: 1px solid var(--border);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav-open .main-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-link { padding: 16px 8px; font-size: 1.15rem; border-bottom: 1px solid rgba(0, 140, 255, 0.12); }
  .nav-link::after { left: 8px; right: auto; width: 32px; bottom: -1px; }
  .nav-actions { flex-direction: column; gap: 12px; }
  .nav-actions .btn, .nav-actions .btn-outline { display: inline-flex; min-height: 52px; font-size: 1rem; }

  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-card { flex-direction: row; }
  .project-track { grid-auto-columns: calc((100% - 24px) / 2); }
  .track-btn.prev { left: -8px; } .track-btn.next { right: -8px; }
}

/* ----- Tablet (768) ----- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { text-align: left; }
  .hero-visual { width: min(100%, 620px); margin-inline: auto; }

  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:last-child { grid-column: 1 / -1; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-visual { order: 2; }

  .section-head { flex-direction: column; align-items: flex-start; }

  .cta-box { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 36px 28px; gap: 20px; }
  .cta-icon { padding: 0 0 18px; border-right: 0; border-bottom: 2px solid rgba(0, 184, 255, 0.5); }
  .cta-copy p { margin-inline: auto; }
  .cta-actions { justify-content: center; }
  .cta-waves { -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 90%); mask-image: linear-gradient(180deg, transparent 10%, #000 90%); }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- Celular (390) ----- */
@media (max-width: 600px) {
  .container { width: min(100% - 32px, var(--container)); }
  .eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .hero-lead { font-size: 1rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .float-chip { font-size: 0.7rem; padding: 7px 10px; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card { padding: 20px 18px 26px; }

  .features-bar { padding: 20px 18px; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-list li { padding: 4px 8px 4px 12px; font-size: 0.84rem; }
  .feature-list .icon { width: 26px; height: 26px; }

  .about-visual { min-height: 0; padding: 18px 18px 92px; }
  .about-window { width: 100%; }
  .code-block { font-size: 0.78rem; padding: 14px; }
  .about-badge { left: 18px; right: auto; bottom: 18px; padding: 12px 14px; }
  .about-badge img { width: 150px; }

  .project-track { grid-auto-columns: 86%; gap: 16px; }
  .track-btn { display: none; }

  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }

  .quote-form { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ----- Celular compacto (320) ----- */
@media (max-width: 360px) {
  .container { width: min(100% - 24px, var(--container)); }
  .brand img { width: 148px; }
  .btn-lg { padding: 0 18px; font-size: 0.95rem; }
  .feature-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-chip { display: none; }
}