/* Correções de responsividade para mobile */
@media (max-width: 768px) {
  /* Ajustes gerais para mobile */
  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
  }
  
  /* Correção específica para a primeira seção */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Correção para seções que podem estar cortadas */
  section {
    padding: 1rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Correção específica para a primeira seção hero */
  section:first-of-type,
  .hero-section {
    padding: 1rem !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Correção para elementos flex que podem estar causando overflow */
  .flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  
  /* Correção para grids */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  
  /* Títulos responsivos */
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }
  
  /* Botões responsivos */
  button, .btn {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }
  
  /* Botão principal CTA */
  button[class*="bg-green"] {
    padding: 1rem 1.5rem !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  /* Seções com padding adequado */
  section {
    padding: 2rem 0 !important;
  }
  
  /* Cards e elementos de conteúdo */
  .bg-white, .bg-gray-50, .bg-blue-50 {
    margin: 1rem 0 !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* Imagens responsivas */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* Vídeo responsivo */
  video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  
  /* Grid layouts para mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Flex layouts para mobile */
  .flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .flex.space-x-8 > *,
  .flex.space-x-4 > *,
  .flex.space-x-2 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Texto responsivo */
  .text-4xl {
    font-size: 1.75rem !important;
  }
  
  .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  /* Espaçamentos para mobile */
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Margens para mobile */
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  
  .mt-12 {
    margin-top: 1.5rem !important;
  }
  
  .mt-8 {
    margin-top: 1rem !important;
  }
  
  /* Botão flutuante do WhatsApp */
  .fixed.bottom-6.right-6 {
    bottom: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    width: auto !important;
  }
  
  .fixed.bottom-6.right-6 button {
    width: auto !important;
    padding: 0.75rem !important;
  }
  
  /* Contador de tempo */
  .flex.items-center.space-x-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Depoimentos */
  .bg-white.rounded-xl.p-6 {
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
  }
  
  /* Footer */
  footer {
    padding: 1.5rem 0 !important;
  }
  
  /* Ajustes específicos para elementos com overflow */
  * {
    box-sizing: border-box !important;
  }
  
  /* Prevenir scroll horizontal */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* Ajustar elementos que podem causar overflow */
  .max-w-4xl,
  .max-w-6xl,
  .max-w-3xl,
  .max-w-2xl {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Ajustes para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  .text-4xl {
    font-size: 2rem !important;
  }
  
  .text-2xl {
    font-size: 1.5rem !important;
  }
  
  button[class*="bg-green"] {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
  }
}

/* Melhorias de acessibilidade e usabilidade */
@media (max-width: 768px) {
  /* Aumentar área de toque para botões */
  button, a {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Melhorar legibilidade */
  p, span, div {
    line-height: 1.6 !important;
  }
  
  /* Ajustar espaçamento entre elementos clicáveis */
  button + button,
  a + a {
    margin-top: 0.5rem !important;
  }
}


  
  /* Correções adicionais para resolver o bug de layout mobile */
  
  /* Forçar largura correta em todos os elementos */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Correção específica para elementos que podem estar causando overflow */
  div, section, article, main {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Correção para o viewport principal */
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Correção específica para elementos com classes do Tailwind */
  .max-w-4xl,
  .max-w-6xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl,
  .max-w-lg {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
  }
  
  /* Correção para elementos flex que podem estar causando problemas */
  .flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Correção para imagens que podem estar causando overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
  
  /* Correção específica para a primeira seção hero */
  .bg-gradient-to-r,
  .bg-blue-50,
  .bg-gray-50 {
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Correção para elementos posicionados */
  .absolute,
  .relative,
  .fixed {
    max-width: 100% !important;
  }
  
  /* Correção para o botão flutuante do WhatsApp */
  .fixed.bottom-6.right-6 {
    right: 1rem !important;
    bottom: 1rem !important;
    max-width: none !important;
    width: auto !important;
  }
  
  /* Garantir que nenhum elemento ultrapasse a largura da tela */
  .w-full,
  .w-screen {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Correção para elementos que podem ter largura fixa */
  [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Correção adicional para prevenir scroll horizontal */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
}