/* Correção para visualização mobile */

/* Prevenir overflow horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
}

#root {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Correções para mobile (smartphones) */
@media (max-width: 640px) {
  /* Container principal - adicionar padding lateral */
  #root > div {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Todas as seções - reduzir padding lateral excessivo */
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Containers que podem estar causando overflow */
  div[class*="container"],
  div[class*="max-w"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Garantir que imagens não ultrapassem */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Ajustar títulos para caber */
  h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  h2 {
    font-size: clamp(1.25rem, 4vw, 2rem) !important;
    word-wrap: break-word;
  }
  
  /* Ajustar parágrafos */
  p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Botões - ajustar para caber na tela */
  button,
  a[class*="inline-flex"],
  a[role="button"] {
    max-width: 100% !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 3rem !important;
    line-height: 1.25 !important;
  }
  
  /* Grid - uma coluna em mobile */
  div[class*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Tablets pequenos */
@media (min-width: 641px) and (max-width: 768px) {
  section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}