/*____________________ Contenedores de servicios ____________________*/
.servicio-grid {
  display: flex;
  gap: 8rem; /* Separacion de recuadros*/
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.servicio-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 20%;
  height: 360px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  border: none;
  border-radius: 0; /* Rectos */
}

.servicio-box:hover {
  transform: scale(1.06);
}

.servicio-text {
  color: white;
  text-align: center;
  padding: 0.7rem;
  font-weight: bold;
  font-size: 1.2rem;
}

@media (max-width: 1024px) {
  .servicio-box {
    width: 40%; /* En tablets: 2 por fila */
  }
}

@media (max-width: 600px) {
  .servicio-box {
    width: 80%; /* En móviles: 1 por fila */
  }

  .servicio-grid {
    gap: 2rem; /* Menor espacio para pantallas pequeñas */
  }
}