/* ==========================================================================
   6. MEDIA QUERIES (Responsividade)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* TABLET (Até 991px) */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* -- Ajustes Globais para Tablet -- */
  :root {
    --fs-h3: 40px;
    --fs-h2: 50px;
    --fs-lg: 22px;
    --space-10: 64px;
    --space-15: 80px;
  }

  /* -- Layout Geral -- */
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* -- Header & Hero -- */
  .header {
    height: auto;
    padding-bottom: 60px;
  }
  .header .main-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .title-section {
    margin-top: var(--space-8);
    width: 100%;
    max-width: 600px;
  }
  .image-section {
    display: none; /* Imagem do Hero é muito complexa para o tablet, melhor esconder */
  }

  /* -- Seções Específicas -- */
  .comparison-columns {
    flex-direction: column;
  }
  
  .pillars-boxes,
  .testimonials-row {
      flex-direction: column;
  }

  .testimonials-content {
    flex-direction: column;
  }

  .about-marcia-section {
    padding: var(--space-10) 0;
  }
  .about-marcia-content {
    gap: 0;
    flex-direction: column-reverse;
    align-items: center;
  }
  .about-marcia-text {
    width: 100%;
    padding: var(--space-8) var(--space-4);
    text-align: center;
  }
  .about-marcia-image {
    position: static;
    transform: none;
    height: auto;
    width: 100%;
    max-width: 400px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }
  
  .faq-list {
      width: 100%;
  }
  .testimonials-faq-section {
    padding: 0;
  }
  .faq-container {
    margin-left: 20px;
    margin-right: 40px;
    width: calc(100% - 40px);
    margin-bottom: 40px;
  }
}


/* -------------------------------------------------------------------------- */
/* CELULAR (Até 480px) */
/* -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* -- Ajustes Globais para Celular -- */
  :root {
    --fs-h3: 32px;
    --fs-h2: 40px;
    --fs-xl: 28px;
    --fs-lg: 20px;
    --fs-md: 17px;
    --space-8: 40px;
  }
  
  body {
    background-image: none; /* Remove o background global para aplicar por seção */
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .btn { min-height: 64px; }

  /* -- Header & Hero -- */
  .header {
    background: url("./images/background.jpg") center/cover no-repeat;
    height: 100vh;
    max-height: 800px; /* Limite para não ficar gigante */
    padding-bottom: 0;
    overflow: hidden;
  }
  .nav-bar { text-align: center; padding: 16px 20px; }
  .header .main-container {
    padding: 0;
    height: 100%;
    justify-content: flex-end; /* Alinha conteúdo na parte de baixo */
    text-align: left;
    align-items: center;
  }
  .image-section {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
 .image-marcia {
  margin-top: 40px;
  position: absolute;
  background-image: url('images/marcia-mobile.png');
  background-size: auto;
  min-width: 100vw;
  min-height: 494px;
  height: auto;
}
  .section-background { background: none; }
  .title-section {
    z-index: 3;
    margin: 0 0 80px 0;
    padding: 0 20px;
    width: 100%;
    max-width: 400px;
  }
  .description {
    font-size: var(--fs-md);
    line-height: 1.2em;
    margin-top: 20px;
  }

  /* -- Seções de Conteúdo -- */
.clarification-container {
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
}
.clarification-solution {
    text-align: left;;
    line-height: 1.2em;
}
.maturity-container {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
}

.how-it-works-boxes {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
}

  .target-audience-section {
    background: radial-gradient(ellipse 185% 38% at -84% 83%, #986143 0%, #302519 100%);
  }
  .target-audience-boxes { flex-direction: column; }
  .target-audience-box { min-width: unset; flex: auto; width: 100%;
  .clarification-container {
      padding: var(--space-4) var(--space-3);
  }
  
  .comparison-section {
    background-size: contain;
    background-position: bottom;
    padding-top: var(--space-8);
  }
  
  .maturity-section {
    padding-top: var(--space-8);
  }
  
  .about-marcia-text {
      padding: var(--space-4) var(--space-3);
      text-align: left;
  }
  
  /* -- FAQ -- */
  .faq-container {
    padding: var(--space-2);
  }
  .faq-question {
    align-items: flex-start; /* Garante que o ícone não suba */
  }
  .faq-question span {
    flex: 1;
    line-height: 1.4;
    padding-right: var(--space-2);
  }
}