/* SERVICIOS */
.servicios {
  background: #0f0f0f; /* negro elegante */
  padding: 60px 20px;

  display: flex;
  flex-direction: column;
  gap: 50px;

  text-align: center;
   padding-bottom: 100px;
}

.servicio {
  animation: fadeUp 0.8s ease forwards;
  opacity: 0; /* 🔥 importante para animación limpia */
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.servicio img {
 width: 60px;
  margin-bottom: 15px;

  filter: invert(1); /* 🔥 convierte a blanco */
  opacity: 0.9;
}

.servicio h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: white;

}

.servicio p {
  font-size: 16px;
  color: #bbb;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .servicios {
    flex-direction: row;
    justify-content: center;
    gap: 80px;
  }

  .servicio {
    max-width: 300px;
  }

  .servicio:hover {
    transform: translateY(-5px);
    transition: 0.3s;
  }
}