/* =========================================================
   Responsivo global do novo-site (redesign)
   O runtime renderiza num <div> próprio e o navegador NORMALIZA o
   style inline (espaço após ':', cores em rgb). Seletores robustos:
   [data-screen-label], tags, href, classes, e valores já normalizados.
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden !important; }
img { max-width: 100%; height: auto; }
[data-screen-label] { box-sizing: border-box; }

/* ---- Hambúrguer (escondido no desktop) ---- */
.dsnav-burger, .dsnav-panel { display: none; }

/* Hero/Proatividade: empilha antes (o "leque" de celulares não cabe na coluna
   estreita entre 961–1080px). Assim o mockup vai pra largura total e encaixa. */
@media (max-width: 1080px) {
  [data-screen-label="Hero"], [data-screen-label="Proatividade"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Hero"] > div:last-child,
  [data-screen-label="Proatividade"] > div:last-child { margin-top: 28px; }
}

/* ---------- Tablet e abaixo (<= 960px) ---------- */
@media (max-width: 960px) {
  [data-screen-label] { padding-left: 22px !important; padding-right: 22px !important; }
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---------- Celular (<= 680px) ---------- */
@media (max-width: 680px) {
  [data-screen-label] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ---- NAV + HAMBÚRGUER ---- */
  [data-screen-label="Nav"] {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* esconde o menu de links do desktop e a "Área do cliente" (vão pro painel) */
  [data-screen-label="Nav"] > div[style*="gap: 28px"] { display: none !important; }
  [data-screen-label="Nav"] a[href*="app.dsmarketing"] { display: none !important; }
  .sol-menu { display: none !important; }
  /* CTA compacto */
  [data-screen-label="Nav"] a[href="#form"],
  [data-screen-label="Nav"] a[href="#contato"] {
    padding: 9px 13px !important; font-size: 12.5px !important; border-radius: 8px !important; white-space: nowrap;
  }
  /* botão hambúrguer */
  .dsnav-burger {
    display: flex !important; flex-direction: column; gap: 5px;
    width: 42px; height: 42px; align-items: center; justify-content: center;
    cursor: pointer; order: 3; margin-left: 4px;
  }
  .dsnav-burger span { width: 24px; height: 2.5px; background: #0c1a24; border-radius: 2px; transition: .2s; }
  /* painel overlay */
  .dsnav-panel {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 9999;
    background: rgba(9, 18, 26, .985); backdrop-filter: blur(6px);
    flex-direction: column; gap: 2px; padding: 78px 26px 32px; box-sizing: border-box;
    overflow-y: auto;
  }
  .dsnav-panel:target { display: flex !important; }
  .dsnav-panel a {
    font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600;
    color: #eef4f8; padding: 15px 2px; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none;
  }
  .dsnav-panel a.dsnav-cta {
    margin-top: 22px; background: #ffd21e; color: #0c1a24;
    border: none; border-radius: 11px; text-align: center; padding: 16px; font-size: 17px;
  }
  .dsnav-close {
    position: absolute; top: 20px; right: 22px; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #eef4f8; cursor: pointer; border: none; background: none;
  }

  /* ---- tipografia ---- */
  h1 { font-size: 28px !important; line-height: 1.18 !important; letter-spacing: -0.5px !important; }
  h2 { font-size: 23px !important; letter-spacing: -0.4px !important; }

  /* ---- inputs/selects de FORMULÁRIO em largura total (não os campos de quantidade type=number) ---- */
  input:not([type="number"]), select, textarea { width: 100% !important; box-sizing: border-box !important; }

  /* ---- MOCKUPS no mobile: mostra o celular central, esconde só os laterais (rotacionados) que vazam ---- */
  [style*="min-height: 560px"], [style*="min-height: 430px"] { min-height: auto !important; }
  [style*="rotate(-7deg)"], [style*="rotate(7deg)"] { display: none !important; }

  /* ---- cards de largura fixa (depoimentos) ---- */
  [style*="width: 330px"] { width: 80vw !important; max-width: 330px !important; }

  /* ---- tabela "folha de pagamento": mantém 3 colunas compactas ---- */
  div[style*="1.5fr 1fr 1fr"] {
    grid-template-columns: 1.4fr .9fr 1fr !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }

  /* ---- menus flutuantes (preços) ocupam a largura ---- */
  [style*="position: sticky"][style*="bottom"] { left: 6px !important; right: 6px !important; }
}

/* ---------- Celular pequeno (<= 400px) ---------- */
@media (max-width: 400px) {
  h1 { font-size: 25px !important; }
  [data-screen-label] { padding-left: 13px !important; padding-right: 13px !important; }
}