:root{
      --negro-tit: #161B23;
      --grey-tit: #3D3D3D;
}


.banner-hero{
  position: relative;
  display: flex;
  justify-content: center;
}

.banner-hero > ul{
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  padding: 44px 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  max-width: 840px;
  justify-content: center;
  align-items: center;
  gap: 34px;
  position: absolute;
  top: -48px;
  margin: 0 10px;
  background-color: white;
}

.banner-hero > ul > li{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.banner-hero > ul > li > div > p{
  color: var(--grey-tit);
  font-size: 16px;
}

.banner-hero > ul > li > div > p > span{
  color: var(--negro-tit);
  font-size: 26px;
  font-weight: bold;
}


@media (min-width: 768px) {

.banner-hero{
  position: relative;
}

.banner-hero > ul{
  border-radius: 60px;
  position: absolute;
  top: -60px;
  padding: 24px;
}

.banner-hero > ul > li{
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 25%;
}
}