:root {
  --cor-fundo: #333;
  --cor-texto: #ffffff;
  --cor-texto-secundario: #cccccc;
  --cor-destaque: #ff6600;
}

.boxSobre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 5% 3%;
  background-color: var(--cor-fundo);
}

.redeSobre {
  width: 40%;
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 600;
  color: var(--cor-texto);
}

.redeSobre2 {
  padding: 2%;
  color: var(--cor-destaque);
}

.textRede2 {
  text-align: center;
  margin-bottom: 10px;
  color: var(--cor-texto);
}

.boxImg {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6%;
  background-color: transparent;
}

.redeImg {
  width: 48px;
  height: 48px;
  transition: 300ms;
  background-color: transparent;
}

.redeImg:hover {
  opacity: 0.65;
}

.boxImg a {
  text-decoration: none;
}

.titleSobre {
  width: 50%;
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 600;
  color: var(--cor-texto);
}

.titleSobre2 {
  padding: 2%;
  text-align: center;
  color: var(--cor-destaque);
}

.textsobre {
  text-align: justify;
  text-indent: 2em;
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: 16px;
}

/* Breakpoint para tablets (768px até 1199px) */
@media (max-width: 1199px) {
  .boxSobre {
    flex-direction: column;
    align-items: center;
    padding: 8% 5%;
  }

  .redeSobre, .titleSobre {
    width: 90%;
  }

  .redeImg {
    width: 44px;
    height: 44px;
  }
}

/* Breakpoint para celulares (até 767px) */
@media (max-width: 767px) {
  .boxSobre {
    padding: 10% 5%;
  }

  .redeImg {
    width: 36px;
    height: 36px;
  }

  .textsobre {
    font-size: clamp(16px, 4vw, 18px);
  }

  .titleSobre2, .redeSobre2 {
    font-size: 22px;
  }

  .boxImg {
    gap: 16px;
    margin-top: 5%;
  }
}