/**
 * Margem lateral no conteúdo em viewports estreitas (≤900px).
 * Não afeta .hero, header nem footer: só main (exc. main.hero) e secções
 * diretas do body após o hero.
 *
 * Scroll horizontal em mobile: muitas páginas usam
 * `.site-header.is-scrolled .site-lang-bar::before { width: 100vw }`.
 * `100vw` é a largura do *layout viewport* incluindo a faixa da scrollbar
 * vertical, e pode ser > 100% do corpo — daí overflow de poucos px.
 * Ao rodar o telefone no DevTools, o resize força novo cálculo e o sintoma
 * some. Corrigimos com faixa a 100% do pai + barra em largura total no
 * mobile, e `overflow-x: hidden` em html/body como rede de segurança.
 */
html {
  scrollbar-gutter: stable;
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Vence os <style> inline que ainda definem width: 100vw no ::before */
  .site-header.is-scrolled .site-lang-bar {
    width: 100% !important;
    max-width: none !important;
  }

  .site-header.is-scrolled .site-lang-bar::before {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
  }

  main:not(.hero) {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    max-width: 100%;
    box-sizing: border-box;
  }

  body > section:not(.hero) {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  body > .transparency-page-shell {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    max-width: 100%;
  }

  body > .transparency-page-shell .conformity-inner {
    padding-left: 0;
    padding-right: 0;
  }

  main:not(.hero) .conformity-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Home — “Por que nos escolher”: gutter só na section; container sem padding horizontal extra */
  body > section.why-section .why-container {
    padding-left: 0;
    padding-right: 0;
  }
}