.logoaempresabyotek {
  width: 100%;
  height: auto;
  align-items:center;
  object-fit: contain; /* mostra a imagem inteira */
  border-radius: 14px;
  background: white;
  box-shadow: white;
  /*border:1px solid #3b2a52;*/
  padding: 10px; /* opcional: dá respiro */
  position: relative; 
  top: -50px;
  /** */ border: 1px solid #DEDEDE; /** */
}

/* ================== RESPONSIVO ================== */
@media (max-width: 1024px){
  .logoaempresabyotek {
    width: 100%;
    top: 0px;
  }
}

@media (max-width: 640px){
  .apps__grid{grid-template-columns:1fr}
}


/* ===== VMV (Visão, Missão, Valores) ===== */
.vmv-section{
  padding: 1rem 2rem 4rem 2rem;
  background: #f8f9fb; /* fundo leve pra destacar a seção */
}

.vmv-container{
  max-width: 1200px;
  margin: 0 auto;
}

.vmv-header{
  text-align: center;
  margin-bottom: 28px;
}

.vmv-header h2{
  margin: 0 0 0 0;
  font-size: 2rem;
  line-height: 1.2rem;
  color: #11141b;
}

.vmv-grid{
  display: grid;
  grid-template-columns: 0.6fr 0.7fr 1.7fr;
  gap: 3rem;
}

.vmv-card{
  border: 1px solid #989898;
  border-radius: 12px;
  margin-top: 2rem;
  padding: 22px;

  /* centralização vertical */
  display: flex;
  flex-direction: column;       /* garante que h3 fica em cima e p abaixo */
  justify-content: center;      /* alinha verticalmente */
  text-align: center;           /* centraliza horizontalmente */
}

.vmv-card h3{
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #212121;
}

.vmv-card p{
  margin: 12px 2px 12px 8px;
  text-align: left;
  color: #434343;
}

.vmv-card ul{
  margin: 12px 2px 12px 8px;
  color: #434343;
  padding: 0;
}

.vmv-card li{
  margin: 10px 0;
  text-align: left;
  color: #434343;
  list-style: none;
}

@media (max-width: 1024px) {
    .hero__grid {grid-template-columns: 1.2fr 0.8fr;}
    .vmv-grid{ grid-template-columns: 1fr 1fr }
    .vmv-grid > :nth-child(3){
      grid-column: 1 / -1; /* faz o 3º ocupar toda a largura */
    }
}

/* Responsividade */
@media (max-width: 900px){
  .hero__grid {grid-template-columns: 1fr;}
  .hero__text p {
    margin-right: auto;
    margin-left: auto;
    max-width: 92%;
  }
}
@media (max-width: 640px){
  .vmv-section {padding-left: 28px; padding-right: 28px;}
  .vmv-grid{ grid-template-columns: 1fr }
  .vmv-header h2{ font-size: 1.6rem; }
  .hero__text p {max-width: 98%;}
}