/* =========================================================
   RESPONSIVIDADE — Nexus
   Referência mobile: iPhone 12 Pro (390 x 844 CSS px)
   Breakpoints:
   - até 390px  → celulares pequenos (referência iPhone 12 Pro)
   - 391–767px  → celulares grandes
   - 768–1023px → tablets (iPad)
   - 1024–1439px→ notebooks / telas menores
   - 1440px+    → desktops grandes
   ========================================================= */

img { max-width: 100%; height: auto; }

/* =========================================================
   TABLETS (768px – 1023px) — ex: iPad
   ========================================================= */
@media (max-width: 1023px) {
  .container { padding: 0 20px; }

  .botao-superior { margin-bottom: 24px; text-align: center; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-text h1 { font-size: 2.6rem; }
  .hero-text p { margin-left: auto; margin-right: auto; }
  .hero-text .btn_se { margin-left: 8px; }
  .hero-image { max-width: 480px; margin: 0 auto; }

  .proposta-inner,
  .atendimento-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .atendimento-image img { width: 100%; height: auto; }
  .atendimento-text ul { text-align: left; max-width: 480px; margin: 0 auto; }

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

  .etapas { grid-template-columns: repeat(3, 1fr); gap: 24px; }

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

  .clientes-slide { width: 180px; height: 180px; }
}

/* =========================================================
   CELULARES GRANDES (até 767px)
   ========================================================= */
@media (max-width: 767px) {
  .container { padding: 0 16px; }

  .botao-superior { margin-bottom: 20px; text-align: center; }

  .hero { padding: 40px 0 32px; }
  .hero-text h1 { font-size: 2.1rem; margin-bottom: 16px; }
  .hero-text p { font-size: 1rem; margin-bottom: 24px; }
  .hero-text .btn { width: 100%; justify-content: center; margin: 0 0 12px; }
  .hero-text .btn_se { margin-left: 0; }
  .hero-text { display: flex; flex-direction: column; }

  .proposta { padding: 64px 0; }
  .proposta-text h2 { font-size: 1.7rem; }

  .servicos, .diferenciais { padding: 64px 0; }
  .diferenciais h2, .servicos h2, .metodologia h2, .problema h2, .casos h2 {
    font-size: 1.6rem;
    margin-bottom: 32px;
  }
  .cards-grid,
  .servicos-grid,
  .etapas,
  .casos-grid,
  .problema-grid { grid-template-columns: 1fr; }

  .metodologia, .atendimento, .problema, .casos, .cta-final { padding: 56px 0; }

  .atendimento-text h2 { font-size: 1.7rem; }

  .clientes-slide { width: 140px; height: 140px; }
  .clientes-track { gap: 18px; }
  .clientes-label { font-size: 24px; margin-top: 56px; }
  .texto_card { font-size: 26px; }

  .cta-final h2 { font-size: 1.7rem; }
}

/* =========================================================
   CELULARES PEQUENOS — referência iPhone 12 Pro (390px) e abaixo
   ========================================================= */
@media (max-width: 430px) {
  .container { padding: 0 14px; }

  .botao-superior p { font-size: .62rem; padding: 5px 12px; }

  .hero-text h1 { font-size: 1.75rem; }
  .hero-text p { font-size: .95rem; }
  .hero-image img { aspect-ratio: 4 / 3; }

  .btn { padding: 12px 20px; font-size: .9rem; }
  .btn-lg { padding: 15px 26px; font-size: .95rem; }

  .proposta-text h2 { font-size: 1.4rem; }
  .proposta-text p { font-size: .95rem; }

  .card { padding: 22px 18px; }
  .card h3 { font-size: 1rem; }
  .card p { font-size: .88rem; }

  .clientes-slide { width: 110px; height: 110px; }
  .clientes-label { font-size: 20px; }
  .texto_card { font-size: 22px; }

  .etapa-numero { font-size: 1.4rem; }
  .etapa h3 { font-size: .98rem; }

  .cta-final h2 { font-size: 1.4rem; }
  .cta-final p { font-size: .95rem; }

  .footer p { font-size: .8rem; }
}

/* Aparelhos muito estreitos (iPhone SE e menores, < 375px) */
@media (max-width: 374px) {
  .hero-text h1 { font-size: 1.55rem; }
  .clientes-slide { width: 96px; height: 96px; }
}

/* =========================================================
   NOTEBOOKS / TELAS MENORES (1024px – 1439px)
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container { max-width: 980px; }
  .hero-text h1 { font-size: 2.7rem; }
}

/* =========================================================
   DESKTOPS GRANDES (1440px+)
   ========================================================= */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
  .hero-text h1 { font-size: 3.2rem; }
  .clientes-slide { width: 280px; height: 280px; }
}

/* =========================================================
   ORIENTAÇÃO PAISAGEM EM CELULARES (ex: iPhone 12 Pro deitado)
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding: 24px 0; }
  .hero-inner { gap: 24px; }
  .hero-image { max-width: 360px; }
}