html, body {
  overflow-x: hidden;  /* remove qualquer scroll horizontal */
  width: 100vw;        /* garante que a largura nunca ultrapasse a tela */
}



@media (max-width: 768px) {
  .solucoes {
    padding: 2em 1em;
    min-height: auto;
    background-image: url('fundos2final10cel102.jpg');
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
  }

  .solucoes-container {
    flex-direction: column;
    margin-left: 0;
    text-align: center;
    gap: 1em;
  }

  .solucoes-text {
    margin-left: 0;
  }

  .solucoes-text h2 {
    font-size: 2em;
    margin-bottom: 1em;
  }

  .solucoes-text ul.lista-com-check {
    display: flex;
    flex-direction: column;
    gap: 10px; /* menor que antes */
    width: 90%;
    margin: 0 auto;
  }

  .solucoes-empty {
    height: 250px;
    width: 100%;
    background-image: url('fundos2final10cel-img.png');
    background-size: cover;
    background-position: center;
    margin-top: 20px;
  }

  .lista-com-check li {
    font-size: 1.0em;
    text-align: left;
    margin-bottom: 5px; /* menor espaçamento entre itens */
    line-height: 1.2em; /* reduz espaçamento entre linhas do texto */
    padding: 9px 12px; /* diminui espaço interno da caixinha */
    border: 1px solid #ccc; /* se tiver borda */
    border-radius: 4px; /* opcional, se quiser cantos arredondados */
  }

  .lista-com-check li i {
    font-size: 1.2em;
    margin-right: 8px; /* reduz um pouco a distância do texto */
  }
}

  @media (max-width: 768px) {
    .cards-section {
      flex-direction: column; /* uma coluna só */
      align-items: center;    /* centraliza os cards */
    }

    .cards-section .card {
      width: 90%;             /* ocupa quase toda a largura da tela */
      margin-bottom: 20px;    /* espaço entre os cards */
    }
  }

  /* Classe para controlar título apenas em celular */
  .titulo-cel {
    display: none; /* PC: não faz nada */
  }

  @media (max-width: 768px) {
    .titulo-cel {
      display: block; /* Aparece só em celular */
      text-align: center; /* centralizado por padrão */
    }
  }
  
  
  /* Desktop: nada muda */
.taxa-mobile-img { display: none; }

/* Mobile */
@media (max-width: 991px) {
  .taxa-container { flex-direction: column; }

  .taxa-left, .taxa-right { width: 100%; text-align: center; }

  .taxa-left table { width: 100%; display: block; overflow-x: auto; table-layout: fixed; }
  .taxa-left table th, .taxa-left table td { font-size: 1em; padding: 1em; }

  .taxa-mobile-img {
    display: block;
    width: 100%;
    height: 400px; /* altura da imagem no celular */
    background-image: url('meio100c-cel.jpg'); /* imagem mobile */
    background-size: cover;
    background-position: center;
    margin-top: 1em;
  }
}

@media (max-width: 991px) {
  /* Remove background da seção no celular */
  .taxa-section {
    background-image: none;
    padding: 2em 1em; /* padding menor para celular */
  }

  /* Container da tabela ocupa toda a largura */
  .taxa-left {
    width: 100%;
    box-sizing: border-box; 
  }

  /* Tornar a tabela responsiva de verdade */
  .taxa-left table {
    width: 90%;        /* ocupa toda largura do container */
    max-width: 90%;    /* nunca ultrapassa o container */
    margin: 0 auto;     /* centraliza horizontalmente */
    display: table;     /* mantém o layout de tabela */
    table-layout: fixed; /* distribui colunas igualmente sem ultrapassar */
  }

  /* Ajuste nas células */
  .taxa-left th, .taxa-left td {
    padding: 0.8em 0.5em;   /* padding menor para caber no celular */
    text-align: center;
    word-wrap: break-word;   /* quebra palavras longas */
  }
    /* Largura das colunas */
  .taxa-left th:first-child,
  .taxa-left td:first-child {
    width: 44%; /* primeira coluna maior para texto */
  }

  .taxa-left th:nth-child(2),
  .taxa-left td:nth-child(2) {
    width: 21%; /* segunda coluna pequena para porcentagem */
  }

  .taxa-left th:last-child,
  .taxa-left td:last-child {
    width: 35%; /* terceira coluna para valores */
  }
  
  
   .taxa-left table th,
  .taxa-left table td {
    font-size: 0.68em; /* define um tamanho único para todas as colunas */
  }  
   .taxa-left ul,
  .taxa-left ul li {
    font-size: 0.85em; /* ajusta para celular */
    line-height: 1.2em; /* opcional: deixa o espaçamento mais compacto */
    margin-top: 12px;
  }
}