/* faltaí · ajustes de responsivo da landing.
   O layout original veio de um canvas de largura fixa (container 1152px) e não
   trazia nenhuma media query: em telas estreitas as grades de duas colunas
   transbordavam e os paddings de 40px comiam a linha. Aqui as colunas viram
   uma só, o padding lateral cai e a navegação do topo encolhe.
   Como o HTML de origem usa estilo inline, cada regra precisa de !important
   para vencer a especificidade. Acima de 960px nada muda. */

/* ---------- tablet e abaixo ---------- */
@media (max-width: 960px) {
  [data-r="topbar"] { padding: 12px 24px !important; }
  [data-r="topnav"] { gap: 2px !important; }
  [data-r="navlink"] { padding: 8px 10px !important; font-size: 13px !important; }

  [data-r="hero"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    padding: 88px 24px 72px !important;
  }
  [data-fx="hero-card"] { justify-self: stretch !important; max-width: 100% !important; }

  [data-r="grid2"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  [data-r="sticky"] { position: static !important; }

  [data-r="pad"] { padding: 72px 24px !important; }
  #como, #demo { padding: 72px 24px !important; }
  #perguntas { padding: 0 24px 72px !important; }

  [data-r="demo-card"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r="demo-b"] { border-left: 0 !important; border-top: 1px solid #E7E8E3 !important; }

  [data-r="footer-grid"] {
    padding: 56px 24px 32px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 24px !important;
  }
  [data-r="footer-grid"] > :first-child { grid-column: 1 / -1 !important; }
  [data-r="footer-bottom"] { padding: 20px 24px 32px !important; }
}

/* ---------- celular ---------- */
@media (max-width: 720px) {
  /* os quatro links de seção não cabem em 375px: sobram a marca e o botão */
  [data-r="navlink"] { display: none !important; }
  [data-r="topbar"] { padding: 10px 20px !important; }

  [data-r="hero"] { padding: 56px 20px 48px !important; gap: 28px !important; }
  [data-r="h1"] { font-size: clamp(30px, 8.4vw, 44px) !important; line-height: 1.08 !important; }
  /* a tarja original é horizontal; empilhado, o texto precisa de proteção vertical */
  [data-r="hero-tarja"] {
    background: linear-gradient(180deg, rgba(22,24,29,0.88) 0%, rgba(22,24,29,0.82) 50%, rgba(22,24,29,0.92) 100%) !important;
  }
  [data-fx="hero-float"] { padding: 22px !important; border-radius: 26px !important; }

  [data-r="pad"] { padding: 56px 20px !important; }
  #como, #demo { padding: 56px 20px !important; }
  #perguntas { padding: 0 20px 56px !important; }

  #como h2, #recursos h2, #demo h2, #perguntas h2 {
    font-size: 27px !important;
    line-height: 34px !important;
  }
  [data-fx="marquee"] span { font-size: 18px !important; line-height: 24px !important; }

  [data-r="demo-a"], [data-r="demo-b"] { padding: 24px !important; }
  [data-fx-body] p { padding-right: 0 !important; }

  [data-r="footer-grid"] { padding: 48px 20px 28px !important; }
  [data-r="footer-bottom"] { padding: 20px 20px 28px !important; }
}

/* ---------- celular pequeno ---------- */
@media (max-width: 420px) {
  [data-r="hero"] { padding: 48px 16px 40px !important; }
  [data-r="pad"] { padding: 48px 16px !important; }
  #como, #demo { padding: 48px 16px !important; }
  #perguntas { padding: 0 16px 48px !important; }
  [data-r="topbar"] { padding: 10px 16px !important; }
  [data-r="footer-grid"] { padding: 40px 16px 24px !important; }
  [data-r="footer-bottom"] { padding: 18px 16px 24px !important; }
  [data-fx-faq] button { font-size: 17px !important; line-height: 24px !important; gap: 12px !important; }
}