/* 
   ✅ PROMPT OFICIAL – AJUSTE PROFISSIONAL LEGUS
   Padrão visual moderno nível empresa SaaS (Umbler / Asaas / RD)
   Foco: Correção de visibilidade em fundos escuros e legibilidade mobile.
*/

/* 7️⃣ Box sizing global */
* {
  box-sizing: border-box;
}

/* 3️⃣ Tipografia equilibrada */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  color: #333;
  font-family: 'Poppins', sans-serif;
}

/* 2️⃣ Container profissional */
.container, .wrapper, [class*="container"] {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Remover larguras fixas */
[style*="width: 1200px"], [style*="width: 1300px"],
.w-1200, .w-1300 {
  width: 100% !important;
  max-width: 1140px !important;
}

/* 4️⃣ Títulos proporcionais - Desktop */
h1 {
  font-size: 42px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: inherit; /* Permite que a cor seja herdada do pai (ex: Hero) */
}

h2 {
  font-size: 30px !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  color: inherit;
}

/* Ajuste específico para garantir texto branco em seções de destaque (Hero) */
.hero-section, .page-header, [class*="hero"], [class*="header-page"] {
  color: #FFFFFF !important;
}

.hero-section h1, .hero-section h2, .hero-section p,
.page-header h1, .page-header h2, .page-header p,
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] p {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sombra leve para aumentar contraste */
}

p {
  margin-bottom: 1.5rem !important;
  text-align: justify;
  hyphens: auto;
}

/* 5️⃣ Espaçamento moderno */
section, .section {
  padding: 80px 0 !important;
}

/* 6️⃣ Ajuste obrigatório de imagens */
img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 8️⃣ Ajustes Mobile e Tablet */
@media (max-width: 768px) {
  section, .section {
    padding: 60px 0 !important;
  }
  
  .container, .wrapper, [class*="container"] {
    padding: 0 20px !important;
  }

  h1 {
    font-size: 32px !important;
    text-align: center !important;
  }
  
  h2 {
    font-size: 24px !important;
    text-align: center !important;
  }
  
  p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    margin-bottom: 1.2rem !important;
  }

  [class*="grid"], .content-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
}

/* 8️⃣ Ajuste fino para celular moderno */
@media (max-width: 430px) {
  body {
    font-size: 15px !important;
  }
  
  h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  h2 {
    font-size: 22px !important;
  }

  section, .section {
    padding: 50px 0 !important;
  }
  
  .container {
    padding: 0 15px !important;
  }
}

/* Garantir que elementos não estourem a tela */
* {
  max-width: 100%;
}