* { margin: 0;
   padding: 0; 
   box-sizing: 0; 
  }

.container { 
    width: 85%;
    margin: auto;
    padding-top: 100px
   }



.profile-card {
  background-color: #dff6ef; /* fundo verde */
  border-radius: 3px;
  padding: 22px;
}

/* Perfil: foto + informações */
.perfil { 
  display: flex; 
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
 
}

/* Foto  */
.foto-perfil {
  width: 25vw;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  padding: 6px;
 
}

/* Info textual */

.info{
  width: 75%;
  margin-left: 12px;
}

.info h2 { 
  font-size: 2vw; 
  height: 38px;

}

.atuacao 
{ color: #444; 
  font-size: 1vw;
  height: 38px; 
}

.info h3 
{ 
  margin-top: 6px;
  margin-bottom: 6px; 
  font-size: 1.5vw;
}


.resumo {
   font-size: 1vw; 
   line-height: 1.45;
   color: black; 

  }
   
#cards{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0px;
  width: 100%;

}


/* Cards verdes dentro do card principal */

.card{
  width:25%;
  height: auto;
  background: linear-gradient(to bottom, #31C79F 0%, #ACE057 100%);
  border-radius: 6px;
  padding: 20px 12px;

}

#cards .card-icon {
  position: relative;
  margin: auto;
  width: 60px;
  height: 80px;
  left: 50%;
  transform: translateX(-50%);
}

#cards .card-text{
  text-align: center;
  font-size: 1vw;

  color: white;

}

/* Faixa roxa */
.faixa-roxa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #6b47d1; /* roxo */
  color: #fff;
  padding: 9px 14px;
  margin-top: 16px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
}

.faixa-roxa span, .linha-avaliacoes span{
  font-size: 1vw;
}


/* Linha avaliações */
.linha-avaliacoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}


.avaliacoes-info {
  margin-left: 6px;
  color: #000;
  font-weight: 700;
}

.btn-contato {
  background-color: #22b07b;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 3px;
  font-size: 2vw;
  font-weight:700;
}

/* Seção Avaliações */
.avaliacoes-lista { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px; 

}

.avaliacoes-lista h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 900;
}

/* Comentários com borda roxa arredondada */
.comentario{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.comentario img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 12px;
}

.coment-text{
  width: 90%;
  height: auto;
}
.coment-text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.5w;
}

.coment-text p {
  display: flex;
  font-size: 1.2vw;
  align-items: flex-start;
  border: 2px solid #6b47d1;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #fff;
}


/* pequenas responsividades */
@media (max-width: 800px) {
  .perfil { flex-direction: column; align-items:center; text-align:center; }
  .foto-perfil { width: 200px; }
  #cards { flex-direction: row; width:100%; }
  .faixa-roxa { font-size:12px; }
}