/* ============================================================
   BuildPress - Responsivo
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .serv__grid { max-width: 640px; }
  .desenv__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* Elite editorial -> empilhado: imagem em cima, título e rodapé centrados */
  .elite__stage { min-height: auto; padding: 56px 0; text-align: center; }
  .elite__glow { top: 24%; width: min(420px, 80%); }
  .elite__photo { position: static; transform: none; margin: 0 auto 8px; width: min(300px, 70%); }
  .elite__photo img { width: 100%; height: auto; }
  /* grid de 3 colunas vira fluxo centralizado: cada peça é um bloco inline centrado */
  .elite__title { display: block; font-size: clamp(30px, 8.5vw, 54px); }
  .elite__title .wl, .elite__title .wr { display: inline; grid-column: auto; text-align: center; padding: 0; }
  .elite__title .wl::after { content: " "; }
  .elite__foot { max-width: 100%; margin-top: 26px; }
  .elite__lead { margin-inline: auto; padding-left: 0; }
  .elite__lead::before { display: none; }
  .elite__stack { justify-content: center; }
  .elite__chev { display: none; }
  .aumente__inner, .orca__inner { grid-template-columns: 1fr; }
  .aumente__art { order: -1; }
  .difer__stage { padding: 24px; }
  .difer__col.good { width: 100%; }
  .difer__col.bad { position: static; width: 100%; margin-top: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --nav-h: 72px; }

  .nav__cta { display: none; }

  .hero { min-height: 92vh; }
  .hero__title { font-size: clamp(34px, 11vw, 52px); }

  .exclusivo { margin-top: -4vh; }
  .browser__shot { min-height: 320px; }
  .browser__url { font-size: 10px; }
  .excl-title { font-size: 24px; }
  /* badges reposicionados p/ não sobrepor demais */
  .badge { position: static; max-width: 100%; margin: 10px auto 0; transform: none !important; display: block; }
  .badge--cta { transform: none; margin-inline: auto; }
  .badge--stat::after { display: none; }
  .exclusivo { display: flex; flex-direction: column; }

  .serv__grid { grid-template-columns: 1fr; max-width: 420px; }
  .serv-card__icon { margin-bottom: 30px; }

  .steps { flex-direction: column; align-items: center; gap: 26px; }
  .step__arr { transform: rotate(90deg); margin: 0; }

  .paraquem__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }

  .difer__stage { padding: 18px; }
  .difer__toggle { flex-direction: column; gap: 12px; }

  .aval__wrap { gap: 6px; }
  .tnav { width: 34px; height: 34px; font-size: 18px; }
  .tcard { padding: 30px 22px; }
  .tcard__quote { font-size: 15px; }

  .port__track img { height: 210px; }

  .aumente__art img { max-height: 340px; }
  .naoentr__redes { margin-top: clamp(150px, 60vw, 220px); }

  .orca__form .row { flex-direction: column; }
  .orca__photo::before, .orca__photo::after { display: none; }

  .footer__links { gap: 18px; font-size: 13px; }
  .footer__bar { flex-direction: column; gap: 10px; text-align: center; padding: 16px 20px; width: 100%; max-width: 360px; }
  .footer__legal { font-size: 10px; }
}

/* ============================================================
   MOBILE — Otimização de performance + organização (≤768px)
   Só afeta celular. Desktop e tablet (>768px) ficam 100% intactos.
   ============================================================ */
