/* ------------------------------------------------------------------
 * Responsive overrides — correções pontuais para telas pequenas
 * sem alterar o CSS original do Webflow.
 * ------------------------------------------------------------------ */

/* 1) Previne scroll horizontal em qualquer viewport. */
html,
body {
  max-width: 100vw;
  overflow-x: clip;
}

/* 2) Mídia sempre fluida. */
img,
video,
picture,
iframe,
embed {
  max-width: 100%;
  height: auto;
}

/* 3) Padding lateral do container principal em telas médias/pequenas
 *    (o export do Webflow deixa .container-main sem padding). */
@media (max-width: 991px) {
  .container-main {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .container-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero: permite que o texto e a imagem 3D empilhem verticalmente. */
  .hero_header-wrap {
    flex-flow: column;
    align-items: stretch;
    gap: 2rem;
  }
  .hero_header-content {
    width: 100%;
  }

  /* Títulos fluidos — evita corte de palavras como "businesses". */
  h1,
  .heading-style-h1,
  .heading-style-h1-2 {
    font-size: clamp(1.85rem, 8.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }
  h2,
  .heading-style-h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  h3,
  .heading-style-h3 {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    overflow-wrap: anywhere;
  }

  /* Navbar: garante que o CTA e o hambúrguer não vazem para fora
   * da tela em telas muito estreitas. */
  .navbar_container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    gap: 12px;
  }
  .navbar_container > * {
    min-width: 0;
  }
}

/* 4) Mobile pequeno (<= 479px): compacta ainda mais o navbar
 *    e reduz espaçamentos verticais gigantes. */
@media (max-width: 479px) {
  .navbar_container {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  h1,
  .heading-style-h1,
  .heading-style-h1-2 {
    font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
  }
}