/*
 * main.css
 * Este arquivo importa todos os módulos CSS para criar a folha de estilos completa.
 * A ordem de importação é importante para a cascata do CSS.
 */

/* Base Styles */
@import 'base/_reset.css';
@import 'base/_variables.css';
@import 'base/_typography.css';

/* Utility Styles */
@import 'utilities/_global.css'; /* Estilos globais de seções e elementos comuns */
@import 'utilities/_buttons.css';
@import 'utilities/_badges.css';
@import 'utilities/_animations.css';
@import 'utilities/_footer.css';
@import 'utilities/_notifications.css';

/* Component Styles */
@import 'components/_header-nav.css';
@import 'components/_modal.css';

/* Section Specific Styles */
@import 'sections/_hero.css';
@import 'sections/_problem.css';
@import 'sections/_solution.css';
@import 'sections/_benefits.css';
@import 'sections/_social-proof.css';
@import 'sections/_final-cta.css';
@import 'sections/_faq.css';
@import 'sections/_faq.css';
@import 'sections/_support-hero.css';
@import 'sections/_support-options.css';

/* Responsive adjustments - pode ser um arquivo separado ou integrado em cada seção */
/* Para manter a fidelidade e não perder nada, as media queries específicas de seções
   permanecerão em seus respectivos arquivos, como encontrado originalmente.
   As media queries mais globais foram consolidadas aqui ou em _typography.css para o body.
*/
@media (max-width: 768px) {
   .nav-links {
      display: none;
   }

   .section-title {
      font-size: 2rem;
   }

   .final-cta h2 {
      font-size: 2.5rem;
   }
}

@media (max-width: 480px) {
   .hero-price {
      flex-direction: row;
      gap: 0.5rem;
   }
}

/* Scroll Animations - Estes podem ser movidos para _animations.css se houver uma preferência por centralizá-los */
.animate-on-scroll {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.6s ease;
}

.animate-on-scroll.animated {
   opacity: 1;
   transform: translateY(0);
}

/*
 * ESTILOS GERAIS PARA CONTEÚDO DE DOCUMENTOS (Termos de Uso, Aviso de Privacidade)
 *
 * Estas regras garantem que o texto longo seja legível e bem estruturado
 * em diferentes tamanhos de tela.
 */
.document-container {
   max-width: 960px; /* Largura máxima para o conteúdo centralizado */
   margin: 6rem auto 4rem auto; /* Margem superior (para compensar o cabeçalho fixo), centralizado horizontalmente */
   padding: 0 1.5rem; /* Padding lateral para telas menores */
   color: var(--primary-dark); /* Cor principal do texto */
   line-height: 1.6; /* Altura da linha para melhor legibilidade */
   font-size: 1.1rem; /* Tamanho da fonte base */
}

/* Ajustes para o h1 principal da página */
.document-container h1 {
   font-size: 2.5rem;
   text-align: center;
   margin-bottom: 2rem;
   color: var(--primary-dark);
   line-height: 1.2;
}

/* Estilos para títulos de seção (h2) */
.document-container h2 {
   font-size: 2rem;
   margin-top: 3rem; /* Espaço antes de um novo título de seção */
   margin-bottom: 1.2rem;
   color: var(--primary-dark);
   border-bottom: 1px solid var(--light-gray); /* Linha para separar seções */
   padding-bottom: 0.5rem;
}

/* Estilos para subtítulos (h3) */
.document-container h3 {
   font-size: 1.5rem;
   margin-top: 2.5rem;
   margin-bottom: 1rem;
   color: var(--primary-dark);
}

/* Estilos para parágrafos */
.document-container p {
   margin-bottom: 1rem;
}

/* Estilos para listas (ul e ol) */
.document-container ul,
.document-container ol {
   margin-left: 1.8rem;
   margin-bottom: 1.5rem;
}

.document-container li {
   margin-bottom: 0.6rem;
}

/* Estilos para texto em negrito */
.document-container strong {
   font-weight: bold;
}

/* Estilos para citações (se houver no futuro) */
.document-container blockquote {
   border-left: 4px solid var(--primary-orange); /* Uma cor de destaque para citações */
   padding-left: 1.2rem;
   margin: 1.5rem 0;
   color: var(--text-muted); /* Uma cor de texto ligeiramente mais suave */
   font-style: italic;
}

/* Estilo para destacar a página ativa no menu (opcional) */
.nav-links .active-page a {
   font-weight: bold;
   color: var(
      --primary-orange
   ) !important; /* Força a cor para destacar a página atual */
}

/* --- Responsividade para o conteúdo do documento --- */
@media (max-width: 992px) {
   .document-container {
      margin-top: 5rem; /* Ajuste para compensar cabeçalho em mobile */
      padding: 0 1.2rem;
      font-size: 1.05rem;
   }
   .document-container h1 {
      font-size: 2.2rem;
   }
   .document-container h2 {
      font-size: 1.8rem;
      margin-top: 2.5rem;
   }
   .document-container h3 {
      font-size: 1.4rem;
   }
}

@media (max-width: 768px) {
   .document-container {
      margin-top: 4rem;
      padding: 0 1rem;
      font-size: 1rem;
   }
   .document-container h1 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
   }
   .document-container h2 {
      font-size: 1.6rem;
      margin-top: 2rem;
   }
   .document-container h3 {
      font-size: 1.2rem;
   }
   .document-container ul,
   .document-container ol {
      margin-left: 1.5rem;
   }
}

@media (max-width: 480px) {
   .document-container {
      margin-top: 3.5rem;
      padding: 0 0.8rem;
      font-size: 0.95rem;
   }
   .document-container h1 {
      font-size: 1.6rem;
      line-height: 1.3;
   }
   .document-container h2 {
      font-size: 1.4rem;
      margin-top: 1.8rem;
   }
   .document-container h3 {
      font-size: 1.1rem;
   }
}