@media (max-width: 768px) {

  /* ===== 1. PERF — zero backdrop-filter (é o que mais repinta a cada scroll) ===== */
  .nav.is-scrolled, .nav__menu, .glass, .tcard,
  .servicos--orange .serv-card, .hero__trust li, .difer__col.bad {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* fundos sólidos no lugar do vidro — mantém o visual sem o custo de GPU */
  .nav.is-scrolled            { background: rgba(0,0,0,0.92); }
  .nav__menu                  { background: rgba(8,8,8,0.98); }
  .glass                      { background: rgba(16,18,17,0.92); }
  .orca__form.glass           { background: rgba(13,15,14,0.96); }
  .servicos--orange .serv-card{ background: rgba(255,255,255,0.16); }
  .hero__trust li             { background: rgba(10,14,11,0.90); }
  .difer__col.bad             { background: rgba(24,26,25,0.96); }

  /* ===== 2. PERF — congela animações que mexem em filter/box-shadow (repintam sem parar) ===== */
  .elite::after        { display: none !important; }  /* grade energizada (drop-shadow animado) */
  .step__ring circle   { animation: none !important; } /* anéis bpRingGlow (drop-shadow) */
  .wa-float::after     { animation: none !important; } /* pulso waPulse (box-shadow expandindo) */
  .brandmark           { animation: bmFlow 6.5s ease-in-out infinite !important; will-change: auto; } /* "B": mantém só o fluxo do gradiente, sem drop-shadow */

  /* ===== 3. PERF — remove glows decorativos com blur pesado ===== */
  .elite__glow, .ev-photo::before, .aumente__art::before { display: none !important; }

  /* ===== 4. DESIGN — encurta a página (estava ~16.500px / 42 telas de rolagem) ===== */
  :root { --sec-pad: 46px; }
  .aval      { padding-block: 54px; }
  .exclusivo { padding-bottom: 44px; }
  .naoentr__redes { margin-top: 44px !important; } /* matava com 150-220px de vão antes do orçamento */

  /* ===== 5. DESIGN — orçamento: a foto do homem não flutua mais no vazio ===== */
  .orca__inner     { gap: 22px; }
  .orca__photo     { min-height: auto; }
  .orca__photo img { max-height: 360px; width: auto; margin-inline: auto; }

  /* ===== 6. DESIGN — 1ª seção (browser mockup): badges empilhados e centrados, sem sobreposição ===== */
  .exclusivo { margin-top: 0; }                 /* tira o overlap com os trust badges do hero */
  .badge { text-align: center; }                /* badges empilhados ficam centrados */
  .badge--stat { order: 0; }
  .badge--cta {                                 /* o CTA era position:absolute e vazava por cima do stat */
    position: static; top: auto; bottom: auto; left: auto; right: auto;
    width: 100%; max-width: 340px;
    margin: 14px auto 0; align-self: center; order: 1; /* vai pro fim, abaixo dos badges */
    justify-content: center;
  }

  /* ===== 7. DESIGN — cards com conteúdo centralizado no mobile ===== */
  .serv-card { align-items: center; text-align: center; }
  .serv-card__icon { margin-left: auto; margin-right: auto; margin-bottom: 24px; }
  .serv-card__tags { justify-content: center; }

  /* ===== 8. LAYOUT (RAIZ) — mata o overflow horizontal que jogava TUDO pro lado =====
     Overflow expande o "layout viewport" pra 422px; aí margin:auto centraliza
     dentro de 422, não de 390 → tudo aparece deslocado. Zerando o overflow, o
     layout viewport volta a 390 e todo o conteúdo centraliza de verdade. */
  html, body { overflow-x: clip; max-width: 100%; }
  .btn { white-space: normal; }                        /* botão longo (ex: iademo) quebra linha em vez de estourar */
  .browser { min-width: 0; max-width: 100%; }          /* mockup encolhe pra caber */
  .browser__bar { min-width: 0; gap: 8px; }
  .browser__url { min-width: 0; flex: 1; }
  .browser__nav, .browser__tools { display: none; }    /* chrome decorativo do mockup some no mobile p/ caber */
}

/* ---------- Reduced motion ---------- */
/* Obs: o gate de prefers-reduced-motion foi removido a pedido do dono do site —
   as animações contínuas (marquee, engrenagens, chevron, anéis) devem tocar
   mesmo com "Reduzir movimento" ligado no sistema. */