body {
  font-size: 100%;
}

/* 2. Evita que o iOS Safari aumente/diminua a fonte sozinho ao girar a tela —
   causa comum de texto "saltando" de tamanho no mobile */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 3. Impede que palavras, links ou títulos longos estourem a largura da tela
   e sejam "cortados" pelo overflow-x:hidden do html/body */
body, p, h1, h2, h3, h4, h5, h6, span, a, li, blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* 4. Dá respiro lateral garantido em telas pequenas, sem depender só do .container
   (cobre o caso do .post-article não ter padding próprio) */
@media (max-width: 600px) {
  .container {
    padding: 0 16px;
  }
  .post-article {
    padding: 0 16px;
    max-width: 100%;
    box-sizing: border-box;
  }
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.3em; }
  h3 { font-size: 1.15em; }
}

/* 5. Reforça a centralização de blocos que dependem de margin:0 auto
   quando o container encolhe em telas muito pequenas */
@media (max-width: 480px) {
  .section-head,
  .page-header,
  .hero-text,
  .cta-final {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 6. Segurança extra: qualquer tabela solta no conteúdo do post não deve
   empurrar o layout para o lado nem cortar texto */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}